62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
import { MoreOutlined } from '@ant-design/icons';
|
|
import { Button, Dropdown, Tooltip, type MenuProps } from 'antd';
|
|
import _ from 'lodash';
|
|
|
|
interface DropdownButtonsProps {
|
|
items: MenuProps['items'];
|
|
size?: 'small' | 'middle' | 'large';
|
|
onSelect: (val: any, item?: any) => void;
|
|
}
|
|
|
|
const DropdownButtons: React.FC<DropdownButtonsProps> = ({
|
|
items,
|
|
size = 'small',
|
|
onSelect
|
|
}) => {
|
|
const handleMenuClick = (item: any) => {
|
|
console.log('menu click', item.key);
|
|
const selectItem = _.find(items, { key: item.key });
|
|
onSelect(item.key, selectItem);
|
|
};
|
|
|
|
const handleButtonClick = (e: any) => {
|
|
const headItem = _.head(items);
|
|
onSelect(headItem.key, headItem);
|
|
};
|
|
|
|
if (!items?.length) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{items?.length === 1 ? (
|
|
<Button
|
|
icon={_.get(items, '0.icon')}
|
|
size={size}
|
|
onClick={handleButtonClick}
|
|
></Button>
|
|
) : (
|
|
<Dropdown.Button
|
|
menu={{
|
|
items: _.tail(items),
|
|
onClick: handleMenuClick
|
|
}}
|
|
buttonsRender={([leftButton, rightButton]) => [
|
|
<Tooltip title={_.head(items)?.label} key="leftButton">
|
|
<Button
|
|
onClick={handleButtonClick}
|
|
size={size}
|
|
icon={_.head(items)?.icon}
|
|
></Button>
|
|
</Tooltip>,
|
|
<Button icon={<MoreOutlined />} size={size} key="menu"></Button>
|
|
]}
|
|
></Dropdown.Button>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default DropdownButtons;
|