salary-management-front/pc4mobx/hrmSalary/components/moreBtnMenu/index.js

63 lines
1.8 KiB
JavaScript

/*
* Author: 黎永顺
* name: 更多菜单列表
* Description:
* Date: 2023/12/28
*/
import React, { Component } from "react";
import { WeaLocaleProvider } from "ecCom";
import { Menu } from "antd";
import "./index.less";
const getLabel = WeaLocaleProvider.getLabel;
class Index extends Component {
constructor(props) {
super(props);
this.state = {
showDrop: false
};
}
render() {
const { showDrop } = this.state;
const { dropMenuDatas } = this.props;
const menu = dropMenuDatas ?
<Menu 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 (
<Menu.Item disabled={d.disabled} key={d.key || i}>
<span className="menu-icon">{d.icon}</span>
{d.content}
</Menu.Item>
);
})}
</Menu> : "";
return (
<div className="more-btn-menu-wrapper">
{
!_.isEmpty(dropMenuDatas) &&
<span className="more-btn" onClick={() => this.setState({ showDrop: true })}>
<i className="more-btn-icon icon-New-Flow-menu"/>
</span>
}
<div className="more-btn-menu"
onMouseLeave={() => this.setState({ showDrop: false })}
style={{ display: showDrop ? "block" : "none" }}>
<span className="more-btn"
onClick={() => this.setState({ showDrop: false })}>
<i className="more-btn-icon icon-New-Flow-menu"/>
</span>
<div className="more-btn-menu-icon-background"></div>
{menu}
</div>
</div>
);
}
}
export default Index;