wargerm 0.7.32 → 0.7.34

package/dist/components/Modal/dialog.d.ts

@@ -17,9 +17,10 @@ declare type Props = {
     width?: number;
     className?: string;
     wrapClassName?: string;
+    fullScreenStyle?: React.CSSProperties;
     style?: React.CSSProperties;
     children?: ReactNode;
     ref?: any;
 };
-declare const _default: React.ForwardRefExoticComponent<Pick<Props, "width" | "open" | "destroyOnClose" | "closeCb" | "onClose" | "hiddenMask" | "isResize" | "isDrag" | "className" | "wrapClassName" | "style" | "title" | "onOk" | "onCancel" | "footer" | "content" | "okText" | "cancelText" | "children"> & React.RefAttributes<unknown>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "width" | "open" | "destroyOnClose" | "closeCb" | "onClose" | "hiddenMask" | "isResize" | "isDrag" | "className" | "wrapClassName" | "fullScreenStyle" | "style" | "title" | "onOk" | "onCancel" | "footer" | "content" | "okText" | "cancelText" | "children"> & React.RefAttributes<unknown>>;
 export default _default;

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

@@ -11,13 +11,17 @@ declare type Props = {
     cancelText?: string;
     open?: boolean;
     renderClose?: ReactNode;
+    renderMin?: ReactNode;
+    renderFullScreen?: ReactNode;
     destroyOnClose?: boolean;
     hiddenMask?: boolean;
     isDrag?: boolean;
+    showFullscreen?: boolean;
     isResize?: boolean;
     width?: number;
     className?: string;
     wrapClassName?: string;
+    fullscreenClassName?: string;
     ref?: any;
     style?: React.CSSProperties;
 };
@@ -30,11 +34,14 @@ declare class Modal extends React.PureComponent<Props> {
     } | undefined;
     static hidden: () => void;
     static destory: () => void;
+    state: {
+        isFullScreen: boolean;
+    };
     renderFooter: () => JSX.Element | null;
     containerRef: React.RefObject<any>;
     titleRef: React.RefObject<any>;
+    componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<{}>, snapshot?: any): void;
     renderTop: () => JSX.Element;
-    componentDidMount(): void;
     renderContent: () => any;
     render(): JSX.Element;
 }

package/dist/index.esm.js

@@ -3,7 +3,7 @@ import React, { useRef, useEffect, useMemo, useState, useCallback, useImperative
 import { cloneDeep, uniqBy, chunk, isEmpty } from 'lodash-es';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import { Menu, Dropdown, Button, Input, Upload as Upload$1, Modal as Modal$2, message, InputNumber, DatePicker, Radio, Space, Checkbox, Select, Switch, Tooltip, TreeSelect as TreeSelect$1, Cascader, Form, Row, Col, Spin, Pagination, Breadcrumb, ConfigProvider, notification } from 'antd';
-import { createFromIconfontCN, PlusOutlined, CloseCircleOutlined, SearchOutlined, ReloadOutlined, EllipsisOutlined, ExclamationCircleOutlined, EyeOutlined, EditOutlined, DeleteOutlined, LeftOutlined, RightOutlined, CloseOutlined } from '@ant-design/icons';
+import { createFromIconfontCN, PlusOutlined, CloseCircleOutlined, SearchOutlined, ReloadOutlined, MinusOutlined, FullscreenOutlined, EllipsisOutlined, ExclamationCircleOutlined, EyeOutlined, EditOutlined, DeleteOutlined, LeftOutlined, RightOutlined, CloseOutlined } from '@ant-design/icons';
 import FileViewer from 'react-file-viewer';
 import classnames from 'classnames';
 import zhCN from 'antd/es/date-picker/locale/zh_CN';
@@ -6085,6 +6085,7 @@ function DialogModel(props, ref) {
       _props$className = props.className,
       className = _props$className === void 0 ? 'default-dialog' : _props$className,
       wrapClassName = props.wrapClassName,
+      fullScreenStyle = props.fullScreenStyle,
       style = props.style;
 
   var _useState = useState(open),
@@ -6104,13 +6105,8 @@ function DialogModel(props, ref) {
 
   var _useState7 = useState(false),
       _useState8 = _slicedToArray(_useState7, 2),
-      hasVisit = _useState8[0],
-      setHasVisit = _useState8[1];
-
-  var _useState9 = useState(false),
-      _useState10 = _slicedToArray(_useState9, 2),
-      isDesChild = _useState10[0],
-      setIsDesChild = _useState10[1];
+      isDesChild = _useState8[0],
+      setIsDesChild = _useState8[1];
 
   var containerRef = useRef();
   var ltRef = useRef();
@@ -6137,11 +6133,12 @@ function DialogModel(props, ref) {
     }, /*#__PURE__*/React.createElement("div", {
       ref: containerRef,
       className: classnames((_classNames = {}, _defineProperty(_classNames, className, true), _defineProperty(_classNames, 'model_container', true), _defineProperty(_classNames, "animate__animated", true), _defineProperty(_classNames, flag ? 'animate__bounceInDown' : 'animate__fadeOutRightBig', true), _classNames)),
-      style: _objectSpread2({
+      style: _objectSpread2(_objectSpread2({
         opacity: modelShowAync ? 1 : 0,
         width: typeof width == 'number' ? width + 'px' : width,
+        // transition: "width,height,left,top ease-in-out 0.3s",
         pointerEvents: 'all'
-      }, style)
+      }, style), fullScreenStyle)
     }, /*#__PURE__*/React.createElement("div", {
       className: 'model_wrap'
     }, isResize && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -6168,14 +6165,14 @@ function DialogModel(props, ref) {
         opacity: modelShowAync ? 0.6 : 0
       }
     })), document.body);
-  }, [modelShowAync, modelShow, props, isDesChild]);
+  }, [modelShowAync, modelShow, props, isDesChild, fullScreenStyle]);
   useEffect(function () {
     var containerEl = containerRef.current;
     var containerElWidth = containerEl.offsetWidth;
     var containerElHeight = containerEl.offsetHeight;
     containerEl.style.left = "calc(50% - ".concat(containerElWidth / 2, "px)");
     containerEl.style.top = "calc(50% - ".concat(containerElHeight / 2, "px)");
-  }, [modelShow]);
+  }, [modelShow, fullScreenStyle]);
   useEffect(function () {
     var containerEl = containerRef.current;
     var rEl = rRef.current;
@@ -6251,20 +6248,14 @@ function DialogModel(props, ref) {
     };
   }, [open]);
   useEffect(function () {
-    if (modelShow) {
-      setHasVisit(true);
-    }
-
-    if (destroyOnClose && hasVisit) {
-      if (!modelShow) {
-        setIsDesChild(true);
-      } else {
-        setIsDesChild(false);
-      }
+    if (destroyOnClose) {
+      setIsDesChild(!modelShow);
+    } else {
+      setIsDesChild(false);
     }
 
     !modelShow && typeof closeCb === 'function' && closeCb();
-  }, [modelShow, hasVisit, destroyOnClose]);
+  }, [modelShow, destroyOnClose]);
   return renderChildren;
 }
 
@@ -6288,6 +6279,9 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
+    _this.state = {
+      isFullScreen: false
+    };
 
     _this.renderFooter = function () {
       var _this$props = _this.props,
@@ -6324,19 +6318,62 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
           onClose = _this$props2.onClose,
           closeCb = _this$props2.closeCb,
           renderClose = _this$props2.renderClose,
-          isDrag = _this$props2.isDrag;
+          isDrag = _this$props2.isDrag,
+          showFullscreen = _this$props2.showFullscreen,
+          renderMin = _this$props2.renderMin,
+          renderFullScreen = _this$props2.renderFullScreen,
+          fullscreenClassName = _this$props2.fullscreenClassName;
+
+      var onMouseDown = function onMouseDown(eventDown) {
+        if (!isDrag) return;
+        if (!_this.containerRef.current) return;
+        var containerEl = _this.containerRef.current.containerRef;
+        var left = containerEl.offsetLeft;
+        var top = containerEl.offsetTop;
+        console.log(left, top);
+        var downX = eventDown.clientX;
+        var downY = eventDown.clientY;
+
+        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");
+        };
+      };
+
+      var onMouseUp = function onMouseUp(event) {
+        document.onmousemove = null;
+      };
+
       return /*#__PURE__*/React.createElement("div", {
         className: "model-header"
       }, /*#__PURE__*/React.createElement("div", {
         ref: _this.titleRef,
+        onMouseDown: onMouseDown,
+        onMouseUp: onMouseUp,
         className: "model-title ".concat(isDrag ? 'move' : '')
       }, title), /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center'
+        },
         className: "model-closeIcon",
