@sheinx/base 3.8.0-beta.43 → 3.8.0-beta.44

package/cjs/modal/modal-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-content.d.ts","sourceRoot":"","sources":["modal-content.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAoB9D,QAAA,MAAM,KAAK,UAAW,iBAAiB,mDAiXtC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"modal-content.d.ts","sourceRoot":"","sources":["modal-content.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AA0C9D,QAAA,MAAM,KAAK,UAAW,iBAAiB,mDA0YtC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/cjs/modal/modal-content.js

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _alertIcon = _interopRequireWildcard(require("../alert/alert-icon"));
 var _icons = _interopRequireDefault(require("../icons"));
 var _hooks = require("@sheinx/hooks");
+var _reactive = require("@shined/reactive");
 var _formFooterContext = require("../form/form-footer-context");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -27,6 +28,21 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var hasMask = false;
+var config = {
+  instanceIds: []
+};
+var state = (0, _reactive.create)(config);
+var useModalConfig = function useModalConfig() {
+  return state.useSnapshot();
+};
+var addModalInstance = function addModalInstance(instanceId) {
+  state.mutate.instanceIds.push(instanceId);
+};
+var removeModalInstance = function removeModalInstance(instanceId) {
+  state.mutate.instanceIds = state.mutate.instanceIds.filter(function (id) {
+    return id !== instanceId;
+  });
+};
 var mousePosition = null;
 var getClickPosition = function getClickPosition(e) {
   mousePosition = {
@@ -69,12 +85,11 @@ var Modal = function Modal(props) {
       mouseDownTarget: null,
       mouseUpTarget: null,
       content: null,
-      originDocumentStyle: {
-        overflow: '',
-        paddingRight: ''
-      }
+      originDocumentStyle: null,
+      instanceId: _hooks.util.generateUUID()
     }),
     context = _useRef.current;
+  var config = useModalConfig();
   var _useState3 = (0, _react.useState)(props.visible || props.autoShow),
     _useState4 = _slicedToArray(_useState3, 2),
     animation = _useState4[0],
@@ -89,6 +104,10 @@ var Modal = function Modal(props) {
     defaultHeight: height,
     panelRef: panelRef
   });
+  var showMask = (0, _react.useMemo)(function () {
+    if (props.forceMask) return config.instanceIds.includes(context.instanceId);
+    return config.instanceIds[0] === context.instanceId;
+  }, [config.instanceIds, props.forceMask]);
   var rerender = (0, _hooks.useRender)();
   var handleMaskVisible = function handleMaskVisible() {
     // 多个moal 只有第一个显示的时候才显示遮罩
@@ -99,6 +118,15 @@ var Modal = function Modal(props) {
       rerender();
     }
   };
+  (0, _react.useEffect)(function () {
+    var index = config.instanceIds.indexOf(context.instanceId);
+    if (visible && index === -1) {
+      addModalInstance(context.instanceId);
+    }
+    if (!visible && index > -1 && !animation) {
+      removeModalInstance(context.instanceId);
+    }
+  }, [visible, animation, config.instanceIds]);
   (0, _react.useEffect)(handleMaskVisible, [visible]);
   var updateOrigin = function updateOrigin() {
     // 更新transform-origin
@@ -176,9 +204,11 @@ var Modal = function Modal(props) {
   // 设置 document.body.style.overflow 和 document.body.style.paddingRight，并记录原始值到 context 中
   var setDocumentOverflow = (0, _hooks.usePersistFn)(function () {
     var doc = document.body.parentNode;
-    if (context.isMask) {
-      context.originDocumentStyle.overflow = doc.style.overflow;
-      context.originDocumentStyle.paddingRight = doc.style.paddingRight;
+    if (context.isMask && !context.originDocumentStyle) {
+      context.originDocumentStyle = {
+        overflow: doc.style.overflow,
+        paddingRight: doc.style.paddingRight
+      };
     }
     doc.style.overflow = 'hidden';
     if (!doc.style.paddingRight) {
@@ -189,19 +219,21 @@ var Modal = function Modal(props) {
   // 还原 document.body.style.overflow 和 document.body.style.paddingRight
   var resetDocumentOverflow = (0, _hooks.usePersistFn)(function () {
     var doc = document.body.parentNode;
-    doc.style.overflow = context.originDocumentStyle.overflow;
-    doc.style.paddingRight = context.originDocumentStyle.paddingRight;
+    if (context.originDocumentStyle) {
+      doc.style.overflow = context.originDocumentStyle.overflow;
+      doc.style.paddingRight = context.originDocumentStyle.paddingRight;
+    }
   });
   (0, _react.useEffect)(function () {
     if (!props.hideMask) {
       if (visible) {
         setDocumentOverflow();
       } else {
-        if (!context.isMask) return;
+        if (config.instanceIds.length && config.instanceIds[config.instanceIds.length - 1] === context.instanceId) return;
         resetDocumentOverflow();
       }
     }
-  }, [visible]);
+  }, [visible, config.instanceIds]);
   var canDestroy = !visible && !animation;
   (0, _react.useEffect)(function () {
     var _props$shouldDestroy;
@@ -212,6 +244,7 @@ var Modal = function Modal(props) {
     // unmount
     return function () {
       var _props$shouldDestroy2;
+      removeModalInstance(context.instanceId);
       if (context.isMask) {
         resetDocumentOverflow();
       }
@@ -341,7 +374,7 @@ var Modal = function Modal(props) {
       onClick: function onClick(e) {
         e.stopPropagation();
       },
-      className: (0, _classnames.default)(props.rootClassName, modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.rootClass, modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapper, animation && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperAnimation), visible ? modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperShow : modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperHide, (context.isMask || props.forceMask) && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperIsMask), props.fullScreen && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperFullScreen), props.moveable && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperMoveable), props.hideMask && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperHideMask), props.zoom && !props.moveable && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperZoom), (isPositionX || isPositionY) && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawer), props.position === 'left' && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawerLeft), props.position === 'right' && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawerRight), props.position === 'top' && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawerTop), props.position === 'bottom' && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawerBottom)),
+      className: (0, _classnames.default)(props.rootClassName, modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.rootClass, modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapper, animation && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperAnimation), visible ? modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperShow : modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperHide, showMask && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperIsMask), props.fullScreen && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperFullScreen), props.moveable && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperMoveable), props.hideMask && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperHideMask), props.zoom && !props.moveable && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperZoom), (isPositionX || isPositionY) && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawer), props.position === 'left' && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawerLeft), props.position === 'right' && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawerRight), props.position === 'top' && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawerTop), props.position === 'bottom' && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawerBottom)),
       onAnimationEnd: handleAnimationEnd,
       style: {
         background: props.maskBackground,

package/esm/modal/modal-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-content.d.ts","sourceRoot":"","sources":["modal-content.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAoB9D,QAAA,MAAM,KAAK,UAAW,iBAAiB,mDAiXtC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"modal-content.d.ts","sourceRoot":"","sources":["modal-content.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AA0C9D,QAAA,MAAM,KAAK,UAAW,iBAAiB,mDA0YtC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/esm/modal/modal-content.js

@@ -11,16 +11,32 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import classNames from 'classnames';
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState, useMemo } from 'react';
 import AlertIcon, { AlertIconMap } from "../alert/alert-icon";
 import Icons from "../icons";
 import { util } from '@sheinx/hooks';
+import { create } from '@shined/reactive';
 import { useDragMove, useDragResize, usePersistFn, useRender } from '@sheinx/hooks';
 import { FormFooterProvider } from "../form/form-footer-context";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var hasMask = false;
+var config = {
+  instanceIds: []
+};
+var state = create(config);
+var useModalConfig = function useModalConfig() {
+  return state.useSnapshot();
+};
+var addModalInstance = function addModalInstance(instanceId) {
+  state.mutate.instanceIds.push(instanceId);
+};
+var removeModalInstance = function removeModalInstance(instanceId) {
+  state.mutate.instanceIds = state.mutate.instanceIds.filter(function (id) {
+    return id !== instanceId;
+  });
+};
 var mousePosition = null;
 var getClickPosition = function getClickPosition(e) {
   mousePosition = {
@@ -63,12 +79,11 @@ var Modal = function Modal(props) {
       mouseDownTarget: null,
       mouseUpTarget: null,
       content: null,
-      originDocumentStyle: {
-        overflow: '',
-        paddingRight: ''
-      }
+      originDocumentStyle: null,
+      instanceId: util.generateUUID()
     }),
     context = _useRef.current;
+  var config = useModalConfig();
   var _useState3 = useState(props.visible || props.autoShow),
     _useState4 = _slicedToArray(_useState3, 2),
     animation = _useState4[0],
@@ -83,6 +98,10 @@ var Modal = function Modal(props) {
     defaultHeight: height,
     panelRef: panelRef
   });
+  var showMask = useMemo(function () {
+    if (props.forceMask) return config.instanceIds.includes(context.instanceId);
+    return config.instanceIds[0] === context.instanceId;
+  }, [config.instanceIds, props.forceMask]);
   var rerender = useRender();
   var handleMaskVisible = function handleMaskVisible() {
     // 多个moal 只有第一个显示的时候才显示遮罩
@@ -93,6 +112,15 @@ var Modal = function Modal(props) {
       rerender();
     }
   };
+  useEffect(function () {
+    var index = config.instanceIds.indexOf(context.instanceId);
+    if (visible && index === -1) {
+      addModalInstance(context.instanceId);
+    }
+    if (!visible && index > -1 && !animation) {
+      removeModalInstance(context.instanceId);
+    }
+  }, [visible, animation, config.instanceIds]);
   useEffect(handleMaskVisible, [visible]);
   var updateOrigin = function updateOrigin() {
     // 更新transform-origin
@@ -170,9 +198,11 @@ var Modal = function Modal(props) {
   // 设置 document.body.style.overflow 和 document.body.style.paddingRight，并记录原始值到 context 中
   var setDocumentOverflow = usePersistFn(function () {
     var doc = document.body.parentNode;
-    if (context.isMask) {
-      context.originDocumentStyle.overflow = doc.style.overflow;
-      context.originDocumentStyle.paddingRight = doc.style.paddingRight;
+    if (context.isMask && !context.originDocumentStyle) {
+      context.originDocumentStyle = {
+        overflow: doc.style.overflow,
+        paddingRight: doc.style.paddingRight
+      };
     }
     doc.style.overflow = 'hidden';
     if (!doc.style.paddingRight) {
@@ -183,19 +213,21 @@ var Modal = function Modal(props) {
   // 还原 document.body.style.overflow 和 document.body.style.paddingRight
   var resetDocumentOverflow = usePersistFn(function () {
     var doc = document.body.parentNode;
-    doc.style.overflow = context.originDocumentStyle.overflow;
-    doc.style.paddingRight = context.originDocumentStyle.paddingRight;
+    if (context.originDocumentStyle) {
+      doc.style.overflow = context.originDocumentStyle.overflow;
+      doc.style.paddingRight = context.originDocumentStyle.paddingRight;
+    }
   });
   useEffect(function () {
     if (!props.hideMask) {
       if (visible) {
         setDocumentOverflow();
       } else {
-        if (!context.isMask) return;
+        if (config.instanceIds.length && config.instanceIds[config.instanceIds.length - 1] === context.instanceId) return;
         resetDocumentOverflow();
       }
     }
-  }, [visible]);
+  }, [visible, config.instanceIds]);
   var canDestroy = !visible && !animation;
   useEffect(function () {
     var _props$shouldDestroy;
@@ -206,6 +238,7 @@ var Modal = function Modal(props) {
     // unmount
     return function () {
       var _props$shouldDestroy2;
+      removeModalInstance(context.instanceId);
       if (context.isMask) {
         resetDocumentOverflow();
       }
@@ -335,7 +368,7 @@ var Modal = function Modal(props) {
       onClick: function onClick(e) {
         e.stopPropagation();
       },
-      className: classNames(props.rootClassName, modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.rootClass, modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapper, animation && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperAnimation), visible ? modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperShow : modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperHide, (context.isMask || props.forceMask) && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperIsMask), props.fullScreen && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperFullScreen), props.moveable && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperMoveable), props.hideMask && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperHideMask), props.zoom && !props.moveable && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperZoom), (isPositionX || isPositionY) && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawer), props.position === 'left' && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawerLeft), props.position === 'right' && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawerRight), props.position === 'top' && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawerTop), props.position === 'bottom' && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawerBottom)),
+      className: classNames(props.rootClassName, modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.rootClass, modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapper, animation && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperAnimation), visible ? modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperShow : modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperHide, showMask && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperIsMask), props.fullScreen && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperFullScreen), props.moveable && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperMoveable), props.hideMask && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperHideMask), props.zoom && !props.moveable && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperZoom), (isPositionX || isPositionY) && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawer), props.position === 'left' && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawerLeft), props.position === 'right' && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawerRight), props.position === 'top' && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawerTop), props.position === 'bottom' && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.wrapperDrawerBottom)),
       onAnimationEnd: handleAnimationEnd,
       style: {
         background: props.maskBackground,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sheinx/base",
-  "version": "3.8.0-beta.43",
+  "version": "3.8.0-beta.44",
   "description": "",
   "keywords": [],
   "license": "MIT",
@@ -10,7 +10,7 @@
   "module": "./esm/index.js",
   "typings": "./cjs/index.d.ts",
   "dependencies": {
-    "@sheinx/hooks": "3.8.0-beta.43",
+    "@sheinx/hooks": "3.8.0-beta.44",
     "immer": "^10.0.0",
     "classnames": "^2.0.0",
     "@shined/reactive": "^0.1.3-alpha.0"