Skip to content

GitLab

P
pro-blocks
Commit e7a7dd85 authored by 陈帅's avatar 陈帅
Browse files
Options

use antd-pro-theme-webpack-plugin

parent 93cb8b13
Hide whitespace changes
Inline Side-by-side
Showing with 2 additions and 261 deletions
config/config.js
View file @ e7a7dd85
/* eslint-disable react/destructuring-assignment */
// https://umijs.org/config/ // https://umijs.org/config/
const pageRoutes = require('./router.config'); const pageRoutes = require('./router.config');
const webpackplugin = require('./plugin.config'); const webpackplugin = require('./plugin.config');
const path = require('path');
export default { export default {
// add for transfer to umi // add for transfer to umi
......
config/plugin.config.js
View file @ e7a7dd85
// Change theme plugin // Change theme plugin
const MergeLessPlugin = require('antd-pro-merge-less'); 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 path = require('path');
const plugin = config => { const plugin = config => {
......
src/components/SiderMenu/SiderMenu.js deleted 100644 → 0
View file @ 93cb8b13
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: <Icon type="setting" />,
const getIcon = icon => {
if (typeof icon === 'string') {
if (icon.indexOf('http') === 0) {
return <img src={icon} alt="icon" className={`${styles.icon} sider-menu-item-img`} />;
}
return <Icon type={icon} />;
}
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 (
<a href={itemPath} target={target}>
{icon}
<span>{name}</span>
</a>
);
}
const { location, isMobile, onCollapse } = this.props;
return (
<Link
to={itemPath}
target={target}
replace={itemPath === location.pathname}
onClick={
isMobile
? () => {
onCollapse(true);
}
: undefined
}
>
{icon}
<span>{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>
) : (
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 => 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 (
<Sider
trigger={null}
collapsible
collapsed={collapsed}
breakpoint="lg"
onCollapse={onCollapse}
width={256}
className={styles.sider}
>
<div className={styles.logo} key="logo">
<Link to="/">
<img src={logo} alt="logo" />
<h1>Ant Design Pro</h1>
</Link>
</div>
<Menu
key="Menu"
theme="dark"
mode="inline"
{...menuProps}
onOpenChange={this.handleOpenChange}
selectedKeys={selectedKeys}
style={{ padding: '16px 0', width: '100%' }}
>
{this.getNavMenuItems(menuData)}
</Menu>
</Sider>
);
}
}
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