react-native-bottom-sheet-stack 0.1.0

package/lib/commonjs/useBottomSheetState.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBottomSheetState = useBottomSheetState;
+var _BottomSheet = require("./BottomSheet.context");
+var _bottomSheet = require("./bottomSheet.store");
+function useBottomSheetState() {
+  const context = (0, _BottomSheet.useMaybeBottomSheetContext)();
+  const {
+    bottomSheetsStack,
+    startClosing
+  } = (0, _bottomSheet.useBottomSheetStore)(store => ({
+    bottomSheetsStack: store.stack,
+    startClosing: store.startClosing
+  }));
+  const bottomSheetState = bottomSheetsStack.find(bottomSheet => bottomSheet.id === context?.id);
+  if (!bottomSheetState) {
+    throw new Error('useBottomSheetState must be used within a BottomSheetProvider');
+  }
+  return {
+    bottomSheetState,
+    close: () => startClosing(bottomSheetState.id)
+  };
+}
+//# sourceMappingURL=useBottomSheetState.js.map

package/lib/commonjs/useBottomSheetState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_BottomSheet","require","_bottomSheet","useBottomSheetState","context","useMaybeBottomSheetContext","bottomSheetsStack","startClosing","useBottomSheetStore","store","stack","bottomSheetState","find","bottomSheet","id","Error","close"],"sourceRoot":"../../src","sources":["useBottomSheetState.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAKO,SAASE,mBAAmBA,CAAA,EAGjC;EACA,MAAMC,OAAO,GAAG,IAAAC,uCAA0B,EAAC,CAAC;EAC5C,MAAM;IAAEC,iBAAiB;IAAEC;EAAa,CAAC,GAAG,IAAAC,gCAAmB,EAAEC,KAAK,KAAM;IAC1EH,iBAAiB,EAAEG,KAAK,CAACC,KAAK;IAC9BH,YAAY,EAAEE,KAAK,CAACF;EACtB,CAAC,CAAC,CAAC;EAEH,MAAMI,gBAAgB,GAAGL,iBAAiB,CAACM,IAAI,CAC5CC,WAAW,IAAKA,WAAW,CAACC,EAAE,KAAKV,OAAO,EAAEU,EAC/C,CAAC;EAED,IAAI,CAACH,gBAAgB,EAAE;IACrB,MAAM,IAAII,KAAK,CACb,+DACF,CAAC;EACH;EAEA,OAAO;IACLJ,gBAAgB;IAChBK,KAAK,EAAEA,CAAA,KAAMT,YAAY,CAACI,gBAAgB,CAACG,EAAE;EAC/C,CAAC;AACH","ignoreList":[]}

package/lib/typescript/example/src/App.d.ts

