diff --git a/.eslintrc.js b/.eslintrc.js index e24ea21f04f5de0a731bd980ab16650400dd0a4e..7c6ed3816bb5df9b81e10b550ecf155bea1cd631 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 082abe851e7bfece67b20cee2085ab6204ccc03e..972bb52fe3640e89d91749d7f809b77de5e8143f 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 e7940b3e6ebf640346141f7f5c6202878f8942ed..8121d129a73d55c119992336045a52a4ddc98d8e 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 4124cdd90825edf05b327531064551ce34a57092..13d457a423b448c22a79fcaa84a11f95bd519081 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 39db72a6d750c1596301eee6ca7c23831af7506c..323390965290c44482d1bb229f31d1026d5a311c 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 eb2f5e42d50219ae27afab7e16bbb6bdf1c5bc9f..e28d51f0c3ec54245314912740417c488af23d8d 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 ae7cb05417673018ebc023121b9ee6c0102c77f5..9ebfd44590abe9d655022a5812ac8c480d6220b6 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 78334b7352a8c762f6727fa79236235b6d1c6185..64342e44ba4701a3f50b74fc0e17c895dcc1687b 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 77b21a0c33ac8259ec50ce90258379456ed62cbd..c8c2b6775da71e3a8eda254ca9e2a477c38f2f9e 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 15681eeaf562ee9c777bbe9902579b16d6241b12..b1c996e24e9c17baf27a945e28522bc553fee66f 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 62be537ea7f4fdfae967dad4954ca2736b134522..409fd3a1db3bb1b19a175503289207ddab617787 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 f4227a99da31f737f887c6a627f50dc333d31627..c275e8f5bd17395046616c92a97864ce90306118 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 be36d476b4a557a203eb3701f265da34d8814794..ec7760edf33122e18d9b4232aabecedf07de989f 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 5f1dadf0a526746e2a218aab39d66a7f1c80c5c0..2a898e9ab4bccaabc2872b24d3df1e38636f9ef8 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',