tdesign-react
Version:
TDesign Component for React
355 lines (351 loc) • 13.8 kB
JavaScript
/**
* tdesign v1.16.2
* (c) 2025 tdesign
* @license MIT
*/
import { _ as _defineProperty } from '../_chunks/dep-d67deb2c.js';
import { _ as _slicedToArray } from '../_chunks/dep-10d5731f.js';
import { _ as _objectWithoutProperties } from '../_chunks/dep-ed34fbd4.js';
import React, { forwardRef, useRef, useState, useEffect, useImperativeHandle } from 'react';
import { CSSTransition } from 'react-transition-group';
import classNames from 'classnames';
import { isUndefined } from 'lodash-es';
import '../_chunks/dep-1144c9da.js';
import { p as pxCompat } from '../_chunks/dep-624e7b27.js';
import Portal from '../common/Portal.js';
import useAttach from '../hooks/useAttach.js';
import useConfig from '../hooks/useConfig.js';
import useDeepEffect from '../hooks/useDeepEffect.js';
import useDefaultProps from '../hooks/useDefaultProps.js';
import useSetState from '../hooks/useSetState.js';
import { useLocaleReceiver } from '../locale/LocalReceiver.js';
import { dialogDefaultProps } from './defaultProps.js';
import DialogCard from './DialogCard.js';
import useDialogEsc from './hooks/useDialogEsc.js';
import useDialogLockStyle from './hooks/useLockStyle.js';
import useDialogDrag from './hooks/useDialogDrag.js';
import { c as canUseDocument } from '../_chunks/dep-ca8d3fa0.js';
import { l as log } from '../_chunks/dep-2ba7b13f.js';
import '../_chunks/dep-8abcbcbc.js';
import '../_chunks/dep-74a10cfb.js';
import '../_chunks/dep-a3a3e527.js';
import 'react-dom';
import '../hooks/useLayoutEffect.js';
import '../config-provider/ConfigContext.js';
import '../locale/zh_CN.js';
import '../_chunks/dep-751cada9.js';
import 'dayjs';
import '../_chunks/dep-37c4dbb1.js';
import '../config-provider/index.js';
import '../config-provider/ConfigProvider.js';
import '../config-provider/type.js';
import 'tdesign-icons-react';
import '../button/index.js';
import '../button/Button.js';
import '../hooks/useDomRefCallback.js';
import '../hooks/useRipple.js';
import '../_chunks/dep-79351403.js';
import '../hooks/useAnimation.js';
import '../loading/index.js';
import '../loading/Loading.js';
import '../loading/defaultProps.js';
import '../loading/gradient.js';
import '../loading/plugin.js';
import '../_util/react-render.js';
import '../_chunks/dep-d26972d5.js';
import '../common/PluginContainer.js';
import '../loading/style/css.js';
import '../loading/type.js';
import '../button/defaultProps.js';
import '../_util/parseTNode.js';
import '../button/style/css.js';
import '../button/type.js';
import '../hooks/useGlobalIcon.js';
import '../_chunks/dep-1fbb4fde.js';
import '../hooks/useMouseEvent.js';
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 mousePosition;
var getClickPosition = function getClickPosition(e) {
mousePosition = {
x: e.pageX,
y: e.pageY
};
setTimeout(function () {
mousePosition = null;
}, 100);
};
if (canUseDocument) {
document.documentElement.addEventListener("click", getClickPosition, true);
}
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 maskRef = useRef(null);
var contentClickRef = useRef(false);
var dialogCardRef = useRef(null);
var dialogPosition = useRef(null);
var portalRef = useRef(null);
var _useSetState = useSetState(_objectSpread({
isPlugin: false
}, restProps)),
_useSetState2 = _slicedToArray(_useSetState, 2),
state = _useSetState2[0],
setState = _useSetState2[1];
var _useLocaleReceiver = useLocaleReceiver("dialog"),
_useLocaleReceiver2 = _slicedToArray(_useLocaleReceiver, 1),
local = _useLocaleReceiver2[0];
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);
var _useState = useState(visible),
_useState2 = _slicedToArray(_useState, 2),
animationVisible = _useState2[0],
setAnimationVisible = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
dialogAnimationVisible = _useState4[0],
setDialogAnimationVisible = _useState4[1];
useDialogLockStyle({
preventScrollThrough: preventScrollThrough,
visible: visible,
mode: mode,
showInAttachedElement: showInAttachedElement
});
useDialogEsc(visible, wrapRef);
useDialogDrag({
dialogCardRef: dialogCardRef,
canDraggable: draggable && mode === "modeless"
});
useDeepEffect(function () {
if (isPlugin) return;
setState(function (prevState) {
return _objectSpread(_objectSpread({}, prevState), props);
});
}, [props, setState]);
useEffect(function () {
if (dialogAnimationVisible) {
var _wrapRef$current;
(_wrapRef$current = wrapRef.current) === null || _wrapRef$current === void 0 || _wrapRef$current.focus();
if (mousePosition && dialogCardRef.current) {
var offsetX = mousePosition.x - dialogCardRef.current.offsetLeft;
var offsetY = mousePosition.y - dialogCardRef.current.offsetTop;
dialogCardRef.current.style.transformOrigin = "".concat(offsetX, "px ").concat(offsetY, "px");
}
}
}, [dialogAnimationVisible]);
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);
});
}
};
});
if (props.mode === "normal") {
log.error("Dialog", 'mode="normal" is not supported, please use DialogCard.');
return /* @__PURE__ */React.createElement(DialogCard, _objectSpread({}, props));
}
var onMaskClick = function onMaskClick(e) {
if (showOverlay && (closeOnOverlayClick !== null && closeOnOverlayClick !== void 0 ? closeOnOverlayClick : local.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 !== null && closeOnEscKeydown !== void 0 ? closeOnEscKeydown : local.closeOnEscKeydown) {
onClose === null || onClose === void 0 || onClose({
e: e,
trigger: "esc"
});
}
} else if (e.key === "Enter" || e.key === "NumpadEnter") {
e.stopPropagation();
confirmOnEnter && (onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm({
e: e
}));
}
};
var onAnimateStart = function onAnimateStart() {
onBeforeOpen === null || onBeforeOpen === void 0 || onBeforeOpen();
setAnimationVisible(true);
if (!wrapRef.current) return;
wrapRef.current.style.display = "block";
};
var onAnimateLeave = function onAnimateLeave() {
onClosed === null || onClosed === void 0 || onClosed();
setAnimationVisible(false);
if (!wrapRef.current) return;
wrapRef.current.style.display = "none";
};
var onInnerAnimateStart = function onInnerAnimateStart() {
setDialogAnimationVisible(true);
if (!dialogCardRef.current) return;
dialogCardRef.current.style.display = "block";
};
var onInnerAnimateLeave = function onInnerAnimateLeave() {
setDialogAnimationVisible(false);
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: 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: animationVisible ? void 0 : "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: pxCompat(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: pxCompat(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