feat: added a new bottom sheet stack behaviour replace (#1897)(with @janodetzel)

Author: gorhom

src/components/bottomSheetModal/constants.ts

@@ -1,4 +1,4 @@
-const DEFAULT_STACK_BEHAVIOR = 'replace';
+const DEFAULT_STACK_BEHAVIOR = 'switch';
 const DEFAULT_ENABLE_DISMISS_ON_CLOSE = true;
 
 export { DEFAULT_STACK_BEHAVIOR, DEFAULT_ENABLE_DISMISS_ON_CLOSE };

src/components/bottomSheetModal/types.d.ts

@@ -21,10 +21,11 @@ export interface BottomSheetModalProps
 
   /**
    * 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
+   * - `push` it will mount the modal on top of the current one.
+   * - `switch` it will minimize the current modal then mount the new one.
+   * - `replace` it will dismiss the current modal then mount the new one.
+   * @type `push` | `switch` | `replace`
+   * @default switch
    */
   stackBehavior?: BottomSheetModalStackBehavior;
 

src/components/bottomSheetModalProvider/BottomSheetModalProvider.tsx

@@ -50,13 +50,19 @@ const BottomSheetModalProviderWrapper = ({
        * - it is not unmounting.
        * - stack behavior is 'replace'.
        */
+
+      /**
+       * Handle switch or replace stack behaviors, if:
+       * - a modal is currently presented.
+       * - it is not unmounting
+       */
       const currentMountedSheet = _sheetsQueue[_sheetsQueue.length - 1];
-      if (
-        currentMountedSheet &&
-        !currentMountedSheet.willUnmount &&
-        stackBehavior === MODAL_STACK_BEHAVIOR.replace
-      ) {
-        currentMountedSheet.ref?.current?.minimize();
+      if (currentMountedSheet && !currentMountedSheet.willUnmount) {
+        if (stackBehavior === MODAL_STACK_BEHAVIOR.replace) {
+          currentMountedSheet.ref?.current?.dismiss();
+        } else if (stackBehavior === MODAL_STACK_BEHAVIOR.switch) {
+          currentMountedSheet.ref?.current?.minimize();
+        }
       }
 
       /**

src/constants.ts

@@ -100,6 +100,7 @@ const SCROLLABLE_DECELERATION_RATE_MAPPER = {
 const MODAL_STACK_BEHAVIOR = {
   replace: 'replace',
   push: 'push',
+  switch: 'switch',
 };
 
 const KEYBOARD_BEHAVIOR = {