Migrate AccountSettings and AdvancedForm

AccountSettings/src/components/base.tsx

@@ -63,7 +63,7 @@ const validatorPhone = (rule: any, value: string, callback: (message?: string) =
 };
 
 interface BaseViewProps extends FormComponentProps {
-  currentUser: CurrentUser;
+  currentUser?: CurrentUser;
 }
 
 @connect(({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: { currentUser: CurrentUser } }) => ({
@@ -76,21 +76,26 @@ class BaseView extends Component<BaseViewProps> {
 
   setBaseInfo = () => {
     const { currentUser, form } = this.props;
+    if (currentUser) {
       Object.keys(form.getFieldsValue()).forEach(key => {
         const obj = {};
         obj[key] = currentUser[key] || null;
         form.setFieldsValue(obj);
       });
+    }
   };
 
   getAvatarURL() {
     const { currentUser } = this.props;
+    if (currentUser) {
       if (currentUser.avatar) {
         return currentUser.avatar;
       }
       const url = 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png';
       return url;
     }
+    return '';
+  }
   view: HTMLDivElement | undefined;
 
   getViewDom = (ref: HTMLDivElement) => {

AccountSettings/src/index.tsx

 import React, { Component } from 'react';
 import { connect } from 'dva';
+import { Dispatch } from 'redux';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import { Menu } from 'antd';
 import styles from './style.less';
@@ -7,14 +8,31 @@ import BaseView from './components/base';
 import SecurityView from './components/security';
 import BindingView from './components/binding';
 import NotificationView from './components/notification';
+import { CurrentUser } from './data';
 
 const { Item } = Menu;
 
-@connect(({ BLOCK_NAME_CAMEL_CASE }) => ({
+interface PAGE_NAME_UPPER_CAMEL_CASEProps {
+  dispatch: Dispatch;
+  currentUser: CurrentUser;
+}
+
+type PAGE_NAME_UPPER_CAMEL_CASEStateKeys = 'base' | 'security' | 'binding' | 'notification';
+interface PAGE_NAME_UPPER_CAMEL_CASEState {
+  mode: 'inline' | 'horizontal';
+  menuMap: {
+    [key: string]: React.ReactNode;
+  };
+  selectKey: PAGE_NAME_UPPER_CAMEL_CASEStateKeys;
+}
+@connect(({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: { currentUser: CurrentUser } }) => ({
   currentUser: BLOCK_NAME_CAMEL_CASE.currentUser,
 }))
-class PAGE_NAME_UPPER_CAMEL_CASE extends Component {
-  constructor(props) {
+class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
+  PAGE_NAME_UPPER_CAMEL_CASEProps,
+  PAGE_NAME_UPPER_CAMEL_CASEState
+> {
+  constructor(props: PAGE_NAME_UPPER_CAMEL_CASEProps) {
     super(props);
     const menuMap = {
       base: <FormattedMessage id="BLOCK_NAME.menuMap.basic" defaultMessage="Basic Settings" />,
@@ -38,6 +56,8 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component {
     };
   }
 
+  main: HTMLDivElement | undefined;
+
   componentDidMount() {
     const { dispatch } = this.props;
     dispatch({
@@ -51,7 +71,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component {
     window.removeEventListener('resize', this.resize);
   }
 
-  getmenu = () => {
+  getMenu = () => {
     const { menuMap } = this.state;
     return Object.keys(menuMap).map(item => <Item key={item}>{menuMap[item]}</Item>);
   };
@@ -61,7 +81,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component {
     return menuMap[selectKey];
   };
 
-  selectKey = ({ key }) => {
+  selectKey = (key: PAGE_NAME_UPPER_CAMEL_CASEStateKeys) => {
     this.setState({
       selectKey: key,
     });
@@ -75,7 +95,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component {
       if (!this.main) {
         return;
       }
-      let mode = 'inline';
+      let mode: 'inline' | 'horizontal' = 'inline';
       const { offsetWidth } = this.main;
       if (this.main.offsetWidth < 641 && offsetWidth > 400) {
         mode = 'horizontal';
@@ -117,12 +137,18 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component {
       <div
         className={styles.main}
         ref={ref => {
+          if (ref) {
             this.main = ref;
+          }
         }}
       >
-        <div className={styles.leftmenu}>
-          <Menu mode={mode} selectedKeys={[selectKey]} onClick={this.selectKey}>
-            {this.getmenu()}
+        <div className={styles.leftMenu}>
+          <Menu
+            mode={mode}
+            selectedKeys={[selectKey]}
+            onClick={({ key }) => this.selectKey(key as PAGE_NAME_UPPER_CAMEL_CASEStateKeys)}
+          >
+            {this.getMenu()}
           </Menu>
         </div>
         <div className={styles.right}>

AccountSettings/src/style.less

@@ -8,7 +8,7 @@
   padding-top: 16px;
   padding-bottom: 16px;
   overflow: auto;
-  .leftmenu {
+  .leftMenu {
     width: 224px;
     border-right: @border-width-base @border-style-base @border-color-split;
     :global {
@@ -86,7 +86,7 @@
 @media screen and (max-width: @screen-md) {
   .main {
     flex-direction: column;
-    .leftmenu {
+    .leftMenu {
       width: 100%;
       border: none;
     }

AdvancedForm/src/components/PageHeaderWrapper/index.js

-import React from 'react';
-import { FormattedMessage } from 'umi-plugin-react/locale';
-import Link from 'umi/link';
-import { PageHeader } from 'ant-design-pro';
-import styles from './index.less';
-
-const PageHeaderWrapper = ({ children, wrapperClassName, ...restProps }) => (
-  <div style={{ margin: '-24px -24px 0' }} className={wrapperClassName}>
-    <PageHeader
-      home={<FormattedMessage id="BLOCK_NAME.menu.home" defaultMessage="Home" />}
-      key="pageheader"
-      {...restProps}
-      linkElement={Link}
-      itemRender={item => {
-        if (item.locale) {
-          return <FormattedMessage id={item.locale} defaultMessage={item.title} />;
-        }
-        return item.title;
-      }}
-    />
-    {children ? <div className={styles.content}>{children}</div> : null}
-  </div>
-);
-
-export default PageHeaderWrapper;

AdvancedForm/src/components/PageHeaderWrapper/index.less

-@import '~antd/lib/style/themes/default.less';
-
-.content {
-  margin: 24px 24px 0;
-}
-
-@media screen and (max-width: @screen-sm) {
-  .content {
-    margin: 24px 0 0;
-  }
-}

AdvancedForm/src/index.js → AdvancedForm/src/index.tsx

-import React, { PureComponent } from 'react';
-import {
-  Card,
-  Button,
-  Form,
-  Icon,
-  Col,
-  Row,
-  DatePicker,
-  TimePicker,
-  Input,
-  Select,
-  Popover,
-} from 'antd';
+import React, { Component } from 'react';
+import { Card, Form, Icon, Col, Row, DatePicker, TimePicker, Input, Select, Popover } from 'antd';
 import { connect } from 'dva';
-import { FooterToolbar } from 'ant-design-pro';
-import PageHeaderWrapper from './components/PageHeaderWrapper';
 import TableForm from './components/TableForm';
 import styles from './style.less';
+import { FormComponentProps } from 'antd/lib/form';
+import { Dispatch } from 'redux';
 
 const { Option } = Select;
 const { RangePicker } = DatePicker;
@@ -57,11 +45,14 @@ const tableData = [
   },
 ];
 
-@connect(({ loading }) => ({
+interface PAGE_NAME_UPPER_CAMEL_CASEProps extends FormComponentProps {
+  dispatch: Dispatch;
+}
+
+@connect(({ loading }: { loading: { effects: any } }) => ({
   submitting: loading.effects['BLOCK_NAME_CAMEL_CASE/submitAdvancedForm'],
 }))
-@Form.create()
-class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent {
+class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEProps> {
   state = {
     width: '100%',
   };
@@ -83,7 +74,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent {
     if (!errors || errorCount === 0) {
       return null;
     }
-    const scrollToField = fieldKey => {
+    const scrollToField = (fieldKey: string) => {
       const labelNode = document.querySelector(`label[for="${fieldKey}"]`);
       if (labelNode) {
         labelNode.scrollIntoView(true);
@@ -119,7 +110,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent {
 
   resizeFooterToolbar = () => {
     requestAnimationFrame(() => {
-      const sider = document.querySelectorAll('.ant-layout-sider')[0];
+      const sider = document.querySelectorAll('.ant-layout-sider')[0] as HTMLDivElement;
       if (sider) {
         const width = `calc(100% - ${sider.style.width})`;
         const { width: stateWidth } = this.state;
@@ -149,16 +140,10 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent {
   render() {
     const {
       form: { getFieldDecorator },
-      submitting,
     } = this.props;
-    const { width } = this.state;
 
     return (
-      <PageHeaderWrapper
-        title="高级表单"
-        content="高级表单常见于一次性输入和提交大批量数据的场景。"
-        wrapperClassName={styles.advancedForm}
-      >
+      <>
         <Card title="仓库管理" className={styles.card} bordered={false}>
           <Form layout="vertical" hideRequiredMark>
             <Row gutter={16}>
@@ -309,15 +294,15 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent {
             initialValue: tableData,
           })(<TableForm />)}
         </Card>
-        <FooterToolbar style={{ width }}>
+        {/* <FooterToolbar style={{ width }}>
           {this.getErrorInfo()}
           <Button type="primary" onClick={this.validate} loading={submitting}>
             提交
           </Button>
-        </FooterToolbar>
-      </PageHeaderWrapper>
+        </FooterToolbar> */}
+      </>
     );
   }
 }
 
-export default PAGE_NAME_UPPER_CAMEL_CASE;
+export default Form.create()(PAGE_NAME_UPPER_CAMEL_CASE);

package.json

 {
   "private": true,
   "scripts": {
-    "dev": "PAGES_PATH='AccountCenter/src' umi dev",
+    "dev": "PAGES_PATH='AdvancedForm/src' umi dev",
     "lint:style": "stylelint \"src/**/*.less\" --syntax less",
     "lint": "eslint --ext .js src mock tests && npm run lint:style",
     "lint:fix": "eslint --fix --ext .js src mock tests && npm run lint:style",