@@ -0,0 +1,4 @@
+import { type PropsWithChildren } from 'react';
+export default function App(): import("react/jsx-runtime").JSX.Element;
+export declare const Content: ({}: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=App.d.ts.map

package/lib/typescript/example/src/App.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../../../example/src/App.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAc,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAO3D,MAAM,CAAC,OAAO,UAAU,GAAG,4CAY1B;AAmBD,eAAO,MAAM,OAAO,GAAI,IAAI,iBAAiB,4CAU5C,CAAC"}

package/lib/typescript/src/BottomSheet.context.d.ts

@@ -0,0 +1,7 @@
+interface BottomSheetContextValue {
+    id: string;
+}
+export declare const BottomSheetContext: import("react").Context<BottomSheetContextValue | undefined>;
+export declare function useMaybeBottomSheetContext(): BottomSheetContextValue | undefined;
+export {};
+//# sourceMappingURL=BottomSheet.context.d.ts.map

package/lib/typescript/src/BottomSheet.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.context.d.ts","sourceRoot":"","sources":["../../../src/BottomSheet.context.ts"],"names":[],"mappings":"AAEA,UAAU,uBAAuB;IAC/B,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,eAAO,MAAM,kBAAkB,8DAEnB,CAAC;AAEb,wBAAgB,0BAA0B,wCAIzC"}

package/lib/typescript/src/BottomSheetHost.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare function BottomSheetHostComp(): import("react/jsx-runtime").JSX.Element;
+export declare const BottomSheetHost: React.MemoExoticComponent<typeof BottomSheetHostComp>;
+export {};
+//# sourceMappingURL=BottomSheetHost.d.ts.map

package/lib/typescript/src/BottomSheetHost.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheetHost.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetHost.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAU1E,iBAAS,mBAAmB,4CA2C3B;AASD,eAAO,MAAM,eAAe,uDAAkC,CAAC"}

package/lib/typescript/src/BottomSheetManaged.d.ts

@@ -0,0 +1,10 @@
+import { type BottomSheetProps } from '@gorhom/bottom-sheet';
+import { type BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+import React from 'react';
+export interface BottomSheetRef extends BottomSheetMethods {
+}
+interface BottomSheetManagedProps extends BottomSheetProps {
+}
+export declare const BottomSheetManaged: React.ForwardRefExoticComponent<BottomSheetManagedProps & React.RefAttributes<BottomSheetRef>>;
+export {};
+//# sourceMappingURL=BottomSheetManaged.d.ts.map

package/lib/typescript/src/BottomSheetManaged.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheetManaged.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetManaged.tsx"],"names":[],"mappings":"AAAA,OAA4B,EAG1B,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AACpF,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,WAAW,cAAe,SAAQ,kBAAkB;CAAG;AAE7D,UAAU,uBAAwB,SAAQ,gBAAgB;CAAG;AAE7D,eAAO,MAAM,kBAAkB,gGAsE9B,CAAC"}

package/lib/typescript/src/BottomSheetManager.provider.d.ts

@@ -0,0 +1,14 @@
+import React, { type PropsWithChildren } from 'react';
+interface Props extends PropsWithChildren {
+    id: string;
+}
+declare function BottomSheetManagerProviderComp({ id, children }: Props): import("react/jsx-runtime").JSX.Element;
+export declare const BottomSheetManagerProvider: React.MemoExoticComponent<typeof BottomSheetManagerProviderComp>;
+export declare const useBottomSheetManagerContext: () => {
+    groupId: string;
+};
+export declare const useMaybeBottomSheetManagerContext: () => {
+    groupId: string;
+} | null;
+export {};
+//# sourceMappingURL=BottomSheetManager.provider.d.ts.map

package/lib/typescript/src/BottomSheetManager.provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheetManager.provider.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetManager.provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAItD,UAAU,KAAM,SAAQ,iBAAiB;IACvC,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,iBAAS,8BAA8B,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAM9D;AAED,eAAO,MAAM,0BAA0B,kEAEtC,CAAC;AAEF,eAAO,MAAM,4BAA4B;aAlBM,MAAM;CA2BpD,CAAC;AAEF,eAAO,MAAM,iCAAiC;aA7BC,MAAM;QAoCpD,CAAC"}

package/lib/typescript/src/bottomSheet.store.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from 'react';
+export type BottomSheetStatus = 'opening' | 'open' | 'closing' | 'hidden';
+export type OpenMode = 'push' | 'switch' | 'replace';
+export interface BottomSheetState {
+    groupId: string;
+    id: string;
+    content: ReactNode;
+    status: BottomSheetStatus;
+}
+type TriggerState = Omit<BottomSheetState, 'status'>;
+interface BottomSheetStoreState {
+    stack: BottomSheetState[];
+}
+interface BottomSheetStoreActions {
+    push(sheet: TriggerState): void;
+    switch(sheet: TriggerState): void;
+    replace(sheet: TriggerState): void;
+    startClosing(id: string): void;
+    finishClosing(id: string): void;
+    clearAll(): void;
+}
+export declare const useBottomSheetStore: import("zustand/traditional").UseBoundStoreWithEqualityFn<Omit<import("zustand/vanilla").StoreApi<BottomSheetStoreState & BottomSheetStoreActions>, "subscribe"> & {
+    subscribe: {
+        (listener: (selectedState: BottomSheetStoreState & BottomSheetStoreActions, previousSelectedState: BottomSheetStoreState & BottomSheetStoreActions) => void): () => void;
+        <U>(selector: (state: BottomSheetStoreState & BottomSheetStoreActions) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
+            equalityFn?: ((a: U, b: U) => boolean) | undefined;
+            fireImmediately?: boolean;
+        } | undefined): () => void;
+    };
+}>;
+export {};
+//# sourceMappingURL=bottomSheet.store.d.ts.map

package/lib/typescript/src/bottomSheet.store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bottomSheet.store.d.ts","sourceRoot":"","sources":["../../../src/bottomSheet.store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC1E,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAErD,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,SAAS,CAAC;IACnB,MAAM,EAAE,iBAAiB,CAAC;CAC3B;AAED,KAAK,YAAY,GAAG,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;AAErD,UAAU,qBAAqB;IAC7B,KAAK,EAAE,gBAAgB,EAAE,CAAC;CAC3B;AAED,UAAU,uBAAuB;IAC/B,IAAI,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IAChC,MAAM,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IAClC,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,QAAQ,IAAI,IAAI,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB;;;;;;;;EA6E/B,CAAC"}

package/lib/typescript/src/bottomSheetCoordinator.d.ts

@@ -0,0 +1,2 @@
+export declare function initBottomSheetCoordinator(): void;
+//# sourceMappingURL=bottomSheetCoordinator.d.ts.map

package/lib/typescript/src/bottomSheetCoordinator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bottomSheetCoordinator.d.ts","sourceRoot":"","sources":["../../../src/bottomSheetCoordinator.ts"],"names":[],"mappings":"AAGA,wBAAgB,0BAA0B,SA8BzC"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,6 @@
+export { BottomSheetHost } from './BottomSheetHost';
+export { BottomSheetManagerProvider } from './BottomSheetManager.provider';
+export { useBottomSheetManager } from './useBottomSheetManager';
+export { useBottomSheetState } from './useBottomSheetState';
+export { BottomSheetManaged } from './BottomSheetManaged';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}

