@tendaui/react 1.1.1

package/es/dialog/Dialog.js

@@ -0,0 +1,575 @@
+import { _ as _defineProperty } from '../_chunks/dep-Cwish4GD.js';
+import { _ as _slicedToArray } from '../_chunks/dep-CzLhKWCf.js';
+import { _ as _objectWithoutProperties } from '../_chunks/dep-DN7d1SzH.js';
+import React, { useMemo, useState, useCallback, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import classNames from 'classnames';
+import { isUndefined } from 'lodash-es';
+import Portal from '../common/Portal.js';
+import { u as useConfig } from '../_chunks/dep-u1x3x6MJ.js';
+import { u as useDefaultProps } from '../_chunks/dep-DGvfel3I.js';
+import { d as dialogDefaultProps, D as DialogCard } from '../_chunks/dep-CoIiHOgo.js';
+import { _ as _typeof } from '../_chunks/dep-D-UKOauR.js';
+import { _ as _toConsumableArray } from '../_chunks/dep-CgyDw_YI.js';
+import { u as useIsomorphicLayoutEffect } from '../_chunks/dep-0QH2Ee4R.js';
+import 'react-dom';
+import '../config-provider/ConfigContext.js';
+import '@tendaui/icons';
+import '../button/index.js';
+import '../button/Button.js';
+import '../loading/index.js';
+import '../loading/Loading.js';
+import '../loading/Gradient.js';
+import '../_chunks/dep-DHWwZ2Nj.js';
+import '../_chunks/dep-PPA-yoAy.js';
+import '../_chunks/dep-BH5n5r1M.js';
+import '../loading/style/css.js';
+import '../_chunks/dep-D6YxJv-F.js';
+import '../button/style/css.js';
+import '../_chunks/dep-bWaVq_y3.js';
+
+var defaultAttach = "body";
+var useAttach = function useAttach(name, attach) {
+  var globalConfig = useConfig();
+  var attachVal = useMemo(function () {
+    var _globalConfig$attach;
+    return attach || (globalConfig === null || globalConfig === void 0 || (_globalConfig$attach = globalConfig.attach) === null || _globalConfig$attach === void 0 ? void 0 : _globalConfig$attach[name]) || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.attach) || defaultAttach;
+  }, [name, attach, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.attach]);
+  return attachVal;
+};
+
+function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var isFunction = function isFunction(arg) {
+  return typeof arg === "function";
+};
+var useSetState = function useSetState() {
+  var initialState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _useState = useState(initialState),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var setMergeState = useCallback(function (patch) {
+    setState(function (prevState) {
+      return _objectSpread$1(_objectSpread$1({}, prevState), isFunction(patch) ? patch(prevState) : patch);
+    });
+  }, []);
+  return [state, setMergeState];
+};
+
+var useMouseEvent = function useMouseEvent(elementRef, options) {
+  var _options$enabled = options.enabled,
+    enabled = _options$enabled === void 0 ? true : _options$enabled,
+    _options$enableTouch = options.enableTouch,
+    enableTouch = _options$enableTouch === void 0 ? true : _options$enableTouch;
+  var isMovingRef = useRef(false);
+  var normalizeEvent = function normalizeEvent(e) {
+    if (!enableTouch) {
+      return e;
+    }
+    if ("touches" in e && e.touches.length > 0) {
+      return e.touches[0];
+    }
+    if ("changedTouches" in e && e.changedTouches.length > 0) {
+      return e.changedTouches[0];
+    }
+    if ("clientX" in e && "clientY" in e) {
+      return e;
+    }
+    return void 0;
+  };
+  var getCoordinate = function getCoordinate(event) {
+    var _elementRef$current;
+    var rect = elementRef === null || elementRef === void 0 || (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.getBoundingClientRect();
+    if (!rect) {
+      return {
+        x: 0,
+        y: 0
+      };
+    }
+    var clientX = event.clientX,
+      clientY = event.clientY;
+    var left = clientX - rect.left;
+    var top = clientY - rect.top;
+    return {
+      x: Math.min(Math.max(0, left), rect.width),
+      y: Math.min(Math.max(0, top), rect.height)
+    };
+  };
+  var emitMouseChange = function emitMouseChange(e, handler) {
+    if (!handler) return;
+    var event = normalizeEvent(e);
+    if (event !== void 0) {
+      var coordinate = getCoordinate(event);
+      handler(event, {
+        coordinate: coordinate
+      });
+    }
+  };
+  var handleMouseMove = function handleMouseMove(e) {
+    if (!isMovingRef.current) return;
+    e.preventDefault();
+    emitMouseChange(e, options.onMove);
+  };
+  var _handleMouseUp = function handleMouseUp(e) {
+    if (!isMovingRef.current) return;
+    isMovingRef.current = false;
+    emitMouseChange(e, options.onUp);
+    document.removeEventListener("mouseup", _handleMouseUp);
+    document.removeEventListener("mousemove", handleMouseMove);
+    document.removeEventListener("touchend", _handleMouseUp);
+    document.removeEventListener("touchmove", handleMouseMove);
+  };
+  var handleMouseDown = function handleMouseDown(e) {
+    isMovingRef.current = true;
+    emitMouseChange(e, options.onDown);
+    document.addEventListener("mouseup", _handleMouseUp);
+    document.addEventListener("mousemove", handleMouseMove);
+    if (!enableTouch) return;
+    document.addEventListener("touchend", _handleMouseUp);
+    document.addEventListener("touchmove", handleMouseMove, {
+      passive: false
+    });
+  };
+  var handleMouseEnter = function handleMouseEnter(e) {
+    emitMouseChange(e, options.onEnter);
+  };
+  var handleMouseLeave = function handleMouseLeave(e) {
+    emitMouseChange(e, options.onLeave);
+  };
+  useEffect(function () {
+    var el = elementRef.current;
+    if (!el || !enabled) return;
+    el.addEventListener("mousedown", handleMouseDown);
+    el.addEventListener("mousemove", handleMouseMove);
+    el.addEventListener("mouseup", _handleMouseUp);
+    if (options.onEnter) {
+      el.addEventListener("mouseenter", handleMouseEnter);
+    }
+    if (options.onLeave) {
+      el.addEventListener("mouseleave", handleMouseLeave);
+    }
+    if (!enableTouch) return;
+    el.addEventListener("touchstart", handleMouseDown, {
+      passive: false
+    });
+    el.addEventListener("touchend", _handleMouseUp);
+    return function () {
+      el.removeEventListener("mousedown", handleMouseDown);
+      el.removeEventListener("mouseenter", handleMouseDown);
+      el.removeEventListener("mouseleave", handleMouseLeave);
+      el.removeEventListener("mousemove", handleMouseMove);
+      el.removeEventListener("mouseup", _handleMouseUp);
+      el.removeEventListener("touchstart", handleMouseDown);
+      el.removeEventListener("touchend", _handleMouseUp);
+    };
+  }, [elementRef.current, options, enabled]);
+  return {
+    isMoving: isMovingRef.current
+  };
+};
+
+var useDialogDrag = function useDialogDrag(props) {
+  var dialogCardRef = props.dialogCardRef,
+    canDraggable = props.canDraggable;
+  var validWindow = (typeof window === "undefined" ? "undefined" : _typeof(window)) === "object";
+  var screenHeight = validWindow ? window.innerHeight || document.documentElement.clientHeight : void 0;
+  var screenWidth = validWindow ? window.innerWidth || document.documentElement.clientWidth : void 0;
+  var dragOffset = useRef({
+    x: 0,
+    y: 0
+  });
+  useMouseEvent(dialogCardRef, {
+    enabled: canDraggable,
+    onDown: function onDown(e) {
+      if (!validWindow || screenWidth === void 0 || screenHeight === void 0 || !dialogCardRef.current) return;
+      var _dialogCardRef$curren = dialogCardRef.current,
+        offsetLeft = _dialogCardRef$curren.offsetLeft,
+        offsetTop = _dialogCardRef$curren.offsetTop,
+        offsetWidth = _dialogCardRef$curren.offsetWidth,
+        offsetHeight = _dialogCardRef$curren.offsetHeight,
+        style = _dialogCardRef$curren.style;
+      if (offsetWidth > screenWidth || offsetHeight > screenHeight) return;
+      style.cursor = "move";
+      dragOffset.current = {
+        x: e.clientX - offsetLeft,
+        y: e.clientY - offsetTop
+      };
+    },
+    onMove: function onMove(e) {
+      if (!validWindow || screenWidth === void 0 || screenHeight === void 0 || !dialogCardRef.current) return;
+      var _dialogCardRef$curren2 = dialogCardRef.current,
+        offsetWidth = _dialogCardRef$curren2.offsetWidth,
+        offsetHeight = _dialogCardRef$curren2.offsetHeight,
+        style = _dialogCardRef$curren2.style;
+      var diffX = e.clientX - dragOffset.current.x;
+      var diffY = e.clientY - dragOffset.current.y;
+      if (diffX < 0) diffX = 0;
+      if (diffY < 0) diffY = 0;
+      if (screenWidth - offsetWidth - diffX < 0) diffX = screenWidth - offsetWidth;
+      if (screenHeight - offsetHeight - diffY < 0) diffY = screenHeight - offsetHeight;
+      style.position = "absolute";
+      style.left = "".concat(diffX, "px");
+      style.top = "".concat(diffY, "px");
+    },
+    onUp: function onUp() {
+      if (dialogCardRef.current) dialogCardRef.current.style.cursor = "default";
+    }
+  });
+};
+
+var dialogSet = /* @__PURE__ */new Set();
+var useDialogEsc = function useDialogEsc(visible, dialog) {
+  useEffect(function () {
+    if (visible) {
+      if (dialog !== null && dialog !== void 0 && dialog.current) {
+        var _dialog$current;
+        dialogSet.add(dialog);
+        dialog === null || dialog === void 0 || (_dialog$current = dialog.current) === null || _dialog$current === void 0 || _dialog$current.focus();
+      }
+    } else if (dialogSet.has(dialog)) {
+      var _dialogList;
+      dialogSet["delete"](dialog);
+      var dialogList = _toConsumableArray(dialogSet);
+      (_dialogList = dialogList[dialogList.length - 1]) === null || _dialogList === void 0 || (_dialogList = _dialogList.current) === null || _dialogList === void 0 || _dialogList.focus();
+    }
+    return function () {
+      dialogSet.forEach(function (item) {
+        if ((item === null || item === void 0 ? void 0 : item.current) === null) {
+          dialogSet["delete"](item);
+        }
+      });
+    };
+  }, [visible, dialog]);
+};
+
+function useDialogPosition(visible, dialogCardRef) {
+  var mousePosRef = useRef(null);
+  var getClickPosition = function getClickPosition(e) {
+    if (mousePosRef) {
+      mousePosRef.current = {
+        x: e.clientX,
+        y: e.clientY
+      };
+      setTimeout(function () {
+        mousePosRef.current = null;
+      }, 100);
+    }
+  };
+  useIsomorphicLayoutEffect(function () {
+    document.addEventListener("click", getClickPosition, true);
+    return function () {
+      document.removeEventListener("click", getClickPosition, true);
+    };
+  }, []);
+  useEffect(function () {
+    if (!visible) return;
+    if (mousePosRef.current && dialogCardRef.current) {
+      dialogCardRef.current.style.transformOrigin = "".concat(mousePosRef.current.x - dialogCardRef.current.offsetLeft, "px ").concat(mousePosRef.current.y - dialogCardRef.current.offsetTop, "px");
+    }
+  }, [visible, dialogCardRef]);
+}
+
+function getScrollbarWidth() {
+  var container = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document.body;
+  if (container === document.body) {
+    return window.innerWidth - document.documentElement.clientWidth;
+  }
+  return container.offsetWidth - container.clientWidth;
+}
+
+var key = 1;
+function useDialogLockStyle(_ref) {
+  var preventScrollThrough = _ref.preventScrollThrough,
+    visible = _ref.visible,
+    mode = _ref.mode,
+    showInAttachedElement = _ref.showInAttachedElement;
+  var lockStyleRef = useRef(null);
+  var timerRef = useRef(null);
+  var clearStyleFunc = useCallback(function () {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(function () {
+      var _lockStyleRef$current, _lockStyleRef$current2;
+      (_lockStyleRef$current = lockStyleRef.current) === null || _lockStyleRef$current === void 0 || (_lockStyleRef$current = _lockStyleRef$current.parentNode) === null || _lockStyleRef$current === void 0 || (_lockStyleRef$current2 = _lockStyleRef$current.removeChild) === null || _lockStyleRef$current2 === void 0 || _lockStyleRef$current2.call(_lockStyleRef$current, lockStyleRef.current);
+    }, 150);
+  }, []);
+  useIsomorphicLayoutEffect(function () {
+    if (typeof document === "undefined" || !visible) return;
+    if (!lockStyleRef.current) {
+      lockStyleRef.current = document.createElement("style");
+    }
+    var hasScrollBar = document.documentElement.scrollHeight > document.documentElement.clientHeight;
+    var scrollbarWidth = hasScrollBar ? getScrollbarWidth() : 0;
+    lockStyleRef.current.dataset.id = "td_dialog_".concat(+ /* @__PURE__ */new Date(), "_").concat(key += 1);
+    lockStyleRef.current.innerHTML = "\n      html body {\n        overflow-y: hidden;\n        width: calc(100% - ".concat(scrollbarWidth, "px);\n      }\n    ");
+    return clearStyleFunc;
+  }, [visible, clearStyleFunc]);
+  useIsomorphicLayoutEffect(function () {
+    if (typeof document === "undefined") return;
+    if (mode !== "modal" || !preventScrollThrough || showInAttachedElement) return;
+    if (visible) {
+      if (lockStyleRef.current) document.head.appendChild(lockStyleRef.current);
+    } else {
+      clearStyleFunc();
+    }
+  }, [preventScrollThrough, visible, mode, showInAttachedElement, clearStyleFunc]);
+}
+
+function parseValueToPx(value) {
+  if (typeof value === "number") return "".concat(value, "px");
+  return value;
+}
+
+var _excluded = ["children"],
+  _excluded2 = ["className", "dialogClassName", "style", "width", "mode", "zIndex", "visible", "attach", "onBeforeOpen", "onBeforeClose", "onOpened", "onCancel", "onConfirm", "onClose", "onClosed", "isPlugin", "draggable", "onOverlayClick", "onEscKeydown", "closeOnEscKeydown", "confirmOnEnter", "showOverlay", "showInAttachedElement", "closeOnOverlayClick", "destroyOnClose", "preventScrollThrough", "onCloseBtnClick", "forceRender", "lazy"];
+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; }
+var Dialog = /*#__PURE__*/forwardRef(function (originalProps, ref) {
+  var props = useDefaultProps(originalProps, dialogDefaultProps);
+  var children = props.children,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var _useConfig = useConfig(),
+    classPrefix = _useConfig.classPrefix;
+  var componentCls = "".concat(classPrefix, "-dialog");
+  var wrapRef = useRef(null);
+  var contentClickRef = useRef(false);
+  var dialogCardRef = useRef(null);
+  var dialogPosition = useRef(null);
+  var portalRef = useRef(null);
+  var maskRef = useRef(null);
+  var _useSetState = useSetState(_objectSpread({
+      isPlugin: false
+    }, restProps)),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    state = _useSetState2[0],
+    setState = _useSetState2[1];
+  var className = state.className,
+    dialogClassName = state.dialogClassName,
+    style = state.style,
+    width = state.width,
+    mode = state.mode,
+    zIndex = state.zIndex,
+    visible = state.visible,
+    attach = state.attach,
+    onBeforeOpen = state.onBeforeOpen,
+    onBeforeClose = state.onBeforeClose,
+    onOpened = state.onOpened,
+    onCancel = state.onCancel,
+    onConfirm = state.onConfirm,
+    onClose = state.onClose,
+    onClosed = state.onClosed,
+    isPlugin = state.isPlugin,
+    draggable = state.draggable,
+    onOverlayClick = state.onOverlayClick,
+    onEscKeydown = state.onEscKeydown,
+    closeOnEscKeydown = state.closeOnEscKeydown,
+    confirmOnEnter = state.confirmOnEnter,
+    showOverlay = state.showOverlay,
+    showInAttachedElement = state.showInAttachedElement,
+    closeOnOverlayClick = state.closeOnOverlayClick,
+    destroyOnClose = state.destroyOnClose,
+    preventScrollThrough = state.preventScrollThrough,
+    onCloseBtnClick = state.onCloseBtnClick,
+    forceRender = state.forceRender,
+    lazy = state.lazy,
+    restState = _objectWithoutProperties(state, _excluded2);
+  var dialogAttach = useAttach("dialog", attach);
+  useDialogLockStyle({
+    preventScrollThrough: preventScrollThrough,
+    visible: visible,
+    mode: mode,
+    showInAttachedElement: showInAttachedElement
+  });
+  useDialogEsc(visible, wrapRef);
+  useDialogPosition(visible, dialogCardRef);
+  useDialogDrag({
+    dialogCardRef: dialogCardRef,
+    canDraggable: draggable && mode === "modeless"
+  });
+  useEffect(function () {
+    if (isPlugin) {
+      return;
+    }
+    setState(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), props);
+    });
+  }, [props, setState, isPlugin]);
+  useImperativeHandle(ref, function () {
+    return {
+      show: function show() {
+        setState({
+          visible: true
+        });
+      },
+      hide: function hide() {
+        setState({
+          visible: false
+        });
+      },
+      setConfirmLoading: function setConfirmLoading(loading) {
+        setState({
+          confirmLoading: loading
+        });
+      },
+      destroy: function destroy() {
+        setState({
+          visible: false,
+          destroyOnClose: true
+        });
+      },
+      update: function update(newOptions) {
+        setState(function (prevState) {
+          return _objectSpread(_objectSpread({}, prevState), newOptions);
+        });
+      }
+    };
+  });
+  var onMaskClick = function onMaskClick(e) {
+    if (showOverlay && closeOnOverlayClick) {
+      if (contentClickRef.current) {
+        contentClickRef.current = false;
+      } else if (e.target === dialogPosition.current) {
+        onOverlayClick === null || onOverlayClick === void 0 || onOverlayClick({
+          e: e
+        });
+        onClose === null || onClose === void 0 || onClose({
+          e: e,
+          trigger: "overlay"
+        });
+      }
+    }
+  };
+  var handleCancel = function handleCancel(_ref) {
+    var e = _ref.e;
+    onCancel === null || onCancel === void 0 || onCancel({
+      e: e
+    });
+    onClose === null || onClose === void 0 || onClose({
+      e: e,
+      trigger: "cancel"
+    });
+  };
+  var handleClose = function handleClose(_ref2) {
+    var e = _ref2.e;
+    onCloseBtnClick === null || onCloseBtnClick === void 0 || onCloseBtnClick({
+      e: e
+    });
+    onClose === null || onClose === void 0 || onClose({
+      e: e,
+      trigger: "close-btn"
+    });
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.key === "Escape") {
+      e.stopPropagation();
+      onEscKeydown === null || onEscKeydown === void 0 || onEscKeydown({
+        e: e
+      });
+      if (closeOnEscKeydown) {
+        onClose === null || onClose === void 0 || onClose({
+          e: e,
+          trigger: "esc"
+        });
+      }
+    } else if (e.key === "Enter" || e.key === "NumpadEnter") {
+      e.stopPropagation();
+      if (confirmOnEnter) {
+        onConfirm === null || onConfirm === void 0 || onConfirm({
+          e: e
+        });
+      }
+    }
+  };
+  var onAnimateLeave = function onAnimateLeave() {
+    onClosed === null || onClosed === void 0 || onClosed();
+    if (!wrapRef.current) return;
+    wrapRef.current.style.display = "none";
+  };
+  var onAnimateStart = function onAnimateStart() {
+    if (!wrapRef.current) return;
+    onBeforeOpen === null || onBeforeOpen === void 0 || onBeforeOpen();
+    wrapRef.current.style.display = "block";
+  };
+  var onInnerAnimateStart = function onInnerAnimateStart() {
+    if (!dialogCardRef.current) return;
+    dialogCardRef.current.style.display = "block";
+  };
+  var onInnerAnimateLeave = function onInnerAnimateLeave() {
+    if (!dialogCardRef.current) return;
+    dialogCardRef.current.style.display = "none";
+  };
+  var renderMask = function renderMask() {
+    if (mode !== "modal") return null;
+    return showOverlay ? /* @__PURE__ */React.createElement(CSSTransition, {
+      "in": visible,
+      appear: true,
+      timeout: 300,
+      classNames: "".concat(componentCls, "-fade"),
+      mountOnEnter: true,
+      unmountOnExit: true,
+      nodeRef: maskRef
+    }, /* @__PURE__ */React.createElement("div", {
+      ref: maskRef,
+      className: "".concat(componentCls, "__mask")
+    })) : null;
+  };
+  return /* @__PURE__ */React.createElement(CSSTransition, {
+    "in": visible,
+    appear: true,
+    timeout: 300,
+    mountOnEnter: isUndefined(forceRender) ? lazy : !forceRender,
+    unmountOnExit: destroyOnClose,
+    nodeRef: portalRef,
+    onEnter: onAnimateStart,
+    onEntered: onOpened,
+    onExit: function onExit() {
+      return onBeforeClose === null || onBeforeClose === void 0 ? void 0 : onBeforeClose();
+    },
+    onExited: onAnimateLeave
+  }, /* @__PURE__ */React.createElement(Portal, {
+    attach: dialogAttach,
+    ref: portalRef
+  }, /* @__PURE__ */React.createElement("div", {
+    ref: wrapRef,
+    className: classNames(className, "".concat(componentCls, "__ctx"), "".concat(componentCls, "__").concat(mode), _defineProperty(_defineProperty({}, "".concat(componentCls, "__ctx--fixed"), !showInAttachedElement), "".concat(componentCls, "__ctx--absolute"), showInAttachedElement)),
+    style: {
+      zIndex: zIndex,
+      display: "none"
+    },
+    onKeyDown: handleKeyDown,
+    tabIndex: 0
+  }, renderMask(), /* @__PURE__ */React.createElement("div", {
+    className: "".concat(componentCls, "__wrap")
+  }, /* @__PURE__ */React.createElement("div", {
+    ref: dialogPosition,
+    className: classNames("".concat(componentCls, "__position"), _defineProperty(_defineProperty({}, "".concat(componentCls, "--top"), !!props.top || props.placement === "top"), "".concat(componentCls, "--center"), props.placement === "center" && !props.top)),
+    style: {
+      paddingTop: parseValueToPx(props.top)
+    },
+    onClick: onMaskClick
+  }, /* @__PURE__ */React.createElement(CSSTransition, {
+    "in": visible,
+    appear: true,
+    timeout: 300,
+    classNames: "".concat(componentCls, "-zoom"),
+    nodeRef: dialogCardRef,
+    onEnter: onInnerAnimateStart,
+    onExited: onInnerAnimateLeave
+  }, /* @__PURE__ */React.createElement(DialogCard, _objectSpread(_objectSpread({
+    ref: dialogCardRef
+  }, restState), {}, {
+    className: dialogClassName,
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      width: parseValueToPx(width || (style === null || style === void 0 ? void 0 : style.width))
+    }),
+    onConfirm: onConfirm,
+    onCancel: handleCancel,
+    onCloseBtnClick: handleClose
+  }), children)))))));
+});
+Dialog.displayName = "Dialog";
+
+export { Dialog as default };
+//# sourceMappingURL=Dialog.js.map