-        onClick: function onClick() {
+        onClick: function onClick(e) {
+          e.stopPropagation();
           onClose && onClose();
           closeCb && closeCb();
         }
-      }, renderClose ? renderClose : /*#__PURE__*/React.createElement(CloseCircleOutlined, null)));
+      }, renderClose ? renderClose : /*#__PURE__*/React.createElement(CloseCircleOutlined, null), showFullscreen && /*#__PURE__*/React.createElement("span", {
+        className: "mr5 cp fullscreenIcon ".concat(fullscreenClassName),
+        onClick: function onClick() {
+          _this.setState({
+            isFullScreen: !_this.state.isFullScreen
+          });
+        }
+      }, _this.state.isFullScreen ? renderMin || /*#__PURE__*/React.createElement(MinusOutlined, null) : renderFullScreen || /*#__PURE__*/React.createElement(FullscreenOutlined, null))));
     };
 
     _this.renderContent = function () {
@@ -6350,33 +6387,15 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
   }
 
   _createClass(Modal, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var isDrag = this.props.isDrag;
-      if (!isDrag) return;
-      var tltleEl = this.titleRef.current;
-      var containerEl = this.containerRef.current.containerRef;
-
-      tltleEl.onmousedown = function (eventDown) {
-        var left = containerEl.offsetLeft;
-        var top = containerEl.offsetTop;
-        console.log(left, top);
-        var downX = eventDown.clientX;
-        var downY = eventDown.clientY;
-
-        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");
-        };
-      };
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState, snapshot) {
+      var open = prevProps.open;
 
-      document.onmouseup = function (eventMove) {
-        document.onmousemove = null;
-      };
+      if (!open) {
+        this.setState({
+          isFullScreen: false
+        });
+      }
     }
   }, {
     key: "render",
@@ -6401,6 +6420,12 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
         className: className,
         isDrag: isDrag,
         wrapClassName: wrapClassName,
+        fullScreenStyle: this.state.isFullScreen ? {
+          width: '100%',
+          height: '100%',
+          left: 0,
+          top: 0
+        } : {},
         style: style
       }, other), this.renderTop(), /*#__PURE__*/React.createElement("div", {
         className: "model-content"

package/dist/index.js

@@ -6129,6 +6129,7 @@ function DialogModel(props, ref) {
       _props$className = props.className,
       className = _props$className === void 0 ? 'default-dialog' : _props$className,
       wrapClassName = props.wrapClassName,
+      fullScreenStyle = props.fullScreenStyle,
       style = props.style;
 
   var _useState = React.useState(open),
@@ -6148,13 +6149,8 @@ function DialogModel(props, ref) {
 
   var _useState7 = React.useState(false),
       _useState8 = _slicedToArray(_useState7, 2),
-      hasVisit = _useState8[0],
-      setHasVisit = _useState8[1];
-
-  var _useState9 = React.useState(false),
-      _useState10 = _slicedToArray(_useState9, 2),
-      isDesChild = _useState10[0],
-      setIsDesChild = _useState10[1];
+      isDesChild = _useState8[0],
+      setIsDesChild = _useState8[1];
 
   var containerRef = React.useRef();
   var ltRef = React.useRef();
@@ -6181,11 +6177,12 @@ function DialogModel(props, ref) {
     }, /*#__PURE__*/React__default['default'].createElement("div", {
       ref: containerRef,
       className: classnames__default['default']((_classNames = {}, _defineProperty(_classNames, className, true), _defineProperty(_classNames, 'model_container', true), _defineProperty(_classNames, "animate__animated", true), _defineProperty(_classNames, flag ? 'animate__bounceInDown' : 'animate__fadeOutRightBig', true), _classNames)),
-      style: _objectSpread2({
+      style: _objectSpread2(_objectSpread2({
         opacity: modelShowAync ? 1 : 0,
         width: typeof width == 'number' ? width + 'px' : width,
+        // transition: "width,height,left,top ease-in-out 0.3s",
         pointerEvents: 'all'
-      }, style)
+      }, style), fullScreenStyle)
     }, /*#__PURE__*/React__default['default'].createElement("div", {
       className: 'model_wrap'
     }, isResize && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -6212,14 +6209,14 @@ function DialogModel(props, ref) {
         opacity: modelShowAync ? 0.6 : 0
       }
     })), document.body);
-  }, [modelShowAync, modelShow, props, isDesChild]);
+  }, [modelShowAync, modelShow, props, isDesChild, fullScreenStyle]);
   React.useEffect(function () {
     var containerEl = containerRef.current;
     var containerElWidth = containerEl.offsetWidth;
     var containerElHeight = containerEl.offsetHeight;
     containerEl.style.left = "calc(50% - ".concat(containerElWidth / 2, "px)");
     containerEl.style.top = "calc(50% - ".concat(containerElHeight / 2, "px)");
-  }, [modelShow]);
+  }, [modelShow, fullScreenStyle]);
   React.useEffect(function () {
     var containerEl = containerRef.current;
     var rEl = rRef.current;
@@ -6295,20 +6292,14 @@ function DialogModel(props, ref) {
     };
   }, [open]);
   React.useEffect(function () {
-    if (modelShow) {
-      setHasVisit(true);
-    }
-
-    if (destroyOnClose && hasVisit) {
-      if (!modelShow) {
-        setIsDesChild(true);
-      } else {
-        setIsDesChild(false);
-      }
+    if (destroyOnClose) {
+      setIsDesChild(!modelShow);
+    } else {
+      setIsDesChild(false);
     }
 
     !modelShow && typeof closeCb === 'function' && closeCb();
-  }, [modelShow, hasVisit, destroyOnClose]);
+  }, [modelShow, destroyOnClose]);
   return renderChildren;
 }
 
