From b3d3eb7b490e94d06245a8fd45511a54ad9882cb Mon Sep 17 00:00:00 2001 From: Lyca Date: Thu, 22 Sep 2022 11:00:58 +0800 Subject: [PATCH] fix(next/antd): fix SelectTable Template literals invalid && fix FormItem classname error (#3413) --- packages/antd/src/select-table/index.tsx | 101 +++++++++++++++++---- packages/next/src/form-item/index.tsx | 8 +- packages/next/src/select-table/index.tsx | 106 +++++++++++++++++++---- 3 files changed, 179 insertions(+), 36 deletions(-) diff --git a/packages/antd/src/select-table/index.tsx b/packages/antd/src/select-table/index.tsx index 5345efef6f1..f85de3bd7b1 100644 --- a/packages/antd/src/select-table/index.tsx +++ b/packages/antd/src/select-table/index.tsx @@ -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' @@ -15,6 +22,14 @@ import { usePrefixCls } from '../__builtins__' const { Search } = Input +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 @@ -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['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) => @@ -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 @@ -328,6 +389,16 @@ export const SelectTable: ComposedSelectTable = observer((props) => { > {''} + {sources.map((column, key) => { + //专门用来承接对Column的状态管理 + if (!isColumnComponent(column.schema)) return + return React.createElement(RecursionField, { + name: column.name, + schema: column.schema, + onlyRenderSelf: true, + key, + }) + })} ) }) diff --git a/packages/next/src/form-item/index.tsx b/packages/next/src/form-item/index.tsx index 1c64a47057c..2adafd2d590 100644 --- a/packages/next/src/form-item/index.tsx +++ b/packages/next/src/form-item/index.tsx @@ -291,9 +291,9 @@ export const BaseItem: React.FC> = ( [`${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, @@ -333,9 +333,9 @@ export const BaseItem: React.FC> = ( [`${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, })} > diff --git a/packages/next/src/select-table/index.tsx b/packages/next/src/select-table/index.tsx index 62744ded21a..b40449d58f3 100644 --- a/packages/next/src/select-table/index.tsx +++ b/packages/next/src/select-table/index.tsx @@ -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' @@ -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 @@ -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) => @@ -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 @@ -313,12 +374,23 @@ export const SelectTable: ComposedSelectTable = observer((props) => { > {''} + {sources.map((column, key) => { + //专门用来承接对Column的状态管理 + if (!isColumnComponent(column.schema)) return + return React.createElement(RecursionField, { + name: column.name, + schema: column.schema, + onlyRenderSelf: true, + key, + }) + })} ) }) -const TableColumn: React.FC> = - () => <> +const TableColumn: React.FC< + React.PropsWithChildren +> = () => <> SelectTable.Column = TableColumn