diff --git a/src/Popup.tsx b/src/Popup.tsx index ac5aa5d..d8f4f3c 100644 --- 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 { status: null, prevVisible: null, // eslint-disable-line react/no-unused-state alignClassName: null, - - inMotion: false, }; public popupRef = React.createRef(); @@ -113,7 +108,7 @@ class Popup extends Component { static getDerivedStateFromProps( { visible, ...props }: PopupProps, - { prevVisible, status, inMotion }: PopupState, + { prevVisible, status }: PopupState, ) { const newState: Partial = { prevVisible: visible, status }; @@ -122,11 +117,12 @@ class Popup extends Component { 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 { 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 index c57245f..221e35a 100644 --- 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'); }); });