@niibase/bottom-sheet-manager 1.4.4 → 1.4.6

package/src/{sheet.tsx → sheets/gorhom.tsx}

@@ -11,6 +11,7 @@ import RNBottomSheet, {
   BottomSheetView,
   BottomSheetVirtualizedList,
 } from "@gorhom/bottom-sheet";
+import React from "react";
 import {
   BackHandler,
   Platform,
@@ -19,23 +20,25 @@ import {
   type NativeEventSubscription,
 } from "react-native";
 import {
+  Easing,
   interpolate,
   useAnimatedReaction,
   useSharedValue,
+  type WithSpringConfig,
+  type WithTimingConfig,
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import React from "react";
 
+import { PrivateManager } from "../manager";
 import {
   useProviderContext,
   useSheetIDContext,
   useSheetRef,
   useSheetSharedContext,
   useStackBehaviorContext,
-} from "./provider";
-import { BottomSheetInstance, BottomSheetProps, SheetIds, StackBehavior } from "./types";
-import { PrivateManager } from "./manager";
-import { eventManager } from "./events";
+} from "../provider";
+import { useSheetManager, useTeardownSheet } from "./shared";
+import { BottomSheetInstance, BottomSheetProps, SheetIds, StackBehavior } from "../types";
 
 interface BottomSheetFC
   extends React.MemoExoticComponent<React.ForwardRefExoticComponent<BottomSheetProps>> {
@@ -59,50 +62,9 @@ interface BottomSheetFC
 const FULL_SCREEN_POINTS: (string | number)[] =
   Platform.OS === "ios" ? ["%90", "90%"] : ["%93", "93%"];
 
-const useSheetManager = ({
-  id,
-  onHide,
-  onBeforeShow,
-  onContextUpdate,
-}: {
-  id?: string;
-  onHide: (data?: unknown, dismiss?: boolean, behavior?: StackBehavior) => void;
-  onBeforeShow?: (data?: unknown, behavior?: StackBehavior) => void;
-  onContextUpdate: () => void;
-}) => {
-  const currentContext = useProviderContext();
-  const hasShownRef = React.useRef(false);
-
-  React.useEffect(() => {
-    if (!id) return undefined;
-
-    const subscriptions = [
-      eventManager.subscribe(
-        `show_${id}`,
-        (data: unknown, context?: string, behavior?: StackBehavior) => {
-          if (currentContext !== context) return;
-          if (!hasShownRef.current) {
-            hasShownRef.current = true;
-            onContextUpdate?.();
-            onBeforeShow?.(data, behavior);
-          }
-        },
-      ),
-      eventManager.subscribe(
-        `hide_${id}`,
-        (data: unknown, context: string, dismiss?: boolean, behavior?: StackBehavior) => {
-          if (currentContext !== context) return;
-          hasShownRef.current = false;
-          onHide?.(data, dismiss, behavior);
-        },
-      ),
-    ];
-
-    return () => {
-      hasShownRef.current = false;
-      subscriptions.forEach((s) => s?.unsubscribe?.());
-    };
-  }, [id, onHide, onBeforeShow, onContextUpdate, currentContext]);
+const DEFAULT_SHEET_CLOSE_ANIMATION: WithTimingConfig = {
+  duration: 300,
+  easing: Easing.out(Easing.cubic),
 };
 
 const BottomSheetComponent = React.forwardRef<BottomSheetInstance, BottomSheetProps>(
@@ -121,6 +83,7 @@ const BottomSheetComponent = React.forwardRef<BottomSheetInstance, BottomSheetPr
       style,
       passThrough,
       opacity,
+      closeAnimationConfigs,
       ...props
     },
     ref,
@@ -135,11 +98,12 @@ const BottomSheetComponent = React.forwardRef<BottomSheetInstance, BottomSheetPr
       React.useState<StackBehavior>(stackBehavior);
     const isPushed = currentStackBehavior === "push";
 
-    const { bottom, left, right } = useSafeAreaInsets();
+    const { bottom } = useSafeAreaInsets();
+    const defaultStyle = React.useMemo(() => ({ paddingBottom: bottom }), [bottom]);
 
-    const defaultStyle = React.useMemo(
-      () => ({ paddingBottom: bottom, paddingLeft: left, paddingRight: right }),
-      [bottom, left, right],
+    const effectiveCloseAnimation = React.useMemo(
+      () => closeAnimationConfigs ?? DEFAULT_SHEET_CLOSE_ANIMATION,
+      [closeAnimationConfigs],
     );
 
     const { fullScreenValues } = useSheetSharedContext();
@@ -170,6 +134,7 @@ const BottomSheetComponent = React.forwardRef<BottomSheetInstance, BottomSheetPr
     const teardownDataRef = React.useRef<{ dismiss?: boolean; behavior?: StackBehavior }>(
       {},
     );
+    const isClosingRef = React.useRef(false);
 
     const id = useSheetIDContext();
     const sheetId = props.id || id;
@@ -225,7 +190,7 @@ const BottomSheetComponent = React.forwardRef<BottomSheetInstance, BottomSheetPr
           );
           const current = { ...fullScreenValues.value };
           current[sheetId] = val;
-          fullScreenValues.value = current;
+          fullScreenValues.set(current);
         }
       },
       [iosModalSheetTypeOfAnimation, sheetId],
@@ -236,58 +201,12 @@ const BottomSheetComponent = React.forwardRef<BottomSheetInstance, BottomSheetPr
         if (iosModalSheetTypeOfAnimation && sheetId) {
           const current = { ...fullScreenValues.value };
           delete current[sheetId];
-          fullScreenValues.value = current;
+          fullScreenValues.set(current);
         }
       };
     }, [iosModalSheetTypeOfAnimation, sheetId, fullScreenValues]);
 
