陈帅
8 years ago
4 changed files with 2 additions and 261 deletions
@ -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: <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> |
|||
); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue