chore: Use rc-motion instead of rc-animate

Author: zombieJ

README.md

@@ -163,7 +163,7 @@ ReactDOM.render(
             <td>openAnimation</td>
             <td>{enter:function,leave:function}|String</td>
             <th></th>
-            <td>animate when sub menu open or close. see rc-animate for object type.</td>
+            <td>animate when sub menu open or close. see rc-motion for object type.</td>
         </tr>
         <tr>
             <td>openTransition</td>

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"

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;

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<SubMenuProps> {
     // 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,

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';
 }

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<string, any>;
 
 export type TriggerSubMenuAction = 'click' | 'hover';
-
-// =================================== Motion ===================================
-export { TransitionNameType, MotionType };

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;
   }