github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: confirm support reactively

pull/4671/head
tangjinzhou 2021-09-18 15:40:08 +08:00
parent 7bb296b3a5
commit d749fc9f22
3 changed files with 151 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

247
components/modal/ConfirmDialog.tsx
View File

@ -3,7 +3,7 @@ import type { ModalFuncProps } from './Modal';
import Dialog from './Modal'; import Dialog from './Modal';
import ActionButton from './ActionButton'; import ActionButton from './ActionButton';
import { getConfirmLocale } from './locale'; import { getConfirmLocale } from './locale';
import type { FunctionalComponent } from 'vue'; import { defineComponent, computed } from 'vue';
interface ConfirmDialogProps extends ModalFuncProps { interface ConfirmDialogProps extends ModalFuncProps {
afterClose?: () => void; afterClose?: () => void;
@ -18,113 +18,146 @@ function renderSomeContent(_name, someContent) {
return someContent; return someContent;
} }
const ConfirmDialog: FunctionalComponent<ConfirmDialogProps> = props => { export default defineComponent<ConfirmDialogProps>({
const { name: 'ConfirmDialog',
icon, inheritAttrs: false,
onCancel, props: [
onOk, 'icon',
close, 'onCancel',
closable = false, 'onOk',
zIndex, 'close',
afterClose, 'closable',
visible, 'zIndex',
keyboard, 'afterClose',
centered, 'visible',
getContainer, 'keyboard',
maskStyle, 'centered',
okButtonProps, 'getContainer',
cancelButtonProps, 'maskStyle',
// closable = false, 'okButtonProps',
} = props; 'cancelButtonProps',
const okType = props.okType || 'primary'; 'okType',
const prefixCls = props.prefixCls || 'ant-modal'; 'prefixCls',
const contentPrefixCls = `${prefixCls}-confirm`; 'okCancel',
// 默认为 true，保持向下兼容 'width',
const okCancel = 'okCancel' in props ? props.okCancel : true; 'mask',
const width = props.width || 416; 'maskClosable',
const style = props.style || {}; 'okText',
const mask = props.mask === undefined ? true : props.mask; 'cancelText',
// 默认为 false，保持旧版默认行为 'autoFocusButton',
const maskClosable = props.maskClosable === undefined ? false : props.maskClosable; 'transitionName',
const runtimeLocale = getConfirmLocale(); 'maskTransitionName',
const okText = 'type',
renderSomeContent('okText', props.okText) || 'title',
(okCancel ? runtimeLocale.okText : runtimeLocale.justOkText); 'content',
const cancelText = renderSomeContent('cancelText', props.cancelText) || runtimeLocale.cancelText; ] as any,
const autoFocusButton = props.autoFocusButton === null ? false : props.autoFocusButton || 'ok'; setup(props, { attrs }) {
const transitionName = props.transitionName || 'zoom'; const runtimeLocale = computed(() => getConfirmLocale());
const maskTransitionName = props.maskTransitionName || 'fade'; 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( const classString = classNames(
contentPrefixCls, contentPrefixCls,
`${contentPrefixCls}-${props.type}`, `${contentPrefixCls}-${type}`,
`${prefixCls}-${props.type}`, `${prefixCls}-${type}`,
props.class, attrs.class,
); );
const cancelButton = okCancel && ( const cancelButton = okCancel && (
<ActionButton <ActionButton
actionFn={onCancel} actionFn={onCancel}
closeModal={close} closeModal={close}
autofocus={autoFocusButton === 'cancel'} autofocus={autoFocusButton === 'cancel'}
buttonProps={cancelButtonProps} buttonProps={cancelButtonProps}
> >
{cancelText} {cancelText}
</ActionButton> </ActionButton>
); );
return ( return (
<Dialog <Dialog
prefixCls={prefixCls} prefixCls={prefixCls}
class={classString} class={classString}
wrapClassName={classNames({ [`${contentPrefixCls}-centered`]: !!centered })} wrapClassName={classNames({ [`${contentPrefixCls}-centered`]: !!centered })}
onCancel={e => close({ triggerCancel: true }, e)} onCancel={e => close({ triggerCancel: true }, e)}
visible={visible} visible={visible}
title="" title=""
transitionName={transitionName} transitionName={transitionName}
footer="" footer=""
maskTransitionName={maskTransitionName} maskTransitionName={maskTransitionName}
mask={mask} mask={mask}
maskClosable={maskClosable} maskClosable={maskClosable}
maskStyle={maskStyle} maskStyle={maskStyle}
style={style} style={style}
width={width} width={width}
zIndex={zIndex} zIndex={zIndex}
afterClose={afterClose} afterClose={afterClose}
keyboard={keyboard} keyboard={keyboard}
centered={centered} centered={centered}
getContainer={getContainer} getContainer={getContainer}
closable={closable} closable={closable}
> >
<div class={`${contentPrefixCls}-body-wrapper`}> <div class={`${contentPrefixCls}-body-wrapper`}>
<div class={`${contentPrefixCls}-body`}> <div class={`${contentPrefixCls}-body`}>
{renderSomeContent('icon', icon)} {renderSomeContent('icon', icon)}
{props.title === undefined ? null : ( {title === undefined ? null : (
<span class={`${contentPrefixCls}-title`}> <span class={`${contentPrefixCls}-title`}>{renderSomeContent('title', title)}</span>
{renderSomeContent('title', props.title)} )}
</span> <div class={`${contentPrefixCls}-content`}>
)} {renderSomeContent('content', content)}
<div class={`${contentPrefixCls}-content`}> </div>
{renderSomeContent('content', props.content)} </div>
<div class={`${contentPrefixCls}-btns`}>
{cancelButton}
<ActionButton
type={okType}
actionFn={onOk}
closeModal={close}
autofocus={autoFocusButton === 'ok'}
buttonProps={okButtonProps}
>
{okText}
</ActionButton>
</div>
</div> </div>
</div> </Dialog>
<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;

7
components/modal/Modal.tsx
View File

@ -1,5 +1,5 @@
import type { ExtractPropTypes, VNodeTypes, CSSProperties, PropType } from 'vue'; 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 classNames from '../_util/classNames';
import Dialog from '../vc-dialog'; import Dialog from '../vc-dialog';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
@ -157,7 +157,9 @@ export default defineComponent({
}), }),
emits: ['update:visible', 'cancel', 'change', 'ok'], emits: ['update:visible', 'cancel', 'change', 'ok'],
setup() { setup() {
const confirmLocale = computed(() => getConfirmLocale());
return { return {
confirmLocale,
configProvider: inject('configProvider', defaultConfigProvider), configProvider: inject('configProvider', defaultConfigProvider),
}; };
}, },
@ -210,6 +212,7 @@ export default defineComponent({
centered, centered,
getContainer, getContainer,
$attrs, $attrs,
confirmLocale,
} = this; } = this;
const children = getSlot(this); const children = getSlot(this);
const { getPrefixCls, getPopupContainer: getContextPopupContainer } = this.configProvider; const { getPrefixCls, getPopupContainer: getContextPopupContainer } = this.configProvider;
@ -218,7 +221,7 @@ export default defineComponent({
const defaultFooter = ( const defaultFooter = (
<LocaleReceiver <LocaleReceiver
componentName="Modal" componentName="Modal"
defaultLocale={getConfirmLocale()} defaultLocale={confirmLocale}
children={this.renderFooter} children={this.renderFooter}
/> />
); );

11
components/modal/locale.ts
View File

@ -1,3 +1,4 @@
import { ref } from 'vue';
import defaultLocale from '../locale/default'; import defaultLocale from '../locale/default';
export interface ModalLocale { export interface ModalLocale {
@ -6,23 +7,23 @@ export interface ModalLocale {
justOkText: string; justOkText: string;
} }
let runtimeLocale = { const runtimeLocale = ref({
...defaultLocale.Modal, ...defaultLocale.Modal,
}; });
export function changeConfirmLocale(newLocale?: ModalLocale) { export function changeConfirmLocale(newLocale?: ModalLocale) {
if (newLocale) { if (newLocale) {
runtimeLocale = { runtimeLocale.value = {
...runtimeLocale, ...runtimeLocale,
...newLocale, ...newLocale,
}; };
} else { } else {
runtimeLocale = { runtimeLocale.value = {
...defaultLocale.Modal, ...defaultLocale.Modal,
}; };
} }
} }
export function getConfirmLocale() { export function getConfirmLocale() {
return runtimeLocale; return runtimeLocale.value;
} }