package/lib/typescript/src/refsMap.d.ts

@@ -0,0 +1,3 @@
+import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+export declare const sheetRefs: Record<string, React.RefObject<BottomSheetMethods | null>>;
+//# sourceMappingURL=refsMap.d.ts.map

package/lib/typescript/src/refsMap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"refsMap.d.ts","sourceRoot":"","sources":["../../../src/refsMap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAEpF,eAAO,MAAM,SAAS,EAAE,MAAM,CAC5B,MAAM,EACN,KAAK,CAAC,SAAS,CAAC,kBAAkB,GAAG,IAAI,CAAC,CACtC,CAAC"}

package/lib/typescript/src/useBottomSheetManager.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { type OpenMode } from './bottomSheet.store';
+export declare const useBottomSheetManager: () => {
+    clearAll: () => void;
+    closeTop: () => void;
+    openBottomSheet: (content: React.ReactElement, options?: {
+        id?: string;
+        groupId?: string;
+        mode?: OpenMode;
+    }) => string;
+    pushBottomSheet: (sheet: {
+        groupId: string;
+        id: string;
+        content: React.ReactNode;
+    }) => void;
+    replaceBottomSheet: (sheet: {
+        groupId: string;
+        id: string;
+        content: React.ReactNode;
+    }) => void;
+};
+//# sourceMappingURL=useBottomSheetManager.d.ts.map

package/lib/typescript/src/useBottomSheetManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBottomSheetManager.d.ts","sourceRoot":"","sources":["../../../src/useBottomSheetManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAuB,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAKzE,eAAO,MAAM,qBAAqB;;;+BAoBrB,KAAK,CAAC,YAAY,YAClB;QACP,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,IAAI,CAAC,EAAE,QAAQ,CAAC;KACjB;;;;;;;;;;;CAsDJ,CAAC"}

package/lib/typescript/src/useBottomSheetState.d.ts

@@ -0,0 +1,6 @@
+import { type BottomSheetState } from './bottomSheet.store';
+export declare function useBottomSheetState(): {
+    bottomSheetState: BottomSheetState;
+    close: () => void;
+};
+//# sourceMappingURL=useBottomSheetState.d.ts.map

