ant-design/components/dropdown/dropdown.tsx

73 lines
2.2 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
import RcDropdown from 'rc-dropdown';
import classNames from 'classnames';
2017-06-09 18:37:05 +08:00
import DropdownButton from './dropdown-button';
2017-05-11 16:50:22 +08:00
import warning from '../_util/warning';
2015-12-02 15:18:15 +08:00
export interface DropDownProps {
2016-12-19 15:19:15 +08:00
trigger?: ('click' | 'hover')[];
overlay: React.ReactNode;
style?: React.CSSProperties;
onVisibleChange?: (visible?: boolean) => void;
2016-08-24 16:09:55 +08:00
visible?: boolean;
disabled?: boolean;
2016-08-24 16:09:55 +08:00
align?: Object;
getPopupContainer?: (triggerNode: Element) => HTMLElement;
prefixCls?: string;
className?: string;
placement?: 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
}
export default class Dropdown extends React.Component<DropDownProps, any> {
2017-06-09 18:37:05 +08:00
static Button: typeof DropdownButton;
static defaultProps = {
prefixCls: 'ant-dropdown',
mouseEnterDelay: 0.15,
mouseLeaveDelay: 0.1,
placement: 'bottomLeft',
2016-07-13 11:14:24 +08:00
};
getTransitionName() {
const { placement = '' } = this.props;
if (placement.indexOf('top') >= 0) {
return 'slide-down';
}
return 'slide-up';
}
componentDidMount() {
const { overlay } = this.props;
const overlayProps = (overlay as any).props as any;
warning(
!overlayProps.mode || overlayProps.mode === 'vertical',
`mode="${overlayProps.mode}" is not supported for Dropdown\'s Menu.`,
);
}
2016-01-05 14:42:06 +08:00
render() {
const { children, prefixCls, overlay, trigger, disabled } = this.props;
const dropdownTrigger = React.cloneElement(children as any, {
className: classNames((children as any).props.className, `${prefixCls}-trigger`),
disabled,
});
// menu cannot be selectable in dropdown defaultly
const overlayProps = overlay && (overlay as any).props;
const selectable = (overlayProps && 'selectable' in overlayProps)
? overlayProps.selectable : false;
const fixedModeOverlay = React.cloneElement(overlay as any, {
mode: 'vertical',
selectable,
});
return (
<RcDropdown
2017-08-16 17:56:07 +08:00
{...this.props}
transitionName={this.getTransitionName()}
trigger={disabled ? [] : trigger}
overlay={fixedModeOverlay}
>
{dropdownTrigger}
</RcDropdown>
);
2015-12-02 15:18:15 +08:00
}
}