@nokecy/qc-ui 1.1.0 → 1.1.2

package/dist/cjs/ag-grid-plus/ag-gridPlus.js

@@ -376,6 +376,53 @@ function AgGridPlus(props) {
     };
   }, [gridKey, currentColumnScheme === null || currentColumnScheme === void 0 ? void 0 : currentColumnScheme.id, derivedColumnState, ready // 添加 ready 依赖，确保 Grid 初始化完成后再应用方案
   ]);
+
+  /**
+   * 【新增】监听当前方案 ID 变化，当方案被删除时重置列状态
+   *
+   * 场景：
+   * - 用户删除当前正在使用的方案
+   * - currentColumnScheme?.id 从有值变为 null
+   *
+   * 行为：
+   * - 重置列状态为初始状态（默认顺序、宽度等）
+   * - 清除所有过滤器
+   * - 清除列样式配置
+   *
+   * 优势：
+   * - 符合单向数据流架构
+   * - 适用于所有方案切换场景（删除/取消选择）
+   * - 用户体验好，自动恢复到初始状态
+   */
+  var prevSchemeIdRef = (0, _react.useRef)(currentColumnScheme === null || currentColumnScheme === void 0 ? void 0 : currentColumnScheme.id);
+  (0, _react.useEffect)(function () {
+    if (!gridKey || !apiRef.current || !ready) return;
+    var prevSchemeId = prevSchemeIdRef.current;
+    var currentSchemeId = currentColumnScheme === null || currentColumnScheme === void 0 ? void 0 : currentColumnScheme.id;
+    // 检测方案被删除：从有值变为 null/undefined
+    if (prevSchemeId && !currentSchemeId) {
+      Promise.resolve().then(function () {
+        if (!apiRef.current) return;
+
+        // 1. 重置列状态为初始状态
+
+        apiRef.current.resetColumnState();
+
+        // 2. 清除所有过滤器
+
+        apiRef.current.setFilterModel(null);
+
+        // 3. 清除列样式配置
+        setColumnCellClass({});
+      }).catch(function (error) {
+        console.error('[AgGridPlus] 重置列状态失败:', error);
+        _logger.logger.error('[AgGridPlus] 重置列状态失败', error);
+      });
+    }
+
+    // 更新引用
+    prevSchemeIdRef.current = currentSchemeId;
+  }, [gridKey, currentColumnScheme === null || currentColumnScheme === void 0 ? void 0 : currentColumnScheme.id, ready]);
   (0, _react.useEffect)(function () {
     setRowData(dataSource || propRowData || []);
   }, [dataSource, propRowData]);

package/dist/cjs/array-table/index.js

@@ -17,8 +17,6 @@ var _preview = _interopRequireDefault(require("./preview"));
 var _antd = require("antd");
 var _setting = _interopRequireDefault(require("../ag-grid-plus/setting"));
 var _gridContext = require("../ag-grid-plus/context/gridContext");
