@mustmove/overlay-kit-rn 1.0.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/README.md +101 -0
- package/dist/index.d.mts +140 -0
- package/dist/index.d.ts +140 -0
- package/dist/index.js +841 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +821 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +54 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,841 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __defProps = Object.defineProperties;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
7
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
10
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
12
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
13
|
+
var __spreadValues = (a, b) => {
|
|
14
|
+
for (var prop in b || (b = {}))
|
|
15
|
+
if (__hasOwnProp.call(b, prop))
|
|
16
|
+
__defNormalProp(a, prop, b[prop]);
|
|
17
|
+
if (__getOwnPropSymbols)
|
|
18
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
19
|
+
if (__propIsEnum.call(b, prop))
|
|
20
|
+
__defNormalProp(a, prop, b[prop]);
|
|
21
|
+
}
|
|
22
|
+
return a;
|
|
23
|
+
};
|
|
24
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
25
|
+
var __objRest = (source, exclude) => {
|
|
26
|
+
var target = {};
|
|
27
|
+
for (var prop in source)
|
|
28
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
if (source != null && __getOwnPropSymbols)
|
|
31
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
32
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
33
|
+
target[prop] = source[prop];
|
|
34
|
+
}
|
|
35
|
+
return target;
|
|
36
|
+
};
|
|
37
|
+
var __export = (target, all) => {
|
|
38
|
+
for (var name in all)
|
|
39
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
40
|
+
};
|
|
41
|
+
var __copyProps = (to, from, except, desc) => {
|
|
42
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
43
|
+
for (let key of __getOwnPropNames(from))
|
|
44
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
45
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
46
|
+
}
|
|
47
|
+
return to;
|
|
48
|
+
};
|
|
49
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
50
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
51
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
52
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
53
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
54
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
55
|
+
mod
|
|
56
|
+
));
|
|
57
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
58
|
+
|
|
59
|
+
// src/index.ts
|
|
60
|
+
var index_exports = {};
|
|
61
|
+
__export(index_exports, {
|
|
62
|
+
OverlayProvider: () => OverlayProvider,
|
|
63
|
+
createUseExternalEvents: () => createUseExternalEvents,
|
|
64
|
+
experimental_createOverlayContext: () => experimental_createOverlayContext,
|
|
65
|
+
overlay: () => overlay,
|
|
66
|
+
useCurrentOverlay: () => useCurrentOverlay,
|
|
67
|
+
useOverlayData: () => useOverlayData
|
|
68
|
+
});
|
|
69
|
+
module.exports = __toCommonJS(index_exports);
|
|
70
|
+
|
|
71
|
+
// src/context/provider/index.tsx
|
|
72
|
+
var import_react6 = require("react");
|
|
73
|
+
|
|
74
|
+
// src/context/provider/content-overlay-controller.tsx
|
|
75
|
+
var import_react = require("react");
|
|
76
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
77
|
+
var ContentOverlayController = (0, import_react.memo)(
|
|
78
|
+
({
|
|
79
|
+
isOpen,
|
|
80
|
+
overlayId,
|
|
81
|
+
overlayDispatch,
|
|
82
|
+
controller: Controller
|
|
83
|
+
}) => {
|
|
84
|
+
(0, import_react.useEffect)(() => {
|
|
85
|
+
setImmediate(() => {
|
|
86
|
+
overlayDispatch({ type: "OPEN", overlayId });
|
|
87
|
+
});
|
|
88
|
+
}, [overlayDispatch, overlayId]);
|
|
89
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
90
|
+
Controller,
|
|
91
|
+
{
|
|
92
|
+
isOpen,
|
|
93
|
+
overlayId,
|
|
94
|
+
close: () => overlayDispatch({ type: "CLOSE", overlayId }),
|
|
95
|
+
unmount: () => overlayDispatch({ type: "REMOVE", overlayId })
|
|
96
|
+
}
|
|
97
|
+
);
|
|
98
|
+
}
|
|
99
|
+
);
|
|
100
|
+
|
|
101
|
+
// src/context/provider/bottom-sheet-controller.tsx
|
|
102
|
+
var import_react2 = require("react");
|
|
103
|
+
var import_bottom_sheet = __toESM(require("@gorhom/bottom-sheet"));
|
|
104
|
+
var import_react_native = require("react-native");
|
|
105
|
+
var import_react_native_reanimated = require("react-native-reanimated");
|
|
106
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
107
|
+
var ContentBottomSheetController = (0, import_react2.memo)(
|
|
108
|
+
({
|
|
109
|
+
isOpen,
|
|
110
|
+
overlayId,
|
|
111
|
+
overlayDispatch,
|
|
112
|
+
controller: Controller,
|
|
113
|
+
options = {}
|
|
114
|
+
}) => {
|
|
115
|
+
console.log("\u{1F680} ~ Controller:", Controller);
|
|
116
|
+
const bottomSheetRef = (0, import_react2.useRef)(null);
|
|
117
|
+
const reducedMotion = (0, import_react_native_reanimated.useReducedMotion)();
|
|
118
|
+
const _a = options, {
|
|
119
|
+
snapPoints = ["50%", "90%"],
|
|
120
|
+
enablePanDownToClose = true,
|
|
121
|
+
enableBackdrop = true,
|
|
122
|
+
backdropOpacity = 0.5,
|
|
123
|
+
enableDynamicSizing = true,
|
|
124
|
+
backgroundStyle = {},
|
|
125
|
+
handleStyle = {}
|
|
126
|
+
} = _a, restOptions = __objRest(_a, [
|
|
127
|
+
"snapPoints",
|
|
128
|
+
"enablePanDownToClose",
|
|
129
|
+
"enableBackdrop",
|
|
130
|
+
"backdropOpacity",
|
|
131
|
+
"enableDynamicSizing",
|
|
132
|
+
"backgroundStyle",
|
|
133
|
+
"handleStyle"
|
|
134
|
+
]);
|
|
135
|
+
(0, import_react2.useEffect)(() => {
|
|
136
|
+
var _a2;
|
|
137
|
+
if (isOpen) {
|
|
138
|
+
const rafId = requestAnimationFrame(() => {
|
|
139
|
+
var _a3;
|
|
140
|
+
(_a3 = bottomSheetRef.current) == null ? void 0 : _a3.expand();
|
|
141
|
+
overlayDispatch({ type: "OPEN", overlayId });
|
|
142
|
+
});
|
|
143
|
+
return () => cancelAnimationFrame(rafId);
|
|
144
|
+
} else {
|
|
145
|
+
(_a2 = bottomSheetRef.current) == null ? void 0 : _a2.close();
|
|
146
|
+
}
|
|
147
|
+
}, [isOpen, overlayDispatch, overlayId]);
|
|
148
|
+
const handleClose = (0, import_react2.useCallback)(() => {
|
|
149
|
+
overlayDispatch({ type: "CLOSE", overlayId });
|
|
150
|
+
}, [overlayDispatch, overlayId]);
|
|
151
|
+
const renderBackdrop = (0, import_react2.useCallback)(
|
|
152
|
+
(props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
153
|
+
import_bottom_sheet.BottomSheetBackdrop,
|
|
154
|
+
__spreadProps(__spreadValues({}, props), {
|
|
155
|
+
appearsOnIndex: 0,
|
|
156
|
+
disappearsOnIndex: -1,
|
|
157
|
+
opacity: backdropOpacity,
|
|
158
|
+
pressBehavior: "close"
|
|
159
|
+
})
|
|
160
|
+
),
|
|
161
|
+
[backdropOpacity]
|
|
162
|
+
);
|
|
163
|
+
if (!isOpen) return null;
|
|
164
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
165
|
+
import_bottom_sheet.default,
|
|
166
|
+
{
|
|
167
|
+
ref: bottomSheetRef,
|
|
168
|
+
android_keyboardInputMode: "adjustResize",
|
|
169
|
+
keyboardBehavior: "extend",
|
|
170
|
+
snapPoints: enableDynamicSizing ? void 0 : snapPoints,
|
|
171
|
+
enablePanDownToClose,
|
|
172
|
+
onClose: handleClose,
|
|
173
|
+
index: 0,
|
|
174
|
+
backdropComponent: enableBackdrop ? renderBackdrop : void 0,
|
|
175
|
+
backgroundStyle: [
|
|
176
|
+
{
|
|
177
|
+
borderTopLeftRadius: 16,
|
|
178
|
+
borderTopRightRadius: 16
|
|
179
|
+
},
|
|
180
|
+
backgroundStyle
|
|
181
|
+
],
|
|
182
|
+
handleStyle: [
|
|
183
|
+
{
|
|
184
|
+
backgroundColor: "transparent",
|
|
185
|
+
borderTopLeftRadius: 16,
|
|
186
|
+
borderTopRightRadius: 16
|
|
187
|
+
},
|
|
188
|
+
handleStyle
|
|
189
|
+
],
|
|
190
|
+
enableDynamicSizing,
|
|
191
|
+
animateOnMount: !reducedMotion,
|
|
192
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
193
|
+
Controller,
|
|
194
|
+
__spreadValues({
|
|
195
|
+
isOpen,
|
|
196
|
+
overlayId,
|
|
197
|
+
snapPoints,
|
|
198
|
+
enablePanDownToClose,
|
|
199
|
+
close: () => overlayDispatch({ type: "CLOSE", overlayId }),
|
|
200
|
+
unmount: () => overlayDispatch({ type: "REMOVE", overlayId })
|
|
201
|
+
}, restOptions)
|
|
202
|
+
)
|
|
203
|
+
}
|
|
204
|
+
);
|
|
205
|
+
}
|
|
206
|
+
);
|
|
207
|
+
var styles = import_react_native.StyleSheet.create({
|
|
208
|
+
contentContainer: {
|
|
209
|
+
flex: 1
|
|
210
|
+
}
|
|
211
|
+
});
|
|
212
|
+
|
|
213
|
+
// src/context/provider/modal-controller.tsx
|
|
214
|
+
var import_react3 = require("react");
|
|
215
|
+
var import_react_native2 = require("react-native");
|
|
216
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
217
|
+
var { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = import_react_native2.Dimensions.get("window");
|
|
218
|
+
var ContentModalController = (0, import_react3.memo)(
|
|
219
|
+
({
|
|
220
|
+
isOpen,
|
|
221
|
+
overlayId,
|
|
222
|
+
overlayDispatch,
|
|
223
|
+
controller: Controller,
|
|
224
|
+
options = {}
|
|
225
|
+
}) => {
|
|
226
|
+
const {
|
|
227
|
+
modalType = "center",
|
|
228
|
+
backdropOpacity = 0.5,
|
|
229
|
+
animationType = "fade",
|
|
230
|
+
swipeDirection
|
|
231
|
+
} = options;
|
|
232
|
+
const [backdropAnimation] = (0, import_react3.useState)(new import_react_native2.Animated.Value(0));
|
|
233
|
+
const [contentAnimation] = (0, import_react3.useState)(new import_react_native2.Animated.Value(0));
|
|
234
|
+
(0, import_react3.useEffect)(() => {
|
|
235
|
+
if (isOpen) {
|
|
236
|
+
setImmediate(() => {
|
|
237
|
+
overlayDispatch({ type: "OPEN", overlayId });
|
|
238
|
+
});
|
|
239
|
+
import_react_native2.Animated.parallel([
|
|
240
|
+
import_react_native2.Animated.timing(backdropAnimation, {
|
|
241
|
+
toValue: 1,
|
|
242
|
+
duration: 300,
|
|
243
|
+
useNativeDriver: true
|
|
244
|
+
}),
|
|
245
|
+
import_react_native2.Animated.timing(contentAnimation, {
|
|
246
|
+
toValue: 1,
|
|
247
|
+
duration: 300,
|
|
248
|
+
useNativeDriver: true
|
|
249
|
+
})
|
|
250
|
+
]).start();
|
|
251
|
+
} else {
|
|
252
|
+
import_react_native2.Animated.parallel([
|
|
253
|
+
import_react_native2.Animated.timing(backdropAnimation, {
|
|
254
|
+
toValue: 0,
|
|
255
|
+
duration: 200,
|
|
256
|
+
useNativeDriver: true
|
|
257
|
+
}),
|
|
258
|
+
import_react_native2.Animated.timing(contentAnimation, {
|
|
259
|
+
toValue: 0,
|
|
260
|
+
duration: 200,
|
|
261
|
+
useNativeDriver: true
|
|
262
|
+
})
|
|
263
|
+
]).start();
|
|
264
|
+
}
|
|
265
|
+
}, [
|
|
266
|
+
isOpen,
|
|
267
|
+
overlayDispatch,
|
|
268
|
+
overlayId,
|
|
269
|
+
backdropAnimation,
|
|
270
|
+
contentAnimation
|
|
271
|
+
]);
|
|
272
|
+
const handleClose = () => {
|
|
273
|
+
overlayDispatch({ type: "CLOSE", overlayId });
|
|
274
|
+
};
|
|
275
|
+
const getContainerStyle = () => {
|
|
276
|
+
switch (modalType) {
|
|
277
|
+
case "bottom":
|
|
278
|
+
return styles2.bottomContainer;
|
|
279
|
+
case "top":
|
|
280
|
+
return styles2.topContainer;
|
|
281
|
+
case "left":
|
|
282
|
+
return styles2.leftContainer;
|
|
283
|
+
case "right":
|
|
284
|
+
return styles2.rightContainer;
|
|
285
|
+
default:
|
|
286
|
+
return styles2.centerContainer;
|
|
287
|
+
}
|
|
288
|
+
};
|
|
289
|
+
const getContentAnimationStyle = () => {
|
|
290
|
+
const baseOpacity = {
|
|
291
|
+
opacity: contentAnimation
|
|
292
|
+
};
|
|
293
|
+
switch (modalType) {
|
|
294
|
+
case "bottom":
|
|
295
|
+
return __spreadProps(__spreadValues({}, baseOpacity), {
|
|
296
|
+
transform: [
|
|
297
|
+
{
|
|
298
|
+
translateY: contentAnimation.interpolate({
|
|
299
|
+
inputRange: [0, 1],
|
|
300
|
+
outputRange: [SCREEN_HEIGHT, 0]
|
|
301
|
+
})
|
|
302
|
+
}
|
|
303
|
+
]
|
|
304
|
+
});
|
|
305
|
+
case "top":
|
|
306
|
+
return __spreadProps(__spreadValues({}, baseOpacity), {
|
|
307
|
+
transform: [
|
|
308
|
+
{
|
|
309
|
+
translateY: contentAnimation.interpolate({
|
|
310
|
+
inputRange: [0, 1],
|
|
311
|
+
outputRange: [-SCREEN_HEIGHT, 0]
|
|
312
|
+
})
|
|
313
|
+
}
|
|
314
|
+
]
|
|
315
|
+
});
|
|
316
|
+
case "left":
|
|
317
|
+
return __spreadProps(__spreadValues({}, baseOpacity), {
|
|
318
|
+
transform: [
|
|
319
|
+
{
|
|
320
|
+
translateX: contentAnimation.interpolate({
|
|
321
|
+
inputRange: [0, 1],
|
|
322
|
+
outputRange: [-SCREEN_WIDTH, 0]
|
|
323
|
+
})
|
|
324
|
+
}
|
|
325
|
+
]
|
|
326
|
+
});
|
|
327
|
+
case "right":
|
|
328
|
+
return __spreadProps(__spreadValues({}, baseOpacity), {
|
|
329
|
+
transform: [
|
|
330
|
+
{
|
|
331
|
+
translateX: contentAnimation.interpolate({
|
|
332
|
+
inputRange: [0, 1],
|
|
333
|
+
outputRange: [SCREEN_WIDTH, 0]
|
|
334
|
+
})
|
|
335
|
+
}
|
|
336
|
+
]
|
|
337
|
+
});
|
|
338
|
+
default:
|
|
339
|
+
if (animationType === "slide") {
|
|
340
|
+
return __spreadProps(__spreadValues({}, baseOpacity), {
|
|
341
|
+
transform: [
|
|
342
|
+
{
|
|
343
|
+
scale: contentAnimation.interpolate({
|
|
344
|
+
inputRange: [0, 1],
|
|
345
|
+
outputRange: [0.8, 1]
|
|
346
|
+
})
|
|
347
|
+
}
|
|
348
|
+
]
|
|
349
|
+
});
|
|
350
|
+
}
|
|
351
|
+
return baseOpacity;
|
|
352
|
+
}
|
|
353
|
+
};
|
|
354
|
+
if (!isOpen) return null;
|
|
355
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
356
|
+
import_react_native2.Modal,
|
|
357
|
+
{
|
|
358
|
+
visible: isOpen,
|
|
359
|
+
transparent: true,
|
|
360
|
+
animationType: "none",
|
|
361
|
+
onRequestClose: handleClose,
|
|
362
|
+
statusBarTranslucent: true,
|
|
363
|
+
presentationStyle: "overFullScreen",
|
|
364
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.TouchableWithoutFeedback, { onPress: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
365
|
+
import_react_native2.Animated.View,
|
|
366
|
+
{
|
|
367
|
+
style: [
|
|
368
|
+
styles2.backdrop,
|
|
369
|
+
{
|
|
370
|
+
backgroundColor: `rgba(0, 0, 0, ${backdropOpacity})`,
|
|
371
|
+
opacity: backdropAnimation
|
|
372
|
+
}
|
|
373
|
+
],
|
|
374
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.TouchableWithoutFeedback, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
375
|
+
import_react_native2.Animated.View,
|
|
376
|
+
{
|
|
377
|
+
style: [getContainerStyle(), getContentAnimationStyle()],
|
|
378
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
379
|
+
Controller,
|
|
380
|
+
{
|
|
381
|
+
isOpen,
|
|
382
|
+
overlayId,
|
|
383
|
+
modalType,
|
|
384
|
+
backdropOpacity,
|
|
385
|
+
animationType,
|
|
386
|
+
swipeDirection,
|
|
387
|
+
close: () => overlayDispatch({ type: "CLOSE", overlayId }),
|
|
388
|
+
unmount: () => overlayDispatch({ type: "REMOVE", overlayId })
|
|
389
|
+
}
|
|
390
|
+
)
|
|
391
|
+
}
|
|
392
|
+
) })
|
|
393
|
+
}
|
|
394
|
+
) })
|
|
395
|
+
}
|
|
396
|
+
);
|
|
397
|
+
}
|
|
398
|
+
);
|
|
399
|
+
var styles2 = import_react_native2.StyleSheet.create({
|
|
400
|
+
backdrop: {
|
|
401
|
+
flex: 1,
|
|
402
|
+
backgroundColor: "rgba(0, 0, 0, 0.5)"
|
|
403
|
+
},
|
|
404
|
+
centerContainer: {
|
|
405
|
+
flex: 1,
|
|
406
|
+
justifyContent: "center",
|
|
407
|
+
alignItems: "center",
|
|
408
|
+
paddingHorizontal: 20
|
|
409
|
+
},
|
|
410
|
+
bottomContainer: {
|
|
411
|
+
flex: 1,
|
|
412
|
+
justifyContent: "flex-end"
|
|
413
|
+
},
|
|
414
|
+
topContainer: {
|
|
415
|
+
flex: 1,
|
|
416
|
+
justifyContent: "flex-start"
|
|
417
|
+
},
|
|
418
|
+
leftContainer: {
|
|
419
|
+
flex: 1,
|
|
420
|
+
justifyContent: "center",
|
|
421
|
+
alignItems: "flex-start"
|
|
422
|
+
},
|
|
423
|
+
rightContainer: {
|
|
424
|
+
flex: 1,
|
|
425
|
+
justifyContent: "center",
|
|
426
|
+
alignItems: "flex-end"
|
|
427
|
+
}
|
|
428
|
+
});
|
|
429
|
+
|
|
430
|
+
// src/utils/create-use-external-events.ts
|
|
431
|
+
var import_react4 = require("react");
|
|
432
|
+
|
|
433
|
+
// src/utils/emitter.ts
|
|
434
|
+
function createEmitter(all) {
|
|
435
|
+
all = all || /* @__PURE__ */ new Map();
|
|
436
|
+
return {
|
|
437
|
+
all,
|
|
438
|
+
on(type, handler) {
|
|
439
|
+
const handlers = all.get(type);
|
|
440
|
+
if (handlers) {
|
|
441
|
+
handlers.push(handler);
|
|
442
|
+
} else {
|
|
443
|
+
all.set(type, [handler]);
|
|
444
|
+
}
|
|
445
|
+
},
|
|
446
|
+
off(type, handler) {
|
|
447
|
+
const handlers = all.get(type);
|
|
448
|
+
if (handlers) {
|
|
449
|
+
if (handler) {
|
|
450
|
+
handlers.splice(handlers.indexOf(handler) >>> 0, 1);
|
|
451
|
+
} else {
|
|
452
|
+
all.set(type, []);
|
|
453
|
+
}
|
|
454
|
+
}
|
|
455
|
+
},
|
|
456
|
+
emit(type, evt) {
|
|
457
|
+
let handlers = all.get(type);
|
|
458
|
+
if (handlers) {
|
|
459
|
+
handlers.slice().forEach((handler) => {
|
|
460
|
+
handler(evt);
|
|
461
|
+
});
|
|
462
|
+
}
|
|
463
|
+
handlers = all.get("*");
|
|
464
|
+
if (handlers) {
|
|
465
|
+
handlers.slice().forEach((handler) => {
|
|
466
|
+
handler(type, evt);
|
|
467
|
+
});
|
|
468
|
+
}
|
|
469
|
+
}
|
|
470
|
+
};
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
// src/utils/create-use-external-events.ts
|
|
474
|
+
var emitter = createEmitter();
|
|
475
|
+
function useClientEffect(...args) {
|
|
476
|
+
(0, import_react4.useEffect)(...args);
|
|
477
|
+
}
|
|
478
|
+
function dispatchEvent(type, detail) {
|
|
479
|
+
emitter.emit(type, detail);
|
|
480
|
+
}
|
|
481
|
+
function createUseExternalEvents(prefix) {
|
|
482
|
+
function useExternalEvents(events) {
|
|
483
|
+
const handlers = Object.keys(events).reduce(
|
|
484
|
+
(prev, eventKey) => {
|
|
485
|
+
const currentEventKeys = `${prefix}:${eventKey}`;
|
|
486
|
+
return __spreadProps(__spreadValues({}, prev), {
|
|
487
|
+
[currentEventKeys]: function(event) {
|
|
488
|
+
events[eventKey](event);
|
|
489
|
+
}
|
|
490
|
+
});
|
|
491
|
+
},
|
|
492
|
+
{}
|
|
493
|
+
);
|
|
494
|
+
useClientEffect(() => {
|
|
495
|
+
Object.keys(handlers).forEach((eventKey) => {
|
|
496
|
+
emitter.off(eventKey, handlers[eventKey]);
|
|
497
|
+
emitter.on(eventKey, handlers[eventKey]);
|
|
498
|
+
});
|
|
499
|
+
return () => Object.keys(handlers).forEach((eventKey) => {
|
|
500
|
+
emitter.off(eventKey, handlers[eventKey]);
|
|
501
|
+
});
|
|
502
|
+
}, [handlers]);
|
|
503
|
+
}
|
|
504
|
+
function createEvent(event) {
|
|
505
|
+
return (...payload) => dispatchEvent(`${prefix}:${String(event)}`, payload[0]);
|
|
506
|
+
}
|
|
507
|
+
return [useExternalEvents, createEvent];
|
|
508
|
+
}
|
|
509
|
+
|
|
510
|
+
// src/utils/random-id.ts
|
|
511
|
+
function randomId() {
|
|
512
|
+
return `overlay-kit-${Math.random().toString(36).slice(2, 11)}`;
|
|
513
|
+
}
|
|
514
|
+
|
|
515
|
+
// src/event.ts
|
|
516
|
+
function createOverlay(overlayId) {
|
|
517
|
+
const [useOverlayEvent, createEvent] = createUseExternalEvents(
|
|
518
|
+
`${overlayId}/overlay-kit`
|
|
519
|
+
);
|
|
520
|
+
const open = (controller, options) => {
|
|
521
|
+
var _a, _b;
|
|
522
|
+
const overlayId2 = (_a = options == null ? void 0 : options.overlayId) != null ? _a : randomId();
|
|
523
|
+
const componentKey = randomId();
|
|
524
|
+
const overlayType = (_b = options == null ? void 0 : options.overlayType) != null ? _b : "overlay";
|
|
525
|
+
const dispatchOpenEvent = createEvent("open");
|
|
526
|
+
const _c = options || {}, { overlayId: _, overlayType: __ } = _c, restOptions = __objRest(_c, ["overlayId", "overlayType"]);
|
|
527
|
+
dispatchOpenEvent({
|
|
528
|
+
controller,
|
|
529
|
+
overlayId: overlayId2,
|
|
530
|
+
componentKey,
|
|
531
|
+
overlayType,
|
|
532
|
+
options: restOptions
|
|
533
|
+
});
|
|
534
|
+
return overlayId2;
|
|
535
|
+
};
|
|
536
|
+
const openAsync = async (controller, options) => {
|
|
537
|
+
return new Promise((resolve) => {
|
|
538
|
+
const wrappedController = (overlayProps, ...deprecatedLegacyContext) => {
|
|
539
|
+
const close2 = (param) => {
|
|
540
|
+
resolve(param);
|
|
541
|
+
overlayProps.close();
|
|
542
|
+
};
|
|
543
|
+
const unmount2 = (param) => {
|
|
544
|
+
resolve(param);
|
|
545
|
+
overlayProps.unmount();
|
|
546
|
+
};
|
|
547
|
+
const props = __spreadProps(__spreadValues({}, overlayProps), { close: close2, unmount: unmount2 });
|
|
548
|
+
return controller(props);
|
|
549
|
+
};
|
|
550
|
+
open(wrappedController, options);
|
|
551
|
+
});
|
|
552
|
+
};
|
|
553
|
+
const close = createEvent("close");
|
|
554
|
+
const unmount = createEvent("unmount");
|
|
555
|
+
const closeAll = createEvent("closeAll");
|
|
556
|
+
const unmountAll = createEvent("unmountAll");
|
|
557
|
+
return {
|
|
558
|
+
open,
|
|
559
|
+
openAsync,
|
|
560
|
+
close,
|
|
561
|
+
unmount,
|
|
562
|
+
closeAll,
|
|
563
|
+
unmountAll,
|
|
564
|
+
useOverlayEvent
|
|
565
|
+
};
|
|
566
|
+
}
|
|
567
|
+
|
|
568
|
+
// src/utils/create-safe-context.ts
|
|
569
|
+
var import_react5 = require("react");
|
|
570
|
+
var NullSymbol = Symbol("Null");
|
|
571
|
+
function createSafeContext(displayName) {
|
|
572
|
+
const Context = (0, import_react5.createContext)(NullSymbol);
|
|
573
|
+
Context.displayName = displayName != null ? displayName : "SafeContext";
|
|
574
|
+
function useSafeContext() {
|
|
575
|
+
const context = (0, import_react5.useContext)(Context);
|
|
576
|
+
if (context === NullSymbol) {
|
|
577
|
+
const error = new Error(`[${Context.displayName}]: Provider not found.`);
|
|
578
|
+
error.name = "[Error] Context";
|
|
579
|
+
throw error;
|
|
580
|
+
}
|
|
581
|
+
return context;
|
|
582
|
+
}
|
|
583
|
+
return [Context.Provider, useSafeContext];
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
// src/context/context.ts
|
|
587
|
+
function createOverlaySafeContext() {
|
|
588
|
+
const [OverlayContextProvider, useOverlayContext] = createSafeContext("overlay-kit/OverlayContext");
|
|
589
|
+
function useCurrentOverlay2() {
|
|
590
|
+
return useOverlayContext().current;
|
|
591
|
+
}
|
|
592
|
+
function useOverlayData2() {
|
|
593
|
+
return useOverlayContext().overlayData;
|
|
594
|
+
}
|
|
595
|
+
return { OverlayContextProvider, useCurrentOverlay: useCurrentOverlay2, useOverlayData: useOverlayData2 };
|
|
596
|
+
}
|
|
597
|
+
|
|
598
|
+
// src/context/reducer.ts
|
|
599
|
+
var determineCurrentOverlayId = (overlayOrderList, overlayData, targetOverlayId) => {
|
|
600
|
+
var _a, _b;
|
|
601
|
+
const openedOverlayOrderList = overlayOrderList.filter(
|
|
602
|
+
(orderedOverlayId) => overlayData[orderedOverlayId].isOpen === true
|
|
603
|
+
);
|
|
604
|
+
const targetIndexInOpenedList = openedOverlayOrderList.findIndex((item) => item === targetOverlayId);
|
|
605
|
+
return targetIndexInOpenedList === openedOverlayOrderList.length - 1 ? (_a = openedOverlayOrderList[targetIndexInOpenedList - 1]) != null ? _a : null : (_b = openedOverlayOrderList[openedOverlayOrderList.length - 1]) != null ? _b : null;
|
|
606
|
+
};
|
|
607
|
+
function overlayReducer(state, action) {
|
|
608
|
+
switch (action.type) {
|
|
609
|
+
case "ADD": {
|
|
610
|
+
if (state.overlayData[action.overlay.id] != null && state.overlayData[action.overlay.id].isOpen === false) {
|
|
611
|
+
const overlay2 = state.overlayData[action.overlay.id];
|
|
612
|
+
if (overlay2 == null || overlay2.isOpen) {
|
|
613
|
+
return state;
|
|
614
|
+
}
|
|
615
|
+
return __spreadProps(__spreadValues({}, state), {
|
|
616
|
+
current: action.overlay.id,
|
|
617
|
+
overlayData: __spreadProps(__spreadValues({}, state.overlayData), {
|
|
618
|
+
[action.overlay.id]: __spreadProps(__spreadValues({}, overlay2), { isOpen: true })
|
|
619
|
+
})
|
|
620
|
+
});
|
|
621
|
+
}
|
|
622
|
+
const isExisted = state.overlayOrderList.includes(action.overlay.id);
|
|
623
|
+
if (isExisted && state.overlayData[action.overlay.id].isOpen === true) {
|
|
624
|
+
throw new Error(
|
|
625
|
+
`You can't open the multiple overlays with the same overlayId(${action.overlay.id}). Please set a different id.`
|
|
626
|
+
);
|
|
627
|
+
}
|
|
628
|
+
return {
|
|
629
|
+
current: action.overlay.id,
|
|
630
|
+
/**
|
|
631
|
+
* @description Brings the overlay to the front when reopened after closing without unmounting.
|
|
632
|
+
*/
|
|
633
|
+
overlayOrderList: [...state.overlayOrderList.filter((item) => item !== action.overlay.id), action.overlay.id],
|
|
634
|
+
overlayData: isExisted ? state.overlayData : __spreadProps(__spreadValues({}, state.overlayData), {
|
|
635
|
+
[action.overlay.id]: action.overlay
|
|
636
|
+
})
|
|
637
|
+
};
|
|
638
|
+
}
|
|
639
|
+
case "OPEN": {
|
|
640
|
+
const overlay2 = state.overlayData[action.overlayId];
|
|
641
|
+
if (overlay2 == null || overlay2.isOpen) {
|
|
642
|
+
return state;
|
|
643
|
+
}
|
|
644
|
+
return __spreadProps(__spreadValues({}, state), {
|
|
645
|
+
overlayData: __spreadProps(__spreadValues({}, state.overlayData), {
|
|
646
|
+
[action.overlayId]: __spreadProps(__spreadValues({}, overlay2), { isOpen: true, isMounted: true })
|
|
647
|
+
})
|
|
648
|
+
});
|
|
649
|
+
}
|
|
650
|
+
case "CLOSE": {
|
|
651
|
+
const overlay2 = state.overlayData[action.overlayId];
|
|
652
|
+
if (overlay2 == null || !overlay2.isOpen) {
|
|
653
|
+
return state;
|
|
654
|
+
}
|
|
655
|
+
const currentOverlayId = determineCurrentOverlayId(state.overlayOrderList, state.overlayData, action.overlayId);
|
|
656
|
+
return __spreadProps(__spreadValues({}, state), {
|
|
657
|
+
current: currentOverlayId,
|
|
658
|
+
overlayData: __spreadProps(__spreadValues({}, state.overlayData), {
|
|
659
|
+
[action.overlayId]: __spreadProps(__spreadValues({}, state.overlayData[action.overlayId]), {
|
|
660
|
+
isOpen: false
|
|
661
|
+
})
|
|
662
|
+
})
|
|
663
|
+
});
|
|
664
|
+
}
|
|
665
|
+
case "REMOVE": {
|
|
666
|
+
const overlay2 = state.overlayData[action.overlayId];
|
|
667
|
+
if (overlay2 == null) {
|
|
668
|
+
return state;
|
|
669
|
+
}
|
|
670
|
+
const remainingOverlays = state.overlayOrderList.filter((item) => item !== action.overlayId);
|
|
671
|
+
if (state.overlayOrderList.length === remainingOverlays.length) {
|
|
672
|
+
return state;
|
|
673
|
+
}
|
|
674
|
+
const copiedOverlayData = __spreadValues({}, state.overlayData);
|
|
675
|
+
delete copiedOverlayData[action.overlayId];
|
|
676
|
+
const currentOverlayId = determineCurrentOverlayId(state.overlayOrderList, state.overlayData, action.overlayId);
|
|
677
|
+
return {
|
|
678
|
+
current: currentOverlayId,
|
|
679
|
+
overlayOrderList: remainingOverlays,
|
|
680
|
+
overlayData: copiedOverlayData
|
|
681
|
+
};
|
|
682
|
+
}
|
|
683
|
+
case "CLOSE_ALL": {
|
|
684
|
+
if (Object.keys(state.overlayData).length === 0) {
|
|
685
|
+
return state;
|
|
686
|
+
}
|
|
687
|
+
return __spreadProps(__spreadValues({}, state), {
|
|
688
|
+
current: null,
|
|
689
|
+
overlayData: Object.keys(state.overlayData).reduce(
|
|
690
|
+
(prev, curr) => __spreadProps(__spreadValues({}, prev), {
|
|
691
|
+
[curr]: __spreadProps(__spreadValues({}, state.overlayData[curr]), {
|
|
692
|
+
isOpen: false
|
|
693
|
+
})
|
|
694
|
+
}),
|
|
695
|
+
{}
|
|
696
|
+
)
|
|
697
|
+
});
|
|
698
|
+
}
|
|
699
|
+
case "REMOVE_ALL": {
|
|
700
|
+
return { current: null, overlayOrderList: [], overlayData: {} };
|
|
701
|
+
}
|
|
702
|
+
}
|
|
703
|
+
}
|
|
704
|
+
|
|
705
|
+
// src/context/provider/index.tsx
|
|
706
|
+
var import_react_native_gesture_handler = require("react-native-gesture-handler");
|
|
707
|
+
var import_bottom_sheet2 = require("@gorhom/bottom-sheet");
|
|
708
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
709
|
+
function createOverlayProvider() {
|
|
710
|
+
const overlayId = randomId();
|
|
711
|
+
const _a = createOverlay(overlayId), { useOverlayEvent } = _a, overlay2 = __objRest(_a, ["useOverlayEvent"]);
|
|
712
|
+
const { OverlayContextProvider, useCurrentOverlay: useCurrentOverlay2, useOverlayData: useOverlayData2 } = createOverlaySafeContext();
|
|
713
|
+
function OverlayProvider2({ children }) {
|
|
714
|
+
const [overlayState, overlayDispatch] = (0, import_react6.useReducer)(overlayReducer, {
|
|
715
|
+
current: null,
|
|
716
|
+
overlayOrderList: [],
|
|
717
|
+
overlayData: {}
|
|
718
|
+
});
|
|
719
|
+
const overlayOpen = (0, import_react6.useCallback)(
|
|
720
|
+
({
|
|
721
|
+
controller,
|
|
722
|
+
overlayId: overlayId2,
|
|
723
|
+
componentKey,
|
|
724
|
+
overlayType = "overlay",
|
|
725
|
+
options
|
|
726
|
+
}) => {
|
|
727
|
+
overlayDispatch({
|
|
728
|
+
type: "ADD",
|
|
729
|
+
overlay: {
|
|
730
|
+
id: overlayId2,
|
|
731
|
+
componentKey,
|
|
732
|
+
isOpen: true,
|
|
733
|
+
isMounted: true,
|
|
734
|
+
controller,
|
|
735
|
+
overlayType,
|
|
736
|
+
options
|
|
737
|
+
}
|
|
738
|
+
});
|
|
739
|
+
},
|
|
740
|
+
[]
|
|
741
|
+
);
|
|
742
|
+
const close = (0, import_react6.useCallback)((overlayId2) => {
|
|
743
|
+
overlayDispatch({ type: "CLOSE", overlayId: overlayId2 });
|
|
744
|
+
}, []);
|
|
745
|
+
const unmount = (0, import_react6.useCallback)((overlayId2) => {
|
|
746
|
+
overlayDispatch({ type: "REMOVE", overlayId: overlayId2 });
|
|
747
|
+
}, []);
|
|
748
|
+
const closeAll = (0, import_react6.useCallback)(() => {
|
|
749
|
+
overlayDispatch({ type: "CLOSE_ALL" });
|
|
750
|
+
}, []);
|
|
751
|
+
const unmountAll = (0, import_react6.useCallback)(() => {
|
|
752
|
+
overlayDispatch({ type: "REMOVE_ALL" });
|
|
753
|
+
}, []);
|
|
754
|
+
useOverlayEvent({
|
|
755
|
+
open: overlayOpen,
|
|
756
|
+
close,
|
|
757
|
+
unmount,
|
|
758
|
+
closeAll,
|
|
759
|
+
unmountAll
|
|
760
|
+
});
|
|
761
|
+
(0, import_react6.useEffect)(() => {
|
|
762
|
+
return () => {
|
|
763
|
+
overlayDispatch({ type: "REMOVE_ALL" });
|
|
764
|
+
};
|
|
765
|
+
}, []);
|
|
766
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_gesture_handler.GestureHandlerRootView, { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_bottom_sheet2.BottomSheetModalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(OverlayContextProvider, { value: overlayState, children: [
|
|
767
|
+
children,
|
|
768
|
+
overlayState.overlayOrderList.map((item) => {
|
|
769
|
+
const overlayItem = overlayState.overlayData[item];
|
|
770
|
+
const {
|
|
771
|
+
id: currentOverlayId,
|
|
772
|
+
componentKey,
|
|
773
|
+
isOpen,
|
|
774
|
+
controller: Controller,
|
|
775
|
+
overlayType,
|
|
776
|
+
options
|
|
777
|
+
} = overlayItem;
|
|
778
|
+
if (overlayType === "bottomSheet") {
|
|
779
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
780
|
+
ContentBottomSheetController,
|
|
781
|
+
{
|
|
782
|
+
isOpen,
|
|
783
|
+
controller: Controller,
|
|
784
|
+
overlayId: currentOverlayId,
|
|
785
|
+
overlayDispatch,
|
|
786
|
+
options
|
|
787
|
+
},
|
|
788
|
+
componentKey
|
|
789
|
+
);
|
|
790
|
+
} else if (overlayType === "modal") {
|
|
791
|
+
const isCurrentModal = overlayState.current === currentOverlayId;
|
|
792
|
+
const shouldShow = isOpen && isCurrentModal;
|
|
793
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
794
|
+
ContentModalController,
|
|
795
|
+
{
|
|
796
|
+
isOpen: shouldShow,
|
|
797
|
+
controller: Controller,
|
|
798
|
+
overlayId: currentOverlayId,
|
|
799
|
+
overlayDispatch,
|
|
800
|
+
options
|
|
801
|
+
},
|
|
802
|
+
componentKey
|
|
803
|
+
);
|
|
804
|
+
} else {
|
|
805
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
806
|
+
ContentOverlayController,
|
|
807
|
+
{
|
|
808
|
+
isOpen,
|
|
809
|
+
controller: Controller,
|
|
810
|
+
overlayId: currentOverlayId,
|
|
811
|
+
overlayDispatch
|
|
812
|
+
},
|
|
813
|
+
componentKey
|
|
814
|
+
);
|
|
815
|
+
}
|
|
816
|
+
})
|
|
817
|
+
] }) }) });
|
|
818
|
+
}
|
|
819
|
+
return {
|
|
820
|
+
overlay: overlay2,
|
|
821
|
+
OverlayProvider: OverlayProvider2,
|
|
822
|
+
useCurrentOverlay: useCurrentOverlay2,
|
|
823
|
+
useOverlayData: useOverlayData2
|
|
824
|
+
};
|
|
825
|
+
}
|
|
826
|
+
|
|
827
|
+
// src/utils/create-overlay-context.tsx
|
|
828
|
+
var { overlay, OverlayProvider, useCurrentOverlay, useOverlayData } = createOverlayProvider();
|
|
829
|
+
function experimental_createOverlayContext() {
|
|
830
|
+
return createOverlayProvider();
|
|
831
|
+
}
|
|
832
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
833
|
+
0 && (module.exports = {
|
|
834
|
+
OverlayProvider,
|
|
835
|
+
createUseExternalEvents,
|
|
836
|
+
experimental_createOverlayContext,
|
|
837
|
+
overlay,
|
|
838
|
+
useCurrentOverlay,
|
|
839
|
+
useOverlayData
|
|
840
|
+
});
|
|
841
|
+
//# sourceMappingURL=index.js.map
|