// import React from 'react'; // import { ArrayTable as Table } from '@formily/antd'; // import { useField, Schema } from '@formily/react'; // import { Button } from 'antd'; // import cls from 'classnames'; // import { isValid, uid } from '@formily/shared'; // import { PlusOutlined } from '@ant-design/icons'; // import { usePrefixCls } from '@formily/antd/lib/__builtins__'; import React, { Fragment, useState, useRef, useEffect } from 'react'; import { Table, Pagination, Space, Select, Badge, Button } from 'antd'; import { PaginationProps } from 'antd/lib/pagination'; import { TableProps, ColumnProps } from 'antd/lib/table'; import { SelectProps } from 'antd/lib/select'; import cls from 'classnames'; import { SortableContainer, SortableElement } from 'react-sortable-hoc'; import { GeneralField, FieldDisplayTypes, ArrayField } from '@formily/core'; import { useForm, useField, observer, useFieldSchema, RecursionField, } from '@formily/react'; import { FormPath, isArr, isBool, uid, isValid } from '@formily/shared'; import { Schema } from '@formily/json-schema'; import { usePrefixCls } from '@formily/antd/lib/__builtins__'; import { ArrayBase, ArrayBaseMixins } from '@formily/antd/lib/array-base'; import { PlusOutlined } from '@ant-design/icons'; interface ObservableColumnSource { field: GeneralField; columnProps: ColumnProps; schema: Schema; display: FieldDisplayTypes; name: string; } interface IArrayTablePaginationProps extends PaginationProps { dataSource?: any[]; paging?: boolean; children?: ( dataSource: any[], pagination: React.ReactNode, ) => React.ReactElement; } interface IStatusSelectProps extends SelectProps { pageSize?: number; } type ComposedArrayTable = React.FC> & ArrayBaseMixins & { Column?: React.FC>; }; const SortableRow = SortableElement((props: any) => ); const SortableBody = SortableContainer((props: any) => ); const isColumnComponent = (schema: Schema) => { return schema['x-component']?.indexOf('Column') > -1; }; const isOperationsComponent = (schema: Schema) => { return schema['x-component']?.indexOf('Operations') > -1; }; const isAdditionComponent = (schema: Schema) => { return schema['x-component']?.indexOf('Addition') > -1; }; const useArrayTableSources = () => { const arrayField = useField(); const schema = useFieldSchema(); const parseSources = (schema: Schema): ObservableColumnSource[] => { if ( isColumnComponent(schema) || isOperationsComponent(schema) || isAdditionComponent(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, }, ]; } else if (schema.properties) { return schema.reduceProperties((buf, schema) => { return buf.concat(parseSources(schema)); }, []); } }; const parseArrayItems = (schema: Schema['items']) => { 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); }; if (!schema) throw new Error('can not found schema object'); return parseArrayItems(schema.items); }; const useArrayTableColumns = ( dataSource: any[], 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, render: (value: any, record: any) => { const index = dataSource.indexOf(record); const children = ( ); return children; }, }); }, []); }; const useAddition = () => { const schema = useFieldSchema(); return schema.reduceProperties((addition, schema, key) => { if (isAdditionComponent(schema)) { return ; } return addition; }, null); }; const StatusSelect: React.FC = observer((props) => { const form = useForm(); const field = useField(); const prefixCls = usePrefixCls('formily-array-table'); const errors = form.queryFeedbacks({ type: 'error', address: `${field.address}.*`, }); const createIndexPattern = (page: number) => { const pattern = `${field.address}.*[${(page - 1) * props.pageSize}:${ page * props.pageSize }].*`; return FormPath.parse(pattern); }; const options = props.options?.map(({ label, value }) => { const hasError = errors.some(({ address }) => { return createIndexPattern(value).match(address); }); return { label: hasError ? {label} : label, value, }; }); const width = String(options?.length).length * 15; return (