-var _useSchemeManager = require("../ag-grid-plus/context/useSchemeManager");
-var _localStorageAdapter = require("../ag-grid-plus/shared/storage/localStorageAdapter");
 var _columnGroupUtils = require("../ag-grid-plus/setting/columnGroupUtils");
 var _theme = require("../ag-grid-plus/theme");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -38,7 +36,14 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } // 导入 AG-Grid v33 主题
 //@ts-ignore
 var ArrayTableInner = (0, _react2.observer)(function (props) {
-  var height = props.height;
+  var height = props.height,
+    gridKey = props.gridKey;
+
+  // 【新增】运行时验证 gridKey
+  if (!gridKey) {
+    console.error('[ArrayTable] gridKey 是必需的属性，用于方案管理和状态持久化');
+    throw new Error('[ArrayTable] gridKey 属性是必需的。请在 x-component-props 中提供 gridKey');
+  }
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isAdd = _useState2[0],
@@ -71,10 +76,12 @@ var ArrayTableInner = (0, _react2.observer)(function (props) {
   var _useRowDrag = (0, _hooks.useRowDrag)(field),
     handleRowDragMove = _useRowDrag.handleRowDragMove;
 
-  // 从 Context 获取方案管理相关的状态和方法
-  var _useContext = (0, _react.useContext)(_gridContext.GridPlusContext),
-    currentSchemes = _useContext.currentSchemes,
-    columnSchemes = _useContext.columnSchemes;
+  // 直接使用 Context 获取方案管理状态
+  // ArrayTable 外层已经提供了完整的 GridPlusContext.Provider
+  var context = (0, _react.useContext)(_gridContext.GridPlusContext);
+  var _ref = context || {},
+    currentSchemes = _ref.currentSchemes,
+    columnSchemes = _ref.columnSchemes;
 
   // 获取当前表格的激活方案
   var currentScheme = (0, _react.useMemo)(function () {
@@ -294,8 +301,8 @@ var ArrayTableInner = (0, _react2.observer)(function (props) {
         '    <span data-ref="eSortAsc" class="ag-header-icon ag-sort-ascending-icon"></span>' + '    <span data-ref="eSortDesc" class="ag-header-icon ag-sort-descending-icon"></span>' + '    <span data-ref="eSortNone" class="ag-header-icon ag-sort-none-icon"></span>' + "  </div>" + "</div>"
       }
     },
-    getRowId: function getRowId(_ref) {
-      var data = _ref.data;
+    getRowId: function getRowId(_ref2) {
+      var data = _ref2.data;
       return data._id || data.id;
     }
     // rowDragEntireRow={true}
@@ -329,43 +336,36 @@ var ArrayTableInner = (0, _react2.observer)(function (props) {
 ArrayTableInner.displayName = "ArrayTableInner";
 
 /**
- * ArrayTable 组件 - 带 GridPlusContext Provider 包装
+ * ArrayTable 组件
+ *
+ * 注意：需要在外部使用 GridPlusContext.Provider 包裹以提供方案管理功能
+ *
+ * @example
+ * ```tsx
+ * const adapter = useMemo(() => new LocalStorageSchemeAdapter({
+ *   storageKey: `array-table-schemes-${gridKey}`
+ * }), [gridKey]);
+ *
+ * const schemeManager = useSchemeManager({ adapter, autoLoad: true });
+ *
+ * const contextValue = useMemo(() => ({
+ *   extensibleColumns: [],
+ *   columnState: undefined,
+ *   onSaveColumnState: () => {},
+ *   applyToGlobal: () => {},
+ *   resetCurrent: () => {},
+ *   resetAll: () => {},
+ *   queryFormItems: [],
+ *   ...schemeManager
+ * }), [schemeManager]);
  *
- * 提供完整的列方案管理功能支持
+ * <GridPlusContext.Provider value={contextValue}>
+ *   <ArrayTable gridKey="my-table" height={400} />
+ * </GridPlusContext.Provider>
+ * ```
  */
 //@ts-ignore
-var ArrayTable = (0, _react2.observer)(function (props) {
-  // 创建 LocalStorage 适配器实例 (使用 useMemo 避免重复创建)
-  var adapter = (0, _react.useMemo)(function () {
-    return new _localStorageAdapter.LocalStorageSchemeAdapter({
-      storageKey: "array-table-schemes-".concat(props.gridKey || 'default'),
-      enableDebugLog: false
-    });
-  }, [props.gridKey]);
-
-  // 初始化方案管理器
-  var schemeManager = (0, _useSchemeManager.useSchemeManager)({
-    adapter: adapter,
-    autoLoad: true,
-    showErrorMessage: true
-  });
-
-  // 构建 Context Value
-  var contextValue = (0, _react.useMemo)(function () {
-    return _objectSpread({
-      extensibleColumns: [],
-      columnState: undefined,
-      onSaveColumnState: function onSaveColumnState() {},
-      applyToGlobal: function applyToGlobal() {},
-      resetCurrent: function resetCurrent() {},
-      resetAll: function resetAll() {},
-      queryFormItems: []
-    }, schemeManager);
-  }, [schemeManager]);
-  return /*#__PURE__*/_react.default.createElement(_gridContext.GridPlusContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/_react.default.createElement(ArrayTableInner, props));
-});
+var ArrayTable = ArrayTableInner;
 ArrayTable.displayName = "ArrayTable";
 ArrayTable.Column = function () {
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null);

package/dist/cjs/draggableModal/index.js

@@ -9,7 +9,7 @@ var _antd = require("antd");
 var _react = _interopRequireWildcard(require("react"));
 var _reactDraggable = _interopRequireDefault(require("react-draggable"));
 require("./style.less");
-var _excluded = ["wrapClassName", "width"];
+var _excluded = ["wrapClassName", "width", "open"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -42,6 +42,7 @@ var DraggableModal = function DraggableModal(props) {
     bounds = _useState4[0],
     setBounds = _useState4[1];
   var draggleRef = (0, _react.useRef)(null);
+  var modalContentRef = (0, _react.useRef)(null);
 
   // 调整大小相关状态
   var _useState5 = (0, _react.useState)(false),
@@ -67,10 +68,24 @@ var DraggableModal = function DraggableModal(props) {
     modalPosition = _useState12[0],
     setModalPosition = _useState12[1];
 
-  // 解构 props,分离出 wrapClassName
+  // 解构 props,分离出 wrapClassName 和 open
   var propsWrapClassName = props.wrapClassName,
     width = props.width,
+    open = props.open,
     restProps = _objectWithoutProperties(props, _excluded);
+
+  // 修复 AgGrid 等组件在 Modal 中高度不展开的问题
+  // 当 Modal 打开时触发 window resize 事件
+  (0, _react.useEffect)(function () {
+    if (open) {
+      // 使用 requestAnimationFrame 和 setTimeout 确保 DOM 完全渲染
+      requestAnimationFrame(function () {
+        setTimeout(function () {
+          window.dispatchEvent(new Event('resize'));
+        }, 100);
+      });
+    }
+  }, [open]);
   var _onStart = function onStart(_event, uiData) {
     var _draggleRef$current;
     var _window$document$docu = window.document.documentElement,
@@ -167,12 +182,20 @@ var DraggableModal = function DraggableModal(props) {
         x: newLeft,
         y: newTop
       });
+
+      // 触发 window resize 事件，通知内部组件(如 AgGrid)重新计算尺寸
+      window.dispatchEvent(new Event('resize'));
     };
     var handleMouseUp = function handleMouseUp() {
       setIsResizing(false);
       setResizeDirection('');
       document.removeEventListener('mousemove', handleMouseMove);
       document.removeEventListener('mouseup', handleMouseUp);
+
+      // 拖拽结束后再次触发 resize 事件，确保内部组件完全更新
+      setTimeout(function () {
+        window.dispatchEvent(new Event('resize'));
+      }, 50);
     };
     document.addEventListener('mousemove', handleMouseMove);
     document.addEventListener('mouseup', handleMouseUp);
@@ -183,7 +206,8 @@ var DraggableModal = function DraggableModal(props) {
   var mergedWrapClassName = [propsWrapClassName, resizingClass].filter(Boolean).join(' ');
   return /*#__PURE__*/_react.default.createElement(_antd.Modal, _extends({
     maskClosable: false,
-    width: width
+    width: width,
+    open: open
   }, restProps, {
     wrapClassName: mergedWrapClassName,
     title: /*#__PURE__*/_react.default.createElement("div", {

package/dist/esm/ag-grid-plus/ag-gridPlus.js

@@ -368,6 +368,53 @@ function AgGridPlus(props) {
     };
   }, [gridKey, currentColumnScheme === null || currentColumnScheme === void 0 ? void 0 : currentColumnScheme.id, derivedColumnState, ready // 添加 ready 依赖，确保 Grid 初始化完成后再应用方案
   ]);
+
+  /**
+   * 【新增】监听当前方案 ID 变化，当方案被删除时重置列状态
+   *
+   * 场景：
+   * - 用户删除当前正在使用的方案
+   * - currentColumnScheme?.id 从有值变为 null
+   *
+   * 行为：
+   * - 重置列状态为初始状态（默认顺序、宽度等）
+   * - 清除所有过滤器
+   * - 清除列样式配置
+   *
+   * 优势：
+   * - 符合单向数据流架构
+   * - 适用于所有方案切换场景（删除/取消选择）
+   * - 用户体验好，自动恢复到初始状态
+   */
+  var prevSchemeIdRef = useRef(currentColumnScheme === null || currentColumnScheme === void 0 ? void 0 : currentColumnScheme.id);
+  useEffect(function () {
+    if (!gridKey || !apiRef.current || !ready) return;
+    var prevSchemeId = prevSchemeIdRef.current;
+    var currentSchemeId = currentColumnScheme === null || currentColumnScheme === void 0 ? void 0 : currentColumnScheme.id;
+    // 检测方案被删除：从有值变为 null/undefined
+    if (prevSchemeId && !currentSchemeId) {
+      Promise.resolve().then(function () {
+        if (!apiRef.current) return;
+
+        // 1. 重置列状态为初始状态
+
+        apiRef.current.resetColumnState();
+
+        // 2. 清除所有过滤器
+
+        apiRef.current.setFilterModel(null);
+
+        // 3. 清除列样式配置
+        setColumnCellClass({});
+      }).catch(function (error) {
+        console.error('[AgGridPlus] 重置列状态失败:', error);
+        logger.error('[AgGridPlus] 重置列状态失败', error);
+      });
+    }
+
+    // 更新引用
+    prevSchemeIdRef.current = currentSchemeId;
+  }, [gridKey, currentColumnScheme === null || currentColumnScheme === void 0 ? void 0 : currentColumnScheme.id, ready]);
   useEffect(function () {
     setRowData(dataSource || propRowData || []);
   }, [dataSource, propRowData]);

package/dist/esm/array-table/index.js

@@ -25,8 +25,6 @@ import PreviewArrayTable from "./preview";
 import { Space } from "antd";
 import Setting from "../ag-grid-plus/setting";
 import { GridPlusContext } from "../ag-grid-plus/context/gridContext";
-import { useSchemeManager } from "../ag-grid-plus/context/useSchemeManager";
-import { LocalStorageSchemeAdapter } from "../ag-grid-plus/shared/storage/localStorageAdapter";
 import { flatConfigToColumnState, flatConfigToGridState } from "../ag-grid-plus/setting/columnGroupUtils";
 
 // 导入 AG-Grid v33 主题
@@ -34,7 +32,14 @@ import { agGridTheme } from "../ag-grid-plus/theme";
 
 //@ts-ignore
 var ArrayTableInner = observer(function (props) {
-  var height = props.height;
+  var height = props.height,
+    gridKey = props.gridKey;
+
+  // 【新增】运行时验证 gridKey
+  if (!gridKey) {
+    console.error('[ArrayTable] gridKey 是必需的属性，用于方案管理和状态持久化');
+    throw new Error('[ArrayTable] gridKey 属性是必需的。请在 x-component-props 中提供 gridKey');
+  }
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isAdd = _useState2[0],
@@ -67,10 +72,12 @@ var ArrayTableInner = observer(function (props) {
   var _useRowDrag = useRowDrag(field),
     handleRowDragMove = _useRowDrag.handleRowDragMove;
 
-  // 从 Context 获取方案管理相关的状态和方法
-  var _useContext = useContext(GridPlusContext),
-    currentSchemes = _useContext.currentSchemes,
-    columnSchemes = _useContext.columnSchemes;
+  // 直接使用 Context 获取方案管理状态
+  // ArrayTable 外层已经提供了完整的 GridPlusContext.Provider
+  var context = useContext(GridPlusContext);
+  var _ref = context || {},
+    currentSchemes = _ref.currentSchemes,
+    columnSchemes = _ref.columnSchemes;
 
   // 获取当前表格的激活方案
   var currentScheme = useMemo(function () {
@@ -290,8 +297,8 @@ var ArrayTableInner = observer(function (props) {
         '    <span data-ref="eSortAsc" class="ag-header-icon ag-sort-ascending-icon"></span>' + '    <span data-ref="eSortDesc" class="ag-header-icon ag-sort-descending-icon"></span>' + '    <span data-ref="eSortNone" class="ag-header-icon ag-sort-none-icon"></span>' + "  </div>" + "</div>"
       }
     },
-    getRowId: function getRowId(_ref) {
-      var data = _ref.data;
+    getRowId: function getRowId(_ref2) {
+      var data = _ref2.data;
       return data._id || data.id;
     }
     // rowDragEntireRow={true}
@@ -325,43 +332,36 @@ var ArrayTableInner = observer(function (props) {
 ArrayTableInner.displayName = "ArrayTableInner";
 
 /**
- * ArrayTable 组件 - 带 GridPlusContext Provider 包装
+ * ArrayTable 组件
+ *
+ * 注意：需要在外部使用 GridPlusContext.Provider 包裹以提供方案管理功能
+ *
+ * @example
+ * ```tsx
+ * const adapter = useMemo(() => new LocalStorageSchemeAdapter({
+ *   storageKey: `array-table-schemes-${gridKey}`
+ * }), [gridKey]);
+ *
+ * const schemeManager = useSchemeManager({ adapter, autoLoad: true });
+ *
+ * const contextValue = useMemo(() => ({
+ *   extensibleColumns: [],
+ *   columnState: undefined,
+ *   onSaveColumnState: () => {},
+ *   applyToGlobal: () => {},
+ *   resetCurrent: () => {},
+ *   resetAll: () => {},
+ *   queryFormItems: [],
+ *   ...schemeManager
+ * }), [schemeManager]);
  *
- * 提供完整的列方案管理功能支持
+ * <GridPlusContext.Provider value={contextValue}>
+ *   <ArrayTable gridKey="my-table" height={400} />
+ * </GridPlusContext.Provider>
+ * ```
  */
 //@ts-ignore
-var ArrayTable = observer(function (props) {
-  // 创建 LocalStorage 适配器实例 (使用 useMemo 避免重复创建)
-  var adapter = useMemo(function () {
-    return new LocalStorageSchemeAdapter({
-      storageKey: "array-table-schemes-".concat(props.gridKey || 'default'),
-      enableDebugLog: false
-    });
-  }, [props.gridKey]);
-
-  // 初始化方案管理器
-  var schemeManager = useSchemeManager({
-    adapter: adapter,
-    autoLoad: true,
-    showErrorMessage: true
-  });
-
-  // 构建 Context Value
-  var contextValue = useMemo(function () {
-    return _objectSpread({
-      extensibleColumns: [],
-      columnState: undefined,
-      onSaveColumnState: function onSaveColumnState() {},
-      applyToGlobal: function applyToGlobal() {},
-      resetCurrent: function resetCurrent() {},
-      resetAll: function resetAll() {},
-      queryFormItems: []
-    }, schemeManager);
-  }, [schemeManager]);
-  return /*#__PURE__*/React.createElement(GridPlusContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/React.createElement(ArrayTableInner, props));
-});
+var ArrayTable = ArrayTableInner;
 ArrayTable.displayName = "ArrayTable";
 ArrayTable.Column = function () {
   return /*#__PURE__*/React.createElement(Fragment, null);

package/dist/esm/draggableModal/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["wrapClassName", "width"];
+var _excluded = ["wrapClassName", "width", "open"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -9,7 +9,7 @@ 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 { Modal } from 'antd';
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import Draggable from 'react-draggable';
 import "./style.less";
 
@@ -33,6 +33,7 @@ var DraggableModal = function DraggableModal(props) {
     bounds = _useState4[0],
     setBounds = _useState4[1];
   var draggleRef = useRef(null);
+  var modalContentRef = useRef(null);
 
   // 调整大小相关状态
   var _useState5 = useState(false),
@@ -58,10 +59,24 @@ var DraggableModal = function DraggableModal(props) {
     modalPosition = _useState12[0],
     setModalPosition = _useState12[1];
 
-  // 解构 props,分离出 wrapClassName
+  // 解构 props,分离出 wrapClassName 和 open
   var propsWrapClassName = props.wrapClassName,
     width = props.width,
+    open = props.open,
     restProps = _objectWithoutProperties(props, _excluded);
+
+  // 修复 AgGrid 等组件在 Modal 中高度不展开的问题
+  // 当 Modal 打开时触发 window resize 事件
+  useEffect(function () {
+    if (open) {
+      // 使用 requestAnimationFrame 和 setTimeout 确保 DOM 完全渲染
+      requestAnimationFrame(function () {
+        setTimeout(function () {
+          window.dispatchEvent(new Event('resize'));
+        }, 100);
+      });
+    }
+  }, [open]);
   var _onStart = function onStart(_event, uiData) {
     var _draggleRef$current;
     var _window$document$docu = window.document.documentElement,
@@ -158,12 +173,20 @@ var DraggableModal = function DraggableModal(props) {
         x: newLeft,
         y: newTop
       });
+
+      // 触发 window resize 事件，通知内部组件(如 AgGrid)重新计算尺寸
+      window.dispatchEvent(new Event('resize'));
     };
     var handleMouseUp = function handleMouseUp() {
       setIsResizing(false);
       setResizeDirection('');
       document.removeEventListener('mousemove', handleMouseMove);
       document.removeEventListener('mouseup', handleMouseUp);
+
+      // 拖拽结束后再次触发 resize 事件，确保内部组件完全更新
+      setTimeout(function () {
+        window.dispatchEvent(new Event('resize'));
+      }, 50);
     };
     document.addEventListener('mousemove', handleMouseMove);
     document.addEventListener('mouseup', handleMouseUp);
@@ -174,7 +197,8 @@ var DraggableModal = function DraggableModal(props) {
   var mergedWrapClassName = [propsWrapClassName, resizingClass].filter(Boolean).join(' ');
   return /*#__PURE__*/React.createElement(Modal, _extends({
     maskClosable: false,
-    width: width
+    width: width,
+    open: open
   }, restProps, {
     wrapClassName: mergedWrapClassName,
     title: /*#__PURE__*/React.createElement("div", {