Revert "fix: Motion state record (react-component#188)" (react-compon…

…ent#190) This reverts commit 981acac.
shc023 · Jul 29, 2020 · 25b9186 · 25b9186
1 parent 77a255f
commit 25b9186
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 31 deletions.
diff --git a/src/Popup.tsx b/src/Popup.tsx
@@ -78,9 +78,6 @@ interface PopupState {
   status: PopupStatus;
   prevVisible: boolean;
   alignClassName: string;
-
-  /** Record for CSSMotion is working or not */
-  inMotion: boolean;
 }
 
 interface AlignRefType {
@@ -99,8 +96,6 @@ 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>();
@@ -113,7 +108,7 @@ class Popup extends Component<PopupProps, PopupState> {
 
   static getDerivedStateFromProps(
     { visible, ...props }: PopupProps,
-    { prevVisible, status, inMotion }: PopupState,
+    { prevVisible, status }: PopupState,
   ) {
     const newState: Partial<PopupState> = { prevVisible: visible, status };
 
@@ -122,11 +117,12 @@ 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) {
-      newState.inMotion = false;
-
-      if (visible || (supportMotion(mergedMotion) && inMotion)) {
+      if (
+        visible ||
+        (supportMotion(mergedMotion) &&
+          ['motion', 'AfterMotion', 'stable'].includes(status))
+      ) {
         newState.status = null;
       } else {
         newState.status = 'stable';
@@ -326,14 +322,6 @@ class Popup extends Component<PopupProps, PopupState> {
       mergedMotionVisible = false;
     }
 
-    // Update trigger to tell if is in motion
-    ['onEnterStart', 'onAppearStart', 'onLeaveStart'].forEach(event => {
-      mergedMotion[event] = (...args) => {
-        mergedMotion?.[event]?.(...args);
-        this.setState({ inMotion: true });
-      };
-    });
-
     // ================== Align ==================
     const mergedAlignDisabled =
       !visible ||

diff --git a/tests/popup.test.jsx b/tests/popup.test.jsx
@@ -20,18 +20,14 @@ 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', () => {
@@ -45,9 +41,7 @@ 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', () => {
@@ -57,7 +51,7 @@ describe('Popup', () => {
           motionName: 'enter',
         },
       };
-      const state = { prevVisible: true, status: 'motion', inMotion: true };
+      const state = { prevVisible: true, status: 'motion' };
 
       expect(Popup.getDerivedStateFromProps(props, state).status).toBe(null);
     });
@@ -71,9 +65,7 @@ describe('Popup', () => {
       };
       const state = { prevVisible: true, status: 'beforeMotion' };
 
-      expect(Popup.getDerivedStateFromProps(props, state).status).toBe(
-        'stable',
-      );
+      expect(Popup.getDerivedStateFromProps(props, state).status).toBe('stable');
     });
   });