From 57521a01e929970f8f80ec79b2f923748dfcbf0d Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Tue, 2 Jan 2024 17:41:50 +0800 Subject: [PATCH] feat: Select support maxCount prop (#46667) * feat: Select support maxCount prop * fix: fix snap * chore: fix * fix: fix * fix: fix * rename: .tsx => .ts * docs: update docs * Update components/select/demo/maxCount.md Co-authored-by: MadCcc Signed-off-by: lijianan <574980606@qq.com> * Revert "rename: .tsx => .ts" This reverts commit c9c5f5acbe7ee05f4e20fc6d4c5d052c16acb8c7. * fix: update rc-select * Update components/select/demo/maxCount.md Co-authored-by: MadCcc Signed-off-by: lijianan <574980606@qq.com> * Update components/select/index.tsx Co-authored-by: MadCcc Signed-off-by: lijianan <574980606@qq.com> * update demo --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: MadCcc --- .../__snapshots__/demo-extend.test.ts.snap | 291 ++++++++++++++++++ .../__snapshots__/demo.test.tsx.snap | 121 ++++++++ components/select/__tests__/index.test.tsx | 15 +- components/select/demo/maxCount.md | 7 + components/select/demo/maxCount.tsx | 43 +++ components/select/index.en-US.md | 2 + components/select/index.tsx | 8 + components/select/index.zh-CN.md | 2 + package.json | 6 +- 9 files changed, 490 insertions(+), 5 deletions(-) create mode 100644 components/select/demo/maxCount.md create mode 100644 components/select/demo/maxCount.tsx diff --git a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap index 99789bfd3c..2581018d6c 100644 --- a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -5491,6 +5491,297 @@ exports[`renders components/select/demo/label-in-value.tsx extend context correc exports[`renders components/select/demo/label-in-value.tsx extend context correctly 2`] = `[]`; +exports[`renders components/select/demo/maxCount.tsx extend context correctly 1`] = ` +
+
+
+
+ + + Ava Swift + + + +
+
+
+ + +
+
+
+
+
+
+
+
+ Ava Swift +
+
+ Cole Reed +
+
+
+
+
+
+
+
+ Ava Swift +
+ +
+
+
+ Cole Reed +
+
+
+
+ Mia Blake +
+
+
+
+ Jake Stone +
+
+
+
+ Lily Lane +
+
+
+
+ Ryan Chase +
+
+
+
+ Zoe Fox +
+
+
+
+ Alex Grey +
+
+
+
+ Elle Blair +
+
+
+
+
+
+
+
+ +
+`; + +exports[`renders components/select/demo/maxCount.tsx extend context correctly 2`] = `[]`; + exports[`renders components/select/demo/multiple.tsx extend context correctly 1`] = `
`; +exports[`renders components/select/demo/maxCount.tsx correctly 1`] = ` +
+
+
+
+ + + Ava Swift + + + +
+
+
+ + +
+
+
+
+ +
+`; + exports[`renders components/select/demo/multiple.tsx correctly 1`] = `
{ errSpy.mockRestore(); }); + + it('Select maxCount warning', () => { + resetWarned(); + const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + render( + ); +}; + +export default App; diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md index 181f0198cc..f146033b40 100644 --- a/components/select/index.en-US.md +++ b/components/select/index.en-US.md @@ -48,6 +48,7 @@ Select component to select value from options. Options label Centered Flip + Shift Component Token +Max Count ## API @@ -75,6 +76,7 @@ Common props ref：[Common props](/docs/react/common-props) | labelInValue | Whether to embed label in value, turn the format of value from `string` to { value: string, label: ReactNode } | boolean | false | | | listHeight | Config popup height | number | 256 | | | loading | Indicate loading state | boolean | false | | +| maxCount | The max number of items can be selected, only applies when `mode` is `multiple` or `tags` | number | - | 5.13.0 | | maxTagCount | Max tag count to show. `responsive` will cost render performance | number \| `responsive` | - | responsive: 4.10 | | maxTagPlaceholder | Placeholder for not showing tags | ReactNode \| function(omittedValues) | - | | | maxTagTextLength | Max tag text length to show | number | - | | diff --git a/components/select/index.tsx b/components/select/index.tsx index a5a01fdce6..33406f0fcd 100755 --- a/components/select/index.tsx +++ b/components/select/index.tsx @@ -117,6 +117,7 @@ const InternalSelect = < dropdownStyle, transitionName, tagRender, + maxCount, ...rest } = props; @@ -263,6 +264,12 @@ const InternalSelect = < ); warning.deprecated(!('bordered' in props), 'bordered', 'variant'); + + warning( + !(typeof maxCount !== 'undefined' && !isMultiple), + 'usage', + '`maxCount` only works with mode `multiple` or `tags`', + ); } // ====================== zIndex ========================= @@ -282,6 +289,7 @@ const InternalSelect = < listHeight={listHeight} listItemHeight={listItemHeight} mode={mode} + maxCount={isMultiple ? maxCount : undefined} prefixCls={prefixCls} placement={memoPlacement} direction={direction} diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md index d218c6121c..efa20c2139 100644 --- a/components/select/index.zh-CN.md +++ b/components/select/index.zh-CN.md @@ -49,6 +49,7 @@ demo: 选项文本居中 翻转+偏移 组件 Token +最大选中数量 ## API @@ -76,6 +77,7 @@ demo: | labelInValue | 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 `string` 变为 { value: string, label: ReactNode } 的格式 | boolean | false | | | listHeight | 设置弹窗滚动高度 | number | 256 | | | loading | 加载中状态 | boolean | false | | +| maxCount | 指定可选中的最多 items 数量，仅在 `mode` 为 `multiple` 或 `tags` 时生效 | number | - | 5.13.0 | | maxTagCount | 最多显示多少个 tag，响应式模式会对性能产生损耗 | number \| `responsive` | - | responsive: 4.10 | | maxTagPlaceholder | 隐藏 tag 时显示的内容 | ReactNode \| function(omittedValues) | - | | | maxTagTextLength | 最大显示的 tag 文本长度 | number | - | | diff --git a/package.json b/package.json index f99e83fe30..501e31095b 100644 --- a/package.json +++ b/package.json @@ -127,7 +127,7 @@ "copy-to-clipboard": "^3.3.3", "dayjs": "^1.11.10", "qrcode.react": "^3.1.0", - "rc-cascader": "~3.20.0", + "rc-cascader": "~3.21.0", "rc-checkbox": "~3.1.0", "rc-collapse": "~3.7.2", "rc-dialog": "~9.3.4", @@ -147,7 +147,7 @@ "rc-rate": "~2.12.0", "rc-resize-observer": "^1.4.0", "rc-segmented": "~2.2.2", - "rc-select": "~14.10.0", + "rc-select": "~14.11.0", "rc-slider": "~10.5.0", "rc-steps": "~6.0.1", "rc-switch": "~4.1.0", @@ -156,7 +156,7 @@ "rc-textarea": "~1.6.3", "rc-tooltip": "~6.1.3", "rc-tree": "~5.8.2", - "rc-tree-select": "~5.15.0", + "rc-tree-select": "~5.17.0", "rc-upload": "~4.5.2", "rc-util": "^5.38.1", "scroll-into-view-if-needed": "^3.1.0",