Skip to content

GitLab

A
ant-design-pro
Commit b0be02b1 authored by 陈帅's avatar 陈帅
Browse files
Options

Optimization：change to antd drawer

parent c4524c8b
Hide whitespace changes
Inline Side-by-side
Showing with 96 additions and 243 deletions
.eslintrc.js
View file @ b0be02b1
......@@ -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
View file @ b0be02b1
......@@ -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
View file @ b0be02b1
......@@ -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
View file @ b0be02b1
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
View file @ b0be02b1
@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
View file @ b0be02b1
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
View file @ b0be02b1
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
View file @ b0be02b1
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
View file @ b0be02b1
const defaultSetting = {
collapse: false,
collapse: true,
silderTheme: 'dark',
themeColor: '#1890FF',
layout: 'sidemenu',
......
src/pages/Exception/403.js
View file @ b0be02b1
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
View file @ b0be02b1
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
View file @ b0be02b1
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
View file @ b0be02b1
......@@ -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
View file @ b0be02b1
......@@ -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',
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment