ConfirmDialog.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. import { createVNode as _createVNode } from "vue";
  2. import CheckCircleFilled from "@ant-design/icons-vue/es/icons/CheckCircleFilled";
  3. import CloseCircleFilled from "@ant-design/icons-vue/es/icons/CloseCircleFilled";
  4. import ExclamationCircleFilled from "@ant-design/icons-vue/es/icons/ExclamationCircleFilled";
  5. import InfoCircleFilled from "@ant-design/icons-vue/es/icons/InfoCircleFilled";
  6. import classNames from '../_util/classNames';
  7. import Dialog from './Modal';
  8. import ActionButton from '../_util/ActionButton';
  9. import { defineComponent } from 'vue';
  10. import { useLocaleReceiver } from '../locale-provider/LocaleReceiver';
  11. import { getTransitionName } from '../_util/transition';
  12. import warning from '../_util/warning';
  13. function renderSomeContent(someContent) {
  14. if (typeof someContent === 'function') {
  15. return someContent();
  16. }
  17. return someContent;
  18. }
  19. export default defineComponent({
  20. name: 'ConfirmDialog',
  21. inheritAttrs: false,
  22. props: ['icon', 'onCancel', 'onOk', 'close', 'closable', 'zIndex', 'afterClose', 'visible', 'open', 'keyboard', 'centered', 'getContainer', 'maskStyle', 'okButtonProps', 'cancelButtonProps', 'okType', 'prefixCls', 'okCancel', 'width', 'mask', 'maskClosable', 'okText', 'cancelText', 'autoFocusButton', 'transitionName', 'maskTransitionName', 'type', 'title', 'content', 'direction', 'rootPrefixCls', 'bodyStyle', 'closeIcon', 'modalRender', 'focusTriggerAfterClose', 'wrapClassName', 'confirmPrefixCls', 'footer'],
  23. setup(props, _ref) {
  24. let {
  25. attrs
  26. } = _ref;
  27. const [locale] = useLocaleReceiver('Modal');
  28. if (process.env.NODE_ENV !== 'production') {
  29. warning(props.visible === undefined, 'Modal', `\`visible\` is deprecated, please use \`open\` instead.`);
  30. }
  31. return () => {
  32. const {
  33. icon,
  34. onCancel,
  35. onOk,
  36. close,
  37. okText,
  38. closable = false,
  39. zIndex,
  40. afterClose,
  41. keyboard,
  42. centered,
  43. getContainer,
  44. maskStyle,
  45. okButtonProps,
  46. cancelButtonProps,
  47. okCancel,
  48. width = 416,
  49. mask = true,
  50. maskClosable = false,
  51. type,
  52. open,
  53. title,
  54. content,
  55. direction,
  56. closeIcon,
  57. modalRender,
  58. focusTriggerAfterClose,
  59. rootPrefixCls,
  60. bodyStyle,
  61. wrapClassName,
  62. footer
  63. } = props;
  64. // Icon
  65. let mergedIcon = icon;
  66. // 支持传入{ icon: null }来隐藏`Modal.confirm`默认的Icon
  67. if (!icon && icon !== null) {
  68. switch (type) {
  69. case 'info':
  70. mergedIcon = _createVNode(InfoCircleFilled, null, null);
  71. break;
  72. case 'success':
  73. mergedIcon = _createVNode(CheckCircleFilled, null, null);
  74. break;
  75. case 'error':
  76. mergedIcon = _createVNode(CloseCircleFilled, null, null);
  77. break;
  78. default:
  79. mergedIcon = _createVNode(ExclamationCircleFilled, null, null);
  80. }
  81. }
  82. const okType = props.okType || 'primary';
  83. const prefixCls = props.prefixCls || 'ant-modal';
  84. const contentPrefixCls = `${prefixCls}-confirm`;
  85. const style = attrs.style || {};
  86. const mergedOkCancel = okCancel !== null && okCancel !== void 0 ? okCancel : type === 'confirm';
  87. const autoFocusButton = props.autoFocusButton === null ? false : props.autoFocusButton || 'ok';
  88. const confirmPrefixCls = `${prefixCls}-confirm`;
  89. const classString = classNames(confirmPrefixCls, `${confirmPrefixCls}-${props.type}`, {
  90. [`${confirmPrefixCls}-rtl`]: direction === 'rtl'
  91. }, attrs.class);
  92. const mergedLocal = locale.value;
  93. const cancelButton = mergedOkCancel && _createVNode(ActionButton, {
  94. "actionFn": onCancel,
  95. "close": close,
  96. "autofocus": autoFocusButton === 'cancel',
  97. "buttonProps": cancelButtonProps,
  98. "prefixCls": `${rootPrefixCls}-btn`
  99. }, {
  100. default: () => [renderSomeContent(props.cancelText) || mergedLocal.cancelText]
  101. });
  102. return _createVNode(Dialog, {
  103. "prefixCls": prefixCls,
  104. "class": classString,
  105. "wrapClassName": classNames({
  106. [`${confirmPrefixCls}-centered`]: !!centered
  107. }, wrapClassName),
  108. "onCancel": e => close === null || close === void 0 ? void 0 : close({
  109. triggerCancel: true
  110. }, e),
  111. "open": open,
  112. "title": "",
  113. "footer": "",
  114. "transitionName": getTransitionName(rootPrefixCls, 'zoom', props.transitionName),
  115. "maskTransitionName": getTransitionName(rootPrefixCls, 'fade', props.maskTransitionName),
  116. "mask": mask,
  117. "maskClosable": maskClosable,
  118. "maskStyle": maskStyle,
  119. "style": style,
  120. "bodyStyle": bodyStyle,
  121. "width": width,
  122. "zIndex": zIndex,
  123. "afterClose": afterClose,
  124. "keyboard": keyboard,
  125. "centered": centered,
  126. "getContainer": getContainer,
  127. "closable": closable,
  128. "closeIcon": closeIcon,
  129. "modalRender": modalRender,
  130. "focusTriggerAfterClose": focusTriggerAfterClose
  131. }, {
  132. default: () => [_createVNode("div", {
  133. "class": `${contentPrefixCls}-body-wrapper`
  134. }, [_createVNode("div", {
  135. "class": `${contentPrefixCls}-body`
  136. }, [renderSomeContent(mergedIcon), title === undefined ? null : _createVNode("span", {
  137. "class": `${contentPrefixCls}-title`
  138. }, [renderSomeContent(title)]), _createVNode("div", {
  139. "class": `${contentPrefixCls}-content`
  140. }, [renderSomeContent(content)])]), footer !== undefined ? renderSomeContent(footer) : _createVNode("div", {
  141. "class": `${contentPrefixCls}-btns`
  142. }, [cancelButton, _createVNode(ActionButton, {
  143. "type": okType,
  144. "actionFn": onOk,
  145. "close": close,
  146. "autofocus": autoFocusButton === 'ok',
  147. "buttonProps": okButtonProps,
  148. "prefixCls": `${rootPrefixCls}-btn`
  149. }, {
  150. default: () => [renderSomeContent(okText) || (mergedOkCancel ? mergedLocal.okText : mergedLocal.justOkText)]
  151. })])])]
  152. });
  153. };
  154. }
  155. });