weaver_trunk_cli/pc4mobx/hrm/coms/topButton.js

71 lines
2.6 KiB
JavaScript

import {
Row,
Col,
Button,
Dropdown,
Menu
} from 'antd'
const Item = Menu.Item
import cloneDeep from 'lodash/cloneDeep'
class Main extends React.Component {
constructor(props) {
super(props);
this.state = {
showDrop: false,
}
}
render() {
const {
showDrop
} = this.state;
const {
icon,
buttons,
buttonSpace,
showDropIcon,
dropMenuDatas
} = this.props; //isFixed:hrm-my-card-top是否固定
const menu = dropMenuDatas ?
<Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@gnao55`} mode='vertical' onClick={(o)=> {
dropMenuDatas.forEach(d => d.key === o.key && typeof d.onClick === 'function' && d.onClick(o.key));
}}>
{
dropMenuDatas && dropMenuDatas.map((d, i)=> {
return (
<Item ecId={`${this && this.props && this.props.ecId || ''}_Item@oskl3n@${i}`} key={d.key || i} disabled={d.disabled} >
<span className='wea-right-menu-icon'>{d.icon}</span>
{d.content}
</Item>
)
})}
</Menu> : '';
return (
<div className="hrm-my-card-top hrm-my-card-top-fixed">
{
buttons && buttons.map((data)=>{
return (
<span style={{display:'inline-block',lineHeight:'28px',verticalAlign:'middle',marginLeft:!!buttonSpace ? buttonSpace : 20}}>{data}</span>
)
})
}
{
showDropIcon && (buttons.length > 0) &&
<span className='hrm-my-card-top-drop-btn' onClick={()=>this.setState({showDrop:true})}>
<i className="hrm-my-card-top-icon-button icon-New-Flow-menu" />
</span>
}
<div className='hrm-my-card-top-drop-menu wea-right-menu' onMouseLeave={()=>this.setState({showDrop:false})} style={{display:showDrop ? 'block' : 'none'}}>
<span className='hrm-my-card-top-drop-btn' onClick={()=>this.setState({showDrop:false})}>
<i className="hrm-my-card-top-icon-button icon-New-Flow-menu" />
</span>
<div className='wea-right-menu-icon-background'></div>
{menu}
</div>
</div>
)
}
}
export default Main;