Merge pull request #1040 from vagusX/feat/migrate-antd-v4

feat: migrate to antd v4

package.json

@@ -1,12 +1,14 @@
 {
   "name": "antd-admin",
-  "version": "5.1.2",
+  "version": "5.1.3",
   "license": "MIT",
   "description": "An admin dashboard application demo built upon Ant Design and UmiJS",
   "dependencies": {
+    "@ant-design/compatible": "^0.0.1-alpha.7",
+    "@ant-design/icons": "^4.0.0-alpha.11",
     "@lingui/react": "^2.8.0",
     "ant-design-pro": "^2.3.0",
-    "antd": "^3.24.0",
+    "antd": "^4.0.0-alpha.11",
     "axios": "^0.19.0",
     "classnames": "^2.2.6",
     "d3-shape": "^1.3.0",

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/FilterItem/FilterItem.js

@@ -6,7 +6,7 @@ const FilterItem = ({ label = '', children }) => {
   const labelArray = label.split('')
   return (
     <div className={styles.filterItem}>
-      {labelArray.length > 0 ? (
+      {labelArray.length > 0 && (
         <div className={styles.labelWrap}>
           {labelArray.map((item, index) => (
             <span className="labelText" key={index}>
@@ -14,8 +14,6 @@ const FilterItem = ({ label = '', children }) => {
             </span>
           ))}
         </div>
-      ) : (
-        ''
       )}
       <div className={styles.item}>{children}</div>
     </div>

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,9 +15,9 @@ class Bread extends PureComponent {
     return paths.map((item, key) => {
       const content = item && (
         <Fragment>
-          {item.icon ? (
-            <Icon type={item.icon} style={{ marginRight: 4 }} />
-          ) : null}
+          {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'
@@ -28,13 +29,13 @@ class Sider extends PureComponent {
         trigger={null}
         collapsible
         collapsed={collapsed}
-        onBreakpoint={isMobile ? null : onCollapseChange}
+        onBreakpoint={!isMobile && onCollapseChange}
         className={styles.sider}
       >
         <div className={styles.brand}>
           <div className={styles.logo}>
             <img alt="logo" src={config.logoPath} />
-            {collapsed ? null : <h1>{config.siteName}</h1>}
+            {!collapsed && <h1>{config.siteName}</h1>}
           </div>
         </div>
 
@@ -54,10 +55,10 @@ class Sider extends PureComponent {
             />
           </ScrollBar>
         </div>
-        {collapsed ? null : (
+        {!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'