wargerm 0.4.32 → 0.4.33

package/dist/components/DragBox/index.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+declare type Props = {
+    title?: string | ReactNode;
+    children?: string | ReactNode;
+    closeIcon?: ReactNode;
+    onClose?: () => void;
+    visible: boolean;
+    isDrag?: boolean;
+    isResize?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+};
+export default function DragBox({ title, children, closeIcon, onClose, visible, isDrag, isResize, className, style, }: Props): false | JSX.Element;
+export {};

package/dist/index.css

@@ -29,6 +29,7 @@
   /* Common Styles */
   /* Bullets */
   /* Progress */
+  /* Animation css */
 }
 [data-prefers-color='dark'] .__dumi-default-previewer {
   background: linear-gradient(#1c274f 0%, #2f4262 100%);
@@ -1412,6 +1413,111 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
 [data-prefers-color='dark'] .ant-modal-confirm-btns {
   display: flex;
 }
+[data-prefers-color='dark'] [class*='animation-'] {
+  -webkit-animation-duration: 0.5s;
+          animation-duration: 0.5s;
+  -webkit-animation-timing-function: ease-out;
+          animation-timing-function: ease-out;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+}
+[data-prefers-color='dark'] .animation-fade {
+  -webkit-animation-name: fadeIn;
+          animation-name: fadeIn;
+  -webkit-animation-duration: 0.8s;
+          animation-duration: 0.8s;
+  -webkit-animation-timing-function: linear;
+          animation-timing-function: linear;
+}
+[data-prefers-color='dark'] .animation-fade-out {
+  -webkit-animation-name: fadeOut;
+          animation-name: fadeOut;
+  -webkit-animation-duration: 0.8s;
+          animation-duration: 0.8s;
+  -webkit-animation-timing-function: linear;
+          animation-timing-function: linear;
+}
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+[data-prefers-color='dark'] .drag-container {
+  position: fixed;
+  width: 300px;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  z-index: 999;
+  min-width: 50px;
+  min-height: 50px;
+}
+[data-prefers-color='dark'] .drag-container .drag-title {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+[data-prefers-color='dark'] .drag-container .drag-title.move {
+  cursor: move;
+  z-index: 100;
+}
+[data-prefers-color='dark'] .drag-container .drag-body {
+  flex: 1;
+}
+[data-prefers-color='dark'] .resizer {
+  width: 10px;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  cursor: e-resize;
+  z-index: 100;
+}
+[data-prefers-color='dark'] .resizeb {
+  width: 100%;
+  height: 10px;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  cursor: n-resize;
+  z-index: 100;
+}
+[data-prefers-color='dark'] .resizerb {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  cursor: se-resize;
+  z-index: 101;
+}
 [data-prefers-color='dark'] .empty {
   background: #16191e;
   width: 100%;
@@ -1522,6 +1628,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
   /* Common Styles */
   /* Bullets */
   /* Progress */
+  /* Animation css */
 }
 [data-prefers-color='light'] .ant-btn-dangerous.ant-btn-primary {
   color: #d8655f;
@@ -2648,6 +2755,111 @@ button[data-prefers-color='light'] .swiper-pagination-bullet {
 [data-prefers-color='light'] .ant-modal-confirm-btns {
   display: flex;
 }
+[data-prefers-color='light'] [class*='animation-'] {
+  -webkit-animation-duration: 0.5s;
+          animation-duration: 0.5s;
+  -webkit-animation-timing-function: ease-out;
+          animation-timing-function: ease-out;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+}
+[data-prefers-color='light'] .animation-fade {
+  -webkit-animation-name: fadeIn;
+          animation-name: fadeIn;
+  -webkit-animation-duration: 0.8s;
+          animation-duration: 0.8s;
+  -webkit-animation-timing-function: linear;
+          animation-timing-function: linear;
+}
+[data-prefers-color='light'] .animation-fade-out {
+  -webkit-animation-name: fadeOut;
+          animation-name: fadeOut;
+  -webkit-animation-duration: 0.8s;
+          animation-duration: 0.8s;
+  -webkit-animation-timing-function: linear;
+          animation-timing-function: linear;
+}
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+[data-prefers-color='light'] .drag-container {
+  position: fixed;
+  width: 300px;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  z-index: 999;
+  min-width: 50px;
+  min-height: 50px;
+}
+[data-prefers-color='light'] .drag-container .drag-title {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+[data-prefers-color='light'] .drag-container .drag-title.move {
+  cursor: move;
+  z-index: 100;
+}
+[data-prefers-color='light'] .drag-container .drag-body {
+  flex: 1;
+}
+[data-prefers-color='light'] .resizer {
+  width: 10px;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  cursor: e-resize;
+  z-index: 100;
+}
+[data-prefers-color='light'] .resizeb {
+  width: 100%;
+  height: 10px;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  cursor: n-resize;
+  z-index: 100;
+}
+[data-prefers-color='light'] .resizerb {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  cursor: se-resize;
+  z-index: 101;
+}
 [data-prefers-color='light'] .ant-form-item-label > label {
   font-size: 16px;
   color: #4281a1;

package/dist/index.d.ts

@@ -22,6 +22,7 @@ export { default as Breadcrumb } from './components/Breadcrumb';
 export { default as Card } from './components/Card';
 export { default as Modal } from './components/Modal';
 export { default as ModalTips } from './components/ModalTips';
+export { default as DragBox } from './components/DragBox';
 export { default as ModalForm } from './components/ModalForm';
 export { default as TabelCard } from './components/TabelCard';
 export { default as Cascader } from './components/Cascader';

package/dist/index.esm.css

@@ -29,6 +29,7 @@
   /* Common Styles */
   /* Bullets */
   /* Progress */
+  /* Animation css */
 }
 [data-prefers-color='dark'] .__dumi-default-previewer {
   background: linear-gradient(#1c274f 0%, #2f4262 100%);
@@ -1412,6 +1413,111 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
 [data-prefers-color='dark'] .ant-modal-confirm-btns {
   display: flex;
 }
+[data-prefers-color='dark'] [class*='animation-'] {
+  -webkit-animation-duration: 0.5s;
+          animation-duration: 0.5s;
+  -webkit-animation-timing-function: ease-out;
+          animation-timing-function: ease-out;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+}
+[data-prefers-color='dark'] .animation-fade {
+  -webkit-animation-name: fadeIn;
+          animation-name: fadeIn;
+  -webkit-animation-duration: 0.8s;
+          animation-duration: 0.8s;
+  -webkit-animation-timing-function: linear;
+          animation-timing-function: linear;
+}
+[data-prefers-color='dark'] .animation-fade-out {
+  -webkit-animation-name: fadeOut;
+          animation-name: fadeOut;
+  -webkit-animation-duration: 0.8s;
+          animation-duration: 0.8s;
+  -webkit-animation-timing-function: linear;
+          animation-timing-function: linear;
+}
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+[data-prefers-color='dark'] .drag-container {
+  position: fixed;
+  width: 300px;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  z-index: 999;
+  min-width: 50px;
+  min-height: 50px;
+}
+[data-prefers-color='dark'] .drag-container .drag-title {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+[data-prefers-color='dark'] .drag-container .drag-title.move {
+  cursor: move;
+  z-index: 100;
+}
+[data-prefers-color='dark'] .drag-container .drag-body {
+  flex: 1;
+}
+[data-prefers-color='dark'] .resizer {
+  width: 10px;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  cursor: e-resize;
+  z-index: 100;
+}
+[data-prefers-color='dark'] .resizeb {
+  width: 100%;
+  height: 10px;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  cursor: n-resize;
+  z-index: 100;
+}
+[data-prefers-color='dark'] .resizerb {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  cursor: se-resize;
+  z-index: 101;
+}
 [data-prefers-color='dark'] .empty {
   background: #16191e;
   width: 100%;
@@ -1522,6 +1628,7 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
   /* Common Styles */
   /* Bullets */
   /* Progress */
+  /* Animation css */
 }
 [data-prefers-color='light'] .ant-btn-dangerous.ant-btn-primary {
   color: #d8655f;
@@ -2648,6 +2755,111 @@ button[data-prefers-color='light'] .swiper-pagination-bullet {
 [data-prefers-color='light'] .ant-modal-confirm-btns {
   display: flex;
 }
+[data-prefers-color='light'] [class*='animation-'] {
+  -webkit-animation-duration: 0.5s;
+          animation-duration: 0.5s;
+  -webkit-animation-timing-function: ease-out;
+          animation-timing-function: ease-out;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+}
+[data-prefers-color='light'] .animation-fade {
+  -webkit-animation-name: fadeIn;
+          animation-name: fadeIn;
+  -webkit-animation-duration: 0.8s;
+          animation-duration: 0.8s;
+  -webkit-animation-timing-function: linear;
+          animation-timing-function: linear;
+}
+[data-prefers-color='light'] .animation-fade-out {
+  -webkit-animation-name: fadeOut;
+          animation-name: fadeOut;
+  -webkit-animation-duration: 0.8s;
+          animation-duration: 0.8s;
+  -webkit-animation-timing-function: linear;
+          animation-timing-function: linear;
+}
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+[data-prefers-color='light'] .drag-container {
+  position: fixed;
+  width: 300px;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  z-index: 999;
+  min-width: 50px;
+  min-height: 50px;
+}
+[data-prefers-color='light'] .drag-container .drag-title {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+[data-prefers-color='light'] .drag-container .drag-title.move {
+  cursor: move;
+  z-index: 100;
+}
+[data-prefers-color='light'] .drag-container .drag-body {
+  flex: 1;
+}
+[data-prefers-color='light'] .resizer {
+  width: 10px;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  cursor: e-resize;
+  z-index: 100;
+}
+[data-prefers-color='light'] .resizeb {
+  width: 100%;
+  height: 10px;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  cursor: n-resize;
+  z-index: 100;
+}
+[data-prefers-color='light'] .resizerb {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  cursor: se-resize;
+  z-index: 101;
+}
 [data-prefers-color='light'] .ant-form-item-label > label {
   font-size: 16px;
   color: #4281a1;

package/dist/index.esm.js

@@ -10323,6 +10323,185 @@ Modal$1.hidden = function () {
   ModalContainer[modelSysbol] && ModalContainer[modelSysbol].hidden();
 };
 
+function DragBox(_ref) {
+  var title = _ref.title,
+      children = _ref.children,
+      closeIcon = _ref.closeIcon,
+      onClose = _ref.onClose,
+      visible = _ref.visible,
+      isDrag = _ref.isDrag,
+      isResize = _ref.isResize,
+      className = _ref.className,
+      style = _ref.style;
+  var titleRef = useRef(null);
+  var containerRef = useRef(null);
+  var ltRef = useRef(null);
+  var rRef = useRef(null);
+  var bRef = useRef(null);
+  var rbRef = useRef(null);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      delayVisiable = _useState2[0],
+      setDelayVisiable = _useState2[1];
+
+  useEffect(function () {
+    var timer = null;
+
+    if (visible) {
+      setDelayVisiable(visible);
+    } else {
+      timer = setTimeout(function () {
+        setDelayVisiable(visible);
+      }, 1000);
+    }
+
+    return function () {
+      timer && clearTimeout(timer);
+    };
+  }, [visible]);
+  useEffect(function () {
+    var tltleEl = titleRef.current;
+    var containerEl = containerRef.current;
+    console.log(titleRef, containerRef);
+    var tltleElOnmousedown = null;
+
+    if (tltleEl && containerEl && isDrag) {
+      tltleElOnmousedown = function tltleElOnmousedown(eventDown) {
+        var left = containerEl.offsetLeft;
+        var top = containerEl.offsetTop;
+        var downX = eventDown.clientX;
+        var downY = eventDown.clientY;
+        console.log(left, top);
+
+        document.onmousemove = function (eventMove) {
+          eventMove.stopPropagation();
+          eventMove.preventDefault();
+          var moveX = eventMove.clientX - downX;
+          var moveY = eventMove.clientY - downY;
+          containerEl.style.left = "".concat(left + moveX, "px");
+          containerEl.style.top = "".concat(top + moveY, "px");
+        };
+      };
+
+      tltleEl.onmousedown = tltleElOnmousedown;
+    }
+
+    var rEl = rRef.current;
+    var bEl = bRef.current;
+    var rbEl = rbRef.current;
+    var rElOnmousedown = null;
+    var bElOnmousedown = null;
+    var rbElOnmousedown = null;
+
+    if (containerEl && isResize && rEl && bEl && rbEl) {
+      rElOnmousedown = function rElOnmousedown(e) {
+        var disX = e.clientX - rEl.offsetLeft;
+
+        document.onmousemove = function (e) {
+          e.stopPropagation();
+          e.preventDefault();
+          var l = e.clientX - disX;
+          containerEl.style.width = "".concat(l, "px");
+        };
+
+        document.onmouseup = function (e) {
+          document.onmousemove = null;
+        };
+      };
+
+      rEl.onmousedown = rElOnmousedown;
+
+      bElOnmousedown = function bElOnmousedown(e) {
+        var disY = e.clientY - bEl.offsetTop;
+
+        document.onmousemove = function (e) {
+          e.stopPropagation();
+          e.preventDefault();
+          var h = e.clientY - disY;
+          containerEl.style.height = "".concat(h, "px");
+        };
+
+        document.onmouseup = function (e) {
+          document.onmousemove = null;
+        };
+      };
+
+      bEl.onmousedown = bElOnmousedown;
+
+      rbElOnmousedown = function rbElOnmousedown(e) {
+        var disX = e.clientX - rbEl.offsetLeft;
+        var disY = e.clientY - rbEl.offsetTop;
+
+        document.onmousemove = function (e) {
+          e.stopPropagation();
+          e.preventDefault();
+          var l = e.clientX - disX;
+          var h = e.clientY - disY;
+          containerEl.style.width = "".concat(l, "px");
+          containerEl.style.height = "".concat(h, "px");
+        };
+
+        document.onmouseup = function (e) {
+          document.onmousemove = null;
+        };
+      };
+
+      rbEl.onmousedown = rbElOnmousedown;
+    }
+
+    document.onmouseup = function (eventMove) {
+      document.onmousemove = null;
+    };
+
+    return function () {
+      if (tltleElOnmousedown) {
+        document.onmousemove = null;
+      }
+
+      if (rElOnmousedown) {
+        rElOnmousedown = null;
+      }
+
+      if (bElOnmousedown) {
+        rElOnmousedown = null;
+      }
+
+      if (rbElOnmousedown) {
+        rElOnmousedown = null;
+      }
+    };
+  }, [isDrag, delayVisiable, visible, isResize]);
+  return delayVisiable && /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    className: "drag-container ".concat(visible ? 'animation-fade' : 'animation-fade-out', "  ").concat(className),
+    style: _objectSpread2({
+      animationDelay: "0.3s"
+    }, style || {})
+  }, isResize && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: rRef,
+    className: "resizer"
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: bRef,
+    className: "resizeb"
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: rbRef,
+    className: "resizerb"
+  })), /*#__PURE__*/React.createElement("div", {
+    ref: titleRef,
+    className: "drag-title ".concat(isDrag ? 'move' : '')
+  }, title, /*#__PURE__*/React.createElement("span", {
+    style: {
+      cursor: 'pointer'
+    },
+    onClick: function onClick() {
+      onClose && onClose();
+    }
+  }, closeIcon || /*#__PURE__*/React.createElement(CloseCircleOutlined, null))), /*#__PURE__*/React.createElement("div", {
+    className: "drag-body"
+  }, children));
+}
+
 var _excluded$g = ["columns", "extraColumns", "search", "visible", "setVisible", "disabled", "submitMethod", "onSubmitSuccess", "title", "record", "onFormChange", "formItemChild"];
 
 var ModalForm = function ModalForm(props, ref) {
@@ -12442,4 +12621,4 @@ function WaterLevelCharts(config) {
   });
 }
 
-export { Index$9 as AutoScroll, Index$b as Breadcrumb, WButton as Button, index$1 as Card, WCascader as Cascader, Index$3 as Checkbox, Index$8 as CountUp, Index$1 as DatePicker, index as IconFont, Index as Input, WInputNumber as InputNumber, LineEcharts, Modal, ModalForm$1 as ModalForm, Modal$1 as ModalTips, Index$7 as Number, NumericInput, Index$2 as Radio, Select, Index$a as Swiper, WSwitch as Switch, index$2 as TabelCard, Table, Index$6 as TreeSelect, index$4 as Video, index$3 as VideoPlayer, Index$5 as WDatePicker, WForm$1 as WForm, WaterLevelCharts, WebsocketHeart };
+export { Index$9 as AutoScroll, Index$b as Breadcrumb, WButton as Button, index$1 as Card, WCascader as Cascader, Index$3 as Checkbox, Index$8 as CountUp, Index$1 as DatePicker, DragBox, index as IconFont, Index as Input, WInputNumber as InputNumber, LineEcharts, Modal, ModalForm$1 as ModalForm, Modal$1 as ModalTips, Index$7 as Number, NumericInput, Index$2 as Radio, Select, Index$a as Swiper, WSwitch as Switch, index$2 as TabelCard, Table, Index$6 as TreeSelect, index$4 as Video, index$3 as VideoPlayer, Index$5 as WDatePicker, WForm$1 as WForm, WaterLevelCharts, WebsocketHeart };

package/dist/index.js

@@ -10382,6 +10382,185 @@ Modal$1.hidden = function () {
   ModalContainer[modelSysbol] && ModalContainer[modelSysbol].hidden();
 };
 
+function DragBox(_ref) {
+  var title = _ref.title,
+      children = _ref.children,
+      closeIcon = _ref.closeIcon,
+      onClose = _ref.onClose,
+      visible = _ref.visible,
+      isDrag = _ref.isDrag,
+      isResize = _ref.isResize,
+      className = _ref.className,
+      style = _ref.style;
+  var titleRef = React.useRef(null);
+  var containerRef = React.useRef(null);
+  var ltRef = React.useRef(null);
+  var rRef = React.useRef(null);
+  var bRef = React.useRef(null);
+  var rbRef = React.useRef(null);
+
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      delayVisiable = _useState2[0],
+      setDelayVisiable = _useState2[1];
+
+  React.useEffect(function () {
+    var timer = null;
+
+    if (visible) {
+      setDelayVisiable(visible);
+    } else {
+      timer = setTimeout(function () {
+        setDelayVisiable(visible);
+      }, 1000);
+    }
+
+    return function () {
+      timer && clearTimeout(timer);
+    };
+  }, [visible]);
+  React.useEffect(function () {
+    var tltleEl = titleRef.current;
+    var containerEl = containerRef.current;
+    console.log(titleRef, containerRef);
+    var tltleElOnmousedown = null;
+
+    if (tltleEl && containerEl && isDrag) {
+      tltleElOnmousedown = function tltleElOnmousedown(eventDown) {
+        var left = containerEl.offsetLeft;
+        var top = containerEl.offsetTop;
+        var downX = eventDown.clientX;
+        var downY = eventDown.clientY;
+        console.log(left, top);
+
+        document.onmousemove = function (eventMove) {
+          eventMove.stopPropagation();
+          eventMove.preventDefault();
+          var moveX = eventMove.clientX - downX;
+          var moveY = eventMove.clientY - downY;
+          containerEl.style.left = "".concat(left + moveX, "px");
+          containerEl.style.top = "".concat(top + moveY, "px");
+        };
+      };
+
+      tltleEl.onmousedown = tltleElOnmousedown;
+    }
+
+    var rEl = rRef.current;
+    var bEl = bRef.current;
+    var rbEl = rbRef.current;
+    var rElOnmousedown = null;
+    var bElOnmousedown = null;
+    var rbElOnmousedown = null;
+
+    if (containerEl && isResize && rEl && bEl && rbEl) {
+      rElOnmousedown = function rElOnmousedown(e) {
+        var disX = e.clientX - rEl.offsetLeft;
+
+        document.onmousemove = function (e) {
+          e.stopPropagation();
+          e.preventDefault();
+          var l = e.clientX - disX;
+          containerEl.style.width = "".concat(l, "px");
+        };
+
+        document.onmouseup = function (e) {
+          document.onmousemove = null;
+        };
+      };
+
+      rEl.onmousedown = rElOnmousedown;
+
+      bElOnmousedown = function bElOnmousedown(e) {
+        var disY = e.clientY - bEl.offsetTop;
+
+        document.onmousemove = function (e) {
+          e.stopPropagation();
+          e.preventDefault();
+          var h = e.clientY - disY;
+          containerEl.style.height = "".concat(h, "px");
+        };
+
+        document.onmouseup = function (e) {
+          document.onmousemove = null;
+        };
+      };
+
+      bEl.onmousedown = bElOnmousedown;
+
+      rbElOnmousedown = function rbElOnmousedown(e) {
+        var disX = e.clientX - rbEl.offsetLeft;
+        var disY = e.clientY - rbEl.offsetTop;
+
+        document.onmousemove = function (e) {
+          e.stopPropagation();
+          e.preventDefault();
+          var l = e.clientX - disX;
+          var h = e.clientY - disY;
+          containerEl.style.width = "".concat(l, "px");
+          containerEl.style.height = "".concat(h, "px");
+        };
+
+        document.onmouseup = function (e) {
+          document.onmousemove = null;
+        };
+      };
+
+      rbEl.onmousedown = rbElOnmousedown;
+    }
+
+    document.onmouseup = function (eventMove) {
+      document.onmousemove = null;
+    };
+
+    return function () {
+      if (tltleElOnmousedown) {
+        document.onmousemove = null;
+      }
+
+      if (rElOnmousedown) {
+        rElOnmousedown = null;
+      }
+
+      if (bElOnmousedown) {
+        rElOnmousedown = null;
+      }
+
+      if (rbElOnmousedown) {
+        rElOnmousedown = null;
+      }
+    };
+  }, [isDrag, delayVisiable, visible, isResize]);
+  return delayVisiable && /*#__PURE__*/React__default['default'].createElement("div", {
+    ref: containerRef,
+    className: "drag-container ".concat(visible ? 'animation-fade' : 'animation-fade-out', "  ").concat(className),
+    style: _objectSpread2({
+      animationDelay: "0.3s"
+    }, style || {})
+  }, isResize && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+    ref: rRef,
+    className: "resizer"
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    ref: bRef,
+    className: "resizeb"
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    ref: rbRef,
+    className: "resizerb"
+  })), /*#__PURE__*/React__default['default'].createElement("div", {
+    ref: titleRef,
+    className: "drag-title ".concat(isDrag ? 'move' : '')
+  }, title, /*#__PURE__*/React__default['default'].createElement("span", {
+    style: {
+      cursor: 'pointer'
+    },
+    onClick: function onClick() {
+      onClose && onClose();
+    }
+  }, closeIcon || /*#__PURE__*/React__default['default'].createElement(icons.CloseCircleOutlined, null))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "drag-body"
+  }, children));
+}
+
 var _excluded$g = ["columns", "extraColumns", "search", "visible", "setVisible", "disabled", "submitMethod", "onSubmitSuccess", "title", "record", "onFormChange", "formItemChild"];
 
 var ModalForm = function ModalForm(props, ref) {
@@ -12509,6 +12688,7 @@ exports.Cascader = WCascader;
 exports.Checkbox = Index$3;
 exports.CountUp = Index$8;
 exports.DatePicker = Index$1;
+exports.DragBox = DragBox;
 exports.IconFont = index;
 exports.Input = Index;
 exports.InputNumber = WInputNumber;

package/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "wargerm",
-  "version": "0.4.32",
+  "version": "0.4.33",
   "scripts": {
     "dev": "dumi dev",
     "docs:build": "dumi build",