zmdms-webui 2.5.8 → 2.5.9

package/dist/es/modal/index.css

@@ -1 +1 @@
-.ztxk-modal{top:8vh}.ztxk-modal .ant-modal-content{border-radius:8px}.ztxk-modal .ant-modal-content>.ant-modal-close{color:#333;height:40px;width:40px}.ztxk-modal .ant-modal-content>.ant-modal-close>.ant-modal-close-x{font-weight:400;height:40px;line-height:40px;width:40px}.ztxk-modal .ant-modal-content>.ant-modal-header{border-bottom:1px solid #f0f0f0;border-radius:8px 8px 0 0;padding:9px 20px 9px 24px}.ztxk-modal .ant-modal-content>.ant-modal-header>.ant-modal-title{color:#333;font-weight:400;line-height:22px;text-align:center}.ztxk-modal .ant-modal-content>.ant-modal-body{max-height:75vh;overflow:auto;padding:10px}.ztxk-modal .ant-modal-content>.ant-modal-footer{border-top:0;padding:10px 0;text-align:center}
+.ztxk-modal{top:8vh}.ztxk-modal .ant-modal-content{border-radius:8px;display:flex;flex-direction:column}.ztxk-modal .ant-modal-content>.ant-modal-close{color:#333;height:40px;width:40px}.ztxk-modal .ant-modal-content>.ant-modal-close>.ant-modal-close-x{font-weight:400;height:40px;line-height:40px;width:40px}.ztxk-modal .ant-modal-content>.ant-modal-header{border-bottom:1px solid #f0f0f0;border-radius:8px 8px 0 0;flex-shrink:0;padding:9px 20px 9px 24px}.ztxk-modal .ant-modal-content>.ant-modal-header>.ant-modal-title{color:#333;font-weight:400;line-height:22px;text-align:center}.ztxk-modal .ant-modal-content>.ant-modal-body{flex:1;overflow:auto;padding:10px}.ztxk-modal .ant-modal-content>.ant-modal-footer{border-top:0;flex-shrink:0;padding:10px 0;text-align:center}.ztxk-modal-resizable-wrapper{position:relative}.ztxk-modal-resizable-wrapper .ztxk-modal-resize-handle{pointer-events:auto;position:absolute;z-index:1000}.ztxk-modal-resizable-wrapper .ztxk-modal-resize-handle-bl,.ztxk-modal-resizable-wrapper .ztxk-modal-resize-handle-br,.ztxk-modal-resizable-wrapper .ztxk-modal-resize-handle-tl,.ztxk-modal-resizable-wrapper .ztxk-modal-resize-handle-tr{height:12px;width:12px}.ztxk-modal-resizable-wrapper .ztxk-modal-resize-handle-tl{cursor:nwse-resize!important;left:0;top:0}.ztxk-modal-resizable-wrapper .ztxk-modal-resize-handle-tr{cursor:nesw-resize!important;right:0;top:0}.ztxk-modal-resizable-wrapper .ztxk-modal-resize-handle-bl{bottom:0;cursor:nesw-resize!important;left:0}.ztxk-modal-resizable-wrapper .ztxk-modal-resize-handle-br{bottom:0;cursor:nwse-resize!important;right:0}.ztxk-modal-resizable-wrapper .ztxk-modal-resize-handle-b,.ztxk-modal-resizable-wrapper .ztxk-modal-resize-handle-t{height:8px;left:12px;right:12px}.ztxk-modal-resizable-wrapper .ztxk-modal-resize-handle-t{cursor:ns-resize!important;top:0}.ztxk-modal-resizable-wrapper .ztxk-modal-resize-handle-b{bottom:0;cursor:ns-resize!important}.ztxk-modal-resizable-wrapper .ztxk-modal-resize-handle-l,.ztxk-modal-resizable-wrapper .ztxk-modal-resize-handle-r{bottom:12px;top:12px;width:8px}.ztxk-modal-resizable-wrapper .ztxk-modal-resize-handle-l{cursor:ew-resize!important;left:0}.ztxk-modal-resizable-wrapper .ztxk-modal-resize-handle-r{cursor:ew-resize!important;right:0}body.ztxk-modal-resizing,body.ztxk-modal-resizing *{-webkit-user-select:none!important;user-select:none!important}

package/dist/es/modal/interface.d.ts

@@ -82,6 +82,34 @@ interface IModalProps extends Omit<ModalProps, "onOk"> {
      * 是否可以拖拽
      */
     isDrag?: boolean;
+    /**
+     * 是否可以调整大小
+     */
+    isResize?: boolean;
+    /**
+     * 最小宽度
+     */
+    minWidth?: number;
+    /**
+     * 最小高度
+     */
+    minHeight?: number;
+    /**
+     * 最大宽度
+     */
+    maxWidth?: number;
+    /**
+     * 最大高度
+     */
+    maxHeight?: number;
+    /**
+     * 默认宽度
+     */
+    defaultWidth?: string | number;
+    /**
+     * 默认高度
+     */
+    defaultHeight?: string | number;
 }
 interface IModalComponent extends React__default.ForwardRefExoticComponent<IModalProps & React__default.RefAttributes<unknown>> {
     info: typeof Modal.info;

package/dist/es/modal/modal.js

@@ -5,21 +5,22 @@ import { Modal as Modal$1 } from 'antd';
 import classNames from '../node_modules/classnames/index.js';
 import { setCancelBtnProps } from './utils.js';
 import useDraggable from './useDraggable.js';
+import useResizable from './useResizable.js';
 import myMessage from '../message/index.js';
 
 var Modal = function (_a, ref) {
-    var className = _a.className, defaultOpen = _a.defaultOpen, defaultTitle = _a.defaultTitle, defaultConfirmMsg = _a.defaultConfirmMsg, defaultConfirmOkText = _a.defaultConfirmOkText, defaultType = _a.defaultType, confirmPreHandle = _a.confirmPreHandle, confirmOnOk = _a.confirmOnOk, onOk = _a.onOk, footer = _a.footer, onOkValidate = _a.onOkValidate, _b = _a.isDrag, isDrag = _b === void 0 ? true : _b, modalTitle = _a.title, modalRender = _a.modalRender, resetProps = __rest(_a, ["className", "defaultOpen", "defaultTitle", "defaultConfirmMsg", "defaultConfirmOkText", "defaultType", "confirmPreHandle", "confirmOnOk", "onOk", "footer", "onOkValidate", "isDrag", "title", "modalRender"]);
+    var className = _a.className, defaultOpen = _a.defaultOpen, defaultTitle = _a.defaultTitle, defaultConfirmMsg = _a.defaultConfirmMsg, defaultConfirmOkText = _a.defaultConfirmOkText, defaultType = _a.defaultType, confirmPreHandle = _a.confirmPreHandle, confirmOnOk = _a.confirmOnOk, onOk = _a.onOk, footer = _a.footer, onOkValidate = _a.onOkValidate, _b = _a.isDrag, isDrag = _b === void 0 ? true : _b, _c = _a.isResize, isResize = _c === void 0 ? false : _c, minWidth = _a.minWidth, minHeight = _a.minHeight, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, defaultWidth = _a.defaultWidth, _d = _a.defaultHeight, defaultHeight = _d === void 0 ? 500 : _d, modalTitle = _a.title, modalRender = _a.modalRender, resetProps = __rest(_a, ["className", "defaultOpen", "defaultTitle", "defaultConfirmMsg", "defaultConfirmOkText", "defaultType", "confirmPreHandle", "confirmOnOk", "onOk", "footer", "onOkValidate", "isDrag", "isResize", "minWidth", "minHeight", "maxWidth", "maxHeight", "defaultWidth", "defaultHeight", "title", "modalRender"]);
     var classes = classNames("ztxk-modal", className);
     // 模态框基本属性
-    var _c = useState(defaultOpen), open = _c[0], setOpen = _c[1];
-    var _d = useState(defaultTitle), title = _d[0], setTitle = _d[1];
-    var _e = useState(), loading = _e[0], setLoading = _e[1];
+    var _e = useState(defaultOpen), open = _e[0], setOpen = _e[1];
+    var _f = useState(defaultTitle), title = _f[0], setTitle = _f[1];
+    var _g = useState(), loading = _g[0], setLoading = _g[1];
     // 二次确认框相关配置
-    var _f = useState(confirmOnOk ? true : false), isConfirm = _f[0], setIsConfirm = _f[1];
-    var _g = useState(defaultConfirmMsg), confirmMsg = _g[0], setConfirmMsg = _g[1];
-    var _h = useState(defaultConfirmOkText), confirmOkText = _h[0], setConfirmOkText = _h[1];
+    var _h = useState(confirmOnOk ? true : false), isConfirm = _h[0], setIsConfirm = _h[1];
+    var _j = useState(defaultConfirmMsg), confirmMsg = _j[0], setConfirmMsg = _j[1];
+    var _k = useState(defaultConfirmOkText), confirmOkText = _k[0], setConfirmOkText = _k[1];
     // 模态框类型
-    var _j = useState(defaultType), type = _j[0], setType = _j[1];
+    var _l = useState(defaultType), type = _l[0], setType = _l[1];
     var close = useCallback(function () {
         setOpen(false);
     }, []);
@@ -141,12 +142,27 @@ var Modal = function (_a, ref) {
             setConfirmMsg: setConfirmOkText,
         };
     });
-    var _k = useDraggable({
+    var _m = useResizable({
+        isResize: isResize,
+        minWidth: minWidth,
+        minHeight: minHeight,
+        maxWidth: maxWidth,
+        maxHeight: maxHeight,
+        defaultWidth: defaultWidth,
+        defaultHeight: defaultHeight,
+        modalRender: modalRender,
+    }), resizableWidth = _m.width, resizableModalRender = _m.resizableModalRender;
+    var _o = useDraggable({
         isDrag: isDrag,
         title: modalTitle || title,
         modalRender: modalRender,
-    }), dragTitle = _k.dragTitle, dragModalRender = _k.dragModalRender;
-    return (jsx(Modal$1, __assign({ open: open, onCancel: close, className: classes, okText: "\u4FDD\u5B58", onOk: footer ? undefined : onOkHandle, width: "70%", title: dragTitle, keyboard: false, maskClosable: false, confirmLoading: loading, cancelButtonProps: { loading: loading }, footer: footer, modalRender: dragModalRender }, resetProps)));
+    }), dragTitle = _o.dragTitle, dragModalRender = _o.dragModalRender;
+    var finalWidth = isResize ? resizableWidth : resetProps.width || "70%";
+    return (jsx(Modal$1, __assign({ open: open, onCancel: close, className: classes, okText: "\u4FDD\u5B58", onOk: footer ? undefined : onOkHandle, width: finalWidth, title: dragTitle, keyboard: false, maskClosable: false, confirmLoading: loading, cancelButtonProps: { loading: loading }, footer: footer, modalRender: function (modal) {
+            var resized = resizableModalRender(modal);
+            var dragged = dragModalRender(resized);
+            return dragged;
+        } }, resetProps)));
 };
 var ModalComponent = forwardRef(Modal);
 ModalComponent.displayName = "ZTXK_WEBUI_ModalComponent";

package/dist/es/modal/useDraggable.js

@@ -44,7 +44,7 @@ var useDraggable = function (options) {
         ? function (modal) {
             return (jsx(Draggable, __assign({ disabled: disabled, bounds: bounds, onStart: function (event, uiData) { return onStart(event, uiData); } }, { children: jsx("div", __assign({ ref: draggleRef }, { children: modal })) })));
         }
-        : options.modalRender;
+        : function (modal) { return modal; };
     return { dragTitle: dragTitle, dragModalRender: dragModalRender };
 };
 

package/dist/es/modal/useResizable.js

@@ -0,0 +1,141 @@
+import { __assign } from '../_virtual/_tslib.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useState, useRef, useCallback } from 'react';
+
+var useResizable = function (options) {
+    var isResize = options.isResize, _a = options.minWidth, minWidth = _a === void 0 ? 400 : _a, _b = options.minHeight, minHeight = _b === void 0 ? 300 : _b, maxWidth = options.maxWidth, maxHeight = options.maxHeight, _c = options.defaultWidth, defaultWidth = _c === void 0 ? "70%" : _c, _d = options.defaultHeight, defaultHeight = _d === void 0 ? "auto" : _d;
+    var _e = useState({
+        width: defaultWidth,
+        height: defaultHeight,
+    }), size = _e[0], setSize = _e[1];
+    var resizeRef = useRef(null);
+    var resizingRef = useRef({
+        direction: null,
+        startX: 0,
+        startY: 0,
+        startWidth: 0,
+        startHeight: 0,
+    });
+    // 开始调整大小
+    var onResizeStart = useCallback(function (direction, e) {
+        var _a;
+        if (!isResize) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        e.nativeEvent.stopImmediatePropagation();
+        var modalElement = (_a = resizeRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".ant-modal-content");
+        if (!modalElement) {
+            return;
+        }
+        var rect = modalElement.getBoundingClientRect();
+        resizingRef.current = {
+            direction: direction,
+            startX: e.clientX,
+            startY: e.clientY,
+            startWidth: rect.width,
+            startHeight: rect.height,
+        };
+        document.addEventListener("mousemove", onResizeMove);
+        document.addEventListener("mouseup", onResizeEnd);
+        document.body.style.cursor = getCursor(direction);
+        document.body.style.userSelect = "none";
+        document.body.classList.add("ztxk-modal-resizing");
+    }, [isResize]);
+    // 调整大小中
+    var onResizeMove = useCallback(function (e) {
+        var _a = resizingRef.current, direction = _a.direction, startX = _a.startX, startY = _a.startY, startWidth = _a.startWidth, startHeight = _a.startHeight;
+        if (!direction) {
+            return;
+        }
+        var deltaX = e.clientX - startX;
+        var deltaY = e.clientY - startY;
+        var newWidth = startWidth;
+        var newHeight = startHeight;
+        // 根据拖拽方向计算新的尺寸
+        if (direction.includes("r")) {
+            newWidth = startWidth + deltaX;
+        }
+        else if (direction.includes("l")) {
+            newWidth = startWidth - deltaX;
+        }
+        if (direction.includes("b")) {
+            newHeight = startHeight + deltaY;
+        }
+        else if (direction.includes("t")) {
+            newHeight = startHeight - deltaY;
+        }
+        // 限制最小最大值
+        newWidth = Math.max(minWidth, newWidth);
+        newHeight = Math.max(minHeight, newHeight);
+        if (maxWidth) {
+            newWidth = Math.min(maxWidth, newWidth);
+        }
+        if (maxHeight) {
+            newHeight = Math.min(maxHeight, newHeight);
+        }
+        setSize({
+            width: newWidth,
+            height: newHeight,
+        });
+    }, [minWidth, minHeight, maxWidth, maxHeight]);
+    // 结束调整大小
+    var onResizeEnd = useCallback(function () {
+        resizingRef.current.direction = null;
+        document.removeEventListener("mousemove", onResizeMove);
+        document.removeEventListener("mouseup", onResizeEnd);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+        document.body.classList.remove("ztxk-modal-resizing");
+    }, [onResizeMove]);
+    // 获取鼠标样式
+    var getCursor = function (direction) {
+        var cursorMap = {
+            tl: "nwse-resize",
+            tr: "nesw-resize",
+            bl: "nesw-resize",
+            br: "nwse-resize",
+            t: "ns-resize",
+            b: "ns-resize",
+            l: "ew-resize",
+            r: "ew-resize",
+        };
+        return cursorMap[direction];
+    };
+    // 渲染调整大小手柄
+    var renderResizeHandles = function () {
+        if (!isResize) {
+            return null;
+        }
+        var handles = [
+            "tl",
+            "tr",
+            "bl",
+            "br",
+            "t",
+            "b",
+            "l",
+            "r",
+        ];
+        return handles.map(function (direction) { return (jsx("div", { className: "ztxk-modal-resize-handle ztxk-modal-resize-handle-".concat(direction), onMouseDown: function (e) { return onResizeStart(direction, e); }, style: { cursor: getCursor(direction) } }, direction)); });
+    };
+    // 包装后的 modalRender
+    var resizableModalRender = function (modal) {
+        if (!isResize) {
+            return modal;
+        }
+        var modalElement = modal;
+        var modalWithHeight = React__default.cloneElement(modalElement, {
+            style: __assign(__assign({}, modalElement.props.style), { height: size.height }),
+        });
+        return (jsxs("div", __assign({ ref: resizeRef, className: "ztxk-modal-resizable-wrapper" }, { children: [modalWithHeight, renderResizeHandles()] })));
+    };
+    return {
+        width: size.width,
+        height: size.height,
+        resizableModalRender: resizableModalRender,
+    };
+};
+
+export { useResizable as default };