@oceanbase/ui 0.2.0

package/es/Dialog/index.js

@@ -0,0 +1,614 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+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; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { CloseOutlined, ExpandAltOutlined, FullscreenExitOutlined, FullscreenOutlined, MinusOutlined } from '@ant-design/icons';
+import React from 'react';
+import { createPortal } from 'react-dom';
+import LocaleWrapper from "../locale/LocaleWrapper";
+import { getPrefix } from "../_util";
+import { Anchor } from "./Anchor";
+import { Dock } from "./Dock";
+import { EventProxy } from "./EventProxy";
+import zhCN from "./locale/zh-CN";
+import "./index.less";
+var prefix = getPrefix('dialog');
+var DEFAULT_LEFT = 0.1;
+var DEFAULT_TOP = 0.1;
+var MINIMIZE_HEIGHT = 36;
+var MINIMIZE_WIDTH = 320;
+var DEFAULT_MIN = [320, 256];
+var DEFAULT_WIDTH_MEMBER = 520;
+var DEFAULT_HEIGHT_MEMBER = 600;
+var DEFAULT_BORDER_WIDTH = 24;
+// 预留滚动条宽度
+var SCROLL_BAR_WIDTH = 1;
+var DialogComp = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(DialogComp, _React$PureComponent);
+  var _super = _createSuper(DialogComp);
+  function DialogComp() {
+    var _this$props$width, _this$props$height, _this$props$left, _this$props$width2, _this$props$top, _this$props$height2;
+    var _this;
+    _classCallCheck(this, DialogComp);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      mask: true,
+      width: (_this$props$width = _this.props.width) !== null && _this$props$width !== void 0 ? _this$props$width : DEFAULT_WIDTH_MEMBER,
+      height: (_this$props$height = _this.props.height) !== null && _this$props$height !== void 0 ? _this$props$height : DEFAULT_HEIGHT_MEMBER,
+      left: (_this$props$left = _this.props.left) !== null && _this$props$left !== void 0 ? _this$props$left : _this.props.clientWidth - ((_this$props$width2 = _this.props.width) !== null && _this$props$width2 !== void 0 ? _this$props$width2 : DEFAULT_WIDTH_MEMBER) - DEFAULT_BORDER_WIDTH,
+      top: (_this$props$top = _this.props.top) !== null && _this$props$top !== void 0 ? _this$props$top : _this.props.clientHeight - ((_this$props$height2 = _this.props.height) !== null && _this$props$height2 !== void 0 ? _this$props$height2 : DEFAULT_HEIGHT_MEMBER) - DEFAULT_BORDER_WIDTH,
+      moveX: 0,
+      moveY: 0,
+      maximization: _this.props.isEmbed,
+      minimize: false,
+      headerStyle: {}
+    });
+    _defineProperty(_assertThisInitialized(_this), "clientX", 0);
+    _defineProperty(_assertThisInitialized(_this), "clientY", 0);
+    _defineProperty(_assertThisInitialized(_this), "getDefaultEmbedState", function () {
+      var _this$props = _this.props,
+        clientHeight = _this$props.clientHeight,
+        clientWidth = _this$props.clientWidth,
+        width = _this$props.width,
+        height = _this$props.height,
+        left = _this$props.left,
+        top = _this$props.top;
+      return {
+        width: width !== null && width !== void 0 ? width : DEFAULT_WIDTH_MEMBER,
+        height: height !== null && height !== void 0 ? height : DEFAULT_HEIGHT_MEMBER,
+        left: left !== null && left !== void 0 ? left : clientWidth - (width !== null && width !== void 0 ? width : DEFAULT_WIDTH_MEMBER) - DEFAULT_BORDER_WIDTH,
+        top: top !== null && top !== void 0 ? top : clientHeight - (height !== null && height !== void 0 ? height : DEFAULT_HEIGHT_MEMBER) - DEFAULT_BORDER_WIDTH
+      };
+    });
+    _defineProperty(_assertThisInitialized(_this), "host", document.createElement('div'));
+    _defineProperty(_assertThisInitialized(_this), "isPointDown", false);
+    _defineProperty(_assertThisInitialized(_this), "onDragStart", function (event) {
+      if (!_this.props.draggable) return;
+      var maximization = _this.state.maximization;
+      if (maximization) return;
+      _this.setState(_objectSpread(_objectSpread({
+        mask: true
+      }, _this.state.left === undefined ? {
+        left: DEFAULT_LEFT
+      } : {}), _this.state.top === undefined ? {
+        top: DEFAULT_TOP
+      } : {}));
+      _this.clientX = event.clientX;
+      _this.clientY = event.clientY;
+      _this.isPointDown = true;
+    });
+    _defineProperty(_assertThisInitialized(_this), "onDragMove", function (event) {
+      if (!_this.props.draggable || !_this.isPointDown) return;
+      event.preventDefault();
+      _this.setState({
+        moveX: event.clientX - _this.clientX,
+        moveY: event.clientY - _this.clientY
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "onDragEnd", function () {
+      var draggable = _this.props.draggable;
+      if (!draggable) return;
+      _this.isPointDown = false;
+      if (_this.state.moveX === 0 && _this.state.moveY === 0) return;
+      _this.setState({
+        mask: false,
+        left: _this.state.left + _this.state.moveX,
+        top: _this.state.top + _this.state.moveY,
+        moveX: 0,
+        moveY: 0
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "toggleMinimize", function () {
+      _this.setState({
+        maximization: false,
+        minimize: !_this.state.minimize
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "toggleMaximization", function () {
+      // 嵌入模式不支持toggleMaximization
+      var enable = _this.props.resizable && _this.props.enableMaximization && !_this.props.isEmbed;
+      if (!enable) return;
+      _this.setState({
+        maximization: !_this.state.maximization,
+        minimize: false
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "onClose", function (event) {
+      var _this$props$onClose, _this$props2;
+      event.stopPropagation();
+      (_this$props$onClose = (_this$props2 = _this.props).onClose) === null || _this$props$onClose === void 0 ? void 0 : _this$props$onClose.call(_this$props2);
+    });
+    _defineProperty(_assertThisInitialized(_this), "getBaseStyle", function () {
+      var visible = _this.props.visible;
+      // 通过样式控制显隐
+      var baseStyle = {
+        visibility: visible ? 'visible' : 'hidden',
+        opacity: visible ? 1 : 0
+      };
+      return baseStyle;
+    });
+    _defineProperty(_assertThisInitialized(_this), "getStyle", function () {
+      var _this$state = _this.state,
+        maximization = _this$state.maximization,
+        minimize = _this$state.minimize,
+        headerStyle = _this$state.headerStyle;
+      var transform = "translate(".concat(_this.state.moveX, "px, ").concat(_this.state.moveY, "px)");
+      var baseStyle = _this.getBaseStyle();
+      if (maximization && !_this.props.isEmbed) {
+        return _objectSpread(_objectSpread({}, baseStyle), {}, {
+          top: 0,
+          bottom: 0,
+          right: 0,
+          width: _this.props.width || DEFAULT_WIDTH_MEMBER,
+          height: 'auto',
+          borderRadius: 0
+        });
+      } else if (minimize) {
+        var _ref = headerStyle,
+          height = _ref.height;
+        return _objectSpread(_objectSpread(_objectSpread({}, baseStyle), _this.getCompatAbsPostion(_this.state)), {}, {
+          width: MINIMIZE_WIDTH,
+          height: height || MINIMIZE_HEIGHT,
+          transform: transform
+        });
+      } else {
+        return _objectSpread(_objectSpread(_objectSpread({}, baseStyle), _this.getCompatAbsPostion(_this.state)), {}, {
+          transform: transform
+        });
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "compatClonedModel", function (model) {
+      return _objectSpread({
+        left: DEFAULT_LEFT,
+        top: DEFAULT_TOP,
+        width: DEFAULT_WIDTH_MEMBER / _this.props.clientWidth,
+        height: DEFAULT_HEIGHT_MEMBER / _this.props.clientHeight,
+        minimize: false,
+        maximization: false
+      }, model);
+    });
+    _defineProperty(_assertThisInitialized(_this), "detectPointUp", function () {
+      _this.setState({
+        mask: false
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "originInfo", void 0);
+    _defineProperty(_assertThisInitialized(_this), "setRootWidthInEmbedMode", function (newWidth) {
+      var setRootWidth = _this.props.setRootWidth;
+      var restWidth = !!newWidth ? newWidth + SCROLL_BAR_WIDTH : 0;
+      var rootWidth = (_this.props.clientWidth - restWidth) / _this.props.clientWidth;
+      setRootWidth === null || setRootWidth === void 0 ? void 0 : setRootWidth("".concat(rootWidth * 100, "%"));
+    });
+    _defineProperty(_assertThisInitialized(_this), "onResizeStart", function () {
+      if (_this.state.minimize || !_this.props.resizable) return;
+      _this.originInfo = _this.compatClonedModel(_this.state);
+      _this.setState({
+        mask: true
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "onResizeMove", function (event) {
+      var resizable = _this.props.resizable;
+      event.preventDefault();
+      if (_this.state.minimize || !resizable) return;
+      // 以下PointerEvent没有moveRight属性，通过event传递，所以加上了ts-ignore
+      // @ts-ignore
+      var newWidth = _this.originInfo.width + event.moveRight;
+      // @ts-ignore
+      var newHeight = _this.originInfo.height + event.moveBottom;
+      var checkResult = _this.checkSize(newWidth, newHeight);
+
+      // 只在宽度允许发生改变时设置外部width
+      if (checkResult.widthShouldChange) {
+        _this.setRootWidthInEmbedMode(newWidth);
+      }
+      _this.setState(_objectSpread(_objectSpread({}, checkResult.widthShouldChange ? {
+        // @ts-ignore
+        left: _this.originInfo.left + event.moveLeft,
+        width: newWidth
+      } : {}), checkResult.heightShouldChange ? {
+        // @ts-ignore
+        top: _this.originInfo.top + event.moveTop,
+        height: newHeight
+      } : {}));
+    });
+    _defineProperty(_assertThisInitialized(_this), "onResizeEnd", function () {
+      var mask = _this.state.mask;
+      if (!mask || !_this.props.resizable) return;
+      _this.setState({
+        mask: false
+      });
+    });
+    return _this;
+  }
+  _createClass(DialogComp, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      DialogComp.container.appendChild(this.host);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, _) {
+      var preVisible = prevProps.visible,
+        preClientWidth = prevProps.clientWidth,
+        preClientHeight = prevProps.clientHeight,
+        preIsEmbed = prevProps.isEmbed;
+      var _this$props3 = this.props,
+        visible = _this$props3.visible,
+        isEmbed = _this$props3.isEmbed,
+        clientWidth = _this$props3.clientWidth,
+        clientHeight = _this$props3.clientHeight,
+        height = _this$props3.height,
+        width = _this$props3.width,
+        top = _this$props3.top,
+        left = _this$props3.left;
+      // 嵌入式切换非嵌入式，属性重置
+      if (preIsEmbed && !isEmbed) {
+        this.setRootWidthInEmbedMode(0);
+        this.setState(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+          minimize: false,
+          maximization: false
+        }, height ? {
+          height: height
+        } : {}), width ? {
+          width: width
+        } : {}), top ? {
+          top: top
+        } : {}), left ? {
+          left: left
+        } : {}));
+        return;
+      }
+      // 非嵌入式切换嵌入式，属性重置
+      if (!preIsEmbed && isEmbed) {
+        this.setState({
+          minimize: false,
+          maximization: true
+        });
+      }
+      if (visible) {
+        if (!preVisible || clientWidth !== preClientWidth || clientHeight !== preClientHeight) {
+          var tempState = this.getDefaultEmbedState();
+          this.setState(tempState);
+          this.setRootWidthInEmbedMode(tempState === null || tempState === void 0 ? void 0 : tempState.width);
+        }
+      } else if (preVisible && !visible) {
+        this.setRootWidthInEmbedMode(0);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      DialogComp.container.removeChild(this.host);
+    }
+  }, {
+    key: "max",
+    get: function get() {
+      var max = this.props.max;
+      if (!max) {
+        var _this$props4 = this.props,
+          clientWidth = _this$props4.clientWidth,
+          clientHeight = _this$props4.clientHeight;
+        max = [clientWidth, clientHeight];
+      }
+      return max;
+    }
+  }, {
+    key: "min",
+    get: function get() {
+      return this.props.min;
+    }
+  }, {
+    key: "hasMask",
+    get: function get() {
+      return this.state.mask;
+    }
+  }, {
+    key: "renderHeader",
+    value: function renderHeader() {
+      var _this$props5 = this.props,
+        locale = _this$props5.locale,
+        title = _this$props5.title,
+        isEmbed = _this$props5.isEmbed;
+      var _this$state2 = this.state,
+        headerStyle = _this$state2.headerStyle,
+        minimize = _this$state2.minimize;
+      var style = _objectSpread(_objectSpread(_objectSpread({}, headerStyle), minimize ? {
+        boxShadow: '0 2px 20px 0 rgba(4, 1, 30, 0.07)'
+      } : {}), isEmbed ? {
+        cursor: 'initial'
+      } : {});
+      return /*#__PURE__*/React.createElement("header", {
+        className: "".concat(prefix, "-header"),
+        style: style,
+        onPointerDown: this.onDragStart,
+        onDoubleClick: this.toggleMaximization
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(prefix, "-title")
+      }, title || locale.helpDocument), this.renderControls());
+    }
+  }, {
+    key: "renderControlLink",
+    value: function renderControlLink() {
+      var extLink = this.props.extLink;
+      return /*#__PURE__*/React.createElement("span", {
+        className: "".concat(prefix, "-item")
+      }, /*#__PURE__*/React.createElement("a", {
+        className: "".concat(prefix, "-item-link"),
+        href: extLink === null || extLink === void 0 ? void 0 : extLink.link,
+        target: "_blank",
+        rel: "noopener noreferrer"
+      }, /*#__PURE__*/React.createElement("svg", {
+        // t="1679557306532"
+        className: "icon",
+        viewBox: "0 0 1024 1024",
+        version: "1.1",
+        xmlns: "http://www.w3.org/2000/svg"
+        // p-id="2545"
+        ,
+        width: "16",
+        height: "16"
+      }, /*#__PURE__*/React.createElement("path", {
+        d: "M880.0256 912.0256H144.0256a31.9488 31.9488 0 0 1-32.0512-32V144.0256c0-17.7152 14.336-32.0512 32.0512-32.0512h359.936c4.4544 0 8.0384 3.584 8.0384 8.0384v56.0128c0 4.352-3.584 7.9872-7.9872 7.9872h-320v655.9744h655.9744v-320c0-4.4032 3.584-7.9872 8.0384-7.9872h55.9616c4.4032 0 8.0384 3.584 8.0384 7.9872v359.9872c0 17.7152-14.336 32-32 32zM770.8672 199.1168l-52.224-52.224a8.0384 8.0384 0 0 1 4.7104-13.568l179.4048-20.992c5.12-0.6144 9.5232 3.6864 8.9088 8.9088l-20.992 179.4048a8.0384 8.0384 0 0 1-13.6192 4.6592L824.6784 252.928l-256.2048 256.2048c-3.072 3.072-8.192 3.072-11.264 0l-42.4448-42.3936a8.0384 8.0384 0 0 1 0-11.264l256.1024-256.3584z"
+        // p-id="2546"
+      }))));
+    }
+  }, {
+    key: "renderControls",
+    value: function renderControls() {
+      var _this$state3 = this.state,
+        maximization = _this$state3.maximization,
+        minimize = _this$state3.minimize;
+      var _this$props6 = this.props,
+        enableMaximization = _this$props6.enableMaximization,
+        isEmbed = _this$props6.isEmbed;
+      if (isEmbed) {
+        return /*#__PURE__*/React.createElement("span", {
+          className: "".concat(prefix, "-controls")
+        }, this.renderControlLink(), /*#__PURE__*/React.createElement("span", {
+          className: "".concat(prefix, "-item"),
+          onClick: this.onClose
+        }, /*#__PURE__*/React.createElement(CloseOutlined, null)));
+      }
+      return /*#__PURE__*/React.createElement("span", {
+        className: "".concat(prefix, "-controls")
+      }, this.renderControlLink(), /*#__PURE__*/React.createElement("span", {
+        className: "".concat(prefix, "-item"),
+        onClick: this.toggleMinimize
+      }, minimize ? /*#__PURE__*/React.createElement(ExpandAltOutlined, null) : /*#__PURE__*/React.createElement(MinusOutlined, null)), enableMaximization && /*#__PURE__*/React.createElement("span", {
+        className: "".concat(prefix, "-item"),
+        onClick: this.toggleMaximization
+      }, maximization ? /*#__PURE__*/React.createElement(FullscreenExitOutlined, null) : /*#__PURE__*/React.createElement(FullscreenOutlined, null)), /*#__PURE__*/React.createElement("span", {
+        className: "".concat(prefix, "-item"),
+        onClick: this.onClose
+      }, /*#__PURE__*/React.createElement(CloseOutlined, null)));
+    }
+  }, {
+    key: "renderContent",
+    value: function renderContent() {
+      var children = this.props.children;
+      return /*#__PURE__*/React.createElement("main", {
+        className: "".concat(prefix, "-main"),
+        style: this.state.minimize ? {
+          visibility: 'hidden'
+        } : {}
+      }, this.renderMask(), children);
+    }
+  }, {
+    key: "renderMask",
+    value: function renderMask() {
+      if (!this.hasMask) return;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefix, "-mask")
+      });
+    }
+  }, {
+    key: "getCompatAbsPostion",
+    value:
+    // 将比例转换为绝对数值，各个端的渲染依据视口大小会有不同
+    function getCompatAbsPostion(info) {
+      var compatInfo = this.compatClonedModel(info);
+      var minimize = compatInfo.minimize;
+      var _this$props7 = this.props,
+        clientWidth = _this$props7.clientWidth,
+        clientHeight = _this$props7.clientHeight;
+      var ret = {};
+      ['left', 'width', 'top', 'height'].forEach(function (key) {
+        ret[key] = compatInfo[key];
+      });
+      var max = this.max;
+      var min = this.min;
+      // 最小宽度
+      if (max && ret.width > max[0]) {
+        ret.width = max[0];
+      }
+      if (max && ret.height > max[1]) {
+        ret.height = max[1];
+      }
+      if (min && ret.width < min[0]) {
+        ret.width = min[0];
+      }
+      if (min && ret.height < min[1]) {
+        ret.height = min[1];
+      }
+      ret.width = minimize ? MINIMIZE_WIDTH : ret.width;
+      ret.height = minimize ? MINIMIZE_HEIGHT : ret.height;
+      if (ret.left + ret.width > clientWidth) {
+        ret.left = clientWidth - ret.width;
+        this.setState({
+          left: ret.left
+        });
+      }
+      if (ret.left < 0) {
+        this.setState({
+          left: 0
+        });
+      }
+      if (ret.top < 0) {
+        this.setState({
+          top: 0
+        });
+      }
+      if (ret.top + ret.height > clientHeight) {
+        ret.top = clientHeight - ret.height;
+        this.setState({
+          top: ret.top
+        });
+      }
+      return ret;
+    }
+  }, {
+    key: "renderDialog",
+    value: function renderDialog() {
+      var style = this.getStyle();
+      var _this$props8 = this.props,
+        className = _this$props8.className,
+        isEmbed = _this$props8.isEmbed;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
+        className: "".concat(prefix, "-container ").concat(className, " ").concat(isEmbed ? "".concat(prefix, "-container-embed") : ''),
+        style: style
+      }, this.state.minimize ? {} : {
+        tabIndex: 0
+      }), this.renderHeader(), this.renderContent(), isEmbed ? this.renderEmbedBorders() : this.renderBorders(), /*#__PURE__*/React.createElement(EventProxy, {
+        onPointerMove: this.onDragMove,
+        onPointerUp: this.onDragEnd
+      }), /*#__PURE__*/React.createElement(EventProxy, {
+        onPointerUp: this.detectPointUp
+      })));
+    }
+  }, {
+    key: "checkSize",
+    value:
+    /**
+     * width，height 是否在最大最小值的范围内
+     */
+    function checkSize(width, height) {
+      var max = this.max;
+      var min = this.min;
+      var newModel = {};
+      var result = {
+        widthShouldChange: true,
+        heightShouldChange: true
+      };
+      if (min && width < min[0]) {
+        newModel.width = min[0];
+        result.widthShouldChange = false;
+      }
+      if (min && height < min[1]) {
+        newModel.height = min[1];
+        result.heightShouldChange = false;
+      }
+      if (max && width > max[0]) {
+        newModel.width = max[0];
+        result.widthShouldChange = false;
+      }
+      if (max && height > max[1]) {
+        newModel.height = max[1];
+        result.heightShouldChange = false;
+      }
+      return result;
+    }
+  }, {
+    key: "renderEmbedBorders",
+    value: function renderEmbedBorders() {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Anchor, {
+        dock: Dock.left,
+        onStart: this.onResizeStart,
+        onMove: this.onResizeMove,
+        onEnd: this.onResizeEnd
+      }));
+    }
+  }, {
+    key: "renderBorders",
+    value: function renderBorders() {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Anchor, {
+        dock: Dock.top,
+        onStart: this.onResizeStart,
+        onMove: this.onResizeMove,
+        onEnd: this.onResizeEnd
+      }), /*#__PURE__*/React.createElement(Anchor, {
+        dock: Dock.right,
+        onStart: this.onResizeStart,
+        onMove: this.onResizeMove,
+        onEnd: this.onResizeEnd
+      }), /*#__PURE__*/React.createElement(Anchor, {
+        dock: Dock.bottom,
+        onStart: this.onResizeStart,
+        onMove: this.onResizeMove,
+        onEnd: this.onResizeEnd
+      }), /*#__PURE__*/React.createElement(Anchor, {
+        dock: Dock.left,
+        onStart: this.onResizeStart,
+        onMove: this.onResizeMove,
+        onEnd: this.onResizeEnd
+      }), /*#__PURE__*/React.createElement(Anchor, {
+        dock: Dock.topLeft,
+        onStart: this.onResizeStart,
+        onMove: this.onResizeMove,
+        onEnd: this.onResizeEnd
+      }), /*#__PURE__*/React.createElement(Anchor, {
+        dock: Dock.topRight,
+        onStart: this.onResizeStart,
+        onMove: this.onResizeMove,
+        onEnd: this.onResizeEnd
+      }), /*#__PURE__*/React.createElement(Anchor, {
+        dock: Dock.bottomLeft,
+        onStart: this.onResizeStart,
+        onMove: this.onResizeMove,
+        onEnd: this.onResizeEnd
+      }), /*#__PURE__*/React.createElement(Anchor, {
+        dock: Dock.bottomRight,
+        onStart: this.onResizeStart,
+        onMove: this.onResizeMove,
+        onEnd: this.onResizeEnd
+      }));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props9 = this.props,
+        visible = _this$props9.visible,
+        isEmbed = _this$props9.isEmbed;
+      // 嵌入模式通过style控制显隐
+      if (!visible && !isEmbed) return /*#__PURE__*/React.createElement(React.Fragment, null);
+      return /*#__PURE__*/createPortal(this.renderDialog(), DialogComp.container);
+    }
+  }], [{
+    key: "container",
+    get: function get() {
+      if (!this._container) {
+        this._container = document.createElement('div');
+        document.body.appendChild(this._container);
+      }
+      return this._container;
+    }
+  }]);
+  return DialogComp;
+}(React.PureComponent);
+_defineProperty(DialogComp, "defaultProps", {
+  min: DEFAULT_MIN,
+  resizable: true,
+  draggable: true,
+  enableMaximization: true,
+  isEmbed: false
+});
+_defineProperty(DialogComp, "_container", void 0);
+export default LocaleWrapper({
+  componentName: 'Dialog',
+  defaultLocale: zhCN
+})(DialogComp);