upgrade umi@3 partly

.umirc.js

@@ -72,7 +72,7 @@ export default {
             antd: {
               name: 'antd',
               priority: 20,
-              test: /[\\/]node_modules[\\/](antd|@ant-design\/icons|@ant-design\/compatible|ant-design-pro)[\\/]/,
+              test: /[\\/]node_modules[\\/](antd|@ant-design\/icons|@ant-design\/compatible)[\\/]/,
             },
             echarts: {
               name: 'echarts',

docs/change-log.md

@@ -28,7 +28,7 @@
 
 - Support internationalization, extract source fields from source code, load language packs on demand, and automatically translate online.
 
-- Support for the introduction of `ant-design-pro` components, `lodash` functions on demand.
+- Support for the introduction `lodash` functions on demand.
   
 - Support multiple layouts, which rules can be used according to the rules.
 

docs/zh-cn/change-log.md

@@ -28,7 +28,7 @@
 
 - 支持国际化，源码中抽离翻译字段，按需加载语言包，自动在线翻译。
 
-- 支持按需引入 `ant-design-pro` 组件、`lodash` 函数。
+- 支持按需引入 `lodash` 函数。
   
 - 支持多布局，可根据规则规定哪些路由使用哪种布局。
 

package.json

@@ -7,7 +7,6 @@
     "@ant-design/compatible": "^1.0.0",
     "@ant-design/icons": "^4.0.0",
     "@lingui/react": "^2.8.0",
-    "ant-design-pro": "^2.3.0",
     "antd": "^4.0.0",
     "axios": "^0.19.0",
     "classnames": "^2.2.6",
@@ -39,14 +38,14 @@
     "store": "^2.0.0"
   },
   "devDependencies": {
-    "@lingui/babel-preset-react": "^2.8.2",
-    "@lingui/cli": "^2.8.2",
-    "@lingui/loader": "^2.8.2",
+    "@lingui/babel-preset-react": "^2.9.0",
+    "@lingui/cli": "^2.9.0",
+    "@lingui/loader": "^2.9.0",
     "@umijs/preset-react": "^1.4.0",
     "babel-eslint": "^10.0.1",
     "babel-plugin-dev-expression": "^0.2.1",
     "babel-plugin-module-resolver": "^4.0.0",
-    "cross-env": "^7.0.0",
+    "cross-env": "^6.0.0",
     "eslint": "^6.8.0",
     "eslint-config-react-app": "^5.0.0",
     "eslint-plugin-flowtype": "^4.6.0",

src/components/Ellipsis/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { TooltipProps } from 'antd/lib/tooltip';
+
+export interface EllipsisTooltipProps extends TooltipProps {
+  title?: undefined;
+  overlayStyle?: undefined;
+}
+
+export interface EllipsisProps {
+  tooltip?: boolean | EllipsisTooltipProps;
+  length?: number;
+  lines?: number;
+  style?: React.CSSProperties;
+  className?: string;
+  fullWidthRecognition?: boolean;
+}
+
+export function getStrFullLength(str: string): number;
+export function cutStrByFullLength(str: string, maxLength: number): string;
+
+export default class Ellipsis extends React.Component<EllipsisProps, any> {}

src/components/Ellipsis/index.js

@@ -0,0 +1,270 @@
+import React, { Component } from 'react';
+import { Tooltip } from 'antd';
+import classNames from 'classnames';
+import styles from './index.less';
+
+/* eslint react/no-did-mount-set-state: 0 */
+/* eslint no-param-reassign: 0 */
+
+const isSupportLineClamp = document.body.style.webkitLineClamp !== undefined;
+
+const TooltipOverlayStyle = {
+  overflowWrap: 'break-word',
+  wordWrap: 'break-word',
+};
+
+export const getStrFullLength = (str = '') =>
+  str.split('').reduce((pre, cur) => {
+    const charCode = cur.charCodeAt(0);
+    if (charCode >= 0 && charCode <= 128) {
+      return pre + 1;
+    }
+    return pre + 2;
+  }, 0);
+
+export const cutStrByFullLength = (str = '', maxLength) => {
+  let showLength = 0;
+  return str.split('').reduce((pre, cur) => {
+    const charCode = cur.charCodeAt(0);
+    if (charCode >= 0 && charCode <= 128) {
+      showLength += 1;
+    } else {
+      showLength += 2;
+    }
+    if (showLength <= maxLength) {
+      return pre + cur;
+    }
+    return pre;
+  }, '');
+};
+
+const getTooltip = ({ tooltip, overlayStyle, title, children }) => {
+  if (tooltip) {
+    const props = tooltip === true ? { overlayStyle, title } : { ...tooltip, overlayStyle, title };
+    return <Tooltip {...props}>{children}</Tooltip>;
+  }
+  return children;
+};
+
+const EllipsisText = ({ text, length, tooltip, fullWidthRecognition, ...other }) => {
+  if (typeof text !== 'string') {
+    throw new Error('Ellipsis children must be string.');
+  }
+  const textLength = fullWidthRecognition ? getStrFullLength(text) : text.length;
+  if (textLength <= length || length < 0) {
+    return <span {...other}>{text}</span>;
+  }
+  const tail = '...';
+  let displayText;
+  if (length - tail.length <= 0) {
+    displayText = '';
+  } else {
+    displayText = fullWidthRecognition ? cutStrByFullLength(text, length) : text.slice(0, length);
+  }
+
+  const spanAttrs = tooltip ? {} : { ...other };
+  return getTooltip({
+    tooltip,
+    overlayStyle: TooltipOverlayStyle,
+    title: text,
+    children: (
+      <span {...spanAttrs}>
+        {displayText}
+        {tail}
+      </span>
+    ),
+  });
+};
+
+export default class Ellipsis extends Component {
+  state = {
+    text: '',
+    targetCount: 0,
+  };
+
+  componentDidMount() {
+    if (this.node) {
+      this.computeLine();
+    }
+  }
+
+  componentDidUpdate(perProps) {
+    const { lines } = this.props;
+    if (lines !== perProps.lines) {
+      this.computeLine();
+    }
+  }
+
+  computeLine = () => {
+    const { lines } = this.props;
+    if (lines && !isSupportLineClamp) {
+      const text = this.shadowChildren.innerText || this.shadowChildren.textContent;
+      const lineHeight = parseInt(getComputedStyle(this.root).lineHeight, 10);
+      const targetHeight = lines * lineHeight;
+      this.content.style.height = `${targetHeight}px`;
+      const totalHeight = this.shadowChildren.offsetHeight;
+      const shadowNode = this.shadow.firstChild;
+
+      if (totalHeight <= targetHeight) {
+        this.setState({
+          text,
+          targetCount: text.length,
+        });
+        return;
+      }
+
+      // bisection
+      const len = text.length;
+      const mid = Math.ceil(len / 2);
+
+      const count = this.bisection(targetHeight, mid, 0, len, text, shadowNode);
+
+      this.setState({
+        text,
+        targetCount: count,
+      });
+    }
+  };
+
+  bisection = (th, m, b, e, text, shadowNode) => {
+    const suffix = '...';
+    let mid = m;
+    let end = e;
+    let begin = b;
+    shadowNode.innerHTML = text.substring(0, mid) + suffix;
+    let sh = shadowNode.offsetHeight;
+
+    if (sh <= th) {
+      shadowNode.innerHTML = text.substring(0, mid + 1) + suffix;
+      sh = shadowNode.offsetHeight;
+      if (sh > th || mid === begin) {
+        return mid;
+      }
+      begin = mid;
+      if (end - begin === 1) {
+        mid = 1 + begin;
+      } else {
+        mid = Math.floor((end - begin) / 2) + begin;
+      }
+      return this.bisection(th, mid, begin, end, text, shadowNode);
+    }
+    if (mid - 1 < 0) {
+      return mid;
+    }
+    shadowNode.innerHTML = text.substring(0, mid - 1) + suffix;
+    sh = shadowNode.offsetHeight;
+    if (sh <= th) {
+      return mid - 1;
+    }
+    end = mid;
+    mid = Math.floor((end - begin) / 2) + begin;
+    return this.bisection(th, mid, begin, end, text, shadowNode);
+  };
+
+  handleRoot = n => {
+    this.root = n;
+  };
+
+  handleContent = n => {
+    this.content = n;
+  };
+
+  handleNode = n => {
+    this.node = n;
+  };
+
+  handleShadow = n => {
+    this.shadow = n;
+  };
+
+  handleShadowChildren = n => {
+    this.shadowChildren = n;
+  };
+
+  render() {
+    const { text, targetCount } = this.state;
+    const {
+      children,
+      lines,
+      length,
+      className,
+      tooltip,
+      fullWidthRecognition,
+      ...restProps
+    } = this.props;
+
+    const cls = classNames(styles.ellipsis, className, {
+      [styles.lines]: lines && !isSupportLineClamp,
+      [styles.lineClamp]: lines && isSupportLineClamp,
+    });
+
+    if (!lines && !length) {
+      return (
+        <span className={cls} {...restProps}>
+          {children}
+        </span>
+      );
+    }
+
+    // length
+    if (!lines) {
+      return (
+        <EllipsisText
+          className={cls}
+          length={length}
+          text={children || ''}
+          tooltip={tooltip}
+          fullWidthRecognition={fullWidthRecognition}
+          {...restProps}
+        />
+      );
+    }
+
+    const id = `antd-pro-ellipsis-${`${new Date().getTime()}${Math.floor(Math.random() * 100)}`}`;
+
+    // support document.body.style.webkitLineClamp
+    if (isSupportLineClamp) {
+      const style = `#${id}{-webkit-line-clamp:${lines};-webkit-box-orient: vertical;}`;
+
+      const node = (
+        <div id={id} className={cls} {...restProps}>
+          <style>{style}</style>
+          {children}
+        </div>
+      );
+
+      return getTooltip({
+        tooltip,
+        overlayStyle: TooltipOverlayStyle,
+        title: children,
+        children: node,
+      });
+    }
+
+    const childNode = (
+      <span ref={this.handleNode}>
+        {targetCount > 0 && text.substring(0, targetCount)}
+        {targetCount > 0 && targetCount < text.length && '...'}
+      </span>
+    );
+
+    return (
+      <div {...restProps} ref={this.handleRoot} className={cls}>
+        <div ref={this.handleContent}>
+          {getTooltip({
+            tooltip,
+            overlayStyle: TooltipOverlayStyle,
+            title: text,
+            children: childNode,
+          })}
+          <div className={styles.shadow} ref={this.handleShadowChildren}>
+            {children}
+          </div>
+          <div className={styles.shadow} ref={this.handleShadow}>
+            <span>{text}</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/components/Ellipsis/index.less

@@ -0,0 +1,24 @@
+.ellipsis {
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  word-break: break-all;
+}
+
+.lines {
+  position: relative;
+  .shadow {
+    position: absolute;
+    z-index: -999;
+    display: block;
+    color: transparent;
+    opacity: 0;
+  }
+}
+
+.lineClamp {
+  position: relative;
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

src/components/Ellipsis/index.md

@@ -0,0 +1,17 @@
+---
+title: Ellipsis
+subtitle: 文本自动省略号
+cols: 1
+order: 10
+---
+
+文本过长自动处理省略号，支持按照文本长度和最大行数两种方式截取。
+
+## API
+
+| 参数                 | 说明                                             | 类型    | 默认值 |
+| -------------------- | ------------------------------------------------ | ------- | ------ |
+| tooltip              | 移动到文本展示完整内容的提示                     | boolean | -      |
+| length               | 在按照长度截取下的文本最大字符数，超过则截取省略 | number  | -      |
+| lines                | 在按照行数截取下最大的行数，超过则截取省略       | number  | `1`    |
+| fullWidthRecognition | 是否将全角字符的长度视为 2 来计算字符串长度      | boolean | -      |

src/components/Ellipsis/index.test.js

@@ -0,0 +1,13 @@
+import { getStrFullLength, cutStrByFullLength } from './index';
+
+describe('test calculateShowLength', () => {
+  it('get full length', () => {
+    expect(getStrFullLength('一二，a,')).toEqual(8);
+  });
+  it('cut str by full length', () => {
+    expect(cutStrByFullLength('一二，a,', 7)).toEqual('一二，a');
+  });
+  it('cut str when length small', () => {
+    expect(cutStrByFullLength('一22三', 5)).toEqual('一22');
+  });
+});

src/components/GlobalFooter/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface GlobalFooterProps {
+  links?: Array<{
+    key?: string;
+    title: React.ReactNode;
+    href: string;
+    blankTarget?: boolean;
+  }>;
+  copyright?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export default class GlobalFooter extends React.Component<GlobalFooterProps, any> {}

src/components/GlobalFooter/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import classNames from 'classnames';
+import styles from './index.less';
+
+const GlobalFooter = ({ className, links, copyright }) => {
+  const clsString = classNames(styles.globalFooter, className);
+  return (
+    <footer className={clsString}>
+      {links && (
+        <div className={styles.links}>
+          {links.map(link => (
+            <a
+              key={link.key}
+              title={link.key}
+              target={link.blankTarget ? '_blank' : '_self'}
+              href={link.href}
+            >
+              {link.title}
+            </a>
+          ))}
+        </div>
+      )}
+      {copyright && <div className={styles.copyright}>{copyright}</div>}
+    </footer>
+  );
+};
+
+export default GlobalFooter;

src/components/GlobalFooter/index.less

@@ -0,0 +1,29 @@
+@import '~antd/lib/style/themes/default.less';
+
+.globalFooter {
+  margin: 48px 0 24px 0;
+  padding: 0 16px;
+  text-align: center;
+
+  .links {
+    margin-bottom: 8px;
+
+    a {
+      color: @text-color-secondary;
+      transition: all 0.3s;
+
+      &:not(:last-child) {
+        margin-right: 40px;
+      }
+
+      &:hover {
+        color: @text-color;
+      }
+    }
+  }
+
+  .copyright {
+    color: @text-color-secondary;
+    font-size: @font-size-base;
+  }
+}

src/components/GlobalFooter/index.md

@@ -0,0 +1,15 @@
+---
+title: GlobalFooter
+subtitle: 全局页脚
+cols: 1
+order: 7
+---
+
+页脚属于全局导航的一部分，作为对顶部导航的补充，通过传递数据控制展示内容。
+
+## API
+
+| 参数      | 说明     | 类型                                                             | 默认值 |
+| --------- | -------- | ---------------------------------------------------------------- | ------ |
+| links     | 链接数据 | array<{ title: ReactNode, href: string, blankTarget?: boolean }> | -      |
+| copyright | 版权信息 | ReactNode                                                        | -      |

src/components/Layout/Header.js

@@ -1,7 +1,7 @@
 import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { Menu, Layout, Avatar, Popover, Badge, List } from 'antd'
-import { Ellipsis } from 'ant-design-pro'
+import { Ellipsis } from 'components'
 import { Icon as LegacyIcon } from '@ant-design/compatible'
 import { BellOutlined, RightOutlined } from '@ant-design/icons'
 import { Trans, withI18n } from '@lingui/react'

src/components/index.js

@@ -3,7 +3,9 @@ import FilterItem from './FilterItem'
 import DropOption from './DropOption'
 import Loader from './Loader'
 import ScrollBar from './ScrollBar'
+import GlobalFooter from './GlobalFooter'
+import Ellipsis from './Ellipsis'
 import * as MyLayout from './Layout/index.js'
 import Page from './Page'
 
-export { MyLayout, Editor, FilterItem, DropOption, Loader, Page, ScrollBar }
+export { MyLayout, Editor, GlobalFooter, Ellipsis, FilterItem, DropOption, Loader, Page, ScrollBar }

src/layouts/PrimaryLayout.js

@@ -4,9 +4,8 @@ import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { withRouter } from 'umi'
 import { connect } from 'dva'
-import { MyLayout } from 'components'
+import { MyLayout, GlobalFooter } from 'components'
 import { BackTop, Layout, Drawer } from 'antd'
-import { GlobalFooter } from 'ant-design-pro'
 import { enquireScreen, unenquireScreen } from 'enquire-js'
 const { pathToRegexp } = require("path-to-regexp")
 import { config, getLocale } from 'utils'

src/layouts/index.js

@@ -3,6 +3,7 @@ import { withRouter } from 'umi'
 import { ConfigProvider } from 'antd'
 import { I18nProvider } from '@lingui/react'
 import { getLocale } from 'utils'
+const { i18n } = require('../../src/utils/config')
 import zh_CN from 'antd/lib/locale-provider/zh_CN'
 import en_US from 'antd/lib/locale-provider/en_US'
 import pt_BR from 'antd/lib/locale-provider/pt_BR'
@@ -14,6 +15,7 @@ const languages = {
   en: en_US,
   'pt-br': pt_BR,
 }
+const { defaultLanguage } = i18n
 
 @withRouter
 class Layout extends Component {
@@ -59,10 +61,10 @@ class Layout extends Component {
   }
 
   render() {
-    const { location, children } = this.props
+    const { children } = this.props
     const { catalogs } = this.state
 
-    let language = langFromPath(location.pathname)
+    let language = getLocale()
     // If the language pack is not loaded or is loading, use the default language
     if (!catalogs[language]) language = defaultLanguage
 

src/pages/login/index.js

@@ -1,10 +1,8 @@
 import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'dva'
-import { Button, Row, Input } from 'antd'
-import { GlobalFooter } from 'ant-design-pro'
-import { Form } from '@ant-design/compatible'
-import '@ant-design/compatible/assets/index.css'
+import { Button, Row, Input, Form } from 'antd'
+import { GlobalFooter } from 'components'
 import { GithubOutlined } from '@ant-design/icons'
 import { Trans, withI18n } from '@lingui/react'
 import { setLocale } from 'utils'
@@ -12,13 +10,12 @@ import config from 'utils/config'
 
 import styles from './index.less'
 const FormItem = Form.Item
+const [form] = Form.useForm();
 
 @withI18n()
-@connect(({ loading }) => ({ loading }))
-@Form.create()
+@connect(({ loading, dispatch }) => ({ loading, dispatch }))
 class Login extends PureComponent {
   handleOk = () => {
-    const { dispatch, form } = this.props
     const { validateFieldsAndScroll } = form
     validateFieldsAndScroll((errors, values) => {
       if (errors) {
@@ -29,8 +26,7 @@ class Login extends PureComponent {
   }
 
   render() {
-    const { loading, form, i18n } = this.props
-    const { getFieldDecorator } = form
+    const { loading, i18n } = this.props
 
     let footerLinks = [
       {
@@ -59,35 +55,21 @@ class Login extends PureComponent {
             <img alt="logo" src={config.logoPath} />
             <span>{config.siteName}</span>
           </div>
-          <form>
-            <FormItem hasFeedback>
-              {getFieldDecorator('username', {
-                rules: [
-                  {
-                    required: true,
-                  },
-                ],
-              })(
+          <Form>
+            <FormItem name="username" 
+              rules={[{ required: true }]} hasFeedback>
                 <Input
                   onPressEnter={this.handleOk}
                   placeholder={i18n.t`Username`}
                 />
-              )}
             </FormItem>
-            <FormItem hasFeedback>
-              {getFieldDecorator('password', {
-                rules: [
-                  {
-                    required: true,
-                  },
-                ],
-              })(
+            <FormItem name="password"
+              rules={[{ required: true }]} hasFeedback>
                 <Input
                   type="password"
                   onPressEnter={this.handleOk}
                   placeholder={i18n.t`Password`}
                 />
-              )}
             </FormItem>
             <Row>
               <Button
@@ -98,7 +80,7 @@ class Login extends PureComponent {
                 <Trans>Sign in</Trans>
               </Button>
               <p>
-                <span>
+                <span className="margin-right">
                   <Trans>Username</Trans>
                   ：guest
                 </span>
@@ -108,7 +90,7 @@ class Login extends PureComponent {
                 </span>
               </p>
             </Row>
-          </form>
+          </Form>
         </div>
         <div className={styles.footer}>
           <GlobalFooter links={footerLinks} copyright={config.copyright} />

src/pages/post/components/List.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react'
 import { Table, Avatar } from 'antd'
 import { withI18n } from '@lingui/react'
-import { Ellipsis } from 'ant-design-pro'
+import { Ellipsis } from 'components'
 import styles from './List.less'
 
 @withI18n()

src/pages/request/index.js

@@ -1,10 +1,8 @@
 import React from 'react'
 import { request } from 'utils'
 import { apiPrefix } from 'utils/config'
-import { Row, Col, Select, Input, Button, List, Tag, Checkbox } from 'antd'
+import { Row, Col, Select, Form, Input, Button, List, Tag, Checkbox } from 'antd'
 import classnames from 'classnames'
-import { Form } from '@ant-design/compatible'
-import '@ant-design/compatible/assets/index.css'
 import { CloseOutlined } from '@ant-design/icons'
 import { Trans } from '@lingui/react'
 import api from '@/services/api'
@@ -38,7 +36,6 @@ const requests = Object.values(api).map(item => {
 })
 
 let uuid = 2
-@Form.create()
 class RequestPage extends React.Component {
   constructor(props) {
     super(props)
@@ -188,7 +185,7 @@ class RequestPage extends React.Component {
                 <Trans>Send</Trans>
               </Button>
             </Row>
-
+            <Form >
             <div
               className={classnames(styles.paramsBlock, {
                 [styles.hideParams]: !visible,
@@ -203,19 +200,19 @@ class RequestPage extends React.Component {
                   key={key}
                 >
                   <Col style={{ marginTop: 8 }}>
-                    {getFieldDecorator(`check[${key}]`, {
-                      initialValue: true,
-                    })(<Checkbox defaultChecked />)}
+                    <Form.Item name={`check[${key}]`}>
+                      <Checkbox defaultChecked />
+                    </Form.Item>
                   </Col>
                   <Col style={{ marginTop: 8 }}>
-                    {getFieldDecorator(`key[${key}]`)(
+                    <Form.Item name={`key[${key}]`}>
                       <Input placeholder="Key" />
-                    )}
+                    </Form.Item>
                   </Col>
                   <Col style={{ marginTop: 8 }}>
-                    {getFieldDecorator(`value[${key}]`)(
+                    <Form.Item name={`value[${key}]`}>
                       <Input placeholder="Value" />
-                    )}
+                    </Form.Item>
                   </Col>
                   <Col style={{ marginTop: 8 }}>
                     <CloseOutlined
@@ -232,7 +229,7 @@ class RequestPage extends React.Component {
                 </Button>
               </Row>
             </div>
-
+            </Form>
             <div className={styles.result}>{result}</div>
           </Col>
         </Row>

src/pages/user/components/Filter.js

@@ -3,12 +3,8 @@ import PropTypes from 'prop-types'
 import moment from 'moment'
 import { FilterItem } from 'components'
 
-/* global document */
-import { Form } from '@ant-design/compatible'
-
-import '@ant-design/compatible/assets/index.css'
 import { Trans, withI18n } from '@lingui/react'
-import { Button, Row, Col, DatePicker, Input, Cascader } from 'antd'
+import { Button, Row, Col, DatePicker, Form, Input, Cascader } from 'antd'
 import city from 'utils/city'
 
 const { Search } = Input
@@ -28,7 +24,6 @@ const TwoColProps = {
 }
 
 @withI18n()
-@Form.create()
 class Filter extends Component {
   handleFields = fields => {
     const { createTime } = fields
@@ -42,7 +37,8 @@ class Filter extends Component {
   }
 
   handleSubmit = () => {
-    const { onFilterChange, form } = this.props
+    const { onFilterChange } = this.props
+    const [form] = Form.useForm()
     const { getFieldsValue } = form
 
     let fields = getFieldsValue()
@@ -51,7 +47,7 @@ class Filter extends Component {
   }
 
   handleReset = () => {
-    const { form } = this.props
+    const [form] = Form.useForm()
     const { getFieldsValue, setFieldsValue } = form
 
     const fields = getFieldsValue()
@@ -78,7 +74,8 @@ class Filter extends Component {
   }
 
   render() {
-    const { onAdd, filter, form, i18n } = this.props
+    const { onAdd, filter, i18n } = this.props
+    const [form] = Form.useForm()
     const { getFieldDecorator } = form
     const { name, address } = filter
 
@@ -91,14 +88,15 @@ class Filter extends Component {
     }
 
     return (
+      <Form initialValue={{ name, address, createTime: initialCreateTime }}>
       <Row gutter={24}>
         <Col {...ColProps} xl={{ span: 4 }} md={{ span: 8 }}>
-          {getFieldDecorator('name', { initialValue: name })(
+          <Form.Item name = "name">
             <Search
-              placeholder={i18n.t`Search Name`}
-              onSearch={this.handleSubmit}
-            />
-          )}
+                placeholder={i18n.t`Search Name`}
+                onSearch={this.handleSubmit}
+              />
+          </Form.Item>
         </Col>
         <Col
           {...ColProps}
@@ -106,7 +104,7 @@ class Filter extends Component {
           md={{ span: 8 }}
           id="addressCascader"
         >
-          {getFieldDecorator('address', { initialValue: address })(
+          <Form.Item name = "address">
             <Cascader
               style={{ width: '100%' }}
               options={city}
@@ -116,7 +114,7 @@ class Filter extends Component {
                 document.getElementById('addressCascader')
               }
             />
-          )}
+          </Form.Item>
         </Col>
         <Col
           {...ColProps}
@@ -126,9 +124,7 @@ class Filter extends Component {
           id="createTimeRangePicker"
         >
           <FilterItem label={i18n.t`CreateTime`}>
-            {getFieldDecorator('createTime', {
-              initialValue: initialCreateTime,
-            })(
+            <Form.Item name="createTime">
               <RangePicker
                 style={{ width: '100%' }}
                 onChange={this.handleChange.bind(this, 'createTime')}
@@ -136,7 +132,7 @@ class Filter extends Component {
                   return document.getElementById('createTimeRangePicker')
                 }}
               />
-            )}
+            </Form.Item>
           </FilterItem>
         </Col>
         <Col
@@ -163,7 +159,7 @@ class Filter extends Component {
             </Button>
           </Row>
         </Col>
-      </Row>
+      </Row></Form>
     )
   }
 }

src/pages/user/components/Modal.js

@@ -1,8 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { Input, InputNumber, Radio, Modal, Cascader } from 'antd'
-import { Form } from '@ant-design/compatible'
-import '@ant-design/compatible/assets/index.css'
+import { Form, Input, InputNumber, Radio, Modal, Cascader } from 'antd'
 import { Trans, withI18n } from '@lingui/react'
 import city from 'utils/city'
 
@@ -17,10 +15,10 @@ const formItemLayout = {
   },
 }
 @withI18n()
-@Form.create()
 class UserModal extends PureComponent {
   handleOk = () => {
-    const { item = {}, onOk, form } = this.props
+    const { item = {}, onOk } = this.props
+    const [form] = Form.useForm()
     const { validateFields, getFieldsValue } = form
 
     validateFields(errors => {
@@ -42,37 +40,17 @@ class UserModal extends PureComponent {
 
     return (
       <Modal {...modalProps} onOk={this.handleOk}>
-        <Form layout="horizontal">
-          <FormItem label={i18n.t`Name`} hasFeedback {...formItemLayout}>
-            {getFieldDecorator('name', {
-              initialValue: item.name,
-              rules: [
-                {
-                  required: true,
-                },
-              ],
-            })(<Input />)}
+        <Form initialValues={{ ...item, address:item.address && item.address.split(' ') , }} layout="horizontal">
+          <FormItem name='name' rules={{required: true}}
+            label={i18n.t`Name`} hasFeedback {...formItemLayout}>
+            <Input />
           </FormItem>
-          <FormItem label={i18n.t`NickName`} hasFeedback {...formItemLayout}>
-            {getFieldDecorator('nickName', {
-              initialValue: item.nickName,
-              rules: [
-                {
-                  required: true,
-                },
-              ],
-            })(<Input />)}
+          <FormItem name='nickName' rules={{required: true}} 
+            label={i18n.t`NickName`} hasFeedback {...formItemLayout}>
+            <Input />
           </FormItem>
-          <FormItem label={i18n.t`Gender`} hasFeedback {...formItemLayout}>
-            {getFieldDecorator('isMale', {
-              initialValue: item.isMale,
-              rules: [
-                {
-                  required: true,
-                  type: 'boolean',
-                },
-              ],
-            })(
+          <FormItem name='isMale' rules={{required: true}}
+            label={i18n.t`Gender`} hasFeedback {...formItemLayout}>
               <Radio.Group>
                 <Radio value>
                   <Trans>Male</Trans>
@@ -81,58 +59,25 @@ class UserModal extends PureComponent {
                   <Trans>Female</Trans>
                 </Radio>
               </Radio.Group>
-            )}
           </FormItem>
-          <FormItem label={i18n.t`Age`} hasFeedback {...formItemLayout}>
-            {getFieldDecorator('age', {
-              initialValue: item.age,
-              rules: [
-                {
-                  required: true,
-                  type: 'number',
-                },
-              ],
-            })(<InputNumber min={18} max={100} />)}
+          <FormItem name='age' label={i18n.t`Age`} hasFeedback {...formItemLayout}>
+            <InputNumber min={18} max={100} />
           </FormItem>
-          <FormItem label={i18n.t`Phone`} hasFeedback {...formItemLayout}>
-            {getFieldDecorator('phone', {
-              initialValue: item.phone,
-              rules: [
-                {
-                  required: true,
-                  pattern: /^1[34578]\d{9}$/,
-                  message: i18n.t`The input is not valid phone!`,
-                },
-              ],
-            })(<Input />)}
+          <FormItem name='phone' rules={{required: true,pattern: /^1[34578]\d{9}$/,message: i18n.t`The input is not valid phone!`,}}
+            label={i18n.t`Phone`} hasFeedback {...formItemLayout}>
+            <Input />
           </FormItem>
-          <FormItem label={i18n.t`Email`} hasFeedback {...formItemLayout}>
-            {getFieldDecorator('email', {
-              initialValue: item.email,
-              rules: [
-                {
-                  required: true,
-                  pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/,
-                  message: i18n.t`The input is not valid E-mail!`,
-                },
-              ],
-            })(<Input />)}
+          <FormItem name='email' rules={{ required: true, pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/, message: i18n.t`The input is not valid E-mail!`, }}
+            label={i18n.t`Email`} hasFeedback {...formItemLayout}>
+            <Input />
           </FormItem>
-          <FormItem label={i18n.t`Address`} hasFeedback {...formItemLayout}>
-            {getFieldDecorator('address', {
-              initialValue: item.address && item.address.split(' '),
-              rules: [
-                {
-                  required: true,
-                },
-              ],
-            })(
+          <FormItem name='address' rules={{ required: true, }}
+            label={i18n.t`Address`} hasFeedback {...formItemLayout}>
               <Cascader
                 style={{ width: '100%' }}
                 options={city}
                 placeholder={i18n.t`Pick an address`}
               />
-            )}
           </FormItem>
         </Form>
       </Modal>