From e7a7dd85e7b969b3992c9f2a263f7dc42f39c3a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Tue, 28 Aug 2018 15:17:49 +0800 Subject: [PATCH] use antd-pro-theme-webpack-plugin --- config/config.js | 3 - config/plugin.config.js | 2 +- package.json | 2 +- src/components/SiderMenu/SiderMenu.js | 256 -------------------------- 4 files changed, 2 insertions(+), 261 deletions(-) delete mode 100644 src/components/SiderMenu/SiderMenu.js diff --git a/config/config.js b/config/config.js index d75938ed..909a13a2 100644 --- a/config/config.js +++ b/config/config.js @@ -1,9 +1,6 @@ -/* eslint-disable react/destructuring-assignment */ - // https://umijs.org/config/ const pageRoutes = require('./router.config'); const webpackplugin = require('./plugin.config'); -const path = require('path'); export default { // add for transfer to umi diff --git a/config/plugin.config.js b/config/plugin.config.js index ed25dd95..aa7cb717 100644 --- a/config/plugin.config.js +++ b/config/plugin.config.js @@ -1,7 +1,7 @@ // Change theme plugin const MergeLessPlugin = require('antd-pro-merge-less'); -const AntDesignThemePlugin = require('antd-theme-webpack-plugin'); +const AntDesignThemePlugin = require('antd-pro-theme-webpack-plugin'); const path = require('path'); const plugin = config => { diff --git a/package.json b/package.json index fdc790f2..8e035d03 100755 --- a/package.json +++ b/package.json @@ -52,7 +52,7 @@ "@types/react": "^16.4.11", "@types/react-dom": "^16.0.6", "antd-pro-merge-less": "^0.0.9", - "antd-theme-webpack-plugin": "^1.0.8", + "antd-pro-theme-webpack-plugin": "^1.1.8", "babel-eslint": "^8.2.6", "babel-runtime": "^6.9.2", "cross-env": "^5.1.1", diff --git a/src/components/SiderMenu/SiderMenu.js b/src/components/SiderMenu/SiderMenu.js deleted file mode 100644 index 58077b77..00000000 --- a/src/components/SiderMenu/SiderMenu.js +++ /dev/null @@ -1,256 +0,0 @@ -import React, { PureComponent } from 'react'; -import { Layout, Menu, Icon } from 'antd'; -import pathToRegexp from 'path-to-regexp'; -import Link from 'umi/link'; -import styles from './index.less'; -import { urlToList } from '../_utils/pathTools'; - -const { Sider } = Layout; -const { SubMenu } = Menu; - -// 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') { - if (icon.indexOf('http') === 0) { - return icon; - } - return ; - } - - return icon; -}; - -/** - * Recursively flatten the data - * [{path:string},{path:string}] => [path,path2] - * @param menu - */ -export const getFlatMenuKeys = menu => - menu.reduce((keys, item) => { - keys.push(item.path); - if (item.children) { - return keys.concat(getFlatMenuKeys(item.children)); - } - return keys; - }, []); - -/** - * Find all matched menu keys based on paths - * @param flatMenuKeys: [/abc, /abc/:id, /abc/:id/info] - * @param paths: [/abc, /abc/11, /abc/11/info] - */ -export const getMenuMatchKeys = (flatMenuKeys, paths) => - paths.reduce( - (matchKeys, path) => - matchKeys.concat(flatMenuKeys.filter(item => pathToRegexp(item).test(path))), - [] - ); - -export default class SiderMenu extends PureComponent { - constructor(props) { - super(props); - this.flatMenuKeys = getFlatMenuKeys(props.menuData); - this.state = { - openKeys: this.getDefaultCollapsedSubMenus(props), - }; - } - - componentWillReceiveProps(nextProps) { - const { location } = this.props; - if (nextProps.location.pathname !== location.pathname) { - this.setState({ - openKeys: this.getDefaultCollapsedSubMenus(nextProps), - }); - } - } - - /** - * 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 } = item; - // Is it a http link - if (/^https?:\/\//.test(itemPath)) { - return ( - - {icon} - {name} - - ); - } - const { location, isMobile, onCollapse } = this.props; - return ( - { - onCollapse(true); - } - : undefined - } - > - {icon} - {name} - - ); - }; - - /** - * 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} - - ) : ( - 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 => key && (item.key === key || item.path === key)); - }; - - handleOpenChange = openKeys => { - const lastOpenKey = openKeys[openKeys.length - 1]; - const moreThanOne = openKeys.filter(openKey => this.isMainMenu(openKey)).length > 1; - this.setState({ - openKeys: moreThanOne ? [lastOpenKey] : [...openKeys], - }); - }; - - render() { - const { logo, menuData, collapsed, onCollapse } = this.props; - const { openKeys } = this.state; - // Don't show popup menu when it is been collapsed - const menuProps = collapsed - ? {} - : { - openKeys, - }; - // if pathname can't match, use the nearest parent's key - let selectedKeys = this.getSelectedMenuKeys(); - if (!selectedKeys.length) { - selectedKeys = [openKeys[openKeys.length - 1]]; - } - return ( - -
- - logo -

Ant Design Pro

- -
- - {this.getNavMenuItems(menuData)} - - - ); - } -} -- GitLab