未验证 提交 0a3369c0 编写于 作者: 二货机器人 提交者: GitHub

Merge pull request #26883 from ant-design/feature-merge-master

chore: feature merge master
name: 🧐 Auto Closer
on:
issues:
types: [labeled]
jobs:
close-by-label:
runs-on: ubuntu-latest
if: github.event.label.name == '3.x'
steps:
- name: Comment on issue
uses: peter-evans/close-issue@v1
with:
comment: "Hi @${{ github.event.issue.user.login }},<br />Current branch is off the maintenance period. We may not accept pull request or fix bug with it anymore. This topic will be auto closed.<br /><br />你好 @${{ github.event.issue.user.login }},<br />当前分支已经过了维护期。我们不会再接受对其的相关 PR issue。当前 topic 会被自动关闭。"
\ No newline at end of file
......@@ -12,6 +12,17 @@ Array [
role="separator"
style="border-color:#7cb305"
/>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center ant-divider-dashed"
role="separator"
style="border-color:#7cb305"
>
<span
class="ant-divider-inner-text"
>
Text
</span>
</div>,
<div
class="ant-divider ant-divider-vertical"
role="separator"
......
......@@ -21,6 +21,9 @@ ReactDOM.render(
<>
<Divider style={{ borderWidth: 2, borderColor: '#7cb305' }} />
<Divider style={{ borderColor: '#7cb305' }} dashed />
<Divider style={{ borderColor: '#7cb305' }} dashed>
Text
</Divider>
<Divider type="vertical" style={{ height: 60, borderColor: '#7cb305' }} />
<Divider type="vertical" style={{ height: 60, borderColor: '#7cb305' }} dashed />
</>,
......
......@@ -35,13 +35,18 @@
font-size: @font-size-lg;
white-space: nowrap;
text-align: center;
border-color: @divider-color;
border-top: 0;
&::before,
&::after {
position: relative;
top: 50%;
width: 50%;
border-top: 1px solid @divider-color;
border-top: 1px solid transparent;
// Chrome not accept `inherit` in `border-top`
border-top-color: inherit;
border-bottom: 0;
transform: translateY(50%);
content: '';
}
......
......@@ -5612,7 +5612,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
class="ant-col ant-col-6 ant-form-item-label"
>
<label
class=""
class="ant-form-item-required"
for="validate_other_radio-button"
title="Radio.Button"
>
......
......@@ -120,7 +120,11 @@ const Demo = () => {
</Radio.Group>
</Form.Item>
<Form.Item name="radio-button" label="Radio.Button">
<Form.Item
name="radio-button"
label="Radio.Button"
rules={[{ required: true, message: 'Please pick an item!' }]}
>
<Radio.Group>
<Radio.Button value="a">item 1</Radio.Button>
<Radio.Button value="b">item 2</Radio.Button>
......
......@@ -84,22 +84,10 @@ Form field component for data bidirectional binding, validation, layout, and so
| noStyle | No style for `true`, used as a pure field control | boolean | false | |
| label | Label text | string \| ReactNode | - | |
| labelAlign | The 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 `<Col>`. You can set `labelCol` on Form. If both exists, use Item first | [object](/components/grid/#Col) | - | |
| messageVariables | default validate filed info | Record<string, string> | - | 4.7.0 |
| name | Field name, support array | [NamePath](#NamePath) | - | |
| normalize | Normalize value from component value before passing to Form instance | (value, prevValue, prevValues) => any | - | |
| preserve | Keep field value even when field removed | boolean | true | 4.4.0 |
| required | Display required style. 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 | |
| tooltip | Config tooltip info | ReactNode \| [TooltipProps & { icon: ReactNode }](/components/tooltip#API) | - | 4.7.0 |
| trigger | When to collect the value of children node | string | `onChange` | |
| validateFirst | Whether stop validate on first rule of error for this field. Will parallel validate when `parallel` cofigured | boolean \| `parallel` | false | `parallel`: 4.5.0 |
| 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'. This prop is an encapsulation of `getValueProps`, which will be invalid after customizing `getValueProps` | 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) | - | |
| hidden | Whether to hide Form.Item (still collect and validate value) | boolean | false | |
<<<<<<< HEAD | 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 `<Col>`. You can set `labelCol` on Form. If both exists, use Item first | [object](/components/grid/#Col) | - | | | messageVariables | default validate filed info | Record<string, string> | - | 4.7.0 | ======= | 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 `<Col>`. You can set `labelCol` on Form which will not affect nest Item. If both exists, use Item first | [object](/components/grid/#Col) | - | |
> > > > > > > origin/master | name | Field name, support array | [NamePath](#NamePath) | - | | | normalize | Normalize value from component value before passing to Form instance | (value, prevValue, prevValues) => any | - | | | preserve | Keep field value even when field removed | boolean | true | 4.4.0 | | required | Display required style. 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 | | | tooltip | Config tooltip info | ReactNode \| [TooltipProps & { icon: ReactNode }](/components/tooltip#API) | - | 4.7.0 | | trigger | When to collect the value of children node | string | `onChange` | | | validateFirst | Whether stop validate on first rule of error for this field. Will parallel validate when `parallel` cofigured | boolean \| `parallel` | false | `parallel`: 4.5.0 | | 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'. This prop is an encapsulation of `getValueProps`, which will be invalid after customizing `getValueProps` | string | `value` | | | wrapperCol | The layout for input controls, same as `labelCol`. You can set `wrapperCol` on Form which will not affect nest Item. If both exists, use Item first | [object](/components/grid/#Col) | - | | | hidden | Whether to hide Form.Item (still collect and validate value) | boolean | false | |
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:
......@@ -393,6 +381,25 @@ In each `onFieldsChange`, you will get `false` > `true` > `false` with `isFieldV
Form.List use renderProps which mean internal structure is flexible. Thus `label` and `error` can not have best place. If you want to use antd `label`, you can wrap with Form.Item instead.
### Why Form.Item `dependencies` can not work on Form.List field?
Your name path should also contain Form.List `name`:
```tsx
<Form.List name="users">
{fields =>
fields.map(field => (
<React.Fragment key={field.key}>
<Form.Item name={[field.name, 'name']} {...someRest1} />
<Form.Item name={[field.name, 'age']} {...someRest1} />
</React.Fragment>
))
}
</Form.List>
```
dependencies should be `['users', 0, 'name']`
<style>
.site-form-item-icon {
color: rgba(0, 0, 0, 0.25);
......
......@@ -85,22 +85,10 @@ const validateMessages = {
| noStyle | 为 `true` 时不带样式,作为纯字段控件使用 | boolean | false | |
| label | `label` 标签的文本 | string \| ReactNode | - | |
| labelAlign | 标签文本对齐方式 | `left` \| `right` | `right` | |
| labelCol | `label` 标签布局,同 `<Col>` 组件,设置 `span` `offset` 值,如 `{span: 3, offset: 12}``sm: {span: 3, offset: 12}`。你可以通过 Form 的 `labelCol` 进行统一设置。当和 Form 同时设置时,以 Item 为准 | [object](/components/grid/#Col) | - | |
| messageVariables | 默认验证字段的信息 | Record<string, string> | - | 4.7.0 |
| name | 字段名,支持数组 | [NamePath](#NamePath) | - | |
| preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 |
| normalize | 组件获取值后进行转换,再放入 Form 中 | (value, prevValue, prevValues) => any | - | |
| required | 必填样式设置。如不设置,则会根据校验规则自动生成 | boolean | false | |
| rules | 校验规则,设置字段的校验逻辑。点击[此处](#components-form-demo-basic)查看示例 | [Rule](#Rule)[] | - | |
| shouldUpdate | 自定义字段更新逻辑,说明[见下](#shouldUpdate) | boolean \| (prevValue, curValue) => boolean | false | |
| tooltip | 配置提示信息 | ReactNode \| [TooltipProps & { icon: ReactNode }](/components/tooltip#API) | - | 4.7.0 |
| trigger | 设置收集字段值变更的时机 | string | `onChange` | |
| validateFirst | 当某一规则校验不通过时,是否停止剩下的规则的校验。设置 `parallel` 时会并行校验 | boolean \| `parallel` | false | `parallel`: 4.5.0 |
| validateStatus | 校验状态,如不设置,则会根据校验规则自动生成,可选:'success' 'warning' 'error' 'validating' | string | - | |
| validateTrigger | 设置字段校验的时机 | string \| string[] | `onChange` | |
| valuePropName | 子节点的值的属性,如 Switch 的是 'checked'。该属性为 `getValueProps` 的封装,自定义 `getValueProps` 后会失效 | string | `value` | |
| wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 `labelCol`。你可以通过 Form 的 `wrapperCol` 进行统一设置。当和 Form 同时设置时,以 Item 为准 | [object](/components/grid/#Col) | - | |
| hidden | 是否隐藏字段(依然会收集和校验字段) | boolean | false | |
<<<<<<< HEAD | labelCol | `label` 标签布局 `<Col>` 组件,设置 `span` `offset` 值,如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`。你可以通过 Form 的 `labelCol` 进行统一设置。当和 Form 同时设置时,以 Item 为准 | [object](/components/grid/#Col) | - | | | messageVariables | 默认验证字段的信息 | Record<string, string> | - | 4.7.0 | ======= | labelCol | `label` 标签布局,同 `<Col>` 组件,设置 `span` `offset` 值,如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`。你可以通过 Form 的 `labelCol` 进行统一设置,不会作用于嵌套 Item。当和 Form 同时设置时,以 Item 为准 | [object](/components/grid/#Col) | - | |
> > > > > > > origin/master | name | 字段名,支持数组 | [NamePath](#NamePath) | - | | | preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 | | normalize | 组件获取值后进行转换,再放入 Form 中 | (value, prevValue, prevValues) => any | - | | | required | 必填样式设置。如不设置,则会根据校验规则自动生成 | boolean | false | | | rules | 校验规则,设置字段的校验逻辑。点击[此处](#components-form-demo-basic)查看示例 | [Rule](#Rule)[] | - | | | shouldUpdate | 自定义字段更新逻辑,说明[见下](#shouldUpdate) | boolean \| (prevValue, curValue) => boolean | false | | | tooltip | 配置提示信息 | ReactNode \| [TooltipProps & { icon: ReactNode }](/components/tooltip#API) | - | 4.7.0 | | trigger | 设置收集字段值变更的时机 | string | `onChange` | | | validateFirst | 当某一规则校验不通过时,是否停止剩下的规则的校验。设置 `parallel` 时会并行校验 | boolean \| `parallel` | false | `parallel`: 4.5.0 | | validateStatus | 校验状态,如不设置,则会根据校验规则自动生成,可选:'success' 'warning' 'error' 'validating' | string | - | | | validateTrigger | 设置字段校验的时机 | string \| string[] | `onChange` | | | valuePropName | 子节点的值的属性,如 Switch 的是 'checked'。该属性为 `getValueProps` 的封装,自定义 `getValueProps` 后会失效 | string | `value` | | | wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 `labelCol`。你可以通过 Form 的 `wrapperCol` 进行统一设置,不会作用于嵌套 Item。当和 Form 同时设置时,以 Item 为准 | [object](/components/grid/#Col) | - | | | hidden | 是否隐藏字段(依然会收集和校验字段) | boolean | false | |
被设置了 `name` 属性的 `Form.Item` 包装的控件,表单控件会自动添加 `value`(或 `valuePropName` 指定的其他属性) `onChange`(或 `trigger` 指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:
......@@ -395,6 +383,25 @@ validator(rule, value, callback) => {
Form.List 本身是 renderProps,内部样式非常自由。因而默认配置 `label` 和 `error` 节点很难与之配合。如果你需要 antd 样式的 `label`,可以通过外部包裹 Form.Item 来实现。
### 为什么 Form.Item 的 `dependencies` 对 Form.List 下的字段没有效果?
Form.List 下的字段需要包裹 Form.List 本身的 `name`,比如:
```tsx
<Form.List name="users">
{fields =>
fields.map(field => (
<React.Fragment key={field.key}>
<Form.Item name={[field.name, 'name']} {...someRest1} />
<Form.Item name={[field.name, 'age']} {...someRest1} />
</React.Fragment>
))
}
</Form.List>
```
依赖则是:`['users', 0, 'name']`
<style>
.site-form-item-icon {
color: rgba(0, 0, 0, 0.25);
......
......@@ -244,6 +244,17 @@
}
}
}
// RadioGroup
.@{ant-prefix}-radio-button-wrapper {
border-color: @error-color !important;
&:not(:first-child) {
&::before {
background-color: @error-color;
}
}
}
}
// ====================== Validating =======================
......
......@@ -108063,7 +108063,7 @@ exports[`Locale Provider should display the text as hu 1`] = `
tabindex="-1"
type="button"
>
szept
szept.
</button>
<button
class="ant-picker-year-btn"
......@@ -110120,7 +110120,7 @@ exports[`Locale Provider should display the text as hu 1`] = `
tabindex="-1"
type="button"
>
szept
szept.
</button>
<button
class="ant-picker-year-btn"
......@@ -110658,7 +110658,7 @@ exports[`Locale Provider should display the text as hu 1`] = `
tabindex="-1"
type="button"
>
okt
okt.
</button>
<button
class="ant-picker-year-btn"
......@@ -111677,9 +111677,9 @@ exports[`Locale Provider should display the text as hu 1`] = `
</span>
<span
class="ant-select-selection-item"
title="szept"
title="szept."
>
szept
szept.
</span>
</div>
<span
......@@ -64,7 +64,7 @@ Almost anything can be represented in a tree structure. Examples include directo
| disableCheckbox | Disables the checkbox of the treeNode | boolean | false | |
| disabled | Disables the treeNode | boolean | false | |
| icon | Customize icon. When you pass component, whose render will receive full TreeNode props as component props | ReactNode \| (props) => ReactNode | - | |
| isLeaf | Determines if this is a leaf node(effective when `loadData` is specified) | boolean | false | |
| isLeaf | Determines if this is a leaf node(effective when `loadData` is specified). `false` will force trade TreeNode as a parent node | boolean | - | |
| key | Used with (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. P.S.: It must be unique in all of treeNodes of the tree | string | (internal calculated position of treeNode) | |
| selectable | Set whether the treeNode can be selected | boolean | true | |
| title | Title | string \| ReactNode | `---` | |
......
......@@ -65,7 +65,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg
| disableCheckbox | 禁掉 checkbox | boolean | false |
| disabled | 禁掉响应 | boolean | false |
| icon | 自定义图标。可接收组件,props 为当前节点 props | ReactNode \| (props) => ReactNode | - | |
| isLeaf | 设置为叶子节点(设置了`loadData`时有效) | boolean | false |
| isLeaf | 设置为叶子节点(设置了`loadData`时有效)。为 `false` 时会强制将其作为父节点 | boolean | - |
| key | 被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意:整个树范围内的所有节点的 key 值不能重复! | string | (内部计算出的节点位置) |
| selectable | 设置节点是否可被选中 | boolean | true |
| title | 标题 | string \| ReactNode | `---` |
......
......@@ -93,6 +93,7 @@
a&,
a {
.operation-unit();
text-decoration: @link-decoration;
&:active,
&:hover {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册