@oceanbase/ui 1.0.0-alpha.0 → 1.0.0-alpha.10

package/lib/Dialog/index.js

@@ -34,15 +34,15 @@ __export(Dialog_exports, {
 module.exports = __toCommonJS(Dialog_exports);
 var import_icons = require("@oceanbase/icons");
 var import_react = __toESM(require("react"));
+var import_design = require("@oceanbase/design");
 var import_react_dom = require("react-dom");
 var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
-var import_util = require("../_util");
 var import_Anchor = require("./Anchor");
 var import_Dock = require("./Dock");
 var import_EventProxy = require("./EventProxy");
 var import_zh_CN = __toESM(require("./locale/zh-CN"));
-var import_index = require("./index.less");
-var prefix = (0, import_util.getPrefix)("dialog");
+var import_style = __toESM(require("./style"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var DEFAULT_LEFT = 0.1;
 var DEFAULT_TOP = 0.1;
 var MINIMIZE_HEIGHT = 36;
@@ -52,505 +52,553 @@ var DEFAULT_WIDTH_MEMBER = 520;
 var DEFAULT_HEIGHT_MEMBER = 600;
 var DEFAULT_BORDER_WIDTH = 24;
 var SCROLL_BAR_WIDTH = 1;
-var _DialogComp = class extends import_react.default.PureComponent {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      mask: true,
-      width: this.props.width ?? DEFAULT_WIDTH_MEMBER,
-      height: this.props.height ?? DEFAULT_HEIGHT_MEMBER,
-      left: this.props.left ?? this.props.clientWidth - (this.props.width ?? DEFAULT_WIDTH_MEMBER) - DEFAULT_BORDER_WIDTH,
-      top: this.props.top ?? this.props.clientHeight - (this.props.height ?? DEFAULT_HEIGHT_MEMBER) - DEFAULT_BORDER_WIDTH,
-      moveX: 0,
-      moveY: 0,
-      maximization: this.props.isEmbed,
-      minimize: false,
-      headerStyle: {}
-    };
-    this.clientX = 0;
-    this.clientY = 0;
-    this.getDefaultEmbedState = () => {
-      const { clientHeight, clientWidth, width, height, left, top } = this.props;
-      return {
-        width: width ?? DEFAULT_WIDTH_MEMBER,
-        height: height ?? DEFAULT_HEIGHT_MEMBER,
-        left: left ?? clientWidth - (width ?? DEFAULT_WIDTH_MEMBER) - DEFAULT_BORDER_WIDTH,
-        top: top ?? clientHeight - (height ?? DEFAULT_HEIGHT_MEMBER) - DEFAULT_BORDER_WIDTH
-      };
-    };
-    this.host = document.createElement("div");
-    this.isPointDown = false;
-    this.onDragStart = (event) => {
-      if (!this.props.draggable)
-        return;
-      const { maximization } = this.state;
-      if (maximization)
-        return;
-      this.setState({
-        mask: true,
-        ...this.state.left === void 0 ? { left: DEFAULT_LEFT } : {},
-        ...this.state.top === void 0 ? { top: DEFAULT_TOP } : {}
-      });
-      this.clientX = event.clientX;
-      this.clientY = event.clientY;
-      this.isPointDown = true;
-    };
-    this.onDragMove = (event) => {
-      if (!this.props.draggable || !this.isPointDown)
-        return;
-      event.preventDefault();
-      this.setState({
-        moveX: event.clientX - this.clientX,
-        moveY: event.clientY - this.clientY
-      });
-    };
-    this.onDragEnd = () => {
-      const { draggable } = this.props;
-      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
-      });
-    };
-    this.toggleMinimize = () => {
-      this.setState({
-        maximization: false,
-        minimize: !this.state.minimize
-      });
-    };
-    this.toggleMaximization = () => {
-      const enable = this.props.resizable && this.props.enableMaximization && !this.props.isEmbed;
-      if (!enable)
-        return;
-      this.setState({
-        maximization: !this.state.maximization,
-        minimize: false
-      });
-    };
-    this.onClose = (event) => {
-      var _a, _b;
-      event.stopPropagation();
-      (_b = (_a = this.props).onClose) == null ? void 0 : _b.call(_a);
-    };
-    this.getBaseStyle = () => {
-      const { visible } = this.props;
-      const baseStyle = {
-        visibility: visible ? "visible" : "hidden",
-        opacity: visible ? 1 : 0
-      };
-      return baseStyle;
-    };
-    this.getStyle = () => {
-      const { maximization, minimize, headerStyle } = this.state;
-      const transform = `translate(${this.state.moveX}px, ${this.state.moveY}px)`;
-      const baseStyle = this.getBaseStyle();
-      if (maximization && !this.props.isEmbed) {
-        return {
-          ...baseStyle,
-          top: 0,
-          bottom: 0,
-          right: 0,
-          width: this.props.width || DEFAULT_WIDTH_MEMBER,
-          height: "auto",
-          borderRadius: 0
-        };
-      } else if (minimize) {
-        const { height } = headerStyle;
-        return {
-          ...baseStyle,
-          ...this.getCompatAbsPostion(this.state),
-          width: MINIMIZE_WIDTH,
-          height: height || MINIMIZE_HEIGHT,
-          transform
-        };
-      } else {
-        return {
-          ...baseStyle,
-          ...this.getCompatAbsPostion(this.state),
-          transform
-        };
-      }
+var _container = null;
+var getContainer = () => {
+  if (!_container) {
+    _container = document.createElement("div");
+    document.body.appendChild(_container);
+  }
+  return _container;
+};
+var DialogComp = (props) => {
+  const {
+    className,
+    visible,
+    children,
+    min = DEFAULT_MIN,
+    max,
+    width,
+    height,
+    left,
+    top,
+    title,
+    onClose,
+    clientWidth,
+    clientHeight,
+    resizable = true,
+    draggable = true,
+    enableMaximization = true,
+    locale,
+    extLink,
+    setRootWidth,
+    isEmbed = false
+  } = props;
+  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("dialog");
+  const { wrapSSR } = (0, import_style.default)(prefixCls);
+  const hostRef = (0, import_react.useRef)(null);
+  const clientXRef = (0, import_react.useRef)(0);
+  const clientYRef = (0, import_react.useRef)(0);
+  const isPointDownRef = (0, import_react.useRef)(false);
+  const originInfoRef = (0, import_react.useRef)({});
+  const [mask, setMask] = (0, import_react.useState)(true);
+  const [dialogWidth, setDialogWidth] = (0, import_react.useState)(width ?? DEFAULT_WIDTH_MEMBER);
+  const [dialogHeight, setDialogHeight] = (0, import_react.useState)(height ?? DEFAULT_HEIGHT_MEMBER);
+  const [dialogLeft, setDialogLeft] = (0, import_react.useState)(
+    left ?? clientWidth - (width ?? DEFAULT_WIDTH_MEMBER) - DEFAULT_BORDER_WIDTH
+  );
+  const [dialogTop, setDialogTop] = (0, import_react.useState)(
+    top ?? clientHeight - (height ?? DEFAULT_HEIGHT_MEMBER) - DEFAULT_BORDER_WIDTH
+  );
+  const [moveX, setMoveX] = (0, import_react.useState)(0);
+  const [moveY, setMoveY] = (0, import_react.useState)(0);
+  const [maximization, setMaximization] = (0, import_react.useState)(isEmbed);
+  const [minimize, setMinimize] = (0, import_react.useState)(false);
+  const [headerStyle, setHeaderStyle] = (0, import_react.useState)({});
+  const maxSize = (0, import_react.useMemo)(() => {
+    if (max)
+      return max;
+    return [clientWidth, clientHeight];
+  }, [max, clientWidth, clientHeight]);
+  const minSize = (0, import_react.useMemo)(() => min, [min]);
+  const getDefaultEmbedState = (0, import_react.useCallback)(() => {
+    return {
+      width: width ?? DEFAULT_WIDTH_MEMBER,
+      height: height ?? DEFAULT_HEIGHT_MEMBER,
+      left: left ?? clientWidth - (width ?? DEFAULT_WIDTH_MEMBER) - DEFAULT_BORDER_WIDTH,
+      top: top ?? clientHeight - (height ?? DEFAULT_HEIGHT_MEMBER) - DEFAULT_BORDER_WIDTH
     };
-    this.compatClonedModel = (model) => {
+  }, [width, height, left, top, clientWidth, clientHeight]);
+  const setRootWidthInEmbedMode = (0, import_react.useCallback)(
+    (newWidth) => {
+      const restWidth = !!newWidth ? newWidth + SCROLL_BAR_WIDTH : 0;
+      const rootWidth = (clientWidth - restWidth) / clientWidth;
+      setRootWidth == null ? void 0 : setRootWidth(`${rootWidth * 100}%`);
+    },
+    [clientWidth, setRootWidth]
+  );
+  const compatClonedModel = (0, import_react.useCallback)(
+    (model) => {
       return {
         left: DEFAULT_LEFT,
         top: DEFAULT_TOP,
-        width: DEFAULT_WIDTH_MEMBER / this.props.clientWidth,
-        height: DEFAULT_HEIGHT_MEMBER / this.props.clientHeight,
+        width: DEFAULT_WIDTH_MEMBER / clientWidth,
+        height: DEFAULT_HEIGHT_MEMBER / clientHeight,
         minimize: false,
         maximization: false,
         ...model
       };
+    },
+    [clientWidth, clientHeight]
+  );
+  const checkSize = (w, h) => {
+    const newModel = {};
+    const result = {
+      widthShouldChange: true,
+      heightShouldChange: true
     };
-    this.detectPointUp = () => {
-      this.setState({ mask: false });
-    };
-    this.setRootWidthInEmbedMode = (newWidth) => {
-      const { setRootWidth } = this.props;
-      const restWidth = !!newWidth ? newWidth + SCROLL_BAR_WIDTH : 0;
-      const rootWidth = (this.props.clientWidth - restWidth) / this.props.clientWidth;
-      setRootWidth == null ? void 0 : setRootWidth(`${rootWidth * 100}%`);
-    };
-    this.onResizeStart = () => {
-      if (this.state.minimize || !this.props.resizable)
-        return;
-      this.originInfo = this.compatClonedModel(this.state);
-      this.setState({ mask: true });
-    };
-    this.onResizeMove = (event) => {
-      const { resizable } = this.props;
-      event.preventDefault();
-      if (this.state.minimize || !resizable)
-        return;
-      const newWidth = this.originInfo.width + event.moveRight;
-      const newHeight = this.originInfo.height + event.moveBottom;
-      const checkResult = this.checkSize(newWidth, newHeight);
-      if (checkResult.widthShouldChange) {
-        this.setRootWidthInEmbedMode(newWidth);
-      }
-      this.setState({
-        ...checkResult.widthShouldChange ? {
-          // @ts-ignore
-          left: this.originInfo.left + event.moveLeft,
-          width: newWidth
-        } : {},
-        ...checkResult.heightShouldChange ? {
-          // @ts-ignore
-          top: this.originInfo.top + event.moveTop,
-          height: newHeight
-        } : {}
-      });
-    };
-    this.onResizeEnd = () => {
-      const { mask } = this.state;
-      if (!mask || !this.props.resizable)
-        return;
-      this.setState({ mask: false });
-    };
-  }
-  static get container() {
-    if (!this._container) {
-      this._container = document.createElement("div");
-      document.body.appendChild(this._container);
-    }
-    return this._container;
-  }
-  componentDidMount() {
-    _DialogComp.container.appendChild(this.host);
-  }
-  componentDidUpdate(prevProps, _) {
-    const {
-      visible: preVisible,
-      clientWidth: preClientWidth,
-      clientHeight: preClientHeight,
-      isEmbed: preIsEmbed
-    } = prevProps;
-    const { visible, isEmbed, clientWidth, clientHeight, height, width, top, left } = this.props;
-    if (preIsEmbed && !isEmbed) {
-      this.setRootWidthInEmbedMode(0);
-      this.setState({
-        minimize: false,
-        maximization: false,
-        ...height ? { height } : {},
-        ...width ? { width } : {},
-        ...top ? { top } : {},
-        ...left ? { left } : {}
-      });
-      return;
+    if (minSize && w < minSize[0]) {
+      newModel.width = minSize[0];
+      result.widthShouldChange = false;
     }
-    if (!preIsEmbed && isEmbed) {
-      this.setState({
-        minimize: false,
-        maximization: true
-      });
+    if (minSize && h < minSize[1]) {
+      newModel.height = minSize[1];
+      result.heightShouldChange = false;
     }
-    if (visible) {
-      if (!preVisible || clientWidth !== preClientWidth || clientHeight !== preClientHeight) {
-        const tempState = this.getDefaultEmbedState();
-        this.setState(tempState);
-        this.setRootWidthInEmbedMode(tempState == null ? void 0 : tempState.width);
-      }
-    } else if (preVisible && !visible) {
-      this.setRootWidthInEmbedMode(0);
+    if (maxSize && w > maxSize[0]) {
+      newModel.width = maxSize[0];
+      result.widthShouldChange = false;
     }
-  }
-  componentWillUnmount() {
-    _DialogComp.container.removeChild(this.host);
-  }
-  get max() {
-    let { max } = this.props;
-    if (!max) {
-      const { clientWidth, clientHeight } = this.props;
-      max = [clientWidth, clientHeight];
+    if (maxSize && h > maxSize[1]) {
+      newModel.height = maxSize[1];
+      result.heightShouldChange = false;
     }
-    return max;
-  }
-  get min() {
-    return this.props.min;
-  }
-  get hasMask() {
-    return this.state.mask;
-  }
-  renderHeader() {
-    const { locale, title, isEmbed } = this.props;
-    const { headerStyle, minimize } = this.state;
-    const style = {
-      ...headerStyle,
-      ...minimize ? { boxShadow: "0 2px 20px 0 rgba(4, 1, 30, 0.07)" } : {},
-      ...isEmbed ? { cursor: "initial" } : {}
+    return result;
+  };
+  (0, import_react.useEffect)(() => {
+    const host = document.createElement("div");
+    hostRef.current = host;
+    getContainer().appendChild(host);
+    return () => {
+      if (hostRef.current && getContainer().contains(hostRef.current)) {
+        getContainer().removeChild(hostRef.current);
+      }
     };
-    return /* @__PURE__ */ import_react.default.createElement(
-      "header",
-      {
-        className: `${prefix}-header`,
-        style,
-        onPointerDown: this.onDragStart,
-        onDoubleClick: this.toggleMaximization
-      },
-      /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-title` }, title || locale.helpDocument),
-      this.renderControls()
-    );
-  }
-  renderControlLink() {
-    const { extLink } = this.props;
-    return /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-item` }, /* @__PURE__ */ import_react.default.createElement(
-      "a",
-      {
-        className: `${prefix}-item-link`,
-        href: extLink == null ? void 0 : extLink.link,
-        target: "_blank",
-        rel: "noopener noreferrer"
-      },
-      /* @__PURE__ */ import_react.default.createElement(
-        "svg",
-        {
-          className: "icon",
-          viewBox: "0 0 1024 1024",
-          version: "1.1",
-          xmlns: "http://www.w3.org/2000/svg",
-          width: "16",
-          height: "16"
-        },
-        /* @__PURE__ */ import_react.default.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"
-          }
-        )
-      )
-    ));
-  }
-  renderControls() {
-    const { maximization, minimize } = this.state;
-    const { enableMaximization, isEmbed } = this.props;
-    if (isEmbed) {
-      return /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-controls` }, this.renderControlLink(), /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-item`, onClick: this.onClose }, /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, null)));
-    }
-    return /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-controls` }, this.renderControlLink(), /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-item`, onClick: this.toggleMinimize }, minimize ? /* @__PURE__ */ import_react.default.createElement(import_icons.ExpandAltOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.MinusOutlined, null)), enableMaximization && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-item`, onClick: this.toggleMaximization }, maximization ? /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenExitOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenOutlined, null)), /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-item`, onClick: this.onClose }, /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, null)));
-  }
-  renderContent() {
-    const { children } = this.props;
-    return /* @__PURE__ */ import_react.default.createElement(
-      "main",
-      {
-        className: `${prefix}-main`,
-        style: this.state.minimize ? { visibility: "hidden" } : {}
-      },
-      this.renderMask(),
-      children
-    );
-  }
-  renderMask() {
-    if (!this.hasMask)
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (!visible) {
+      setRootWidthInEmbedMode(0);
       return;
-    return /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-mask` });
-  }
-  // 将比例转换为绝对数值，各个端的渲染依据视口大小会有不同
-  getCompatAbsPostion(info) {
-    const compatInfo = this.compatClonedModel(info);
-    const { minimize } = compatInfo;
-    const { clientWidth, clientHeight } = this.props;
-    const ret = {};
-    ["left", "width", "top", "height"].forEach((key) => {
-      ret[key] = compatInfo[key];
-    });
-    const { max } = this;
-    const { min } = this;
-    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];
+    const tempState = getDefaultEmbedState();
+    setDialogWidth(tempState.width);
+    setDialogHeight(tempState.height);
+    setDialogLeft(tempState.left);
+    setDialogTop(tempState.top);
+    setRootWidthInEmbedMode(tempState.width);
+  }, [visible, clientWidth, clientHeight, getDefaultEmbedState, setRootWidthInEmbedMode]);
+  (0, import_react.useEffect)(() => {
+    if (isEmbed) {
+      setMinimize(false);
+      setMaximization(true);
+    } else {
+      setMinimize(false);
+      setMaximization(false);
+      if (height)
+        setDialogHeight(height);
+      if (width)
+        setDialogWidth(width);
+      if (top !== void 0)
+        setDialogTop(top);
+      if (left !== void 0)
+        setDialogLeft(left);
     }
-    if (min && ret.height < min[1]) {
-      ret.height = min[1];
+  }, [isEmbed, height, width, top, left]);
+  const onDragStart = (event) => {
+    if (!draggable)
+      return;
+    if (maximization)
+      return;
+    setMask(true);
+    if (dialogLeft === void 0) {
+      setDialogLeft(DEFAULT_LEFT);
     }
-    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 (dialogTop === void 0) {
+      setDialogTop(DEFAULT_TOP);
     }
-    if (ret.left < 0) {
-      this.setState({ left: 0 });
+    clientXRef.current = event.clientX;
+    clientYRef.current = event.clientY;
+    isPointDownRef.current = true;
+  };
+  const onDragMove = (event) => {
+    if (!draggable || !isPointDownRef.current)
+      return;
+    event.preventDefault();
+    setMoveX(event.clientX - clientXRef.current);
+    setMoveY(event.clientY - clientYRef.current);
+  };
+  const onDragEnd = () => {
+    if (!draggable)
+      return;
+    isPointDownRef.current = false;
+    if (moveX === 0 && moveY === 0)
+      return;
+    setMask(false);
+    setDialogLeft((prev) => (prev ?? 0) + moveX);
+    setDialogTop((prev) => (prev ?? 0) + moveY);
+    setMoveX(0);
+    setMoveY(0);
+  };
+  const detectPointUp = () => {
+    setMask(false);
+  };
+  const onResizeStart = () => {
+    if (minimize || !resizable)
+      return;
+    originInfoRef.current = compatClonedModel({
+      width: dialogWidth,
+      height: dialogHeight,
+      left: dialogLeft,
+      top: dialogTop,
+      minimize,
+      maximization
+    });
+    setMask(true);
+  };
+  const onResizeMove = (event) => {
+    event.preventDefault();
+    if (minimize || !resizable)
+      return;
+    const newWidth = originInfoRef.current.width + event.moveRight;
+    const newHeight = originInfoRef.current.height + event.moveBottom;
+    const checkResult = checkSize(newWidth, newHeight);
+    if (checkResult.widthShouldChange) {
+      setRootWidthInEmbedMode(newWidth);
     }
-    if (ret.top < 0) {
-      this.setState({ top: 0 });
+    if (checkResult.widthShouldChange) {
+      setDialogLeft(originInfoRef.current.left + event.moveLeft);
+      setDialogWidth(newWidth);
     }
-    if (ret.top + ret.height > clientHeight) {
-      ret.top = clientHeight - ret.height;
-      this.setState({ top: ret.top });
+    if (checkResult.heightShouldChange) {
+      setDialogTop(originInfoRef.current.top + event.moveTop);
+      setDialogHeight(newHeight);
     }
-    return ret;
-  }
-  renderDialog() {
-    const style = this.getStyle();
-    const { className, isEmbed } = this.props;
-    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        className: `${prefix}-container ${className} ${isEmbed ? `${prefix}-container-embed` : ""}`,
-        style,
-        ...this.state.minimize ? {} : { tabIndex: 0 }
-      },
-      this.renderHeader(),
-      this.renderContent(),
-      isEmbed ? this.renderEmbedBorders() : this.renderBorders(),
-      /* @__PURE__ */ import_react.default.createElement(import_EventProxy.EventProxy, { onPointerMove: this.onDragMove, onPointerUp: this.onDragEnd }),
-      /* @__PURE__ */ import_react.default.createElement(import_EventProxy.EventProxy, { onPointerUp: this.detectPointUp })
-    ));
-  }
-  /**
-   * width，height 是否在最大最小值的范围内
-   */
-  checkSize(width, height) {
-    const { max } = this;
-    const { min } = this;
-    const newModel = {};
-    const result = {
-      widthShouldChange: true,
-      heightShouldChange: true
+  };
+  const onResizeEnd = () => {
+    if (!mask || !resizable)
+      return;
+    setMask(false);
+  };
+  const toggleMinimize = () => {
+    setMaximization(false);
+    setMinimize((prev) => !prev);
+  };
+  const toggleMaximization = () => {
+    const enable = resizable && enableMaximization && !isEmbed;
+    if (!enable)
+      return;
+    setMaximization((prev) => !prev);
+    setMinimize(false);
+  };
+  const handleClose = (event) => {
+    event.stopPropagation();
+    onClose == null ? void 0 : onClose();
+  };
+  const getBaseStyle = (0, import_react.useCallback)(() => {
+    return {
+      visibility: visible ? "visible" : "hidden",
+      opacity: visible ? 1 : 0
     };
-    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;
-  }
-  renderEmbedBorders() {
-    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-      import_Anchor.Anchor,
-      {
-        dock: import_Dock.Dock.left,
-        onStart: this.onResizeStart,
-        onMove: this.onResizeMove,
-        onEnd: this.onResizeEnd
+  }, [visible]);
+  const getCompatAbsPostion = (0, import_react.useCallback)(
+    (info) => {
+      const compatInfo = compatClonedModel(info);
+      const { minimize: isMinimize } = compatInfo;
+      const ret = {};
+      ["left", "width", "top", "height"].forEach((key) => {
+        ret[key] = compatInfo[key];
+      });
+      if (maxSize && ret.width > maxSize[0]) {
+        ret.width = maxSize[0];
       }
-    ));
-  }
-  renderBorders() {
-    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-      import_Anchor.Anchor,
-      {
-        dock: import_Dock.Dock.top,
-        onStart: this.onResizeStart,
-        onMove: this.onResizeMove,
-        onEnd: this.onResizeEnd
+      if (maxSize && ret.height > maxSize[1]) {
+        ret.height = maxSize[1];
       }
-    ), /* @__PURE__ */ import_react.default.createElement(
-      import_Anchor.Anchor,
-      {
-        dock: import_Dock.Dock.right,
-        onStart: this.onResizeStart,
-        onMove: this.onResizeMove,
-        onEnd: this.onResizeEnd
+      if (minSize && ret.width < minSize[0]) {
+        ret.width = minSize[0];
       }
-    ), /* @__PURE__ */ import_react.default.createElement(
-      import_Anchor.Anchor,
-      {
-        dock: import_Dock.Dock.bottom,
-        onStart: this.onResizeStart,
-        onMove: this.onResizeMove,
-        onEnd: this.onResizeEnd
+      if (minSize && ret.height < minSize[1]) {
+        ret.height = minSize[1];
       }
-    ), /* @__PURE__ */ import_react.default.createElement(
-      import_Anchor.Anchor,
-      {
-        dock: import_Dock.Dock.left,
-        onStart: this.onResizeStart,
-        onMove: this.onResizeMove,
-        onEnd: this.onResizeEnd
+      ret.width = isMinimize ? MINIMIZE_WIDTH : ret.width;
+      ret.height = isMinimize ? MINIMIZE_HEIGHT : ret.height;
+      if (ret.left + ret.width > clientWidth) {
+        ret.left = clientWidth - ret.width;
       }
-    ), /* @__PURE__ */ import_react.default.createElement(
-      import_Anchor.Anchor,
-      {
-        dock: import_Dock.Dock.topLeft,
-        onStart: this.onResizeStart,
-        onMove: this.onResizeMove,
-        onEnd: this.onResizeEnd
+      if (ret.left < 0) {
+        ret.left = 0;
       }
-    ), /* @__PURE__ */ import_react.default.createElement(
-      import_Anchor.Anchor,
+      if (ret.top < 0) {
+        ret.top = 0;
+      }
+      if (ret.top + ret.height > clientHeight) {
+        ret.top = clientHeight - ret.height;
+      }
+      return ret;
+    },
+    [maxSize, minSize, clientWidth, clientHeight, compatClonedModel]
+  );
+  (0, import_react.useEffect)(() => {
+    if (!visible)
+      return;
+    const adjusted = getCompatAbsPostion({
+      width: dialogWidth,
+      height: dialogHeight,
+      left: dialogLeft,
+      top: dialogTop,
+      minimize
+    });
+    if (adjusted.left !== dialogLeft) {
+      setDialogLeft(adjusted.left);
+    }
+    if (adjusted.top !== dialogTop) {
+      setDialogTop(adjusted.top);
+    }
+  }, [dialogWidth, dialogHeight, dialogLeft, dialogTop, minimize, visible, getCompatAbsPostion]);
+  const getStyle = (0, import_react.useMemo)(() => {
+    const transform = `translate(${moveX}px, ${moveY}px)`;
+    const baseStyle = getBaseStyle();
+    if (maximization && !isEmbed) {
+      return {
+        ...baseStyle,
+        top: 0,
+        bottom: 0,
+        right: 0,
+        width: width || DEFAULT_WIDTH_MEMBER,
+        height: "auto",
+        borderRadius: 0
+      };
+    } else if (minimize) {
+      const { height: headerHeight } = headerStyle;
+      const position = getCompatAbsPostion({
+        width: dialogWidth,
+        height: dialogHeight,
+        left: dialogLeft,
+        top: dialogTop,
+        minimize
+      });
+      return {
+        ...baseStyle,
+        ...position,
+        width: MINIMIZE_WIDTH,
+        height: headerHeight || MINIMIZE_HEIGHT,
+        transform
+      };
+    } else {
+      const position = getCompatAbsPostion({
+        width: dialogWidth,
+        height: dialogHeight,
+        left: dialogLeft,
+        top: dialogTop
+      });
+      return {
+        ...baseStyle,
+        ...position,
+        transform
+      };
+    }
+  }, [
+    maximization,
+    isEmbed,
+    minimize,
+    moveX,
+    moveY,
+    width,
+    headerStyle,
+    dialogWidth,
+    dialogHeight,
+    dialogLeft,
+    dialogTop,
+    getCompatAbsPostion,
+    getBaseStyle
+  ]);
+  const renderControlLink = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${prefixCls}-item`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "a",
       {
-        dock: import_Dock.Dock.topRight,
-        onStart: this.onResizeStart,
-        onMove: this.onResizeMove,
-        onEnd: this.onResizeEnd
+        className: `${prefixCls}-item-link`,
+        href: extLink == null ? void 0 : extLink.link,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "svg",
+          {
+            className: "icon",
+            viewBox: "0 0 1024 1024",
+            version: "1.1",
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "16",
+            height: "16",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.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" })
+          }
+        )
       }
-    ), /* @__PURE__ */ import_react.default.createElement(
-      import_Anchor.Anchor,
+    ) });
+  };
+  const renderControls = () => {
+    if (isEmbed) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: `${prefixCls}-controls`, children: [
+        renderControlLink(),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${prefixCls}-item`, onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseOutlined, {}) })
+      ] });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: `${prefixCls}-controls`, children: [
+      renderControlLink(),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${prefixCls}-item`, onClick: toggleMinimize, children: minimize ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ExpandAltOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.MinusOutlined, {}) }),
+      enableMaximization && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${prefixCls}-item`, onClick: toggleMaximization, children: maximization ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.FullscreenExitOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.FullscreenOutlined, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${prefixCls}-item`, onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseOutlined, {}) })
+    ] });
+  };
+  const renderHeader = () => {
+    const headerStyleObj = {
+      ...headerStyle,
+      ...minimize ? { boxShadow: "0 2px 20px 0 rgba(4, 1, 30, 0.07)" } : {},
+      ...isEmbed ? { cursor: "initial" } : {}
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "header",
       {
-        dock: import_Dock.Dock.bottomLeft,
-        onStart: this.onResizeStart,
-        onMove: this.onResizeMove,
-        onEnd: this.onResizeEnd
+        className: `${prefixCls}-header`,
+        style: headerStyleObj,
+        onPointerDown: onDragStart,
+        onDoubleClick: toggleMaximization,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${prefixCls}-title`, children: title || (locale == null ? void 0 : locale.helpDocument) }),
+          renderControls()
+        ]
       }
-    ), /* @__PURE__ */ import_react.default.createElement(
+    );
+  };
+  const renderMask = () => {
+    if (!mask)
+      return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-mask` });
+  };
+  const renderContent = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("main", { className: `${prefixCls}-main`, style: minimize ? { visibility: "hidden" } : {}, children: [
+      renderMask(),
+      children
+    ] });
+  };
+  const renderEmbedBorders = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Anchor.Anchor,
       {
-        dock: import_Dock.Dock.bottomRight,
-        onStart: this.onResizeStart,
-        onMove: this.onResizeMove,
-        onEnd: this.onResizeEnd
+        prefixCls,
+        dock: import_Dock.Dock.left,
+        onStart: onResizeStart,
+        onMove: onResizeMove,
+        onEnd: onResizeEnd
       }
