ConfirmDialog.js 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. "use client";
  2. import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
  3. var __rest = this && this.__rest || function (s, e) {
  4. var t = {};
  5. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  6. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  7. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  8. }
  9. return t;
  10. };
  11. import * as React from 'react';
  12. import CheckCircleFilled from "@ant-design/icons/es/icons/CheckCircleFilled";
  13. import CloseCircleFilled from "@ant-design/icons/es/icons/CloseCircleFilled";
  14. import ExclamationCircleFilled from "@ant-design/icons/es/icons/ExclamationCircleFilled";
  15. import InfoCircleFilled from "@ant-design/icons/es/icons/InfoCircleFilled";
  16. import classNames from 'classnames';
  17. import { CONTAINER_MAX_OFFSET } from '../_util/hooks/useZIndex';
  18. import { getTransitionName } from '../_util/motion';
  19. import { devUseWarning } from '../_util/warning';
  20. import ConfigProvider from '../config-provider';
  21. import { useLocale } from '../locale';
  22. import useToken from '../theme/useToken';
  23. import CancelBtn from './components/ConfirmCancelBtn';
  24. import OkBtn from './components/ConfirmOkBtn';
  25. import { ModalContextProvider } from './context';
  26. import Modal from './Modal';
  27. import Confirm from './style/confirm';
  28. export function ConfirmContent(props) {
  29. const {
  30. prefixCls,
  31. icon,
  32. okText,
  33. cancelText,
  34. confirmPrefixCls,
  35. type,
  36. okCancel,
  37. footer,
  38. // Legacy for static function usage
  39. locale: staticLocale
  40. } = props,
  41. resetProps = __rest(props, ["prefixCls", "icon", "okText", "cancelText", "confirmPrefixCls", "type", "okCancel", "footer", "locale"]);
  42. if (process.env.NODE_ENV !== 'production') {
  43. const warning = devUseWarning('Modal');
  44. process.env.NODE_ENV !== "production" ? warning(!(typeof icon === 'string' && icon.length > 2), 'breaking', `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`) : void 0;
  45. }
  46. // Icon
  47. let mergedIcon = icon;
  48. // 支持传入{ icon: null }来隐藏`Modal.confirm`默认的Icon
  49. if (!icon && icon !== null) {
  50. switch (type) {
  51. case 'info':
  52. mergedIcon = /*#__PURE__*/React.createElement(InfoCircleFilled, null);
  53. break;
  54. case 'success':
  55. mergedIcon = /*#__PURE__*/React.createElement(CheckCircleFilled, null);
  56. break;
  57. case 'error':
  58. mergedIcon = /*#__PURE__*/React.createElement(CloseCircleFilled, null);
  59. break;
  60. default:
  61. mergedIcon = /*#__PURE__*/React.createElement(ExclamationCircleFilled, null);
  62. }
  63. }
  64. // 默认为 true,保持向下兼容
  65. const mergedOkCancel = okCancel !== null && okCancel !== void 0 ? okCancel : type === 'confirm';
  66. const autoFocusButton = props.autoFocusButton === null ? false : props.autoFocusButton || 'ok';
  67. const [locale] = useLocale('Modal');
  68. const mergedLocale = staticLocale || locale;
  69. // ================== Locale Text ==================
  70. const okTextLocale = okText || (mergedOkCancel ? mergedLocale === null || mergedLocale === void 0 ? void 0 : mergedLocale.okText : mergedLocale === null || mergedLocale === void 0 ? void 0 : mergedLocale.justOkText);
  71. const cancelTextLocale = cancelText || (mergedLocale === null || mergedLocale === void 0 ? void 0 : mergedLocale.cancelText);
  72. // ================= Context Value =================
  73. const btnCtxValue = Object.assign({
  74. autoFocusButton,
  75. cancelTextLocale,
  76. okTextLocale,
  77. mergedOkCancel
  78. }, resetProps);
  79. const btnCtxValueMemo = React.useMemo(() => btnCtxValue, _toConsumableArray(Object.values(btnCtxValue)));
  80. // ====================== Footer Origin Node ======================
  81. const footerOriginNode = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CancelBtn, null), /*#__PURE__*/React.createElement(OkBtn, null));
  82. const hasTitle = props.title !== undefined && props.title !== null;
  83. const bodyCls = `${confirmPrefixCls}-body`;
  84. return /*#__PURE__*/React.createElement("div", {
  85. className: `${confirmPrefixCls}-body-wrapper`
  86. }, /*#__PURE__*/React.createElement("div", {
  87. className: classNames(bodyCls, {
  88. [`${bodyCls}-has-title`]: hasTitle
  89. })
  90. }, mergedIcon, /*#__PURE__*/React.createElement("div", {
  91. className: `${confirmPrefixCls}-paragraph`
  92. }, hasTitle && /*#__PURE__*/React.createElement("span", {
  93. className: `${confirmPrefixCls}-title`
  94. }, props.title), /*#__PURE__*/React.createElement("div", {
  95. className: `${confirmPrefixCls}-content`
  96. }, props.content))), footer === undefined || typeof footer === 'function' ? (/*#__PURE__*/React.createElement(ModalContextProvider, {
  97. value: btnCtxValueMemo
  98. }, /*#__PURE__*/React.createElement("div", {
  99. className: `${confirmPrefixCls}-btns`
  100. }, typeof footer === 'function' ? footer(footerOriginNode, {
  101. OkBtn,
  102. CancelBtn
  103. }) : footerOriginNode))) : footer, /*#__PURE__*/React.createElement(Confirm, {
  104. prefixCls: prefixCls
  105. }));
  106. }
  107. const ConfirmDialog = props => {
  108. const {
  109. close,
  110. zIndex,
  111. maskStyle,
  112. direction,
  113. prefixCls,
  114. wrapClassName,
  115. rootPrefixCls,
  116. bodyStyle,
  117. closable = false,
  118. onConfirm,
  119. styles
  120. } = props;
  121. if (process.env.NODE_ENV !== 'production') {
  122. const warning = devUseWarning('Modal');
  123. [['visible', 'open'], ['bodyStyle', 'styles.body'], ['maskStyle', 'styles.mask']].forEach(([deprecatedName, newName]) => {
  124. warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
  125. });
  126. }
  127. const confirmPrefixCls = `${prefixCls}-confirm`;
  128. const width = props.width || 416;
  129. const style = props.style || {};
  130. const mask = props.mask === undefined ? true : props.mask;
  131. // 默认为 false,保持旧版默认行为
  132. const maskClosable = props.maskClosable === undefined ? false : props.maskClosable;
  133. const classString = classNames(confirmPrefixCls, `${confirmPrefixCls}-${props.type}`, {
  134. [`${confirmPrefixCls}-rtl`]: direction === 'rtl'
  135. }, props.className);
  136. // ========================= zIndex =========================
  137. const [, token] = useToken();
  138. const mergedZIndex = React.useMemo(() => {
  139. if (zIndex !== undefined) {
  140. return zIndex;
  141. }
  142. // Static always use max zIndex
  143. return token.zIndexPopupBase + CONTAINER_MAX_OFFSET;
  144. }, [zIndex, token]);
  145. // ========================= Render =========================
  146. return /*#__PURE__*/React.createElement(Modal, Object.assign({}, props, {
  147. className: classString,
  148. wrapClassName: classNames({
  149. [`${confirmPrefixCls}-centered`]: !!props.centered
  150. }, wrapClassName),
  151. onCancel: () => {
  152. close === null || close === void 0 ? void 0 : close({
  153. triggerCancel: true
  154. });
  155. onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(false);
  156. },
  157. title: "",
  158. footer: null,
  159. transitionName: getTransitionName(rootPrefixCls || '', 'zoom', props.transitionName),
  160. maskTransitionName: getTransitionName(rootPrefixCls || '', 'fade', props.maskTransitionName),
  161. mask: mask,
  162. maskClosable: maskClosable,
  163. style: style,
  164. styles: Object.assign({
  165. body: bodyStyle,
  166. mask: maskStyle
  167. }, styles),
  168. width: width,
  169. zIndex: mergedZIndex,
  170. closable: closable
  171. }), /*#__PURE__*/React.createElement(ConfirmContent, Object.assign({}, props, {
  172. confirmPrefixCls: confirmPrefixCls
  173. })));
  174. };
  175. const ConfirmDialogWrapper = props => {
  176. const {
  177. rootPrefixCls,
  178. iconPrefixCls,
  179. direction,
  180. theme
  181. } = props;
  182. return /*#__PURE__*/React.createElement(ConfigProvider, {
  183. prefixCls: rootPrefixCls,
  184. iconPrefixCls: iconPrefixCls,
  185. direction: direction,
  186. theme: theme
  187. }, /*#__PURE__*/React.createElement(ConfirmDialog, Object.assign({}, props)));
  188. };
  189. if (process.env.NODE_ENV !== 'production') {
  190. ConfirmDialog.displayName = 'ConfirmDialog';
  191. ConfirmDialogWrapper.displayName = 'ConfirmDialogWrapper';
  192. }
  193. export default ConfirmDialogWrapper;