ant-design-vue/components/modal/ConfirmDialog.tsx
2023-04-06 10:56:10 +08:00

232 lines
6.4 KiB
Vue

import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled';
import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled';
import InfoCircleFilled from '@ant-design/icons-vue/InfoCircleFilled';
import classNames from '../_util/classNames';
import type { ModalFuncProps, ModalLocale } from './Modal';
import Dialog from './Modal';
import ActionButton from '../_util/ActionButton';
import { defineComponent } from 'vue';
import { useLocaleReceiver } from '../locale-provider/LocaleReceiver';
import { getTransitionName } from '../_util/transition';
import warning from '../_util/warning';
interface ConfirmDialogProps extends ModalFuncProps {
afterClose?: () => void;
close?: (...args: any[]) => void;
autoFocusButton?: null | 'ok' | 'cancel';
rootPrefixCls: string;
iconPrefixCls?: string;
/** @private Internal Usage. Do not override this */
locale?: ModalLocale;
}
function renderSomeContent(someContent: any) {
if (typeof someContent === 'function') {
return someContent();
}
return someContent;
}
export default defineComponent<ConfirmDialogProps>({
name: 'ConfirmDialog',
inheritAttrs: false,
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',
] as any,
setup(props, { attrs }) {
const [locale] = useLocaleReceiver('Modal');
if (process.env.NODE_ENV !== 'production') {
warning(
props.visible === undefined,
'Modal',
`\`visible\` is deprecated, please use \`open\` instead.`,
);
}
return () => {
const {
icon,
onCancel,
onOk,
close,
closable = false,
zIndex,
afterClose,
keyboard,
centered,
getContainer,
maskStyle,
okButtonProps,
cancelButtonProps,
okCancel,
width = 416,
mask = true,
maskClosable = false,
type,
open,
title,
content,
direction,
closeIcon,
modalRender,
focusTriggerAfterClose,
rootPrefixCls,
bodyStyle,
wrapClassName,
footer,
} = props;
// Icon
let mergedIcon = icon;
// 支持传入{ icon: null }来隐藏`Modal.confirm`默认的Icon
if (!icon && icon !== null) {
switch (type) {
case 'info':
mergedIcon = <InfoCircleFilled />;
break;
case 'success':
mergedIcon = <CheckCircleFilled />;
break;
case 'error':
mergedIcon = <CloseCircleFilled />;
break;
default:
mergedIcon = <ExclamationCircleFilled />;
}
}
const okType = props.okType || 'primary';
const prefixCls = props.prefixCls || 'ant-modal';
const contentPrefixCls = `${prefixCls}-confirm`;
const style = attrs.style || {};
const okText =
renderSomeContent(props.okText) ||
(okCancel ? locale.value.okText : locale.value.justOkText);
const mergedOkCancel = okCancel ?? type === 'confirm';
const autoFocusButton =
props.autoFocusButton === null ? false : props.autoFocusButton || 'ok';
const confirmPrefixCls = `${prefixCls}-confirm`;
const classString = classNames(
confirmPrefixCls,
`${confirmPrefixCls}-${props.type}`,
{ [`${confirmPrefixCls}-rtl`]: direction === 'rtl' },
attrs.class,
);
const cancelButton = mergedOkCancel && (
<ActionButton
actionFn={onCancel}
close={close}
autofocus={autoFocusButton === 'cancel'}
buttonProps={cancelButtonProps}
prefixCls={`${rootPrefixCls}-btn`}
>
{renderSomeContent(props.cancelText) || locale.value.cancelText}
</ActionButton>
);
return (
<Dialog
prefixCls={prefixCls}
class={classString}
wrapClassName={classNames(
{ [`${confirmPrefixCls}-centered`]: !!centered },
wrapClassName,
)}
onCancel={e => close?.({ triggerCancel: true }, e)}
open={open}
title=""
footer=""
transitionName={getTransitionName(rootPrefixCls, 'zoom', props.transitionName)}
maskTransitionName={getTransitionName(rootPrefixCls, 'fade', props.maskTransitionName)}
mask={mask}
maskClosable={maskClosable}
maskStyle={maskStyle}
style={style}
bodyStyle={bodyStyle}
width={width}
zIndex={zIndex}
afterClose={afterClose}
keyboard={keyboard}
centered={centered}
getContainer={getContainer}
closable={closable}
closeIcon={closeIcon}
modalRender={modalRender}
focusTriggerAfterClose={focusTriggerAfterClose}
>
<div class={`${contentPrefixCls}-body-wrapper`}>
<div class={`${contentPrefixCls}-body`}>
{renderSomeContent(mergedIcon)}
{title === undefined ? null : (
<span class={`${contentPrefixCls}-title`}>{renderSomeContent(title)}</span>
)}
<div class={`${contentPrefixCls}-content`}>{renderSomeContent(content)}</div>
</div>
{footer !== undefined ? (
renderSomeContent(footer)
) : (
<div class={`${contentPrefixCls}-btns`}>
{cancelButton}
<ActionButton
type={okType}
actionFn={onOk}
close={close}
autofocus={autoFocusButton === 'ok'}
buttonProps={okButtonProps}
prefixCls={`${rootPrefixCls}-btn`}
>
{okText}
</ActionButton>
</div>
)}
</div>
</Dialog>
);
};
},
});