antd+react 左侧导航栏标准component

2019-10-09

// src/components/NavLeft/index

import React from 'react' import { Menu,Icon,Layout } from 'antd'; import { NavLink,withRouter } from 'react-router-dom' import MenuConfig from './../../config/menuConfig' import './index.less'

const SubMenu = Menu.SubMenu; const { Sider } = Layout; class NavLeft extends React.Component {

state = {
    openKeys:['/kuaishou'],
    currentKey:'',
    collapsed:false
}
rootKeys=[];
onCollapse = async (collapsed) => {
    const currentKey = this.props.location.pathname
    const openKeys=[]
    openKeys.push('/'+currentKey.split('/')[1])
    await this.setState({ 
        collapsed,
        openKeys:!collapsed ? openKeys : [] 
    });

  };
handleClick=(item)=>{
    this.setState({
        currentKey:item.key  
    })
}
renderMenu = (data) => {
    return data.map((item) => {
       if(item.children) {
         return (
             <SubMenu 
                title={

                    <span>
                         <Icon type={item.icon}/>                            
                        <span>{item.title}</span>    
                    </span>
                } 
                key={item.key}
             >
                  {this.renderMenu(item.children)}
             </SubMenu>
         )
       }
       return <Menu.Item title={item.title} key={item.key}>
             <NavLink to={item.key}>{item.title}</NavLink>
       </Menu.Item>

   })

}
getInitSubKeys=(data)=>{
    return data.map(item =>{
        return this.rootKeys.push(item.key)
    })
}
onOpenChange= openKeys => {
    if(this.state.collapsed){
        return false;
    }
    this.setState({openKeys})
    // const lastOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key)=== -1);
    // if(this.rootKeys.indexOf(lastOpenKey)=== -1) {
    //     this.setState({openKeys:[...this.state.openKeys,openKeys]})
    // }else {
    //     this.setState({
    //         openKeys:lastOpenKey ? [lastOpenKey] : []
    //     })
    // }
}
componentWillMount () { 
    this.MenuTreeNode = this.renderMenu(MenuConfig); 
    this.getInitSubKeys(MenuConfig) 
    const currentKey = this.props.location.pathname
    const openKey='/'+currentKey.split('/')[1]
    this.setState({
        currentKey,
        openKeys:[...this.state.openKeys,openKey]
    })
}

componentWillReceiveProps(nextProps){
    const currenPath = this.props.location.pathname
    const nextPath = nextProps.location.pathname
    if(currenPath !== nextPath){
        this.setState({
            currentKey:nextPath 
        })
    }
}

render() {
    return (

        <Sider collapsible 
            collapsed={this.state.collapsed} 
            onCollapse={this.onCollapse}
            className='sider'
            >
            <div className={!this.state.collapsed ? 'logo':'login'}>
                <span className='font'>CDN服务质量数据分析</span>
            </div>
            <Menu 
                className='menu'
                mode='inline'
                theme="dark"
                openKeys={this.state.openKeys}
                selectedKeys={[this.state.currentKey]}
                onOpenChange={this.onOpenChange}
                onClick={this.handleClick}
                >
                {this.MenuTreeNode}      
            </Menu>
        </Sider>

    )
}

} export default withRouter(NavLeft);

// menuConfig const menuList = [ { title:'快手', key:'/kuaishou', icon:'user', children:[ {

title:'实时数据',
key:'/kuaishou/real_time'

}, {

title:'离线调优数据支持',
key:'/kuaishou/qos'

}, {

title:'快手播放体验数据',
key:'/kuaishou/vff'

}, {

title:'快手资源下载数据',
key:'/kuaishou/dld'

}, {

title:'快手表格数据',
key:'/kuaishou/table'

} ] }, { title:'头条', key:'/toutiao', icon:'edit', children:[ {

title:'节点维度实时数据',
key:'/toutiao/node',

}, {

title:'厂商对比',
key:'/toutiao/cdn_vs'

}, {

title:'头条服务质量日报',
key:'/toutiao/daily'

} ] }, { title:'芒果', key:'/mangguo', icon:'redo', children:[ {

title:'邮件各终端及总体趋势',
key:'/mangguo/mail_platforms'

}, {

title:'邮件各地区趋势',
key:'/mangguo/mail_locations'

}, {

title:'邮件各地区趋势easy',
key:'/mangguo/mail_locations_easy'

}, {

title:'pcvideo日报',
key:'/mangguo/pcv_daily'

}, {

title:'ottvideo',
key:'/mangguo/ott_daily'

}, {

title:'日志分析',
key:'/mangguo/user_log_ana'

} ] }, { title:'其他点播客户', key:'/other_customer', icon:'zoom-in', children:[ {

title:'秒拍波波视频',
key:'/other_customer/miaopai'

}, {

title:'淘宝小视频',
key:'/other_customer/taobao'

}, {

title:'微博小时数据',
key:'/other_customer/weibo'

}, {

title:'微博日报',
key:'/other_customer/weibo_daily'

}, {

title:'协议栈A/B测试',
key:'/other_customer/ab_test'

}, {

title:'youku直播卡顿区域',
key:'/other_customer/youku_live_impairment_location'

}, {

title:'youku直播卡顿节点',
key:'/other_customer/youku_live_impairment_node'

} ] }, { title:'稳定性', key:'/stability', icon:'bell', children:[ {

title:'cpu',
key:'/stability/cpu'

}, {

title:'io',
key:'/stability/io'

}, {

title:'io问题日报',
key:'/stability/io_daily_report'

}, {

title:'网络',
key:'/stability/network'

} ] }, { title:'直播', key:'/live', icon:'compass', children:[ {

title:'hls直播',
key:'/live/hls'

} ] }, { title:'节点质量', key:'/iq', icon:'file-markdown', children:[ {

title:'节点质量打标',
key:'/iq/real_node_tagging'

}, {

title:'质量差节点',
key:'/iq/bad_network'

}, {

title:'节点网络质量',
key:'/iq/network'

}, {

title:'TOP域名SLA指标',
key:'/iq/top_domain_sla'

}, {

title:'回源策略建议',
key:'/iq/l1_l2_strategy'

}, {

title:'路由宝探测数据',
key:'/iq/luyoubao'

}, {

title:'节点硬件数据',
key:'/iq/node_tagging'

}, {

title:'节点传输质量预估',
key:'/iq/network_trans_qos'

} ] }, { title:'L1服务质量', key:'/l1_qos', icon:'file-text', children:[ {

title:'码率慢速比',
key:'/l1_qos/bitrate_slow'

}, {

title:'中断率',
key:'/l1_qos/abort'

}, {

title:'首包和服务处理时间',
key:'/l1_qos/fbt_st'

}, {

title:'L1回源质量',
key:'/l1_qos/l1_l2'

} ] } ] export default menuList;

原文链接:segmentfault.com

上一篇:webpack里的ReplaceSource说明
下一篇:content-type为text/event-stream的请求是什么?
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部