feat: added stack behavior to bottom sheet modal (#140)

src/components/bottomSheetModal/BottomSheetModal.tsx

@@ -25,6 +25,7 @@ const BottomSheetModalComponent = forwardRef<
   const {
     // modal props
     name,
+    stackBehavior = 'replace',
     dismissOnPanDown = DEFAULT_DISMISS_ON_PAN_DOWN,
     onDismiss: _providedOnDismiss,
 
@@ -121,9 +122,9 @@ const BottomSheetModalComponent = forwardRef<
   const handlePresent = useCallback(() => {
     requestAnimationFrame(() => {
       setMount(true);
-      mountSheet(key, ref);
+      mountSheet(key, ref, stackBehavior);
     });
-  }, [key, mountSheet, ref]);
+  }, [key, stackBehavior, mountSheet, ref]);
   const handleDismiss = useCallback(
     (force: boolean = false) => {
       if (force) {

src/components/bottomSheetModal/index.ts

@@ -2,4 +2,5 @@ export { default } from './BottomSheetModal';
 export type {
   BottomSheetModalProps,
   BottomSheetModalPrivateMethods,
+  BottomSheetModalStackBehavior,
 } from './types';

src/components/bottomSheetModal/types.d.ts

@@ -6,6 +6,8 @@ export interface BottomSheetModalPrivateMethods {
   restore: () => void;
 }
 
+export type BottomSheetModalStackBehavior = 'push' | 'replace';
+
 export interface BottomSheetModalProps
   extends Exclude<BottomSheetProps, 'animateOnMount' | 'containerHeight'> {
   /**
@@ -14,6 +16,16 @@ export interface BottomSheetModalProps
    * @default nanoid generated unique key.
    */
   name?: string;
+
+  /**
+   * Defines the stack behavior when modal mount.
+   * - `push` it will mount the modal on top of current modal.
+   * - `replace` it will minimize the current modal then mount the modal.
+   * @type `push` | `replace`
+   * @default replace
+   */
+  stackBehavior?: BottomSheetModalStackBehavior;
+
   /**
    * Dismiss modal when panning down.
    * @type boolean

src/components/bottomSheetModalProvider/BottomSheetModalProvider.tsx

@@ -6,6 +6,7 @@ import {
 } from '../../contexts';
 import BottomSheetContainer from '../bottomSheetContainer';
 import { WINDOW_HEIGHT } from '../../constants';
+import type { BottomSheetModalStackBehavior } from '../bottomSheetModal';
 import type {
   BottomSheetModalProviderProps,
   BottomSheetModalRef,
@@ -32,52 +33,60 @@ const BottomSheetModalProviderWrapper = (
   //#endregion
 
   //#region private methods
-  const handleMountSheet = useCallback((key: string, ref) => {
-    /**
-     * Here we try to minimize the current sheet if exists,
-     * also we make sure that it is not incoming mounted sheet.
-     */
-    const mountedSheet =
-      sheetsQueueRef.current[sheetsQueueRef.current.length - 1];
-    if (mountedSheet && mountedSheet.key !== key && !mountedSheet.willUnmount) {
-      sheetsQueueRef.current[
-        sheetsQueueRef.current.length - 1
-      ].ref.current.minimize();
-    }
-
-    /**
-     * We check if the incoming sheet is already mounted.
-     */
-    const isIncomingSheetMounted =
-      sheetsQueueRef.current.find(item => item.key === key) !== undefined;
-
-    if (isIncomingSheetMounted) {
+  const handleMountSheet = useCallback(
+    (key: string, ref, stackBehavior: BottomSheetModalStackBehavior) => {
       /**
-       * We move the mounted incoming sheet to the
-       * end of the queue.
+       * Here we try to minimize the current sheet if exists,
+       * also we make sure that it is not incoming mounted sheet.
        */
-      const newSheetsQueue = sheetsQueueRef.current.filter(
-        item => item.key !== key
-      );
-      newSheetsQueue.push({
-        key,
-        ref,
-        willUnmount: false,
-      });
-      sheetsQueueRef.current = newSheetsQueue;
+      const mountedSheet =
+        sheetsQueueRef.current[sheetsQueueRef.current.length - 1];
+      if (
+        stackBehavior === 'replace' &&
+        mountedSheet &&
+        mountedSheet.key !== key &&
+        !mountedSheet.willUnmount
+      ) {
+        sheetsQueueRef.current[
+          sheetsQueueRef.current.length - 1
+        ].ref.current.minimize();
+      }
 
-      ref.current.restore();
-    } else {
       /**
-       * We add the incoming sheet to the end of the queue.
+       * We check if the incoming sheet is already mounted.
        */
-      sheetsQueueRef.current.push({
-        key,
-        ref,
-        willUnmount: false,
-      });
-    }
-  }, []);
+      const isIncomingSheetMounted =
+        sheetsQueueRef.current.find(item => item.key === key) !== undefined;
+
+      if (isIncomingSheetMounted) {
+        /**
+         * We move the mounted incoming sheet to the
+         * end of the queue.
+         */
+        const newSheetsQueue = sheetsQueueRef.current.filter(
+          item => item.key !== key
+        );
+        newSheetsQueue.push({
+          key,
+          ref,
+          willUnmount: false,
+        });
+        sheetsQueueRef.current = newSheetsQueue;
+
+        ref.current.restore();
+      } else {
+        /**
+         * We add the incoming sheet to the end of the queue.
+         */
+        sheetsQueueRef.current.push({
+          key,
+          ref,
+          willUnmount: false,
+        });
+      }
+    },
+    []
+  );
   const handleUnmountSheet = useCallback((key: string) => {
     /**
      * Here we remove the unmounted sheet and update

src/contexts/modal/internal.ts

@@ -1,9 +1,14 @@
 import { createContext, Ref } from 'react';
 import type BottomSheet from '../../components/bottomSheet';
+import type { BottomSheetModalStackBehavior } from '../../components/bottomSheetModal';
 
 export interface BottomSheetModalInternalContextType {
   containerHeight: number;
-  mountSheet: (key: string, ref: Ref<BottomSheet>) => void;
+  mountSheet: (
+    key: string,
+    ref: Ref<BottomSheet>,
+    stackBehavior: BottomSheetModalStackBehavior
+  ) => void;
   unmountSheet: (key: string) => void;
   willUnmountSheet: (key: string) => void;
 }