mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 21:48:19 +08:00
5191b85b96
* fix: type updated from any, and comments removed #15930 * refactor: removed unnecessary comments, created helper for button * fix: cleanupTimer * fix: import fixed * Update components/button/button.tsx Co-authored-by: afc163 <afc163@gmail.com> * Update components/dropdown/dropdown-button.tsx Co-authored-by: afc163 <afc163@gmail.com> Co-authored-by: afc163 <afc163@gmail.com>
145 lines
3.6 KiB
TypeScript
145 lines
3.6 KiB
TypeScript
import classNames from 'classnames';
|
|
import * as React from 'react';
|
|
import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined';
|
|
import Button from '../button';
|
|
import { ConfigContext } from '../config-provider';
|
|
import Space from '../space';
|
|
import { useCompactItemContext } from '../space/Compact';
|
|
import Dropdown from './dropdown';
|
|
import useStyle from './style';
|
|
|
|
import type { ButtonProps, ButtonHTMLType } from '../button';
|
|
import type { ButtonGroupProps } from '../button/button-group';
|
|
import type { DropdownProps } from './dropdown';
|
|
|
|
export type DropdownButtonType = 'default' | 'primary' | 'ghost' | 'dashed' | 'link' | 'text';
|
|
|
|
export interface DropdownButtonProps extends ButtonGroupProps, DropdownProps {
|
|
type?: DropdownButtonType;
|
|
htmlType?: ButtonHTMLType;
|
|
danger?: boolean;
|
|
disabled?: boolean;
|
|
loading?: ButtonProps['loading'];
|
|
onClick?: React.MouseEventHandler<HTMLElement>;
|
|
icon?: React.ReactNode;
|
|
href?: string;
|
|
children?: React.ReactNode;
|
|
title?: string;
|
|
buttonsRender?: (buttons: React.ReactNode[]) => React.ReactNode[];
|
|
}
|
|
|
|
type CompoundedComponent = React.FC<DropdownButtonProps> & {
|
|
/** @internal */
|
|
__ANT_BUTTON: boolean;
|
|
};
|
|
|
|
const DropdownButton: CompoundedComponent = (props) => {
|
|
const {
|
|
getPopupContainer: getContextPopupContainer,
|
|
getPrefixCls,
|
|
direction,
|
|
} = React.useContext(ConfigContext);
|
|
|
|
const {
|
|
prefixCls: customizePrefixCls,
|
|
type = 'default',
|
|
danger,
|
|
disabled,
|
|
loading,
|
|
onClick,
|
|
htmlType,
|
|
children,
|
|
className,
|
|
menu,
|
|
arrow,
|
|
autoFocus,
|
|
overlay,
|
|
trigger,
|
|
align,
|
|
open,
|
|
onOpenChange,
|
|
placement,
|
|
getPopupContainer,
|
|
href,
|
|
icon = <EllipsisOutlined />,
|
|
title,
|
|
buttonsRender = (buttons: React.ReactNode[]) => buttons,
|
|
mouseEnterDelay,
|
|
mouseLeaveDelay,
|
|
overlayClassName,
|
|
overlayStyle,
|
|
destroyPopupOnHide,
|
|
dropdownRender,
|
|
...restProps
|
|
} = props;
|
|
|
|
const prefixCls = getPrefixCls('dropdown', customizePrefixCls);
|
|
const buttonPrefixCls = `${prefixCls}-button`;
|
|
const [wrapSSR, hashId] = useStyle(prefixCls);
|
|
|
|
const dropdownProps: DropdownProps = {
|
|
menu,
|
|
arrow,
|
|
autoFocus,
|
|
align,
|
|
disabled,
|
|
trigger: disabled ? [] : trigger,
|
|
onOpenChange,
|
|
getPopupContainer: getPopupContainer || getContextPopupContainer,
|
|
mouseEnterDelay,
|
|
mouseLeaveDelay,
|
|
overlayClassName,
|
|
overlayStyle,
|
|
destroyPopupOnHide,
|
|
dropdownRender,
|
|
};
|
|
|
|
const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
|
|
|
|
const classes = classNames(buttonPrefixCls, compactItemClassnames, className, hashId);
|
|
|
|
if ('overlay' in props) {
|
|
dropdownProps.overlay = overlay;
|
|
}
|
|
|
|
if ('open' in props) {
|
|
dropdownProps.open = open;
|
|
}
|
|
|
|
if ('placement' in props) {
|
|
dropdownProps.placement = placement;
|
|
} else {
|
|
dropdownProps.placement = direction === 'rtl' ? 'bottomLeft' : 'bottomRight';
|
|
}
|
|
|
|
const leftButton = (
|
|
<Button
|
|
type={type}
|
|
danger={danger}
|
|
disabled={disabled}
|
|
loading={loading}
|
|
onClick={onClick}
|
|
htmlType={htmlType}
|
|
href={href}
|
|
title={title}
|
|
>
|
|
{children}
|
|
</Button>
|
|
);
|
|
|
|
const rightButton = <Button type={type} danger={danger} icon={icon} />;
|
|
|
|
const [leftButtonToRender, rightButtonToRender] = buttonsRender([leftButton, rightButton]);
|
|
|
|
return wrapSSR(
|
|
<Space.Compact className={classes} size={compactSize} block {...restProps}>
|
|
{leftButtonToRender}
|
|
<Dropdown {...dropdownProps}>{rightButtonToRender}</Dropdown>
|
|
</Space.Compact>,
|
|
);
|
|
};
|
|
|
|
DropdownButton.__ANT_BUTTON = true;
|
|
|
|
export default DropdownButton;
|