Skip to content

Commit 0c901c7

Browse files
aojunhao123aojunhao123
authored
fix: prefer using the name passed in the FormItemContext (ant-design#54206)
* fix: prefer using the name passed in the FormContext * update snapshot * update * update * update * udpate test case * convert formitem name to html attr * update
1 parent ad0df59 commit 0c901c7

File tree

9 files changed

+172
-39
lines changed

9 files changed

+172
-39
lines changed

‎components/form/FormItem/ItemHolder.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export default function ItemHolder(props: ItemHolderProps) {
4848
isRequired,
4949
onSubItemMetaChange,
5050
layout,
51+
name,
5152
...restProps
5253
} = props;
5354

@@ -173,6 +174,7 @@ export default function ItemHolder(props: ItemHolderProps) {
173174
hasFeedback={hasFeedback}
174175
// Already calculated
175176
validateStatus={mergedValidateStatus}
177+
name={name}
176178
>
177179
{children}
178180
</StatusProvider>

‎components/form/FormItem/StatusProvider.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
44
import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
55
import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
66
import classNames from 'classnames';
7-
import type { Meta } from 'rc-field-form/lib/interface';
7+
import type { Meta, NamePath } from 'rc-field-form/lib/interface';
88

99
import type { FeedbackIcons, ValidateStatus } from '.';
1010
import { FormContext, FormItemInputContext } from '../context';
@@ -27,6 +27,7 @@ export interface StatusProviderProps {
2727
warnings: React.ReactNode[];
2828
hasFeedback?: boolean | { icons?: FeedbackIcons };
2929
noStyle?: boolean;
30+
name?: NamePath;
3031
}
3132

3233
export default function StatusProvider({
@@ -38,6 +39,7 @@ export default function StatusProvider({
3839
prefixCls,
3940
meta,
4041
noStyle,
42+
name,
4143
}: StatusProviderProps) {
4244
const itemPrefixCls = `${prefixCls}-item`;
4345
const { feedbackIcons } = React.useContext(FormContext);
@@ -56,6 +58,7 @@ export default function StatusProvider({
5658
status: parentStatus,
5759
hasFeedback: parentHasFeedback,
5860
feedbackIcon: parentFeedbackIcon,
61+
name: parentName,
5962
} = React.useContext(FormItemInputContext);
6063

6164
// ====================== Context =======================
@@ -87,6 +90,7 @@ export default function StatusProvider({
8790
hasFeedback: !!hasFeedback,
8891
feedbackIcon,
8992
isFormItemInput: true,
93+
name,
9094
};
9195

9296
// No style will follow parent context
@@ -95,6 +99,7 @@ export default function StatusProvider({
9599
context.isFormItemInput = parentIsFormItemInput;
96100
context.hasFeedback = !!(hasFeedback ?? parentHasFeedback);
97101
context.feedbackIcon = hasFeedback !== undefined ? context.feedbackIcon : parentFeedbackIcon;
102+
context.name = name ?? parentName;
98103
}
99104

100105
return context;

‎components/form/FormItem/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -258,6 +258,7 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
258258
errors={mergedErrors}
259259
warnings={mergedWarnings}
260260
noStyle
261+
name={name}
261262
>
262263
{baseChildren}
263264
</StatusProvider>
@@ -277,6 +278,7 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
277278
meta={meta}
278279
onSubItemMetaChange={onSubItemMetaChange}
279280
layout={layout}
281+
name={name}
280282
>
281283
{baseChildren}
282284
</ItemHolder>

‎components/form/__tests__/__snapshots__/demo-extend.test.ts.snap‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Jest Snapshot v1, https://goo.gl/fbAQLP
1+
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
22

33
exports[`renders components/form/demo/advanced-search.tsx extend context correctly 1`] = `
44
Array [
@@ -8883,7 +8883,7 @@ exports[`renders components/form/demo/layout.tsx extend context correctly 1`] =
88838883
<input
88848884
checked=""
88858885
class="ant-radio-button-input"
8886-
name="test-id"
8886+
name="layout"
88878887
type="radio"
88888888
value="horizontal"
88898889
/>
@@ -8905,7 +8905,7 @@ exports[`renders components/form/demo/layout.tsx extend context correctly 1`] =
89058905
>
89068906
<input
89078907
class="ant-radio-button-input"
8908-
name="test-id"
8908+
name="layout"
89098909
type="radio"
89108910
value="vertical"
89118911
/>
@@ -8927,7 +8927,7 @@ exports[`renders components/form/demo/layout.tsx extend context correctly 1`] =
89278927
>
89288928
<input
89298929
class="ant-radio-button-input"
8930-
name="test-id"
8930+
name="layout"
89318931
type="radio"
89328932
value="inline"
89338933
/>
@@ -11429,7 +11429,7 @@ exports[`renders components/form/demo/required-mark.tsx extend context correctly
1142911429
>
1143011430
<input
1143111431
class="ant-radio-button-input"
11432-
name="test-id"
11432+
name="requiredMarkValue"
1143311433
type="radio"
1143411434
value="true"
1143511435
/>
@@ -11452,7 +11452,7 @@ exports[`renders components/form/demo/required-mark.tsx extend context correctly
1145211452
<input
1145311453
checked=""
1145411454
class="ant-radio-button-input"
11455-
name="test-id"
11455+
name="requiredMarkValue"
1145611456
type="radio"
1145711457
value="optional"
1145811458
/>
@@ -11474,7 +11474,7 @@ exports[`renders components/form/demo/required-mark.tsx extend context correctly
1147411474
>
1147511475
<input
1147611476
class="ant-radio-button-input"
11477-
name="test-id"
11477+
name="requiredMarkValue"
1147811478
type="radio"
1147911479
value="false"
1148011480
/>
@@ -11496,7 +11496,7 @@ exports[`renders components/form/demo/required-mark.tsx extend context correctly
1149611496
>
1149711497
<input
1149811498
class="ant-radio-button-input"
11499-
name="test-id"
11499+
name="requiredMarkValue"
1150011500
type="radio"
1150111501
value="customize"
1150211502
/>
@@ -11758,7 +11758,7 @@ exports[`renders components/form/demo/size.tsx extend context correctly 1`] = `
1175811758
>
1175911759
<input
1176011760
class="ant-radio-button-input"
11761-
name="test-id"
11761+
name="size"
1176211762
type="radio"
1176311763
value="small"
1176411764
/>
@@ -11781,7 +11781,7 @@ exports[`renders components/form/demo/size.tsx extend context correctly 1`] = `
1178111781
<input
1178211782
checked=""
1178311783
class="ant-radio-button-input"
11784-
name="test-id"
11784+
name="size"
1178511785
type="radio"
1178611786
value="default"
1178711787
/>
@@ -11803,7 +11803,7 @@ exports[`renders components/form/demo/size.tsx extend context correctly 1`] = `
1180311803
>
1180411804
<input
1180511805
class="ant-radio-button-input"
11806-
name="test-id"
11806+
name="size"
1180711807
type="radio"
1180811808
value="large"
1180911809
/>
@@ -22314,7 +22314,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
2231422314
>
2231522315
<input
2231622316
class="ant-radio-input"
22317-
name="test-id"
22317+
name="radio-group"
2231822318
type="radio"
2231922319
value="a"
2232022320
/>
@@ -22336,7 +22336,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
2233622336
>
2233722337
<input
2233822338
class="ant-radio-input"
22339-
name="test-id"
22339+
name="radio-group"
2234022340
type="radio"
2234122341
value="b"
2234222342
/>
@@ -22358,7 +22358,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
2235822358
>
2235922359
<input
2236022360
class="ant-radio-input"
22361-
name="test-id"
22361+
name="radio-group"
2236222362
type="radio"
2236322363
value="c"
2236422364
/>
@@ -22417,7 +22417,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
2241722417
>
2241822418
<input
2241922419
class="ant-radio-button-input"
22420-
name="test-id"
22420+
name="radio-button"
2242122421
type="radio"
2242222422
value="a"
2242322423
/>
@@ -22439,7 +22439,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
2243922439
>
2244022440
<input
2244122441
class="ant-radio-button-input"
22442-
name="test-id"
22442+
name="radio-button"
2244322443
type="radio"
2244422444
value="b"
2244522445
/>
@@ -22461,7 +22461,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
2246122461
>
2246222462
<input
2246322463
class="ant-radio-button-input"
22464-
name="test-id"
22464+
name="radio-button"
2246522465
type="radio"
2246622466
value="c"
2246722467
/>

‎components/form/__tests__/__snapshots__/demo.test.tsx.snap‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Jest Snapshot v1, https://goo.gl/fbAQLP
1+
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
22

33
exports[`renders components/form/demo/advanced-search.tsx correctly 1`] = `
44
Array [
@@ -5234,7 +5234,7 @@ exports[`renders components/form/demo/layout.tsx correctly 1`] = `
52345234
<input
52355235
checked=""
52365236
class="ant-radio-button-input"
5237-
name="test-id"
5237+
name="layout"
52385238
type="radio"
52395239
value="horizontal"
52405240
/>
@@ -5256,7 +5256,7 @@ exports[`renders components/form/demo/layout.tsx correctly 1`] = `
52565256
>
52575257
<input
52585258
class="ant-radio-button-input"
5259-
name="test-id"
5259+
name="layout"
52605260
type="radio"
52615261
value="vertical"
52625262
/>
@@ -5278,7 +5278,7 @@ exports[`renders components/form/demo/layout.tsx correctly 1`] = `
52785278
>
52795279
<input
52805280
class="ant-radio-button-input"
5281-
name="test-id"
5281+
name="layout"
52825282
type="radio"
52835283
value="inline"
52845284
/>
@@ -7389,7 +7389,7 @@ exports[`renders components/form/demo/required-mark.tsx correctly 1`] = `
73897389
>
73907390
<input
73917391
class="ant-radio-button-input"
7392-
name="test-id"
7392+
name="requiredMarkValue"
73937393
type="radio"
73947394
value="true"
73957395
/>
@@ -7412,7 +7412,7 @@ exports[`renders components/form/demo/required-mark.tsx correctly 1`] = `
74127412
<input
74137413
checked=""
74147414
class="ant-radio-button-input"
7415-
name="test-id"
7415+
name="requiredMarkValue"
74167416
type="radio"
74177417
value="optional"
74187418
/>
@@ -7434,7 +7434,7 @@ exports[`renders components/form/demo/required-mark.tsx correctly 1`] = `
74347434
>
74357435
<input
74367436
class="ant-radio-button-input"
7437-
name="test-id"
7437+
name="requiredMarkValue"
74387438
type="radio"
74397439
value="false"
74407440
/>
@@ -7456,7 +7456,7 @@ exports[`renders components/form/demo/required-mark.tsx correctly 1`] = `
74567456
>
74577457
<input
74587458
class="ant-radio-button-input"
7459-
name="test-id"
7459+
name="requiredMarkValue"
74607460
type="radio"
74617461
value="customize"
74627462
/>
@@ -7676,7 +7676,7 @@ exports[`renders components/form/demo/size.tsx correctly 1`] = `
76767676
>
76777677
<input
76787678
class="ant-radio-button-input"
7679-
name="test-id"
7679+
name="size"
76807680
type="radio"
76817681
value="small"
76827682
/>
@@ -7699,7 +7699,7 @@ exports[`renders components/form/demo/size.tsx correctly 1`] = `
76997699
<input
77007700
checked=""
77017701
class="ant-radio-button-input"
7702-
name="test-id"
7702+
name="size"
77037703
type="radio"
77047704
value="default"
77057705
/>
@@ -7721,7 +7721,7 @@ exports[`renders components/form/demo/size.tsx correctly 1`] = `
77217721
>
77227722
<input
77237723
class="ant-radio-button-input"
7724-
name="test-id"
7724+
name="size"
77257725
type="radio"
77267726
value="large"
77277727
/>
@@ -9736,7 +9736,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
97369736
>
97379737
<input
97389738
class="ant-radio-input"
9739-
name="test-id"
9739+
name="radio-group"
97409740
type="radio"
97419741
value="a"
97429742
/>
@@ -9758,7 +9758,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
97589758
>
97599759
<input
97609760
class="ant-radio-input"
9761-
name="test-id"
9761+
name="radio-group"
97629762
type="radio"
97639763
value="b"
97649764
/>
@@ -9780,7 +9780,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
97809780
>
97819781
<input
97829782
class="ant-radio-input"
9783-
name="test-id"
9783+
name="radio-group"
97849784
type="radio"
97859785
value="c"
97869786
/>
@@ -9839,7 +9839,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
98399839
>
98409840
<input
98419841
class="ant-radio-button-input"
9842-
name="test-id"
9842+
name="radio-button"
98439843
type="radio"
98449844
value="a"
98459845
/>
@@ -9861,7 +9861,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
98619861
>
98629862
<input
98639863
class="ant-radio-button-input"
9864-
name="test-id"
9864+
name="radio-button"
98659865
type="radio"
98669866
value="b"
98679867
/>
@@ -9883,7 +9883,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
98839883
>
98849884
<input
98859885
class="ant-radio-button-input"
9886-
name="test-id"
9886+
name="radio-button"
98879887
type="radio"
98889888
value="c"
98899889
/>

‎components/form/context.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import type { ColProps } from '../grid/col';
99
import type { FormInstance, RequiredMark } from './Form';
1010
import type { FeedbackIcons, ValidateStatus } from './FormItem';
1111
import type { Variant } from '../config-provider';
12-
import type { FormLabelAlign } from './interface';
12+
import type { FormLabelAlign, NamePath } from './interface';
1313

1414
/** Form Context. Set top form style and pass to Form Item usage. */
1515
export interface FormContextProps {
@@ -63,6 +63,7 @@ export interface FormItemStatusContextProps {
6363
warnings?: React.ReactNode[];
6464
hasFeedback?: boolean;
6565
feedbackIcon?: ReactNode;
66+
name?: NamePath;
6667
}
6768

6869
export const FormItemInputContext = React.createContext<FormItemStatusContextProps>({});

0 commit comments

Comments
 (0)