ant-design/components/dropdown/dropdown-button.tsx

66 lines
1.8 KiB
TypeScript
Raw Normal View History

import React from 'react';
2015-12-02 15:18:15 +08:00
import Button from '../button';
import Icon from '../icon';
import Dropdown from './dropdown';
const ButtonGroup = Button.Group;
import classNames from 'classnames';
2016-06-22 13:18:43 +08:00
import splitObject from '../_util/splitObject';
export interface DropdownButtonProps {
type?: 'primary' | 'ghost' | 'dash';
2016-10-19 17:51:33 +08:00
onClick?: React.FormEventHandler<any>;
trigger?: 'click' | 'hover';
overlay: React.ReactNode;
visible?: boolean;
disabled?: boolean;
onVisibleChange?: (visible: boolean) => void;
style?: React.CSSProperties;
prefixCls?: string;
}
export default class DropdownButton extends React.Component<DropdownButtonProps, any> {
static defaultProps = {
align: {
points: ['tr', 'br'],
overlay: {
adjustX: 1,
adjustY: 1,
},
offset: [0, 4],
targetOffset: [0, 0],
},
type: 'default',
prefixCls: 'ant-dropdown-button',
2016-07-13 11:14:24 +08:00
};
2015-12-02 15:18:15 +08:00
render() {
const [{ type, overlay, trigger, align, children, className, onClick, prefixCls,
disabled, visible, onVisibleChange }, restProps] = splitObject(this.props,
['type', 'overlay', 'trigger', 'align', 'children', 'className', 'onClick',
'prefixCls', 'disabled', 'visible', 'onVisibleChange']);
const cls = classNames(prefixCls, className);
const dropdownProps = {
align,
overlay,
trigger: disabled ? [] : trigger,
onVisibleChange,
};
if ('visible' in this.props) {
(dropdownProps as any).visible = visible;
}
return (
<ButtonGroup {...restProps} className={cls}>
<Button type={type} onClick={onClick} disabled={disabled}>{children}</Button>
<Dropdown {...dropdownProps}>
<Button type={type} disabled={disabled}>
<Icon type="down" />
</Button>
</Dropdown>
</ButtonGroup>
);
2015-12-02 15:18:15 +08:00
}
}