shineout 3.8.0-beta.43 → 3.8.0-beta.44

package/cjs/index.js

@@ -522,5 +522,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // 此文件由脚本自动生成，请勿直接修改。
 // This file was generated automatically by a script. Please do not modify it directly.
 var _default = exports.default = {
-  version: '3.8.0-beta.43'
+  version: '3.8.0-beta.44'
 };

package/dist/shineout.js

@@ -12386,7 +12386,7 @@ var handleStyle = function handleStyle(style) {
 };
 /* harmony default export */ var jss_style_handleStyle = (handleStyle);
 ;// CONCATENATED MODULE: ../shineout-style/src/version.ts
-/* harmony default export */ var version = ('3.8.0-beta.43');
+/* harmony default export */ var version = ('3.8.0-beta.44');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -49222,7 +49222,23 @@ function _ReactUnmount() {
 
 
 
+
 var hasMask = false;
+var modal_content_config = {
+  instanceIds: []
+};
+var modal_content_state = createWithHooks(modal_content_config);
+var useModalConfig = function useModalConfig() {
+  return modal_content_state.useSnapshot();
+};
+var addModalInstance = function addModalInstance(instanceId) {
+  modal_content_state.mutate.instanceIds.push(instanceId);
+};
+var removeModalInstance = function removeModalInstance(instanceId) {
+  modal_content_state.mutate.instanceIds = modal_content_state.mutate.instanceIds.filter(function (id) {
+    return id !== instanceId;
+  });
+};
 var mousePosition = null;
 var getClickPosition = function getClickPosition(e) {
   mousePosition = {
@@ -49265,12 +49281,11 @@ var Modal = function Modal(props) {
       mouseDownTarget: null,
       mouseUpTarget: null,
       content: null,
-      originDocumentStyle: {
-        overflow: '',
-        paddingRight: ''
-      }
+      originDocumentStyle: null,
+      instanceId: generateUUID()
     }),
     context = _useRef.current;
+  var config = useModalConfig();
   var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(props.visible || props.autoShow),
     _useState4 = slicedToArray_default()(_useState3, 2),
     animation = _useState4[0],
@@ -49285,6 +49300,10 @@ var Modal = function Modal(props) {
     defaultHeight: height,
     panelRef: panelRef
   });
+  var showMask = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.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 只有第一个显示的时候才显示遮罩
@@ -49295,6 +49314,15 @@ var Modal = function Modal(props) {
       rerender();
     }
   };
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_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,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(handleMaskVisible, [visible]);
   var updateOrigin = function updateOrigin() {
     // 更新transform-origin
@@ -49372,9 +49400,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) {
@@ -49385,19 +49415,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;
+    }
   });
   (0,external_root_React_commonjs2_react_commonjs_react_amd_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,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     var _props$shouldDestroy;
@@ -49408,6 +49440,7 @@ var Modal = function Modal(props) {
     // unmount
     return function () {
       var _props$shouldDestroy2;
+      removeModalInstance(context.instanceId);
       if (context.isMask) {
         resetDocumentOverflow();
       }
@@ -49537,7 +49570,7 @@ var Modal = function Modal(props) {
       onClick: function onClick(e) {
         e.stopPropagation();
       },
-      className: 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: 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,
@@ -72959,7 +72992,7 @@ var upload_interface = __webpack_require__(8821);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.8.0-beta.43'
+  version: '3.8.0-beta.44'
 });
 }();
 /******/ 	return __webpack_exports__;