Skip to content

Commit b3d3eb7

Browse files
ifbloomsifblooms
authored
fix(next/antd): fix SelectTable Template literals invalid && fix FormItem classname error (#3413)
1 parent 23b94cd commit b3d3eb7

File tree

3 files changed

+179
-36
lines changed

3 files changed

+179
-36
lines changed

‎packages/antd/src/select-table/index.tsx‎

Lines changed: 86 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
import React, { useState, useMemo } from 'react'
2-
import { observer, useFieldSchema, useField, Schema } from '@formily/react'
2+
import {
3+
observer,
4+
useFieldSchema,
5+
useField,
6+
Schema,
7+
RecursionField,
8+
} from '@formily/react'
39
import cls from 'classnames'
10+
import { GeneralField, FieldDisplayTypes } from '@formily/core'
411
import { isArr, isBool, isFn } from '@formily/shared'
512
import { Input, Table } from 'antd'
613
import { TableProps, ColumnProps } from 'antd/lib/table'
@@ -15,6 +22,14 @@ import { usePrefixCls } from '../__builtins__'
1522

1623
const { Search } = Input
1724

25+
interface ObservableColumnSource {
26+
field: GeneralField
27+
columnProps: ColumnProps<any>
28+
schema: Schema
29+
display: FieldDisplayTypes
30+
name: string
31+
}
32+
1833
type IFilterOption = boolean | ((option: any, keyword: string) => boolean)
1934

2035
type IFilterSort = (optionA: any, optionB: any) => number
@@ -48,24 +63,69 @@ const isColumnComponent = (schema: Schema) => {
4863
return schema['x-component']?.indexOf('Column') > -1
4964
}
5065

51-
const useColumns = () => {
66+
const useSources = () => {
67+
const arrayField = useField()
5268
const schema = useFieldSchema()
53-
const columns: ISelectTableColumnProps[] = []
69+
const parseSources = (schema: Schema): ObservableColumnSource[] => {
70+
if (isColumnComponent(schema)) {
71+
if (!schema['x-component-props']?.['dataIndex'] && !schema['name'])
72+
return []
73+
const name = schema['x-component-props']?.['dataIndex'] || schema['name']
74+
const field = arrayField.query(arrayField.address.concat(name)).take()
75+
const columnProps =
76+
field?.component?.[1] || schema['x-component-props'] || {}
77+
const display = field?.display || schema['x-display']
78+
return [
79+
{
80+
name,
81+
display,
82+
field,
83+
schema,
84+
columnProps: {
85+
title: field?.title || columnProps.title,
86+
...columnProps,
87+
},
88+
},
89+
]
90+
} else if (schema.properties) {
91+
return schema.reduceProperties((buf, schema) => {
92+
return buf.concat(parseSources(schema))
93+
}, [])
94+
}
95+
}
96+
97+
const parseArrayItems = (schema: Schema['items']) => {
98+
if (!schema) return []
99+
const sources: ObservableColumnSource[] = []
100+
const items = isArr(schema) ? schema : [schema]
101+
return items.reduce((columns, schema) => {
102+
const item = parseSources(schema)
103+
if (item) {
104+
return columns.concat(item)
105+
}
106+
return columns
107+
}, sources)
108+
}
109+
54110
const validSchema = (
55111
schema?.type === 'array' && schema?.items ? schema.items : schema
56112
) as Schema
57113

58-
validSchema?.mapProperties((schema, name) => {
59-
if (isColumnComponent(schema)) {
60-
const props = schema?.['x-component-props']
61-
columns.push({
62-
...props,
63-
title: props?.title || schema?.title,
64-
dataIndex: props?.dataIndex || name,
65-
})
66-
}
67-
})
68-
return columns
114+
return parseArrayItems(validSchema)
115+
}
116+
117+
const useColumns = (
118+
sources: ObservableColumnSource[]
119+
): TableProps<any>['columns'] => {
120+
return sources.reduce((buf, { name, columnProps, schema, display }, key) => {
121+
if (display !== 'visible') return buf
122+
if (!isColumnComponent(schema)) return buf
123+
return buf.concat({
124+
...columnProps,
125+
key,
126+
dataIndex: name,
127+
})
128+
}, [])
69129
}
70130

71131
const addPrimaryKey = (dataSource, rowKey, primaryKey) =>
@@ -111,7 +171,8 @@ export const SelectTable: ComposedSelectTable = observer((props) => {
111171
props?.size
112172
)
113173
const primaryKey = isFn(rowKey) ? '__formily_key__' : rowKey
114-
const columns = useColumns()
174+
const sources = useSources()
175+
const columns = useColumns(sources)
115176

116177
// dataSource
117178
let dataSource = isArr(propsDataSource) ? propsDataSource : field.dataSource
@@ -328,6 +389,16 @@ export const SelectTable: ComposedSelectTable = observer((props) => {
328389
>
329390
{''}
330391
</Table>
392+
{sources.map((column, key) => {
393+
//专门用来承接对Column的状态管理
394+
if (!isColumnComponent(column.schema)) return
395+
return React.createElement(RecursionField, {
396+
name: column.name,
397+
schema: column.schema,
398+
onlyRenderSelf: true,
399+
key,
400+
})
401+
})}
331402
</div>
332403
)
333404
})

‎packages/next/src/form-item/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -291,9 +291,9 @@ export const BaseItem: React.FC<React.PropsWithChildren<IFormItemProps>> = (
291291
[`${prefixCls}-feedback-layout-${feedbackLayout}`]: !!feedbackLayout,
292292
[`${prefixCls}-fullness`]: !!fullness || !!inset || !!feedbackIcon,
293293
[`${prefixCls}-inset`]: !!inset,
294-
[`${prefix}-input`]: !!inset,
294+
[`${prefix}input`]: !!inset,
295295
[`${prefixCls}-active`]: active,
296-
[`${prefix}-focus`]: active,
296+
[`${prefix}focus`]: active,
297297
[`${prefixCls}-inset-active`]: !!inset && active,
298298
[`${prefixCls}-label-align-${labelAlign}`]: true,
299299
[`${prefixCls}-control-align-${wrapperAlign}`]: true,
@@ -333,9 +333,9 @@ export const BaseItem: React.FC<React.PropsWithChildren<IFormItemProps>> = (
333333
[`${prefixCls}-control-content-component`]: true,
334334
[`${prefixCls}-control-content-component-has-feedback-icon`]:
335335
!!feedbackIcon,
336-
[`${prefix}-input`]: !!feedbackIcon,
336+
[`${prefix}input`]: !!feedbackIcon,
337337
[`${prefixCls}-active`]: active,
338-
[`${prefix}-focus`]: active,
338+
[`${prefix}focus`]: active,
339339
})}
340340
>
341341
<FormLayoutShallowContext.Provider value={{ size }}>

‎packages/next/src/select-table/index.tsx‎

Lines changed: 89 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
import React, { useState, useMemo } from 'react'
2-
import { observer, useFieldSchema, useField, Schema } from '@formily/react'
2+
import {
3+
observer,
4+
useFieldSchema,
5+
useField,
6+
Schema,
7+
RecursionField,
8+
} from '@formily/react'
39
import cls from 'classnames'
10+
import { GeneralField, FieldDisplayTypes } from '@formily/core'
411
import { isArr, isBool, isFn } from '@formily/shared'
512
import { Search, Table } from '@alifd/next'
613
import { TableProps, ColumnProps } from '@alifd/next/types/table'
@@ -13,6 +20,14 @@ import { useCheckSlackly, getIndeterminate } from './useCheckSlackly'
1320
import { getUISelected, getOutputData } from './utils'
1421
import { usePrefixCls } from '../__builtins__'
1522

23+
interface ObservableColumnSource {
24+
field: GeneralField
25+
columnProps: ColumnProps
26+
schema: Schema
27+
display: FieldDisplayTypes
28+
name: string
29+
}
30+
1631
type IFilterOption = boolean | ((option: any, keyword: string) => boolean)
1732

1833
type IFilterSort = (optionA: any, optionB: any) => number
@@ -50,24 +65,69 @@ const isColumnComponent = (schema: Schema) => {
5065
return schema['x-component']?.indexOf('Column') > -1
5166
}
5267

53-
const useColumns = () => {
68+
const useSources = () => {
69+
const arrayField = useField()
5470
const schema = useFieldSchema()
55-
const columns: ISelectTableColumnProps[] = []
71+
const parseSources = (schema: Schema): ObservableColumnSource[] => {
72+
if (isColumnComponent(schema)) {
73+
if (!schema['x-component-props']?.['dataIndex'] && !schema['name'])
74+
return []
75+
const name = schema['x-component-props']?.['dataIndex'] || schema['name']
76+
const field = arrayField.query(arrayField.address.concat(name)).take()
77+
const columnProps =
78+
field?.component?.[1] || schema['x-component-props'] || {}
79+
const display = field?.display || schema['x-display']
80+
return [
81+
{
82+
name,
83+
display,
84+
field,
85+
schema,
86+
columnProps: {
87+
title: field?.title || columnProps.title,
88+
...columnProps,
89+
},
90+
},
91+
]
92+
} else if (schema.properties) {
93+
return schema.reduceProperties((buf, schema) => {
94+
return buf.concat(parseSources(schema))
95+
}, [])
96+
}
97+
}
98+
99+
const parseArrayItems = (schema: Schema['items']) => {
100+
if (!schema) return []
101+
const sources: ObservableColumnSource[] = []
102+
const items = isArr(schema) ? schema : [schema]
103+
return items.reduce((columns, schema) => {
104+
const item = parseSources(schema)
105+
if (item) {
106+
return columns.concat(item)
107+
}
108+
return columns
109+
}, sources)
110+
}
111+
56112
const validSchema = (
57113
schema?.type === 'array' && schema?.items ? schema.items : schema
58114
) as Schema
59115

60-
validSchema?.mapProperties((schema, name) => {
61-
if (isColumnComponent(schema)) {
62-
const props = schema?.['x-component-props']
63-
columns.push({
64-
...props,
65-
title: props?.title || schema?.title,
66-
dataIndex: props?.dataIndex || name,
67-
})
68-
}
69-
})
70-
return columns
116+
return parseArrayItems(validSchema)
117+
}
118+
119+
const useColumns = (
120+
sources: ObservableColumnSource[]
121+
): TableProps['columns'] => {
122+
return sources.reduce((buf, { name, columnProps, schema, display }, key) => {
123+
if (display !== 'visible') return buf
124+
if (!isColumnComponent(schema)) return buf
125+
return buf.concat({
126+
...columnProps,
127+
key,
128+
dataIndex: name,
129+
})
130+
}, [])
71131
}
72132

73133
const addPrimaryKey = (dataSource, rowKey, primaryKey) =>
@@ -113,7 +173,8 @@ export const SelectTable: ComposedSelectTable = observer((props) => {
113173
props?.size
114174
)
115175
const primaryKey = isFn(rowKey) ? '__formily_key__' : rowKey
116-
const columns = useColumns()
176+
const sources = useSources()
177+
const columns = useColumns(sources)
117178

118179
// dataSource
119180
let dataSource = isArr(propsDataSource) ? propsDataSource : field.dataSource
@@ -313,12 +374,23 @@ export const SelectTable: ComposedSelectTable = observer((props) => {
313374
>
314375
{''}
315376
</Table>
377+
{sources.map((column, key) => {
378+
//专门用来承接对Column的状态管理
379+
if (!isColumnComponent(column.schema)) return
380+
return React.createElement(RecursionField, {
381+
name: column.name,
382+
schema: column.schema,
383+
onlyRenderSelf: true,
384+
key,
385+
})
386+
})}
316387
</div>
317388
)
318389
})
319390

320-
const TableColumn: React.FC<React.PropsWithChildren<ISelectTableColumnProps>> =
321-
() => <></>
391+
const TableColumn: React.FC<
392+
React.PropsWithChildren<ISelectTableColumnProps>
393+
> = () => <></>
322394

323395
SelectTable.Column = TableColumn
324396

0 commit comments

Comments
 (0)