tdesign-react
Version:
TDesign Component for React
359 lines (351 loc) • 15 kB
JavaScript
/**
* tdesign v1.13.2
* (c) 2025 tdesign
* @license MIT
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var defineProperty = require('../_chunks/dep-cc768e34.js');
var slicedToArray = require('../_chunks/dep-e17e2d31.js');
var objectWithoutProperties = require('../_chunks/dep-810b3643.js');
var React = require('react');
var reactTransitionGroup = require('react-transition-group');
var classNames = require('classnames');
var log = require('../_chunks/dep-4bc3c0ab.js');
var locale_LocalReceiver = require('../locale/LocalReceiver.js');
var common_Portal = require('../common/Portal.js');
var hooks_useSetState = require('../hooks/useSetState.js');
var hooks_useConfig = require('../hooks/useConfig.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_useDialogPosition = require('./hooks/useDialogPosition.js');
var dialog_hooks_useDialogDrag = require('./hooks/useDialogDrag.js');
var dialog_utils = require('./utils.js');
var hooks_useDefaultProps = require('../hooks/useDefaultProps.js');
var hooks_useAttach = require('../hooks/useAttach.js');
var isUndefined = require('../_chunks/dep-f400737d.js');
require('../_chunks/dep-6d4d8660.js');
require('../_chunks/dep-b7d577ac.js');
require('../_chunks/dep-3e2d2665.js');
require('../_chunks/dep-f0379c5f.js');
require('../_chunks/dep-028b759d.js');
require('../_chunks/dep-ddacd27a.js');
require('../config-provider/ConfigProvider.js');
require('../config-provider/ConfigContext.js');
require('../_chunks/dep-3a869b87.js');
require('../_chunks/dep-ac58e1cc.js');
require('dayjs');
require('../_chunks/dep-7da96a57.js');
require('../_chunks/dep-07b911d8.js');
require('../_chunks/dep-4b02d669.js');
require('../_chunks/dep-8a116183.js');
require('../_chunks/dep-4671b9bd.js');
require('../_chunks/dep-bed9d73e.js');
require('../_chunks/dep-780eda7b.js');
require('../_chunks/dep-47bdc05f.js');
require('../_chunks/dep-cab13149.js');
require('../_chunks/dep-a30819a4.js');
require('../_chunks/dep-6a7ba247.js');
require('../_chunks/dep-c87d9752.js');
require('../_chunks/dep-bd956a2d.js');
require('../_chunks/dep-0cdb3286.js');
require('../_chunks/dep-865c186c.js');
require('../_chunks/dep-f4e58639.js');
require('../_chunks/dep-781a2854.js');
require('../_chunks/dep-1ef213f8.js');
require('../_chunks/dep-e2c832a5.js');
require('../_chunks/dep-ed886f2a.js');
require('../_chunks/dep-aeef4e56.js');
require('../_chunks/dep-0c1ca63f.js');
require('../_chunks/dep-fd5d57c1.js');
require('../_chunks/dep-ac2874ce.js');
require('../_chunks/dep-6cfc06a0.js');
require('../_chunks/dep-5d9d080b.js');
require('react-dom');
require('../_chunks/dep-3f65dfe7.js');
require('../hooks/useLayoutEffect.js');
require('tdesign-icons-react');
require('../button/index.js');
require('../button/Button.js');
require('../hooks/useDomRefCallback.js');
require('../hooks/useRipple.js');
require('../_chunks/dep-58719304.js');
require('../hooks/useAnimation.js');
require('../loading/index.js');
require('../loading/Loading.js');
require('../loading/gradient.js');
require('../_chunks/dep-b8d4cf07.js');
require('../_chunks/dep-64a1054a.js');
require('../_chunks/dep-422caf30.js');
require('../loading/defaultProps.js');
require('../loading/plugin.js');
require('../_util/react-render.js');
require('../_chunks/dep-a93b6608.js');
require('../common/PluginContainer.js');
require('../button/defaultProps.js');
require('../_util/parseTNode.js');
require('../hooks/useGlobalIcon.js');
require('../_chunks/dep-b57a7208.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 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);
dialog_hooks_useLockStyle["default"]({
preventScrollThrough: preventScrollThrough,
visible: visible,
mode: mode,
showInAttachedElement: showInAttachedElement
});
dialog_hooks_useDialogEsc["default"](visible, wrapRef);
dialog_hooks_useDialogPosition["default"](visible, dialogCardRef);
var _useDialogDrag = dialog_hooks_useDialogDrag["default"]({
dialogCardRef: dialogCardRef,
contentClickRef: contentClickRef,
canDraggable: draggable && mode === "modeless"
}),
onDialogMoveStart = _useDialogDrag.onDialogMoveStart;
React.useEffect(function () {
if (isPlugin) {
return;
}
setState(function (prevState) {
return _objectSpread(_objectSpread({}, prevState), props);
});
}, [props, setState, isPlugin]);
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 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__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: function onExit() {
return onBeforeClose === null || onBeforeClose === void 0 ? void 0 : 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: "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: dialog_utils.parseValueToPx(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: dialog_utils.parseValueToPx(width || (style === null || style === void 0 ? void 0 : style.width))
}),
onConfirm: onConfirm,
onCancel: handleCancel,
onCloseBtnClick: handleClose,
onMouseDown: onDialogMoveStart
}), children)))))));
});
Dialog.displayName = "Dialog";
exports["default"] = Dialog;
//# sourceMappingURL=Dialog.js.map