From fb1955573ee5a5bd43dde41856892306098311d3 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Thu, 17 Feb 2022 16:41:12 +0800 Subject: [PATCH] feat: TreeSelect support status (#34093) * feat: TreeSelect support status * chore: code clean * docs: add demo version --- .../__snapshots__/demo-extend.test.ts.snap | 25 +- .../__tests__/__snapshots__/demo.test.js.snap | 25 +- .../__snapshots__/demo-extend.test.ts.snap | 243 ++++++++++++++++++ .../__tests__/__snapshots__/demo.test.js.snap | 123 +++++++++ components/tree-select/demo/status.md | 33 +++ components/tree-select/index.en-US.md | 1 + components/tree-select/index.tsx | 16 ++ components/tree-select/index.zh-CN.md | 1 + components/tree-select/style/index.tsx | 2 +- 9 files changed, 466 insertions(+), 3 deletions(-) create mode 100644 components/tree-select/demo/status.md diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap index 4d50418bc6..93ee9fb299 100644 --- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -18836,7 +18836,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc class="ant-form-item-control-input-content" >
+ + + + +
diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap index 26f1110f36..55159464ff 100644 --- a/components/form/__tests__/__snapshots__/demo.test.js.snap +++ b/components/form/__tests__/__snapshots__/demo.test.js.snap @@ -8012,7 +8012,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = ` class="ant-form-item-control-input-content" >
+ + + + +
diff --git a/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap index 3cc9b89f0f..6524f9010c 100644 --- a/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1571,6 +1571,249 @@ Array [ ] `; +exports[`renders ./components/tree-select/demo/status.md extend context correctly 1`] = ` +
+
+
+
+ + + + + Error + +
+
+
+
+
+
+
+ + + + + + + + + +
+
+ No Data +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +
+
+
+ + Warning multiple + +
+
+
+
+
+
+
+ + + + + + + + + +
+
+ No Data +
+
+
+
+
+
+
+
+
+`; + exports[`renders ./components/tree-select/demo/suffix.md extend context correctly 1`] = `
+
+
+
+ + + + + Error + +
+ +
+
+
+
+
+
+
+
+ + +
+
+
+ + Warning multiple + +
+
+
+
+`; + exports[`renders ./components/tree-select/demo/suffix.md correctly 1`] = `
( + + + + +); + +ReactDOM.render(, mountNode); +``` diff --git a/components/tree-select/index.en-US.md b/components/tree-select/index.en-US.md index 26b98c41ba..4a8a49c1c0 100644 --- a/components/tree-select/index.en-US.md +++ b/components/tree-select/index.en-US.md @@ -43,6 +43,7 @@ Tree selection control. | showCheckedStrategy | The way show selected item in box when `treeCheckable` set. **Default:** just show child nodes. **`TreeSelect.SHOW_ALL`:** show all checked treeNodes (include parent treeNode). **`TreeSelect.SHOW_PARENT`:** show checked treeNodes (just show parent treeNode) | `TreeSelect.SHOW_ALL` \| `TreeSelect.SHOW_PARENT` \| `TreeSelect.SHOW_CHILD` | `TreeSelect.SHOW_CHILD` | | | showSearch | Support search or not | boolean | single: false \| multiple: true | | | size | To set the size of the select input | `large` \| `middle` \| `small` | - | | +| status | Set validation status | 'error' \| 'warning' | - | 4.19.0 | | suffixIcon | The custom suffix icon,you must set `showArrow` to `true` manually in multiple selection mode | ReactNode | - | | | switcherIcon | customize collapse \| expand icon of tree node | ReactNode | - | | | tagRender | Customize tag render when `multiple` | (props) => ReactNode | - | | diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx index 16f3f95a4a..16d7f27186 100644 --- a/components/tree-select/index.tsx +++ b/components/tree-select/index.tsx @@ -10,6 +10,7 @@ import classNames from 'classnames'; import omit from 'rc-util/lib/omit'; import type { BaseOptionType, DefaultOptionType } from 'rc-tree-select/lib/TreeSelect'; import type { BaseSelectRef } from 'rc-select'; +import { useContext } from 'react'; import { ConfigContext } from '../config-provider'; import devWarning from '../_util/devWarning'; import { AntTreeNodeProps, TreeProps } from '../tree'; @@ -17,6 +18,8 @@ import getIcons from '../select/utils/iconUtil'; import renderSwitcherIcon from '../tree/utils/iconUtil'; import SizeContext, { SizeType } from '../config-provider/SizeContext'; import { getTransitionName, getTransitionDirection, SelectCommonPlacement } from '../_util/motion'; +import { FormItemStatusContext } from '../form/context'; +import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils'; type RawValue = string | number; @@ -46,6 +49,7 @@ export interface TreeSelectProps< placement?: SelectCommonPlacement; bordered?: boolean; treeLine?: TreeProps['showLine']; + status?: InputStatus; } const InternalTreeSelect = ( @@ -67,6 +71,8 @@ const InternalTreeSelect = , ref: React.Ref, @@ -96,11 +102,19 @@ const InternalTreeSelect = ); }; diff --git a/components/tree-select/index.zh-CN.md b/components/tree-select/index.zh-CN.md index 70c63e0b49..83e6179403 100644 --- a/components/tree-select/index.zh-CN.md +++ b/components/tree-select/index.zh-CN.md @@ -44,6 +44,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg | showCheckedStrategy | 配置 `treeCheckable` 时，定义选中项回填的方式。`TreeSelect.SHOW_ALL`: 显示所有选中节点(包括父节点)。`TreeSelect.SHOW_PARENT`: 只显示父节点(当父节点下所有子节点都选中时)。 默认只显示子节点 | `TreeSelect.SHOW_ALL` \| `TreeSelect.SHOW_PARENT` \| `TreeSelect.SHOW_CHILD` | `TreeSelect.SHOW_CHILD` | | | showSearch | 是否支持搜索框 | boolean | 单选：false \| 多选：true | | | size | 选择框大小 | `large` \| `middle` \| `small` | - | | +| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 | | suffixIcon | 自定义的选择框后缀图标, 多选模式下必须同时设置 `showArrow` 为 true | ReactNode | - | | | switcherIcon | 自定义树节点的展开/折叠图标 | ReactNode | - | | | tagRender | 自定义 tag 内容，多选时生效 | (props) => ReactNode | - | | diff --git a/components/tree-select/style/index.tsx b/components/tree-select/style/index.tsx index 3365572fd9..def4cc2b8c 100644 --- a/components/tree-select/style/index.tsx +++ b/components/tree-select/style/index.tsx @@ -2,6 +2,6 @@ import '../../style/index.less'; import './index.less'; // style dependencies -// deps-lint-skip: tree +// deps-lint-skip: tree, form import '../../select/style'; import '../../empty/style';