151 lines
4.0 KiB
TypeScript
151 lines
4.0 KiB
TypeScript
import { MoreOutlined } from '@ant-design/icons';
|
|
import { useIntl } from '@umijs/max';
|
|
import { Button, Dropdown, Space, Tooltip, type MenuProps } from 'antd';
|
|
import classNames from 'classnames';
|
|
import _ from 'lodash';
|
|
import React from 'react';
|
|
import styled from 'styled-components';
|
|
import './index.less';
|
|
|
|
type Trigger = 'click' | 'hover';
|
|
interface DropdownButtonsProps {
|
|
items: MenuProps['items'];
|
|
size?: 'small' | 'middle' | 'large';
|
|
trigger?: Trigger[];
|
|
showText?: boolean;
|
|
disabled?: boolean;
|
|
variant?: 'filled' | 'outlined';
|
|
color?: string;
|
|
extra?: React.ReactNode;
|
|
onSelect: (val: any, item?: any) => void;
|
|
}
|
|
|
|
const DropdownWrapper = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: var(--ant-color-bg-elevated);
|
|
padding: 5px;
|
|
align-items: flex-start;
|
|
border-radius: var(--border-radius-base);
|
|
box-shadow: var(--ant-box-shadow-secondary);
|
|
min-width: 160px;
|
|
`;
|
|
|
|
const DropdownButtons: React.FC<
|
|
DropdownButtonsProps & { items: MenuProps['items'] }
|
|
> = ({
|
|
items,
|
|
size = 'middle',
|
|
trigger = ['hover'],
|
|
showText,
|
|
disabled,
|
|
variant,
|
|
color,
|
|
extra,
|
|
onSelect
|
|
}) => {
|
|
const headItem = _.head(items);
|
|
const intl = useIntl();
|
|
|
|
const handleMenuClick = (item: any) => {
|
|
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: headItem?.label })}>
|
|
<Button
|
|
className={classNames('dropdown-button', size)}
|
|
icon={headItem?.icon}
|
|
size={size}
|
|
{...headItem?.props}
|
|
onClick={handleButtonClick}
|
|
></Button>
|
|
</Tooltip>
|
|
) : (
|
|
<Space.Compact>
|
|
<>
|
|
{showText ? (
|
|
<Button
|
|
{...headItem?.props}
|
|
disabled={headItem?.disabled || disabled}
|
|
className={classNames('dropdown-button', size)}
|
|
onClick={handleButtonClick}
|
|
size={size}
|
|
icon={headItem?.icon}
|
|
variant={variant}
|
|
color={color}
|
|
>
|
|
{intl.formatMessage({
|
|
id: headItem?.label
|
|
})}
|
|
{extra}
|
|
</Button>
|
|
) : (
|
|
<Tooltip
|
|
title={intl.formatMessage({ id: headItem?.label })}
|
|
key="leftButton"
|
|
>
|
|
<Button
|
|
{...headItem?.props}
|
|
className={classNames('dropdown-button', size)}
|
|
onClick={handleButtonClick}
|
|
size={size}
|
|
icon={headItem?.icon}
|
|
disabled={headItem?.disabled}
|
|
></Button>
|
|
</Tooltip>
|
|
)}
|
|
</>
|
|
<Dropdown
|
|
disabled={disabled}
|
|
trigger={trigger}
|
|
placement="bottomRight"
|
|
styles={{
|
|
root: {
|
|
minWidth: 160
|
|
},
|
|
itemIcon: {
|
|
fontSize: 14
|
|
}
|
|
}}
|
|
menu={{
|
|
onClick: handleMenuClick,
|
|
items: _.tail(items).map((item: any) => ({
|
|
...item,
|
|
...item.props,
|
|
label:
|
|
item.locale || item.locale === undefined
|
|
? intl.formatMessage({ id: item.label })
|
|
: item.label
|
|
}))
|
|
}}
|
|
>
|
|
<Button
|
|
icon={<MoreOutlined />}
|
|
size={size}
|
|
key="menu"
|
|
variant={variant}
|
|
color="default"
|
|
className={classNames('dropdown-button', size)}
|
|
></Button>
|
|
</Dropdown>
|
|
</Space.Compact>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default DropdownButtons;
|