diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx index 97d3a29fec..1cf044a21b 100644 --- a/components/form/FormItem.tsx +++ b/components/form/FormItem.tsx @@ -19,7 +19,7 @@ type RenderChildren = (form: FormInstance) => React.ReactElement; interface FormItemProps extends FormItemLabelProps, FormItemInputProps, RcFieldProps { prefixCls?: string; - inline?: boolean; + noStyle?: boolean; style?: React.CSSProperties; className?: string; children: React.ReactElement | RenderChildren; @@ -36,7 +36,7 @@ const FormItem: React.FC = (props: FormItemProps) => { const { name, fieldKey, - inline, + noStyle, dependencies, prefixCls: customizePrefixCls, style, @@ -85,8 +85,8 @@ const FormItem: React.FC = (props: FormItemProps) => { const mergedName = toArray(name).length ? metaName : []; // ======================== Errors ======================== - // Collect inline Field error to the top FormItem - const updateChildItemErrors = inline + // Collect noStyle Field error to the top FormItem + const updateChildItemErrors = noStyle ? updateItemErrors : (subName: string, subErrors: string[]) => { if (!isEqual(inlineErrors[subName], subErrors)) { @@ -97,7 +97,7 @@ const FormItem: React.FC = (props: FormItemProps) => { } }; - if (inline) { + if (noStyle) { nameRef.current = [...mergedName]; if (fieldKey) { nameRef.current[nameRef.current.length - 1] = fieldKey; @@ -188,7 +188,7 @@ const FormItem: React.FC = (props: FormItemProps) => { childNode = children(context); } - if (inline) { + if (noStyle) { return childNode; } diff --git a/components/form/__tests__/index.test.js b/components/form/__tests__/index.test.js index 52f960dc30..fef3a009b7 100644 --- a/components/form/__tests__/index.test.js +++ b/components/form/__tests__/index.test.js @@ -94,16 +94,16 @@ describe('Form', () => { )); - testList('nest inline', field => ( + testList('nest noStyle', field => ( - + )); }); - it('inline Form.Item', async () => { + it('noStyle Form.Item', async () => { const onChange = jest.fn(); const wrapper = mount( diff --git a/components/form/context.tsx b/components/form/context.tsx index 00a30fbf76..73dfb8c3a2 100644 --- a/components/form/context.tsx +++ b/components/form/context.tsx @@ -25,7 +25,7 @@ export const FormContext = React.createContext({ /** * Form Item Context - * Used for Form inline Item error collection + * Used for Form noStyle Item error collection */ export interface FormItemContextProps { updateItemErrors: (name: string, errors: string[]) => void; diff --git a/components/form/demo/control-hooks.md b/components/form/demo/control-hooks.md index e4300a45cf..52cb53edd1 100644 --- a/components/form/demo/control-hooks.md +++ b/components/form/demo/control-hooks.md @@ -67,7 +67,7 @@ const Demo = () => { prevValues.gender !== currentValues.gender} > {({ getFieldValue }) => { diff --git a/components/form/demo/control-ref.md b/components/form/demo/control-ref.md index 424d66c80b..e1763ec2bb 100644 --- a/components/form/demo/control-ref.md +++ b/components/form/demo/control-ref.md @@ -68,7 +68,7 @@ class Demo extends React.Component { prevValues.gender !== currentValues.gender} > {({ getFieldValue }) => { diff --git a/components/form/demo/dynamic-form-item.md b/components/form/demo/dynamic-form-item.md index 1e7b792897..df1c5cda34 100644 --- a/components/form/demo/dynamic-form-item.md +++ b/components/form/demo/dynamic-form-item.md @@ -61,7 +61,7 @@ const DynamicFieldSet = () => { message: "Please input passenger's name or delete this field.", }, ]} - inline + noStyle > diff --git a/components/form/demo/normal-login.md b/components/form/demo/normal-login.md index 82d98c16bc..4c90d21463 100644 --- a/components/form/demo/normal-login.md +++ b/components/form/demo/normal-login.md @@ -48,7 +48,7 @@ const NormalLoginForm = () => { /> - + Remember me diff --git a/components/form/demo/register.md b/components/form/demo/register.md index 0682571791..2debae31ed 100644 --- a/components/form/demo/register.md +++ b/components/form/demo/register.md @@ -101,7 +101,7 @@ const RegistrationForm = () => { }; const prefixSelector = ( - + diff --git a/components/form/demo/validate-other.md b/components/form/demo/validate-other.md index 15b96b5bb4..fd108ddc58 100644 --- a/components/form/demo/validate-other.md +++ b/components/form/demo/validate-other.md @@ -89,7 +89,7 @@ const Demo = () => { - + machines @@ -172,7 +172,7 @@ const Demo = () => {
- +

diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index d51054249d..0aa7377923 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -74,7 +74,7 @@ Form field component for data bidirectional binding, validation, layout, and so | hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input` | boolean | false | | help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\|ReactNode | - | | htmlFor | Set sub label `htmlFor` | string | - | -| inline | No style for `true`, used as a pure field control | boolean | false | +| noStyle | No style for `true`, used as a pure field control | boolean | false | | label | Label text | string\|ReactNode | - | | labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with ``. You can set `labelCol` on Form. If both exists, use Item first | [object](/components/grid/#Col) | - | | name | Field name, support array | [NamePath](#NamePath) | - | diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index 86af6c4a1b..93278f7a4a 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -75,7 +75,7 @@ const validateMessages = { | hasFeedback | 配合 `validateStatus` 属性使用,展示校验状态图标,建议只配合 Input 组件使用 | boolean | false | | help | 提示信息,如不设置,则会根据校验规则自动生成 | string\|ReactNode | - | | htmlFor | 设置子元素 label `htmlFor` 属性 | string | - | -| inline | 为 `true` 时不带样式,作为纯字段控件使用 | boolean | false | +| noStyle | 为 `true` 时不带样式,作为纯字段控件使用 | boolean | false | | label | `label` 标签的文本 | string\|ReactNode | - | | labelCol | `label` 标签布局,同 `` 组件,设置 `span` `offset` 值,如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`。你可以通过 Form 的 `labelCol` 进行统一设置。当和 Form 同时设置时,以 Item 为准 | [object](/components/grid/#Col) | - | | name | 字段名,支持数组 | [NamePath](#NamePath) | - | diff --git a/components/form/v3.en-US.md b/components/form/v3.en-US.md index b708b84fe2..3383fc8353 100644 --- a/components/form/v3.en-US.md +++ b/components/form/v3.en-US.md @@ -130,7 +130,7 @@ To: const Demo = () => { return (

- + diff --git a/components/form/v3.zh-CN.md b/components/form/v3.zh-CN.md index 23b765569c..4bf5cf9885 100644 --- a/components/form/v3.zh-CN.md +++ b/components/form/v3.zh-CN.md @@ -132,7 +132,7 @@ const WrappedDemo = Form.create()(Demo); const Demo = () => { return (
- +