|
|
@@ -28,14 +28,13 @@ const getIcon = icon => {
|
|
|
* @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;
|
|
|
- }, []);
|
|
|
+ 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
|
|
|
@@ -43,11 +42,11 @@ export const getFlatMenuKeys = menu =>
|
|
|
* @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))
|
|
|
- )), []);
|
|
|
+ paths.reduce(
|
|
|
+ (matchKeys, path) =>
|
|
|
+ matchKeys.concat(flatMenuKeys.filter(item => pathToRegexp(item).test(path))),
|
|
|
+ []
|
|
|
+ );
|
|
|
|
|
|
export default class SiderMenu extends PureComponent {
|
|
|
constructor(props) {
|
|
|
@@ -58,6 +57,7 @@ export default class SiderMenu extends PureComponent {
|
|
|
openKeys: this.getDefaultCollapsedSubMenus(props),
|
|
|
};
|
|
|
}
|
|
|
+
|
|
|
componentWillReceiveProps(nextProps) {
|
|
|
if (nextProps.location.pathname !== this.props.location.pathname) {
|
|
|
this.setState({
|
|
|
@@ -65,15 +65,20 @@ export default class SiderMenu extends PureComponent {
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
/**
|
|
|
* Convert pathname to openKeys
|
|
|
* /list/search/articles = > ['list','/list/search']
|
|
|
* @param props
|
|
|
*/
|
|
|
getDefaultCollapsedSubMenus(props) {
|
|
|
- const { location: { pathname } } = props || this.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
|
|
|
@@ -110,6 +115,7 @@ export default class SiderMenu extends PureComponent {
|
|
|
</Link>
|
|
|
);
|
|
|
};
|
|
|
+
|
|
|
/**
|
|
|
* get SubMenu or Item
|
|
|
*/
|
|
|
@@ -141,6 +147,7 @@ export default class SiderMenu extends PureComponent {
|
|
|
return <Menu.Item key={item.path}>{this.getMenuItemPath(item)}</Menu.Item>;
|
|
|
}
|
|
|
};
|
|
|
+
|
|
|
/**
|
|
|
* 获得菜单子节点
|
|
|
* @memberof SiderMenu
|
|
|
@@ -158,11 +165,15 @@ export default class SiderMenu extends PureComponent {
|
|
|
})
|
|
|
.filter(item => item);
|
|
|
};
|
|
|
+
|
|
|
// Get the currently selected menu
|
|
|
getSelectedMenuKeys = () => {
|
|
|
- const { location: { pathname } } = this.props;
|
|
|
+ const {
|
|
|
+ location: { pathname },
|
|
|
+ } = this.props;
|
|
|
return getMenuMatchKeys(this.flatMenuKeys, urlToList(pathname));
|
|
|
};
|
|
|
+
|
|
|
// conversion Path
|
|
|
// 转化路径
|
|
|
conversionPath = path => {
|
|
|
@@ -172,6 +183,7 @@ export default class SiderMenu extends PureComponent {
|
|
|
return `/${path || ''}`.replace(/\/+/g, '/');
|
|
|
}
|
|
|
};
|
|
|
+
|
|
|
// permission to check
|
|
|
checkPermissionItem = (authority, ItemDom) => {
|
|
|
if (this.props.Authorized && this.props.Authorized.check) {
|
|
|
@@ -180,9 +192,11 @@ export default class SiderMenu extends PureComponent {
|
|
|
}
|
|
|
return ItemDom;
|
|
|
};
|
|
|
+
|
|
|
isMainMenu = key => {
|
|
|
return this.menus.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;
|
|
|
@@ -190,6 +204,7 @@ export default class SiderMenu extends PureComponent {
|
|
|
openKeys: moreThanOne ? [lastOpenKey] : [...openKeys],
|
|
|
});
|
|
|
};
|
|
|
+
|
|
|
render() {
|
|
|
const { logo, collapsed, onCollapse } = this.props;
|
|
|
const { openKeys } = this.state;
|