chore: Use rc-motion instead of rc-animate

Author: zombieJ

package.json

@@ -59,7 +59,7 @@
     "classnames": "^2.2.6",
     "raf": "^3.4.1",
     "rc-align": "^4.0.0",
-    "rc-animate": "^3.0.0",
+    "rc-motion": "^1.0.0",
     "rc-util": "^5.0.1"
   }
 }

src/Popup.tsx

@@ -4,16 +4,14 @@ import raf from 'raf';
 import Align from 'rc-align';
 import { composeRef } from 'rc-util/lib/ref';
 import classNames from 'classnames';
-import RawCSSMotion from 'rc-animate/lib/CSSMotion';
+import CSSMotion, { CSSMotionProps } from 'rc-motion';
 import PopupInner from './PopupInner';
 import {
   StretchType,
   AlignType,
   TransitionNameType,
   AnimationType,
   Point,
-  CSSMotionClass,
-  MotionType,
 } from './interface';
 import { getMotion } from './utils/legacyUtil';
 
@@ -38,8 +36,6 @@ type PopupStatus =
   | 'AfterMotion'
   | 'stable';
 
-const CSSMotion = RawCSSMotion as CSSMotionClass;
-
 interface PopupProps {
   visible?: boolean;
   style?: React.CSSProperties;
@@ -61,8 +57,8 @@ interface PopupProps {
   mask?: boolean;
 
   // Motion
-  motion: MotionType;
-  maskMotion: MotionType;
+  motion: CSSMotionProps;
+  maskMotion: CSSMotionProps;
 
   // Legacy
   animation: AnimationType;
@@ -87,7 +83,7 @@ interface AlignRefType {
   forceAlign: () => void;
 }
 
-function supportMotion(motion: MotionType) {
+function supportMotion(motion: CSSMotionProps) {
   return motion && motion.motionName;
 }
 
@@ -409,7 +405,7 @@ class Popup extends Component<PopupProps, PopupState> {
       return null;
     }
 
-    let motion: MotionType = {};
+    let motion: CSSMotionProps = {};
 
     if (maskMotion && maskMotion.motionName) {
       motion = {

src/index.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import contains from 'rc-util/lib/Dom/contains';
 import findDOMNode from 'rc-util/lib/Dom/findDOMNode';
 import { composeRef, supportRef } from 'rc-util/lib/ref';
+import { CSSMotionProps } from 'rc-motion';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import Portal from 'rc-util/lib/Portal';
 import classNames from 'classnames';
@@ -21,7 +22,6 @@ import {
   AnimationType,
   Point,
   CommonEventHandler,
-  MotionType,
 } from './interface';
 
 function noop() {}
@@ -80,10 +80,10 @@ export interface TriggerProps {
   stretch?: string;
   alignPoint?: boolean; // Maybe we can support user pass position in the future
 
-  /** Set popup motion. You can ref `rc-animate` for more info. */
-  popupMotion?: MotionType;
-  /** Set mask motion. You can ref `rc-animate` for more info. */
-  maskMotion?: MotionType;
+  /** Set popup motion. You can ref `rc-motion` for more info. */
+  popupMotion?: CSSMotionProps;
+  /** Set mask motion. You can ref `rc-motion` for more info. */
+  maskMotion?: CSSMotionProps;
 
   /** @deprecated Please us `popupMotion` instead. */
   popupTransitionName?: TransitionNameType;

src/interface.ts

@@ -61,46 +61,3 @@ export interface Point {
 export interface CommonEventHandler {
   remove: () => void;
 }
-
-// =================================== Motion ===================================
-type MotionStatus = 'none' | 'appear' | 'enter' | 'leave';
-
-type MotionActiveStatus = 'appear-active' | 'enter-active' | 'leave-active';
-
-type MotionNameObject = {
-  [key in MotionStatus | MotionActiveStatus]?: string;
-};
-
-type MotionEventHandler = (
-  element: HTMLElement,
-  event: React.TransitionEvent<HTMLElement> | React.AnimationEvent<HTMLElement> | undefined,
-) => React.CSSProperties | false | null | undefined | void;
-
-export interface MotionType {
-  motionName?: string | MotionNameObject;
-  motionAppear?: boolean;
-  motionEnter?: boolean;
-  motionLeave?: boolean;
-  motionLeaveImmediately?: boolean; // Trigger leave motion immediately
-  removeOnLeave?: boolean;
-  leavedClassName?: string;
-  onAppearStart?: MotionEventHandler;
-  onAppearActive?: MotionEventHandler;
-  onAppearEnd?: MotionEventHandler;
-  onEnterStart?: MotionEventHandler;
-  onEnterActive?: MotionEventHandler;
-  onEnterEnd?: MotionEventHandler;
-  onLeaveStart?: MotionEventHandler;
-  onLeaveActive?: MotionEventHandler;
-  onLeaveEnd?: MotionEventHandler;
-}
-
-export interface MotionProps extends MotionType {
-  visible?: boolean;
-  children: (
-    props: { className: string; style: React.CSSProperties },
-    ref: React.Ref<any>,
-  ) => React.ReactElement;
-}
-
-export type CSSMotionClass = React.ComponentClass<MotionProps>;

src/utils/legacyUtil.ts

@@ -1,7 +1,8 @@
-import { MotionType, AnimationType, TransitionNameType } from '../interface';
+import { CSSMotionProps } from 'rc-motion';
+import { AnimationType, TransitionNameType } from '../interface';
 
 interface GetMotionProps {
-  motion: MotionType;
+  motion: CSSMotionProps;
   animation: AnimationType;
   transitionName: TransitionNameType;
   prefixCls: string;
@@ -12,7 +13,7 @@ export function getMotion({
   motion,
   animation,
   transitionName,
-}: GetMotionProps): MotionType {
+}: GetMotionProps): CSSMotionProps {
   if (motion) {
     return motion;
   }