tdesign-react
Version:
TDesign Component for React
386 lines (378 loc) • 16 kB
JavaScript
/**
* tdesign v1.16.2
* (c) 2025 tdesign
* @license MIT
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var defineProperty = require('../_chunks/dep-0fe55884.js');
var slicedToArray = require('../_chunks/dep-5cb0d66d.js');
var objectWithoutProperties = require('../_chunks/dep-40583e7c.js');
var React = require('react');
var reactTransitionGroup = require('react-transition-group');
var classNames = require('classnames');
var log = require('../_chunks/dep-05f87b98.js');
var helper = require('../_chunks/dep-779273e7.js');
var common_Portal = require('../common/Portal.js');
var hooks_useAttach = require('../hooks/useAttach.js');
var hooks_useConfig = require('../hooks/useConfig.js');
var hooks_useDeepEffect = require('../hooks/useDeepEffect.js');
var hooks_useDefaultProps = require('../hooks/useDefaultProps.js');
var hooks_useSetState = require('../hooks/useSetState.js');
var locale_LocalReceiver = require('../locale/LocalReceiver.js');
var dialog_defaultProps = require('./defaultProps.js');
var dialog_DialogCard = require('./DialogCard.js');
var dialog_hooks_useDialogEsc = require('./hooks/useDialogEsc.js');
var dialog_hooks_useLockStyle = require('./hooks/useLockStyle.js');
var dialog_hooks_useDialogDrag = require('./hooks/useDialogDrag.js');
var _util_style = require('../_chunks/dep-e0735b5f.js');
var isUndefined = require('../_chunks/dep-6ea1b49c.js');
require('../_chunks/dep-b325182b.js');
require('../_chunks/dep-737b8bd8.js');
require('../_chunks/dep-a7fe58de.js');
require('../_chunks/dep-bb3e9667.js');
require('../_chunks/dep-4ce0670e.js');
require('../_chunks/dep-3448f35f.js');
require('../_chunks/dep-b304bc94.js');
require('../_chunks/dep-bdafd287.js');
require('react-dom');
require('../hooks/useLayoutEffect.js');
require('../config-provider/ConfigContext.js');
require('../_chunks/dep-17dea53e.js');
require('../_chunks/dep-a0cbf081.js');
require('dayjs');
require('../_chunks/dep-481a1ecc.js');
require('../_chunks/dep-474eb386.js');
require('../_chunks/dep-3b256bc0.js');
require('../_chunks/dep-b6a3ada9.js');
require('../_chunks/dep-967e785f.js');
require('../_chunks/dep-5c8525ea.js');
require('../_chunks/dep-735cd5b9.js');
require('../_chunks/dep-4d300b8f.js');
require('../_chunks/dep-3332ad6f.js');
require('../_chunks/dep-98783318.js');
require('../_chunks/dep-fc884a8e.js');
require('../_chunks/dep-008b21d4.js');
require('../_chunks/dep-9193eded.js');
require('../_chunks/dep-afe817f9.js');
require('../_chunks/dep-0b70c7ec.js');
require('../_chunks/dep-a1e3e59b.js');
require('../_chunks/dep-24ab8f68.js');
require('../_chunks/dep-753b7d52.js');
require('../_chunks/dep-625279d1.js');
require('../_chunks/dep-4f4b2eb1.js');
require('../_chunks/dep-e018b522.js');
require('../_chunks/dep-7f4d0687.js');
require('../_chunks/dep-b23d5e45.js');
require('../config-provider/ConfigProvider.js');
require('../_chunks/dep-542bd26e.js');
require('../_chunks/dep-c89d3d1e.js');
require('tdesign-icons-react');
require('../button/index.js');
require('../button/Button.js');
require('../hooks/useDomRefCallback.js');
require('../hooks/useRipple.js');
require('../_chunks/dep-1ff6cacd.js');
require('../hooks/useAnimation.js');
require('../loading/index.js');
require('../loading/Loading.js');
require('../loading/defaultProps.js');
require('../loading/gradient.js');
require('../loading/plugin.js');
require('../_util/react-render.js');
require('../_chunks/dep-e88f025c.js');
require('../common/PluginContainer.js');
require('../button/defaultProps.js');
require('../_util/parseTNode.js');
require('../hooks/useGlobalIcon.js');
require('../_chunks/dep-18fff345.js');
require('../hooks/useMouseEvent.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
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._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 (_util_style.canUseDocument) {
document.documentElement.addEventListener("click", getClickPosition, true);
}
var Dialog = /*#__PURE__*/React.forwardRef(function (originalProps, ref) {
var props = hooks_useDefaultProps["default"](originalProps, dialog_defaultProps.dialogDefaultProps);
var children = props.children,
restProps = objectWithoutProperties._objectWithoutProperties(props, _excluded);
var _useConfig = hooks_useConfig["default"](),
classPrefix = _useConfig.classPrefix;
var componentCls = "".concat(classPrefix, "-dialog");
var wrapRef = React.useRef(null);
var maskRef = React.useRef(null);
var contentClickRef = React.useRef(false);
var dialogCardRef = React.useRef(null);
var dialogPosition = React.useRef(null);
var portalRef = React.useRef(null);
var _useSetState = hooks_useSetState["default"](_objectSpread({
isPlugin: false
}, restProps)),
_useSetState2 = slicedToArray._slicedToArray(_useSetState, 2),
state = _useSetState2[0],
setState = _useSetState2[1];
var _useLocaleReceiver = locale_LocalReceiver.useLocaleReceiver("dialog"),
_useLocaleReceiver2 = slicedToArray._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._objectWithoutProperties(state, _excluded2);
var dialogAttach = hooks_useAttach["default"]("dialog", attach);
var _useState = React.useState(visible),
_useState2 = slicedToArray._slicedToArray(_useState, 2),
animationVisible = _useState2[0],
setAnimationVisible = _useState2[1];
var _useState3 = React.useState(false),
_useState4 = slicedToArray._slicedToArray(_useState3, 2),
dialogAnimationVisible = _useState4[0],
setDialogAnimationVisible = _useState4[1];
dialog_hooks_useLockStyle["default"]({
preventScrollThrough: preventScrollThrough,
visible: visible,
mode: mode,
showInAttachedElement: showInAttachedElement
});
dialog_hooks_useDialogEsc["default"](visible, wrapRef);
dialog_hooks_useDialogDrag["default"]({
dialogCardRef: dialogCardRef,
canDraggable: draggable && mode === "modeless"
});
hooks_useDeepEffect["default"](function () {
if (isPlugin) return;
setState(function (prevState) {
return _objectSpread(_objectSpread({}, prevState), props);
});
}, [props, setState]);
React.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]);
React.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.log.error("Dialog", 'mode="normal" is not supported, please use DialogCard.');
return /* @__PURE__ */React__default["default"].createElement(dialog_DialogCard["default"], _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__default["default"].createElement(reactTransitionGroup.CSSTransition, {
"in": visible,
appear: true,
timeout: 300,
classNames: "".concat(componentCls, "-fade"),
mountOnEnter: true,
unmountOnExit: true,
nodeRef: maskRef
}, /* @__PURE__ */React__default["default"].createElement("div", {
ref: maskRef,
className: "".concat(componentCls, "__mask")
})) : null;
};
return /* @__PURE__ */React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
"in": visible,
appear: true,
timeout: 300,
mountOnEnter: isUndefined.isUndefined(forceRender) ? lazy : !forceRender,
unmountOnExit: destroyOnClose,
nodeRef: portalRef,
onEnter: onAnimateStart,
onEntered: onOpened,
onExit: onBeforeClose,
onExited: onAnimateLeave
}, /* @__PURE__ */React__default["default"].createElement(common_Portal["default"], {
attach: dialogAttach,
ref: portalRef
}, /* @__PURE__ */React__default["default"].createElement("div", {
ref: wrapRef,
className: classNames__default["default"](className, "".concat(componentCls, "__ctx"), "".concat(componentCls, "__").concat(mode), defineProperty._defineProperty(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__default["default"].createElement("div", {
className: "".concat(componentCls, "__wrap")
}, /* @__PURE__ */React__default["default"].createElement("div", {
ref: dialogPosition,
className: classNames__default["default"]("".concat(componentCls, "__position"), defineProperty._defineProperty(defineProperty._defineProperty({}, "".concat(componentCls, "--top"), !!props.top || props.placement === "top"), "".concat(componentCls, "--center"), props.placement === "center" && !props.top)),
style: {
paddingTop: helper.pxCompat(props.top)
},
onClick: onMaskClick
}, /* @__PURE__ */React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
"in": visible,
appear: true,
timeout: 300,
classNames: "".concat(componentCls, "-zoom"),
nodeRef: dialogCardRef,
onEnter: onInnerAnimateStart,
onExited: onInnerAnimateLeave
}, /* @__PURE__ */React__default["default"].createElement(dialog_DialogCard["default"], _objectSpread(_objectSpread({
ref: dialogCardRef
}, restState), {}, {
className: dialogClassName,
style: _objectSpread(_objectSpread({}, style), {}, {
width: helper.pxCompat(width || (style === null || style === void 0 ? void 0 : style.width))
}),
onConfirm: onConfirm,
onCancel: handleCancel,
onCloseBtnClick: handleClose
}), children)))))));
});
Dialog.displayName = "Dialog";
exports["default"] = Dialog;
//# sourceMappingURL=Dialog.js.map