Skip to content

Commit 308c30c

Browse files
CCherry07CCherry07
authored
fix: add disabledContext override with form components (#6618)
* fix: add disabledContext override with form components * test: update snap * fix: LabelWidth demo filename * fix: fontsize spelling mistake
1 parent afc1b84 commit 308c30c

File tree

14 files changed

+128
-88
lines changed

14 files changed

+128
-88
lines changed

‎components/button/__tests__/__snapshots__/demo.test.js.snap‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -260,8 +260,8 @@ exports[`renders ./components/button/demo/icon.vue correctly 1`] = `
260260
<div class="ant-space ant-space-vertical">
261261
<div class="ant-space-item" style="margin-bottom: 8px;">
262262
<div warp="" class="ant-space ant-space-horizontal ant-space-align-center">
263-
<div class="ant-space-item" style="margin-right: 8px;">
264-
<!----><button class="ant-btn ant-btn-circle ant-btn-primary ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
263+
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-circle ant-btn-primary ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
264+
<!---->
265265
</div>
266266
<!---->
267267
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-circle ant-btn-primary" type="button">
@@ -270,8 +270,8 @@ exports[`renders ./components/button/demo/icon.vue correctly 1`] = `
270270
<!---->
271271
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button></div>
272272
<!---->
273-
<div class="ant-space-item" style="margin-right: 8px;">
274-
<!----><button class="ant-btn ant-btn-circle ant-btn-default ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
273+
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-circle ant-btn-default ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
274+
<!---->
275275
</div>
276276
<!---->
277277
<div class="ant-space-item"><button class="ant-btn ant-btn-default" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button></div>
@@ -281,14 +281,14 @@ exports[`renders ./components/button/demo/icon.vue correctly 1`] = `
281281
<!---->
282282
<div class="ant-space-item">
283283
<div warp="" class="ant-space ant-space-horizontal ant-space-align-center">
284-
<div class="ant-space-item" style="margin-right: 8px;">
285-
<!----><button class="ant-btn ant-btn-circle ant-btn-default ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
284+
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-circle ant-btn-default ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
285+
<!---->
286286
</div>
287287
<!---->
288288
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-default" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button></div>
289289
<!---->
290-
<div class="ant-space-item" style="margin-right: 8px;">
291-
<!----><button class="ant-btn ant-btn-circle ant-btn-dashed ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
290+
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-circle ant-btn-dashed ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
291+
<!---->
292292
</div>
293293
<!---->
294294
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-dashed" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button></div>
@@ -347,10 +347,10 @@ exports[`renders ./components/button/demo/multiple.vue correctly 1`] = `
347347
<!----><span>secondary</span>
348348
</button></div>
349349
<!---->
350-
<div class="ant-space-item">
351-
<!----><button class="ant-btn ant-btn-default ant-dropdown-trigger" type="button">
350+
<div class="ant-space-item"><button class="ant-btn ant-btn-default ant-dropdown-trigger" type="button">
352351
<!----><span>Actions</span><span role="img" aria-label="down" class="anticon anticon-down"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
353352
</button>
353+
<!---->
354354
</div>
355355
<!---->
356356
</div>

‎components/button/button.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import Wave from '../_util/wave';
1313
import buttonProps from './buttonTypes';
1414
import { flattenChildren, initDefaultProps } from '../_util/props-util';
1515
import useConfigInject from '../config-provider/hooks/useConfigInject';
16+
import { useInjectDisabled } from '../config-provider/DisabledContext';
1617
import devWarning from '../vc-util/devWarning';
1718
import LoadingIcon from './LoadingIcon';
1819
import useStyle from './style';
@@ -46,6 +47,8 @@ export default defineComponent({
4647
const { prefixCls, autoInsertSpaceInButton, direction, size } = useConfigInject('btn', props);
4748
const [wrapSSR, hashId] = useStyle(prefixCls);
4849
const groupSizeContext = GroupSizeContext.useInject();
50+
const disabledContext = useInjectDisabled();
51+
const mergedDisabled = computed(() => props.disabled ?? disabledContext.value);
4952
const buttonNodeRef = shallowRef<HTMLElement>(null);
5053
const delayTimeoutRef = shallowRef(undefined);
5154
let isNeedInserted = false;
@@ -124,7 +127,7 @@ export default defineComponent({
124127
};
125128
const handleClick = (event: Event) => {
126129
// https://github.com/ant-design/ant-design/issues/30207
127-
if (innerLoading.value || props.disabled) {
130+
if (innerLoading.value || mergedDisabled.value) {
128131
event.preventDefault();
129132
return;
130133
}
@@ -178,13 +181,13 @@ export default defineComponent({
178181

179182
isNeedInserted = children.length === 1 && !icon && !isUnBorderedButtonType(props.type);
180183

181-
const { type, htmlType, disabled, href, title, target } = props;
184+
const { type, htmlType, href, title, target } = props;
182185

183186
const iconType = innerLoading.value ? 'loading' : icon;
184187
const buttonProps = {
185188
...attrs,
186189
title,
187-
disabled,
190+
disabled: mergedDisabled.value,
188191
class: [
189192
classes.value,
190193
attrs.class,
@@ -194,7 +197,7 @@ export default defineComponent({
194197
onMousedown: handleMousedown,
195198
};
196199
// https://github.com/vueComponent/ant-design-vue/issues/4930
197-
if (!disabled) {
200+
if (!mergedDisabled.value) {
198201
delete buttonProps.disabled;
199202
}
200203
const iconNode =

‎components/checkbox/Checkbox.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ export default defineComponent({
3333
const formItemContext = useInjectFormItemContext();
3434
const formItemInputContext = FormItemInputContext.useInject();
3535
const { prefixCls, direction, disabled } = useConfigInject('checkbox', props);
36-
3736
// style
3837
const [wrapSSR, hashId] = useStyle(prefixCls);
3938

@@ -85,6 +84,7 @@ export default defineComponent({
8584
id,
8685
prefixCls: prefixCls.value,
8786
...restAttrs,
87+
disabled: mergedDisabled.value,
8888
};
8989
if (checkboxGroup && !skipGroup) {
9090
checkboxProps.onChange = (...args) => {
@@ -93,7 +93,7 @@ export default defineComponent({
9393
};
9494
checkboxProps.name = checkboxGroup.name.value;
9595
checkboxProps.checked = checkboxGroup.mergedValue.value.includes(props.value);
96-
checkboxProps.disabled = props.disabled || checkboxGroup.disabled.value;
96+
checkboxProps.disabled = mergedDisabled.value || checkboxGroup.disabled.value;
9797
checkboxProps.indeterminate = indeterminate;
9898
} else {
9999
checkboxProps.onChange = handleChange;

0 commit comments

Comments
 (0)