refactor: allow closing animation to be interrupted

gorhom · Jul 20, 2021 · 937f9ee · 937f9ee
1 parent c8f5a49
commit 937f9ee
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 28 deletions.
diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
@@ -256,6 +256,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       );
     });
     const isInTemporaryPosition = useSharedValue(false);
+    const isForcedClosing = useSharedValue(false);
 
     // gesture
     const animatedContentGestureState = useSharedValue<State>(
@@ -480,11 +481,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
 
       return currentIndex;
     }, [android_keyboardInputMode]);
-    const isSheetClosing = useDerivedValue(
-      () =>
-        animatedNextPosition.value === animatedClosedPosition.value &&
-        animatedAnimationState.value === ANIMATION_STATE.RUNNING
-    );
     //#endregion
 
     //#region private methods
@@ -597,11 +593,14 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     );
     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;
         }
@@ -719,12 +718,12 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         /**
          * exit method if :
          * - already animating to next position.
-         * - sheet is closing.
+         * - sheet is forced closing.
          */
         if (
           index === animatedNextPositionIndex.value ||
           nextPosition === animatedNextPosition.value ||
-          isSheetClosing.value
+          isForcedClosing.value
         ) {
           return;
         }
@@ -744,7 +743,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       [
         animateToPosition,
         isInTemporaryPosition,
-        isSheetClosing,
+        isForcedClosing,
         animatedSnapPoints,
         animatedNextPosition,
         animatedNextPositionIndex,
@@ -776,11 +775,11 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         /**
          * exit method if :
          * - already animating to next position.
-         * - sheet is closing.
+         * - sheet is forced closing.
          */
         if (
           nextPosition === animatedNextPosition.value ||
-          isSheetClosing.value
+          isForcedClosing.value
         ) {
           return;
         }
@@ -801,14 +800,17 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         animateToPosition,
         bottomInset,
         topInset,
-        isSheetClosing,
+        isForcedClosing,
         animatedContainerHeight,
         animatedPosition,
       ]
     );
     const handleClose = useCallback(
       function handleClose(
-        animationConfigs?: Animated.WithSpringConfig | Animated.WithTimingConfig
+        animationConfigs?:
+          | Animated.WithSpringConfig
+          | Animated.WithTimingConfig,
+        force?: boolean
       ) {
         print({
           component: BottomSheet.name,
@@ -820,20 +822,25 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         /**
          * exit method if :
          * - already animating to next position.
-         * - sheet is closing.
+         * - sheet is forced closing.
          */
         if (
           nextPosition === animatedNextPosition.value ||
-          isSheetClosing.value
+          isForcedClosing.value
         ) {
           return;
         }
 
         /**
-         * reset temporary position boolean.
+         * reset temporary position variable.
          */
         isInTemporaryPosition.value = false;
 
+        /**
+         * set force closing variable.
+         */
+        isForcedClosing.value = force === undefined ? false : force;
+
         runOnUI(animateToPosition)(
           nextPosition,
           0,
@@ -843,7 +850,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       },
       [
         animateToPosition,
-        isSheetClosing,
+        isForcedClosing,
         isInTemporaryPosition,
         animatedNextPosition,
         animatedClosedPosition,
@@ -864,12 +871,12 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         /**
          * exit method if :
          * - already animating to next position.
-         * - sheet is closing.
+         * - sheet is forced closing.
          */
         if (
           snapPoints.length - 1 === animatedNextPositionIndex.value ||
           nextPosition === animatedNextPosition.value ||
-          isSheetClosing.value
+          isForcedClosing.value
         ) {
           return;
         }
@@ -889,7 +896,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       [
         animateToPosition,
         isInTemporaryPosition,
-        isSheetClosing,
+        isForcedClosing,
         animatedSnapPoints,
         animatedNextPosition,
         animatedNextPositionIndex,
@@ -909,12 +916,12 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         /**
          * exit method if :
          * - already animating to next position.
-         * - sheet is closing.
+         * - sheet is forced closing.
          */
         if (
           animatedNextPositionIndex.value === 0 ||
           nextPosition === animatedNextPosition.value ||
-          isSheetClosing.value
+          isForcedClosing.value
         ) {
           return;
         }
@@ -933,7 +940,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       },
       [
         animateToPosition,
-        isSheetClosing,
+        isForcedClosing,
         isInTemporaryPosition,
         animatedSnapPoints,
         animatedNextPosition,

diff --git a/src/components/bottomSheetModal/BottomSheetModal.tsx b/src/components/bottomSheetModal/BottomSheetModal.tsx
@@ -169,8 +169,8 @@ const BottomSheetModalComponent = forwardRef<
     },
     [key, index, stackBehavior, mount, ref, mountSheet]
   );
-  const handleDismiss = useCallback(
-    function handleDismiss(...args) {
+  const handleDismiss = useCallback<BottomSheetModalMethods['dismiss']>(
+    function handleDismiss(animationConfigs) {
       print({
         component: BottomSheetModal.name,
         method: handleDismiss.name,
@@ -195,7 +195,7 @@ const BottomSheetModalComponent = forwardRef<
       }
       willUnmountSheet(key);
       forcedDismissed.current = true;
-      bottomSheetRef.current?.close(...args);
+      bottomSheetRef.current?.close(animationConfigs, true);
     },
     [willUnmountSheet, unmount, key, enablePanDownToClose]
   );

diff --git a/src/components/bottomSheetModalProvider/BottomSheetModalProvider.tsx b/src/components/bottomSheetModalProvider/BottomSheetModalProvider.tsx
@@ -140,12 +140,12 @@ const BottomSheetModalProviderWrapper = ({
       item => item.key === key
     );
     if (sheetToBeDismissed) {
-      sheetToBeDismissed.ref.current.dismiss(true);
+      sheetToBeDismissed.ref.current.dismiss();
     }
   }, []);
   const handleDismissAll = useCallback(() => {
     sheetsQueueRef.current.map(item => {
-      item.ref.current.dismiss(true);
+      item.ref.current.dismiss();
     });
   }, []);
   //#endregion

diff --git a/src/types.d.ts b/src/types.d.ts
@@ -50,12 +50,14 @@ export interface BottomSheetMethods {
   /**
    * Close the bottom sheet.
    * @param animationConfigs snap animation configs.
+   * @param force prevent any interruptions till sheet is closed.
    *
    * @see {Animated.WithSpringConfig}
    * @see {Animated.WithTimingConfig}
    */
   close: (
-    animationConfigs?: Animated.WithSpringConfig | Animated.WithTimingConfig
+    animationConfigs?: Animated.WithSpringConfig | Animated.WithTimingConfig,
+    force?: boolean
   ) => void;
 }