feat: confirm support reactively
tangjinzhou
parent
7bb296b3a5
commit
d749fc9f22
|
|
@ -3,7 +3,7 @@ import type { ModalFuncProps } from './Modal';
|
|||
import Dialog from './Modal';
|
||||
import ActionButton from './ActionButton';
|
||||
import { getConfirmLocale } from './locale';
|
||||
import type { FunctionalComponent } from 'vue';
|
||||
import { defineComponent, computed } from 'vue';
|
||||
|
||||
interface ConfirmDialogProps extends ModalFuncProps {
|
||||
afterClose?: () => void;
|
||||
|
|
@ -18,113 +18,146 @@ function renderSomeContent(_name, someContent) {
|
|||
return someContent;
|
||||
}
|
||||
|
||||
const ConfirmDialog: FunctionalComponent<ConfirmDialogProps> = props => {
|
||||
const {
|
||||
icon,
|
||||
onCancel,
|
||||
onOk,
|
||||
close,
|
||||
closable = false,
|
||||
zIndex,
|
||||
afterClose,
|
||||
visible,
|
||||
keyboard,
|
||||
centered,
|
||||
getContainer,
|
||||
maskStyle,
|
||||
okButtonProps,
|
||||
cancelButtonProps,
|
||||
// closable = false,
|
||||
} = props;
|
||||
const okType = props.okType || 'primary';
|
||||
const prefixCls = props.prefixCls || 'ant-modal';
|
||||
const contentPrefixCls = `${prefixCls}-confirm`;
|
||||
// 默认为 true，保持向下兼容
|
||||
const okCancel = 'okCancel' in props ? props.okCancel : true;
|
||||
const width = props.width || 416;
|
||||
const style = props.style || {};
|
||||
const mask = props.mask === undefined ? true : props.mask;
|
||||
// 默认为 false，保持旧版默认行为
|
||||
const maskClosable = props.maskClosable === undefined ? false : props.maskClosable;
|
||||
const runtimeLocale = getConfirmLocale();
|
||||
const okText =
|
||||
renderSomeContent('okText', props.okText) ||
|
||||
(okCancel ? runtimeLocale.okText : runtimeLocale.justOkText);
|
||||
const cancelText = renderSomeContent('cancelText', props.cancelText) || runtimeLocale.cancelText;
|
||||
const autoFocusButton = props.autoFocusButton === null ? false : props.autoFocusButton || 'ok';
|
||||
const transitionName = props.transitionName || 'zoom';
|
||||
const maskTransitionName = props.maskTransitionName || 'fade';
|
||||
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',
|
||||
] as any,
|
||||
setup(props, { attrs }) {
|
||||
const runtimeLocale = computed(() => getConfirmLocale());
|
||||
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,
|
||||
maskTransitionName = 'fade',
|
||||
transitionName = 'zoom',
|
||||
type,
|
||||
title,
|
||||
content,
|
||||
// closable = false,
|
||||
} = props;
|
||||
const okType = props.okType || 'primary';
|
||||
const prefixCls = props.prefixCls || 'ant-modal';
|
||||
const contentPrefixCls = `${prefixCls}-confirm`;
|
||||
const style = attrs.style || {};
|
||||
const okText =
|
||||
renderSomeContent('okText', props.okText) ||
|
||||
(okCancel ? runtimeLocale.value.okText : runtimeLocale.value.justOkText);
|
||||
const cancelText =
|
||||
renderSomeContent('cancelText', props.cancelText) || runtimeLocale.value.cancelText;
|
||||
const autoFocusButton =
|
||||
props.autoFocusButton === null ? false : props.autoFocusButton || 'ok';
|
||||
|
||||
const classString = classNames(
|
||||
contentPrefixCls,
|
||||
`${contentPrefixCls}-${props.type}`,
|
||||
`${prefixCls}-${props.type}`,
|
||||
props.class,
|
||||
);
|
||||
const classString = classNames(
|
||||
contentPrefixCls,
|
||||
`${contentPrefixCls}-${type}`,
|
||||
`${prefixCls}-${type}`,
|
||||
attrs.class,
|
||||
);
|
||||
|
||||
const cancelButton = okCancel && (
|
||||
<ActionButton
|
||||
actionFn={onCancel}
|
||||
closeModal={close}
|
||||
autofocus={autoFocusButton === 'cancel'}
|
||||
buttonProps={cancelButtonProps}
|
||||
>
|
||||
{cancelText}
|
||||
</ActionButton>
|
||||
);
|
||||
const cancelButton = okCancel && (
|
||||
<ActionButton
|
||||
actionFn={onCancel}
|
||||
closeModal={close}
|
||||
autofocus={autoFocusButton === 'cancel'}
|
||||
buttonProps={cancelButtonProps}
|
||||
>
|
||||
{cancelText}
|
||||
</ActionButton>
|
||||
);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
prefixCls={prefixCls}
|
||||
class={classString}
|
||||
wrapClassName={classNames({ [`${contentPrefixCls}-centered`]: !!centered })}
|
||||
onCancel={e => close({ triggerCancel: true }, e)}
|
||||
visible={visible}
|
||||
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}
|
||||
closable={closable}
|
||||
>
|
||||
<div class={`${contentPrefixCls}-body-wrapper`}>
|
||||
<div class={`${contentPrefixCls}-body`}>
|
||||
{renderSomeContent('icon', icon)}
|
||||
{props.title === undefined ? null : (
|
||||
<span class={`${contentPrefixCls}-title`}>
|
||||
{renderSomeContent('title', props.title)}
|
||||
</span>
|
||||
)}
|
||||
<div class={`${contentPrefixCls}-content`}>
|
||||
{renderSomeContent('content', props.content)}
|
||||
return (
|
||||
<Dialog
|
||||
prefixCls={prefixCls}
|
||||
class={classString}
|
||||
wrapClassName={classNames({ [`${contentPrefixCls}-centered`]: !!centered })}
|
||||
onCancel={e => close({ triggerCancel: true }, e)}
|
||||
visible={visible}
|
||||
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}
|
||||
closable={closable}
|
||||
>
|
||||
<div class={`${contentPrefixCls}-body-wrapper`}>
|
||||
<div class={`${contentPrefixCls}-body`}>
|
||||
{renderSomeContent('icon', icon)}
|
||||
{title === undefined ? null : (
|
||||
<span class={`${contentPrefixCls}-title`}>{renderSomeContent('title', title)}</span>
|
||||
)}
|
||||
<div class={`${contentPrefixCls}-content`}>
|
||||
{renderSomeContent('content', content)}
|
||||
</div>
|
||||
</div>
|
||||
<div class={`${contentPrefixCls}-btns`}>
|
||||
{cancelButton}
|
||||
<ActionButton
|
||||
type={okType}
|
||||
actionFn={onOk}
|
||||
closeModal={close}
|
||||
autofocus={autoFocusButton === 'ok'}
|
||||
buttonProps={okButtonProps}
|
||||
>
|
||||
{okText}
|
||||
</ActionButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class={`${contentPrefixCls}-btns`}>
|
||||
{cancelButton}
|
||||
<ActionButton
|
||||
type={okType}
|
||||
actionFn={onOk}
|
||||
closeModal={close}
|
||||
autofocus={autoFocusButton === 'ok'}
|
||||
buttonProps={okButtonProps}
|
||||
>
|
||||
{okText}
|
||||
</ActionButton>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
ConfirmDialog.inheritAttrs = false;
|
||||
|
||||
export default ConfirmDialog;
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import type { ExtractPropTypes, VNodeTypes, CSSProperties, PropType } from 'vue';
|
||||
import { defineComponent, inject } from 'vue';
|
||||
import { defineComponent, inject, computed } from 'vue';
|
||||
import classNames from '../_util/classNames';
|
||||
import Dialog from '../vc-dialog';
|
||||
import PropTypes from '../_util/vue-types';
|
||||
|
|
@ -157,7 +157,9 @@ export default defineComponent({
|
|||
}),
|
||||
emits: ['update:visible', 'cancel', 'change', 'ok'],
|
||||
setup() {
|
||||
const confirmLocale = computed(() => getConfirmLocale());
|
||||
return {
|
||||
confirmLocale,
|
||||
configProvider: inject('configProvider', defaultConfigProvider),
|
||||
};
|
||||
},
|
||||
|
|
@ -210,6 +212,7 @@ export default defineComponent({
|
|||
centered,
|
||||
getContainer,
|
||||
$attrs,
|
||||
confirmLocale,
|
||||
} = this;
|
||||
const children = getSlot(this);
|
||||
const { getPrefixCls, getPopupContainer: getContextPopupContainer } = this.configProvider;
|
||||
|
|
@ -218,7 +221,7 @@ export default defineComponent({
|
|||
const defaultFooter = (
|
||||
<LocaleReceiver
|
||||
componentName="Modal"
|
||||
defaultLocale={getConfirmLocale()}
|
||||
defaultLocale={confirmLocale}
|
||||
children={this.renderFooter}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { ref } from 'vue';
|
||||
import defaultLocale from '../locale/default';
|
||||
|
||||
export interface ModalLocale {
|
||||
|
|
@ -6,23 +7,23 @@ export interface ModalLocale {
|
|||
justOkText: string;
|
||||
}
|
||||
|
||||
let runtimeLocale = {
|
||||
const runtimeLocale = ref({
|
||||
...defaultLocale.Modal,
|
||||
};
|
||||
});
|
||||
|
||||
export function changeConfirmLocale(newLocale?: ModalLocale) {
|
||||
if (newLocale) {
|
||||
runtimeLocale = {
|
||||
runtimeLocale.value = {
|
||||
...runtimeLocale,
|
||||
...newLocale,
|
||||
};
|
||||
} else {
|
||||
runtimeLocale = {
|
||||
runtimeLocale.value = {
|
||||
...defaultLocale.Modal,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export function getConfirmLocale() {
|
||||
return runtimeLocale;
|
||||
return runtimeLocale.value;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue