Skip to content

Commit

Permalink
fix(next/antd): fix SelectTable Template literals invalid && fix Form…
Browse files Browse the repository at this point in the history 
…Item classname error (#3413)
  • Loading branch information
@ifblooms
ifblooms authored Sep 22, 2022
1 parent 23b94cd commit b3d3eb7
Show file tree
Hide file tree
Showing 3 changed files with 179 additions and 36 deletions.
101 changes: 86 additions & 15 deletions packages/antd/src/select-table/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
import React, { useState, useMemo } from 'react'
import { observer, useFieldSchema, useField, Schema } from '@formily/react'
import {
observer,
useFieldSchema,
useField,
Schema,
RecursionField,
} from '@formily/react'
import cls from 'classnames'
import { GeneralField, FieldDisplayTypes } from '@formily/core'
import { isArr, isBool, isFn } from '@formily/shared'
import { Input, Table } from 'antd'
import { TableProps, ColumnProps } from 'antd/lib/table'
Expand All @@ -15,6 +22,14 @@ import { usePrefixCls } from '../__builtins__'

const { Search } = Input

interface ObservableColumnSource {
field: GeneralField
columnProps: ColumnProps<any>
schema: Schema
display: FieldDisplayTypes
name: string
}

type IFilterOption = boolean | ((option: any, keyword: string) => boolean)

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

const useColumns = () => {
const useSources = () => {
const arrayField = useField()
const schema = useFieldSchema()
const columns: ISelectTableColumnProps[] = []
const parseSources = (schema: Schema): ObservableColumnSource[] => {
if (isColumnComponent(schema)) {
if (!schema['x-component-props']?.['dataIndex'] && !schema['name'])
return []
const name = schema['x-component-props']?.['dataIndex'] || schema['name']
const field = arrayField.query(arrayField.address.concat(name)).take()
const columnProps =
field?.component?.[1] || schema['x-component-props'] || {}
const display = field?.display || schema['x-display']
return [
{
name,
display,
field,
schema,
columnProps: {
title: field?.title || columnProps.title,
...columnProps,
},
},
]
} else if (schema.properties) {
return schema.reduceProperties((buf, schema) => {
return buf.concat(parseSources(schema))
}, [])
}
}

const parseArrayItems = (schema: Schema['items']) => {
if (!schema) return []
const sources: ObservableColumnSource[] = []
const items = isArr(schema) ? schema : [schema]
return items.reduce((columns, schema) => {
const item = parseSources(schema)
if (item) {
return columns.concat(item)
}
return columns
}, sources)
}

const validSchema = (
schema?.type === 'array' && schema?.items ? schema.items : schema
) as Schema

validSchema?.mapProperties((schema, name) => {
if (isColumnComponent(schema)) {
const props = schema?.['x-component-props']
columns.push({
...props,
title: props?.title || schema?.title,
dataIndex: props?.dataIndex || name,
})
}
})
return columns
return parseArrayItems(validSchema)
}

const useColumns = (
sources: ObservableColumnSource[]
): TableProps<any>['columns'] => {
return sources.reduce((buf, { name, columnProps, schema, display }, key) => {
if (display !== 'visible') return buf
if (!isColumnComponent(schema)) return buf
return buf.concat({
...columnProps,
key,
dataIndex: name,
})
}, [])
}

const addPrimaryKey = (dataSource, rowKey, primaryKey) =>
Expand Down Expand Up @@ -111,7 +171,8 @@ export const SelectTable: ComposedSelectTable = observer((props) => {
props?.size
)
const primaryKey = isFn(rowKey) ? '__formily_key__' : rowKey
const columns = useColumns()
const sources = useSources()
const columns = useColumns(sources)

// dataSource
let dataSource = isArr(propsDataSource) ? propsDataSource : field.dataSource
Expand Down Expand Up @@ -328,6 +389,16 @@ export const SelectTable: ComposedSelectTable = observer((props) => {
>
{''}
</Table>
{sources.map((column, key) => {
//专门用来承接对Column的状态管理
if (!isColumnComponent(column.schema)) return
return React.createElement(RecursionField, {
name: column.name,
schema: column.schema,
onlyRenderSelf: true,
key,
})
})}
</div>
)
})
Expand Down
8 changes: 4 additions & 4 deletions packages/next/src/form-item/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -291,9 +291,9 @@ export const BaseItem: React.FC<React.PropsWithChildren<IFormItemProps>> = (
[`${prefixCls}-feedback-layout-${feedbackLayout}`]: !!feedbackLayout,
[`${prefixCls}-fullness`]: !!fullness || !!inset || !!feedbackIcon,
[`${prefixCls}-inset`]: !!inset,
[`${prefix}-input`]: !!inset,
[`${prefix}input`]: !!inset,
[`${prefixCls}-active`]: active,
[`${prefix}-focus`]: active,
[`${prefix}focus`]: active,
[`${prefixCls}-inset-active`]: !!inset && active,
[`${prefixCls}-label-align-${labelAlign}`]: true,
[`${prefixCls}-control-align-${wrapperAlign}`]: true,
Expand Down Expand Up @@ -333,9 +333,9 @@ export const BaseItem: React.FC<React.PropsWithChildren<IFormItemProps>> = (
[`${prefixCls}-control-content-component`]: true,
[`${prefixCls}-control-content-component-has-feedback-icon`]:
!!feedbackIcon,
[`${prefix}-input`]: !!feedbackIcon,
[`${prefix}input`]: !!feedbackIcon,
[`${prefixCls}-active`]: active,
[`${prefix}-focus`]: active,
[`${prefix}focus`]: active,
})}
>
<FormLayoutShallowContext.Provider value={{ size }}>
Expand Down
106 changes: 89 additions & 17 deletions packages/next/src/select-table/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
import React, { useState, useMemo } from 'react'
import { observer, useFieldSchema, useField, Schema } from '@formily/react'
import {
observer,
useFieldSchema,
useField,
Schema,
RecursionField,
} from '@formily/react'
import cls from 'classnames'
import { GeneralField, FieldDisplayTypes } from '@formily/core'
import { isArr, isBool, isFn } from '@formily/shared'
import { Search, Table } from '@alifd/next'
import { TableProps, ColumnProps } from '@alifd/next/types/table'
Expand All @@ -13,6 +20,14 @@ import { useCheckSlackly, getIndeterminate } from './useCheckSlackly'
import { getUISelected, getOutputData } from './utils'
import { usePrefixCls } from '../__builtins__'

interface ObservableColumnSource {
field: GeneralField
columnProps: ColumnProps
schema: Schema
display: FieldDisplayTypes
name: string
}

type IFilterOption = boolean | ((option: any, keyword: string) => boolean)

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

const useColumns = () => {
const useSources = () => {
const arrayField = useField()
const schema = useFieldSchema()
const columns: ISelectTableColumnProps[] = []
const parseSources = (schema: Schema): ObservableColumnSource[] => {
if (isColumnComponent(schema)) {
if (!schema['x-component-props']?.['dataIndex'] && !schema['name'])
return []
const name = schema['x-component-props']?.['dataIndex'] || schema['name']
const field = arrayField.query(arrayField.address.concat(name)).take()
const columnProps =
field?.component?.[1] || schema['x-component-props'] || {}
const display = field?.display || schema['x-display']
return [
{
name,
display,
field,
schema,
columnProps: {
title: field?.title || columnProps.title,
...columnProps,
},
},
]
} else if (schema.properties) {
return schema.reduceProperties((buf, schema) => {
return buf.concat(parseSources(schema))
}, [])
}
}

const parseArrayItems = (schema: Schema['items']) => {
if (!schema) return []
const sources: ObservableColumnSource[] = []
const items = isArr(schema) ? schema : [schema]
return items.reduce((columns, schema) => {
const item = parseSources(schema)
if (item) {
return columns.concat(item)
}
return columns
}, sources)
}

const validSchema = (
schema?.type === 'array' && schema?.items ? schema.items : schema
) as Schema

validSchema?.mapProperties((schema, name) => {
if (isColumnComponent(schema)) {
const props = schema?.['x-component-props']
columns.push({
...props,
title: props?.title || schema?.title,
dataIndex: props?.dataIndex || name,
})
}
})
return columns
return parseArrayItems(validSchema)
}

const useColumns = (
sources: ObservableColumnSource[]
): TableProps['columns'] => {
return sources.reduce((buf, { name, columnProps, schema, display }, key) => {
if (display !== 'visible') return buf
if (!isColumnComponent(schema)) return buf
return buf.concat({
...columnProps,
key,
dataIndex: name,
})
}, [])
}

const addPrimaryKey = (dataSource, rowKey, primaryKey) =>
Expand Down Expand Up @@ -113,7 +173,8 @@ export const SelectTable: ComposedSelectTable = observer((props) => {
props?.size
)
const primaryKey = isFn(rowKey) ? '__formily_key__' : rowKey
const columns = useColumns()
const sources = useSources()
const columns = useColumns(sources)

// dataSource
let dataSource = isArr(propsDataSource) ? propsDataSource : field.dataSource
Expand Down Expand Up @@ -313,12 +374,23 @@ export const SelectTable: ComposedSelectTable = observer((props) => {
>
{''}
</Table>
{sources.map((column, key) => {
//专门用来承接对Column的状态管理
if (!isColumnComponent(column.schema)) return
return React.createElement(RecursionField, {
name: column.name,
schema: column.schema,
onlyRenderSelf: true,
key,
})
})}
</div>
)
})

const TableColumn: React.FC<React.PropsWithChildren<ISelectTableColumnProps>> =
() => <></>
const TableColumn: React.FC<
React.PropsWithChildren<ISelectTableColumnProps>
> = () => <></>

SelectTable.Column = TableColumn

Expand Down

0 comments on commit b3d3eb7

Please sign in to comment.