import * as React from 'react'; import classNames from 'classnames'; import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined'; import Button from '../button'; import { ButtonHTMLType } from '../button/button'; import { ButtonGroupProps } from '../button/button-group'; import { ConfigContext } from '../config-provider'; import Dropdown, { DropDownProps } from './dropdown'; const ButtonGroup = Button.Group; export type DropdownButtonType = 'default' | 'primary' | 'ghost' | 'dashed' | 'link' | 'text'; export interface DropdownButtonProps extends ButtonGroupProps, DropDownProps { type?: DropdownButtonType; htmlType?: ButtonHTMLType; disabled?: boolean; onClick?: React.MouseEventHandler; icon?: React.ReactNode; href?: string; children?: React.ReactNode; title?: string; buttonsRender?: (buttons: React.ReactNode[]) => React.ReactNode[]; } interface DropdownButtonInterface extends React.FC { __ANT_BUTTON: boolean; } const DropdownButton: DropdownButtonInterface = props => { const { getPopupContainer: getContextPopupContainer, getPrefixCls, direction, } = React.useContext(ConfigContext); const { prefixCls: customizePrefixCls, type = 'default', disabled, onClick, htmlType, children, className, overlay, trigger, align, visible, onVisibleChange, placement, getPopupContainer, href, icon = , title, buttonsRender = (buttons: React.ReactNode[]) => buttons, mouseEnterDelay, mouseLeaveDelay, overlayClassName, overlayStyle, ...restProps } = props; const prefixCls = getPrefixCls('dropdown-button', customizePrefixCls); const dropdownProps = { align, overlay, disabled, trigger: disabled ? [] : trigger, onVisibleChange, getPopupContainer: getPopupContainer || getContextPopupContainer, mouseEnterDelay, mouseLeaveDelay, overlayClassName, overlayStyle, } as DropDownProps; if ('visible' in props) { dropdownProps.visible = visible; } if ('placement' in props) { dropdownProps.placement = placement; } else { dropdownProps.placement = direction === 'rtl' ? 'bottomLeft' : 'bottomRight'; } const leftButton = ( ); const rightButton =