Browse Source

Fix direction of pop animation for Dropdown, ref #4811

pull/4817/head
afc163 8 years ago
parent
commit
d1b91bcc99
  1. 13
      components/dropdown/dropdown.tsx
  2. 22
      components/dropdown/style/index.less

13
components/dropdown/dropdown.tsx

@ -11,24 +11,33 @@ export interface DropDownProps {
align?: Object; align?: Object;
getPopupContainer?: () => HTMLElement; getPopupContainer?: () => HTMLElement;
prefixCls?: string; prefixCls?: string;
placement?: 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
} }
export default class Dropdown extends React.Component<DropDownProps, any> { export default class Dropdown extends React.Component<DropDownProps, any> {
static Button: React.ReactNode; static Button: React.ReactNode;
static defaultProps = { static defaultProps = {
transitionName: 'slide-up',
prefixCls: 'ant-dropdown', prefixCls: 'ant-dropdown',
mouseEnterDelay: 0.15, mouseEnterDelay: 0.15,
mouseLeaveDelay: 0.1, mouseLeaveDelay: 0.1,
placement: 'bottomLeft',
}; };
getTransitionName() {
const { placement = '' } = this.props;
if (placement.indexOf('top') >= 0) {
return 'slide-down';
}
return 'slide-up';
}
render() { render() {
const { children, prefixCls } = this.props; const { children, prefixCls } = this.props;
const dropdownTrigger = cloneElement(children as any, { const dropdownTrigger = cloneElement(children as any, {
className: classNames((children as any).props.className, `${prefixCls}-trigger`), className: classNames((children as any).props.className, `${prefixCls}-trigger`),
}); });
return ( return (
<RcDropdown {...this.props}> <RcDropdown transitionName={this.getTransitionName()} {...this.props}>
{dropdownTrigger} {dropdownTrigger}
</RcDropdown> </RcDropdown>
); );

22
components/dropdown/style/index.less

@ -134,21 +134,33 @@
} }
} }
&.slide-up-enter.slide-up-enter-active&-placement-bottomLeft, &.slide-down-enter.slide-down-enter-active&-placement-bottomLeft,
&.slide-up-appear.slide-up-appear-active&-placement-bottomLeft { &.slide-down-appear.slide-down-appear-active&-placement-bottomLeft,
&.slide-down-enter.slide-down-enter-active&-placement-bottomCenter,
&.slide-down-appear.slide-down-appear-active&-placement-bottomCenter,
&.slide-down-enter.slide-down-enter-active&-placement-bottomRight,
&.slide-down-appear.slide-down-appear-active&-placement-bottomRight {
animation-name: antSlideUpIn; animation-name: antSlideUpIn;
} }
&.slide-up-enter.slide-up-enter-active&-placement-topLeft, &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
&.slide-up-appear.slide-up-appear-active&-placement-topLeft { &.slide-up-appear.slide-up-appear-active&-placement-topLeft,
&.slide-up-enter.slide-up-enter-active&-placement-topCenter,
&.slide-up-appear.slide-up-appear-active&-placement-topCenter,
&.slide-up-enter.slide-up-enter-active&-placement-topRight,
&.slide-up-appear.slide-up-appear-active&-placement-topRight {
animation-name: antSlideDownIn; animation-name: antSlideDownIn;
} }
&.slide-up-leave.slide-up-leave-active&-placement-bottomLeft { &.slide-down-leave.slide-down-leave-active&-placement-bottomLeft,
&.slide-down-leave.slide-down-leave-active&-placement-bottomCenter,
&.slide-down-leave.slide-down-leave-active&-placement-bottomRight {
animation-name: antSlideUpOut; animation-name: antSlideUpOut;
} }
&.slide-up-leave.slide-up-leave-active&-placement-topLeft { &.slide-up-leave.slide-up-leave-active&-placement-topLeft,
&.slide-up-leave.slide-up-leave-active&-placement-topCenter,
&.slide-up-leave.slide-up-leave-active&-placement-topRight {
animation-name: antSlideDownOut; animation-name: antSlideDownOut;
} }
} }

Loading…
Cancel
Save