2020-08-31 16:53:19 +08:00
|
|
|
import classNames from '../_util/classNames';
|
2021-06-26 09:35:40 +08:00
|
|
|
import type { ModalFuncProps } from './Modal';
|
|
|
|
import Dialog from './Modal';
|
2019-01-12 11:33:27 +08:00
|
|
|
import ActionButton from './ActionButton';
|
2021-10-26 16:12:56 +08:00
|
|
|
import { defineComponent } from 'vue';
|
|
|
|
import { useLocaleReceiver } from '../locale-provider/LocaleReceiver';
|
2022-01-06 16:08:53 +08:00
|
|
|
import { getTransitionName } from '../_util/transition';
|
2018-03-06 19:14:41 +08:00
|
|
|
|
2020-10-19 23:09:36 +08:00
|
|
|
interface ConfirmDialogProps extends ModalFuncProps {
|
|
|
|
afterClose?: () => void;
|
2021-09-08 17:12:11 +08:00
|
|
|
close?: (...args: any[]) => void;
|
2020-10-19 23:09:36 +08:00
|
|
|
autoFocusButton?: null | 'ok' | 'cancel';
|
2022-01-06 16:08:53 +08:00
|
|
|
rootPrefixCls: string;
|
|
|
|
iconPrefixCls?: string;
|
2020-10-19 23:09:36 +08:00
|
|
|
}
|
|
|
|
|
2022-01-06 16:08:53 +08:00
|
|
|
function renderSomeContent(someContent: any) {
|
2021-09-08 17:12:11 +08:00
|
|
|
if (typeof someContent === 'function') {
|
|
|
|
return someContent();
|
|
|
|
}
|
|
|
|
return someContent;
|
|
|
|
}
|
|
|
|
|
2021-09-25 16:51:32 +08:00
|
|
|
export default defineComponent<ConfirmDialogProps>({
|
|
|
|
name: 'ConfirmDialog',
|
|
|
|
inheritAttrs: false,
|
|
|
|
props: [
|
|
|
|
'icon',
|
|
|
|
'onCancel',
|
|
|
|
'onOk',
|
|
|
|
'close',
|
|
|
|
'closable',
|
|
|
|
'zIndex',
|
|
|
|
'afterClose',
|
|
|
|
'visible',
|
|
|
|
'keyboard',
|
|
|
|
'centered',
|
|
|
|
'getContainer',
|
|
|
|
'maskStyle',
|
|
|
|
'okButtonProps',
|
|
|
|
'cancelButtonProps',
|
|
|
|
'okType',
|
|
|
|
'prefixCls',
|
|
|
|
'okCancel',
|
|
|
|
'width',
|
|
|
|
'mask',
|
|
|
|
'maskClosable',
|
|
|
|
'okText',
|
|
|
|
'cancelText',
|
|
|
|
'autoFocusButton',
|
|
|
|
'transitionName',
|
|
|
|
'maskTransitionName',
|
|
|
|
'type',
|
|
|
|
'title',
|
|
|
|
'content',
|
2022-01-06 16:08:53 +08:00
|
|
|
'direction',
|
|
|
|
'rootPrefixCls',
|
|
|
|
'bodyStyle',
|
|
|
|
'closeIcon',
|
|
|
|
'modalRender',
|
|
|
|
'focusTriggerAfterClose',
|
2021-09-25 16:51:32 +08:00
|
|
|
] as any,
|
|
|
|
setup(props, { attrs }) {
|
2021-10-26 16:12:56 +08:00
|
|
|
const [locale] = useLocaleReceiver('Modal');
|
2021-09-25 16:51:32 +08:00
|
|
|
return () => {
|
|
|
|
const {
|
|
|
|
icon,
|
|
|
|
onCancel,
|
|
|
|
onOk,
|
|
|
|
close,
|
|
|
|
closable = false,
|
|
|
|
zIndex,
|
|
|
|
afterClose,
|
|
|
|
visible,
|
|
|
|
keyboard,
|
|
|
|
centered,
|
|
|
|
getContainer,
|
|
|
|
maskStyle,
|
|
|
|
okButtonProps,
|
|
|
|
cancelButtonProps,
|
|
|
|
okCancel = true,
|
|
|
|
width = 416,
|
|
|
|
mask = true,
|
|
|
|
maskClosable = false,
|
|
|
|
type,
|
|
|
|
title,
|
|
|
|
content,
|
2022-01-06 16:08:53 +08:00
|
|
|
direction,
|
|
|
|
closeIcon,
|
|
|
|
modalRender,
|
|
|
|
focusTriggerAfterClose,
|
|
|
|
rootPrefixCls,
|
|
|
|
bodyStyle,
|
2021-09-25 16:51:32 +08:00
|
|
|
} = props;
|
|
|
|
const okType = props.okType || 'primary';
|
|
|
|
const prefixCls = props.prefixCls || 'ant-modal';
|
|
|
|
const contentPrefixCls = `${prefixCls}-confirm`;
|
|
|
|
const style = attrs.style || {};
|
|
|
|
const okText =
|
2022-01-06 16:08:53 +08:00
|
|
|
renderSomeContent(props.okText) ||
|
2021-10-26 16:12:56 +08:00
|
|
|
(okCancel ? locale.value.okText : locale.value.justOkText);
|
2022-01-06 16:08:53 +08:00
|
|
|
const cancelText = renderSomeContent(props.cancelText) || locale.value.cancelText;
|
2021-09-25 16:51:32 +08:00
|
|
|
const autoFocusButton =
|
|
|
|
props.autoFocusButton === null ? false : props.autoFocusButton || 'ok';
|
2018-03-06 19:14:41 +08:00
|
|
|
|
2021-09-25 16:51:32 +08:00
|
|
|
const classString = classNames(
|
|
|
|
contentPrefixCls,
|
|
|
|
`${contentPrefixCls}-${type}`,
|
|
|
|
`${prefixCls}-${type}`,
|
2022-01-06 16:08:53 +08:00
|
|
|
{ [`${contentPrefixCls}-rtl`]: direction === 'rtl' },
|
2021-09-25 16:51:32 +08:00
|
|
|
attrs.class,
|
|
|
|
);
|
2018-03-06 19:14:41 +08:00
|
|
|
|
2021-09-25 16:51:32 +08:00
|
|
|
const cancelButton = okCancel && (
|
|
|
|
<ActionButton
|
|
|
|
actionFn={onCancel}
|
2022-01-06 16:08:53 +08:00
|
|
|
close={close}
|
2021-09-25 16:51:32 +08:00
|
|
|
autofocus={autoFocusButton === 'cancel'}
|
|
|
|
buttonProps={cancelButtonProps}
|
2022-01-06 16:08:53 +08:00
|
|
|
prefixCls={`${rootPrefixCls}-btn`}
|
2021-09-25 16:51:32 +08:00
|
|
|
>
|
|
|
|
{cancelText}
|
|
|
|
</ActionButton>
|
|
|
|
);
|
2018-03-06 19:14:41 +08:00
|
|
|
|
2021-09-25 16:51:32 +08:00
|
|
|
return (
|
|
|
|
<Dialog
|
|
|
|
prefixCls={prefixCls}
|
|
|
|
class={classString}
|
|
|
|
wrapClassName={classNames({ [`${contentPrefixCls}-centered`]: !!centered })}
|
|
|
|
onCancel={e => close({ triggerCancel: true }, e)}
|
|
|
|
visible={visible}
|
|
|
|
title=""
|
|
|
|
footer=""
|
2022-01-06 16:08:53 +08:00
|
|
|
transitionName={getTransitionName(rootPrefixCls, 'zoom', props.transitionName)}
|
|
|
|
maskTransitionName={getTransitionName(rootPrefixCls, 'fade', props.maskTransitionName)}
|
2021-09-25 16:51:32 +08:00
|
|
|
mask={mask}
|
|
|
|
maskClosable={maskClosable}
|
|
|
|
maskStyle={maskStyle}
|
|
|
|
style={style}
|
2022-01-06 16:08:53 +08:00
|
|
|
bodyStyle={bodyStyle}
|
2021-09-25 16:51:32 +08:00
|
|
|
width={width}
|
|
|
|
zIndex={zIndex}
|
|
|
|
afterClose={afterClose}
|
|
|
|
keyboard={keyboard}
|
|
|
|
centered={centered}
|
|
|
|
getContainer={getContainer}
|
|
|
|
closable={closable}
|
2022-01-06 16:08:53 +08:00
|
|
|
closeIcon={closeIcon}
|
|
|
|
modalRender={modalRender}
|
|
|
|
focusTriggerAfterClose={focusTriggerAfterClose}
|
2021-09-25 16:51:32 +08:00
|
|
|
>
|
|
|
|
<div class={`${contentPrefixCls}-body-wrapper`}>
|
|
|
|
<div class={`${contentPrefixCls}-body`}>
|
2022-01-06 16:08:53 +08:00
|
|
|
{renderSomeContent(icon)}
|
2021-09-25 16:51:32 +08:00
|
|
|
{title === undefined ? null : (
|
2022-01-06 16:08:53 +08:00
|
|
|
<span class={`${contentPrefixCls}-title`}>{renderSomeContent(title)}</span>
|
2021-09-25 16:51:32 +08:00
|
|
|
)}
|
2022-01-06 16:08:53 +08:00
|
|
|
<div class={`${contentPrefixCls}-content`}>{renderSomeContent(content)}</div>
|
2021-09-25 16:51:32 +08:00
|
|
|
</div>
|
|
|
|
<div class={`${contentPrefixCls}-btns`}>
|
|
|
|
{cancelButton}
|
|
|
|
<ActionButton
|
|
|
|
type={okType}
|
|
|
|
actionFn={onOk}
|
2022-01-06 16:08:53 +08:00
|
|
|
close={close}
|
2021-09-25 16:51:32 +08:00
|
|
|
autofocus={autoFocusButton === 'ok'}
|
|
|
|
buttonProps={okButtonProps}
|
2022-01-06 16:08:53 +08:00
|
|
|
prefixCls={`${rootPrefixCls}-btn`}
|
2021-09-25 16:51:32 +08:00
|
|
|
>
|
|
|
|
{okText}
|
|
|
|
</ActionButton>
|
|
|
|
</div>
|
2021-09-08 17:12:11 +08:00
|
|
|
</div>
|
2021-09-25 16:51:32 +08:00
|
|
|
</Dialog>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
},
|
|
|
|
});
|