package/lib/typescript/src/useBottomSheetState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBottomSheetState.d.ts","sourceRoot":"","sources":["../../../src/useBottomSheetState.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,gBAAgB,EACtB,MAAM,qBAAqB,CAAC;AAE7B,wBAAgB,mBAAmB,IAAI;IACrC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAqBA"}

package/package.json

@@ -0,0 +1,130 @@
+{
+  "name": "react-native-bottom-sheet-stack",
+  "version": "0.1.0",
+  "description": "Bottom Sheet Stack Manager",
+  "source": "./src/index.tsx",
+  "main": "lib/commonjs/index.js",
+  "types": "lib/typescript/src/index.d.ts",
+  "files": [
+    "src",
+    "lib/typescript",
+    "lib/commonjs"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-bottom-sheet-stack-example",
+    "test": "jest",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "release": "release-it"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/arekkubaczkowski/react-native-bottom-sheet-stack.git"
+  },
+  "author": "Arek Kubaczkowski <arek.kubaczkowski@gmail.com> (https://github.com/arekkubaczkowski)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/arekkubaczkowski/react-native-bottom-sheet-stack/issues"
+  },
+  "homepage": "https://github.com/arekkubaczkowski/react-native-bottom-sheet-stack#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.6.0",
+    "@eslint/compat": "^1.2.7",
+    "@eslint/eslintrc": "^3.3.0",
+    "@eslint/js": "^9.22.0",
+    "@evilmartians/lefthook": "^1.5.0",
+    "@gorhom/bottom-sheet": "^5.1.2",
+    "@react-native/eslint-config": "^0.78.0",
+    "@release-it/conventional-changelog": "^9.0.2",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^19.0.12",
+    "commitlint": "^19.6.1",
+    "del-cli": "^5.1.0",
+    "eslint": "^9.22.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-prettier": "^5.2.3",
+    "jest": "^29.7.0",
+    "prettier": "^3.0.3",
+    "react": "18.3.1",
+    "react-native": "0.76.9",
+    "react-native-builder-bob": "^0.40.6",
+    "react-native-gesture-handler": "^2.25.0",
+    "react-native-reanimated": "^3.17.4",
+    "release-it": "^17.10.0",
+    "typescript": "^5.2.2",
+    "zustand": "^5.0.3"
+  },
+  "peerDependencies": {
+    "@gorhom/bottom-sheet": ">=5.0.0",
+    "react": "*",
+    "react-native": "*",
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-reanimated": ">=3.0.0",
+    "zustand": ">=5.0.0"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@3.6.1",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "typescript"
+    ]
+  },
+  "create-react-native-library": {
+    "languages": "js",
+    "type": "library",
+    "version": "0.49.8"
+  }
+}

package/src/BottomSheet.context.ts

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+
+interface BottomSheetContextValue {
+  id: string;
+}
+
+export const BottomSheetContext = createContext<
+  BottomSheetContextValue | undefined
+>(undefined);
+
+export function useMaybeBottomSheetContext() {
+  const context = useContext(BottomSheetContext);
+
+  return context;
+}