-    ));
-  }
-  render() {
-    const { visible, isEmbed } = this.props;
-    if (!visible && !isEmbed)
-      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null);
-    return (0, import_react_dom.createPortal)(this.renderDialog(), _DialogComp.container);
-  }
-};
-var DialogComp = _DialogComp;
-DialogComp.defaultProps = {
-  min: DEFAULT_MIN,
-  resizable: true,
-  draggable: true,
-  enableMaximization: true,
-  isEmbed: false
+    ) });
+  };
+  const renderBorders = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Anchor.Anchor,
+        {
+          prefixCls,
+          dock: import_Dock.Dock.top,
+          onStart: onResizeStart,
+          onMove: onResizeMove,
+          onEnd: onResizeEnd
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Anchor.Anchor,
+        {
+          prefixCls,
+          dock: import_Dock.Dock.right,
+          onStart: onResizeStart,
+          onMove: onResizeMove,
+          onEnd: onResizeEnd
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Anchor.Anchor,
+        {
+          prefixCls,
+          dock: import_Dock.Dock.bottom,
+          onStart: onResizeStart,
+          onMove: onResizeMove,
+          onEnd: onResizeEnd
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Anchor.Anchor,
+        {
+          prefixCls,
+          dock: import_Dock.Dock.left,
+          onStart: onResizeStart,
+          onMove: onResizeMove,
+          onEnd: onResizeEnd
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Anchor.Anchor,
+        {
+          prefixCls,
+          dock: import_Dock.Dock.topLeft,
+          onStart: onResizeStart,
+          onMove: onResizeMove,
+          onEnd: onResizeEnd
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Anchor.Anchor,
+        {
+          prefixCls,
+          dock: import_Dock.Dock.topRight,
+          onStart: onResizeStart,
+          onMove: onResizeMove,
+          onEnd: onResizeEnd
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Anchor.Anchor,
+        {
+          prefixCls,
+          dock: import_Dock.Dock.bottomLeft,
+          onStart: onResizeStart,
+          onMove: onResizeMove,
+          onEnd: onResizeEnd
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Anchor.Anchor,
+        {
+          prefixCls,
+          dock: import_Dock.Dock.bottomRight,
+          onStart: onResizeStart,
+          onMove: onResizeMove,
+          onEnd: onResizeEnd
+        }
+      )
+    ] });
+  };
+  const renderDialog = () => {
+    const style = getStyle;
+    return wrapSSR(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: `${prefixCls}-container ${className || ""} ${isEmbed ? `${prefixCls}-container-embed` : ""}`,
+          style,
+          ...minimize ? {} : { tabIndex: 0 },
+          children: [
+            renderHeader(),
+            renderContent(),
+            isEmbed ? renderEmbedBorders() : renderBorders(),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_EventProxy.EventProxy, { onPointerMove: onDragMove, onPointerUp: onDragEnd }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_EventProxy.EventProxy, { onPointerUp: detectPointUp })
+          ]
+        }
+      )
+    );
+  };
+  if (!visible && !isEmbed)
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Fragment, {});
+  return (0, import_react_dom.createPortal)(renderDialog(), getContainer());
 };
 var Dialog_default = (0, import_LocaleWrapper.default)({
   componentName: "Dialog",