fix: Motion state record (#191)

* fix: Motion state record (#188)

* fix: Motion state record

* update test case

* fix: Motion state record

Author: zombieJ

src/Popup.tsx

@@ -78,6 +78,9 @@ interface PopupState {
   status: PopupStatus;
   prevVisible: boolean;
   alignClassName: string;
+
+  /** Record for CSSMotion is working or not */
+  inMotion: boolean;
 }
 
 interface AlignRefType {
@@ -96,6 +99,8 @@ class Popup extends Component<PopupProps, PopupState> {
     status: null,
     prevVisible: null, // eslint-disable-line react/no-unused-state
     alignClassName: null,
+
+    inMotion: false,
   };
 
   public popupRef = React.createRef<HTMLDivElement>();
@@ -108,7 +113,7 @@ class Popup extends Component<PopupProps, PopupState> {
 
   static getDerivedStateFromProps(
     { visible, ...props }: PopupProps,
-    { prevVisible, status }: PopupState,
+    { prevVisible, status, inMotion }: PopupState,
   ) {
     const newState: Partial<PopupState> = { prevVisible: visible, status };
 
@@ -117,12 +122,11 @@ class Popup extends Component<PopupProps, PopupState> {
     if (prevVisible === null && visible === false) {
       // Init render should always be stable
       newState.status = 'stable';
+      newState.inMotion = false;
     } else if (visible !== prevVisible) {
-      if (
-        visible ||
-        (supportMotion(mergedMotion) &&
-          ['motion', 'AfterMotion', 'stable'].includes(status))
-      ) {
+      newState.inMotion = false;
+
+      if (visible || (supportMotion(mergedMotion) && inMotion)) {
         newState.status = null;
       } else {
         newState.status = 'stable';
@@ -322,6 +326,16 @@ class Popup extends Component<PopupProps, PopupState> {
       mergedMotionVisible = false;
     }
 
+    // Update trigger to tell if is in motion
+    ['onEnterStart', 'onAppearStart', 'onLeaveStart'].forEach(event => {
+      const originFunc = mergedMotion?.[event];
+
+      mergedMotion[event] = (...args) => {
+        originFunc?.(...args);
+        this.setState({ inMotion: true });
+      };
+    });
+
     // ================== Align ==================
     const mergedAlignDisabled =
       !visible ||

tests/popup.test.jsx

@@ -20,14 +20,18 @@ describe('Popup', () => {
       const props = { visible: false };
       const state = { prevVisible: null, status: 'something' };
 
-      expect(Popup.getDerivedStateFromProps(props, state).status).toBe('stable');
+      expect(Popup.getDerivedStateFromProps(props, state).status).toBe(
+        'stable',
+      );
     });
 
     it('does not change when visible is unchanged', () => {
       const props = { visible: true };
       const state = { prevVisible: true, status: 'something' };
 
-      expect(Popup.getDerivedStateFromProps(props, state).status).toBe('something');
+      expect(Popup.getDerivedStateFromProps(props, state).status).toBe(
+        'something',
+      );
     });
 
     it('returns null when visible is changed to true', () => {
@@ -41,7 +45,9 @@ describe('Popup', () => {
       const props = { visible: false };
       const state = { prevVisible: true, status: 'something' };
 
-      expect(Popup.getDerivedStateFromProps(props, state).status).toBe('stable');
+      expect(Popup.getDerivedStateFromProps(props, state).status).toBe(
+        'stable',
+      );
     });
 
     it('returns null when visible is changed to false and motion is started', () => {
@@ -51,7 +57,7 @@ describe('Popup', () => {
           motionName: 'enter',
         },
       };
-      const state = { prevVisible: true, status: 'motion' };
+      const state = { prevVisible: true, status: 'motion', inMotion: true };
 
       expect(Popup.getDerivedStateFromProps(props, state).status).toBe(null);
     });
@@ -65,7 +71,9 @@ describe('Popup', () => {
       };
       const state = { prevVisible: true, status: 'beforeMotion' };
 
-      expect(Popup.getDerivedStateFromProps(props, state).status).toBe('stable');
+      expect(Popup.getDerivedStateFromProps(props, state).status).toBe(
+        'stable',
+      );
     });
   });
 
@@ -82,4 +90,22 @@ describe('Popup', () => {
     wrapper.setProps({ visible: false });
     expect(raf.cancel).toHaveBeenCalledTimes(1);
   });
+
+  it('not crash on motion with event', () => {
+    const onEnterStart = jest.fn();
+
+    const wrapper = mount(
+      <Popup visible motion={{ motionName: 'light', onEnterStart }}>
+        <div>popup content</div>
+      </Popup>,
+    );
+
+    // Trigger once
+    wrapper
+      .find('CSSMotion')
+      .props()
+      .onEnterStart();
+
+    expect(onEnterStart).toHaveBeenCalledTimes(1);
+  });
 });