mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-01 11:39:28 +08:00
Merge pull request #26883 from ant-design/feature-merge-master
chore: feature merge master
This commit is contained in:
二货机器人
GitHub
commit
0a3369c0eb
16
.github/workflows/auto-close.yml
vendored
Normal file
16
.github/workflows/auto-close.yml
vendored
Normal file
@ -0,0 +1,16 @@
|
||||
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 会被自动关闭。"
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user