@mustmove/overlay-kit-rn 1.0.30 → 1.0.32

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.
Files changed (7) hide show
  1. package/dist/index.d.mts +2 -2
  2. package/dist/index.d.ts +2 -2
  3. package/dist/index.js +90 -71
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +92 -74
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -18,7 +18,7 @@ declare const overlay: {
18
18
  animationType?: "none" | "slide" | "fade" | "bounceIn" | "bounceInDown" | "bounceInUp" | "bounceInLeft" | "bounceInRight" | "bounceOut" | "bounceOutDown" | "bounceOutUp" | "bounceOutLeft" | "bounceOutRight" | "fadeIn" | "fadeInDown" | "fadeInDownBig" | "fadeInUp" | "fadeInUpBig" | "fadeInLeft" | "fadeInLeftBig" | "fadeInRight" | "fadeInRightBig" | "fadeOut" | "fadeOutDown" | "fadeOutDownBig" | "fadeOutUp" | "fadeOutUpBig" | "fadeOutLeft" | "fadeOutLeftBig" | "fadeOutRight" | "fadeOutRightBig";
19
19
  swipeDirection?: "up" | "down" | "left" | "right" | Array<"up" | "down" | "left" | "right">;
20
20
  }) => string;
21
- openAsync: <T>(controller: OverlayAsyncControllerComponent<T> | BottomSheetControllerComponent | ModalControllerComponent | ((props: any) => any), options?: {
21
+ openAsync: <T>(controller: OverlayAsyncControllerComponent<T> | BottomSheetControllerComponent | ModalControllerComponent | React.ReactElement | ((props: any) => any), options?: {
22
22
  overlayId?: string;
23
23
  overlayType?: "overlay" | "bottomSheet" | "modal";
24
24
  snapPoints?: (string | number)[];
@@ -64,7 +64,7 @@ declare function experimental_createOverlayContext(): {
64
64
  animationType?: "none" | "slide" | "fade" | "bounceIn" | "bounceInDown" | "bounceInUp" | "bounceInLeft" | "bounceInRight" | "bounceOut" | "bounceOutDown" | "bounceOutUp" | "bounceOutLeft" | "bounceOutRight" | "fadeIn" | "fadeInDown" | "fadeInDownBig" | "fadeInUp" | "fadeInUpBig" | "fadeInLeft" | "fadeInLeftBig" | "fadeInRight" | "fadeInRightBig" | "fadeOut" | "fadeOutDown" | "fadeOutDownBig" | "fadeOutUp" | "fadeOutUpBig" | "fadeOutLeft" | "fadeOutLeftBig" | "fadeOutRight" | "fadeOutRightBig";
65
65
  swipeDirection?: "up" | "down" | "left" | "right" | Array<"up" | "down" | "left" | "right">;
66
66
  }) => string;
67
- openAsync: <T>(controller: OverlayAsyncControllerComponent<T> | BottomSheetControllerComponent | ModalControllerComponent | ((props: any) => any), options?: {
67
+ openAsync: <T>(controller: OverlayAsyncControllerComponent<T> | BottomSheetControllerComponent | ModalControllerComponent | React.ReactElement | ((props: any) => any), options?: {
68
68
  overlayId?: string;
69
69
  overlayType?: "overlay" | "bottomSheet" | "modal";
70
70
  snapPoints?: (string | number)[];
package/dist/index.d.ts CHANGED
@@ -18,7 +18,7 @@ declare const overlay: {
18
18
  animationType?: "none" | "slide" | "fade" | "bounceIn" | "bounceInDown" | "bounceInUp" | "bounceInLeft" | "bounceInRight" | "bounceOut" | "bounceOutDown" | "bounceOutUp" | "bounceOutLeft" | "bounceOutRight" | "fadeIn" | "fadeInDown" | "fadeInDownBig" | "fadeInUp" | "fadeInUpBig" | "fadeInLeft" | "fadeInLeftBig" | "fadeInRight" | "fadeInRightBig" | "fadeOut" | "fadeOutDown" | "fadeOutDownBig" | "fadeOutUp" | "fadeOutUpBig" | "fadeOutLeft" | "fadeOutLeftBig" | "fadeOutRight" | "fadeOutRightBig";
19
19
  swipeDirection?: "up" | "down" | "left" | "right" | Array<"up" | "down" | "left" | "right">;
20
20
  }) => string;
21
- openAsync: <T>(controller: OverlayAsyncControllerComponent<T> | BottomSheetControllerComponent | ModalControllerComponent | ((props: any) => any), options?: {
21
+ openAsync: <T>(controller: OverlayAsyncControllerComponent<T> | BottomSheetControllerComponent | ModalControllerComponent | React.ReactElement | ((props: any) => any), options?: {
22
22
  overlayId?: string;
23
23
  overlayType?: "overlay" | "bottomSheet" | "modal";
24
24
  snapPoints?: (string | number)[];
@@ -64,7 +64,7 @@ declare function experimental_createOverlayContext(): {
64
64
  animationType?: "none" | "slide" | "fade" | "bounceIn" | "bounceInDown" | "bounceInUp" | "bounceInLeft" | "bounceInRight" | "bounceOut" | "bounceOutDown" | "bounceOutUp" | "bounceOutLeft" | "bounceOutRight" | "fadeIn" | "fadeInDown" | "fadeInDownBig" | "fadeInUp" | "fadeInUpBig" | "fadeInLeft" | "fadeInLeftBig" | "fadeInRight" | "fadeInRightBig" | "fadeOut" | "fadeOutDown" | "fadeOutDownBig" | "fadeOutUp" | "fadeOutUpBig" | "fadeOutLeft" | "fadeOutLeftBig" | "fadeOutRight" | "fadeOutRightBig";
65
65
  swipeDirection?: "up" | "down" | "left" | "right" | Array<"up" | "down" | "left" | "right">;
66
66
  }) => string;
67
- openAsync: <T>(controller: OverlayAsyncControllerComponent<T> | BottomSheetControllerComponent | ModalControllerComponent | ((props: any) => any), options?: {
67
+ openAsync: <T>(controller: OverlayAsyncControllerComponent<T> | BottomSheetControllerComponent | ModalControllerComponent | React.ReactElement | ((props: any) => any), options?: {
68
68
  overlayId?: string;
69
69
  overlayType?: "overlay" | "bottomSheet" | "modal";
70
70
  snapPoints?: (string | number)[];
package/dist/index.js CHANGED
@@ -100,9 +100,10 @@ var ContentOverlayController = (0, import_react.memo)(
100
100
 
101
101
  // src/context/provider/bottom-sheet-controller.tsx
102
102
  var import_react2 = __toESM(require("react"));
103
- var import_bottom_sheet = require("@gorhom/bottom-sheet");
103
+ var import_bottom_sheet = __toESM(require("@gorhom/bottom-sheet"));
104
104
  var import_react_native = require("react-native");
105
105
  var import_react_native_reanimated = require("react-native-reanimated");
106
+ var import_portal = require("@gorhom/portal");
106
107
  var import_jsx_runtime2 = require("react/jsx-runtime");
107
108
  var ContentBottomSheetController = (0, import_react2.memo)(
108
109
  ({
@@ -118,7 +119,7 @@ var ContentBottomSheetController = (0, import_react2.memo)(
118
119
  const [keyboardHeight, setKeyboardHeight] = (0, import_react2.useState)(0);
119
120
  const getZIndex = () => {
120
121
  const index = overlayOrderList.indexOf(overlayId);
121
- return 9999 + index;
122
+ return 1e3 + index;
122
123
  };
123
124
  const _a = options, {
124
125
  snapPoints,
@@ -164,12 +165,12 @@ var ContentBottomSheetController = (0, import_react2.memo)(
164
165
  if (isOpen) {
165
166
  const rafId = requestAnimationFrame(() => {
166
167
  var _a3;
167
- (_a3 = bottomSheetRef.current) == null ? void 0 : _a3.present();
168
+ (_a3 = bottomSheetRef.current) == null ? void 0 : _a3.expand();
168
169
  overlayDispatch({ type: "OPEN", overlayId });
169
170
  });
170
171
  return () => cancelAnimationFrame(rafId);
171
172
  } else {
172
- (_a2 = bottomSheetRef.current) == null ? void 0 : _a2.dismiss();
173
+ (_a2 = bottomSheetRef.current) == null ? void 0 : _a2.close();
173
174
  }
174
175
  }, [isOpen, overlayDispatch, overlayId]);
175
176
  const handleClose = (0, import_react2.useCallback)(() => {
@@ -192,9 +193,12 @@ var ContentBottomSheetController = (0, import_react2.memo)(
192
193
  );
193
194
  const handleSheetChange = (0, import_react2.useCallback)((index) => {
194
195
  }, []);
196
+ const getLayerIndex = () => {
197
+ return Math.max(0, overlayOrderList.indexOf(overlayId));
198
+ };
195
199
  if (!isOpen) return null;
196
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
197
- import_bottom_sheet.BottomSheetModal,
200
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_portal.Portal, { hostName: `overlay-modal-${getLayerIndex()}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
201
+ import_bottom_sheet.default,
198
202
  {
199
203
  style: [{ zIndex: getZIndex() }],
200
204
  ref: bottomSheetRef,
@@ -203,7 +207,7 @@ var ContentBottomSheetController = (0, import_react2.memo)(
203
207
  keyboardBehavior,
204
208
  snapPoints: enableDynamicSizing ? void 0 : snapPoints,
205
209
  enablePanDownToClose,
206
- onDismiss: handleClose,
210
+ onClose: handleClose,
207
211
  keyboardBlurBehavior,
208
212
  index: 0,
209
213
  backdropComponent: enableBackdrop ? renderBackdrop : void 0,
@@ -237,13 +241,14 @@ var ContentBottomSheetController = (0, import_react2.memo)(
237
241
  keyboardHeight
238
242
  }, restOptions))
239
243
  }
240
- );
244
+ ) });
241
245
  }
242
246
  );
243
247
 
244
248
  // src/context/provider/modal-controller.tsx
245
249
  var import_react3 = __toESM(require("react"));
246
250
  var import_react_native2 = require("react-native");
251
+ var import_portal2 = require("@gorhom/portal");
247
252
  var import_jsx_runtime3 = require("react/jsx-runtime");
248
253
  var { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = import_react_native2.Dimensions.get("window");
249
254
  var ContentModalController = (0, import_react3.memo)(
@@ -263,12 +268,10 @@ var ContentModalController = (0, import_react3.memo)(
263
268
  } = options;
264
269
  const [backdropAnimation] = (0, import_react3.useState)(new import_react_native2.Animated.Value(0));
265
270
  const [contentAnimation] = (0, import_react3.useState)(new import_react_native2.Animated.Value(0));
266
- const getZIndex = () => {
267
- const index = overlayOrderList.indexOf(overlayId);
268
- return 1e3 + index;
269
- };
271
+ const [mounted, setMounted] = (0, import_react3.useState)(isOpen);
270
272
  (0, import_react3.useEffect)(() => {
271
273
  if (isOpen) {
274
+ if (!mounted) setMounted(true);
272
275
  setImmediate(() => {
273
276
  overlayDispatch({ type: "OPEN", overlayId });
274
277
  });
@@ -296,18 +299,17 @@ var ContentModalController = (0, import_react3.memo)(
296
299
  duration: 200,
297
300
  useNativeDriver: true
298
301
  })
299
- ]).start();
302
+ ]).start(() => {
303
+ setMounted(false);
304
+ });
300
305
  }
301
- }, [
302
- isOpen,
303
- overlayDispatch,
304
- overlayId,
305
- backdropAnimation,
306
- contentAnimation
307
- ]);
306
+ }, [isOpen]);
308
307
  const handleClose = () => {
309
308
  overlayDispatch({ type: "CLOSE", overlayId });
310
309
  };
310
+ const getLayerIndex = () => {
311
+ return Math.max(0, overlayOrderList.indexOf(overlayId));
312
+ };
311
313
  const getContainerStyle = () => {
312
314
  switch (modalType) {
313
315
  case "bottom":
@@ -385,55 +387,59 @@ var ContentModalController = (0, import_react3.memo)(
385
387
  return baseOpacity;
386
388
  }
387
389
  };
388
- const isCovered = !!(options == null ? void 0 : options.coveredByBottomSheet);
389
- const isHidden = isCovered;
390
- if (!isOpen) return null;
391
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
390
+ if (!mounted) return null;
391
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_portal2.Portal, { hostName: `overlay-modal-${getLayerIndex()}`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
392
392
  import_react_native2.View,
393
393
  {
394
- style: [
395
- styles.absoluteContainer,
396
- { zIndex: getZIndex(), display: isHidden ? "none" : "flex" }
397
- ],
398
- pointerEvents: "box-none",
399
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.Pressable, { style: import_react_native2.StyleSheet.absoluteFill, onPress: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
400
- import_react_native2.Animated.View,
401
- {
402
- style: [
403
- styles.backdrop,
404
- {
405
- backgroundColor: `rgba(0, 0, 0, ${backdropOpacity})`,
406
- opacity: isHidden ? 0 : backdropAnimation
407
- }
408
- ],
409
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.View, { style: import_react_native2.StyleSheet.absoluteFill, pointerEvents: "box-none", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
410
- import_react_native2.Animated.View,
411
- {
412
- style: [getContainerStyle(), getContentAnimationStyle()],
413
- pointerEvents: "box-none",
414
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.Pressable, { onPress: () => {
415
- }, children: import_react3.default.isValidElement(Controller) ? import_react3.default.cloneElement(
416
- Controller,
417
- {
418
- close: () => overlayDispatch({ type: "CLOSE", overlayId }),
419
- unmount: () => overlayDispatch({ type: "REMOVE", overlayId })
420
- }
421
- ) : import_react3.default.createElement(Controller, {
422
- isOpen,
423
- overlayId,
424
- modalType,
425
- backdropOpacity,
426
- animationType,
427
- swipeDirection,
428
- close: () => overlayDispatch({ type: "CLOSE", overlayId }),
429
- unmount: () => overlayDispatch({ type: "REMOVE", overlayId })
430
- }) })
431
- }
432
- ) })
433
- }
434
- ) })
394
+ style: [styles.absoluteContainer],
395
+ pointerEvents: isOpen ? "box-none" : "none",
396
+ importantForAccessibility: isOpen ? "auto" : "no-hide-descendants",
397
+ children: [
398
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
399
+ import_react_native2.Pressable,
400
+ {
401
+ style: import_react_native2.StyleSheet.absoluteFill,
402
+ onPress: handleClose,
403
+ disabled: !isOpen,
404
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
405
+ import_react_native2.Animated.View,
406
+ {
407
+ pointerEvents: "none",
408
+ style: [
409
+ styles.backdrop,
410
+ {
411
+ backgroundColor: `rgba(0, 0, 0, ${backdropOpacity})`,
412
+ opacity: backdropAnimation
413
+ }
414
+ ]
415
+ }
416
+ )
417
+ }
418
+ ),
419
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
420
+ import_react_native2.Animated.View,
421
+ {
422
+ style: [getContainerStyle(), getContentAnimationStyle()],
423
+ pointerEvents: "box-none",
424
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.Pressable, { onPress: () => {
425
+ }, children: import_react3.default.isValidElement(Controller) ? import_react3.default.cloneElement(Controller, {
426
+ close: () => overlayDispatch({ type: "CLOSE", overlayId }),
427
+ unmount: () => overlayDispatch({ type: "REMOVE", overlayId })
428
+ }) : import_react3.default.createElement(Controller, {
429
+ isOpen,
430
+ overlayId,
431
+ modalType,
432
+ backdropOpacity,
433
+ animationType,
434
+ swipeDirection,
435
+ close: () => overlayDispatch({ type: "CLOSE", overlayId }),
436
+ unmount: () => overlayDispatch({ type: "REMOVE", overlayId })
437
+ }) })
438
+ }
439
+ )
440
+ ]
435
441
  }
436
- );
442
+ ) });
437
443
  }
438
444
  );
439
445
  var styles = import_react_native2.StyleSheet.create({
@@ -597,7 +603,13 @@ function createOverlay(overlayId) {
597
603
  overlayProps.unmount();
598
604
  };
599
605
  const props = __spreadProps(__spreadValues({}, overlayProps), { close: close2, unmount: unmount2 });
600
- return controller(props);
606
+ if (import_react5.default.isValidElement(controller)) {
607
+ return import_react5.default.cloneElement(controller, __spreadValues(__spreadValues({}, controller.props || {}), props));
608
+ }
609
+ if (typeof controller === "function") {
610
+ return controller(props);
611
+ }
612
+ return controller;
601
613
  };
602
614
  open(wrappedController, options);
603
615
  });
@@ -757,7 +769,7 @@ function overlayReducer(state, action) {
757
769
  // src/context/provider/index.tsx
758
770
  var import_react_native_gesture_handler = require("react-native-gesture-handler");
759
771
  var import_bottom_sheet2 = require("@gorhom/bottom-sheet");
760
- var import_portal = require("@gorhom/portal");
772
+ var import_portal3 = require("@gorhom/portal");
761
773
  var import_jsx_runtime4 = require("react/jsx-runtime");
762
774
  function createOverlayProvider() {
763
775
  const overlayId = randomId();
@@ -816,7 +828,7 @@ function createOverlayProvider() {
816
828
  overlayDispatch({ type: "REMOVE_ALL" });
817
829
  };
818
830
  }, []);
819
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_gesture_handler.GestureHandlerRootView, { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_portal.PortalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_bottom_sheet2.BottomSheetModalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(OverlayContextProvider, { value: overlayState, children: [
831
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_gesture_handler.GestureHandlerRootView, { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_portal3.PortalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_bottom_sheet2.BottomSheetModalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(OverlayContextProvider, { value: overlayState, children: [
820
832
  children,
821
833
  overlayState.overlayOrderList.map((item) => {
822
834
  const overlayItem = overlayState.overlayData[item];
@@ -847,7 +859,7 @@ function createOverlayProvider() {
847
859
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
848
860
  ContentModalController,
849
861
  {
850
- isOpen: shouldShow,
862
+ isOpen,
851
863
  controller: Controller,
852
864
  overlayId: currentOverlayId,
853
865
  overlayDispatch,
@@ -901,7 +913,14 @@ function createOverlayProvider() {
901
913
  },
902
914
  componentKey
903
915
  );
904
- })
916
+ }),
917
+ overlayState.overlayOrderList.map((id, idx) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
918
+ import_portal3.PortalHost,
919
+ {
920
+ name: `overlay-modal-${idx}`
921
+ },
922
+ `overlay-modal-${idx}`
923
+ ))
905
924
  ] }) }) }) });
906
925
  }
907
926
  return {