bump antd-admin@5.2.0

feat: migrate to antd v4

.umirc.js

@@ -3,6 +3,8 @@ import { resolve } from 'path'
 import { i18n } from './src/utils/config'
 
 export default {
+  publicPath: 'https://cdn.antd-admin.zuiidea.com/',
+  hash: true,
   ignoreMomentLocale: true,
   targets: { ie: 9 },
   treeShaking: true,
@@ -99,4 +101,58 @@ export default {
       'lodash',
     ],
   ],
+  chainWebpack: function(config, { webpack }) {
+    config.merge({
+      optimization: {
+        minimize: true,
+        splitChunks: {
+          chunks: 'all',
+          minSize: 30000,
+          minChunks: 3,
+          automaticNameDelimiter: '.',
+          cacheGroups: {
+            react: {
+              name: 'react',
+              priority: 20,
+              test: /[\\/]node_modules[\\/](react|react-dom|react-dom-router)[\\/]/,
+            },
+            antd: {
+              name: 'antd',
+              priority: 20,
+              test: /[\\/]node_modules[\\/](antd|@ant-design\/icons|@ant-design\/compatible|ant-design-pro)[\\/]/,
+            },
+            echarts: {
+              name: 'echarts',
+              priority: 20,
+              test: /[\\/]node_modules[\\/]echarts|echarts-for-react|echarts-gl|echarts-liquidfill[\\/]/,
+            },
+            highcharts: {
+              name: 'highcharts',
+              priority: 20,
+              test: /[\\/]node_modules[\\/](highcharts-exporting|highcharts-more|react-highcharts)[\\/]/,
+            },
+            recharts: {
+              name: 'recharts',
+              priority: 20,
+              test: /[\\/]node_modules[\\/](recharts)[\\/]/,
+            },
+            draftjs: {
+              name: 'draftjs',
+              priority: 20,
+              test: /[\\/]node_modules[\\/](draftjs-to-html|draftjs-to-markdown)[\\/]/,
+            },
+            async: {
+              chunks: 'async',
+              minChunks: 2,
+              name: 'async',
+              maxInitialRequests: 1,
+              minSize: 0,
+              priority: 5,
+              reuseExistingChunk: true,
+            },
+          },
+        },
+      },
+    })
+  },
 }

docs/_sidebar.md

@@ -9,3 +9,4 @@
 - Guide
   - [Deploy](deploy.md)
 - [Change Log](change-log.md)
+- [FAQ](faq.md)

docs/faq.md

