Skip to content

Commit

Permalink
feat(next/antd): add valueType props in SelectTable (#2865)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ifblooms
ifblooms authored Feb 25, 2022
1 parent 25c1264 commit d7eb3df
Show file tree
Hide file tree
Showing 11 changed files with 629 additions and 155 deletions.
3 changes: 2 additions & 1 deletion packages/antd/docs/components/SelectTable.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -604,7 +604,8 @@ export default () => (
| Property name | Type | Description | Default value |
| ------------- | -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| mode | `'multiple' \| 'single'` | Set mode of SelectTable | `'multiple'` |
| optionAsValue | boolean | use `option` as value | false |
| valueType | `'all' \| 'parent' \| 'child' \| 'path'` | value type, Only applies when checkStrictly is set to `false` | `'all'` |
| optionAsValue | boolean | use `option` as value, Only applies when valueType is not set to `'path'` | false |
| showSearch | boolean | show `Search` component | false |
| searchProps | object | `Search` component props | - |
| primaryKey | `string \| (record) => string` | Row's unique key | `'key'` |
Expand Down
3 changes: 2 additions & 1 deletion packages/antd/docs/components/SelectTable.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -600,7 +600,8 @@ export default () => (
| 属性名 | 类型 | 描述 | 默认值 |
| ------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------ |
| mode | `'multiple' \| 'single'` | 设置 SelectTable 模式为单选或多选 | `'multiple'` |
| optionAsValue | boolean | 使用表格行数据作为值 | false |
| valueType | `'all' \| 'parent' \| 'child' \| 'path'` | 返回值类型，checkStrictly 设置为 `false` 时有效 | `'all'` |
| optionAsValue | boolean | 使用表格行数据作为值，valueType 值为 `'path'` 时无效 | false |
| showSearch | boolean | 是否显示搜索组件 | false |
| searchProps | object | Search 组件属性 | - |
| primaryKey | `string \| (record) => string` | 表格行 key 的取值 | `'key'` |
Expand Down
54 changes: 30 additions & 24 deletions packages/antd/src/select-table/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useState, useMemo } from 'react'
import React, { useState, useMemo } from 'react'
import { observer, useFieldSchema, useField, Schema } from '@formily/react'
import cls from 'classnames'
import { isArr, isBool, isFn } from '@formily/shared'
Expand All @@ -8,6 +8,7 @@ import { SearchProps } from 'antd/lib/input'
import { useFilterOptions } from './useFilterOptions'
import { useFlatOptions } from './useFlatOptions'
import { useSize } from './useSize'
import { getUISelected, getOutputData } from './utils'
import { usePrefixCls } from '../__builtins__'

const { Search } = Input
Expand All @@ -24,6 +25,7 @@ export interface ISelectTableProps extends TableProps<any> {
mode?: 'multiple' | 'single'
dataSource?: any[]
optionAsValue?: boolean
valueType: 'all' | 'parent' | 'child' | 'path'
showSearch?: boolean
searchProps?: SearchProps
primaryKey?: string | ((record: any) => string)
Expand Down Expand Up @@ -79,6 +81,7 @@ export const SelectTable: ComposedSelectTable = observer((props) => {
mode,
dataSource: propsDataSource,
optionAsValue,
valueType,
showSearch,
filterOption,
filterSort,
Expand All @@ -92,7 +95,6 @@ export const SelectTable: ComposedSelectTable = observer((props) => {
...otherTableProps
} = props
const prefixCls = usePrefixCls('formily-select-table', props)
const [selected, setSelected] = useState<any[]>()
const [searchValue, setSearchValue] = useState<string>()
const field = useField() as any
const loading = isBool(props.loading) ? props.loading : field.loading
Expand All @@ -105,12 +107,26 @@ export const SelectTable: ComposedSelectTable = observer((props) => {
props?.size
)
const primaryKey = isFn(rowKey) ? '__formily_key__' : rowKey
const columns = useColumns()

// dataSource
let dataSource = isArr(propsDataSource) ? propsDataSource : field.dataSource
dataSource = isFn(rowKey)
? addPrimaryKey(dataSource, rowKey, primaryKey)
: dataSource
const flatDataSource = useFlatOptions(dataSource)
const columns = useColumns()

// selected keys for Table UI
const selected = getUISelected(
value,
flatDataSource,
primaryKey,
valueType,
optionAsValue,
mode,
rowSelection?.checkStrictly,
rowKey
)

// Filter dataSource By Search
const filteredDataSource = useFilterOptions(
Expand All @@ -130,7 +146,7 @@ export const SelectTable: ComposedSelectTable = observer((props) => {
// readPretty Value
const readPrettyDataSource = useMemo(
() =>
orderedFilteredDataSource.filter((item) =>
orderedFilteredDataSource?.filter((item) =>
selected?.includes(item?.[primaryKey])
),
[orderedFilteredDataSource, selected, primaryKey]
Expand All @@ -146,16 +162,16 @@ export const SelectTable: ComposedSelectTable = observer((props) => {
if (readOnly) {
return
}
let outputOptions = records.map((item) => {
const validItem = { ...item }
delete validItem['__formily_key__']
return validItem
})
let outputValue = optionAsValue ? outputOptions : selectedRowKeys
if (mode === 'single') {
outputValue = outputValue[0]
outputOptions = outputOptions[0]
}
const { outputValue, outputOptions } = getOutputData(
selectedRowKeys,
records,
dataSource,
primaryKey,
valueType,
optionAsValue,
mode,
rowSelection?.checkStrictly
)
onChange?.(outputValue, outputOptions)
}

Expand Down Expand Up @@ -186,16 +202,6 @@ export const SelectTable: ComposedSelectTable = observer((props) => {
// Antd rowSelection type
const modeAsType: any = { multiple: 'checkbox', single: 'radio' }?.[mode]

useEffect(() => {
let inputValue = mode === 'single' ? [value] : isArr(value) ? value : []
inputValue = optionAsValue
? inputValue.map((record: any) =>
isFn(rowKey) ? rowKey(record) : record?.[primaryKey]
)
: inputValue
setSelected(inputValue)
}, [value, mode, primaryKey, rowKey])

return (
<div className={prefixCls}>
{showSearch && !readPretty ? (
Expand Down
2 changes: 1 addition & 1 deletion packages/antd/src/select-table/useFlatOptions.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const useFlatOptions = (tree: any[]) => {
const flatData = (data) => {
let list = []
data.forEach((item) => {
data?.forEach((item) => {
list = [...list, item]
if (item?.children?.length) {
list = [...list, ...flatData(item.children)]
Expand Down
Loading

0 comments on commit d7eb3df

Please sign in to comment.