From b0be02b1c0679979e0c731e733b97aedd39e06d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Sun, 15 Jul 2018 15:02:51 +0800 Subject: [PATCH] =?UTF-8?q?Optimization=EF=BC=9Achange=20to=20antd=20drawe?= =?UTF-8?q?r?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.js | 1 + config/config.js | 3 +- package.json | 25 ++-- src/components/SettingDarwer/index.js | 60 +++++---- src/components/SettingDarwer/index.less | 29 ++--- src/components/SiderMenu/BaseMenu.js | 7 +- src/components/SiderMenu/SliderMenu.js | 154 +----------------------- src/components/SiderMenu/index.js | 19 +-- src/models/setting.js | 2 +- src/pages/Exception/403.js | 7 +- src/pages/Exception/404.js | 7 +- src/pages/Exception/500.js | 7 +- src/pages/document.ejs | 9 +- src/pages/layouts/LoadingPage.js | 9 +- 14 files changed, 96 insertions(+), 243 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index e24ea21f..7c6ed381 100755 --- a/.eslintrc.js +++ b/.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', { diff --git a/config/config.js b/config/config.js index 082abe85..972bb52f 100644 --- a/config/config.js +++ b/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', diff --git a/package.json b/package.json index e7940b3e..8121d129 100755 --- a/package.json +++ b/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}": [ diff --git a/src/components/SettingDarwer/index.js b/src/components/SettingDarwer/index.js index 4124cdd9..13d457a4 100644 --- a/src/components/SettingDarwer/index.js +++ b/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 ( - - {!collapse ? ( - - ) : ( - - )} - - } + +
+ {!collapse ? ( + + ) : ( + + )} +
- + ); } } diff --git a/src/components/SettingDarwer/index.less b/src/components/SettingDarwer/index.less index 39db72a6..32339096 100644 --- a/src/components/SettingDarwer/index.less +++ b/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; } diff --git a/src/components/SiderMenu/BaseMenu.js b/src/components/SiderMenu/BaseMenu.js index eb2f5e42..e28d51f0 100644 --- a/src/components/SiderMenu/BaseMenu.js +++ b/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 = ; + const name = formatMessage({ id: item.locale }); return ( { - const name = ; + 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 { ); }; - // permission to check checkPermissionItem = (authority, ItemDom) => { const { Authorized } = this.props; diff --git a/src/components/SiderMenu/SliderMenu.js b/src/components/SiderMenu/SliderMenu.js index ae7cb054..9ebfd445 100644 --- a/src/components/SiderMenu/SliderMenu.js +++ b/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: , -const getIcon = icon => { - if (typeof icon === 'string' && icon.indexOf('http') === 0) { - return icon; - } - if (typeof icon === 'string') { - return ; - } - 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 ( - - {icon} - - - - - ); - } - const { pathname, isMobile, onCollapse } = this.props; - return ( - { - onCollapse(true); - } - : undefined - } - > - {icon} - - - - - ); - }; - - /** - * 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 ( - - {getIcon(item.icon)} - {item.name} - - ) : ( - - ) - } - key={item.path} - > - {childrenItems} - - ); - } - return null; - } else { - return {this.getMenuItemPath(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; diff --git a/src/components/SiderMenu/index.js b/src/components/SiderMenu/index.js index 78334b73..64342e44 100644 --- a/src/components/SiderMenu/index.js +++ b/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 ? ( - { + { props.onCollapse(true); }} + style={{ + padding: 0, + height: '100vh', + }} > - + ) : ( ); diff --git a/src/models/setting.js b/src/models/setting.js index 77b21a0c..c8c2b677 100644 --- a/src/models/setting.js +++ b/src/models/setting.js @@ -1,5 +1,5 @@ const defaultSetting = { - collapse: false, + collapse: true, silderTheme: 'dark', themeColor: '#1890FF', layout: 'sidemenu', diff --git a/src/pages/Exception/403.js b/src/pages/Exception/403.js index 15681eea..b1c996e2 100644 --- a/src/pages/Exception/403.js +++ b/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 ( ); } } -export default injectIntl(Exception403); +export default Exception403; diff --git a/src/pages/Exception/404.js b/src/pages/Exception/404.js index 62be537e..409fd3a1 100644 --- a/src/pages/Exception/404.js +++ b/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 ( ); } } -export default injectIntl(Exception404); +export default Exception404; diff --git a/src/pages/Exception/500.js b/src/pages/Exception/500.js index f4227a99..c275e8f5 100644 --- a/src/pages/Exception/500.js +++ b/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 ( ); } } -export default injectIntl(Exception500); +export default Exception500; diff --git a/src/pages/document.ejs b/src/pages/document.ejs index be36d476..ec7760ed 100644 --- a/src/pages/document.ejs +++ b/src/pages/document.ejs @@ -7,7 +7,6 @@ Ant Design Pro - @@ -18,6 +17,14 @@
+ + + diff --git a/src/pages/layouts/LoadingPage.js b/src/pages/layouts/LoadingPage.js index 5f1dadf0..2a898e9a 100644 --- a/src/pages/layouts/LoadingPage.js +++ b/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', -- GitLab