tachybase_todo/packages/client/src/schema-component/antd/array-table/ArrayTable.tsx

66 lines
1.8 KiB
TypeScript

import { ArrayField } from '@formily/core';
import { observer, RecursionField, Schema, useField, useFieldSchema } from '@formily/react';
import { Table, TableColumnProps } from 'antd';
import React from 'react';
import { useComponent } from '../../hooks';
const isColumnComponent = (schema: Schema) => {
return schema['x-component']?.endsWith('.Column') > -1;
};
const useTableColumns = () => {
const field = useField<ArrayField>();
const schema = useFieldSchema();
const Initializer = useComponent(schema['x-initializer']);
const columns = schema
.reduceProperties((buf, s) => {
if (isColumnComponent(s)) {
return buf.concat([s]);
}
}, [])
.map((s: Schema) => {
return {
title: <RecursionField name={s.name} schema={s} onlyRenderSelf />,
dataIndex: s.name,
render: (v, record) => {
const index = field.value?.indexOf(record);
return <RecursionField schema={s} name={index} onlyRenderProperties />;
},
} as TableColumnProps<any>;
});
console.log(columns);
if (!Initializer) {
return columns;
}
return columns.concat({
title: <Initializer />,
dataIndex: 'TableColumnInitializer',
key: 'TableColumnInitializer',
});
};
type ArrayTableType = React.FC<any> & {
Column?: React.FC<any>;
mixin?: (T: any) => void;
};
export const ArrayTable: ArrayTableType = observer((props) => {
const field = useField<ArrayField>();
const columns = useTableColumns();
const { onChange, ...others } = props;
return (
<div>
<Table {...others} columns={columns} dataSource={field.value?.slice()} />
</div>
);
});
ArrayTable.Column = (props) => {
const field = useField();
return <div>{field.title}</div>;
};
ArrayTable.mixin = (Table: any) => {
Table.Column = ArrayTable.Column;
};