@arim-aisdc/public-components 2.3.18 → 2.3.20

package/dist/components/BaseInfo/BaseInfo.d.ts

@@ -17,7 +17,7 @@ export declare const foramtBaseInfoField: (data: any, dataField: BaseInfoFieldTy
     value: any;
     field: string;
     label?: string;
-    text: string | Element | JSX.Element;
+    text: string | JSX.Element | Element;
     units?: string;
     width?: string;
     labelWidth?: string;

package/dist/components/CenterModal/CenterModal.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["open", "title", "okText", "hasfooter", "footer", "width", "size", "renderContent", "handleConfirm", "handleCancel", "confirmLoading", "maskClosable", "bodyStyle", "afterClose", "enableResizing", "enableDragging", "minResizeWidth", "minResizeHeight"];
+var _excluded = ["open", "title", "okText", "hasfooter", "footer", "width", "size", "renderContent", "handleConfirm", "handleCancel", "confirmLoading", "maskClosable", "bodyStyle", "afterClose", "enableResizing", "enableDragging", "minResizeWidth", "minResizeHeight", "maxResizeWidth", "maxResizeHeight"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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; }
@@ -12,6 +12,16 @@ import React, { useEffect, useMemo, useRef } from 'react';
 import { Rnd } from 'react-rnd';
 import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
+var resizeHandleClasses = {
+  bottom: "resizeHandleBottom",
+  bottomLeft: "resizeHandleBottomLeft",
+  bottomRight: "resizeHandleBottomRight",
+  left: "resizeHandleLeft",
+  right: "resizeHandleRight",
+  top: "resizeHandleTop",
+  topLeft: "resizeHandleTopLeft",
+  topRight: "resizeHandleTopRight"
+};
 var CenterModal = function CenterModal(_ref) {
   var _ref$open = _ref.open,
     open = _ref$open === void 0 ? false : _ref$open,
@@ -45,11 +55,14 @@ var CenterModal = function CenterModal(_ref) {
     minResizeWidth = _ref$minResizeWidth === void 0 ? 200 : _ref$minResizeWidth,
     _ref$minResizeHeight = _ref.minResizeHeight,
     minResizeHeight = _ref$minResizeHeight === void 0 ? 200 : _ref$minResizeHeight,
+    maxResizeWidth = _ref.maxResizeWidth,
+    maxResizeHeight = _ref.maxResizeHeight,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var modalRef = useRef(null);
   var modalBodyRef = useRef(null);
-  var startSizeRef = useRef();
   var titleElementRef = useRef();
+  var rndRef = useRef(null);
+  var contentObserverRef = useRef();
+  var modalContentRef = useRef(null);
   var dragHandleClassName = useMemo(function () {
     var _titleElementRef$curr;
     return "drag-handle-".concat((_titleElementRef$curr = titleElementRef.current) === null || _titleElementRef$curr === void 0 ? void 0 : _titleElementRef$curr.length);
@@ -61,18 +74,78 @@ var CenterModal = function CenterModal(_ref) {
     }
   }, []);
   useEffect(function () {
-    var modal = modalBodyRef.current;
-    if (modal) {
-      var rect = modal.getBoundingClientRect();
-      console.log('rect', rect.width, rect.height);
-      startSizeRef.current = {
-        width: rect.width,
-        height: rect.height
+    if (!open) {
+      var _contentObserverRef$c;
+      // 关闭时清理 observer
+      (_contentObserverRef$c = contentObserverRef.current) === null || _contentObserverRef$c === void 0 || _contentObserverRef$c.disconnect();
+      return;
+    }
+
+    // 等待 Modal 渲染完成
+    var timer = setTimeout(function () {
+      var modalContent = document.querySelector('.ant-modal-content');
+      if (!modalContent || !rndRef.current) return;
+      modalContentRef.current = modalContent;
+
+      // 初始化同步尺寸
+      syncSizeIfNeeded();
+
+      // 设置 ResizeObserver 监听内容区域尺寸变化
+      contentObserverRef.current = new ResizeObserver(function () {
+        syncSizeIfNeeded();
+      });
+      contentObserverRef.current.observe(modalContent);
+    }, 0);
+    return function () {
+      var _contentObserverRef$c2;
+      clearTimeout(timer);
+      (_contentObserverRef$c2 = contentObserverRef.current) === null || _contentObserverRef$c2 === void 0 || _contentObserverRef$c2.disconnect();
+    };
+  }, [open]);
+
+  // 同步尺寸的逻辑
+  var syncSizeIfNeeded = function syncSizeIfNeeded() {
+    if (!rndRef.current || !modalContentRef.current) return;
+    var rndElement = rndRef.current.getSelfElement();
+    var contentRect = modalContentRef.current.getBoundingClientRect();
+
+    // 检查 Rnd 是否已经设置了显式的 width/height 样式
+    var hasExplicitWidth = rndElement.style.width !== '';
+    var hasExplicitHeight = rndElement.style.height !== '';
+
+    // 如果没有设置，则同步尺寸
+    if (!hasExplicitWidth || !hasExplicitHeight) {
+      var updates = {
+        width: !hasExplicitWidth ? Math.ceil(contentRect.width) : undefined,
+        height: !hasExplicitHeight ? Math.ceil(contentRect.height) : undefined
       };
+      rndRef.current.updateSize(updates);
+    }
+  };
+  var adjustResize = function adjustResize(e, direction, ref, delta, position) {
+    var _ref$querySelector, _ref$style$height, _ref$style$width;
+    var modalContent = (_ref$querySelector = ref.querySelector('.ant-modal-content')) === null || _ref$querySelector === void 0 ? void 0 : _ref$querySelector.getBoundingClientRect();
+    var modalContentHeight = Math.ceil(modalContent.height);
+    var modalContentWidth = Math.ceil(modalContent.width);
+    var refHeight = Number((_ref$style$height = ref.style.height) === null || _ref$style$height === void 0 || (_ref$style$height = _ref$style$height.split('px')) === null || _ref$style$height === void 0 ? void 0 : _ref$style$height[0]);
+    var refWidth = Number((_ref$style$width = ref.style.width) === null || _ref$style$width === void 0 || (_ref$style$width = _ref$style$width.split('px')) === null || _ref$style$width === void 0 ? void 0 : _ref$style$width[0]);
+    if ((direction === 'left' || direction === 'right') && modalContentHeight !== refHeight) {
+      rndRef.current.updateSize({
+        width: ref.style.width,
+        height: modalContentHeight + 'px'
+      });
+    }
+    if ((direction === 'top' || direction === 'bottom') && modalContentWidth !== refWidth) {
+      ref.style.width = modalContentWidth + 'px';
+      rndRef.current.updateSize({
+        width: modalContentWidth + 'px',
+        height: ref.style.height
+      });
     }
-  }, [modalBodyRef.current]);
+  };
   return /*#__PURE__*/_jsx(Modal, _objectSpread(_objectSpread({
     className: "centerModal".concat(size),
+    wrapClassName: 'wrapClassName',
     title: /*#__PURE__*/_jsx("div", {
       className: "modal-header ".concat(dragHandleClassName),
       style: {
@@ -103,10 +176,11 @@ var CenterModal = function CenterModal(_ref) {
     width: width,
     modalRender: function modalRender(modal) {
       return /*#__PURE__*/_jsx(Rnd, {
-        ref: modalRef,
+        ref: rndRef,
         enableResizing: enableResizing,
         disableDragging: !enableDragging,
         resizeHandleWrapperClass: "resizeHandles",
+        resizeHandleClasses: resizeHandleClasses,
         dragHandleClassName: dragHandleClassName,
         default: {
           x: 0,
@@ -114,13 +188,18 @@ var CenterModal = function CenterModal(_ref) {
           width: 'fit-content',
           height: 'fit-content'
         },
+        onResizeStop: adjustResize,
+        onResize: adjustResize,
         style: {
           display: 'flex',
           flexDirection: 'column',
           overflow: 'hidden' // 添加overflow隐藏
         },
         minWidth: minResizeWidth,
-        minHeight: minResizeHeight,
+        minHeight: minResizeHeight
+        // maxWidth={maxResizeWidth}
+        // maxHeight={maxResizeHeight}
+        ,
         children: modal
       });
     }

package/dist/components/CenterModal/index.less

@@ -1,89 +1,14 @@
-.custom-light-modal {
-  top: 0 !important;
-  left: 0 !important;
-  height: 'none' !important;
-}
-
-.ant-design-draggable-modal-resize-handle {
-  display: none;
-
-  .ant-design-draggable-modal .ant-design-draggable-modal-title {
-    padding: 0;
-  }
-}
-
-.centerModal {
-  .ant-modal-content {
-    resize: none; /* disable default resize */
-    overflow: hidden;
-  }
-}
-
-.resize-handle {
-  opacity: 0.6;
-  transition: opacity 0.2s;
-  
-  &:hover {
-    opacity: 1;
-    border-color: #40a9ff;
-  }
-}
-
-.is-resizing .resize-handle {
-  opacity: 1;
-  border-color: #096dd9 !important;
-}
-
-
-
 .centerModal {
-  .react-resizable {
-    position: absolute !important;
-  }
-
-  .react-rnd {
-    border: 1px solid #d9d9d9;
-    border-radius: 6px;
-    overflow: hidden;
-    background: #fff;
-    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 
-                0 6px 16px 0 rgba(0, 0, 0, 0.08),
-                0 9px 28px 8px rgba(0, 0, 0, 0.05);
-  }
-
-  .resize-handle {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    width: 16px;
-    height: 16px;
-    cursor: nwse-resize;
-    background: transparent;
-    border-right: 2px solid #1890ff;
-    border-bottom: 2px solid #1890ff;
-    z-index: 1001;
-    opacity: 0.7;
-    transition: opacity 0.2s;
-
-    &:hover {
-      opacity: 1;
-      border-color: #40a9ff;
-    }
-  }
-
-  .ant-modal-body {
-    padding: 0 !important;
-  }
-
   .resizeHandles div {
     pointer-events: auto;
     z-index: 1002;
   }
 
-
   .ant-modal-content {
     display: flex;
     flex-direction: column;
+    height: 100%;
+    overflow: hidden;
 
     .ant-modal-body {
       flex: 1;
@@ -94,8 +19,17 @@
   .react-draggable {
     position: relative !important;
   }
-}
 
-  .react-draggable {
-    position: relative;
-  }
+  .resizeHandleBottomLeft, .resizeHandleBottomRight, .resizeHandleTopLeft, .resizeHandleTopRight {
+    width: 40px !important;
+    height: 40px !important;
+  }
+
+  // .resizeHandleLeft, .resizeHandleRight {
+  //   width: 20px !important;
+  // }
+
+  // .resizeHandleTop, .resizeHandleBottom {
+  //   height: 20px !important;
+  // }
+}

package/dist/components/CenterModal/type.d.ts

@@ -25,6 +25,8 @@ export interface CenterModalPropsType extends ModalProps {
     enableDragging?: boolean;
     minResizeWidth?: string | number;
     minResizeHeight?: string | number;
+    maxResizeWidth?: string | number;
+    maxResizeHeight?: string | number;
 }
 export type ModalSizeType = {
     width: number | string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arim-aisdc/public-components",
-  "version": "2.3.18",
+  "version": "2.3.20",
   "description": "前端组件库",
   "license": "MIT",
   "main": "dist/index.js",