feat: added onClose callback to BottomSheet

gorhom · Aug 15, 2021 · ee64545 · ee64545
1 parent 2cf7289
commit ee64545
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 12 deletions.
diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
@@ -134,6 +134,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
 
       // callbacks
       onChange: _providedOnChange,
+      onClose: _providedOnClose,
       onAnimate: _providedOnAnimate,
 
       // private
@@ -1361,7 +1362,22 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         _handleGestureState,
       }) => {
         /**
-         * we make sure all gestures are not active.
+         * exit the method if animation state is not stopped.
+         */
+        if (_animationState !== ANIMATION_STATE.STOPPED) {
+          return;
+        }
+
+        /**
+         * exit the method if animated index value
+         * has fraction, e.g. 1.99, 0.52
+         */
+        if (_animatedIndex % 1 !== 0) {
+          return;
+        }
+
+        /**
+         * exit the method if there any active gesture.
          */
         const hasNoActiveGesture =
           (_contentGestureState === State.END ||
@@ -1370,13 +1386,16 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
           (_handleGestureState === State.END ||
             _handleGestureState === State.UNDETERMINED ||
             _handleGestureState === State.CANCELLED);
+        if (!hasNoActiveGesture) {
+          return;
+        }
 
-        if (
-          _animatedIndex % 1 === 0 &&
-          _animatedIndex !== animatedCurrentIndex.value &&
-          _animationState === ANIMATION_STATE.STOPPED &&
-          hasNoActiveGesture
-        ) {
+        /**
+         * if the index is not equal to the current index,
+         * than the sheet position had changed and we trigger
+         * the `onChange` callback.
+         */
+        if (_animatedIndex !== animatedCurrentIndex.value) {
           runOnJS(print)({
             component: BottomSheet.name,
             method: 'useAnimatedReaction::OnChange',
@@ -1389,8 +1408,23 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
           animatedCurrentIndex.value = _animatedIndex;
           runOnJS(handleOnChange)(_animatedIndex);
         }
+
+        /**
+         * if index is `-1` than we fire the `onClose` callback.
+         */
+        if (_animatedIndex === -1 && _providedOnClose) {
+          runOnJS(print)({
+            component: BottomSheet.name,
+            method: 'useAnimatedReaction::onClose',
+            params: {
+              animatedCurrentIndex: animatedCurrentIndex.value,
+              animatedIndex: _animatedIndex,
+            },
+          });
+          runOnJS(_providedOnClose)();
+        }
       },
-      [handleOnChange]
+      [handleOnChange, _providedOnClose]
     );
 
     /**

diff --git a/src/components/bottomSheet/types.d.ts b/src/components/bottomSheet/types.d.ts
@@ -202,12 +202,20 @@ export interface BottomSheetProps
 
   //#region callbacks
   /**
-   * Callback when sheet position changed to a provided point.
+   * Callback when the sheet position changed to a provided point.
+   *
    * @type (index: number) => void;
    */
   onChange?: (index: number) => void;
+  /**
+   * Callback when the sheet close.
+   *
+   * @type () => void;
+   */
+  onClose?: () => void;
   /**
    * Callback when the sheet about to animate to a new position.
+   *
    * @type (fromIndex: number, toIndex: number) => void;
    */
   onAnimate?: (fromIndex: number, toIndex: number) => void;

diff --git a/src/components/bottomSheetModal/BottomSheetModal.tsx b/src/components/bottomSheetModal/BottomSheetModal.tsx
@@ -36,6 +36,8 @@ const BottomSheetModalComponent = forwardRef<
     index = 0,
     snapPoints,
     enablePanDownToClose = true,
+
+    // callbacks
     onChange: _providedOnChange,
 
     // components
@@ -289,16 +291,29 @@ const BottomSheetModalComponent = forwardRef<
       if (_providedOnChange) {
         _providedOnChange(_index);
       }
+    },
+    [_providedOnChange]
+  );
+  const handleBottomSheetOnClose = useCallback(
+    function handleBottomSheetOnClose() {
+      print({
+        component: BottomSheetModal.name,
+        method: handleBottomSheetOnClose.name,
+        params: {
+          minimized: minimized.current,
+          forcedDismissed: forcedDismissed.current,
+        },
+      });
 
       if (minimized.current) {
         return;
       }
 
-      if (_index === -1 && enableDismissOnClose) {
+      if (enableDismissOnClose) {
         unmount();
       }
     },
-    [enableDismissOnClose, unmount, _providedOnChange]
+    [enableDismissOnClose, unmount]
   );
   //#endregion
 
@@ -334,6 +349,7 @@ const BottomSheetModalComponent = forwardRef<
         containerHeight={containerHeight}
         containerOffset={containerOffset}
         onChange={handleBottomSheetOnChange}
+        onClose={handleBottomSheetOnClose}
         children={children}
         $modal={true}
       />

diff --git a/src/components/bottomSheetModal/types.d.ts b/src/components/bottomSheetModal/types.d.ts
@@ -10,7 +10,10 @@ export interface BottomSheetModalPrivateMethods {
 export type BottomSheetModalStackBehavior = keyof typeof MODAL_STACK_BEHAVIOR;
 
 export interface BottomSheetModalProps
-  extends Omit<BottomSheetProps, 'animateOnMount' | 'containerHeight'> {
+  extends Omit<
+    BottomSheetProps,
+    'animateOnMount' | 'containerHeight' | 'onClose'
+  > {
   /**
    * Modal name to help identify the modal for later on.
    * @type string