ant-design-vue/components/modal/ConfirmDialog.jsx

109 lines
3.3 KiB
Vue
Raw Normal View History

2020-08-31 16:53:19 +08:00
import classNames from '../_util/classNames';
2019-01-12 11:33:27 +08:00
import Dialog from './Modal';
import ActionButton from './ActionButton';
import { getConfirmLocale } from './locale';
2018-03-06 19:14:41 +08:00
2020-06-15 23:47:49 +08:00
const ConfirmDialog = (_, { attrs }) => {
const {
icon,
onCancel,
onOk,
close,
zIndex,
afterClose,
visible,
keyboard,
centered,
getContainer,
maskStyle,
okButtonProps,
cancelButtonProps,
closable = false,
} = attrs;
const okType = attrs.okType || 'primary';
const prefixCls = attrs.prefixCls || 'ant-modal';
const contentPrefixCls = `${prefixCls}-confirm`;
// 默认为 true保持向下兼容
const okCancel = 'okCancel' in attrs ? attrs.okCancel : true;
const width = attrs.width || 416;
const style = attrs.style || {};
const mask = attrs.mask === undefined ? true : attrs.mask;
// 默认为 false保持旧版默认行为
const maskClosable = attrs.maskClosable === undefined ? false : attrs.maskClosable;
const runtimeLocale = getConfirmLocale();
const okText = attrs.okText || (okCancel ? runtimeLocale.okText : runtimeLocale.justOkText);
const cancelText = attrs.cancelText || runtimeLocale.cancelText;
const autoFocusButton = attrs.autoFocusButton === null ? false : attrs.autoFocusButton || 'ok';
const transitionName = attrs.transitionName || 'zoom';
const maskTransitionName = attrs.maskTransitionName || 'fade';
2018-03-06 19:14:41 +08:00
2020-06-15 23:47:49 +08:00
const classString = classNames(
contentPrefixCls,
`${contentPrefixCls}-${attrs.type}`,
`${prefixCls}-${attrs.type}`,
attrs.class,
);
2018-03-06 19:14:41 +08:00
2020-06-15 23:47:49 +08:00
const cancelButton = okCancel && (
<ActionButton
actionFn={onCancel}
closeModal={close}
2020-07-17 17:36:58 +08:00
autofocus={autoFocusButton === 'cancel'}
2020-06-15 23:47:49 +08:00
buttonProps={cancelButtonProps}
>
{cancelText}
</ActionButton>
);
2018-03-06 19:14:41 +08:00
2020-06-15 23:47:49 +08:00
return (
<Dialog
prefixCls={prefixCls}
class={classString}
wrapClassName={classNames({ [`${contentPrefixCls}-centered`]: !!centered })}
onCancel={e => close({ triggerCancel: true }, e)}
visible={visible}
closable={closable}
title=""
transitionName={transitionName}
footer=""
maskTransitionName={maskTransitionName}
mask={mask}
maskClosable={maskClosable}
maskStyle={maskStyle}
style={style}
width={width}
zIndex={zIndex}
afterClose={afterClose}
keyboard={keyboard}
centered={centered}
getContainer={getContainer}
>
<div class={`${contentPrefixCls}-body-wrapper`}>
<div class={`${contentPrefixCls}-body`}>
{typeof icon === 'function' ? icon() : icon}
{attrs.title === undefined ? null : (
<span class={`${contentPrefixCls}-title`}>{attrs.title}</span>
)}
<div class={`${contentPrefixCls}-content`}>
{typeof attrs.content === 'function' ? attrs.content() : attrs.content}
2018-03-06 19:14:41 +08:00
</div>
</div>
2020-06-15 23:47:49 +08:00
<div class={`${contentPrefixCls}-btns`}>
{cancelButton}
<ActionButton
type={okType}
actionFn={onOk}
closeModal={close}
2020-07-17 17:36:58 +08:00
autofocus={autoFocusButton === 'ok'}
2020-06-15 23:47:49 +08:00
buttonProps={okButtonProps}
>
{okText}
</ActionButton>
</div>
</div>
</Dialog>
);
2019-01-12 11:33:27 +08:00
};
2020-06-15 23:47:49 +08:00
ConfirmDialog.inheritAttrs = false;
export default ConfirmDialog;