@@ -0,0 +1,9 @@
+# FAQ
+
+Most asked
+
+## create new page
+
+    1. just copy a page in /src/pages (route here auto generated by [umi](https://umijs.org/guide/router.html#basic-routing))
+    2. modify namespace/pathMatchRegexp in model.js
+    3. modify mock route.js to add a route

docs/now.dev.json

@@ -1,6 +1,6 @@
 {
+  "version": 2,
   "name": "antd-admin-devdoc",
   "alias": ["devdoc-antd-admin.now.sh", "devdoc.antd-admin.zuiidea.com"],
-  "type": "static",
   "public": true
 }

docs/now.json

@@ -1,6 +1,6 @@
 {
+  "version": 2,
   "name": "antd-admin-doc",
   "alias": ["doc-antd-admin.now.sh", "doc.antd-admin.zuiidea.com"],
-  "type": "static",
   "public": true
 }

docs/zh-cn/faq.md

@@ -0,0 +1,7 @@
+# 问题集锦
+
+## 新建页面
+
+    1. 直接从/src/pages复制一个page (会自动创建路由[umi](https://umijs.org/zh/guide/router.html#%E7%BA%A6%E5%AE%9A%E5%BC%8F%E8%B7%AF%E7%94%B1))
+    2. 修改 namespace/pathMatchRegexp 在 model.js
+    3. 修改 mock中route.js增加一条route

package.json

@@ -1,17 +1,19 @@
 {
   "name": "antd-admin",
-  "version": "5.1.3",
+  "version": "5.2.0",
   "license": "MIT",
   "description": "An admin dashboard application demo built upon Ant Design and UmiJS",
   "dependencies": {
+    "@ant-design/compatible": "^0.0.1-rc.1",
+    "@ant-design/icons": "^4.0.0",
     "@lingui/react": "^2.8.0",
     "ant-design-pro": "^2.3.0",
-    "antd": "^3.24.0",
+    "antd": "^4.0.0",
     "axios": "^0.19.0",
     "classnames": "^2.2.6",
     "d3-shape": "^1.3.0",
-    "draftjs-to-html": "^0.8.4",
-    "draftjs-to-markdown": "^0.5.1",
+    "draftjs-to-html": "^0.9.0",
+    "draftjs-to-markdown": "^0.6.0",
     "dva": "2.4.1",
     "dva-model-extend": "^0.1.2",
     "echarts": "^4.4.0",
@@ -46,26 +48,29 @@
     "babel-plugin-dev-expression": "^0.2.1",
     "babel-plugin-import": "^1.12.0",
     "babel-plugin-macros": "^2.6.0",
-    "babel-plugin-module-resolver": "^3.2.0",
-    "cross-env": "^6.0.0",
-    "eslint": "^5.15.0",
-    "eslint-config-react-app": "^4.0.0",
-    "eslint-plugin-flowtype": "^3.11.0",
+    "babel-plugin-module-resolver": "^4.0.0",
+    "cross-env": "^7.0.0",
+    "eslint": "^6.8.0",
+    "eslint-config-react-app": "^5.0.0",
+    "eslint-plugin-flowtype": "^4.6.0",
     "eslint-plugin-import": "^2.18.0",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.14.0",
-    "eslint-plugin-react-hooks": "^1.6.0",
-    "husky": "^2.7.0",
+    "eslint-plugin-react-hooks": "^2.5.0",
+    "husky": "^4.2.0",
     "less-vars-to-js": "^1.3.0",
-    "lint-staged": "^8.1.0",
+    "lint-staged": "^10.0.0",
     "mockjs": "^1.0.1-beta3",
     "module": "^1.2.5",
     "prettier": "^1.18.0",
-    "stylelint": "^10.0.0",
-    "stylelint-config-prettier": "^5.2.0",
-    "stylelint-config-standard": "^18.3.0",
-    "umi": "^2.10.0",
-    "umi-plugin-react": "^1.12.0"
+    "stylelint": "^13.0.0",
+    "stylelint-config-prettier": "^8.0.0",
+    "stylelint-config-standard": "^20.0.0",
+    "umi": "^2.13.0",
+    "umi-plugin-react": "^1.15.0"
+  },
+  "engines": {
+    "node": ">= 10.0.0"
   },
   "lint-staged": {
     "src/**/*.js": [

src/components/DropOption/DropOption.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Dropdown, Button, Icon, Menu } from 'antd'
+import { BarsOutlined, DownOutlined } from '@ant-design/icons'
+import { Dropdown, Button, Menu } from 'antd'
 
 const DropOption = ({
   onMenuClick,
@@ -17,8 +18,8 @@ const DropOption = ({
       {...dropdownProps}
     >
       <Button style={{ border: 'none', ...buttonStyle }}>
-        <Icon style={{ marginRight: 2 }} type="bars" />
-        <Icon type="down" />
+        <BarsOutlined style={{ marginRight: 2 }} />
+        <DownOutlined />
       </Button>
     </Dropdown>
   )

src/components/Layout/Bread.js

@@ -1,8 +1,9 @@
 import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
-import { Breadcrumb, Icon } from 'antd'
+import { Breadcrumb } from 'antd'
 import Link from 'umi/navlink'
 import withRouter from 'umi/withRouter'
+import { Icon as LegacyIcon } from '@ant-design/compatible'
 import { withI18n } from '@lingui/react'
 import { pathMatchRegexp, queryAncestors, addLangPrefix } from 'utils'
 import styles from './Bread.less'
@@ -14,7 +15,9 @@ class Bread extends PureComponent {
     return paths.map((item, key) => {
       const content = item && (
         <Fragment>
-          {item.icon && <Icon type={item.icon} style={{ marginRight: 4 }} />}
+          {item.icon && (
+            <LegacyIcon type={item.icon} style={{ marginRight: 4 }} />
+          )}
           {item.name}
         </Fragment>
       )

src/components/Layout/Header.js

@@ -1,7 +1,9 @@
 import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
-import { Menu, Icon, Layout, Avatar, Popover, Badge, List } from 'antd'
+import { Menu, Layout, Avatar, Popover, Badge, List } from 'antd'
 import { Ellipsis } from 'ant-design-pro'
+import { Icon as LegacyIcon } from '@ant-design/compatible'
+import { BellOutlined, RightOutlined } from '@ant-design/icons'
 import { Trans, withI18n } from '@lingui/react'
 import { setLocale } from 'utils'
 import moment from 'moment'
@@ -104,11 +106,7 @@ class Header extends PureComponent {
                     }
                     description={moment(item.date).fromNow()}
                   />
-                  <Icon
-                    style={{ fontSize: 10, color: '#ccc' }}
-                    type="right"
-                    theme="outlined"
-                  />
+                  <RightOutlined style={{ fontSize: 10, color: '#ccc' }} />
                 </List.Item>
               )}
             />
@@ -129,7 +127,7 @@ class Header extends PureComponent {
           offset={[-10, 10]}
           className={styles.iconButton}
         >
-          <Icon className={styles.iconFont} type="bell" />
+          <BellOutlined className={styles.iconFont} />
         </Badge>
       </Popover>
     )
@@ -146,7 +144,7 @@ class Header extends PureComponent {
           className={styles.button}
           onClick={onCollapseChange.bind(this, !collapsed)}
         >
-          <Icon
+          <LegacyIcon
             type={classnames({
               'menu-unfold': collapsed,
               'menu-fold': !collapsed,

src/components/Layout/Menu.js

@@ -1,6 +1,7 @@
 import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
-import { Menu, Icon } from 'antd'
+import { Icon as LegacyIcon } from '@ant-design/compatible'
+import { Menu } from 'antd'
 import Navlink from 'umi/navlink'
 import withRouter from 'umi/withRouter'
 import {
@@ -46,7 +47,7 @@ class SiderMenu extends PureComponent {
             key={item.id}
             title={
               <Fragment>
-                {item.icon && <Icon type={item.icon} />}
+                {item.icon && <LegacyIcon type={item.icon} />}
                 <span>{item.name}</span>
               </Fragment>
             }
@@ -58,7 +59,7 @@ class SiderMenu extends PureComponent {
       return (
         <Menu.Item key={item.id}>
           <Navlink to={addLangPrefix(item.route) || '#'}>
-            {item.icon && <Icon type={item.icon} />}
+            {item.icon && <LegacyIcon type={item.icon} />}
             <span>{item.name}</span>
           </Navlink>
         </Menu.Item>

src/components/Layout/Sider.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { Icon, Switch, Layout } from 'antd'
+import { Switch, Layout } from 'antd'
+import { BulbOutlined } from '@ant-design/icons'
 import { withI18n, Trans } from '@lingui/react'
 import ScrollBar from '../ScrollBar'
 import { config } from 'utils'
@@ -57,7 +58,7 @@ class Sider extends PureComponent {
         {!collapsed && (
           <div className={styles.switchTheme}>
             <span>
-              <Icon type="bulb" />
+              <BulbOutlined />
               <Trans>Switch Theme</Trans>
             </span>
             <Switch

src/layouts/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import withRouter from 'umi/withRouter'
-import { LocaleProvider } from 'antd'
+import { ConfigProvider } from 'antd'
 import { I18nProvider } from '@lingui/react'
 import { langFromPath, defaultLanguage } from 'utils'
 import zh_CN from 'antd/lib/locale-provider/zh_CN'
@@ -67,11 +67,11 @@ class Layout extends Component {
     if (!catalogs[language]) language = defaultLanguage
 
     return (
-      <LocaleProvider locale={languages[language]}>
+      <ConfigProvider locale={languages[language]}>
         <I18nProvider language={language} catalogs={catalogs}>
           <BaseLayout>{children}</BaseLayout>
         </I18nProvider>
-      </LocaleProvider>
+      </ConfigProvider>
     )
   }
 }

src/pages/404.js

@@ -1,12 +1,12 @@
 import React from 'react'
-import { Icon } from 'antd'
+import { FrownOutlined } from '@ant-design/icons'
 import { Page } from 'components'
 import styles from './404.less'
 
 const Error = () => (
   <Page inner>
     <div className={styles.error}>
-      <Icon type="frown-o" />
+      <FrownOutlined />
       <h1>404 Not Found</h1>
     </div>
   </Page>

src/pages/dashboard/components/numberCard.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Icon, Card } from 'antd'
+import { Icon as LegacyIcon } from '@ant-design/compatible'
+import { Card } from 'antd'
 import CountUp from 'react-countup'
 import styles from './numberCard.less'
 
@@ -11,7 +12,7 @@ function NumberCard({ icon, color, title, number, countUp }) {
       bordered={false}
       bodyStyle={{ padding: 10 }}
     >
-      <Icon className={styles.iconWarp} style={{ color }} type={icon} />
+      <LegacyIcon className={styles.iconWarp} style={{ color }} type={icon} />
       <div className={styles.content}>
         <p className={styles.title}>{title || 'No Title'}</p>
         <p className={styles.number}>

src/pages/login/index.js

@@ -1,8 +1,11 @@
 import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'dva'
-import { Button, Row, Form, Icon, Input } from 'antd'
+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 { GithubOutlined } from '@ant-design/icons'
 import { Trans, withI18n } from '@lingui/react'
 import { setLocale } from 'utils'
 import config from 'utils/config'
@@ -32,7 +35,7 @@ class Login extends PureComponent {
     let footerLinks = [
       {
         key: 'github',
-        title: <Icon type="github" />,
+        title: <GithubOutlined />,
         href: 'https://github.com/zuiidea/antd-admin',
         blankTarget: true,
       },

src/pages/request/index.js

@@ -1,19 +1,11 @@
 import React from 'react'
 import { request } from 'utils'
 import { apiPrefix } from 'utils/config'
-import {
-  Row,
-  Col,
-  Select,
-  Input,
-  Button,
-  List,
-  Tag,
-  Form,
-  Icon,
-  Checkbox,
-} from 'antd'
+import { Row, Col, Select, 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'
 import { Page } from 'components'
@@ -226,11 +218,9 @@ class RequestPage extends React.Component {
                     )}
                   </Col>
                   <Col style={{ marginTop: 8 }}>
-                    <Icon
+                    <CloseOutlined
                       onClick={this.handleRemoveField.bind(this, key)}
                       style={{ cursor: 'pointer' }}
-                      type="close"
-                      theme="outlined"
                     />
                   </Col>
                 </Row>

src/pages/user/components/Filter.js

@@ -1,10 +1,14 @@
-/* global document */
 import React, { Component } from 'react'
 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 { Form, Button, Row, Col, DatePicker, Input, Cascader } from 'antd'
+import { Button, Row, Col, DatePicker, Input, Cascader } from 'antd'
 import city from 'utils/city'
 
 const { Search } = Input

src/pages/user/components/Modal.js

@@ -1,6 +1,8 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { Form, Input, InputNumber, Radio, Modal, Cascader } from 'antd'
+import { Input, InputNumber, Radio, Modal, Cascader } from 'antd'
+import { Form } from '@ant-design/compatible'
+import '@ant-design/compatible/assets/index.css'
 import { Trans, withI18n } from '@lingui/react'
 import city from 'utils/city'