mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

chore: clarify error about children of Form.Item with name (#38038)

Browse Source 
* Clarify error about children of Form.Item with `name`

This is a common error and the message as written was not very clear.

This should be more helpful pointing people in the right direction

* Update error message in test

* Clarify more error messages

Referring to "render props" is confusing because the docs don't explain what that is, and it's not really a prop.

* Update tests for new error messages

Also improve the test names for some

* Further test message updates

Missed a couple messages

* Add short URLs

* Update test error messages

* Apply suggestions from code review

* Apply suggestions from code review

Co-authored-by: Ell Bradshaw <joelbr@tailormed.co>
Co-authored-by: afc163 <afc163@gmail.com>
This commit is contained in:
Ell Bradshaw 2022-11-07 01:32:58 -08:00 committed by GitHub
parent 39f907a14d
commit 5a61762681
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/form/FormItem/index.tsx
View File

@ -276,27 +276,31 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
warning(
!(shouldUpdate && dependencies),
'Form.Item',
"`shouldUpdate` and `dependencies` shouldn't be used together. See https://ant.design/components/form/#dependencies.",
"`shouldUpdate` and `dependencies` shouldn't be used together. See https://u.ant.design/#form-deps.",
);
if (Array.isArray(children) && hasName) {
warning(false, 'Form.Item', '`children` is array of render props cannot have `name`.');
warning(
false,
'Form.Item',
'A `Form.Item` with a `name` prop must have a single child element. For information on how to render more complex form items, see https://u.ant.design/#complex-form-item.',
);
childNode = children;
} else if (isRenderProps && (!(shouldUpdate || dependencies) || hasName)) {
warning(
!!(shouldUpdate || dependencies),
'Form.Item',
'`children` of render props only work with `shouldUpdate` or `dependencies`.',
'A `Form.Item` with a render function must have either `shouldUpdate` or `dependencies`.',
);
warning(
!hasName,
'Form.Item',
"Do not use `name` with `children` of render props since it's not a field.",
"A `Form.Item` with a render function cannot be a field, and thus cannot have a `name` prop.",
);
} else if (dependencies && !isRenderProps && !hasName) {
warning(
false,
'Form.Item',
'Must set `name` or use render props when `dependencies` is set.',
'Must set `name` or use a render function when `dependencies` is set.',
);
} else if (isValidElement(children)) {
warning(

14
components/form/__tests__/index.test.tsx
View File

@ -192,14 +192,14 @@ describe('Form', () => {
});
});
it('`shouldUpdate` should work with render props', () => {
it('render functions require either `shouldUpdate` or `dependencies`', () => {
render(
<Form>
<Form.Item>{() => null}</Form.Item>
</Form>,
);
expect(errorSpy).toHaveBeenCalledWith(
'Warning: [antd: Form.Item] `children` of render props only work with `shouldUpdate` or `dependencies`.',
'Warning: [antd: Form.Item] A `Form.Item` with a render function must have either `shouldUpdate` or `dependencies`.',
);
});
@ -212,7 +212,7 @@ describe('Form', () => {
</Form>,
);
expect(errorSpy).toHaveBeenCalledWith(
"Warning: [antd: Form.Item] `shouldUpdate` and `dependencies` shouldn't be used together. See https://ant.design/components/form/#dependencies.",
"Warning: [antd: Form.Item] `shouldUpdate` and `dependencies` shouldn't be used together. See https://u.ant.design/#form-deps.",
);
});
@ -225,11 +225,11 @@ describe('Form', () => {
</Form>,
);
expect(errorSpy).toHaveBeenCalledWith(
"Warning: [antd: Form.Item] Do not use `name` with `children` of render props since it's not a field.",
"Warning: [antd: Form.Item] A `Form.Item` with a render function cannot be a field, and thus cannot have a `name` prop.",
);
});
it('children is array has name props', () => {
it('multiple children with a name prop', () => {
render(
<Form>
<Form.Item name="test">
@ -239,7 +239,7 @@ describe('Form', () => {
</Form>,
);
expect(errorSpy).toHaveBeenCalledWith(
'Warning: [antd: Form.Item] `children` is array of render props cannot have `name`.',
'Warning: [antd: Form.Item] A `Form.Item` with a `name` prop must have a single child element. For information on how to render more complex form items, see https://u.ant.design/#complex-form-item.',
);
});
@ -619,7 +619,7 @@ describe('Form', () => {
</Form>,
);
expect(errorSpy).toHaveBeenCalledWith(
'Warning: [antd: Form.Item] Must set `name` or use render props when `dependencies` is set.',
'Warning: [antd: Form.Item] Must set `name` or use a render function when `dependencies` is set.',
);
});