@oceanbase/ui 1.0.0-alpha.2 → 1.0.0-alpha.20

package/es/Dialog/index.js

@@ -1,32 +1,28 @@
+"use client";
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+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 { CloseOutlined, ExpandAltOutlined, FullscreenExitOutlined, FullscreenOutlined, MinusOutlined } from '@oceanbase/icons';
-import React from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { ConfigProvider } from '@oceanbase/design';
 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";
+import useStyle from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var prefix = getPrefix('dialog');
 var DEFAULT_LEFT = 0.1;
 var DEFAULT_TOP = 0.1;
 var MINIMIZE_HEIGHT = 36;
@@ -37,598 +33,625 @@ 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,
+// Static container for portal
+var _container = null;
+var getContainer = function getContainer() {
+  if (!_container) {
+    _container = document.createElement('div');
+    document.body.appendChild(_container);
+  }
+  return _container;
+};
+var DialogComp = function DialogComp(props) {
+  var className = props.className,
+    visible = props.visible,
+    children = props.children,
+    _props$min = props.min,
+    min = _props$min === void 0 ? DEFAULT_MIN : _props$min,
+    max = props.max,
+    width = props.width,
+    height = props.height,
+    left = props.left,
+    top = props.top,
+    title = props.title,
+    onClose = props.onClose,
+    clientWidth = props.clientWidth,
+    clientHeight = props.clientHeight,
+    _props$resizable = props.resizable,
+    resizable = _props$resizable === void 0 ? true : _props$resizable,
+    _props$draggable = props.draggable,
+    draggable = _props$draggable === void 0 ? true : _props$draggable,
+    _props$enableMaximiza = props.enableMaximization,
+    enableMaximization = _props$enableMaximiza === void 0 ? true : _props$enableMaximiza,
+    locale = props.locale,
+    extLink = props.extLink,
+    setRootWidth = props.setRootWidth,
+    _props$isEmbed = props.isEmbed,
+    isEmbed = _props$isEmbed === void 0 ? false : _props$isEmbed;
+  var titleId = React.useId();
+  var dialogRootRef = useRef(null);
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('dialog');
+  var _useStyle = useStyle(prefixCls),
+    wrapSSR = _useStyle.wrapSSR;
+
+  // Refs for instance properties
+  var hostRef = useRef(null);
+  var clientXRef = useRef(0);
+  var clientYRef = useRef(0);
+  var isPointDownRef = useRef(false);
+  var originInfoRef = useRef({});
+
+  // State
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    mask = _useState2[0],
+    setMask = _useState2[1];
+  var _useState3 = useState(width !== null && width !== void 0 ? width : DEFAULT_WIDTH_MEMBER),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dialogWidth = _useState4[0],
+    setDialogWidth = _useState4[1];
+  var _useState5 = useState(height !== null && height !== void 0 ? height : DEFAULT_HEIGHT_MEMBER),
+    _useState6 = _slicedToArray(_useState5, 2),
+    dialogHeight = _useState6[0],
+    setDialogHeight = _useState6[1];
+  var _useState7 = useState(left !== null && left !== void 0 ? left : clientWidth - (width !== null && width !== void 0 ? width : DEFAULT_WIDTH_MEMBER) - DEFAULT_BORDER_WIDTH),
+    _useState8 = _slicedToArray(_useState7, 2),
+    dialogLeft = _useState8[0],
+    setDialogLeft = _useState8[1];
+  var _useState9 = useState(top !== null && top !== void 0 ? top : clientHeight - (height !== null && height !== void 0 ? height : DEFAULT_HEIGHT_MEMBER) - DEFAULT_BORDER_WIDTH),
+    _useState10 = _slicedToArray(_useState9, 2),
+    dialogTop = _useState10[0],
+    setDialogTop = _useState10[1];
+  var _useState11 = useState(0),
+    _useState12 = _slicedToArray(_useState11, 2),
+    moveX = _useState12[0],
+    setMoveX = _useState12[1];
+  var _useState13 = useState(0),
+    _useState14 = _slicedToArray(_useState13, 2),
+    moveY = _useState14[0],
+    setMoveY = _useState14[1];
+  var _useState15 = useState(isEmbed),
+    _useState16 = _slicedToArray(_useState15, 2),
+    maximization = _useState16[0],
+    setMaximization = _useState16[1];
+  var _useState17 = useState(false),
+    _useState18 = _slicedToArray(_useState17, 2),
+    minimize = _useState18[0],
+    setMinimize = _useState18[1];
+  var _useState19 = useState({}),
+    _useState20 = _slicedToArray(_useState19, 2),
+    headerStyle = _useState20[0],
+    setHeaderStyle = _useState20[1];
+
+  // Computed values
+  var maxSize = useMemo(function () {
+    if (max) return max;
+    return [clientWidth, clientHeight];
+  }, [max, clientWidth, clientHeight]);
+  var minSize = useMemo(function () {
+    return min;
+  }, [min]);
+  var getDefaultEmbedState = useCallback(function () {
+    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
+    };
+  }, [width, height, left, top, clientWidth, clientHeight]);
+  var setRootWidthInEmbedMode = useCallback(function (newWidth) {
+    var restWidth = !!newWidth ? newWidth + SCROLL_BAR_WIDTH : 0;
+    var rootWidth = (clientWidth - restWidth) / clientWidth;
+    setRootWidth === null || setRootWidth === void 0 || setRootWidth("".concat(rootWidth * 100, "%"));
+  }, [clientWidth, setRootWidth]);
+  var compatClonedModel = useCallback(function (model) {
+    return _objectSpread({
+      left: DEFAULT_LEFT,
+      top: DEFAULT_TOP,
+      width: DEFAULT_WIDTH_MEMBER / clientWidth,
+      height: DEFAULT_HEIGHT_MEMBER / clientHeight,
       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 || _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
+      maximization: false
+    }, model);
+  }, [clientWidth, clientHeight]);
+  var checkSize = function checkSize(w, h) {
+    var newModel = {};
+    var result = {
+      widthShouldChange: true,
+      heightShouldChange: true
+    };
+    if (minSize && w < minSize[0]) {
+      newModel.width = minSize[0];
+      result.widthShouldChange = false;
+    }
+    if (minSize && h < minSize[1]) {
+      newModel.height = minSize[1];
+      result.heightShouldChange = false;
+    }
+    if (maxSize && w > maxSize[0]) {
+      newModel.width = maxSize[0];
+      result.widthShouldChange = false;
+    }
+    if (maxSize && h > maxSize[1]) {
+      newModel.height = maxSize[1];
+      result.heightShouldChange = false;
+    }
+    return result;
+  };
+
+  // componentDidMount
+  useEffect(function () {
+    var host = document.createElement('div');
+    hostRef.current = host;
+    getContainer().appendChild(host);
+    return function () {
+      if (hostRef.current && getContainer().contains(hostRef.current)) {
+        getContainer().removeChild(hostRef.current);
+      }
+    };
+  }, []);
+
+  // componentDidUpdate
+  useEffect(function () {
+    if (!visible) {
+      setRootWidthInEmbedMode(0);
+      return;
+    }
+    var tempState = getDefaultEmbedState();
+    setDialogWidth(tempState.width);
+    setDialogHeight(tempState.height);
+    setDialogLeft(tempState.left);
+    setDialogTop(tempState.top);
+    setRootWidthInEmbedMode(tempState.width);
+  }, [visible, clientWidth, clientHeight, getDefaultEmbedState, setRootWidthInEmbedMode]);
+  useEffect(function () {
+    if (!visible) return;
+    var frame = requestAnimationFrame(function () {
+      if (!minimize) {
+        var _dialogRootRef$curren;
+        (_dialogRootRef$curren = dialogRootRef.current) === null || _dialogRootRef$curren === void 0 || _dialogRootRef$curren.focus({
+          preventScroll: true
         });
       }
     });
-    _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
-      });
+    return function () {
+      return cancelAnimationFrame(frame);
+    };
+  }, [visible, minimize]);
+  useEffect(function () {
+    if (!visible) return;
+    var onDocKeyDown = function onDocKeyDown(e) {
+      if (e.key !== 'Escape') return;
+      var root = dialogRootRef.current;
+      var target = e.target;
+      if (root && target && !root.contains(target)) return;
+      onClose === null || onClose === void 0 || onClose();
+    };
+    document.addEventListener('keydown', onDocKeyDown);
+    return function () {
+      return document.removeEventListener('keydown', onDocKeyDown);
+    };
+  }, [visible, onClose]);
+  useEffect(function () {
+    if (isEmbed) {
+      setMinimize(false);
+      setMaximization(true);
+    } else {
+      setMinimize(false);
+      setMaximization(false);
+      if (height) setDialogHeight(height);
+      if (width) setDialogWidth(width);
+      if (top !== undefined) setDialogTop(top);
+      if (left !== undefined) setDialogLeft(left);
+    }
+  }, [isEmbed, height, width, top, left]);
+
+  // Drag handlers
+  var onDragStart = function onDragStart(event) {
+    if (!draggable) return;
+    if (maximization) return;
+    setMask(true);
+    if (dialogLeft === undefined) {
+      setDialogLeft(DEFAULT_LEFT);
+    }
+    if (dialogTop === undefined) {
+      setDialogTop(DEFAULT_TOP);
+    }
+    clientXRef.current = event.clientX;
+    clientYRef.current = event.clientY;
+    isPointDownRef.current = true;
+  };
+  var onDragMove = function onDragMove(event) {
+    if (!draggable || !isPointDownRef.current) return;
+    event.preventDefault();
+    setMoveX(event.clientX - clientXRef.current);
+    setMoveY(event.clientY - clientYRef.current);
+  };
+  var onDragEnd = function onDragEnd() {
+    if (!draggable) return;
+    isPointDownRef.current = false;
+    if (moveX === 0 && moveY === 0) return;
+    setMask(false);
+    setDialogLeft(function (prev) {
+      return (prev !== null && prev !== void 0 ? prev : 0) + moveX;
     });
-    _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 || setRootWidth("".concat(rootWidth * 100, "%"));
+    setDialogTop(function (prev) {
+      return (prev !== null && prev !== void 0 ? prev : 0) + moveY;
     });
-    _defineProperty(_assertThisInitialized(_this), "onResizeStart", function () {
-      if (_this.state.minimize || !_this.props.resizable) return;
-      _this.originInfo = _this.compatClonedModel(_this.state);
-      _this.setState({
-        mask: true
-      });
+    setMoveX(0);
+    setMoveY(0);
+  };
+  var detectPointUp = function detectPointUp() {
+    setMask(false);
+  };
+
+  // Resize handlers
+  var onResizeStart = function onResizeStart() {
+    if (minimize || !resizable) return;
+    originInfoRef.current = compatClonedModel({
+      width: dialogWidth,
+      height: dialogHeight,
+      left: dialogLeft,
+      top: dialogTop,
+      minimize: minimize,
+      maximization: maximization
     });
-    _defineProperty(_assertThisInitialized(_this), "onResizeMove", function (event) {
-      var resizable = _this.props.resizable;
-      event.preventDefault();
-      if (_this.state.minimize || !resizable) return;
-      // 以下PointerEvent没有moveRight属性，通过event传递，所以加上了ts-ignore
+    setMask(true);
+  };
+  var onResizeMove = function onResizeMove(event) {
+    event.preventDefault();
+    if (minimize || !resizable) return;
+    // @ts-ignore
+    var newWidth = originInfoRef.current.width + event.moveRight;
+    // @ts-ignore
+    var newHeight = originInfoRef.current.height + event.moveBottom;
+    var checkResult = checkSize(newWidth, newHeight);
+    if (checkResult.widthShouldChange) {
+      setRootWidthInEmbedMode(newWidth);
+    }
+    if (checkResult.widthShouldChange) {
       // @ts-ignore
-      var newWidth = _this.originInfo.width + event.moveRight;
+      setDialogLeft(originInfoRef.current.left + event.moveLeft);
+      setDialogWidth(newWidth);
+    }
+    if (checkResult.heightShouldChange) {
       // @ts-ignore
-      var newHeight = _this.originInfo.height + event.moveBottom;
-      var checkResult = _this.checkSize(newWidth, newHeight);
+      setDialogTop(originInfoRef.current.top + event.moveTop);
+      setDialogHeight(newHeight);
+    }
+  };
+  var onResizeEnd = function onResizeEnd() {
+    if (!mask || !resizable) return;
+    setMask(false);
+  };
 
-      // 只在宽度允许发生改变时设置外部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
-      } : {}));
+  // Toggle handlers
+  var toggleMinimize = function toggleMinimize() {
+    setMaximization(false);
+    setMinimize(function (prev) {
+      return !prev;
     });
-    _defineProperty(_assertThisInitialized(_this), "onResizeEnd", function () {
-      var mask = _this.state.mask;
-      if (!mask || !_this.props.resizable) return;
-      _this.setState({
-        mask: false
-      });
+  };
+  var toggleMaximization = function toggleMaximization() {
+    var enable = resizable && enableMaximization && !isEmbed;
+    if (!enable) return;
+    setMaximization(function (prev) {
+      return !prev;
     });
-    return _this;
-  }
-  _createClass(DialogComp, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      DialogComp.container.appendChild(this.host);
+    setMinimize(false);
+  };
+  var handleClose = function handleClose(event) {
+    event.stopPropagation();
+    onClose === null || onClose === void 0 || onClose();
+  };
+
+  // Style calculations
+  var getBaseStyle = useCallback(function () {
+    return {
+      visibility: visible ? 'visible' : 'hidden',
+      opacity: visible ? 1 : 0
+    };
+  }, [visible]);
+  var getCompatAbsPostion = useCallback(function (info) {
+    var compatInfo = compatClonedModel(info);
+    var isMinimize = compatInfo.minimize;
+    var ret = {};
+    ['left', 'width', 'top', 'height'].forEach(function (key) {
+      ret[key] = compatInfo[key];
+    });
+
+    // Apply min/max constraints
+    if (maxSize && ret.width > maxSize[0]) {
+      ret.width = maxSize[0];
     }
-  }, {
-    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);
-      }
+    if (maxSize && ret.height > maxSize[1]) {
+      ret.height = maxSize[1];
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      DialogComp.container.removeChild(this.host);
+    if (minSize && ret.width < minSize[0]) {
+      ret.width = minSize[0];
     }
-  }, {
-    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;
+    if (minSize && ret.height < minSize[1]) {
+      ret.height = minSize[1];
     }
-  }, {
-    key: "min",
-    get: function get() {
-      return this.props.min;
+    ret.width = isMinimize ? MINIMIZE_WIDTH : ret.width;
+    ret.height = isMinimize ? MINIMIZE_HEIGHT : ret.height;
+
+    // Adjust position if out of bounds (calculate but don't setState here)
+    if (ret.left + ret.width > clientWidth) {
+      ret.left = clientWidth - ret.width;
     }
-  }, {
-    key: "hasMask",
-    get: function get() {
-      return this.state.mask;
+    if (ret.left < 0) {
+      ret.left = 0;
     }
-  }, {
-    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__*/_jsxs("header", {
-        className: "".concat(prefix, "-header"),
-        style: style,
-        onPointerDown: this.onDragStart,
-        onDoubleClick: this.toggleMaximization,
-        children: [/*#__PURE__*/_jsx("span", {
-          className: "".concat(prefix, "-title"),
-          children: title || locale.helpDocument
-        }), this.renderControls()]
-      });
+    if (ret.top < 0) {
+      ret.top = 0;
     }
-  }, {
-    key: "renderControlLink",
-    value: function renderControlLink() {
-      var extLink = this.props.extLink;
-      return /*#__PURE__*/_jsx("span", {
-        className: "".concat(prefix, "-item"),
-        children: /*#__PURE__*/_jsx("a", {
-          className: "".concat(prefix, "-item-link"),
-          href: extLink === null || extLink === void 0 ? void 0 : extLink.link,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          children: /*#__PURE__*/_jsx("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",
-            children: /*#__PURE__*/_jsx("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"
-            })
-          })
-        })
-      });
+    if (ret.top + ret.height > clientHeight) {
+      ret.top = clientHeight - ret.height;
     }
-  }, {
-    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__*/_jsxs("span", {
-          className: "".concat(prefix, "-controls"),
-          children: [this.renderControlLink(), /*#__PURE__*/_jsx("span", {
-            className: "".concat(prefix, "-item"),
-            onClick: this.onClose,
-            children: /*#__PURE__*/_jsx(CloseOutlined, {})
-          })]
-        });
-      }
-      return /*#__PURE__*/_jsxs("span", {
-        className: "".concat(prefix, "-controls"),
-        children: [this.renderControlLink(), /*#__PURE__*/_jsx("span", {
-          className: "".concat(prefix, "-item"),
-          onClick: this.toggleMinimize,
-          children: minimize ? /*#__PURE__*/_jsx(ExpandAltOutlined, {}) : /*#__PURE__*/_jsx(MinusOutlined, {})
-        }), enableMaximization && /*#__PURE__*/_jsx("span", {
-          className: "".concat(prefix, "-item"),
-          onClick: this.toggleMaximization,
-          children: maximization ? /*#__PURE__*/_jsx(FullscreenExitOutlined, {}) : /*#__PURE__*/_jsx(FullscreenOutlined, {})
-        }), /*#__PURE__*/_jsx("span", {
-          className: "".concat(prefix, "-item"),
-          onClick: this.onClose,
-          children: /*#__PURE__*/_jsx(CloseOutlined, {})
-        })]
-      });
+    return ret;
+  }, [maxSize, minSize, clientWidth, clientHeight, compatClonedModel]);
+
+  // Adjust position if out of bounds
+  useEffect(function () {
+    if (!visible) return;
+    var adjusted = getCompatAbsPostion({
+      width: dialogWidth,
+      height: dialogHeight,
+      left: dialogLeft,
+      top: dialogTop,
+      minimize: minimize
+    });
+    if (adjusted.left !== dialogLeft) {
+      setDialogLeft(adjusted.left);
     }
-  }, {
-    key: "renderContent",
-    value: function renderContent() {
-      var children = this.props.children;
-      return /*#__PURE__*/_jsxs("main", {
-        className: "".concat(prefix, "-main"),
-        style: this.state.minimize ? {
-          visibility: 'hidden'
-        } : {},
-        children: [this.renderMask(), children]
-      });
+    if (adjusted.top !== dialogTop) {
+      setDialogTop(adjusted.top);
     }
-  }, {
-    key: "renderMask",
-    value: function renderMask() {
-      if (!this.hasMask) return;
-      return /*#__PURE__*/_jsx("div", {
-        className: "".concat(prefix, "-mask")
+  }, [dialogWidth, dialogHeight, dialogLeft, dialogTop, minimize, visible, getCompatAbsPostion]);
+  var getStyle = useMemo(function () {
+    var transform = "translate(".concat(moveX, "px, ").concat(moveY, "px)");
+    var baseStyle = getBaseStyle();
+    if (maximization && !isEmbed) {
+      return _objectSpread(_objectSpread({}, baseStyle), {}, {
+        top: 0,
+        bottom: 0,
+        right: 0,
+        width: width || DEFAULT_WIDTH_MEMBER,
+        height: 'auto',
+        borderRadius: 0
       });
-    }
-  }, {
-    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];
+    } else if (minimize) {
+      var _ref = headerStyle,
+        headerHeight = _ref.height;
+      var position = getCompatAbsPostion({
+        width: dialogWidth,
+        height: dialogHeight,
+        left: dialogLeft,
+        top: dialogTop,
+        minimize: minimize
       });
-      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__*/_jsx(React.Fragment, {
-        children: /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
-          className: "".concat(prefix, "-container ").concat(className, " ").concat(isEmbed ? "".concat(prefix, "-container-embed") : ''),
-          style: style
-        }, this.state.minimize ? {} : {
-          tabIndex: 0
-        }), {}, {
-          children: [this.renderHeader(), this.renderContent(), isEmbed ? this.renderEmbedBorders() : this.renderBorders(), /*#__PURE__*/_jsx(EventProxy, {
-            onPointerMove: this.onDragMove,
-            onPointerUp: this.onDragEnd
-          }), /*#__PURE__*/_jsx(EventProxy, {
-            onPointerUp: this.detectPointUp
-          })]
-        }))
+      return _objectSpread(_objectSpread(_objectSpread({}, baseStyle), position), {}, {
+        width: MINIMIZE_WIDTH,
+        height: headerHeight || MINIMIZE_HEIGHT,
+        transform: transform
       });
-    }
-  }, {
-    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__*/_jsx(React.Fragment, {
-        children: /*#__PURE__*/_jsx(Anchor, {
-          dock: Dock.left,
-          onStart: this.onResizeStart,
-          onMove: this.onResizeMove,
-          onEnd: this.onResizeEnd
-        })
+    } else {
+      var _position = getCompatAbsPostion({
+        width: dialogWidth,
+        height: dialogHeight,
+        left: dialogLeft,
+        top: dialogTop
       });
-    }
-  }, {
-    key: "renderBorders",
-    value: function renderBorders() {
-      return /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [/*#__PURE__*/_jsx(Anchor, {
-          dock: Dock.top,
-          onStart: this.onResizeStart,
-          onMove: this.onResizeMove,
-          onEnd: this.onResizeEnd
-        }), /*#__PURE__*/_jsx(Anchor, {
-          dock: Dock.right,
-          onStart: this.onResizeStart,
-          onMove: this.onResizeMove,
-          onEnd: this.onResizeEnd
-        }), /*#__PURE__*/_jsx(Anchor, {
-          dock: Dock.bottom,
-          onStart: this.onResizeStart,
-          onMove: this.onResizeMove,
-          onEnd: this.onResizeEnd
-        }), /*#__PURE__*/_jsx(Anchor, {
-          dock: Dock.left,
-          onStart: this.onResizeStart,
-          onMove: this.onResizeMove,
-          onEnd: this.onResizeEnd
-        }), /*#__PURE__*/_jsx(Anchor, {
-          dock: Dock.topLeft,
-          onStart: this.onResizeStart,
-          onMove: this.onResizeMove,
-          onEnd: this.onResizeEnd
-        }), /*#__PURE__*/_jsx(Anchor, {
-          dock: Dock.topRight,
-          onStart: this.onResizeStart,
-          onMove: this.onResizeMove,
-          onEnd: this.onResizeEnd
-        }), /*#__PURE__*/_jsx(Anchor, {
-          dock: Dock.bottomLeft,
-          onStart: this.onResizeStart,
-          onMove: this.onResizeMove,
-          onEnd: this.onResizeEnd
-        }), /*#__PURE__*/_jsx(Anchor, {
-          dock: Dock.bottomRight,
-          onStart: this.onResizeStart,
-          onMove: this.onResizeMove,
-          onEnd: this.onResizeEnd
-        })]
+      return _objectSpread(_objectSpread(_objectSpread({}, baseStyle), _position), {}, {
+        transform: transform
       });
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props9 = this.props,
-        visible = _this$props9.visible,
-        isEmbed = _this$props9.isEmbed;
-      // 嵌入模式通过style控制显隐
-      if (!visible && !isEmbed) return /*#__PURE__*/_jsx(React.Fragment, {});
-      return /*#__PURE__*/createPortal(this.renderDialog(), DialogComp.container);
+  }, [maximization, isEmbed, minimize, moveX, moveY, width, headerStyle, dialogWidth, dialogHeight, dialogLeft, dialogTop, getCompatAbsPostion, getBaseStyle]);
+
+  // Render methods
+  var renderControlLink = function renderControlLink() {
+    if (!(extLink !== null && extLink !== void 0 && extLink.link)) {
+      return null;
     }
-  }], [{
-    key: "container",
-    get: function get() {
-      if (!this._container) {
-        this._container = document.createElement('div');
-        document.body.appendChild(this._container);
-      }
-      return this._container;
+    var linkText = extLink.text || (locale === null || locale === void 0 ? void 0 : locale.openHelpCenter);
+    return /*#__PURE__*/_jsx("span", {
+      className: "".concat(prefixCls, "-item"),
+      children: /*#__PURE__*/_jsxs("a", {
+        className: "".concat(prefixCls, "-item-link"),
+        href: extLink.link,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children: [/*#__PURE__*/_jsx("span", {
+          className: "".concat(prefixCls, "-item-link-text"),
+          children: linkText
+        }), /*#__PURE__*/_jsx("svg", {
+          className: "icon",
+          viewBox: "0 0 1024 1024",
+          version: "1.1",
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "16",
+          height: "16",
+          "aria-hidden": true,
+          children: /*#__PURE__*/_jsx("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"
+          })
+        })]
+      })
+    });
+  };
+  var renderControls = function renderControls() {
+    if (isEmbed) {
+      return /*#__PURE__*/_jsxs("span", {
+        className: "".concat(prefixCls, "-controls"),
+        children: [renderControlLink(), /*#__PURE__*/_jsx("button", {
+          type: "button",
+          className: "".concat(prefixCls, "-item"),
+          "aria-label": locale === null || locale === void 0 ? void 0 : locale.closeDialog,
+          onClick: handleClose,
+          children: /*#__PURE__*/_jsx("span", {
+            "aria-hidden": true,
+            children: /*#__PURE__*/_jsx(CloseOutlined, {})
+          })
+        })]
+      });
     }
-  }]);
-  return DialogComp;
-}(React.PureComponent);
-_defineProperty(DialogComp, "defaultProps", {
-  min: DEFAULT_MIN,
-  resizable: true,
-  draggable: true,
-  enableMaximization: true,
-  isEmbed: false
-});
-_defineProperty(DialogComp, "_container", void 0);
+    return /*#__PURE__*/_jsxs("span", {
+      className: "".concat(prefixCls, "-controls"),
+      children: [renderControlLink(), /*#__PURE__*/_jsx("button", {
+        type: "button",
+        className: "".concat(prefixCls, "-item"),
+        "aria-label": minimize ? locale === null || locale === void 0 ? void 0 : locale.restoreWindow : locale === null || locale === void 0 ? void 0 : locale.minimize,
+        onClick: toggleMinimize,
+        children: /*#__PURE__*/_jsx("span", {
+          "aria-hidden": true,
+          children: minimize ? /*#__PURE__*/_jsx(ExpandAltOutlined, {}) : /*#__PURE__*/_jsx(MinusOutlined, {})
+        })
+      }), enableMaximization && /*#__PURE__*/_jsx("button", {
+        type: "button",
+        className: "".concat(prefixCls, "-item"),
+        "aria-label": maximization ? locale === null || locale === void 0 ? void 0 : locale.exitFullscreen : locale === null || locale === void 0 ? void 0 : locale.maximize,
+        onClick: toggleMaximization,
+        children: /*#__PURE__*/_jsx("span", {
+          "aria-hidden": true,
+          children: maximization ? /*#__PURE__*/_jsx(FullscreenExitOutlined, {}) : /*#__PURE__*/_jsx(FullscreenOutlined, {})
+        })
+      }), /*#__PURE__*/_jsx("button", {
+        type: "button",
+        className: "".concat(prefixCls, "-item"),
+        "aria-label": locale === null || locale === void 0 ? void 0 : locale.closeDialog,
+        onClick: handleClose,
+        children: /*#__PURE__*/_jsx("span", {
+          "aria-hidden": true,
+          children: /*#__PURE__*/_jsx(CloseOutlined, {})
+        })
+      })]
+    });
+  };
+  var renderHeader = function renderHeader() {
+    var headerStyleObj = _objectSpread(_objectSpread(_objectSpread({}, headerStyle), minimize ? {
+      boxShadow: '0 2px 20px 0 rgba(4, 1, 30, 0.07)'
+    } : {}), isEmbed ? {
+      cursor: 'initial'
+    } : {});
+    return /*#__PURE__*/_jsxs("header", {
+      className: "".concat(prefixCls, "-header"),
+      style: headerStyleObj,
+      onPointerDown: onDragStart,
+      onDoubleClick: toggleMaximization,
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "".concat(prefixCls, "-title"),
+        id: titleId,
+        children: title || (locale === null || locale === void 0 ? void 0 : locale.helpDocument)
+      }), renderControls()]
+    });
+  };
+  var renderMask = function renderMask() {
+    if (!mask) return null;
+    return /*#__PURE__*/_jsx("div", {
+      className: "".concat(prefixCls, "-mask")
+    });
+  };
+  var renderContent = function renderContent() {
+    return /*#__PURE__*/_jsxs("main", {
+      className: "".concat(prefixCls, "-main"),
+      style: minimize ? {
+        visibility: 'hidden'
+      } : {},
+      children: [renderMask(), children]
+    });
+  };
+  var renderEmbedBorders = function renderEmbedBorders() {
+    return /*#__PURE__*/_jsx(React.Fragment, {
+      children: /*#__PURE__*/_jsx(Anchor, {
+        prefixCls: prefixCls,
+        dock: Dock.left,
+        onStart: onResizeStart,
+        onMove: onResizeMove,
+        onEnd: onResizeEnd
+      })
+    });
+  };
+  var renderBorders = function renderBorders() {
+    return /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx(Anchor, {
+        prefixCls: prefixCls,
+        dock: Dock.top,
+        onStart: onResizeStart,
+        onMove: onResizeMove,
+        onEnd: onResizeEnd
+      }), /*#__PURE__*/_jsx(Anchor, {
+        prefixCls: prefixCls,
+        dock: Dock.right,
+        onStart: onResizeStart,
+        onMove: onResizeMove,
+        onEnd: onResizeEnd
+      }), /*#__PURE__*/_jsx(Anchor, {
+        prefixCls: prefixCls,
+        dock: Dock.bottom,
+        onStart: onResizeStart,
+        onMove: onResizeMove,
+        onEnd: onResizeEnd
+      }), /*#__PURE__*/_jsx(Anchor, {
+        prefixCls: prefixCls,
+        dock: Dock.left,
+        onStart: onResizeStart,
+        onMove: onResizeMove,
+        onEnd: onResizeEnd
+      }), /*#__PURE__*/_jsx(Anchor, {
+        prefixCls: prefixCls,
+        dock: Dock.topLeft,
+        onStart: onResizeStart,
+        onMove: onResizeMove,
+        onEnd: onResizeEnd
+      }), /*#__PURE__*/_jsx(Anchor, {
+        prefixCls: prefixCls,
+        dock: Dock.topRight,
+        onStart: onResizeStart,
+        onMove: onResizeMove,
+        onEnd: onResizeEnd
+      }), /*#__PURE__*/_jsx(Anchor, {
+        prefixCls: prefixCls,
+        dock: Dock.bottomLeft,
+        onStart: onResizeStart,
+        onMove: onResizeMove,
+        onEnd: onResizeEnd
+      }), /*#__PURE__*/_jsx(Anchor, {
+        prefixCls: prefixCls,
+        dock: Dock.bottomRight,
+        onStart: onResizeStart,
+        onMove: onResizeMove,
+        onEnd: onResizeEnd
+      })]
+    });
+  };
+  var renderDialog = function renderDialog() {
+    var style = getStyle;
+    return wrapSSR( /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+      ref: dialogRootRef,
+      className: "".concat(prefixCls, "-container ").concat(className || '', " ").concat(isEmbed ? "".concat(prefixCls, "-container-embed") : ''),
+      style: style,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": titleId
+    }, minimize ? {} : {
+      tabIndex: -1
+    }), {}, {
+      children: [renderHeader(), renderContent(), isEmbed ? renderEmbedBorders() : renderBorders(), /*#__PURE__*/_jsx(EventProxy, {
+        onPointerMove: onDragMove,
+        onPointerUp: onDragEnd
+      }), /*#__PURE__*/_jsx(EventProxy, {
+        onPointerUp: detectPointUp
+      })]
+    })));
+  };
+
+  // 嵌入模式通过style控制显隐
+  if (!visible && !isEmbed) return /*#__PURE__*/_jsx(React.Fragment, {});
+  return /*#__PURE__*/createPortal(renderDialog(), getContainer());
+};
 export default LocaleWrapper({
   componentName: 'Dialog',
   defaultLocale: zhCN