fix: Update motion to stable with next frame

Author: zombieJ

src/Popup/PopupInner.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useRef, useState } from 'react';
 import Align from 'rc-align';
 import { RefAlign } from 'rc-align/lib/Align';
-import CSSMotion, { CSSMotionProps } from 'rc-motion';
+import CSSMotion, { CSSMotionProps, MotionEndEventHandler } from 'rc-motion';
 import classNames from 'classnames';
 import {
   Point,
@@ -133,29 +133,41 @@ const PopupInner = React.forwardRef<PopupInnerRef, PopupInnerProps>(
     }
 
     // ======================== Motion ========================
-    const motion = getMotion(props);
+    const motion = { ...getMotion(props) };
+    ['onAppearEnd', 'onEnterEnd', 'onLeaveEnd'].forEach(eventName => {
+      const originHandler: MotionEndEventHandler = motion[eventName];
+      motion[eventName] = (element, event) => {
+        goNextStatus();
+        return originHandler?.(element, event);
+      };
+    });
 
     function onShowPrepare() {
       return new Promise(resolve => {
         prepareResolveRef.current = resolve;
       });
     }
 
+    // Go to stable directly when motion not provided
+    React.useEffect(() => {
+      if (!motion.motionName && status === 'motion') {
+        goNextStatus();
+      }
+    }, [motion.motionName, status]);
+
     // ========================= Refs =========================
     React.useImperativeHandle(ref, () => ({
       forceAlign,
       getElement: () => elementRef.current,
     }));
 
     // ======================== Render ========================
-    const interactiveReady = status === 'stable' || !visible;
-
     const mergedStyle: React.CSSProperties = {
       ...stretchStyle,
       zIndex,
       ...style,
-      opacity: interactiveReady ? undefined : 0,
-      pointerEvents: interactiveReady ? undefined : 'none',
+      opacity: status === 'motion' || status === 'stable' ? undefined : 0,
+      pointerEvents: status === 'stable' ? undefined : 'none',
     };
 
     // Align status

src/Popup/useVisibleStatus.ts

@@ -15,18 +15,12 @@ type PopupStatus = null | 'measure' | 'align' | 'aligned' | 'motion' | 'stable';
 
 type Func = () => void;
 
-const StatusQueue: PopupStatus[] = [
-  'measure',
-  'align',
-  null,
-  'motion',
-  'stable',
-];
+const StatusQueue: PopupStatus[] = ['measure', 'align', null, 'motion'];
 
 export default (
   visible: boolean,
   doMeasure: Func,
-): [PopupStatus, (callback: () => void) => void] => {
+): [PopupStatus, (callback?: () => void) => void] => {
   const [status, setStatus] = useState<PopupStatus>(null);
   const rafRef = useRef<number>();
 
@@ -35,21 +29,23 @@ export default (
   }
 
   function goNextStatus(callback?: () => void) {
-    // Only align should be manually trigger
-    setStatus(prev => {
-      switch (status) {
-        case 'align':
-          return 'motion';
-      }
+    cancelRaf();
+    rafRef.current = raf(() => {
+      // Only align should be manually trigger
+      setStatus(prev => {
+        switch (status) {
+          case 'align':
+            return 'motion';
 
-      return prev;
-    });
+          case 'motion':
+            return 'stable';
+        }
 
-    // Trigger callback in another frame
-    if (callback) {
-      cancelRaf();
-      rafRef.current = raf(callback);
-    }
+        return prev;
+      });
+
+      callback?.();
+    });
   }
 
   // Init status
@@ -67,8 +63,9 @@ export default (
 
     if (status) {
       rafRef.current = raf(async () => {
-        const nextStatus = StatusQueue[StatusQueue.indexOf(status) + 1];
-        if (nextStatus) {
+        const index = StatusQueue.indexOf(status);
+        const nextStatus = StatusQueue[index + 1];
+        if (nextStatus && index !== -1) {
           setStatus(nextStatus);
         }
       });