import React from "react";
|
import { Link } from 'react-router-dom';
|
import { Menu, Icon } from 'antd';
|
import './index.scss';
|
const SubMenu = Menu.SubMenu;
|
|
function _shorten(name) {
|
if (/_\d*$/.test(name)) {
|
const end = name.lastIndexOf('_');
|
return _shorten(name.substring(0, end));
|
}
|
if (/-\d*$/.test(name)) {
|
const end = name.lastIndexOf('-');
|
return _shorten(name.substring(0, end));
|
}
|
return name;
|
}
|
|
function shorten(name) {
|
const result = _shorten(name);
|
|
if (result.length < 8) return result;
|
return result.substr(0, 6) + '…';
|
}
|
|
export default class TreeMenu extends React.PureComponent {
|
map = (data, onClick) => {
|
return data.map(item => item.children
|
? <SubMenu key={item.name}
|
title={
|
<span>
|
<Icon type={item.icon} />
|
<span>{item.name}</span>
|
</span>
|
}>
|
{this.map(item.children, onClick)}
|
</SubMenu>
|
: item.name
|
?<Menu.Item key={item.path}>
|
{
|
onClick
|
? <a onClick={() => onClick(item)} title={item.name}>
|
<Icon type={item.icon} />
|
{shorten(item.name)}
|
{
|
item.step == 1
|
? <sup className="tree-menu-sup">补</sup>
|
: null
|
}
|
</a>
|
: <Link to={item.path} replace><Icon type={item.icon} />{item.name}</Link>
|
}
|
</Menu.Item>
|
:item.size
|
?<Menu.Item key={item.path} disabled><i>附件总数：</i><span className="sizeSpan">{item.size}</span></Menu.Item>
|
:<Menu.Item key={item.path} disabled><a> </a></Menu.Item>
|
);
|
}
|
render() {
|
return (
|
<Menu selectedKeys={this.props.defaultSelectedKeys}
|
defaultOpenKeys={this.props.defaultOpenKeys}
|
theme={this.props.theme || 'light'}
|
className="tree-menu-main"
|
mode="inline">
|
{this.map(this.props.data, this.props.onClick)}
|
</Menu>
|
)
|
}
|
}
|
