import * as React from 'react' ; import { observer } from 'mobx-react' ; import * as PropTypes from 'prop-types' ; import { Layout , Input , Menu } from 'antd' ; import classnames from 'classnames' ; import { IState } from './interface/nav.interface' ; import { ICommonStore } from '@/store/interface/common.interface' ; import './nav.less' ; const { Sider } = Layout ; @ observer export default class Nav extends React . Component < { common : ICommonStore ; } , IState > { public static contextTypes = { router : PropTypes . shape ( { history : PropTypes . shape ( { push : PropTypes . func . isRequired } ) . isRequired } ) . isRequired } ; public state = { collapsed : false , openKeys : [ '' ] , rootSubmenuKeys : [ '' ] , defaultSelectedKeys : [ ] } ; public onGoToList = ( tag ) => { this . props . common . currentTag = tag . name ; if ( this . props . common . currentCenterConfig ) { this . context . router . history . push ( `/${ this . props . common . currentCenterConfig . name }/list/${ tag . name }` ) ; } } ; public handleChange = ( ev ) => { this . props . common . filterValue = ev . target . value ; if ( ! ev . target . value ) { this . props . common . filterNav = this . props . common . center ? this . props . common . center . tags : [ ] ; } } ; public render ( ) { if ( ! this . props . common . filterNav ) { return null ; } const collapsed = classnames ( 'layout-nav-logo' , { 'collapsed' : this . props . common . collapsed } ) ; return ( < Sider trigger = { null } collapsible = { true } collapsed = { this . props . common . collapsed } className = "layout-sider" > < header className = { collapsed } > < img src = { require ( '../../images/logo.png' ) } /> < span > SHARE - API < /span> < /header> < div className = "search-wrapper" > < Input placeholder = "输入模块名称" value = { this . props . common . filterValue } onChange = { this . handleChange } / > { } < /div> < div className = "nav-api-list" > < div className = "dl" > < Menu style = { { width : 256 } } mode = "vertical" theme = "light" > { this . props . common . filterNav . map ( ( tag , tagsIndex ) => { return ( < Menu . Item key = { tagsIndex } onClick = { this . onGoToList . bind ( this , tag ) } > { tag . name } < /Menu.Item>); } ) } < /Menu> < /div> < /div> < /Sider>); } }