import React from "react";
|
import { Link } from 'react-router-dom';
|
import { Menu, Badge } from 'antd';
|
import './index.scss';
|
import login from '../../asset/icons/pc-logo.png';
|
|
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 MenuView extends React.PureComponent {
|
map = (data, onClick) => {
|
const { defaultSelectedKeys: sks } = this.props;
|
return data.map(item => item.children
|
? <SubMenu key={item.name}
|
title={
|
<span>
|
<img src={item.icon} className='icon' />
|
<span><Badge count={item.count || 0} offset={[12, 0]}>{item.name}</Badge></span>
|
</span>
|
}>
|
{this.map(item.children, onClick)}
|
</SubMenu>
|
: <Menu.Item key={item.path}>
|
{
|
onClick
|
? <a onClick={() => onClick(item)} title={item.name}>
|
<img src={sks.indexOf(item.path) > -1 ? item.iconCheck : item.icon} className='icon' />
|
{shorten(item.name)}
|
</a>
|
: item.path.charAt(0) == '/'
|
? <Link to={item.path} replace> <img src={sks.indexOf(item.path) > -1 ? item.iconCheck : item.icon} className='icon' /><Badge count={item.count || 0} offset={[12, 0]}>{item.name}</Badge></Link>
|
: <a href={item.path} target="_blank"> <img src={sks.indexOf(item.path) > -1 ? item.iconCheck : item.icon} className='icon' />{item.name}</a>
|
}
|
</Menu.Item>
|
|
);
|
}
|
render() {
|
return (
|
<React.Fragment>
|
<div className='pro-div'>
|
<div>
|
<img src={login} className='pro-img' />
|
</div>
|
<div className='pro-text'>
|
<div className='pro-name'>
|
南检后台中心
|
</div>
|
<div className='pro-eng'>
|
inspection backstage Center
|
</div>
|
</div>
|
</div>
|
<Menu
|
style={{ flex: '1', overflowX: 'hidden' }}
|
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>
|
</React.Fragment>
|
)
|
}
|
}
|
