Optimization：change to antd drawer

.eslintrc.js

@@ -19,6 +19,7 @@ module.exports = {
     'react/prop-types': [0],
     'react/prefer-stateless-function': [0],
     'react/jsx-one-expression-per-line': [0],
+    'jsx-a11y/href-no-hash': [0],
     'react/jsx-wrap-multilines': [
       'error',
       {

config/config.js

@@ -66,11 +66,12 @@ export default {
           routes: [
             { path: '/form/basic-form', name: 'basicform', component: './Forms/BasicForm' },
             {
-              name: 'stepform',
               path: '/form/step-form',
+              name: 'stepform',
               component: './Forms/StepForm',
               hideChildren: true,
               routes: [
+                { path: '/form/step-form', name: 'stepform', redirect: '/form/step-form/info' },
                 { path: '/form/step-form/info', name: 'info', component: './Forms/StepForm/Step1' },
                 {
                   path: '/form/step-form/confirm',

package.json

@@ -23,28 +23,25 @@
   },
   "dependencies": {
     "@antv/data-set": "^0.8.0",
+    "antd": "^3.7.0",
     "bizcharts": "^3.1.10",
     "bizcharts-plugin-slider": "^2.0.3",
     "classnames": "^2.2.6",
     "enquire-js": "^0.2.1",
-    "eslint-config-umi": "^0.1.4",
-    "eslint-plugin-flowtype": "2",
-    "lodash": "^4.17.4",
     "lodash-decorators": "^6.0.0",
     "lodash.isequal": "^4.5.0",
-    "memoize-one": "^3.1.1",
+    "memoize-one": "^4.0.0",
     "moment": "^2.22.2",
     "numeral": "^2.0.6",
     "omit.js": "^1.0.0",
-    "path-to-regexp": "^2.1.0",
-    "prop-types": "^15.5.10",
+    "path-to-regexp": "^2.2.1",
+    "prop-types": "^15.6.2",
     "qs": "^6.5.2",
-    "rc-drawer": "^1.5.2",
     "react-container-query": "^0.11.0",
     "react-copy-to-clipboard": "^5.0.1",
     "react-document-title": "^2.0.3",
     "react-fittext": "^1.0.0",
-    "rollbar": "^2.3.4",
+    "rollbar": "^2.4.2",
     "rollup": "^0.62.0",
     "rollup-plugin-json": "^3.0.0",
     "setprototypeof": "^1.1.0",
@@ -52,11 +49,11 @@
     "url-polyfill": "^1.0.13"
   },
   "devDependencies": {
-    "@babel/polyfill": "^7.0.0-beta.36",
+    "@babel/polyfill": "^7.0.0-beta.53",
     "@types/react": "^16.4.4",
     "@types/react-dom": "^16.0.6",
     "antd-theme-webpack-plugin": "^1.0.8",
-    "babel-eslint": "^8.1.2",
+    "babel-eslint": "^8.2.6",
     "babel-plugin-dva-hmr": "^0.4.1",
     "babel-plugin-import": "^1.8.0",
     "babel-plugin-module-resolver": "^3.1.1",
@@ -65,11 +62,13 @@
     "cross-env": "^5.1.1",
     "cross-port-killer": "^1.0.1",
     "enzyme": "^3.1.0",
-    "eslint": "^5.0.1",
+    "eslint": "^5.1.0",
     "eslint-config-airbnb": "^17.0.0",
     "eslint-config-prettier": "^2.9.0",
+    "eslint-config-umi": "^0.1.4",
     "eslint-plugin-babel": "^5.1.0",
     "eslint-plugin-compat": "^2.1.0",
+    "eslint-plugin-flowtype": "2.50.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-markdown": "^1.0.0-beta.6",
@@ -85,12 +84,12 @@
     "stylelint": "^9.2.1",
     "stylelint-config-prettier": "^3.0.4",
     "stylelint-config-standard": "^18.0.0",
-    "umi": "^1.3.13",
+    "umi": "^1.3.15",
     "umi-plugin-dva": "^0.9.1",
     "umi-plugin-routes": "^0.1.5"
   },
   "optionalDependencies": {
-    "puppeteer": "^1.5.0"
+    "puppeteer": "^1.6.0"
   },
   "lint-staged": {
     "**/*.{js,jsx,less}": [

src/components/SettingDarwer/index.js

@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react';
-import { Select, message, List, Switch, Divider, Icon, Button } from 'antd';
-import DrawerMenu from 'rc-drawer';
+import { Select, message, Drawer, List, Switch, Divider, Icon, Button } from 'antd';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { connect } from 'dva';
 import styles from './index.less';
@@ -33,6 +32,9 @@ class SettingDarwer extends PureComponent {
     if (colorWeak === 'open') {
       document.body.className = 'colorWeak';
     }
+    requestAnimationFrame(() => {
+      this.togglerContent();
+    });
   }
 
   getLayOutSetting = () => {
@@ -149,40 +151,34 @@ class SettingDarwer extends PureComponent {
     const { setting } = this.props;
     const { collapse, silderTheme, themeColor, layout, colorWeak } = setting;
     return (
-      <DrawerMenu
-        getContainer={null}
-        level={null}
-        open={collapse}
-        mask={false}
-        onHandleClick={this.togglerContent}
-        handler={
-          <div className="drawer-handle">
-            {!collapse ? (
-              <Icon
-                type="setting"
-                style={{
-                  color: '#FFF',
-                  fontSize: 20,
-                }}
-              />
-            ) : (
-              <Icon
-                type="close"
-                style={{
-                  color: '#FFF',
-                  fontSize: 20,
-                }}
-              />
-            )}
-          </div>
-        }
+      <Drawer
+        visible={collapse}
+        width={273}
+        onClose={this.togglerContent}
         placement="right"
-        width="336px"
         style={{
           zIndex: 999,
         }}
-        onMaskClick={this.togglerContent}
       >
+        <div className={styles.handle} onClick={this.togglerContent}>
+          {!collapse ? (
+            <Icon
+              type="setting"
+              style={{
+                color: '#FFF',
+                fontSize: 20,
+              }}
+            />
+          ) : (
+            <Icon
+              type="close"
+              style={{
+                color: '#FFF',
+                fontSize: 20,
+              }}
+            />
+          )}
+        </div>
         <div className={styles.content}>
           <Body title="整体风格设置">
             <BlockChecbox
@@ -257,7 +253,7 @@ class SettingDarwer extends PureComponent {
             </Button>
           </CopyToClipboard>
         </div>
-      </DrawerMenu>
+      </Drawer>
     );
   }
 }

src/components/SettingDarwer/index.less

@@ -1,9 +1,7 @@
 @import '~antd/lib/style/themes/default.less';
 
 .content {
-  width: 273px;
   min-height: 100%;
-  padding: 24px;
   background: #fff;
   position: relative;
 }
@@ -50,16 +48,19 @@
   margin-bottom: 12px;
 }
 
-:global {
-  .drawer-handle {
-    top: 240px;
-    background: #1890ff;
-    width: 57px;
-    height: 48px;
-    padding: 14px 18px;
-    padding-left: 24px;
-  }
-  .drawer-right .drawer-handle {
-    left: -57px;
-  }
+.handle {
+  position: fixed;
+  top: 240px;
+  background: #1890ff;
+  width: 57px;
+  height: 48px;
+  right: 273px;
+  padding: 14px 18px;
+  padding-left: 24px;
+  cursor: pointer;
+  pointer-events: auto;
+  z-index: 0;
+  text-align: center;
+  font-size: 16px;
+  border-radius: 4px 0 0 4px;
 }

src/components/SiderMenu/BaseMenu.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { Menu, Icon } from 'antd';
 import { Link } from 'dva/router';
-import { FormattedMessage } from 'umi/locale';
+import { formatMessage } from 'umi/locale';
 import pathToRegexp from 'path-to-regexp';
 import { urlToList } from '../_utils/pathTools';
 import styles from './index.less';
@@ -82,7 +82,7 @@ export default class BaseMenu extends PureComponent {
   getSubMenuOrItem = item => {
     // doc: add hideChildren
     if (item.children && !item.hideChildren && item.children.some(child => child.name)) {
-      const name = <FormattedMessage defaultMessage={item.name} id={item.locale} />;
+      const name = formatMessage({ id: item.locale });
       return (
         <SubMenu
           title={
@@ -111,7 +111,7 @@ export default class BaseMenu extends PureComponent {
    * @memberof SiderMenu
    */
   getMenuItemPath = item => {
-    const name = <FormattedMessage defaultMessage={item.name} id={item.locale} />;
+    const name = formatMessage({ id: item.locale });
     const itemPath = this.conversionPath(item.path);
     const icon = getIcon(item.icon);
     const { target } = item;
@@ -143,7 +143,6 @@ export default class BaseMenu extends PureComponent {
       </Link>
     );
   };
-
   // permission to check
   checkPermissionItem = (authority, ItemDom) => {
     const { Authorized } = this.props;

src/components/SiderMenu/SliderMenu.js

@@ -1,14 +1,12 @@
 import React, { PureComponent } from 'react';
-import { Layout, Menu, Icon } from 'antd';
+import { Layout } from 'antd';
 import pathToRegexp from 'path-to-regexp';
 import { Link } from 'dva/router';
-import { FormattedMessage } from 'umi/locale';
 import styles from './index.less';
 import BaseMenu, { getMenuMatches } from './BaseMenu';
 import { urlToList } from '../_utils/pathTools';
 
 const { Sider } = Layout;
-const { SubMenu } = Menu;
 
 /**
  * 获得菜单子节点
@@ -26,20 +24,6 @@ const getDefaultCollapsedSubMenus = props => {
     .filter(item => item);
 };
 
-// Allow menu.js config icon as string or ReactNode
-//   icon: 'setting',
-//   icon: 'http://demo.com/icon.png',
-//   icon: <Icon type="setting" />,
-const getIcon = icon => {
-  if (typeof icon === 'string' && icon.indexOf('http') === 0) {
-    return <img src={icon} alt="icon" className={`${styles.icon} sider-menu-item-img`} />;
-  }
-  if (typeof icon === 'string') {
-    return <Icon type={icon} />;
-  }
-  return icon;
-};
-
 /**
  * Recursively flatten the data
  * [{path:string},{path:string}] => {path,path2}
@@ -85,140 +69,6 @@ export default class SiderMenu extends PureComponent {
     }
     return null;
   }
-
-  /**
-   * Convert pathname to openKeys
-   * /list/search/articles = > ['list','/list/search']
-   * @param  props
-   */
-  getDefaultCollapsedSubMenus(props) {
-    const {
-      location: { pathname },
-    } =
-      props || this.props;
-    return getMenuMatchKeys(this.flatMenuKeys, urlToList(pathname));
-  }
-
-  /**
-   * 判断是否是http链接.返回 Link 或 a
-   * Judge whether it is http link.return a or Link
-   * @memberof SiderMenu
-   */
-  getMenuItemPath = item => {
-    const itemPath = this.conversionPath(item.path);
-    const icon = getIcon(item.icon);
-    const { target, name, locale } = item;
-    // Is it a http link
-    if (/^https?:\/\//.test(itemPath)) {
-      return (
-        <a href={itemPath} target={target}>
-          {icon}
-          <span>
-            <FormattedMessage id={locale} defaultMessage={name} />
-          </span>
-        </a>
-      );
-    }
-    const { pathname, isMobile, onCollapse } = this.props;
-    return (
-      <Link
-        to={itemPath}
-        target={target}
-        replace={itemPath === pathname}
-        onClick={
-          isMobile
-            ? () => {
-                onCollapse(true);
-              }
-            : undefined
-        }
-      >
-        {icon}
-        <span>
-          <FormattedMessage id={locale} defaultMessage={name} />
-        </span>
-      </Link>
-    );
-  };
-
-  /**
-   * get SubMenu or Item
-   */
-  getSubMenuOrItem = item => {
-    if (item.children && item.children.some(child => child.name)) {
-      const childrenItems = this.getNavMenuItems(item.children);
-      // 当无子菜单时就不展示菜单
-      if (childrenItems && childrenItems.length > 0) {
-        return (
-          <SubMenu
-            title={
-              item.icon ? (
-                <span>
-                  {getIcon(item.icon)}
-                  <span>{item.name}</span>
-                </span>
-              ) : (
-                <FormattedMessage id={item.locale} defaultMessage={item.name} />
-              )
-            }
-            key={item.path}
-          >
-            {childrenItems}
-          </SubMenu>
-        );
-      }
-      return null;
-    } else {
-      return <Menu.Item key={item.path}>{this.getMenuItemPath(item)}</Menu.Item>;
-    }
-  };
-
-  /**
-   * 获得菜单子节点
-   * @memberof SiderMenu
-   */
-  getNavMenuItems = menusData => {
-    if (!menusData) {
-      return [];
-    }
-    return menusData
-      .filter(item => item.name && !item.hideInMenu)
-      .map(item => {
-        // make dom
-        const ItemDom = this.getSubMenuOrItem(item);
-        return this.checkPermissionItem(item.authority, ItemDom);
-      })
-      .filter(item => item);
-  };
-
-  // Get the currently selected menu
-  getSelectedMenuKeys = () => {
-    const {
-      location: { pathname },
-    } = this.props;
-    return getMenuMatchKeys(this.flatMenuKeys, urlToList(pathname));
-  };
-
-  // conversion Path
-  // 转化路径
-  conversionPath = path => {
-    if (path && path.indexOf('http') === 0) {
-      return path;
-    } else {
-      return `/${path || ''}`.replace(/\/+/g, '/');
-    }
-  };
-
-  // permission to check
-  checkPermissionItem = (authority, ItemDom) => {
-    const { Authorized } = this.props;
-    if (Authorized && Authorized.check) {
-      const { check } = Authorized;
-      return check(authority, ItemDom);
-    }
-    return ItemDom;
-  };
-
   isMainMenu = key => {
     const { menuData } = this.props;
     return menuData.some(item => {
@@ -228,14 +78,12 @@ export default class SiderMenu extends PureComponent {
       return false;
     });
   };
-
   handleOpenChange = openKeys => {
     const moreThanOne = openKeys.filter(openKey => this.isMainMenu(openKey)).length > 1;
     this.setState({
       openKeys: moreThanOne ? [openKeys.pop()] : [...openKeys],
     });
   };
-
   render() {
     const { logo, collapsed, onCollapse, fixSiderbar, theme } = this.props;
     const { openKeys } = this.state;

src/components/SiderMenu/index.js

@@ -1,6 +1,5 @@
-import 'rc-drawer/assets/index.css';
 import React from 'react';
-import DrawerMenu from 'rc-drawer';
+import { Drawer } from 'antd';
 import SiderMenu from './SliderMenu';
 
 /**
@@ -22,21 +21,23 @@ const getFlatMenuKeys = menuData => {
 const SiderMenuWrapper = props => {
   const { isMobile, menuData, collapsed } = props;
   return isMobile ? (
-    <DrawerMenu
-      getContainer={null}
-      level={null}
-      handleChild={null}
-      open={!collapsed}
-      onMaskClick={() => {
+    <Drawer
+      visible={!collapsed}
+      placement="left"
+      onClose={() => {
         props.onCollapse(true);
       }}
+      style={{
+        padding: 0,
+        height: '100vh',
+      }}
     >
       <SiderMenu
         {...props}
         flatMenuKeys={getFlatMenuKeys(menuData)}
         collapsed={isMobile ? false : collapsed}
       />
-    </DrawerMenu>
+    </Drawer>
   ) : (
     <SiderMenu {...props} flatMenuKeys={getFlatMenuKeys(menuData)} />
   );

src/models/setting.js

@@ -1,5 +1,5 @@
 const defaultSetting = {
-  collapse: false,
+  collapse: true,
   silderTheme: 'dark',
   themeColor: '#1890FF',
   layout: 'sidemenu',

src/pages/Exception/403.js

@@ -1,19 +1,18 @@
 import React, { Component } from 'react';
-import { injectIntl } from 'react-intl';
+import { formatMessage } from 'umi/locale';
 import { Link } from 'dva/router';
 import Exception from 'components/Exception';
 
 class Exception403 extends Component {
   render() {
-    const { intl } = this.props;
     return (
       <Exception
         type="403"
-        desc={intl.formatMessage({ id: 'app.exception.description.403' }, {})}
+        desc={formatMessage({ id: 'app.exception.description.403' }, {})}
         style={{ minHeight: 500, height: '80%' }}
         linkElement={Link}
       />
     );
   }
 }
-export default injectIntl(Exception403);
+export default Exception403;

src/pages/Exception/404.js

@@ -1,19 +1,18 @@
 import React, { Component } from 'react';
-import { injectIntl } from 'react-intl';
+import { formatMessage } from 'umi/locale';
 import { Link } from 'dva/router';
 import Exception from 'components/Exception';
 
 class Exception404 extends Component {
   render() {
-    const { intl } = this.props;
     return (
       <Exception
         type="404"
-        desc={intl.formatMessage({ id: 'app.exception.description.404' }, {})}
+        desc={formatMessage({ id: 'app.exception.description.404' }, {})}
         style={{ minHeight: 500, height: '80%' }}
         linkElement={Link}
       />
     );
   }
 }
-export default injectIntl(Exception404);
+export default Exception404;

src/pages/Exception/500.js

@@ -1,19 +1,18 @@
 import React, { Component } from 'react';
-import { injectIntl } from 'react-intl';
+import { formatMessage } from 'umi/locale';
 import { Link } from 'dva/router';
 import Exception from 'components/Exception';
 
 class Exception500 extends Component {
   render() {
-    const { intl } = this.props;
     return (
       <Exception
         type="500"
-        desc={intl.formatMessage({ id: 'app.exception.description.500' }, {})}
+        desc={formatMessage({ id: 'app.exception.description.500' }, {})}
         style={{ minHeight: 500, height: '80%' }}
         linkElement={Link}
       />
     );
   }
 }
-export default injectIntl(Exception500);
+export default Exception500;

src/pages/document.ejs

@@ -7,7 +7,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Ant Design Pro</title>
   <link rel="icon" href="/favicon.png" type="image/x-icon">
-  <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
   <!-- rollbar -->
   <script src="https://gw.alipayobjects.com/os/rmsportal/nGVBgVyXzzmbAqevIAPy.js">
   </script>
@@ -18,6 +17,14 @@
 
 <body>
   <div id="root"></div>
+  <link rel="stylesheet/less" type="text/css" href="/color.less" />
+  <script>
+    window.less = {
+      async: false,
+      env: 'production'
+    };
+  </script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
 </body>
 
 

src/pages/layouts/LoadingPage.js

@@ -59,9 +59,12 @@ class LoadingPage extends PureComponent {
   componentDidMount() {
     const { dispatch } = this.props;
     this.enquireHandler = enquireScreen(mobile => {
-      this.setState({
-        isMobile: mobile,
-      });
+      const { isMobile } = this.state;
+      if (isMobile !== mobile) {
+        this.setState({
+          isMobile: mobile,
+        });
+      }
     });
     dispatch({
       type: 'user/fetchCurrent',