@niibase/bottom-sheet-manager 1.1.0 → 1.3.0

package/src/manager.ts

@@ -1,8 +1,8 @@
 import { RefObject } from "react";
 
-import { eventManager } from "./events";
+import { BottomSheetInstance, Sheets, StackBehavior } from "./types";
 import { providerRegistryStack, sheetsRegistry } from "./provider";
-import { BottomSheetInstance, Sheets } from "./types";
+import { eventManager } from "./events";
 
 // Array of all the ids of Sheets currently rendered in the app.
 const ids: string[] = [];
@@ -12,14 +12,20 @@ const DEFAULT_Z_INDEX = 999;
 
 const makeKey = (id: string, context: string) => `${id}:${context}`;
 
+interface HistoryEntry {
+    id: string;
+    context: string;
+    behavior: StackBehavior;
+}
+
 export const PrivateManager = {
-    // Return to the previous sheet when the current sheet is closed.
-    history: [] as { id: string; context: string }[],
+    // Stack of sheet history for restoration when sheets are closed
+    history: [] as HistoryEntry[],
 
     context(options?: { context?: string; id?: string }) {
         if (!options) options = {};
         if (!options?.context) {
-            // If no context is provided, use to current top most context
+            // If no context is provided, use the current top-most context
             // to render the sheet.
             for (const context of providerRegistryStack.slice().reverse()) {
                 // We only automatically select nested sheet providers.
@@ -42,11 +48,12 @@ export const PrivateManager = {
     ) => {
         const key = makeKey(id, context);
         refs[key] = instance;
-        keys.push(key);
+        if (!keys.includes(key)) {
+            keys.push(key);
+        }
     },
 
     /**
-     *
      * Get internal ref of a sheet by the given id.
      *
      * @param id Id of the sheet
@@ -57,8 +64,8 @@ export const PrivateManager = {
         context?: string,
     ): RefObject<BottomSheetInstance<SheetId>> => {
         if (!context) {
-            for (let ctx of providerRegistryStack.slice().reverse()) {
-                for (let _id in sheetsRegistry[ctx]) {
+            for (const ctx of providerRegistryStack.slice().reverse()) {
+                for (const _id in sheetsRegistry[ctx]) {
                     if (_id === id) {
                         context = ctx;
                         break;
@@ -70,14 +77,17 @@ export const PrivateManager = {
     },
 
     add: (id: string, context: string) => {
-        if (ids.indexOf(id) < 0) {
-            ids[ids.length] = makeKey(id, context);
+        const key = makeKey(id, context);
+        if (!ids.includes(key)) {
+            ids.push(key);
         }
     },
 
     remove: (id: string, context: string) => {
-        if (ids.indexOf(makeKey(id, context)) > -1) {
-            ids.splice(ids.indexOf(makeKey(id, context)));
+        const key = makeKey(id, context);
+        const index = ids.indexOf(key);
+        if (index > -1) {
+            ids.splice(index, 1);
         }
     },
 
@@ -87,12 +97,39 @@ export const PrivateManager = {
     },
 
     stack: () =>
-        ids.map((id) => {
-            return {
-                id: id.split(":")[0],
-                context: id.split(":")?.[1] || "global",
-            };
-        }),
+        ids.map((id) => ({
+            id: id.split(":")[0],
+            context: id.split(":")?.[1] || "global",
+        })),
+
+    /**
+     * Get the top-most sheet in the stack
+     */
+    topSheet: () => {
+        if (ids.length === 0) return null;
+        const topId = ids[ids.length - 1];
+        return {
+            id: topId.split(":")[0],
+            context: topId.split(":")?.[1] || "global",
+        };
+    },
+
+    /**
+     * Check if a sheet is currently visible
+     */
+    isSheetVisible: (id: string, context?: string): boolean => {
+        if (context) {
+            return ids.includes(makeKey(id, context));
+        }
+        return ids.some((key) => key.startsWith(`${id}:`));
+    },
+
+    /**
+     * Clear all history entries
+     */
+    clearHistory: () => {
+        PrivateManager.history = [];
+    },
 };
 
 class _SheetManager {
@@ -119,36 +156,67 @@ class _SheetManager {
              * Provide `context` of the `SheetProvider` where you want to show the action sheet.
              */
             context?: string;
+
+            /**
+             * Stack behavior for this sheet.
+             * - `switch`: (default) Closes current sheet, shows new one
+             * - `replace`: Swaps content with crossfade animation
+             * - `push`: Stacks new sheet on top of current
+             */
+            stackBehavior?: StackBehavior;
         },
     ): Promise<Sheets[SheetId]["returnValue"]> {
         return new Promise((resolve) => {
             const currentContext = PrivateManager.context({ ...options, id: id });
-            const handler = (data: any, context = "global") => {
+            const behavior = options?.stackBehavior ?? "switch";
+
+            const handler = (
+                data: unknown,
+                context = "global",
+                _reopened?: boolean,
+                _behavior?: StackBehavior,
+            ) => {
                 if (context !== "global" && currentContext && currentContext !== context)
                     return;
-                options?.onClose?.(data);
+                options?.onClose?.(data as Sheets[SheetId]["returnValue"]);
                 sub?.unsubscribe();
-                resolve(data);
+                resolve(data as Sheets[SheetId]["returnValue"]);
             };
 
-            var sub = eventManager.subscribe(`onclose_${id}`, handler);
-            PrivateManager.stack().forEach(({ id, context }) => {
-                eventManager.publish(`hide_${id}`, undefined, context, true);
-            });
+            const sub = eventManager.subscribe(`onclose_${id}`, handler);
+
+            // Handle existing sheets based on stack behavior
+            const currentStack = PrivateManager.stack();
+            if (currentStack.length > 0) {
+                currentStack.forEach(({ id: sheetId, context }) => {
+                    eventManager.publish(
+                        `hide_${sheetId}`,
+                        undefined,
+                        context,
+                        true,
+                        behavior,
+                    );
+                });
+            }
 
             // Check if the sheet is registered with any `SheetProviders`.
             let isRegisteredWithSheetProvider = false;
-            for (let ctx in sheetsRegistry) {
-                for (let _id in sheetsRegistry[ctx]) {
+            for (const ctx in sheetsRegistry) {
+                for (const _id in sheetsRegistry[ctx]) {
                     if (_id === id) {
                         isRegisteredWithSheetProvider = true;
+                        break;
                     }
                 }
+                if (isRegisteredWithSheetProvider) break;
             }
+
             eventManager.publish(
                 isRegisteredWithSheetProvider ? `show_wrap_${id}` : `show_${id}`,
                 options?.payload,
                 currentContext || "global",
+                false,
+                behavior,
             );
         });
     }
@@ -157,7 +225,7 @@ class _SheetManager {
      * An async hide function. This is useful when you want to show one Sheet after closing another.
      *
      * @param id id of the Sheet to show
-     * @param data
+     * @param options
      */
     async hide<SheetId extends keyof Sheets>(
         id: SheetId | (string & {}),
@@ -172,10 +240,11 @@ class _SheetManager {
             context?: string;
         },
     ): Promise<Sheets[SheetId]["returnValue"]> {
-        let currentContext = PrivateManager.context({
+        const currentContext = PrivateManager.context({
             ...options,
             id: id,
         });
+
         return new Promise((resolve) => {
             let isRegisteredWithSheetProvider = false;
             // Check if the sheet is registered with any `SheetProviders`
@@ -188,14 +257,14 @@ class _SheetManager {
                 }
             }
 
-            const hideHandler = (data: any, context = "global") => {
+            const hideHandler = (data: unknown, context = "global") => {
                 if (context !== "global" && currentContext && currentContext !== context)
                     return;
                 sub?.unsubscribe();
-                resolve(data);
+                resolve(data as Sheets[SheetId]["returnValue"]);
             };
 
-            var sub = eventManager.subscribe(`onclose_${id}`, hideHandler);
+            const sub = eventManager.subscribe(`onclose_${id}`, hideHandler);
             eventManager.publish(
                 isRegisteredWithSheetProvider ? `hide_wrap_${id}` : `hide_${id}`,
                 options?.payload,
@@ -210,11 +279,65 @@ class _SheetManager {
      * @param id Hide all sheets for the specific id.
      */
     hideAll<SheetId extends keyof Sheets>(id?: SheetId | (string & {})) {
+        // Clear history when hiding all sheets
+        PrivateManager.clearHistory();
+
         PrivateManager.stack().forEach(({ id: _id, context }) => {
             if (id && !_id.startsWith(id)) return;
             eventManager.publish(`hide_${_id}`, undefined, context);
         });
     }
+
+    /**
+     * Replace the current sheet with a new one using crossfade animation.
+     * This is a convenience method for show() with stackBehavior: 'replace'.
+     */
+    async replace<SheetId extends keyof Sheets>(
+        id: SheetId | (string & {}),
+        options?: {
+            payload?: Sheets[SheetId]["payload"];
+            onClose?: (data: Sheets[SheetId]["returnValue"] | undefined) => void;
+            context?: string;
+        },
+    ): Promise<Sheets[SheetId]["returnValue"]> {
+        return this.show(id, { ...options, stackBehavior: "replace" });
+    }
+
+    /**
+     * Push a new sheet on top of the current one, creating a stack.
+     * This is a convenience method for show() with stackBehavior: 'push'.
+     */
+    async push<SheetId extends keyof Sheets>(
+        id: SheetId | (string & {}),
+        options?: {
+            payload?: Sheets[SheetId]["payload"];
+            onClose?: (data: Sheets[SheetId]["returnValue"] | undefined) => void;
+            context?: string;
+        },
+    ): Promise<Sheets[SheetId]["returnValue"]> {
+        return this.show(id, { ...options, stackBehavior: "push" });
+    }
+
+    /**
+     * Pop the top sheet from the stack and restore the previous one.
+     * Only works when sheets were opened with stackBehavior: 'push'.
+     */
+    pop(): void {
+        const topSheet = PrivateManager.topSheet();
+        if (topSheet) {
+            eventManager.publish(`hide_${topSheet.id}`, undefined, topSheet.context);
+        }
+    }
+
+    /**
+     * Check if a specific sheet is currently visible.
+     */
+    isVisible<SheetId extends keyof Sheets>(
+        id: SheetId | (string & {}),
+        context?: string,
+    ): boolean {
+        return PrivateManager.isSheetVisible(id, context);
+    }
 }
 
 /**

package/src/provider.tsx

@@ -1,7 +1,3 @@
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
-import { StatusBar } from "react-native";
-import React from "react";
 import Animated, {
   interpolate,
   interpolateColor,
@@ -11,10 +7,13 @@ import Animated, {
   useAnimatedStyle,
   useSharedValue,
   withSpring,
-  withTiming,
 } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+import { StatusBar } from "react-native";
+import React from "react";
 
-import { BottomSheetInstance, SheetPayload, Sheets } from "./types";
+import { BottomSheetInstance, SheetPayload, Sheets, StackBehavior } from "./types";
 import { eventManager } from "./events";
 
 export const providerRegistryStack: string[] = [];
@@ -50,6 +49,15 @@ export function registerSheet<SheetId extends keyof Sheets = never>(
   }
 }
 
+/**
+ * Animation configuration for iOS modal sheet style animations.
+ * @deprecated Use duration prop directly instead
+ */
+export interface ModalSheetAnimationConfig {
+  /** Duration of the animation in milliseconds */
+  duration: number;
+}
+
 /**
  * The SheetProvider makes available the sheets in a given context. The default context is
  * `global`. However if you want to render a Sheet within another sheet or if you want to render
@@ -71,7 +79,7 @@ export function registerSheet<SheetId extends keyof Sheets = never>(
 export function SheetProvider({
   iosModalSheetTypeOfAnimation = false,
   context = "global",
-  duration = 300,
+  duration = 150,
   children,
 }: React.PropsWithChildren<{
   context?: string;
@@ -82,17 +90,13 @@ export function SheetProvider({
   const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
   const sheetIds = Object.keys(sheetsRegistry[context] || sheetsRegistry["global"] || {});
 
-  // Rerender when a new sheet is added.
-  const onRegister = React.useCallback(forceUpdate, [forceUpdate]);
-
   // IOS modal sheet type of animation
   const isFullScreen = useSharedValue(-1);
   const colorStyle = useAnimatedStyle(() => ({
     flex: 1,
-    backgroundColor: interpolateColor(
-      isFullScreen.value,
-      [0, 1],
-      ["transparent", "#000"],
+    backgroundColor: withSpring(
+      interpolateColor(isFullScreen.value, [0, 1], ["transparent", "#000"]),
+      { duration },
     ),
   }));
   const animatedStyle = useAnimatedStyle(
@@ -102,14 +106,14 @@ export function SheetProvider({
       borderRadius: interpolate(isFullScreen.value, [0, 0.8, 1], [0, 20, 24], "clamp"),
       transform: [
         {
-          scaleX: withTiming(
-            interpolate(isFullScreen.value, [0, 0.98, 1], [1, 1, 0.92], "clamp"),
+          scaleX: withSpring(
+            interpolate(isFullScreen.value, [0, 0.8], [1, 0.92], "clamp"),
             { duration },
           ),
         },
         {
           translateY: withSpring(
-            interpolate(isFullScreen.value, [0, 0.99, 1], [0, top, top + 5], "clamp"),
+            interpolate(isFullScreen.value, [0, 0.8, 1], [0, top, top + 5], "clamp"),
             { duration, dampingRatio: 1.5 },
           ),
         },
@@ -135,23 +139,23 @@ export function SheetProvider({
     providerRegistryStack.indexOf(context) > -1
       ? providerRegistryStack.indexOf(context)
       : providerRegistryStack.push(context) - 1;
-    const unsub = eventManager.subscribe(`${context}-on-register`, onRegister);
+    const unsub = eventManager.subscribe(`${context}-on-register`, forceUpdate);
     return () => {
       providerRegistryStack.splice(providerRegistryStack.indexOf(context), 1);
       unsub?.unsubscribe();
     };
-  }, [context, onRegister]);
+  }, [context, forceUpdate]);
 
   return (
     <SheetAnimationContext.Provider
-      value={{ isFullScreen, iosModalSheetTypeOfAnimation }}
+      value={{ isFullScreen, iosModalSheetTypeOfAnimation, duration }}
     >
       <Animated.View style={colorStyle}>
         <Animated.View style={animatedStyle}>{children}</Animated.View>
       </Animated.View>
       <BottomSheetModalProvider>
         {sheetIds.map((id) => (
-          <RenderSheet key={id} id={id} context={context} duration={duration} />
+          <RenderSheet key={id} id={id} context={context} />
         ))}
       </BottomSheetModalProvider>
     </SheetAnimationContext.Provider>
@@ -162,13 +166,31 @@ const SheetIDContext = React.createContext<string | undefined>(undefined);
 const SheetAnimationContext = React.createContext<{
   iosModalSheetTypeOfAnimation: boolean;
   isFullScreen: SharedValue<number>;
-}>({ isFullScreen: { value: 0 } as any, iosModalSheetTypeOfAnimation: false });
+  duration: number;
+}>({
+  isFullScreen: { value: 0 } as SharedValue<number>,
+  iosModalSheetTypeOfAnimation: false,
+  duration: 300,
+});
 
 export const SheetRefContext = React.createContext<
   React.RefObject<BottomSheetInstance | null>
->({} as any);
+>({} as React.RefObject<BottomSheetInstance | null>);
 
-const SheetPayloadContext = React.createContext<any>(undefined);
+const SheetPayloadContext = React.createContext<unknown>(undefined);
+
+// Stack behavior context for managing sheet transitions
+interface StackBehaviorContextValue {
+  behavior: StackBehavior;
+  isTransitioning: boolean;
+  previousSheetId: string | null;
+}
+
+const StackBehaviorContext = React.createContext<StackBehaviorContextValue>({
+  behavior: "switch",
+  isTransitioning: false,
+  previousSheetId: null,
+});
 
 /**
  * Get id of the current context.
@@ -182,6 +204,10 @@ export const useSheetIDContext = () => React.useContext(SheetIDContext);
  * Get the current sheet animation context.
  */
 export const useSheetAnimationContext = () => React.useContext(SheetAnimationContext);
+/**
+ * Get stack behavior context for the current sheet.
+ */
+export const useStackBehaviorContext = () => React.useContext(StackBehaviorContext);
 /**
  * Get the current Sheet's internal ref.
  */
@@ -205,25 +231,26 @@ export function useSheetPayload<SheetId extends keyof Sheets = never>() {
 export function useOnSheet<SheetId extends keyof Sheets = never>(
   id: SheetId | (string & {}),
   type: "show" | "hide" | "onclose",
-  listener: (payload: SheetPayload<SheetId>, context: string, ...args: any[]) => void,
+  listener: (payload: SheetPayload<SheetId>, context: string, ...args: unknown[]) => void,
 ) {
   React.useEffect(() => {
     const subscription = eventManager.subscribe(`${type}_${id}`, listener);
     return () => subscription.unsubscribe();
-  }, [id, listener]);
+  }, [id, listener, type]);
 }
 
-const RenderSheet = ({
-  id,
-  context,
-  duration,
-}: {
+interface RenderSheetProps {
   id: string;
   context: string;
-  duration: number;
-}) => {
-  const [payload, setPayload] = React.useState();
+}
+
+const RenderSheet = ({ id, context }: RenderSheetProps) => {
+  const [payload, setPayload] = React.useState<unknown>();
   const [visible, setVisible] = React.useState(false);
+  const [stackBehavior, setStackBehavior] = React.useState<StackBehavior>("switch");
+  const [isPending, startTransition] = React.useTransition();
+  const [previousSheetId, setPreviousSheetId] = React.useState<string | null>(null);
+
   const ref = React.useRef<BottomSheetInstance | null>(null);
   const Sheet = context.startsWith("$$-auto-")
     ? sheetsRegistry?.global?.[id]
@@ -232,29 +259,46 @@ const RenderSheet = ({
       : undefined;
 
   const onShow = React.useCallback(
-    (data: any, ctx = "global", reopened?: boolean) => {
+    (data: unknown, ctx = "global", reopened?: boolean, behavior?: StackBehavior) => {
       if (ctx !== context) return;
-      if (!reopened) setPayload(data);
-      setVisible(true);
+
+      if (behavior) {
+        setStackBehavior(behavior);
+      }
+
+      if (!reopened) {
+        setPayload(data);
+      }
+
+      // Smooth transition handling using React's useTransition
+      startTransition(() => {
+        setVisible(true);
+      });
     },
     [context],
   );
 
   const onClose = React.useCallback(
-    (_data: any, ctx = "global", reopened?: boolean) => {
+    (_data: unknown, ctx = "global", reopened?: boolean, nextSheetId?: string) => {
       if (context !== ctx) return;
+
+      if (nextSheetId) {
+        setPreviousSheetId(nextSheetId);
+      }
+
       if (!reopened) {
         setPayload(undefined);
-        setTimeout(() => setVisible(false), Math.max(duration ?? 300, 300));
+        setVisible(false);
       } else {
         setVisible(false);
+        setPreviousSheetId(null);
       }
     },
     [context],
   );
 
   const onHide = React.useCallback(
-    (data: any, ctx = "global") => {
+    (data: unknown, ctx = "global") => {
       eventManager.publish(`hide_${id}`, data, ctx);
     },
     [id],
@@ -267,7 +311,7 @@ const RenderSheet = ({
   }, [context, id, payload, visible]);
 
   React.useEffect(() => {
-    let subs = [
+    const subs = [
       eventManager.subscribe(`show_wrap_${id}`, onShow),
       eventManager.subscribe(`onclose_${id}`, onClose),
       eventManager.subscribe(`hide_wrap_${id}`, onHide),
@@ -279,15 +323,25 @@ const RenderSheet = ({
 
   if (!Sheet) return null;
 
-  return visible ? (
+  const stackContextValue: StackBehaviorContextValue = {
+    behavior: stackBehavior,
+    isTransitioning: isPending,
+    previousSheetId,
+  };
+
+  if (!visible) return null;
+
+  return (
     <ProviderContext.Provider value={context}>
       <SheetIDContext.Provider value={id}>
         <SheetRefContext.Provider value={ref}>
           <SheetPayloadContext.Provider value={payload}>
-            <Sheet id={id} payload={payload} context={context} />
+            <StackBehaviorContext.Provider value={stackContextValue}>
+              <Sheet id={id} payload={payload} context={context} />
+            </StackBehaviorContext.Provider>
           </SheetPayloadContext.Provider>
         </SheetRefContext.Provider>
       </SheetIDContext.Provider>
     </ProviderContext.Provider>
-  ) : null;
+  );
 };