@niibase/bottom-sheet-manager 1.1.0
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/LICENSE +21 -0
- package/README.md +147 -0
- package/lib/commonjs/events.js +35 -0
- package/lib/commonjs/events.js.map +1 -0
- package/lib/commonjs/index.js +85 -0
- package/lib/commonjs/index.js.map +1 -0
- package/lib/commonjs/manager.js +171 -0
- package/lib/commonjs/manager.js.map +1 -0
- package/lib/commonjs/provider.js +229 -0
- package/lib/commonjs/provider.js.map +1 -0
- package/lib/commonjs/router/index.js +100 -0
- package/lib/commonjs/router/index.js.map +1 -0
- package/lib/commonjs/router/router.js +72 -0
- package/lib/commonjs/router/router.js.map +1 -0
- package/lib/commonjs/router/types.js +6 -0
- package/lib/commonjs/router/types.js.map +1 -0
- package/lib/commonjs/router/view.js +180 -0
- package/lib/commonjs/router/view.js.map +1 -0
- package/lib/commonjs/sheet.js +240 -0
- package/lib/commonjs/sheet.js.map +1 -0
- package/lib/commonjs/types.js +6 -0
- package/lib/commonjs/types.js.map +1 -0
- package/lib/module/events.js +29 -0
- package/lib/module/events.js.map +1 -0
- package/lib/module/index.js +6 -0
- package/lib/module/index.js.map +1 -0
- package/lib/module/manager.js +165 -0
- package/lib/module/manager.js.map +1 -0
- package/lib/module/provider.js +210 -0
- package/lib/module/provider.js.map +1 -0
- package/lib/module/router/index.js +79 -0
- package/lib/module/router/index.js.map +1 -0
- package/lib/module/router/router.js +65 -0
- package/lib/module/router/router.js.map +1 -0
- package/lib/module/router/types.js +2 -0
- package/lib/module/router/types.js.map +1 -0
- package/lib/module/router/view.js +173 -0
- package/lib/module/router/view.js.map +1 -0
- package/lib/module/sheet.js +232 -0
- package/lib/module/sheet.js.map +1 -0
- package/lib/module/types.js +2 -0
- package/lib/module/types.js.map +1 -0
- package/lib/typescript/events.d.ts +16 -0
- package/lib/typescript/events.d.ts.map +1 -0
- package/lib/typescript/index.d.ts +6 -0
- package/lib/typescript/index.d.ts.map +1 -0
- package/lib/typescript/manager.d.ts +78 -0
- package/lib/typescript/manager.d.ts.map +1 -0
- package/lib/typescript/provider.d.ts +69 -0
- package/lib/typescript/provider.d.ts.map +1 -0
- package/lib/typescript/router/index.d.ts +59 -0
- package/lib/typescript/router/index.d.ts.map +1 -0
- package/lib/typescript/router/router.d.ts +47 -0
- package/lib/typescript/router/router.d.ts.map +1 -0
- package/lib/typescript/router/types.d.ts +46 -0
- package/lib/typescript/router/types.d.ts.map +1 -0
- package/lib/typescript/router/view.d.ts +11 -0
- package/lib/typescript/router/view.d.ts.map +1 -0
- package/lib/typescript/sheet.d.ts +19 -0
- package/lib/typescript/sheet.d.ts.map +1 -0
- package/lib/typescript/types.d.ts +125 -0
- package/lib/typescript/types.d.ts.map +1 -0
- package/package.json +102 -0
- package/src/events.ts +40 -0
- package/src/index.ts +11 -0
- package/src/manager.ts +223 -0
- package/src/provider.tsx +293 -0
- package/src/router/index.tsx +130 -0
- package/src/router/router.ts +94 -0
- package/src/router/types.ts +117 -0
- package/src/router/view.tsx +265 -0
- package/src/sheet.tsx +350 -0
- package/src/types.ts +153 -0
|
@@ -0,0 +1,210 @@
|
|
|
1
|
+
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
2
|
+
import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
|
|
3
|
+
import { StatusBar } from "react-native";
|
|
4
|
+
import React from "react";
|
|
5
|
+
import Animated, { interpolate, interpolateColor, runOnJS, useAnimatedReaction, useAnimatedStyle, useSharedValue, withSpring, withTiming } from "react-native-reanimated";
|
|
6
|
+
import { eventManager } from "./events";
|
|
7
|
+
export const providerRegistryStack = [];
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* An object that holds all the sheet components against their ids.
|
|
11
|
+
*/
|
|
12
|
+
export const sheetsRegistry = {
|
|
13
|
+
global: {}
|
|
14
|
+
};
|
|
15
|
+
// Registers your Sheet with the SheetProvider.
|
|
16
|
+
export function registerSheet(id, Sheet, ...contexts) {
|
|
17
|
+
if (!id || !Sheet) return;
|
|
18
|
+
if (!contexts || contexts.length === 0) contexts = ["global"];
|
|
19
|
+
for (let context of contexts) {
|
|
20
|
+
const registry = !sheetsRegistry[context] ? sheetsRegistry[context] = {} : sheetsRegistry[context];
|
|
21
|
+
registry[id] = Sheet;
|
|
22
|
+
eventManager.publish(`${context}-on-register`);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* The SheetProvider makes available the sheets in a given context. The default context is
|
|
28
|
+
* `global`. However if you want to render a Sheet within another sheet or if you want to render
|
|
29
|
+
* Sheets in a modal. You can use a separate Provider with a custom context value.
|
|
30
|
+
*
|
|
31
|
+
* For example
|
|
32
|
+
* ```ts
|
|
33
|
+
* // Define your SheetProvider in the component/modal where
|
|
34
|
+
* // you want to show some Sheets.
|
|
35
|
+
* <SheetProvider context="local-context" />
|
|
36
|
+
*
|
|
37
|
+
* // Then register your sheet when for example the
|
|
38
|
+
* // Modal component renders.
|
|
39
|
+
*
|
|
40
|
+
* registerSheet('local-sheet', LocalSheet,'local-context');
|
|
41
|
+
*
|
|
42
|
+
* ```
|
|
43
|
+
*/
|
|
44
|
+
export function SheetProvider({
|
|
45
|
+
iosModalSheetTypeOfAnimation = false,
|
|
46
|
+
context = "global",
|
|
47
|
+
duration = 300,
|
|
48
|
+
children
|
|
49
|
+
}) {
|
|
50
|
+
const {
|
|
51
|
+
top
|
|
52
|
+
} = useSafeAreaInsets();
|
|
53
|
+
const [, forceUpdate] = React.useReducer(x => x + 1, 0);
|
|
54
|
+
const sheetIds = Object.keys(sheetsRegistry[context] || sheetsRegistry["global"] || {});
|
|
55
|
+
|
|
56
|
+
// Rerender when a new sheet is added.
|
|
57
|
+
const onRegister = React.useCallback(forceUpdate, [forceUpdate]);
|
|
58
|
+
|
|
59
|
+
// IOS modal sheet type of animation
|
|
60
|
+
const isFullScreen = useSharedValue(-1);
|
|
61
|
+
const colorStyle = useAnimatedStyle(() => ({
|
|
62
|
+
flex: 1,
|
|
63
|
+
backgroundColor: interpolateColor(isFullScreen.value, [0, 1], ["transparent", "#000"])
|
|
64
|
+
}));
|
|
65
|
+
const animatedStyle = useAnimatedStyle(() => ({
|
|
66
|
+
flex: 1,
|
|
67
|
+
overflow: "hidden",
|
|
68
|
+
borderRadius: interpolate(isFullScreen.value, [0, 0.8, 1], [0, 20, 24], "clamp"),
|
|
69
|
+
transform: [{
|
|
70
|
+
scaleX: withTiming(interpolate(isFullScreen.value, [0, 0.98, 1], [1, 1, 0.92], "clamp"), {
|
|
71
|
+
duration
|
|
72
|
+
})
|
|
73
|
+
}, {
|
|
74
|
+
translateY: withSpring(interpolate(isFullScreen.value, [0, 0.99, 1], [0, top, top + 5], "clamp"), {
|
|
75
|
+
duration,
|
|
76
|
+
dampingRatio: 1.5
|
|
77
|
+
})
|
|
78
|
+
}]
|
|
79
|
+
}), [duration]);
|
|
80
|
+
|
|
81
|
+
// Since background color is white, we need to set status bar to light
|
|
82
|
+
const setStatusBar = StatusBar.setBarStyle;
|
|
83
|
+
useAnimatedReaction(() => isFullScreen.value, currentValue => {
|
|
84
|
+
"worklet";
|
|
85
|
+
|
|
86
|
+
if (currentValue > -1) {
|
|
87
|
+
runOnJS(setStatusBar)(currentValue >= 0.5 ? "light-content" : "default");
|
|
88
|
+
}
|
|
89
|
+
}, []);
|
|
90
|
+
React.useEffect(() => {
|
|
91
|
+
providerRegistryStack.indexOf(context) > -1 ? providerRegistryStack.indexOf(context) : providerRegistryStack.push(context) - 1;
|
|
92
|
+
const unsub = eventManager.subscribe(`${context}-on-register`, onRegister);
|
|
93
|
+
return () => {
|
|
94
|
+
providerRegistryStack.splice(providerRegistryStack.indexOf(context), 1);
|
|
95
|
+
unsub?.unsubscribe();
|
|
96
|
+
};
|
|
97
|
+
}, [context, onRegister]);
|
|
98
|
+
return /*#__PURE__*/React.createElement(SheetAnimationContext.Provider, {
|
|
99
|
+
value: {
|
|
100
|
+
isFullScreen,
|
|
101
|
+
iosModalSheetTypeOfAnimation
|
|
102
|
+
}
|
|
103
|
+
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
104
|
+
style: colorStyle
|
|
105
|
+
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
106
|
+
style: animatedStyle
|
|
107
|
+
}, children)), /*#__PURE__*/React.createElement(BottomSheetModalProvider, null, sheetIds.map(id => /*#__PURE__*/React.createElement(RenderSheet, {
|
|
108
|
+
key: id,
|
|
109
|
+
id: id,
|
|
110
|
+
context: context,
|
|
111
|
+
duration: duration
|
|
112
|
+
}))));
|
|
113
|
+
}
|
|
114
|
+
const ProviderContext = /*#__PURE__*/React.createContext("global");
|
|
115
|
+
const SheetIDContext = /*#__PURE__*/React.createContext(undefined);
|
|
116
|
+
const SheetAnimationContext = /*#__PURE__*/React.createContext({
|
|
117
|
+
isFullScreen: {
|
|
118
|
+
value: 0
|
|
119
|
+
},
|
|
120
|
+
iosModalSheetTypeOfAnimation: false
|
|
121
|
+
});
|
|
122
|
+
export const SheetRefContext = /*#__PURE__*/React.createContext({});
|
|
123
|
+
const SheetPayloadContext = /*#__PURE__*/React.createContext(undefined);
|
|
124
|
+
|
|
125
|
+
/**
|
|
126
|
+
* Get id of the current context.
|
|
127
|
+
*/
|
|
128
|
+
export const useProviderContext = () => React.useContext(ProviderContext);
|
|
129
|
+
/**
|
|
130
|
+
* Get id of the current sheet
|
|
131
|
+
*/
|
|
132
|
+
export const useSheetIDContext = () => React.useContext(SheetIDContext);
|
|
133
|
+
/**
|
|
134
|
+
* Get the current sheet animation context.
|
|
135
|
+
*/
|
|
136
|
+
export const useSheetAnimationContext = () => React.useContext(SheetAnimationContext);
|
|
137
|
+
/**
|
|
138
|
+
* Get the current Sheet's internal ref.
|
|
139
|
+
*/
|
|
140
|
+
export const useSheetRef = () => React.useContext(SheetRefContext);
|
|
141
|
+
|
|
142
|
+
/**
|
|
143
|
+
* Get the payload this sheet was opened with.
|
|
144
|
+
*/
|
|
145
|
+
export function useSheetPayload() {
|
|
146
|
+
return React.useContext(SheetPayloadContext);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
/**
|
|
150
|
+
* Listen to sheet events.
|
|
151
|
+
*/
|
|
152
|
+
export function useOnSheet(id, type, listener) {
|
|
153
|
+
React.useEffect(() => {
|
|
154
|
+
const subscription = eventManager.subscribe(`${type}_${id}`, listener);
|
|
155
|
+
return () => subscription.unsubscribe();
|
|
156
|
+
}, [id, listener]);
|
|
157
|
+
}
|
|
158
|
+
const RenderSheet = ({
|
|
159
|
+
id,
|
|
160
|
+
context,
|
|
161
|
+
duration
|
|
162
|
+
}) => {
|
|
163
|
+
const [payload, setPayload] = React.useState();
|
|
164
|
+
const [visible, setVisible] = React.useState(false);
|
|
165
|
+
const ref = React.useRef(null);
|
|
166
|
+
const Sheet = context.startsWith("$$-auto-") ? sheetsRegistry?.global?.[id] : sheetsRegistry[context] ? sheetsRegistry[context]?.[id] : undefined;
|
|
167
|
+
const onShow = React.useCallback((data, ctx = "global", reopened) => {
|
|
168
|
+
if (ctx !== context) return;
|
|
169
|
+
if (!reopened) setPayload(data);
|
|
170
|
+
setVisible(true);
|
|
171
|
+
}, [context]);
|
|
172
|
+
const onClose = React.useCallback((_data, ctx = "global", reopened) => {
|
|
173
|
+
if (context !== ctx) return;
|
|
174
|
+
if (!reopened) {
|
|
175
|
+
setPayload(undefined);
|
|
176
|
+
setTimeout(() => setVisible(false), Math.max(duration ?? 300, 300));
|
|
177
|
+
} else {
|
|
178
|
+
setVisible(false);
|
|
179
|
+
}
|
|
180
|
+
}, [context]);
|
|
181
|
+
const onHide = React.useCallback((data, ctx = "global") => {
|
|
182
|
+
eventManager.publish(`hide_${id}`, data, ctx);
|
|
183
|
+
}, [id]);
|
|
184
|
+
React.useEffect(() => {
|
|
185
|
+
if (visible) {
|
|
186
|
+
eventManager.publish(`show_${id}`, payload, context);
|
|
187
|
+
}
|
|
188
|
+
}, [context, id, payload, visible]);
|
|
189
|
+
React.useEffect(() => {
|
|
190
|
+
let subs = [eventManager.subscribe(`show_wrap_${id}`, onShow), eventManager.subscribe(`onclose_${id}`, onClose), eventManager.subscribe(`hide_wrap_${id}`, onHide)];
|
|
191
|
+
return () => {
|
|
192
|
+
subs.forEach(s => s.unsubscribe());
|
|
193
|
+
};
|
|
194
|
+
}, [id, context, onShow, onHide, onClose]);
|
|
195
|
+
if (!Sheet) return null;
|
|
196
|
+
return visible ? /*#__PURE__*/React.createElement(ProviderContext.Provider, {
|
|
197
|
+
value: context
|
|
198
|
+
}, /*#__PURE__*/React.createElement(SheetIDContext.Provider, {
|
|
199
|
+
value: id
|
|
200
|
+
}, /*#__PURE__*/React.createElement(SheetRefContext.Provider, {
|
|
201
|
+
value: ref
|
|
202
|
+
}, /*#__PURE__*/React.createElement(SheetPayloadContext.Provider, {
|
|
203
|
+
value: payload
|
|
204
|
+
}, /*#__PURE__*/React.createElement(Sheet, {
|
|
205
|
+
id: id,
|
|
206
|
+
payload: payload,
|
|
207
|
+
context: context
|
|
208
|
+
}))))) : null;
|
|
209
|
+
};
|
|
210
|
+
//# sourceMappingURL=provider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useSafeAreaInsets","BottomSheetModalProvider","StatusBar","React","Animated","interpolate","interpolateColor","runOnJS","useAnimatedReaction","useAnimatedStyle","useSharedValue","withSpring","withTiming","eventManager","providerRegistryStack","sheetsRegistry","global","registerSheet","id","Sheet","contexts","length","context","registry","publish","SheetProvider","iosModalSheetTypeOfAnimation","duration","children","top","forceUpdate","useReducer","x","sheetIds","Object","keys","onRegister","useCallback","isFullScreen","colorStyle","flex","backgroundColor","value","animatedStyle","overflow","borderRadius","transform","scaleX","translateY","dampingRatio","setStatusBar","setBarStyle","currentValue","useEffect","indexOf","push","unsub","subscribe","splice","unsubscribe","createElement","SheetAnimationContext","Provider","View","style","map","RenderSheet","key","ProviderContext","createContext","SheetIDContext","undefined","SheetRefContext","SheetPayloadContext","useProviderContext","useContext","useSheetIDContext","useSheetAnimationContext","useSheetRef","useSheetPayload","useOnSheet","type","listener","subscription","payload","setPayload","useState","visible","setVisible","ref","useRef","startsWith","onShow","data","ctx","reopened","onClose","_data","setTimeout","Math","max","onHide","subs","forEach","s"],"sourceRoot":"../../src","sources":["provider.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
|
+
import { createNavigatorFactory, useNavigationBuilder } from "@react-navigation/native";
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { BottomSheetRouter } from "./router";
|
|
5
|
+
import { BottomSheetView } from "./view";
|
|
6
|
+
function BottomSheetNavigator({
|
|
7
|
+
id,
|
|
8
|
+
children,
|
|
9
|
+
screenListeners,
|
|
10
|
+
screenOptions,
|
|
11
|
+
...rest
|
|
12
|
+
}) {
|
|
13
|
+
const {
|
|
14
|
+
state,
|
|
15
|
+
descriptors,
|
|
16
|
+
navigation,
|
|
17
|
+
NavigationContent
|
|
18
|
+
} = useNavigationBuilder(BottomSheetRouter, {
|
|
19
|
+
id,
|
|
20
|
+
children,
|
|
21
|
+
screenListeners,
|
|
22
|
+
screenOptions
|
|
23
|
+
});
|
|
24
|
+
return /*#__PURE__*/React.createElement(NavigationContent, null, /*#__PURE__*/React.createElement(BottomSheetView, _extends({}, rest, {
|
|
25
|
+
state: state,
|
|
26
|
+
navigation: navigation,
|
|
27
|
+
descriptors: descriptors
|
|
28
|
+
})));
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* To use BottomSheetNavigator with expo-router, the first screen should be your app content
|
|
33
|
+
* and add a border radius of 24px to the root view if want to snap to 100%.
|
|
34
|
+
*
|
|
35
|
+
* @example
|
|
36
|
+
* ```tsx
|
|
37
|
+
* import {
|
|
38
|
+
* createBottomSheetNavigator,
|
|
39
|
+
* BottomSheetNavigationOptions,
|
|
40
|
+
* BottomSheetNavigationEventMap,
|
|
41
|
+
* BottomSheetNavigationState,
|
|
42
|
+
* } from "@repo/bottom-sheet";
|
|
43
|
+
* import { Slot, withLayoutContext } from "expo-router";
|
|
44
|
+
*
|
|
45
|
+
* const { Navigator } = createBottomSheetNavigator();
|
|
46
|
+
*
|
|
47
|
+
* const BottomSheet = withLayoutContext<
|
|
48
|
+
* BottomSheetNavigationOptions,
|
|
49
|
+
* typeof Navigator,
|
|
50
|
+
* BottomSheetNavigationState<any>,
|
|
51
|
+
* BottomSheetNavigationEventMap
|
|
52
|
+
* >(Navigator);
|
|
53
|
+
*
|
|
54
|
+
* export const unstable_settings = {
|
|
55
|
+
* initialRouteName: "index",
|
|
56
|
+
* };
|
|
57
|
+
*
|
|
58
|
+
* export default function Layout() {
|
|
59
|
+
* if (typeof window === "undefined") return <Slot />;
|
|
60
|
+
* return (
|
|
61
|
+
* <BottomSheet
|
|
62
|
+
* screenOptions={
|
|
63
|
+
* {
|
|
64
|
+
* // API Reference: `@repo/design/bottom-sheet/types.ts`
|
|
65
|
+
* // And: https://gorhom.github.io/react-native-bottom-sheet/modal/props/
|
|
66
|
+
* }
|
|
67
|
+
* }
|
|
68
|
+
*. />
|
|
69
|
+
* );
|
|
70
|
+
* }
|
|
71
|
+
* ```
|
|
72
|
+
*/
|
|
73
|
+
export function createBottomSheetNavigator(config) {
|
|
74
|
+
// We call `createNavigatorFactory` with our un-typed navigator
|
|
75
|
+
// but pass in the config to get the typed container
|
|
76
|
+
return createNavigatorFactory(BottomSheetNavigator)(config);
|
|
77
|
+
}
|
|
78
|
+
export * from "./types";
|
|
79
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["createNavigatorFactory","useNavigationBuilder","React","BottomSheetRouter","BottomSheetView","BottomSheetNavigator","id","children","screenListeners","screenOptions","rest","state","descriptors","navigation","NavigationContent","createElement","_extends","createBottomSheetNavigator","config"],"sourceRoot":"../../../src","sources":["router/index.tsx"],"mappings":";AAAA,SACEA,sBAAsB,EAKtBC,oBAAoB,QACf,0BAA0B;AACjC,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,iBAAiB,QAAkC,UAAU;AAStE,SAASC,eAAe,QAAQ,QAAQ;AAExC,SAASC,oBAAoBA,CAAC;EAC5BC,EAAE;EACFC,QAAQ;EACRC,eAAe;EACfC,aAAa;EACb,GAAGC;AACsB,CAAC,EAAE;EAC5B,MAAM;IAAEC,KAAK;IAAEC,WAAW;IAAEC,UAAU;IAAEC;EAAkB,CAAC,GAAGb,oBAAoB,CAMhFE,iBAAiB,EAAE;IACnBG,EAAE;IACFC,QAAQ;IACRC,eAAe;IACfC;EACF,CAAC,CAAC;EAEF,oBACEP,KAAA,CAAAa,aAAA,CAACD,iBAAiB,qBAChBZ,KAAA,CAAAa,aAAA,CAACX,eAAe,EAAAY,QAAA,KACVN,IAAI;IACRC,KAAK,EAAEA,KAAM;IACbE,UAAU,EAAEA,UAAW;IACvBD,WAAW,EAAEA;EAAY,EAC1B,CACgB,CAAC;AAExB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASK,0BAA0BA,CA4BxCC,MAAe,EAAmC;EAClD;EACA;EACA,OAAOlB,sBAAsB,CAACK,oBAAoB,CAAC,CAACa,MAAM,CAAC;AAC7D;AAEA,cAAc,SAAS","ignoreList":[]}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { StackActions, StackRouter } from "@react-navigation/native";
|
|
2
|
+
import { nanoid } from "nanoid/non-secure";
|
|
3
|
+
export const BottomSheetActions = {
|
|
4
|
+
...StackActions,
|
|
5
|
+
snapTo(index) {
|
|
6
|
+
return {
|
|
7
|
+
type: "SNAP_TO",
|
|
8
|
+
index
|
|
9
|
+
};
|
|
10
|
+
}
|
|
11
|
+
};
|
|
12
|
+
export function BottomSheetRouter(routerOptions) {
|
|
13
|
+
const baseRouter = StackRouter(routerOptions);
|
|
14
|
+
return {
|
|
15
|
+
...baseRouter,
|
|
16
|
+
type: "bottom-sheet",
|
|
17
|
+
getInitialState(options) {
|
|
18
|
+
const state = baseRouter.getInitialState(options);
|
|
19
|
+
return {
|
|
20
|
+
...state,
|
|
21
|
+
stale: false,
|
|
22
|
+
type: "bottom-sheet",
|
|
23
|
+
key: `bottom-sheet-${nanoid()}`
|
|
24
|
+
};
|
|
25
|
+
},
|
|
26
|
+
getStateForAction(state, action, options) {
|
|
27
|
+
switch (action.type) {
|
|
28
|
+
case "SNAP_TO":
|
|
29
|
+
{
|
|
30
|
+
const index = action.target === state.key && action.source ? state.routes.findIndex(r => r.key === action.source) : state.index;
|
|
31
|
+
return {
|
|
32
|
+
...state,
|
|
33
|
+
routes: state.routes.map((route, i) => i === index ? {
|
|
34
|
+
...route,
|
|
35
|
+
snapToIndex: action.index
|
|
36
|
+
} : route)
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
default:
|
|
40
|
+
return baseRouter.getStateForAction(state, action, options);
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
getRehydratedState(partialState, {
|
|
44
|
+
routeNames,
|
|
45
|
+
routeParamList,
|
|
46
|
+
routeGetIdList
|
|
47
|
+
}) {
|
|
48
|
+
if (partialState.stale === false) {
|
|
49
|
+
return partialState;
|
|
50
|
+
}
|
|
51
|
+
const state = baseRouter.getRehydratedState(partialState, {
|
|
52
|
+
routeNames,
|
|
53
|
+
routeParamList,
|
|
54
|
+
routeGetIdList
|
|
55
|
+
});
|
|
56
|
+
return {
|
|
57
|
+
...state,
|
|
58
|
+
type: "bottom-sheet",
|
|
59
|
+
key: `bottom-sheet-${nanoid()}`
|
|
60
|
+
};
|
|
61
|
+
},
|
|
62
|
+
actionCreators: BottomSheetActions
|
|
63
|
+
};
|
|
64
|
+
}
|
|
65
|
+
//# sourceMappingURL=router.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["StackActions","StackRouter","nanoid","BottomSheetActions","snapTo","index","type","BottomSheetRouter","routerOptions","baseRouter","getInitialState","options","state","stale","key","getStateForAction","action","target","source","routes","findIndex","r","map","route","i","snapToIndex","getRehydratedState","partialState","routeNames","routeParamList","routeGetIdList","actionCreators"],"sourceRoot":"../../../src","sources":["router/router.ts"],"mappings":"AAAA,SAGIA,YAAY,EAEZC,WAAW,QAER,0BAA0B;AACjC,SAASC,MAAM,QAAQ,mBAAmB;AAe1C,OAAO,MAAMC,kBAAkB,GAAG;EAC9B,GAAGH,YAAY;EACfI,MAAMA,CAACC,KAAa,EAAyB;IACzC,OAAO;MAAEC,IAAI,EAAE,SAAS;MAAED;IAAM,CAAC;EACrC;AACJ,CAAC;AAED,OAAO,SAASE,iBAAiBA,CAC7BC,aAAiC,EACuC;EACxE,MAAMC,UAAU,GAAGR,WAAW,CAACO,aAAa,CAG3C;EACD,OAAO;IACH,GAAGC,UAAU;IACbH,IAAI,EAAE,cAAc;IACpBI,eAAeA,CAACC,OAAO,EAAE;MACrB,MAAMC,KAAK,GAAGH,UAAU,CAACC,eAAe,CAACC,OAAO,CAAC;MAEjD,OAAO;QACH,GAAGC,KAAK;QACRC,KAAK,EAAE,KAAK;QACZP,IAAI,EAAE,cAAc;QACpBQ,GAAG,EAAE,gBAAgBZ,MAAM,CAAC,CAAC;MACjC,CAAC;IACL,CAAC;IACDa,iBAAiBA,CAACH,KAAK,EAAEI,MAAM,EAAEL,OAAO,EAAE;MACtC,QAAQK,MAAM,CAACV,IAAI;QACf,KAAK,SAAS;UAAE;YACZ,MAAMD,KAAK,GACPW,MAAM,CAACC,MAAM,KAAKL,KAAK,CAACE,GAAG,IAAIE,MAAM,CAACE,MAAM,GACtCN,KAAK,CAACO,MAAM,CAACC,SAAS,CAAEC,CAAC,IAAKA,CAAC,CAACP,GAAG,KAAKE,MAAM,CAACE,MAAM,CAAC,GACtDN,KAAK,CAACP,KAAK;YAErB,OAAO;cACH,GAAGO,KAAK;cACRO,MAAM,EAAEP,KAAK,CAACO,MAAM,CAACG,GAAG,CAAC,CAACC,KAAK,EAAEC,CAAC,KAC9BA,CAAC,KAAKnB,KAAK,GACL;gBACI,GAAGkB,KAAK;gBACRE,WAAW,EAAET,MAAM,CAACX;cACxB,CAAC,GACDkB,KACV;YACJ,CAAC;UACL;QACA;UACI,OAAOd,UAAU,CAACM,iBAAiB,CAACH,KAAK,EAAEI,MAAM,EAAEL,OAAO,CAAC;MACnE;IACJ,CAAC;IACDe,kBAAkBA,CAACC,YAAY,EAAE;MAAEC,UAAU;MAAEC,cAAc;MAAEC;IAAe,CAAC,EAAE;MAC7E,IAAIH,YAAY,CAACd,KAAK,KAAK,KAAK,EAAE;QAC9B,OAAOc,YAAY;MACvB;MAEA,MAAMf,KAAK,GAAGH,UAAU,CAACiB,kBAAkB,CAACC,YAAY,EAAE;QACtDC,UAAU;QACVC,cAAc;QACdC;MACJ,CAAC,CAAC;MAEF,OAAO;QACH,GAAGlB,KAAK;QACRN,IAAI,EAAE,cAAc;QACpBQ,GAAG,EAAE,gBAAgBZ,MAAM,CAAC,CAAC;MACjC,CAAC;IACL,CAAC;IACD6B,cAAc,EAAE5B;EACpB,CAAC;AACL","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["router/types.ts"],"mappings":"","ignoreList":[]}
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
|
+
import { BottomSheetBackdrop, BottomSheetModal, BottomSheetModalProvider } from "@gorhom/bottom-sheet";
|
|
3
|
+
import { useTheme } from "@react-navigation/native";
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
import { StatusBar } from "react-native";
|
|
6
|
+
import Animated, { Easing, interpolate, interpolateColor, runOnJS, useAnimatedReaction, useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated";
|
|
7
|
+
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
8
|
+
function BottomSheetModalScreen({
|
|
9
|
+
index,
|
|
10
|
+
navigation,
|
|
11
|
+
clickThrough,
|
|
12
|
+
iosModalSheetTypeOfAnimation,
|
|
13
|
+
opacity,
|
|
14
|
+
children,
|
|
15
|
+
...props
|
|
16
|
+
}) {
|
|
17
|
+
const ref = React.useRef(null);
|
|
18
|
+
const lastIndexRef = React.useRef(index);
|
|
19
|
+
|
|
20
|
+
// Present on mount.
|
|
21
|
+
React.useEffect(() => {
|
|
22
|
+
ref.current?.present();
|
|
23
|
+
}, []);
|
|
24
|
+
const isMounted = React.useRef(true);
|
|
25
|
+
React.useEffect(() => {
|
|
26
|
+
return () => {
|
|
27
|
+
isMounted.current = false;
|
|
28
|
+
};
|
|
29
|
+
}, []);
|
|
30
|
+
React.useEffect(() => {
|
|
31
|
+
if (index != null && lastIndexRef.current !== index) {
|
|
32
|
+
ref.current?.snapToIndex(index);
|
|
33
|
+
}
|
|
34
|
+
}, [index]);
|
|
35
|
+
const onChange = React.useCallback(newIndex => {
|
|
36
|
+
const currentIndex = lastIndexRef.current;
|
|
37
|
+
lastIndexRef.current = newIndex;
|
|
38
|
+
if (newIndex >= 0 && newIndex !== currentIndex) {
|
|
39
|
+
navigation.snapTo(newIndex);
|
|
40
|
+
}
|
|
41
|
+
}, [navigation]);
|
|
42
|
+
const onDismiss = React.useCallback(() => {
|
|
43
|
+
// BottomSheetModal will call onDismiss on unmount, be we do not want that since
|
|
44
|
+
// we already popped the screen.
|
|
45
|
+
if (isMounted.current) {
|
|
46
|
+
navigation.goBack();
|
|
47
|
+
}
|
|
48
|
+
}, [navigation]);
|
|
49
|
+
return /*#__PURE__*/React.createElement(BottomSheetModal, _extends({
|
|
50
|
+
ref: ref,
|
|
51
|
+
onDismiss: onDismiss,
|
|
52
|
+
onChange: onChange,
|
|
53
|
+
index: index,
|
|
54
|
+
backdropComponent: props => /*#__PURE__*/React.createElement(BottomSheetBackdrop, _extends({}, props, {
|
|
55
|
+
appearsOnIndex: 0,
|
|
56
|
+
disappearsOnIndex: -1,
|
|
57
|
+
enableTouchThrough: !!clickThrough,
|
|
58
|
+
opacity: opacity || 0.45
|
|
59
|
+
}))
|
|
60
|
+
}, props), children);
|
|
61
|
+
}
|
|
62
|
+
const DEFAULT_SNAP_POINTS = ["66%"];
|
|
63
|
+
export function BottomSheetView({
|
|
64
|
+
state,
|
|
65
|
+
descriptors
|
|
66
|
+
}) {
|
|
67
|
+
const {
|
|
68
|
+
colors
|
|
69
|
+
} = useTheme();
|
|
70
|
+
const {
|
|
71
|
+
top
|
|
72
|
+
} = useSafeAreaInsets();
|
|
73
|
+
const themeBackgroundStyle = React.useMemo(() => ({
|
|
74
|
+
backgroundColor: colors.card
|
|
75
|
+
}), [colors.card]);
|
|
76
|
+
const themeHandleIndicatorStyle = React.useMemo(() => ({
|
|
77
|
+
backgroundColor: colors.border,
|
|
78
|
+
height: 5,
|
|
79
|
+
width: 50
|
|
80
|
+
}), [colors.border]);
|
|
81
|
+
|
|
82
|
+
// IOS modal sheet type of animation
|
|
83
|
+
const isFullScreen = useSharedValue(0);
|
|
84
|
+
const colorStyle = useAnimatedStyle(() => ({
|
|
85
|
+
flex: 1,
|
|
86
|
+
backgroundColor: interpolateColor(isFullScreen.value, [0, 1], ["transparent", "#000"])
|
|
87
|
+
}));
|
|
88
|
+
const animatedStyle = useAnimatedStyle(() => ({
|
|
89
|
+
flex: 1,
|
|
90
|
+
transform: [{
|
|
91
|
+
scaleX: withSpring(interpolate(isFullScreen.value, [0, 1], [1, 0.92]), {
|
|
92
|
+
damping: 15,
|
|
93
|
+
stiffness: 100
|
|
94
|
+
})
|
|
95
|
+
}, {
|
|
96
|
+
translateY: withSpring(interpolate(isFullScreen.value, [0, 1], [0, top + 5]), {
|
|
97
|
+
damping: 15,
|
|
98
|
+
stiffness: 100
|
|
99
|
+
})
|
|
100
|
+
}]
|
|
101
|
+
}));
|
|
102
|
+
|
|
103
|
+
// Since background color is white, we need to set status bar to light
|
|
104
|
+
const setStatusBar = StatusBar.setBarStyle;
|
|
105
|
+
useAnimatedReaction(() => isFullScreen.value, currentValue => {
|
|
106
|
+
"worklet";
|
|
107
|
+
|
|
108
|
+
if (currentValue > -1) {
|
|
109
|
+
runOnJS(setStatusBar)(currentValue >= 0.5 ? "light-content" : "default");
|
|
110
|
+
}
|
|
111
|
+
}, []);
|
|
112
|
+
|
|
113
|
+
// Avoid rendering provider if we only have one screen.
|
|
114
|
+
const shouldRenderProvider = React.useRef(false);
|
|
115
|
+
shouldRenderProvider.current = shouldRenderProvider.current || state.routes.length > 1;
|
|
116
|
+
const firstRoute = state.routes[0];
|
|
117
|
+
if (!firstRoute) {
|
|
118
|
+
// no routes at all, probably shouldn't happen, but let's be defensive
|
|
119
|
+
return null;
|
|
120
|
+
}
|
|
121
|
+
const firstDescriptor = descriptors[firstRoute.key];
|
|
122
|
+
if (!firstDescriptor) {
|
|
123
|
+
// if we don't have a descriptor for the first route, bail out
|
|
124
|
+
return null;
|
|
125
|
+
}
|
|
126
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Animated.View, {
|
|
127
|
+
style: colorStyle
|
|
128
|
+
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
129
|
+
style: animatedStyle
|
|
130
|
+
}, firstDescriptor.render?.())), shouldRenderProvider.current && /*#__PURE__*/React.createElement(BottomSheetModalProvider, null, state.routes.slice(1).map(route => {
|
|
131
|
+
const descriptor = descriptors[route.key];
|
|
132
|
+
if (!descriptor) return null;
|
|
133
|
+
const {
|
|
134
|
+
options,
|
|
135
|
+
navigation,
|
|
136
|
+
render
|
|
137
|
+
} = descriptor;
|
|
138
|
+
const {
|
|
139
|
+
index,
|
|
140
|
+
snapPoints,
|
|
141
|
+
handleStyle,
|
|
142
|
+
backgroundStyle,
|
|
143
|
+
handleIndicatorStyle,
|
|
144
|
+
enableDynamicSizing,
|
|
145
|
+
...sheetProps
|
|
146
|
+
} = options;
|
|
147
|
+
return /*#__PURE__*/React.createElement(BottomSheetModalScreen, _extends({
|
|
148
|
+
key: route.key
|
|
149
|
+
// Make sure index is in range, it could be out if snapToIndex is persisted
|
|
150
|
+
// and snapPoints is changed.
|
|
151
|
+
,
|
|
152
|
+
index: Math.min(route.snapToIndex ?? index ?? 0, !!snapPoints ? snapPoints.length - 1 : 0),
|
|
153
|
+
snapPoints: !snapPoints && !enableDynamicSizing ? DEFAULT_SNAP_POINTS : snapPoints,
|
|
154
|
+
onAnimate: (_, to) => {
|
|
155
|
+
// @ts-ignore TODO: Fix types
|
|
156
|
+
isFullScreen.value = ["%100", "100%"].includes(snapPoints?.[to]) ? 1 : 0;
|
|
157
|
+
},
|
|
158
|
+
animationConfigs: {
|
|
159
|
+
duration: 300,
|
|
160
|
+
easing: Easing.bezier(0.25, 0.1, 0.25, 1)
|
|
161
|
+
},
|
|
162
|
+
topInset: top + 18,
|
|
163
|
+
navigation: navigation,
|
|
164
|
+
enableDynamicSizing: enableDynamicSizing,
|
|
165
|
+
backgroundStyle: [themeBackgroundStyle, backgroundStyle],
|
|
166
|
+
handleIndicatorStyle: [themeHandleIndicatorStyle, handleIndicatorStyle],
|
|
167
|
+
handleStyle: [themeBackgroundStyle, {
|
|
168
|
+
borderRadius: 20
|
|
169
|
+
}, handleStyle]
|
|
170
|
+
}, sheetProps), render?.());
|
|
171
|
+
})));
|
|
172
|
+
}
|
|
173
|
+
//# sourceMappingURL=view.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["BottomSheetBackdrop","BottomSheetModal","BottomSheetModalProvider","useTheme","React","StatusBar","Animated","Easing","interpolate","interpolateColor","runOnJS","useAnimatedReaction","useAnimatedStyle","useSharedValue","withSpring","useSafeAreaInsets","BottomSheetModalScreen","index","navigation","clickThrough","iosModalSheetTypeOfAnimation","opacity","children","props","ref","useRef","lastIndexRef","useEffect","current","present","isMounted","snapToIndex","onChange","useCallback","newIndex","currentIndex","snapTo","onDismiss","goBack","createElement","_extends","backdropComponent","appearsOnIndex","disappearsOnIndex","enableTouchThrough","DEFAULT_SNAP_POINTS","BottomSheetView","state","descriptors","colors","top","themeBackgroundStyle","useMemo","backgroundColor","card","themeHandleIndicatorStyle","border","height","width","isFullScreen","colorStyle","flex","value","animatedStyle","transform","scaleX","damping","stiffness","translateY","setStatusBar","setBarStyle","currentValue","shouldRenderProvider","routes","length","firstRoute","firstDescriptor","key","Fragment","View","style","render","slice","map","route","descriptor","options","snapPoints","handleStyle","backgroundStyle","handleIndicatorStyle","enableDynamicSizing","sheetProps","Math","min","onAnimate","_","to","includes","animationConfigs","duration","easing","bezier","topInset","borderRadius"],"sourceRoot":"../../../src","sources":["router/view.tsx"],"mappings":"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","ignoreList":[]}
|