package/src/BottomSheetHost.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect, useMemo, type PropsWithChildren } from 'react';
+import { StyleSheet, useWindowDimensions, View } from 'react-native';
+
+import { BottomSheetContext } from './BottomSheet.context';
+import { useBottomSheetStore } from './bottomSheet.store';
+import { initBottomSheetCoordinator } from './bottomSheetCoordinator';
+import { useBottomSheetManagerContext } from './BottomSheetManager.provider';
+
+initBottomSheetCoordinator();
+
+function BottomSheetHostComp() {
+  const { bottomSheetsStack, clearAll } = useBottomSheetStore((store) => ({
+    bottomSheetsStack: store.stack,
+    clearAll: store.clearAll,
+  }));
+
+  const { width, height } = useWindowDimensions();
+  const { groupId } = useBottomSheetManagerContext();
+
+  const filteredQueue = useMemo(
+    () =>
+      bottomSheetsStack.filter(
+        (bottomSheet) => bottomSheet.groupId === groupId
+      ),
+    [bottomSheetsStack, groupId]
+  );
+
+  useEffect(() => {
+    return () => {
+      clearAll();
+    };
+  }, [clearAll]);
+
+  return (
+    <>
+      {filteredQueue.map(({ id, content }) => (
+        <BottomSheetContext.Provider key={id} value={{ id }}>
+          <View
+            style={[
+              StyleSheet.absoluteFillObject,
+              styles.container,
+              {
+                width,
+                height,
+              },
+            ]}
+          >
+            <MemoizedContent id={id}>{content}</MemoizedContent>
+          </View>
+        </BottomSheetContext.Provider>
+      ))}
+    </>
+  );
+}
+
+const MemoizedContent = React.memo(
+  ({ children }: PropsWithChildren<{ id: string }>) => <>{children}</>,
+  (prevProps, nextProps) => {
+    return prevProps.id === nextProps.id;
+  }
+);
+
+export const BottomSheetHost = React.memo(BottomSheetHostComp);
+
+const styles = StyleSheet.create({
+  container: {
+    zIndex: 100_000_000,
+    pointerEvents: 'box-none',
+  },
+});

package/src/BottomSheetManaged.tsx

