Skip to content

Commit

Permalink
feat(antd/next): use full text matcha for SelectTable nd remove filte…
Browse files Browse the repository at this point in the history 
…rOptionProp
  • Loading branch information
@janryWang
janryWang committed Feb 19, 2022
1 parent 5cab5d9 commit 127e0c7
Show file tree
Hide file tree
Showing 8 changed files with 83 additions and 56 deletions.
21 changes: 10 additions & 11 deletions packages/antd/docs/components/SelectTable.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -602,17 +602,16 @@ export default () => (

### SelectTable

| Property name | Type | Description | Default value |
| ---------------- | -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| mode | `'multiple' \| 'single'` | Set mode of SelectTable | `'multiple'` |
| optionAsValue | boolean | use `option` as value | false |
| showSearch | boolean | show `Search` component | false |
| searchProps | object | `Search` component props | - |
| optionFilterProp | string | Which prop value of option will be used for filter if filterOption is true. | `primaryKey` |
| primaryKey | `string \| (record) => string` | Row's unique key | `'key'` |
| filterOption | `boolean \| (inputValue, option) => boolean` | 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 |
| filterSort | (optionA, optionB) => number | Sort function for search options sorting, see Array.sort's compareFunction | - |
| onSearch | Callback function that is fired when input changed | (inputValue) => void | - |
| Property name | Type | Description | Default value |
| ------------- | -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| mode | `'multiple' \| 'single'` | Set mode of SelectTable | `'multiple'` |
| optionAsValue | boolean | use `option` as value | false |
| showSearch | boolean | show `Search` component | false |
| searchProps | object | `Search` component props | - |
| primaryKey | `string \| (record) => string` | Row's unique key | `'key'` |
| filterOption | `boolean \| (inputValue, option) => boolean` | 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 |
| filterSort | (optionA, optionB) => number | Sort function for search options sorting, see Array.sort's compareFunction | - |
| onSearch | Callback function that is fired when input changed | (inputValue) => void | - |

`TableProps` type definition reference antd https://ant.design/components/table/

Expand Down
21 changes: 10 additions & 11 deletions packages/antd/docs/components/SelectTable.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -598,17 +598,16 @@ export default () => (

### SelectTable

| 属性名 | 类型 | 描述 | 默认值 |
| ---------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------ |
| mode | `'multiple' \| 'single'` | 设置 SelectTable 模式为单选或多选 | `'multiple'` |
| optionAsValue | boolean | 使用表格行数据作为值 | false |
| showSearch | boolean | 是否显示搜索组件 | false |
| searchProps | object | Search 组件属性 | - |
| optionFilterProp | string | 搜索时过滤对应的 option 属性 | `primaryKey` |
| primaryKey | `string \| (record) => string` | 表格行 key 的取值 | `'key'` |
| filterOption | `boolean \| (inputValue, option) => boolean` | 是否根据输入项进行筛选。当其为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false | true |
| filterSort | (optionA, optionB) => number | 搜索时对筛选结果项的排序函数, 类似 Array.sort 里的 compareFunction | - |
| onSearch | 文本框值变化时回调 | (inputValue) => void | - |
| 属性名 | 类型 | 描述 | 默认值 |
| ------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------ |
| mode | `'multiple' \| 'single'` | 设置 SelectTable 模式为单选或多选 | `'multiple'` |
| optionAsValue | boolean | 使用表格行数据作为值 | false |
| showSearch | boolean | 是否显示搜索组件 | false |
| searchProps | object | Search 组件属性 | - |
| primaryKey | `string \| (record) => string` | 表格行 key 的取值 | `'key'` |
| filterOption | `boolean \| (inputValue, option) => boolean` | 是否根据输入项进行筛选。当其为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false | true |
| filterSort | (optionA, optionB) => number | 搜索时对筛选结果项的排序函数, 类似 Array.sort 里的 compareFunction | - |
| onSearch | 文本框值变化时回调 | (inputValue) => void | - |

参考 https://ant.design/components/table-cn/

Expand Down
3 changes: 0 additions & 3 deletions packages/antd/src/select-table/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ export interface ISelectTableProps extends TableProps<any> {
optionAsValue?: boolean
showSearch?: boolean
searchProps?: SearchProps
optionFilterProp?: string
primaryKey?: string | ((record: any) => string)
filterOption?: IFilterOption
filterSort?: IFilterSort
Expand Down Expand Up @@ -82,7 +81,6 @@ export const SelectTable: ComposedSelectTable = observer((props) => {
optionAsValue,
showSearch,
filterOption,
optionFilterProp,
filterSort,
onSearch,
searchProps,
Expand Down Expand Up @@ -117,7 +115,6 @@ export const SelectTable: ComposedSelectTable = observer((props) => {
// Filter dataSource By Search
const filteredDataSource = useFilterOptions(
dataSource,
optionFilterProp || primaryKey,
searchValue,
filterOption
)
Expand Down
25 changes: 22 additions & 3 deletions packages/antd/src/select-table/useFilterOptions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,26 @@ function includes(test: React.ReactNode, search: string) {
return toArray(test).join('').toUpperCase().includes(search)
}

function includesOption(option: any, search: string) {
const searched = new Set()
const _includesOption = (option: any) => {
const keys = Object.keys(option || {})
return keys.some((key) => {
const value = option[key]
if (React.isValidElement(value)) return false
if (key !== 'children' && !searched.has(value)) {
if (typeof value === 'object') {
searched.add(value)
return _includesOption(value)
}
return includes(value, search)
}
return false
})
}
return _includesOption(option)
}

function toArray<T>(value: T | T[]): T[] {
if (isArr(value)) {
return value
Expand All @@ -16,7 +36,6 @@ function toArray<T>(value: T | T[]): T[] {

const useFilterOptions = (
options: any[],
searchKey?: string,
searchValue?: string,
filterOption?: IFilterOption
) =>
Expand All @@ -27,7 +46,7 @@ const useFilterOptions = (
const upperSearch = searchValue.toUpperCase()
const filterFunc = isFn(filterOption)
? filterOption
: (_: string, option: any) => includes(option[searchKey], upperSearch)
: (_: string, option: any) => includesOption(option, upperSearch)

const doFilter = (arr: any[]) => {
const filterArr: any[] = []
Expand All @@ -47,6 +66,6 @@ const useFilterOptions = (
}

return doFilter(options)
}, [options, searchKey, searchValue, filterOption])
}, [options, searchValue, filterOption])

export { useFilterOptions }
Loading

0 comments on commit 127e0c7

Please sign in to comment.