2017-11-17 14:38:54 +08:00
|
|
|
import * as React from 'react';
|
2019-05-06 12:04:39 +08:00
|
|
|
import classNames from 'classnames';
|
2020-03-02 12:09:38 +08:00
|
|
|
import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined';
|
2019-08-13 14:07:17 +08:00
|
|
|
|
2015-12-02 15:18:15 +08:00
|
|
|
import Button from '../button';
|
2018-09-05 20:09:38 +08:00
|
|
|
import { ButtonHTMLType } from '../button/button';
|
2017-06-16 20:28:42 +08:00
|
|
|
import { ButtonGroupProps } from '../button/button-group';
|
2018-12-05 19:12:18 +08:00
|
|
|
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
2017-06-20 09:46:23 +08:00
|
|
|
import Dropdown, { DropDownProps } from './dropdown';
|
2019-05-06 12:04:39 +08:00
|
|
|
|
2017-06-20 09:46:23 +08:00
|
|
|
const ButtonGroup = Button.Group;
|
2016-08-19 16:43:32 +08:00
|
|
|
|
2018-12-22 21:21:42 +08:00
|
|
|
type DropdownButtonType = 'primary' | 'ghost' | 'dashed';
|
|
|
|
|
2017-06-20 09:46:23 +08:00
|
|
|
export interface DropdownButtonProps extends ButtonGroupProps, DropDownProps {
|
2018-12-22 21:21:42 +08:00
|
|
|
type?: DropdownButtonType;
|
2018-09-05 20:09:38 +08:00
|
|
|
htmlType?: ButtonHTMLType;
|
2016-09-19 11:42:03 +08:00
|
|
|
disabled?: boolean;
|
2018-05-04 14:48:41 +08:00
|
|
|
onClick?: React.MouseEventHandler<HTMLButtonElement>;
|
2019-05-06 12:04:39 +08:00
|
|
|
icon?: React.ReactNode;
|
2018-12-21 21:12:36 +08:00
|
|
|
href?: string;
|
2019-06-16 20:51:47 +08:00
|
|
|
children?: React.ReactNode;
|
2019-08-09 18:10:00 +08:00
|
|
|
title?: string;
|
2020-01-13 12:15:20 +08:00
|
|
|
buttonsRender?: (buttons: React.ReactNode[]) => React.ReactNode[];
|
2016-08-19 16:43:32 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export default class DropdownButton extends React.Component<DropdownButtonProps, any> {
|
2020-01-17 12:10:59 +08:00
|
|
|
static __ANT_BUTTON = true;
|
|
|
|
|
2016-03-29 14:01:10 +08:00
|
|
|
static defaultProps = {
|
2018-12-22 21:21:42 +08:00
|
|
|
placement: 'bottomRight' as DropDownProps['placement'],
|
|
|
|
type: 'default' as DropdownButtonType,
|
2020-01-13 12:15:20 +08:00
|
|
|
buttonsRender: (buttons: React.ReactNode[]) => buttons,
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2016-03-29 14:01:10 +08:00
|
|
|
|
2018-12-07 20:02:01 +08:00
|
|
|
renderButton = ({
|
|
|
|
getPopupContainer: getContextPopupContainer,
|
|
|
|
getPrefixCls,
|
|
|
|
}: ConfigConsumerProps) => {
|
2016-12-19 15:19:15 +08:00
|
|
|
const {
|
2018-12-05 19:12:18 +08:00
|
|
|
prefixCls: customizePrefixCls,
|
2018-12-07 20:02:01 +08:00
|
|
|
type,
|
|
|
|
disabled,
|
|
|
|
onClick,
|
|
|
|
htmlType,
|
|
|
|
children,
|
|
|
|
className,
|
|
|
|
overlay,
|
|
|
|
trigger,
|
|
|
|
align,
|
|
|
|
visible,
|
|
|
|
onVisibleChange,
|
|
|
|
placement,
|
|
|
|
getPopupContainer,
|
2018-12-21 21:12:36 +08:00
|
|
|
href,
|
2019-11-28 12:34:33 +08:00
|
|
|
icon = <EllipsisOutlined />,
|
2019-08-08 11:11:46 +08:00
|
|
|
title,
|
2020-01-13 12:15:20 +08:00
|
|
|
buttonsRender,
|
2018-06-02 20:12:09 +08:00
|
|
|
...restProps
|
2016-12-19 15:19:15 +08:00
|
|
|
} = this.props;
|
2016-11-11 15:26:57 +08:00
|
|
|
|
2018-12-05 19:12:18 +08:00
|
|
|
const prefixCls = getPrefixCls('dropdown-button', customizePrefixCls);
|
2016-11-13 15:53:02 +08:00
|
|
|
const dropdownProps = {
|
2016-12-03 17:31:04 +08:00
|
|
|
align,
|
|
|
|
overlay,
|
2018-01-18 23:39:34 +08:00
|
|
|
disabled,
|
2016-12-03 17:31:04 +08:00
|
|
|
trigger: disabled ? [] : trigger,
|
|
|
|
onVisibleChange,
|
2017-04-01 18:06:40 +08:00
|
|
|
placement,
|
2018-11-26 12:06:42 +08:00
|
|
|
getPopupContainer: getPopupContainer || getContextPopupContainer,
|
2018-05-21 21:02:03 +08:00
|
|
|
} as DropDownProps;
|
2020-01-13 12:15:20 +08:00
|
|
|
|
2016-11-13 15:53:02 +08:00
|
|
|
if ('visible' in this.props) {
|
2018-05-21 21:02:03 +08:00
|
|
|
dropdownProps.visible = visible;
|
2016-11-13 15:53:02 +08:00
|
|
|
}
|
|
|
|
|
2020-01-13 12:15:20 +08:00
|
|
|
const leftButton = (
|
|
|
|
<Button
|
|
|
|
type={type}
|
|
|
|
disabled={disabled}
|
|
|
|
onClick={onClick}
|
|
|
|
htmlType={htmlType}
|
|
|
|
href={href}
|
|
|
|
title={title}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</Button>
|
|
|
|
);
|
|
|
|
|
|
|
|
const rightButton = <Button type={type}>{icon}</Button>;
|
|
|
|
|
|
|
|
const [leftButtonToRender, rightButtonToRender] = buttonsRender!([leftButton, rightButton]);
|
|
|
|
|
2016-01-07 14:21:29 +08:00
|
|
|
return (
|
2018-12-07 20:02:01 +08:00
|
|
|
<ButtonGroup {...restProps} className={classNames(prefixCls, className)}>
|
2020-01-13 12:15:20 +08:00
|
|
|
{leftButtonToRender}
|
|
|
|
<Dropdown {...dropdownProps}>{rightButtonToRender}</Dropdown>
|
2016-01-07 14:21:29 +08:00
|
|
|
</ButtonGroup>
|
|
|
|
);
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2018-11-26 12:06:42 +08:00
|
|
|
|
|
|
|
render() {
|
2018-12-07 20:02:01 +08:00
|
|
|
return <ConfigConsumer>{this.renderButton}</ConfigConsumer>;
|
2018-11-26 12:06:42 +08:00
|
|
|
}
|
2016-03-18 10:31:25 +08:00
|
|
|
}
|