From f12d82701bfe5f76319efd06efc8eb941ee09204 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Mon, 6 Apr 2020 19:21:59 +0800 Subject: [PATCH 01/12] :memo: fix codecov badge --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index fce3d1cd6e..057057b3fb 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ An enterprise-class UI design language and React UI library. -[![CircleCI status][circleci-image]][circleci-url] [![CI status][github-action-image]][github-action-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url] +[![CircleCI status][circleci-image]][circleci-url] [![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url] [![david deps][david-image]][david-url] [![david devDeps][david-dev-image]][david-dev-url] [![Total alerts][lgtm-image]][lgtm-url] [![FOSSA Status][fossa-image]][fossa-url] [![Issues need help][help-wanted-image]][help-wanted-url] From f5d4bde04b7f9bfd7c249861afb892dfcd58eefe Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 6 Apr 2020 13:05:43 +0800 Subject: [PATCH 02/12] :memo: update introduce.md --- docs/react/introduce.en-US.md | 2 +- docs/react/introduce.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/react/introduce.en-US.md b/docs/react/introduce.en-US.md index 7be5930071..daca644876 100644 --- a/docs/react/introduce.en-US.md +++ b/docs/react/introduce.en-US.md @@ -70,7 +70,7 @@ We provide `antd.js` `antd.css` and `antd.min.js` `antd.min.css` under `antd/dis > **We strongly discourage loading the entire files** this will add bloat to your application and make it more difficult to receive bugfixes and updates. Antd is intended to be used in conjunction with a build tool, such as [webpack](https://webpack.github.io/), which will make it easy to import only the parts of antd that you are using. -> Note: you should import moment before using antd.js after `3.0`. +> Note: you should import react/react-dom/moment before using antd.js. ## Usage diff --git a/docs/react/introduce.zh-CN.md b/docs/react/introduce.zh-CN.md index eb15575a9c..185d38d3a5 100644 --- a/docs/react/introduce.zh-CN.md +++ b/docs/react/introduce.zh-CN.md @@ -70,7 +70,7 @@ $ yarn add antd > **强烈不推荐使用已构建文件**，这样无法按需加载，而且难以获得底层依赖模块的 bug 快速修复支持。 -> 注意：3.0 之后引入 antd.js 前你需要自行引入 [moment](http://momentjs.com/)。 +> 注意：antd.js 依赖 react/react-dom/moment，请确保提前引入这些文件。 ## 示例 From 8dbaf66c2b42fa41f3172c35561ac6e66dfd745b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Mon, 6 Apr 2020 21:57:51 +0800 Subject: [PATCH 03/12] fix: confirm button should only trigger once (#22963) close #22861 --- components/modal/ActionButton.tsx | 25 +++++++++++++++------- components/modal/__tests__/confirm.test.js | 9 ++++++++ 2 files changed, 26 insertions(+), 8 deletions(-) diff --git a/components/modal/ActionButton.tsx b/components/modal/ActionButton.tsx index c3f8c7a731..cdf6ec3f3d 100644 --- a/components/modal/ActionButton.tsx +++ b/components/modal/ActionButton.tsx @@ -12,18 +12,17 @@ export interface ActionButtonProps { } export interface ActionButtonState { - loading: boolean; + loading: ButtonProps['loading']; } export default class ActionButton extends React.Component { timeoutId: number; - constructor(props: ActionButtonProps) { - super(props); - this.state = { - loading: false, - }; - } + clicked: boolean; + + state = { + loading: false, + }; componentDidMount() { if (this.props.autoFocus) { @@ -38,6 +37,10 @@ export default class ActionButton extends React.Component { const { actionFn, closeModal } = this.props; + if (this.clicked) { + return; + } + this.clicked = true; if (actionFn) { let ret; if (actionFn.length) { @@ -62,6 +65,7 @@ export default class ActionButton extends React.Component + ); diff --git a/components/modal/__tests__/confirm.test.js b/components/modal/__tests__/confirm.test.js index 17e4d08971..478f5c50ea 100644 --- a/components/modal/__tests__/confirm.test.js +++ b/components/modal/__tests__/confirm.test.js @@ -231,4 +231,13 @@ describe('Modal.confirm triggers callbacks correctly', () => { ); warnSpy.mockRestore(); }); + + it('ok button should trigger onOk once when click it many times quickly', () => { + const onOk = jest.fn(); + open({ onOk }); + // Fifth Modal + $$('.ant-btn-primary')[0].click(); + $$('.ant-btn-primary')[0].click(); + expect(onOk).toHaveBeenCalledTimes(1); + }); }); From 934fe16690d52e0df09a5472bab0d8598021344b Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Tue, 7 Apr 2020 10:55:36 +0800 Subject: [PATCH 04/12] style: add anchor rtl (#22875) --- components/anchor/Anchor.tsx | 6 +++-- components/anchor/style/index.less | 2 ++ components/anchor/style/rtl.less | 40 ++++++++++++++++++++++++++++++ 3 files changed, 46 insertions(+), 2 deletions(-) create mode 100644 components/anchor/style/rtl.less diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx index f9ff481f72..a0cc0c4958 100644 --- a/components/anchor/Anchor.tsx +++ b/components/anchor/Anchor.tsx @@ -274,7 +274,7 @@ export default class Anchor extends React.Component { } }; - renderAnchor = ({ getPrefixCls }: ConfigConsumerProps) => { + renderAnchor = ({ getPrefixCls, direction }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, className = '', @@ -298,7 +298,9 @@ export default class Anchor extends React.Component { visible: activeLink, }); - const wrapperClass = classNames(className, `${prefixCls}-wrapper`); + const wrapperClass = classNames(className, `${prefixCls}-wrapper`, { + [`${prefixCls}-rtl`]: direction === 'rtl', + }); const anchorClass = classNames(prefixCls, { fixed: !affix && !showInkInFixed, diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less index 9797308072..4ec7fb3d80 100644 --- a/components/anchor/style/index.less +++ b/components/anchor/style/index.less @@ -80,3 +80,5 @@ padding-bottom: 5px; } } + +@import './rtl'; diff --git a/components/anchor/style/rtl.less b/components/anchor/style/rtl.less new file mode 100644 index 0000000000..326aa2778e --- /dev/null +++ b/components/anchor/style/rtl.less @@ -0,0 +1,40 @@ +@import '../../style/themes/index'; +@import '../../style/mixins/index'; + +@anchor-border-width: 2px; + +.@{ant-prefix}-anchor { + &-rtl { + direction: rtl; + } + + &-wrapper { + .@{ant-prefix}-anchor-rtl& { + margin-right: -4px; + margin-left: 0; + padding-right: 4px; + padding-left: 0; + } + } + + &-ink { + .@{ant-prefix}-anchor-rtl & { + right: 0; + left: auto; + } + + &-ball { + .@{ant-prefix}-anchor-rtl & { + right: 50%; + left: 0; + transform: translateX(50%); + } + } + } + + &-link { + .@{ant-prefix}-anchor-rtl & { + padding: 7px 16px 7px 0; + } + } +} From 7571372781c9fdfa9e89795f441495cb3bdd726a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 7 Apr 2020 11:25:48 +0800 Subject: [PATCH 05/12] fix: Not break input group style (#22975) --- components/input/style/mixin.less | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less index fbc972dff6..ca14d7eb8a 100644 --- a/components/input/style/mixin.less +++ b/components/input/style/mixin.less @@ -300,12 +300,16 @@ } & > * { - display: inline-flex; + display: inline-block; float: none; vertical-align: top; // https://github.com/ant-design/ant-design-pro/issues/139 border-radius: 0; } + & > .@{inputClass}-affix-wrapper { + display: inline-flex; + } + & > *:not(:last-child) { margin-right: -@border-width-base; border-right-width: @border-width-base; From bf89f9d8b35f5d60882fac856a615c15621a38c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Tue, 7 Apr 2020 12:14:06 +0800 Subject: [PATCH 06/12] Update migration-v4.zh-CN.md --- docs/react/migration-v4.zh-CN.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/react/migration-v4.zh-CN.md b/docs/react/migration-v4.zh-CN.md index c2d442f3d5..fc53df869d 100644 --- a/docs/react/migration-v4.zh-CN.md +++ b/docs/react/migration-v4.zh-CN.md @@ -9,8 +9,8 @@ title: 从 v3 到 v4 1. 请先升级到 3.x 的最新版本，按照控制台 warning 信息移除/修改相关的 API。 2. 升级项目 React 16.12.0 以上。 - - 如果你仍在使用 React 15，请参考[React 16 升级文档](https://reactjs.org/blog/2017/09/26/react-v16.0.html#breaking-changes) - - 其余 React 16 废弃生命周期 API 请参考 [迁移导引](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path) + - 如果你仍在使用 React 15，请参考 [React 16 升级文档](https://reactjs.org/blog/2017/09/26/react-v16.0.html#breaking-changes)。 + - 其余 React 16 废弃生命周期 API 请参考 [迁移导引](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path)。 ## 4.0 有哪些不兼容的变化 From 4bfc2790cbbb73cff4be58b392fdbd66d4349dce Mon Sep 17 00:00:00 2001 From: zefeng Date: Tue, 7 Apr 2020 13:32:29 +0800 Subject: [PATCH 07/12] fix(menu): fix submenu style in dark mode (#22981) fix #22949 --- components/menu/SubMenu.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/components/menu/SubMenu.tsx b/components/menu/SubMenu.tsx index 1c6d0e8fc1..1b8f1b5d37 100644 --- a/components/menu/SubMenu.tsx +++ b/components/menu/SubMenu.tsx @@ -49,7 +49,11 @@ class SubMenu extends React.Component { )} From 1380850a34cb7822e1e92eda8da768f97afbb243 Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Tue, 7 Apr 2020 13:44:25 +0800 Subject: [PATCH 08/12] docs: optimize icon doc in rtl (#22982) --- site/theme/template/IconDisplay/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/theme/template/IconDisplay/index.tsx b/site/theme/template/IconDisplay/index.tsx index b205c3af1d..53cec31c11 100644 --- a/site/theme/template/IconDisplay/index.tsx +++ b/site/theme/template/IconDisplay/index.tsx @@ -110,7 +110,7 @@ class IconDisplay extends React.Component { this.handleSearchIcon(e.currentTarget.value)} size="large" From de86bf7bd42766927a549c68d86f597d0c77c01d Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Tue, 7 Apr 2020 15:40:13 +0800 Subject: [PATCH 09/12] style: optimize select dropdown show in rtl (#22984) --- components/select/style/rtl.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/select/style/rtl.less b/components/select/style/rtl.less index 1c7269cfd2..8400c73253 100644 --- a/components/select/style/rtl.less +++ b/components/select/style/rtl.less @@ -28,7 +28,8 @@ // ========================== Popup ========================== &-dropdown { &-rtl { - direction: rtl; + direction: ltr; + text-align: right; } } From c6a1c3f7435eb09320ca62b8f44d995d67f25ca5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Tue, 7 Apr 2020 15:41:05 +0800 Subject: [PATCH 10/12] :white_check_mark: test TransButton focus and blur (#22979) --- components/_util/__tests__/util.test.js | 3 +++ components/_util/transButton.tsx | 8 ++++++++ 2 files changed, 11 insertions(+) diff --git a/components/_util/__tests__/util.test.js b/components/_util/__tests__/util.test.js index 2896266144..7cab053d1e 100644 --- a/components/_util/__tests__/util.test.js +++ b/components/_util/__tests__/util.test.js @@ -9,8 +9,11 @@ import Wave from '../wave'; import TransButton from '../transButton'; import openAnimation from '../openAnimation'; import { sleep } from '../../../tests/utils'; +import focusTest from '../../../tests/shared/focusTest'; describe('Test utils function', () => { + focusTest(TransButton); + it('throttle function should work', async () => { const callback = jest.fn(); const throttled = throttleByAnimationFrame(callback); diff --git a/components/_util/transButton.tsx b/components/_util/transButton.tsx index 33199b7a20..11d153b4ad 100644 --- a/components/_util/transButton.tsx +++ b/components/_util/transButton.tsx @@ -8,6 +8,7 @@ import KeyCode from 'rc-util/lib/KeyCode'; interface TransButtonProps extends React.HTMLAttributes { onClick?: (e?: React.MouseEvent) => void; noStyle?: boolean; + autoFocus?: boolean; } const inlineStyle: React.CSSProperties = { @@ -23,6 +24,13 @@ class TransButton extends React.Component { lastKeyCode?: number; + componentDidMount() { + const { autoFocus } = this.props; + if (autoFocus) { + this.focus(); + } + } + onKeyDown: React.KeyboardEventHandler = event => { const { keyCode } = event; if (keyCode === KeyCode.ENTER) { From 763f7a8a7393bcabfd5cd24523beaa79887a09e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Tue, 7 Apr 2020 15:41:16 +0800 Subject: [PATCH 11/12] style: :lipstick: tweak Select cuosor position (#22978) close #22906 --- components/select/style/multiple.less | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/components/select/style/multiple.less b/components/select/style/multiple.less index 8d03f93abd..229ac582e8 100644 --- a/components/select/style/multiple.less +++ b/components/select/style/multiple.less @@ -112,6 +112,11 @@ white-space: nowrap; visibility: hidden; } + + // https://github.com/ant-design/ant-design/issues/22906 + &:first-child .@{select-prefix-cls}-selection-search-input { + margin-left: 6.5px; + } } // ======================= Placeholder ======================= @@ -144,6 +149,7 @@ .@{select-prefix-cls}-selection-search { height: @select-selection-height + @select-multiple-padding; + line-height: @select-selection-height + @select-multiple-padding; &-input, &-mirror { @@ -162,6 +168,10 @@ .@{select-prefix-cls}-selection-placeholder { left: @input-padding-horizontal-sm; } + // https://github.com/ant-design/ant-design/issues/22906 + .@{select-prefix-cls}-selection-search:first-child .@{select-prefix-cls}-selection-search-input { + margin-left: 3px; + } } &.@{select-prefix-cls}-lg { .@{select-prefix-cls}-selection-item { From b0f0a3286597344c5cbaa66f8d5d5f2b85caba2a Mon Sep 17 00:00:00 2001 From: zombiej Date: Tue, 7 Apr 2020 20:43:19 +0800 Subject: [PATCH 12/12] docs: Form doc add version column --- components/form/index.en-US.md | 48 +++++++++++++++++----------------- components/form/index.zh-CN.md | 48 +++++++++++++++++----------------- 2 files changed, 48 insertions(+), 48 deletions(-) diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index 072e70bbc5..094003be24 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -67,30 +67,30 @@ const validateMessages = { Form field component for data bidirectional binding, validation, layout, and so on. -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| colon | Used with `label`, whether to display `:` after label text. | boolean | true | -| dependencies | Set the dependency field. See [below](#dependencies) | [NamePath](#NamePath)[] | - | -| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time | string\|ReactNode | - | -| getValueFromEvent | Specify how to get value from event or other onChange arguments | (..args: any[]) => any | - | -| 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 | - | -| noStyle | No style for `true`, used as a pure field control | boolean | false | -| label | Label text | string\|ReactNode | - | -| labelAlign | text align of label | `left` \| `right` | `right` | -| 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) | - | -| normalize | Normalize value to form component | (value, prevValue, prevValues) => any | - | -| required | Whether provided or not, it will be generated by the validation rule | boolean | false | -| rules | Rules for field validation. Click [here](#components-form-demo-basic) to see an example | [Rule](#Rule)[] | - | -| shouldUpdate | Custom field update logic. See [below](#shouldUpdate) | boolean \| (prevValue, curValue) => boolean | false | -| trigger | When to collect the value of children node | string | onChange | -| validateFirst | Whether stop validate on first rule of error for this field | boolean | false | -| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | - | -| validateTrigger | When to validate the value of children node | string \| string[] | onChange | -| valuePropName | Props of children node, for example, the prop of Switch is 'checked' | string | 'value' | -| wrapperCol | The layout for input controls, same as `labelCol`. You can set `wrapperCol` on Form. If both exists, use Item first | [object](/components/grid/#Col) | - | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| colon | Used with `label`, whether to display `:` after label text. | boolean | true | | +| dependencies | Set the dependency field. See [below](#dependencies) | [NamePath](#NamePath)[] | - | | +| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time | string\|ReactNode | - | | +| getValueFromEvent | Specify how to get value from event or other onChange arguments | (..args: any[]) => any | - | | +| 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 | - | | +| noStyle | No style for `true`, used as a pure field control | boolean | false | | +| label | Label text | string\|ReactNode | - | | +| labelAlign | text align of label | `left` \| `right` | `right` | | +| 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) | - | | +| normalize | Normalize value to form component | (value, prevValue, prevValues) => any | - | | +| required | Whether provided or not, it will be generated by the validation rule | boolean | false | | +| rules | Rules for field validation. Click [here](#components-form-demo-basic) to see an example | [Rule](#Rule)[] | - | | +| shouldUpdate | Custom field update logic. See [below](#shouldUpdate) | boolean \| (prevValue, curValue) => boolean | false | | +| trigger | When to collect the value of children node | string | onChange | | +| validateFirst | Whether stop validate on first rule of error for this field | boolean | false | | +| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | - | | +| validateTrigger | When to validate the value of children node | string \| string[] | onChange | | +| valuePropName | Props of children node, for example, the prop of Switch is 'checked' | string | 'value' | | +| wrapperCol | The layout for input controls, same as `labelCol`. You can set `wrapperCol` on Form. If both exists, use Item first | [object](/components/grid/#Col) | - | | After wrapped by `Form.Item` with `name` property, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controls, the flow of form data will be handled by Form which will cause: diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index 20ffc3039d..a6456a116a 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -68,30 +68,30 @@ const validateMessages = { 表单字段组件，用于数据双向绑定、校验、布局等。 -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| colon | 配合 `label` 属性使用，表示是否显示 `label` 后面的冒号 | boolean | true | -| dependencies | 设置依赖字段，说明[见下](#dependencies) | [NamePath](#NamePath)[] | - | -| extra | 额外的提示信息，和 `help` 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string\|ReactNode | - | -| getValueFromEvent | 设置如何将 event 的值转换成字段值 | (..args: any[]) => any | - | -| hasFeedback | 配合 `validateStatus` 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false | -| help | 提示信息，如不设置，则会根据校验规则自动生成 | string\|ReactNode | - | -| htmlFor | 设置子元素 label `htmlFor` 属性 | string | - | -| noStyle | 为 `true` 时不带样式，作为纯字段控件使用 | boolean | false | -| label | `label` 标签的文本 | string\|ReactNode | - | -| labelAlign | 标签文本对齐方式 | `left` \| `right` | `right` | -| labelCol | `label` 标签布局，同 `` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`。你可以通过 Form 的 `labelCol` 进行统一设置。当和 Form 同时设置时，以 Item 为准 | [object](/components/grid/#Col) | - | -| name | 字段名，支持数组 | [NamePath](#NamePath) | - | -| normalize | 转换字段值给控件 | (value, prevValue, prevValues) => any | - | -| required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | false | -| rules | 校验规则，设置字段的校验逻辑。点击[此处](#components-form-demo-basic)查看示例 | [Rule](#Rule)[] | - | -| shouldUpdate | 自定义字段更新逻辑，说明[见下](#shouldUpdate) | boolean \| (prevValue, curValue) => boolean | false | -| trigger | 设置收集字段值变更的时机 | string | onChange | -| validateFirst | 当某一规则校验不通过时，是否停止剩下的规则的校验 | boolean | false | -| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | - | -| validateTrigger | 设置字段校验的时机 | string \| string[] | onChange | -| valuePropName | 子节点的值的属性，如 Switch 的是 'checked' | string | 'value' | -| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 `labelCol`。你可以通过 Form 的 `wrapperCol` 进行统一设置。当和 Form 同时设置时，以 Item 为准。 | [object](/components/grid/#Col) | - | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| colon | 配合 `label` 属性使用，表示是否显示 `label` 后面的冒号 | boolean | true | | +| dependencies | 设置依赖字段，说明[见下](#dependencies) | [NamePath](#NamePath)[] | - | | +| extra | 额外的提示信息，和 `help` 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string\|ReactNode | - | | +| getValueFromEvent | 设置如何将 event 的值转换成字段值 | (..args: any[]) => any | - | | +| hasFeedback | 配合 `validateStatus` 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false | | +| help | 提示信息，如不设置，则会根据校验规则自动生成 | string\|ReactNode | - | | +| htmlFor | 设置子元素 label `htmlFor` 属性 | string | - | | +| noStyle | 为 `true` 时不带样式，作为纯字段控件使用 | boolean | false | | +| label | `label` 标签的文本 | string\|ReactNode | - | | +| labelAlign | 标签文本对齐方式 | `left` \| `right` | `right` | | +| labelCol | `label` 标签布局，同 `` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`。你可以通过 Form 的 `labelCol` 进行统一设置。当和 Form 同时设置时，以 Item 为准 | [object](/components/grid/#Col) | - | | +| name | 字段名，支持数组 | [NamePath](#NamePath) | - | | +| normalize | 转换字段值给控件 | (value, prevValue, prevValues) => any | - | | +| required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | false | | +| rules | 校验规则，设置字段的校验逻辑。点击[此处](#components-form-demo-basic)查看示例 | [Rule](#Rule)[] | - | | +| shouldUpdate | 自定义字段更新逻辑，说明[见下](#shouldUpdate) | boolean \| (prevValue, curValue) => boolean | false | | +| trigger | 设置收集字段值变更的时机 | string | onChange | | +| validateFirst | 当某一规则校验不通过时，是否停止剩下的规则的校验 | boolean | false | | +| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | - | | +| validateTrigger | 设置字段校验的时机 | string \| string[] | onChange | | +| valuePropName | 子节点的值的属性，如 Switch 的是 'checked' | string | 'value' | | +| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 `labelCol`。你可以通过 Form 的 `wrapperCol` 进行统一设置。当和 Form 同时设置时，以 Item 为准。 | [object](/components/grid/#Col) | - | | 被设置了 `name` 属性的 `Form.Item` 包装的控件，表单控件会自动添加 `value`（或 `valuePropName` 指定的其他属性） `onChange`（或 `trigger` 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：