Skip to content

Commit d749fc9

Browse files
tangjinzhoutangjinzhou
committed
feat: confirm support reactively
1 parent 7bb296b commit d749fc9

File tree

3 files changed

+151
-114
lines changed

3 files changed

+151
-114
lines changed

‎components/modal/ConfirmDialog.tsx

Lines changed: 140 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { ModalFuncProps } from './Modal';
33
import Dialog from './Modal';
44
import ActionButton from './ActionButton';
55
import { getConfirmLocale } from './locale';
6-
import type { FunctionalComponent } from 'vue';
6+
import { defineComponent, computed } from 'vue';
77

88
interface ConfirmDialogProps extends ModalFuncProps {
99
afterClose?: () => void;
@@ -18,113 +18,146 @@ function renderSomeContent(_name, someContent) {
1818
return someContent;
1919
}
2020

21-
const ConfirmDialog: FunctionalComponent<ConfirmDialogProps> = props => {
22-
const {
23-
icon,
24-
onCancel,
25-
onOk,
26-
close,
27-
closable = false,
28-
zIndex,
29-
afterClose,
30-
visible,
31-
keyboard,
32-
centered,
33-
getContainer,
34-
maskStyle,
35-
okButtonProps,
36-
cancelButtonProps,
37-
// closable = false,
38-
} = props;
39-
const okType = props.okType || 'primary';
40-
const prefixCls = props.prefixCls || 'ant-modal';
41-
const contentPrefixCls = `${prefixCls}-confirm`;
42-
// 默认为 true，保持向下兼容
43-
const okCancel = 'okCancel' in props ? props.okCancel : true;
44-
const width = props.width || 416;
45-
const style = props.style || {};
46-
const mask = props.mask === undefined ? true : props.mask;
47-
// 默认为 false，保持旧版默认行为
48-
const maskClosable = props.maskClosable === undefined ? false : props.maskClosable;
49-
const runtimeLocale = getConfirmLocale();
50-
const okText =
51-
renderSomeContent('okText', props.okText) ||
52-
(okCancel ? runtimeLocale.okText : runtimeLocale.justOkText);
53-
const cancelText = renderSomeContent('cancelText', props.cancelText) || runtimeLocale.cancelText;
54-
const autoFocusButton = props.autoFocusButton === null ? false : props.autoFocusButton || 'ok';
55-
const transitionName = props.transitionName || 'zoom';
56-
const maskTransitionName = props.maskTransitionName || 'fade';
21+
export default defineComponent<ConfirmDialogProps>({
22+
name: 'ConfirmDialog',
23+
inheritAttrs: false,
24+
props: [
25+
'icon',
26+
'onCancel',
27+
'onOk',
28+
'close',
29+
'closable',
30+
'zIndex',
31+
'afterClose',
32+
'visible',
33+
'keyboard',
34+
'centered',
35+
'getContainer',
36+
'maskStyle',
37+
'okButtonProps',
38+
'cancelButtonProps',
39+
'okType',
40+
'prefixCls',
41+
'okCancel',
42+
'width',
43+
'mask',
44+
'maskClosable',
45+
'okText',
46+
'cancelText',
47+
'autoFocusButton',
48+
'transitionName',
49+
'maskTransitionName',
50+
'type',
51+
'title',
52+
'content',
53+
] as any,
54+
setup(props, { attrs }) {
55+
const runtimeLocale = computed(() => getConfirmLocale());
56+
return () => {
57+
const {
58+
icon,
59+
onCancel,
60+
onOk,
61+
close,
62+
closable = false,
63+
zIndex,
64+
afterClose,
65+
visible,
66+
keyboard,
67+
centered,
68+
getContainer,
69+
maskStyle,
70+
okButtonProps,
71+
cancelButtonProps,
72+
okCancel = true,
73+
width = 416,
74+
mask = true,
75+
maskClosable = false,
76+
maskTransitionName = 'fade',
77+
transitionName = 'zoom',
78+
type,
79+
title,
80+
content,
81+
// closable = false,
82+
} = props;
83+
const okType = props.okType || 'primary';
84+
const prefixCls = props.prefixCls || 'ant-modal';
85+
const contentPrefixCls = `${prefixCls}-confirm`;
86+
const style = attrs.style || {};
87+
const okText =
88+
renderSomeContent('okText', props.okText) ||
89+
(okCancel ? runtimeLocale.value.okText : runtimeLocale.value.justOkText);
90+
const cancelText =
91+
renderSomeContent('cancelText', props.cancelText) || runtimeLocale.value.cancelText;
92+
const autoFocusButton =
93+
props.autoFocusButton === null ? false : props.autoFocusButton || 'ok';
5794

58-
const classString = classNames(
59-
contentPrefixCls,
60-
`${contentPrefixCls}-${props.type}`,
61-
`${prefixCls}-${props.type}`,
62-
props.class,
63-
);
95+
const classString = classNames(
96+
contentPrefixCls,
97+
`${contentPrefixCls}-${type}`,
98+
`${prefixCls}-${type}`,
99+
attrs.class,
100+
);
64101

65-
const cancelButton = okCancel && (
66-
<ActionButton
67-
actionFn={onCancel}
68-
closeModal={close}
69-
autofocus={autoFocusButton === 'cancel'}
70-
buttonProps={cancelButtonProps}
71-
>
72-
{cancelText}
73-
</ActionButton>
74-
);
102+
const cancelButton = okCancel && (
103+
<ActionButton
104+
actionFn={onCancel}
105+
closeModal={close}
106+
autofocus={autoFocusButton === 'cancel'}
107+
buttonProps={cancelButtonProps}
108+
>
109+
{cancelText}
110+
</ActionButton>
111+
);
75112

76-
return (
77-
<Dialog
78-
prefixCls={prefixCls}
79-
class={classString}
80-
wrapClassName={classNames({ [`${contentPrefixCls}-centered`]: !!centered })}
81-
onCancel={e => close({ triggerCancel: true }, e)}
82-
visible={visible}
83-
title=""
84-
transitionName={transitionName}
85-
footer=""
86-
maskTransitionName={maskTransitionName}
87-
mask={mask}
88-
maskClosable={maskClosable}
89-
maskStyle={maskStyle}
90-
style={style}
91-
width={width}
92-
zIndex={zIndex}
93-
afterClose={afterClose}
94-
keyboard={keyboard}
95-
centered={centered}
96-
getContainer={getContainer}
97-
closable={closable}
98-
>
99-
<div class={`${contentPrefixCls}-body-wrapper`}>
100-
<div class={`${contentPrefixCls}-body`}>
101-
{renderSomeContent('icon', icon)}
102-
{props.title === undefined ? null : (
103-
<span class={`${contentPrefixCls}-title`}>
104-
{renderSomeContent('title', props.title)}
105-
</span>
106-
)}
107-
<div class={`${contentPrefixCls}-content`}>
108-
{renderSomeContent('content', props.content)}
113+
return (
114+
<Dialog
115+
prefixCls={prefixCls}
116+
class={classString}
117+
wrapClassName={classNames({ [`${contentPrefixCls}-centered`]: !!centered })}
118+
onCancel={e => close({ triggerCancel: true }, e)}
119+
visible={visible}
120+
title=""
121+
transitionName={transitionName}
122+
footer=""
123+
maskTransitionName={maskTransitionName}
124+
mask={mask}
125+
maskClosable={maskClosable}
126+
maskStyle={maskStyle}
127+
style={style}
128+
width={width}
129+
zIndex={zIndex}
130+
afterClose={afterClose}
131+
keyboard={keyboard}
132+
centered={centered}
133+
getContainer={getContainer}
134+
closable={closable}
135+
>
136+
<div class={`${contentPrefixCls}-body-wrapper`}>
137+
<div class={`${contentPrefixCls}-body`}>
138+
{renderSomeContent('icon', icon)}
139+
{title === undefined ? null : (
140+
<span class={`${contentPrefixCls}-title`}>{renderSomeContent('title', title)}</span>
141+
)}
142+
<div class={`${contentPrefixCls}-content`}>
143+
{renderSomeContent('content', content)}
144+
</div>
145+
</div>
146+
<div class={`${contentPrefixCls}-btns`}>
147+
{cancelButton}
148+
<ActionButton
149+
type={okType}
150+
actionFn={onOk}
151+
closeModal={close}
152+
autofocus={autoFocusButton === 'ok'}
153+
buttonProps={okButtonProps}
154+
>
155+
{okText}
156+
</ActionButton>
157+
</div>
109158
</div>
110-
</div>
111-
<div class={`${contentPrefixCls}-btns`}>
112-
{cancelButton}
113-
<ActionButton
114-
type={okType}
115-
actionFn={onOk}
116-
closeModal={close}
117-
autofocus={autoFocusButton === 'ok'}
118-
buttonProps={okButtonProps}
119-
>
120-
{okText}
121-
</ActionButton>
122-
</div>
123-
</div>
124-
</Dialog>
125-
);
126-
};
127-
128-
ConfirmDialog.inheritAttrs = false;
129-
130-
export default ConfirmDialog;
159+
</Dialog>
160+
);
161+
};
162+
},
163+
});

‎components/modal/Modal.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { ExtractPropTypes, VNodeTypes, CSSProperties, PropType } from 'vue';
2-
import { defineComponent, inject } from 'vue';
2+
import { defineComponent, inject, computed } from 'vue';
33
import classNames from '../_util/classNames';
44
import Dialog from '../vc-dialog';
55
import PropTypes from '../_util/vue-types';
@@ -157,7 +157,9 @@ export default defineComponent({
157157
}),
158158
emits: ['update:visible', 'cancel', 'change', 'ok'],
159159
setup() {
160+
const confirmLocale = computed(() => getConfirmLocale());
160161
return {
162+
confirmLocale,
161163
configProvider: inject('configProvider', defaultConfigProvider),
162164
};
163165
},
@@ -210,6 +212,7 @@ export default defineComponent({
210212
centered,
211213
getContainer,
212214
$attrs,
215+
confirmLocale,
213216
} = this;
214217
const children = getSlot(this);
215218
const { getPrefixCls, getPopupContainer: getContextPopupContainer } = this.configProvider;
@@ -218,7 +221,7 @@ export default defineComponent({
218221
const defaultFooter = (
219222
<LocaleReceiver
220223
componentName="Modal"
221-
defaultLocale={getConfirmLocale()}
224+
defaultLocale={confirmLocale}
222225
children={this.renderFooter}
223226
/>
224227
);

‎components/modal/locale.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { ref } from 'vue';
12
import defaultLocale from '../locale/default';
23

34
export interface ModalLocale {
@@ -6,23 +7,23 @@ export interface ModalLocale {
67
justOkText: string;
78
}
89

9-
let runtimeLocale = {
10+
const runtimeLocale = ref({
1011
...defaultLocale.Modal,
11-
};
12+
});
1213

1314
export function changeConfirmLocale(newLocale?: ModalLocale) {
1415
if (newLocale) {
15-
runtimeLocale = {
16+
runtimeLocale.value = {
1617
...runtimeLocale,
1718
...newLocale,
1819
};
1920
} else {
20-
runtimeLocale = {
21+
runtimeLocale.value = {
2122
...defaultLocale.Modal,
2223
};
2324
}
2425
}
2526

2627
export function getConfirmLocale() {
27-
return runtimeLocale;
28+
return runtimeLocale.value;
2829
}

0 commit comments

Comments
 (0)