diff --git a/README.md b/README.md index 19cc55d8..bdcb6a65 100644 --- a/README.md +++ b/README.md @@ -163,7 +163,7 @@ ReactDOM.render( openAnimation {enter:function,leave:function}|String - animate when sub menu open or close. see rc-animate for object type. + animate when sub menu open or close. see rc-motion for object type. openTransition diff --git a/package.json b/package.json index 625f7061..f322ee0b 100644 --- a/package.json +++ b/package.json @@ -45,8 +45,8 @@ "classnames": "2.x", "mini-store": "^3.0.1", "omit.js": "^2.0.0", - "rc-animate": "^3.1.0", - "rc-trigger": "^4.2.0", + "rc-motion": "^1.0.1", + "rc-trigger": "^4.4.0", "rc-util": "^5.0.1", "resize-observer-polyfill": "^1.5.0", "shallowequal": "^1.1.0" diff --git a/src/Menu.tsx b/src/Menu.tsx index 3dbd4a79..bcb87711 100644 --- a/src/Menu.tsx +++ b/src/Menu.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { Provider, create } from 'mini-store'; import omit from 'omit.js'; +import { CSSMotionProps } from 'rc-motion'; import SubPopupMenu, { getActiveKey } from './SubPopupMenu'; import { noop } from './util'; import { @@ -15,7 +16,6 @@ import { BuiltinPlacements, TriggerSubMenuAction, MenuClickEventHandler, - MotionType, } from './interface'; import { getMotion } from './utils/legacyUtil'; @@ -47,10 +47,10 @@ export interface MenuProps expandIcon?: RenderIconType; overflowedIndicator?: React.ReactNode; /** Menu motion define */ - motion?: MotionType; + motion?: CSSMotionProps; /** Default menu motion of each mode */ - defaultMotions?: Partial<{ [key in MenuMode | 'other']: MotionType }>; + defaultMotions?: Partial<{ [key in MenuMode | 'other']: CSSMotionProps }>; /** @deprecated Please use `motion` instead */ openTransitionName?: string; diff --git a/src/SubMenu.tsx b/src/SubMenu.tsx index 90ae228d..e190e32e 100644 --- a/src/SubMenu.tsx +++ b/src/SubMenu.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import Trigger from 'rc-trigger'; import KeyCode from 'rc-util/lib/KeyCode'; -import CSSMotion from 'rc-animate/lib/CSSMotion'; +import CSSMotion, { CSSMotionProps } from 'rc-motion'; import classNames from 'classnames'; import { connect } from 'mini-store'; import SubPopupMenu, { SubPopupMenuProps } from './SubPopupMenu'; @@ -27,7 +27,6 @@ import { BuiltinPlacements, TriggerSubMenuAction, HoverEventHandler, - MotionType, } from './interface'; import { MenuItem } from './MenuItem'; @@ -100,7 +99,7 @@ export interface SubMenuProps { className?: string; popupClassName?: string; - motion?: MotionType; + motion?: CSSMotionProps; direction?: 'ltr' | 'rtl'; } @@ -431,7 +430,7 @@ export class SubMenu extends React.Component { // don't show transition on first rendering (no animation for opened menu) // show appear transition if it's not visible (not sure why) // show appear transition if it's not inline mode - const mergedMotion: MotionType = { + const mergedMotion: CSSMotionProps = { ...motion, leavedClassName: `${rootPrefixCls}-hidden`, removeOnLeave: false, diff --git a/src/SubPopupMenu.tsx b/src/SubPopupMenu.tsx index 39a5e3be..211c6711 100644 --- a/src/SubPopupMenu.tsx +++ b/src/SubPopupMenu.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { connect } from 'mini-store'; +import { CSSMotionProps } from 'rc-motion'; import KeyCode from 'rc-util/lib/KeyCode'; import createChainedFunction from 'rc-util/lib/createChainedFunction'; import shallowEqual from 'shallowequal'; @@ -25,7 +26,6 @@ import { MenuClickEventHandler, MenuInfo, TriggerSubMenuAction, - MotionType, } from './interface'; import { MenuItem, MenuItemProps } from './MenuItem'; import { MenuItemGroupProps } from './MenuItemGroup'; @@ -151,7 +151,7 @@ export interface SubPopupMenuProps { // [Legacy] // openTransitionName?: string; // openAnimation?: OpenAnimation; - motion?: MotionType; + motion?: CSSMotionProps; direction?: 'ltr' | 'rtl'; } diff --git a/src/interface.ts b/src/interface.ts index d713de77..f3e263c3 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -1,5 +1,3 @@ -import { TransitionNameType, MotionType } from 'rc-trigger/lib/interface'; - export type RenderIconType = | React.ReactNode | ((props: any) => React.ReactNode); @@ -60,6 +58,3 @@ export type LegacyFunctionRef = (node: React.ReactInstance) => void; export type BuiltinPlacements = Record; export type TriggerSubMenuAction = 'click' | 'hover'; - -// =================================== Motion =================================== -export { TransitionNameType, MotionType }; diff --git a/src/utils/legacyUtil.ts b/src/utils/legacyUtil.ts index 9a163452..ab791384 100644 --- a/src/utils/legacyUtil.ts +++ b/src/utils/legacyUtil.ts @@ -1,16 +1,12 @@ import warning from 'rc-util/lib/warning'; -import { - MotionType, - TransitionNameType, - OpenAnimation, - MenuMode, -} from '../interface'; +import { CSSMotionProps } from 'rc-motion'; +import { OpenAnimation, MenuMode } from '../interface'; interface GetMotionProps { - motion?: MotionType; - defaultMotions?: Partial<{ [key in MenuMode | 'other']: MotionType }>; + motion?: CSSMotionProps; + defaultMotions?: Partial<{ [key in MenuMode | 'other']: CSSMotionProps }>; openAnimation?: OpenAnimation; - openTransitionName?: TransitionNameType; + openTransitionName?: string; prefixCls?: string; } @@ -28,7 +24,7 @@ export function getMotion( }: GetMotionProps, { switchingModeFromInline }: GetMotionState, menuMode: MenuMode, -): MotionType { +): CSSMotionProps { if (motion) { return motion; }