fix: updated animation sequencing to respect force closing by user (#…

…1941)
gorhom · Oct 2, 2024 · e4f3fe3 · e4f3fe3
1 parent 2962a2d
commit e4f3fe3
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 8 deletions.
diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
@@ -615,14 +615,11 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     //#region animation
     const stopAnimation = useWorkletCallback(() => {
       cancelAnimation(animatedPosition);
-      isForcedClosing.value = false;
       animatedAnimationSource.value = ANIMATION_SOURCE.NONE;
       animatedAnimationState.value = ANIMATION_STATE.STOPPED;
     }, [animatedPosition, animatedAnimationState, animatedAnimationSource]);
     const animateToPositionCompleted = useWorkletCallback(
       function animateToPositionCompleted(isFinished?: boolean) {
-        isForcedClosing.value = false;
-
         if (!isFinished) {
           return;
         }
@@ -643,6 +640,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
           isAnimatedOnMount.value = true;
         }
 
+        isForcedClosing.value = false;
+
         // reset values
         animatedAnimationSource.value = ANIMATION_SOURCE.NONE;
         animatedAnimationState.value = ANIMATION_STATE.STOPPED;
@@ -678,7 +677,10 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
           return;
         }
 
-        stopAnimation();
+        // stop animation if it is running
+        if (animatedAnimationState.value === ANIMATION_STATE.RUNNING) {
+          stopAnimation();
+        }
 
         /**
          * set animation state to running, and source
@@ -883,6 +885,12 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         source: ANIMATION_SOURCE,
         animationConfigs?: WithSpringConfig | WithTimingConfig
       ) {
+        /**
+         * if a force closing is running and source not from user, then we early exit
+         */
+        if (isForcedClosing.value && source !== ANIMATION_SOURCE.USER) {
+          return;
+        }
         /**
          * when evaluating the position while layout is not calculated, then we early exit till it is.
          */

diff --git a/src/components/bottomSheetModal/BottomSheetModal.tsx b/src/components/bottomSheetModal/BottomSheetModal.tsx
@@ -44,6 +44,7 @@ const BottomSheetModalComponent = forwardRef<
     stackBehavior = DEFAULT_STACK_BEHAVIOR,
     enableDismissOnClose = DEFAULT_ENABLE_DISMISS_ON_CLOSE,
     onDismiss: _providedOnDismiss,
+    onAnimate: _providedOnAnimate,
 
     // bottom sheet props
     index = 0,
@@ -78,6 +79,7 @@ const BottomSheetModalComponent = forwardRef<
   //#region refs
   const bottomSheetRef = useRef<BottomSheet>(null);
   const currentIndexRef = useRef(!animateOnMount ? index : -1);
+  const nextIndexRef = useRef<number | null>(null);
   const restoreIndexRef = useRef(-1);
   const minimized = useRef(false);
   const forcedDismissed = useRef(false);
@@ -225,16 +227,27 @@ const BottomSheetModalComponent = forwardRef<
           },
         });
       }
+
+      const animating = nextIndexRef.current != null;
+
       /**
-       * if modal is already been dismiss, we exit the method.
+       * early exit, if not minimized, it is in closed position and not animating
        */
-      if (currentIndexRef.current === -1 && minimized.current === false) {
+      if (
+        currentIndexRef.current === -1 &&
+        minimized.current === false &&
+        !animating
+      ) {
         return;
       }
 
+      /**
+       * unmount and early exit, if minimized or it is in closed position and not animating
+       */
       if (
-        minimized.current ||
-        (currentIndexRef.current === -1 && enablePanDownToClose)
+        !animating &&
+        (minimized.current ||
+          (currentIndexRef.current === -1 && enablePanDownToClose))
       ) {
         unmount();
         return;
@@ -355,13 +368,24 @@ const BottomSheetModalComponent = forwardRef<
         });
       }
       currentIndexRef.current = _index;
+      nextIndexRef.current = null;
 
       if (_providedOnChange) {
         _providedOnChange(_index, _position, _type);
       }
     },
     [_providedOnChange]
   );
+  const handleBottomSheetOnAnimate = useCallback(
+    (fromIndex: number, toIndex: number) => {
+      nextIndexRef.current = toIndex;
+
+      if (_providedOnAnimate) {
+        _providedOnAnimate(fromIndex, toIndex);
+      }
+    },
+    [_providedOnAnimate]
+  );
   // biome-ignore lint/correctness/useExhaustiveDependencies(BottomSheetModal.name): used for debug only
   const handleBottomSheetOnClose = useCallback(
     function handleBottomSheetOnClose() {
@@ -429,6 +453,7 @@ const BottomSheetModalComponent = forwardRef<
           containerOffset={containerOffset}
           onChange={handleBottomSheetOnChange}
           onClose={handleBottomSheetOnClose}
+          onAnimate={handleBottomSheetOnAnimate}
           $modal={true}
         >
           {typeof Content === 'function' ? <Content data={data} /> : Content}