-    const teardownSheet = React.useCallback(
-      (value: unknown, dismiss: boolean | undefined, behavior: StackBehavior) => {
-        if (!sheetId) return;
-
-        const hasHistory = PrivateManager.history.length > 0;
-        const shouldRestorePrevious = behavior !== "replace";
-
-        eventManager.publish(
-          `onclose_${sheetId}`,
-          value,
-          currentCtx,
-          hasHistory || !!dismiss,
-          behavior,
-        );
-
-        if (shouldRestorePrevious) {
-          if (dismiss) {
-            // it will surface naturally when the push sheet is closed.
-            if (behavior !== "push") {
-              PrivateManager.history.push({
-                id: sheetId,
-                context: currentCtx,
-                behavior: behavior,
-              });
-            }
-          } else if (hasHistory) {
-            const otherSheetsStillOpen = PrivateManager.stack().some(
-              (s) => !(s.id === sheetId && s.context === currentCtx),
-            );
-            if (!otherSheetsStillOpen) {
-              const prev = PrivateManager.history.pop()!;
-              eventManager.publish(
-                `show_wrap_${prev.id}`,
-                undefined,
-                prev.context,
-                true,
-                prev.behavior,
-              );
-            }
-          }
-        }
-
-        PrivateManager.remove(sheetId, currentCtx);
-      },
-      [sheetId, currentCtx],
-    );
-
+    const teardownSheet = useTeardownSheet({ sheetId, currentCtx });
     const hideSheet = React.useCallback(
       (
         data?: unknown,
@@ -314,9 +233,11 @@ const BottomSheetComponent = React.forwardRef<BottomSheetInstance, BottomSheetPr
         const shouldClose = activeBehavior !== "replace" || !dismiss;
 
         if (fromManager && shouldClose) {
+          if (isClosingRef.current) return;
+          isClosingRef.current = true;
           valueRef.current = value;
           teardownDataRef.current = { dismiss, behavior: activeBehavior };
-          bottomSheetRef.current?.close();
+          bottomSheetRef.current?.close(effectiveCloseAnimation);
           return;
         }
 
@@ -330,15 +251,11 @@ const BottomSheetComponent = React.forwardRef<BottomSheetInstance, BottomSheetPr
         const closeValue = onClose?.(value as never);
         if (closeValue !== undefined) value = closeValue;
 
-        if (shouldClose) {
-          bottomSheetRef.current?.close();
-        }
-
         teardownSheet(value, finalDismiss, finalBehavior);
-
+        isClosingRef.current = false;
         if (fromManager) valueRef.current = data;
       },
-      [currentStackBehavior, onClose, teardownSheet],
+      [currentStackBehavior, effectiveCloseAnimation, onClose, teardownSheet],
     );
 
     React.useEffect(() => {
@@ -349,7 +266,10 @@ const BottomSheetComponent = React.forwardRef<BottomSheetInstance, BottomSheetPr
       (): BottomSheetInstance => ({
         close(options = {}): void {
           valueRef.current = (options as Record<string, unknown>).value;
-          bottomSheetRef.current?.close(options?.animationConfigs);
+          const opts = options as {
+            animationConfigs?: WithSpringConfig | WithTimingConfig;
+          };
+          bottomSheetRef.current?.close(opts.animationConfigs ?? effectiveCloseAnimation);
         },
         expand(animationConfigs): void {
           bottomSheetRef.current?.expand(animationConfigs);
@@ -364,7 +284,7 @@ const BottomSheetComponent = React.forwardRef<BottomSheetInstance, BottomSheetPr
           bottomSheetRef.current?.snapToPosition(position, animationConfigs);
         },
       }),
-      [],
+      [effectiveCloseAnimation],
     );
 
     React.useEffect(() => {

package/src/sheets/shared.ts

@@ -0,0 +1,108 @@
+import React from "react";
+
+import { eventManager } from "../events";
+import { PrivateManager } from "../manager";
+import { useProviderContext } from "../provider";
+import { StackBehavior } from "../types";
+
+type OnHide = (data?: unknown, dismiss?: boolean, behavior?: StackBehavior) => void;
+type OnBeforeShow = (data?: unknown, behavior?: StackBehavior) => void;
+
+export const useSheetManager = ({
+  id,
+  onHide,
+  onBeforeShow,
+  onContextUpdate,
+}: {
+  id?: string;
+  onHide: OnHide;
+  onBeforeShow?: OnBeforeShow;
+  onContextUpdate: () => void;
+}) => {
+  const currentContext = useProviderContext();
+  const hasShownRef = React.useRef(false);
+
+  React.useEffect(() => {
+    if (!id) return undefined;
+
+    const subscriptions = [
+      eventManager.subscribe(
+        `show_${id}`,
+        (data: unknown, context?: string, behavior?: StackBehavior) => {
+          if (currentContext !== context) return;
+          if (!hasShownRef.current) {
+            hasShownRef.current = true;
+            onContextUpdate?.();
+            onBeforeShow?.(data, behavior);
+          }
+        },
+      ),
+      eventManager.subscribe(
+        `hide_${id}`,
+        (data: unknown, context: string, dismiss?: boolean, behavior?: StackBehavior) => {
+          if (currentContext !== context) return;
+          hasShownRef.current = false;
+          onHide?.(data, dismiss, behavior);
+        },
+      ),
+    ];
+
+    return () => {
+      hasShownRef.current = false;
+      subscriptions.forEach((s) => s?.unsubscribe?.());
+    };
+  }, [id, onHide, onBeforeShow, onContextUpdate, currentContext]);
+};
+
+export const useTeardownSheet = ({
+  sheetId,
+  currentCtx,
+}: {
+  sheetId?: string;
+  currentCtx: string;
+}) =>
+  React.useCallback(
+    (value: unknown, dismiss: boolean | undefined, behavior: StackBehavior) => {
+      if (!sheetId) return;
+
+      const hasHistory = PrivateManager.history.length > 0;
+      const shouldRestorePrevious = behavior !== "replace";
+
+      eventManager.publish(
+        `onclose_${sheetId}`,
+        value,
+        currentCtx,
+        hasHistory || !!dismiss,
+        behavior,
+      );
+
+      if (shouldRestorePrevious) {
+        if (dismiss) {
+          if (behavior !== "push") {
+            PrivateManager.history.push({
+              id: sheetId,
+              context: currentCtx,
+              behavior,
+            });
+          }
+        } else if (hasHistory) {
+          const otherSheetsStillOpen = PrivateManager.stack().some(
+            (s) => !(s.id === sheetId && s.context === currentCtx),
+          );
+          if (!otherSheetsStillOpen) {
+            const prev = PrivateManager.history.pop()!;
+            eventManager.publish(
+              `show_wrap_${prev.id}`,
+              undefined,
+              prev.context,
+              true,
+              prev.behavior,
+            );
+          }
+        }
+      }
+
+      PrivateManager.remove(sheetId, currentCtx);
+    },
+    [sheetId, currentCtx],
+  );