diff --git a/components/_util/motion.tsx b/components/_util/motion.tsx index 973e6cf136..f9c5a7f431 100644 --- a/components/_util/motion.tsx +++ b/components/_util/motion.tsx @@ -1,36 +1,14 @@ -import * as React from 'react'; - -type MotionFunc = (element: HTMLElement) => React.CSSProperties; -type MotionEndFunc = (element: HTMLElement, event: TransitionEvent) => boolean; - -interface Motion { - visible?: boolean; - motionName?: string; // It also support object, but we only use string here. - motionAppear?: boolean; - motionEnter?: boolean; - motionLeave?: boolean; - motionLeaveImmediately?: boolean; // Trigger leave motion immediately - motionDeadline?: number; - removeOnLeave?: boolean; - leavedClassName?: string; - onAppearStart?: MotionFunc; - onAppearActive?: MotionFunc; - onAppearEnd?: MotionEndFunc; - onEnterStart?: MotionFunc; - onEnterActive?: MotionFunc; - onEnterEnd?: MotionEndFunc; - onLeaveStart?: MotionFunc; - onLeaveActive?: MotionFunc; - onLeaveEnd?: MotionEndFunc; -} +import { CSSMotionProps } from 'rc-motion'; +import { MotionEventHandler, MotionEndEventHandler } from 'rc-motion/lib/CSSMotion'; // ================== Collapse Motion ================== -const getCollapsedHeight: MotionFunc = () => ({ height: 0, opacity: 0 }); -const getRealHeight: MotionFunc = node => ({ height: node.scrollHeight, opacity: 1 }); -const getCurrentHeight: MotionFunc = node => ({ height: node.offsetHeight }); -const skipOpacityTransition: MotionEndFunc = (_, event) => event.propertyName === 'height'; +const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 }); +const getRealHeight: MotionEventHandler = node => ({ height: node.scrollHeight, opacity: 1 }); +const getCurrentHeight: MotionEventHandler = node => ({ height: node.offsetHeight }); +const skipOpacityTransition: MotionEndEventHandler = (_, event) => + (event as TransitionEvent).propertyName === 'height'; -const collapseMotion: Motion = { +const collapseMotion: CSSMotionProps = { motionName: 'ant-motion-collapse', onAppearStart: getCollapsedHeight, onEnterStart: getCollapsedHeight, diff --git a/components/menu/index.tsx b/components/menu/index.tsx index 1e132df7fe..295dad3395 100644 --- a/components/menu/index.tsx +++ b/components/menu/index.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import RcMenu, { Divider, ItemGroup, MenuProps as RcMenuProps } from 'rc-menu'; import classNames from 'classnames'; -import { MotionType } from 'rc-trigger/lib/interface'; import SubMenu from './SubMenu'; import Item from './MenuItem'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; @@ -57,7 +56,7 @@ class InternalMenu extends React.Component { const { prefixCls: customizePrefixCls, className, theme } = this.props; const defaultMotions = { horizontal: { motionName: 'slide-up' }, - inline: collapseMotion as MotionType, + inline: collapseMotion, other: { motionName: 'zoom-big' }, }; diff --git a/package.json b/package.json index e4d031f7ab..3260b002b4 100644 --- a/package.json +++ b/package.json @@ -126,14 +126,15 @@ "rc-field-form": "~1.8.0", "rc-input-number": "~6.0.0", "rc-mentions": "~1.4.0", - "rc-menu": "~8.5.0", + "rc-menu": "~8.5.2", + "rc-motion": "^1.0.0", "rc-notification": "~4.4.0", "rc-pagination": "~2.4.5", "rc-picker": "~1.15.1", "rc-progress": "~3.0.0", "rc-rate": "~2.8.2", "rc-resize-observer": "^0.2.3", - "rc-select": "~11.0.10", + "rc-select": "~11.0.12", "rc-slider": "~9.3.0", "rc-steps": "~4.1.0", "rc-switch": "~3.2.0", @@ -141,9 +142,9 @@ "rc-tabs": "~11.5.0", "rc-textarea": "~0.3.0", "rc-tooltip": "~4.2.0", - "rc-tree": "~3.8.0", - "rc-tree-select": "~4.1.0", - "rc-trigger": "~4.3.0", + "rc-tree": "~3.8.5", + "rc-tree-select": "~4.1.1", + "rc-trigger": "~4.4.0", "rc-upload": "~3.2.0", "rc-util": "^5.0.1", "scroll-into-view-if-needed": "^2.2.25",