react-native-bottom-sheet-stack 1.5.0 → 1.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +39 -296
- package/lib/commonjs/BottomSheetHost.js +29 -26
- package/lib/commonjs/BottomSheetHost.js.map +1 -1
- package/lib/commonjs/BottomSheetManaged.js +2 -2
- package/lib/commonjs/BottomSheetManaged.js.map +1 -1
- package/lib/commonjs/BottomSheetPortal.js +2 -3
- package/lib/commonjs/BottomSheetPortal.js.map +1 -1
- package/lib/commonjs/bottomSheet.store.js +16 -0
- package/lib/commonjs/bottomSheet.store.js.map +1 -1
- package/lib/commonjs/bottomSheetCoordinator.js +2 -2
- package/lib/commonjs/bottomSheetCoordinator.js.map +1 -1
- package/lib/commonjs/index.js +18 -5
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/refsMap.js +13 -2
- package/lib/commonjs/refsMap.js.map +1 -1
- package/lib/commonjs/{useBottomSheetState.js → useBottomSheetContext.js} +13 -5
- package/lib/commonjs/useBottomSheetContext.js.map +1 -0
- package/lib/commonjs/useBottomSheetControl.js +47 -62
- package/lib/commonjs/useBottomSheetControl.js.map +1 -1
- package/lib/commonjs/useBottomSheetManager.js +22 -18
- package/lib/commonjs/useBottomSheetManager.js.map +1 -1
- package/lib/commonjs/useBottomSheetStatus.js +35 -0
- package/lib/commonjs/useBottomSheetStatus.js.map +1 -0
- package/lib/typescript/src/BottomSheetHost.d.ts.map +1 -1
- package/lib/typescript/src/BottomSheetPortal.d.ts.map +1 -1
- package/lib/typescript/src/bottomSheet.store.d.ts +1 -0
- package/lib/typescript/src/bottomSheet.store.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +8 -6
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/refsMap.d.ts +6 -1
- package/lib/typescript/src/refsMap.d.ts.map +1 -1
- package/lib/typescript/src/useBottomSheetContext.d.ts +18 -0
- package/lib/typescript/src/useBottomSheetContext.d.ts.map +1 -0
- package/lib/typescript/src/useBottomSheetControl.d.ts +1 -3
- package/lib/typescript/src/useBottomSheetControl.d.ts.map +1 -1
- package/lib/typescript/src/useBottomSheetManager.d.ts +10 -1
- package/lib/typescript/src/useBottomSheetManager.d.ts.map +1 -1
- package/lib/typescript/src/useBottomSheetStatus.d.ts +8 -0
- package/lib/typescript/src/useBottomSheetStatus.d.ts.map +1 -0
- package/package.json +1 -1
- package/src/BottomSheetHost.tsx +5 -3
- package/src/BottomSheetManaged.tsx +2 -2
- package/src/BottomSheetPortal.tsx +6 -5
- package/src/bottomSheet.store.ts +24 -0
- package/src/bottomSheetCoordinator.ts +3 -3
- package/src/index.tsx +27 -6
- package/src/refsMap.ts +16 -4
- package/src/useBottomSheetContext.ts +55 -0
- package/src/useBottomSheetControl.ts +3 -15
- package/src/useBottomSheetManager.tsx +15 -9
- package/src/useBottomSheetStatus.ts +25 -0
- package/lib/commonjs/useBottomSheetState.js.map +0 -1
- package/lib/typescript/src/useBottomSheetState.d.ts +0 -14
- package/lib/typescript/src/useBottomSheetState.d.ts.map +0 -1
- package/src/useBottomSheetState.ts +0 -53
|
@@ -1,13 +1,22 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type OpenMode } from './bottomSheet.store';
|
|
3
3
|
export declare const useBottomSheetManager: () => {
|
|
4
|
-
|
|
4
|
+
open: (content: React.ReactElement, options?: {
|
|
5
|
+
id?: string;
|
|
6
|
+
groupId?: string;
|
|
7
|
+
mode?: OpenMode;
|
|
8
|
+
scaleBackground?: boolean;
|
|
9
|
+
}) => string;
|
|
5
10
|
close: (id: string) => void;
|
|
11
|
+
clear: () => void;
|
|
12
|
+
/** @deprecated Use `open` instead */
|
|
6
13
|
openBottomSheet: (content: React.ReactElement, options?: {
|
|
7
14
|
id?: string;
|
|
8
15
|
groupId?: string;
|
|
9
16
|
mode?: OpenMode;
|
|
10
17
|
scaleBackground?: boolean;
|
|
11
18
|
}) => string;
|
|
19
|
+
/** @deprecated Use `clear` instead */
|
|
20
|
+
clearAll: () => void;
|
|
12
21
|
};
|
|
13
22
|
//# sourceMappingURL=useBottomSheetManager.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
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;AAMzE,eAAO,MAAM,qBAAqB;;
|
|
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;AAMzE,eAAO,MAAM,qBAAqB;oBAarB,KAAK,CAAC,YAAY,YAClB;QACP,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,IAAI,CAAC,EAAE,QAAQ,CAAC;QAChB,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B;gBA2BgB,MAAM;;IAavB,qCAAqC;+BA9C5B,KAAK,CAAC,YAAY,YAClB;QACP,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,IAAI,CAAC,EAAE,QAAQ,CAAC;QAChB,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B;IA0CD,sCAAsC;;CAGzC,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { type BottomSheetStatus } from './bottomSheet.store';
|
|
2
|
+
import type { BottomSheetPortalId } from './portal.types';
|
|
3
|
+
export interface UseBottomSheetStatusReturn {
|
|
4
|
+
status: BottomSheetStatus | null;
|
|
5
|
+
isOpen: boolean;
|
|
6
|
+
}
|
|
7
|
+
export declare function useBottomSheetStatus(id: BottomSheetPortalId): UseBottomSheetStatusReturn;
|
|
8
|
+
//# sourceMappingURL=useBottomSheetStatus.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useBottomSheetStatus.d.ts","sourceRoot":"","sources":["../../../src/useBottomSheetStatus.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAE1D,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,oBAAoB,CAClC,EAAE,EAAE,mBAAmB,GACtB,0BAA0B,CAW5B"}
|
package/package.json
CHANGED
package/src/BottomSheetHost.tsx
CHANGED
|
@@ -6,6 +6,7 @@ import { PortalHost } from 'react-native-teleport';
|
|
|
6
6
|
|
|
7
7
|
import { shallow } from 'zustand/shallow';
|
|
8
8
|
import { cleanupAnimatedIndex } from './animatedRegistry';
|
|
9
|
+
import { cleanupSheetRef } from './refsMap';
|
|
9
10
|
import { BottomSheetContext } from './BottomSheet.context';
|
|
10
11
|
import { useBottomSheetStore } from './bottomSheet.store';
|
|
11
12
|
import { BottomSheetBackdrop } from './BottomSheetBackdrop';
|
|
@@ -31,7 +32,7 @@ function PortalHostWrapper({
|
|
|
31
32
|
|
|
32
33
|
function BottomSheetHostComp() {
|
|
33
34
|
const queueIds = useQueueIds();
|
|
34
|
-
const
|
|
35
|
+
const clearGroup = useBottomSheetStore((store) => store.clearGroup);
|
|
35
36
|
|
|
36
37
|
const { groupId, scaleConfig } = useBottomSheetManagerContext();
|
|
37
38
|
|
|
@@ -44,9 +45,9 @@ function BottomSheetHostComp() {
|
|
|
44
45
|
|
|
45
46
|
useEffect(() => {
|
|
46
47
|
return () => {
|
|
47
|
-
|
|
48
|
+
clearGroup(groupId);
|
|
48
49
|
};
|
|
49
|
-
}, [
|
|
50
|
+
}, [clearGroup, groupId]);
|
|
50
51
|
|
|
51
52
|
return (
|
|
52
53
|
<>
|
|
@@ -84,6 +85,7 @@ function QueueItem({
|
|
|
84
85
|
|
|
85
86
|
useEffect(() => {
|
|
86
87
|
return () => {
|
|
88
|
+
cleanupSheetRef(id);
|
|
87
89
|
cleanupAnimatedIndex(id);
|
|
88
90
|
};
|
|
89
91
|
}, [id]);
|
|
@@ -7,7 +7,7 @@ import React from 'react';
|
|
|
7
7
|
|
|
8
8
|
import { getAnimatedIndex } from './animatedRegistry';
|
|
9
9
|
import { createSheetEventHandlers } from './bottomSheetCoordinator';
|
|
10
|
-
import {
|
|
10
|
+
import { useBottomSheetContext } from './useBottomSheetContext';
|
|
11
11
|
|
|
12
12
|
export interface BottomSheetRef extends BottomSheetMethods {}
|
|
13
13
|
|
|
@@ -32,7 +32,7 @@ export const BottomSheetManaged = React.forwardRef<
|
|
|
32
32
|
},
|
|
33
33
|
ref
|
|
34
34
|
) => {
|
|
35
|
-
const { bottomSheetState } =
|
|
35
|
+
const { bottomSheetState } = useBottomSheetContext();
|
|
36
36
|
|
|
37
37
|
// Get or create shared animated index for this sheet
|
|
38
38
|
const animatedIndex =
|
|
@@ -6,7 +6,7 @@ import { Portal } from 'react-native-teleport';
|
|
|
6
6
|
import { BottomSheetContext } from './BottomSheet.context';
|
|
7
7
|
import { useBottomSheetStore } from './bottomSheet.store';
|
|
8
8
|
import type { BottomSheetPortalId } from './portal.types';
|
|
9
|
-
import {
|
|
9
|
+
import { getSheetRef } from './refsMap';
|
|
10
10
|
|
|
11
11
|
interface BottomSheetPortalProps {
|
|
12
12
|
id: BottomSheetPortalId;
|
|
@@ -22,13 +22,14 @@ export function BottomSheetPortal({ id, children }: BottomSheetPortalProps) {
|
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
// Get the ref that was created in useBottomSheetControl.open()
|
|
25
|
-
const ref =
|
|
25
|
+
const ref = getSheetRef(id);
|
|
26
26
|
|
|
27
27
|
// Clone the child element to add the ref
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
const childWithRef = React.cloneElement(children, {
|
|
29
|
+
ref,
|
|
30
|
+
} as { ref: typeof ref });
|
|
30
31
|
|
|
31
|
-
// Wrap with BottomSheetContext so
|
|
32
|
+
// Wrap with BottomSheetContext so useBottomSheetContext() works inside portal content
|
|
32
33
|
return (
|
|
33
34
|
<Portal hostName={`bottomsheet-${id}`}>
|
|
34
35
|
<BottomSheetContext.Provider value={{ id }}>
|
package/src/bottomSheet.store.ts
CHANGED
|
@@ -28,6 +28,7 @@ interface BottomSheetStoreActions {
|
|
|
28
28
|
startClosing(id: string): void;
|
|
29
29
|
finishClosing(id: string): void;
|
|
30
30
|
updateParams(id: string, params: Record<string, unknown> | undefined): void;
|
|
31
|
+
clearGroup(groupId: string): void;
|
|
31
32
|
clearAll(): void;
|
|
32
33
|
}
|
|
33
34
|
|
|
@@ -144,6 +145,29 @@ export const useBottomSheetStore = create(
|
|
|
144
145
|
};
|
|
145
146
|
}),
|
|
146
147
|
|
|
148
|
+
clearGroup: (groupId) =>
|
|
149
|
+
set((state) => {
|
|
150
|
+
const idsToRemove = new Set(
|
|
151
|
+
state.stackOrder.filter(
|
|
152
|
+
(id) => state.sheetsById[id]?.groupId === groupId
|
|
153
|
+
)
|
|
154
|
+
);
|
|
155
|
+
|
|
156
|
+
if (idsToRemove.size === 0) {
|
|
157
|
+
return state;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
const newSheetsById = { ...state.sheetsById };
|
|
161
|
+
idsToRemove.forEach((id) => {
|
|
162
|
+
delete newSheetsById[id];
|
|
163
|
+
});
|
|
164
|
+
|
|
165
|
+
return {
|
|
166
|
+
sheetsById: newSheetsById,
|
|
167
|
+
stackOrder: state.stackOrder.filter((id) => !idsToRemove.has(id)),
|
|
168
|
+
};
|
|
169
|
+
}),
|
|
170
|
+
|
|
147
171
|
clearAll: () => set(() => ({ sheetsById: {}, stackOrder: [] })),
|
|
148
172
|
}))
|
|
149
173
|
);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useBottomSheetStore } from './bottomSheet.store';
|
|
2
|
-
import {
|
|
2
|
+
import { getSheetRef } from './refsMap';
|
|
3
3
|
|
|
4
4
|
export function initBottomSheetCoordinator(groupId: string) {
|
|
5
5
|
return useBottomSheetStore.subscribe(
|
|
@@ -15,12 +15,12 @@ export function initBottomSheetCoordinator(groupId: string) {
|
|
|
15
15
|
return;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
const ref =
|
|
18
|
+
const ref = getSheetRef(id)?.current;
|
|
19
19
|
|
|
20
20
|
switch (status) {
|
|
21
21
|
case 'opening':
|
|
22
22
|
requestAnimationFrame(() => {
|
|
23
|
-
|
|
23
|
+
getSheetRef(id)?.current?.expand();
|
|
24
24
|
});
|
|
25
25
|
break;
|
|
26
26
|
case 'hidden':
|
package/src/index.tsx
CHANGED
|
@@ -1,12 +1,33 @@
|
|
|
1
|
-
|
|
1
|
+
// Components
|
|
2
2
|
export { BottomSheetManagerProvider } from './BottomSheetManager.provider';
|
|
3
|
-
export {
|
|
4
|
-
export { useBottomSheetState } from './useBottomSheetState';
|
|
5
|
-
export { BottomSheetManaged } from './BottomSheetManaged';
|
|
3
|
+
export { BottomSheetHost } from './BottomSheetHost';
|
|
6
4
|
export { BottomSheetScaleView } from './BottomSheetScaleView';
|
|
7
|
-
export { type
|
|
5
|
+
export { BottomSheetManaged, type BottomSheetRef } from './BottomSheetManaged';
|
|
8
6
|
export { BottomSheetPortal } from './BottomSheetPortal';
|
|
9
|
-
|
|
7
|
+
|
|
8
|
+
// Hooks
|
|
9
|
+
export { useBottomSheetManager } from './useBottomSheetManager';
|
|
10
|
+
export {
|
|
11
|
+
useBottomSheetControl,
|
|
12
|
+
type UseBottomSheetControlReturn,
|
|
13
|
+
} from './useBottomSheetControl';
|
|
14
|
+
export {
|
|
15
|
+
useBottomSheetContext,
|
|
16
|
+
useBottomSheetState,
|
|
17
|
+
type UseBottomSheetContextReturn,
|
|
18
|
+
} from './useBottomSheetContext';
|
|
19
|
+
export {
|
|
20
|
+
useBottomSheetStatus,
|
|
21
|
+
type UseBottomSheetStatusReturn,
|
|
22
|
+
} from './useBottomSheetStatus';
|
|
23
|
+
|
|
24
|
+
// Types
|
|
25
|
+
export type { ScaleConfig } from './useScaleAnimation';
|
|
26
|
+
export type {
|
|
27
|
+
BottomSheetStatus,
|
|
28
|
+
OpenMode,
|
|
29
|
+
BottomSheetState,
|
|
30
|
+
} from './bottomSheet.store';
|
|
10
31
|
export type {
|
|
11
32
|
BottomSheetPortalRegistry,
|
|
12
33
|
BottomSheetPortalId,
|
package/src/refsMap.ts
CHANGED
|
@@ -1,6 +1,18 @@
|
|
|
1
1
|
import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
|
|
2
|
+
import type { RefObject } from 'react';
|
|
2
3
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
type SheetRef = RefObject<BottomSheetMethods | null>;
|
|
5
|
+
|
|
6
|
+
const sheetRefsMap = new Map<string, SheetRef>();
|
|
7
|
+
|
|
8
|
+
export function getSheetRef(sheetId: string): SheetRef | undefined {
|
|
9
|
+
return sheetRefsMap.get(sheetId);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export function setSheetRef(sheetId: string, ref: SheetRef): void {
|
|
13
|
+
sheetRefsMap.set(sheetId, ref);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export function cleanupSheetRef(sheetId: string): void {
|
|
17
|
+
sheetRefsMap.delete(sheetId);
|
|
18
|
+
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { useMaybeBottomSheetContext } from './BottomSheet.context';
|
|
2
|
+
import {
|
|
3
|
+
useBottomSheetStore,
|
|
4
|
+
type BottomSheetState,
|
|
5
|
+
} from './bottomSheet.store';
|
|
6
|
+
import type {
|
|
7
|
+
BottomSheetPortalId,
|
|
8
|
+
BottomSheetPortalParams,
|
|
9
|
+
} from './portal.types';
|
|
10
|
+
|
|
11
|
+
export interface UseBottomSheetContextReturn<TParams> {
|
|
12
|
+
bottomSheetState: BottomSheetState;
|
|
13
|
+
params: TParams;
|
|
14
|
+
close: () => void;
|
|
15
|
+
/** @deprecated Use `close` instead */
|
|
16
|
+
closeBottomSheet: () => void;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/** Without generic - params typed as unknown */
|
|
20
|
+
export function useBottomSheetContext(): UseBottomSheetContextReturn<unknown>;
|
|
21
|
+
/** With generic - params typed based on portal registry */
|
|
22
|
+
export function useBottomSheetContext<
|
|
23
|
+
T extends BottomSheetPortalId,
|
|
24
|
+
>(): UseBottomSheetContextReturn<BottomSheetPortalParams<T>>;
|
|
25
|
+
export function useBottomSheetContext<
|
|
26
|
+
T extends BottomSheetPortalId,
|
|
27
|
+
>(): UseBottomSheetContextReturn<BottomSheetPortalParams<T> | unknown> {
|
|
28
|
+
const context = useMaybeBottomSheetContext();
|
|
29
|
+
|
|
30
|
+
const bottomSheetState = useBottomSheetStore(
|
|
31
|
+
(state) => state.sheetsById[context?.id!]
|
|
32
|
+
);
|
|
33
|
+
|
|
34
|
+
const startClosing = useBottomSheetStore((state) => state.startClosing);
|
|
35
|
+
|
|
36
|
+
if (!bottomSheetState) {
|
|
37
|
+
throw new Error(
|
|
38
|
+
'useBottomSheetContext must be used within a BottomSheet component'
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
const close = () => startClosing(bottomSheetState.id);
|
|
43
|
+
|
|
44
|
+
return {
|
|
45
|
+
bottomSheetState,
|
|
46
|
+
params: bottomSheetState.params as BottomSheetPortalParams<T>,
|
|
47
|
+
close,
|
|
48
|
+
closeBottomSheet: close,
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/**
|
|
53
|
+
* @deprecated Use `useBottomSheetContext` instead
|
|
54
|
+
*/
|
|
55
|
+
export const useBottomSheetState = useBottomSheetContext;
|
|
@@ -1,18 +1,14 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
|
|
3
3
|
|
|
4
|
-
import {
|
|
5
|
-
useBottomSheetStore,
|
|
6
|
-
type BottomSheetStatus,
|
|
7
|
-
type OpenMode,
|
|
8
|
-
} from './bottomSheet.store';
|
|
4
|
+
import { useBottomSheetStore, type OpenMode } from './bottomSheet.store';
|
|
9
5
|
import { useMaybeBottomSheetManagerContext } from './BottomSheetManager.provider';
|
|
10
6
|
import type {
|
|
11
7
|
BottomSheetPortalId,
|
|
12
8
|
BottomSheetPortalParams,
|
|
13
9
|
HasParams,
|
|
14
10
|
} from './portal.types';
|
|
15
|
-
import {
|
|
11
|
+
import { setSheetRef } from './refsMap';
|
|
16
12
|
|
|
17
13
|
interface BaseOpenOptions<TParams> {
|
|
18
14
|
mode?: OpenMode;
|
|
@@ -38,8 +34,6 @@ export interface UseBottomSheetControlReturn<T extends BottomSheetPortalId> {
|
|
|
38
34
|
close: () => void;
|
|
39
35
|
updateParams: (params: BottomSheetPortalParams<T>) => void;
|
|
40
36
|
resetParams: () => void;
|
|
41
|
-
isOpen: boolean;
|
|
42
|
-
status: BottomSheetStatus | null;
|
|
43
37
|
}
|
|
44
38
|
|
|
45
39
|
export function useBottomSheetControl<T extends BottomSheetPortalId>(
|
|
@@ -50,14 +44,13 @@ export function useBottomSheetControl<T extends BottomSheetPortalId>(
|
|
|
50
44
|
const storeOpen = useBottomSheetStore((state) => state.open);
|
|
51
45
|
const startClosing = useBottomSheetStore((state) => state.startClosing);
|
|
52
46
|
const storeUpdateParams = useBottomSheetStore((state) => state.updateParams);
|
|
53
|
-
const sheetState = useBottomSheetStore((state) => state.sheetsById[id]);
|
|
54
47
|
|
|
55
48
|
const open = (options?: OpenOptions<T>) => {
|
|
56
49
|
const groupId = bottomSheetManagerContext?.groupId || 'default';
|
|
57
50
|
|
|
58
51
|
// Create ref when opening (same pattern as useBottomSheetManager)
|
|
59
52
|
const ref = React.createRef<BottomSheetMethods>();
|
|
60
|
-
|
|
53
|
+
setSheetRef(id, ref);
|
|
61
54
|
|
|
62
55
|
storeOpen(
|
|
63
56
|
{
|
|
@@ -84,15 +77,10 @@ export function useBottomSheetControl<T extends BottomSheetPortalId>(
|
|
|
84
77
|
storeUpdateParams(id, undefined);
|
|
85
78
|
};
|
|
86
79
|
|
|
87
|
-
const status = sheetState?.status ?? null;
|
|
88
|
-
const isOpen = status === 'open' || status === 'opening';
|
|
89
|
-
|
|
90
80
|
return {
|
|
91
81
|
open: open as OpenFunction<T>,
|
|
92
82
|
close,
|
|
93
83
|
updateParams,
|
|
94
84
|
resetParams,
|
|
95
|
-
isOpen,
|
|
96
|
-
status,
|
|
97
85
|
};
|
|
98
86
|
}
|
|
@@ -2,17 +2,17 @@ import React from 'react';
|
|
|
2
2
|
|
|
3
3
|
import { useBottomSheetStore, type OpenMode } from './bottomSheet.store';
|
|
4
4
|
import { useMaybeBottomSheetManagerContext } from './BottomSheetManager.provider';
|
|
5
|
-
import {
|
|
5
|
+
import { setSheetRef } from './refsMap';
|
|
6
6
|
import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
|
|
7
7
|
import { shallow } from 'zustand/shallow';
|
|
8
8
|
|
|
9
9
|
export const useBottomSheetManager = () => {
|
|
10
10
|
const bottomSheetManagerContext = useMaybeBottomSheetManagerContext();
|
|
11
11
|
|
|
12
|
-
const { storeOpen, startClosing,
|
|
12
|
+
const { storeOpen, startClosing, storeClearGroup } = useBottomSheetStore(
|
|
13
13
|
(store) => ({
|
|
14
14
|
storeOpen: store.open,
|
|
15
|
-
|
|
15
|
+
storeClearGroup: store.clearGroup,
|
|
16
16
|
startClosing: store.startClosing,
|
|
17
17
|
}),
|
|
18
18
|
shallow
|
|
@@ -33,10 +33,11 @@ export const useBottomSheetManager = () => {
|
|
|
33
33
|
const id = options.id || Math.random().toString(36);
|
|
34
34
|
const ref = React.createRef<BottomSheetMethods>();
|
|
35
35
|
|
|
36
|
-
|
|
36
|
+
setSheetRef(id, ref);
|
|
37
37
|
|
|
38
|
-
|
|
39
|
-
|
|
38
|
+
const contentWithRef = React.cloneElement(content, {
|
|
39
|
+
ref,
|
|
40
|
+
} as { ref: typeof ref });
|
|
40
41
|
|
|
41
42
|
storeOpen(
|
|
42
43
|
{
|
|
@@ -55,13 +56,18 @@ export const useBottomSheetManager = () => {
|
|
|
55
56
|
startClosing(id);
|
|
56
57
|
};
|
|
57
58
|
|
|
58
|
-
const
|
|
59
|
-
|
|
59
|
+
const clear = () => {
|
|
60
|
+
const groupId = bottomSheetManagerContext?.groupId || 'default';
|
|
61
|
+
storeClearGroup(groupId);
|
|
60
62
|
};
|
|
61
63
|
|
|
62
64
|
return {
|
|
63
|
-
|
|
65
|
+
open: openBottomSheet,
|
|
64
66
|
close,
|
|
67
|
+
clear,
|
|
68
|
+
/** @deprecated Use `open` instead */
|
|
65
69
|
openBottomSheet,
|
|
70
|
+
/** @deprecated Use `clear` instead */
|
|
71
|
+
clearAll: clear,
|
|
66
72
|
};
|
|
67
73
|
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import {
|
|
2
|
+
useBottomSheetStore,
|
|
3
|
+
type BottomSheetStatus,
|
|
4
|
+
} from './bottomSheet.store';
|
|
5
|
+
import type { BottomSheetPortalId } from './portal.types';
|
|
6
|
+
|
|
7
|
+
export interface UseBottomSheetStatusReturn {
|
|
8
|
+
status: BottomSheetStatus | null;
|
|
9
|
+
isOpen: boolean;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export function useBottomSheetStatus(
|
|
13
|
+
id: BottomSheetPortalId
|
|
14
|
+
): UseBottomSheetStatusReturn {
|
|
15
|
+
const status = useBottomSheetStore(
|
|
16
|
+
(state) => state.sheetsById[id]?.status ?? null
|
|
17
|
+
);
|
|
18
|
+
|
|
19
|
+
const isOpen = status === 'open' || status === 'opening';
|
|
20
|
+
|
|
21
|
+
return {
|
|
22
|
+
status,
|
|
23
|
+
isOpen,
|
|
24
|
+
};
|
|
25
|
+
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["_BottomSheet","require","_bottomSheet","useBottomSheetState","$","_compilerRuntime","c","context","useMaybeBottomSheetContext","t0","id","state","sheetsById","bottomSheetState","useBottomSheetStore","startClosing","_temp","Error","t1","close","t2","params","t3","closeBottomSheet","state_0"],"sourceRoot":"../../src","sources":["useBottomSheetState.ts"],"mappings":";;;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AASA;;AAiBO,SAAAE,oBAAA;EAAA,MAAAC,CAAA,OAAAC,gBAAA,CAAAC,CAAA;EAGL,MAAAC,OAAA,GAAgB,IAAAC,uCAA0B,EAAC,CAAC;EAAC,IAAAC,EAAA;EAAA,IAAAL,CAAA,QAAAG,OAAA,EAAAG,EAAA;IAG3CD,EAAA,GAAAE,KAAA,IAAWA,KAAK,CAAAC,UAAW,CAACL,OAAO,EAAAG,EAAI,CAAE;IAAAN,CAAA,MAAAG,OAAA,EAAAG,EAAA;IAAAN,CAAA,MAAAK,EAAA;EAAA;IAAAA,EAAA,GAAAL,CAAA;EAAA;EAD3C,MAAAS,gBAAA,GAAyB,IAAAC,gCAAmB,EAC1CL,EACF,CAAC;EAED,MAAAM,YAAA,GAAqB,IAAAD,gCAAmB,EAACE,KAA6B,CAAC;EAEvE,IAAI,CAACH,gBAAgB;IACnB,MAAM,IAAII,KAAK,CACb,+DACF,CAAC;EAAC;EACH,IAAAC,EAAA;EAAA,IAAAd,CAAA,QAAAS,gBAAA,CAAAH,EAAA,IAAAN,CAAA,QAAAW,YAAA;IAEaG,EAAA,GAAAA,CAAA,KAAMH,YAAY,CAACF,gBAAgB,CAAAH,EAAG,CAAC;IAAAN,CAAA,MAAAS,gBAAA,CAAAH,EAAA;IAAAN,CAAA,MAAAW,YAAA;IAAAX,CAAA,MAAAc,EAAA;EAAA;IAAAA,EAAA,GAAAd,CAAA;EAAA;EAArD,MAAAe,KAAA,GAAcD,EAAuC;EAI3C,MAAAE,EAAA,GAAAP,gBAAgB,CAAAQ,MAAO;EAAoB,IAAAC,EAAA;EAAA,IAAAlB,CAAA,QAAAS,gBAAA,IAAAT,CAAA,QAAAe,KAAA,IAAAf,CAAA,QAAAgB,EAAA;IAF9CE,EAAA;MAAAT,gBAAA;MAAAQ,MAAA,EAEGD,EAA2C;MAAAD,KAAA;MAAAI,gBAAA,EAEjCJ;IACpB,CAAC;IAAAf,CAAA,MAAAS,gBAAA;IAAAT,CAAA,MAAAe,KAAA;IAAAf,CAAA,MAAAgB,EAAA;IAAAhB,CAAA,MAAAkB,EAAA;EAAA;IAAAA,EAAA,GAAAlB,CAAA;EAAA;EAAA,OALMkB,EAKN;AAAA;AAxBI,SAAAN,MAAAQ,OAAA;EAAA,OAS+Cb,OAAK,CAAAI,YAAa;AAAA","ignoreList":[]}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { type BottomSheetState } from './bottomSheet.store';
|
|
2
|
-
import type { BottomSheetPortalId, BottomSheetPortalParams } from './portal.types';
|
|
3
|
-
declare const UNSPECIFIED: unique symbol;
|
|
4
|
-
type Unspecified = typeof UNSPECIFIED;
|
|
5
|
-
type ResolveParams<T> = T extends Unspecified ? unknown : T extends BottomSheetPortalId ? BottomSheetPortalParams<T> : unknown;
|
|
6
|
-
export interface UseBottomSheetStateReturn<T> {
|
|
7
|
-
bottomSheetState: BottomSheetState;
|
|
8
|
-
params: ResolveParams<T>;
|
|
9
|
-
close: () => void;
|
|
10
|
-
closeBottomSheet: () => void;
|
|
11
|
-
}
|
|
12
|
-
export declare function useBottomSheetState<T extends BottomSheetPortalId | Unspecified = Unspecified>(): UseBottomSheetStateReturn<T>;
|
|
13
|
-
export {};
|
|
14
|
-
//# sourceMappingURL=useBottomSheetState.d.ts.map
|
|
@@ -1 +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;AAC7B,OAAO,KAAK,EACV,mBAAmB,EACnB,uBAAuB,EACxB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,CAAC,MAAM,WAAW,EAAE,OAAO,MAAM,CAAC;AACzC,KAAK,WAAW,GAAG,OAAO,WAAW,CAAC;AAEtC,KAAK,aAAa,CAAC,CAAC,IAAI,CAAC,SAAS,WAAW,GACzC,OAAO,GACP,CAAC,SAAS,mBAAmB,GAC3B,uBAAuB,CAAC,CAAC,CAAC,GAC1B,OAAO,CAAC;AAEd,MAAM,WAAW,yBAAyB,CAAC,CAAC;IAC1C,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACzB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,wBAAgB,mBAAmB,CACjC,CAAC,SAAS,mBAAmB,GAAG,WAAW,GAAG,WAAW,KACtD,yBAAyB,CAAC,CAAC,CAAC,CAuBhC"}
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import { useMaybeBottomSheetContext } from './BottomSheet.context';
|
|
2
|
-
import {
|
|
3
|
-
useBottomSheetStore,
|
|
4
|
-
type BottomSheetState,
|
|
5
|
-
} from './bottomSheet.store';
|
|
6
|
-
import type {
|
|
7
|
-
BottomSheetPortalId,
|
|
8
|
-
BottomSheetPortalParams,
|
|
9
|
-
} from './portal.types';
|
|
10
|
-
|
|
11
|
-
// Marker type to detect when no generic is provided
|
|
12
|
-
declare const UNSPECIFIED: unique symbol;
|
|
13
|
-
type Unspecified = typeof UNSPECIFIED;
|
|
14
|
-
|
|
15
|
-
type ResolveParams<T> = T extends Unspecified
|
|
16
|
-
? unknown
|
|
17
|
-
: T extends BottomSheetPortalId
|
|
18
|
-
? BottomSheetPortalParams<T>
|
|
19
|
-
: unknown;
|
|
20
|
-
|
|
21
|
-
export interface UseBottomSheetStateReturn<T> {
|
|
22
|
-
bottomSheetState: BottomSheetState;
|
|
23
|
-
params: ResolveParams<T>;
|
|
24
|
-
close: () => void;
|
|
25
|
-
closeBottomSheet: () => void;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
export function useBottomSheetState<
|
|
29
|
-
T extends BottomSheetPortalId | Unspecified = Unspecified,
|
|
30
|
-
>(): UseBottomSheetStateReturn<T> {
|
|
31
|
-
const context = useMaybeBottomSheetContext();
|
|
32
|
-
|
|
33
|
-
const bottomSheetState = useBottomSheetStore(
|
|
34
|
-
(state) => state.sheetsById[context?.id!]
|
|
35
|
-
);
|
|
36
|
-
|
|
37
|
-
const startClosing = useBottomSheetStore((state) => state.startClosing);
|
|
38
|
-
|
|
39
|
-
if (!bottomSheetState) {
|
|
40
|
-
throw new Error(
|
|
41
|
-
'useBottomSheetState must be used within a BottomSheetProvider'
|
|
42
|
-
);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
const close = () => startClosing(bottomSheetState.id);
|
|
46
|
-
|
|
47
|
-
return {
|
|
48
|
-
bottomSheetState,
|
|
49
|
-
params: bottomSheetState.params as ResolveParams<T>,
|
|
50
|
-
close,
|
|
51
|
-
closeBottomSheet: close,
|
|
52
|
-
};
|
|
53
|
-
}
|