/* eslint-disable */
|
/**柯礼钦
|
* 4/2/2020, 11:22:51 AM
|
* doc comment for the file goes here
|
*/
|
|
/** 菜单渲染组件 */
|
|
import React from 'react';
|
import { Layout, Menu, Icon, Badge } from 'antd';
|
import { RouteComponentProps } from 'react-router-dom';
|
import './index.scss';
|
|
const { SubMenu, Item } = Menu;
|
|
export default function MenuView({
|
pathname,
|
menudata,
|
history,
|
}) {
|
if (!menudata.length) return null;
|
|
const { path, name } = find(menudata, pathname);
|
|
if (name) {
|
const index = name.indexOf(' - ');
|
if (index > -1) {
|
document.title = `${name.substr(index)}`;
|
} else {
|
document.title = `${name}`;
|
}
|
} else {
|
document.title = `xx系统`;
|
}
|
|
const defaultOpenKeys = menudata.map(({ name }) => name);
|
|
return (
|
// <Layout.Sider
|
// // width={200}
|
// theme="light"
|
// style={{ backgroundColor: 'white' }}>
|
<Menu
|
key={defaultOpenKeys.join('-')}
|
style={{ height: '100%', borderRight: 0 }}
|
defaultOpenKeys={defaultOpenKeys}
|
selectedKeys={path ? [path] : []}
|
mode="inline">
|
{render(menudata, history)}
|
</Menu>
|
// </Layout.Sider>
|
);
|
}
|
|
const render = (data, history) => {
|
return data.map(({ name, icon, path, count, children, type }, index) =>
|
children && children.length ? (
|
<SubMenu
|
key={name}
|
title={
|
<span>
|
<Icon type={icon || 'setting'} />
|
<span>{name}</span>
|
</span>
|
}>
|
{render(children, history)}
|
</SubMenu>
|
) : (
|
<Item
|
key={path}
|
title={name.length > 10 ? name : undefined}
|
onClick={() => {
|
if (type == 'open') {
|
window.open(path);
|
} else {
|
history.replace(path);
|
}
|
}}>
|
{Boolean(icon) && <Icon type={icon} />}
|
{Boolean(name) && <span>{name}</span>} <Badge count={count} />
|
</Item>
|
)
|
);
|
};
|
|
const find = (data, full, pathname = { path: '', name: '' }) =>
|
data.reduce((pn, { path, name, children }) => {
|
if (children && children.length) {
|
return find(children, full, pn);
|
}
|
if (
|
path.length > pn.path.length &&
|
full.replace(/\/\d+/g, '').startsWith(path.replace(/\/\d+/g, ''))
|
) {
|
return { path, name };
|
}
|
return pn;
|
}, pathname);
|
