feat: select sort support search (#49352)

* feat: select filter support sort param

* docs: update demo to fix lint

---------

Co-authored-by: 闲夕 <shizexian.szx@antgroup.com>
This commit is contained in:
MadCcc 2024-06-21 09:52:07 +08:00 committed by GitHub
parent 3d29c9e2a6
commit a5d308b408
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 6 additions and 7 deletions

View File

@ -1,12 +1,11 @@
import React from 'react';
import type { SelectProps } from 'antd';
import { Select, Space } from 'antd';
const handleChange = (value: string[]) => {
console.log(`selected ${value}`);
};
const options: SelectProps['options'] = [
const options = [
{
label: 'China',
value: 'china',

View File

@ -92,7 +92,7 @@ Common props ref[Common props](/docs/react/common-props)
| dropdownStyle | The style of dropdown menu | CSSProperties | - | |
| fieldNames | Customize node label, value, optionsgroupLabel field name | object | { label: `label`, value: `value`, options: `options`, groupLabel: `label` } | 4.17.0 (`groupLabel` added in 5.6.0) |
| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded | boolean \| function(inputValue, option) | true | |
| filterSort | Sort function for search options sorting, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction | (optionA: Option, optionB: Option) => number | - | 4.9.0 |
| filterSort | Sort function for search options sorting, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction | (optionA: Option, optionB: Option, info: { searchValue: string }) => number | - | `searchValue`: 5.19.0 |
| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative. [Example](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body | |
| 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 | |

View File

@ -93,7 +93,7 @@ return (
| dropdownStyle | 下拉菜单的 style 属性 | CSSProperties | - | |
| fieldNames | 自定义节点 label、value、options、groupLabel 的字段 | object | { label: `label`, value: `value`, options: `options`, groupLabel: `label` } | 4.17.0`groupLabel` 在 5.6.0 新增) |
| filterOption | 是否根据输入项进行筛选。当其为一个函数时,会接收 `inputValue` `option` 两个参数,当 `option` 符合筛选条件时,应返回 true反之则返回 false。[示例](#select-demo-search) | boolean \| function(inputValue, option) | true | |
| filterSort | 搜索时对筛选结果项的排序函数, 类似[Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)里的 compareFunction | (optionA: Option, optionB: Option) => number | - | 4.9.0 |
| filterSort | 搜索时对筛选结果项的排序函数, 类似[Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)里的 compareFunction | (optionA: Option, optionB: Option, info: { searchValue: string }) => number | - | `searchValue`: 5.19.0 |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body | |
| labelInValue | 是否把每个选项的 label 包装到 value 中,会把 Select 的 value 类型从 `string` 变为 { value: string, label: ReactNode } 的格式 | boolean | false | |
| listHeight | 设置弹窗滚动高度 | number | 256 | |

View File

@ -130,7 +130,7 @@
"copy-to-clipboard": "^3.3.3",
"dayjs": "^1.11.11",
"qrcode.react": "^3.1.0",
"rc-cascader": "~3.26.0",
"rc-cascader": "~3.27.0",
"rc-checkbox": "~3.3.0",
"rc-collapse": "~3.7.3",
"rc-dialog": "~9.5.2",
@ -150,7 +150,7 @@
"rc-rate": "~2.13.0",
"rc-resize-observer": "^1.4.0",
"rc-segmented": "~2.3.0",
"rc-select": "~14.14.0",
"rc-select": "~14.15.0",
"rc-slider": "~10.6.2",
"rc-steps": "~6.0.1",
"rc-switch": "~4.1.0",
@ -159,7 +159,7 @@
"rc-textarea": "~1.7.0",
"rc-tooltip": "~6.2.0",
"rc-tree": "~5.8.8",
"rc-tree-select": "~5.21.0",
"rc-tree-select": "~5.22.0",
"rc-upload": "~4.5.2",
"rc-util": "^5.43.0",
"scroll-into-view-if-needed": "^3.1.0",