@pisell/materials 3.0.65 → 3.0.66

package/es/components/pisellModal/components/MobileModal/index.js

@@ -3,13 +3,52 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import classNames from 'classnames';
 import PcModal from "../PcModal";
 import "./index.less";
+var modalCount = 0;
 var MobileModal = function MobileModal(props) {
   var wrapClassName = props.wrapClassName,
     mobileModalHeight = props.mobileModalHeight;
+  var ref = React.useRef(null);
+  var prevOpenRef = useRef(props.open);
+  var isFirstRender = useRef(true);
+
+  // 处理初始化时的open状态
+  useEffect(function () {
+    if (isFirstRender.current && props.open) {
+      modalCount++;
+      document.body.style.overflow = 'hidden';
+    }
+    isFirstRender.current = false;
+  }, []);
+  useEffect(function () {
+    if (!isFirstRender.current && props.open !== prevOpenRef.current) {
+      if (props.open) {
+        modalCount++;
+        document.body.style.overflow = 'hidden';
+      } else {
+        modalCount--;
+        if (modalCount <= 0) {
+          modalCount = 0;
+          document.body.style.overflow = '';
+        }
+      }
+      prevOpenRef.current = props.open;
+    }
+  }, [props.open]);
+  useEffect(function () {
+    return function () {
+      if (prevOpenRef.current) {
+        modalCount--;
+        if (modalCount <= 0) {
+          modalCount = 0;
+          document.body.style.overflow = '';
+        }
+      }
+    };
+  }, []);
   return /*#__PURE__*/React.createElement(PcModal, _extends({}, props, {
     transitionName: "pisell-move-down",
     width: "100%",
@@ -19,7 +58,8 @@ var MobileModal = function MobileModal(props) {
         className: classNames(_defineProperty({}, 'pisell-mobile-modal-render', mobileModalHeight)),
         style: {
           height: mobileModalHeight || '100%'
-        }
+        },
+        ref: ref
       }, node);
     }
   }));

package/es/components/pisellModal/components/MobileModal/index.less

@@ -17,14 +17,18 @@
       overflow: hidden;
       max-height: 90%;
       min-height: 200px;
+      display: flex;
+      flex-direction: column;
     }
     .pisell-lowcode-modal-content {
+      flex: 1;
       padding: 0;
       border-radius: 0;
       height: 100%;
       display: flex;
       flex-direction: column;
       max-height: none;
+      min-height: 200px;
       .pisell-lowcode-modal-close {
         padding: 10px;
         top: 8px;

package/lib/components/pisellModal/components/MobileModal/index.js

@@ -36,8 +36,45 @@ var import_react = __toESM(require("react"));
 var import_classnames = __toESM(require("classnames"));
 var import_PcModal = __toESM(require("../PcModal"));
 var import_index = require("./index.less");
+var modalCount = 0;
 var MobileModal = (props) => {
   const { wrapClassName, mobileModalHeight } = props;
+  const ref = import_react.default.useRef(null);
+  const prevOpenRef = (0, import_react.useRef)(props.open);
+  const isFirstRender = (0, import_react.useRef)(true);
+  (0, import_react.useEffect)(() => {
+    if (isFirstRender.current && props.open) {
+      modalCount++;
+      document.body.style.overflow = "hidden";
+    }
+    isFirstRender.current = false;
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (!isFirstRender.current && props.open !== prevOpenRef.current) {
+      if (props.open) {
+        modalCount++;
+        document.body.style.overflow = "hidden";
+      } else {
+        modalCount--;
+        if (modalCount <= 0) {
+          modalCount = 0;
+          document.body.style.overflow = "";
+        }
+      }
+      prevOpenRef.current = props.open;
+    }
+  }, [props.open]);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (prevOpenRef.current) {
+        modalCount--;
+        if (modalCount <= 0) {
+          modalCount = 0;
+          document.body.style.overflow = "";
+        }
+      }
+    };
+  }, []);
   return /* @__PURE__ */ import_react.default.createElement(
     import_PcModal.default,
     {
@@ -56,7 +93,8 @@ var MobileModal = (props) => {
             }),
             style: {
               height: mobileModalHeight || "100%"
-            }
+            },
+            ref
           },
           node
         );

package/lib/components/pisellModal/components/MobileModal/index.less

@@ -17,14 +17,18 @@
       overflow: hidden;
       max-height: 90%;
       min-height: 200px;
+      display: flex;
+      flex-direction: column;
     }
     .pisell-lowcode-modal-content {
+      flex: 1;
       padding: 0;
       border-radius: 0;
       height: 100%;
       display: flex;
       flex-direction: column;
       max-height: none;
+      min-height: 200px;
       .pisell-lowcode-modal-close {
         padding: 10px;
         top: 8px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "3.0.65",
+  "version": "3.0.66",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",