@@ -6332,6 +6323,9 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
+    _this.state = {
+      isFullScreen: false
+    };
 
     _this.renderFooter = function () {
       var _this$props = _this.props,
@@ -6368,19 +6362,62 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
           onClose = _this$props2.onClose,
           closeCb = _this$props2.closeCb,
           renderClose = _this$props2.renderClose,
-          isDrag = _this$props2.isDrag;
+          isDrag = _this$props2.isDrag,
+          showFullscreen = _this$props2.showFullscreen,
+          renderMin = _this$props2.renderMin,
+          renderFullScreen = _this$props2.renderFullScreen,
+          fullscreenClassName = _this$props2.fullscreenClassName;
+
+      var onMouseDown = function onMouseDown(eventDown) {
+        if (!isDrag) return;
+        if (!_this.containerRef.current) return;
+        var containerEl = _this.containerRef.current.containerRef;
+        var left = containerEl.offsetLeft;
+        var top = containerEl.offsetTop;
+        console.log(left, top);
+        var downX = eventDown.clientX;
+        var downY = eventDown.clientY;
+
+        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");
+        };
+      };
+
+      var onMouseUp = function onMouseUp(event) {
+        document.onmousemove = null;
+      };
+
       return /*#__PURE__*/React__default['default'].createElement("div", {
         className: "model-header"
       }, /*#__PURE__*/React__default['default'].createElement("div", {
         ref: _this.titleRef,
+        onMouseDown: onMouseDown,
+        onMouseUp: onMouseUp,
         className: "model-title ".concat(isDrag ? 'move' : '')
       }, title), /*#__PURE__*/React__default['default'].createElement("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center'
+        },
         className: "model-closeIcon",
-        onClick: function onClick() {
+        onClick: function onClick(e) {
+          e.stopPropagation();
           onClose && onClose();
           closeCb && closeCb();
         }
-      }, renderClose ? renderClose : /*#__PURE__*/React__default['default'].createElement(icons.CloseCircleOutlined, null)));
+      }, renderClose ? renderClose : /*#__PURE__*/React__default['default'].createElement(icons.CloseCircleOutlined, null), showFullscreen && /*#__PURE__*/React__default['default'].createElement("span", {
+        className: "mr5 cp fullscreenIcon ".concat(fullscreenClassName),
+        onClick: function onClick() {
+          _this.setState({
+            isFullScreen: !_this.state.isFullScreen
+          });
+        }
+      }, _this.state.isFullScreen ? renderMin || /*#__PURE__*/React__default['default'].createElement(icons.MinusOutlined, null) : renderFullScreen || /*#__PURE__*/React__default['default'].createElement(icons.FullscreenOutlined, null))));
     };
 
     _this.renderContent = function () {
@@ -6394,33 +6431,15 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
   }
 
   _createClass(Modal, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var isDrag = this.props.isDrag;
-      if (!isDrag) return;
-      var tltleEl = this.titleRef.current;
-      var containerEl = this.containerRef.current.containerRef;
-
-      tltleEl.onmousedown = function (eventDown) {
-        var left = containerEl.offsetLeft;
-        var top = containerEl.offsetTop;
-        console.log(left, top);
-        var downX = eventDown.clientX;
-        var downY = eventDown.clientY;
-
-        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");
-        };
-      };
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState, snapshot) {
+      var open = prevProps.open;
 
-      document.onmouseup = function (eventMove) {
-        document.onmousemove = null;
-      };
+      if (!open) {
+        this.setState({
+          isFullScreen: false
+        });
+      }
     }
   }, {
     key: "render",
@@ -6445,6 +6464,12 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
         className: className,
         isDrag: isDrag,
         wrapClassName: wrapClassName,
+        fullScreenStyle: this.state.isFullScreen ? {
+          width: '100%',
+          height: '100%',
+          left: 0,
+          top: 0
+        } : {},
         style: style
       }, other), this.renderTop(), /*#__PURE__*/React__default['default'].createElement("div", {
         className: "model-content"

package/package.json

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