From 694c0e6eb947dacde702ba2638397a38417fe06f Mon Sep 17 00:00:00 2001 From: Elliott Kember Date: Fri, 27 May 2022 17:09:42 -0700 Subject: [PATCH 1/2] Fix race condition when closing modal while opening it --- src/components/bottomSheetModal/BottomSheetModal.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/bottomSheetModal/BottomSheetModal.tsx b/src/components/bottomSheetModal/BottomSheetModal.tsx index 4198cf5d1..661d1b3ef 100644 --- a/src/components/bottomSheetModal/BottomSheetModal.tsx +++ b/src/components/bottomSheetModal/BottomSheetModal.tsx @@ -73,6 +73,7 @@ const BottomSheetModalComponent = forwardRef< const bottomSheetRef = useRef(null); const currentIndexRef = useRef(!animateOnMount ? index : -1); const restoreIndexRef = useRef(-1); + const animatingInRef = useRef(!animateOnMount); const minimized = useRef(false); const forcedDismissed = useRef(false); const mounted = useRef(false); @@ -276,7 +277,11 @@ const BottomSheetModalComponent = forwardRef< /** * if modal is already been dismiss, we exit the method. */ - if (currentIndexRef.current === -1 && minimized.current === false) { + if ( + currentIndexRef.current === -1 && + minimized.current === false && + !animatingInRef.current + ) { return; } @@ -311,6 +316,7 @@ const BottomSheetModalComponent = forwardRef< }, }); currentIndexRef.current = _index; + animatingInRef.current = false; if (_providedOnChange) { _providedOnChange(_index); From 3fd38f2dcb5a4aad326ee3b3d7b311472f1daf51 Mon Sep 17 00:00:00 2001 From: Elliott Kember Date: Fri, 27 May 2022 17:36:54 -0700 Subject: [PATCH 2/2] use onAnimate to handle the animations --- .../bottomSheetModal/BottomSheetModal.tsx | 27 ++++++++++++++++--- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/src/components/bottomSheetModal/BottomSheetModal.tsx b/src/components/bottomSheetModal/BottomSheetModal.tsx index 661d1b3ef..40e4d2316 100644 --- a/src/components/bottomSheetModal/BottomSheetModal.tsx +++ b/src/components/bottomSheetModal/BottomSheetModal.tsx @@ -48,6 +48,7 @@ const BottomSheetModalComponent = forwardRef< // callbacks onChange: _providedOnChange, + onAnimate: _providedOnAnimate, // components children: Content, @@ -73,7 +74,7 @@ const BottomSheetModalComponent = forwardRef< const bottomSheetRef = useRef(null); const currentIndexRef = useRef(!animateOnMount ? index : -1); const restoreIndexRef = useRef(-1); - const animatingInRef = useRef(!animateOnMount); + const animatingRef = useRef(!animateOnMount); const minimized = useRef(false); const forcedDismissed = useRef(false); const mounted = useRef(false); @@ -201,7 +202,11 @@ const BottomSheetModalComponent = forwardRef< /** * if modal is already been dismiss, we exit the method. */ - if (currentIndexRef.current === -1 && minimized.current === false) { + if ( + currentIndexRef.current === -1 && + minimized.current === false && + !animatingRef.current + ) { return; } @@ -280,7 +285,7 @@ const BottomSheetModalComponent = forwardRef< if ( currentIndexRef.current === -1 && minimized.current === false && - !animatingInRef.current + !animatingRef.current ) { return; } @@ -305,6 +310,19 @@ const BottomSheetModalComponent = forwardRef< } }, []); + const handleBottomSheetOnAnimate = useCallback( + function handleBottomSheetOnAnimate( + _fromIndex: number, + _toIndex: number, + ) { + animatingRef.current = true; + + if (_providedOnAnimate) { + _providedOnAnimate(_fromIndex, _toIndex); + } + }, + [_providedOnAnimate] + ); const handleBottomSheetOnChange = useCallback( function handleBottomSheetOnChange(_index: number) { print({ @@ -316,7 +334,7 @@ const BottomSheetModalComponent = forwardRef< }, }); currentIndexRef.current = _index; - animatingInRef.current = false; + animatingRef.current = false; if (_providedOnChange) { _providedOnChange(_index); @@ -387,6 +405,7 @@ const BottomSheetModalComponent = forwardRef< containerOffset={containerOffset} onChange={handleBottomSheetOnChange} onClose={handleBottomSheetOnClose} + onAnimate={handleBottomSheetOnAnimate} children={ typeof Content === 'function' ? : Content }