@@ -0,0 +1,89 @@
+import BottomSheetOriginal, {
+  BottomSheetBackdrop,
+  useBottomSheetSpringConfigs,
+  type BottomSheetProps,
+} from '@gorhom/bottom-sheet';
+import { type BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+import React from 'react';
+
+import {
+  useBottomSheetStore,
+  type BottomSheetStatus,
+} from './bottomSheet.store';
+import { useBottomSheetState } from './useBottomSheetState';
+
+export interface BottomSheetRef extends BottomSheetMethods {}
+
+interface BottomSheetManagedProps extends BottomSheetProps {}
+
+export const BottomSheetManaged = React.forwardRef<
+  BottomSheetRef,
+  BottomSheetManagedProps
+>(
+  (
+    { children, onAnimate, onClose, enablePanDownToClose = true, ...props },
+    ref
+  ) => {
+    const { startClosing, finishClosing } = useBottomSheetStore.getState();
+    const { bottomSheetState } = useBottomSheetState();
+
+    const handleOnAnimate: BottomSheetProps['onAnimate'] = (
+      from: number,
+      to: number
+    ) => {
+      if (to === -1) {
+        if (
+          bottomSheetState.status === 'open' ||
+          bottomSheetState.status === 'opening'
+        ) {
+          startClosing(bottomSheetState.id);
+        }
+      }
+      if (from === -1 && to >= 0) {
+        const currentState = useBottomSheetStore.getState();
+        useBottomSheetStore.setState({
+          stack: currentState.stack.map((s) =>
+            s.id === bottomSheetState.id
+              ? { ...s, status: 'open' as BottomSheetStatus }
+              : s
+          ),
+        });
+      }
+      onAnimate?.(from, to);
+    };
+
+    const config = useBottomSheetSpringConfigs({
+      stiffness: 400,
+      damping: 80,
+      mass: 0.7,
+    });
+
+    const handleClose = () => {
+      onClose?.();
+
+      if (bottomSheetState.status !== 'hidden') {
+        finishClosing(bottomSheetState.id);
+      }
+    };
+
+    return (
+      <BottomSheetOriginal
+        animationConfigs={config}
+        ref={ref}
+        {...props}
+        onClose={handleClose}
+        onAnimate={handleOnAnimate}
+        enablePanDownToClose={enablePanDownToClose}
+        backdropComponent={(props) => (
+          <BottomSheetBackdrop
+            {...props}
+            disappearsOnIndex={-1}
+            appearsOnIndex={0}
+          />
+        )}
+      >
+        {children}
+      </BottomSheetOriginal>
+    );
+  }
+);

package/src/BottomSheetManager.provider.tsx

@@ -0,0 +1,39 @@
+import React, { type PropsWithChildren } from 'react';
+
+const Context = React.createContext<{ groupId: string } | null>(null);
+
+interface Props extends PropsWithChildren {
+  id: string;
+}
+
+function BottomSheetManagerProviderComp({ id, children }: Props) {
+  return (
+    <Context.Provider key={id} value={{ groupId: id }}>
+      {children}
+    </Context.Provider>
+  );
+}
+
+export const BottomSheetManagerProvider = React.memo(
+  BottomSheetManagerProviderComp,
+);
+
+export const useBottomSheetManagerContext = () => {
+  const context = React.useContext(Context);
+
+  if (!context) {
+    throw new Error(
+      'useBottomSheetManagerContext must be used within a BottomSheetManagerProvider',
+    );
+  }
+  return context;
+};
+
+export const useMaybeBottomSheetManagerContext = () => {
+  const context = React.useContext(Context);
+
+  if (!context) {
+    return null;
+  }
+  return context;
+};

package/src/bottomSheet.store.ts

@@ -0,0 +1,107 @@
+import { type ReactNode } from 'react';
+import { subscribeWithSelector } from 'zustand/middleware';
+import { createWithEqualityFn as create } from 'zustand/traditional';
+
+export type BottomSheetStatus = 'opening' | 'open' | 'closing' | 'hidden';
+export type OpenMode = 'push' | 'switch' | 'replace';
+
+export interface BottomSheetState {
+  groupId: string;
+  id: string;
+  content: ReactNode;
+  status: BottomSheetStatus;
+}
+
+type TriggerState = Omit<BottomSheetState, 'status'>;
+
+interface BottomSheetStoreState {
+  stack: BottomSheetState[];
+}
+
+interface BottomSheetStoreActions {
+  push(sheet: TriggerState): void;
+  switch(sheet: TriggerState): void;
+  replace(sheet: TriggerState): void;
+  startClosing(id: string): void;
+  finishClosing(id: string): void;
+  clearAll(): void;
+}
+
+export const useBottomSheetStore = create(
+  subscribeWithSelector<BottomSheetStoreState & BottomSheetStoreActions>(
+    (set) => ({
+      stack: [],
+
+      push: (sheet) =>
+        set((state) => ({
+          stack: [...state.stack, { ...sheet, status: 'opening' }],
+        })),
+      switch: (sheet) =>
+        set((state) => {
+          const stack = [...state.stack];
+
+          if (stack.length) {
+            const topIndex = stack.length - 1;
+            if (stack[topIndex]) {
+              stack[topIndex] = { ...stack[topIndex], status: 'hidden' };
+            }
+          }
+
+          stack.push({ ...sheet, status: 'opening' });
+
+          return { stack };
+        }),
+
+      replace: (sheet) =>
+        set((state) => {
+          const stack = [...state.stack];
+          const prevTop = stack.pop();
+
+          if (prevTop) {
+            stack.push({ ...prevTop, status: 'closing' });
+          }
+          stack.push({ ...sheet, status: 'opening' });
+
+          return { stack };
+        }),
+      startClosing: (id) =>
+        set((state) => {
+          const stack = [...state.stack];
+          const index = stack.findIndex((s) => s.id === id);
+          if (index === -1) {
+            return { stack };
+          }
+
+          const closing = stack[index];
+          if (closing?.status === 'hidden') {
+            return { stack };
+          }
+
+          if (closing) {
+            stack[index] = { ...closing, status: 'closing' };
+          }
+
+          const below = stack[index - 1];
+          if (below && below.status === 'hidden') {
+            stack[index - 1] = { ...below, status: 'opening' };
+          }
+
+          return { stack };
+        }),
+
+      finishClosing: (id) =>
+        set((state) => {
+          const stack = state.stack.filter((s) => s.id !== id);
+
+          const topIndex = stack.length - 1;
+          if (topIndex >= 0 && stack[topIndex]?.status === 'hidden') {
+            stack[topIndex] = { ...stack[topIndex], status: 'opening' };
+          }
+
+          return { stack };
+        }),
+
+      clearAll: () => set(() => ({ stack: [] })),
+    })
+  )
+);