107 lines
3.1 KiB
TypeScript
107 lines
3.1 KiB
TypeScript
import { MoreOutlined } from '@ant-design/icons';
|
|
import { useIntl } from '@umijs/max';
|
|
import { Button, Dropdown, Tooltip, type MenuProps } from 'antd';
|
|
import classNames from 'classnames';
|
|
import _ from 'lodash';
|
|
import { memo } from 'react';
|
|
import './index.less';
|
|
|
|
interface DropdownButtonsProps {
|
|
items: MenuProps['items'];
|
|
size?: 'small' | 'middle' | 'large';
|
|
onSelect: (val: any, item?: any) => void;
|
|
}
|
|
|
|
const DropdownButtons: React.FC<DropdownButtonsProps> = ({
|
|
items,
|
|
size = 'middle',
|
|
onSelect
|
|
}) => {
|
|
const intl = useIntl();
|
|
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 <span></span>;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{items?.length === 1 ? (
|
|
<Tooltip title={intl.formatMessage({ id: _.head(items)?.label })}>
|
|
<Button
|
|
className={classNames('dropdown-button', size)}
|
|
{..._.head(items)}
|
|
icon={_.get(items, '0.icon')}
|
|
size={size}
|
|
{..._.get(items, '0.props')}
|
|
onClick={handleButtonClick}
|
|
></Button>
|
|
</Tooltip>
|
|
) : (
|
|
<Dropdown.Button
|
|
dropdownRender={(menus: any) => {
|
|
return (
|
|
<div
|
|
className="flex flex-column "
|
|
style={{
|
|
backgroundColor: 'var(--color-white-1)',
|
|
padding: 5,
|
|
alignItems: 'flex-start',
|
|
borderRadius: 'var(--border-radius-base)',
|
|
boxShadow: 'var(--ant-box-shadow-secondary)'
|
|
}}
|
|
>
|
|
{_.map(_.tail(items), (item: any) => {
|
|
return (
|
|
<Button
|
|
{...item.props}
|
|
type="text"
|
|
size="middle"
|
|
icon={item.icon}
|
|
key={item.key}
|
|
onClick={() => handleMenuClick(item)}
|
|
style={{ width: '100%', justifyContent: 'flex-start' }}
|
|
>
|
|
{intl.formatMessage({ id: item.label })}
|
|
</Button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}}
|
|
buttonsRender={([leftButton, rightButton]) => [
|
|
<Tooltip
|
|
title={intl.formatMessage({ id: _.head(items)?.label })}
|
|
key="leftButton"
|
|
>
|
|
<Button
|
|
className={classNames('dropdown-button', size)}
|
|
onClick={handleButtonClick}
|
|
size={size}
|
|
icon={_.head(items)?.icon}
|
|
></Button>
|
|
</Tooltip>,
|
|
<Button
|
|
icon={<MoreOutlined />}
|
|
size={size}
|
|
key="menu"
|
|
className={classNames('dropdown-button', size)}
|
|
></Button>
|
|
]}
|
|
></Dropdown.Button>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default memo(DropdownButtons);
|