feat: add more demos for the void table
This commit is contained in:
chenos
parent
76bbdfb1f6
commit
e36e3283a2
@ -22,6 +22,7 @@ mock.onGet('/posts:list').reply(async (config) => {
|
||||
return {
|
||||
id: v + (page - 1) * pageSize,
|
||||
name: uid(),
|
||||
date: '2022-01-02 22:22:22'
|
||||
};
|
||||
}),
|
||||
meta: {
|
||||
|
||||
@ -0,0 +1,209 @@
|
||||
/**
|
||||
* title: 勾选
|
||||
*/
|
||||
import { ISchema, useField, useFieldSchema } from '@formily/react';
|
||||
import { uid } from '@formily/shared';
|
||||
import {
|
||||
AntdSchemaComponentProvider,
|
||||
APIClientProvider,
|
||||
CollectionField,
|
||||
CollectionProvider,
|
||||
SchemaComponent,
|
||||
SchemaComponentProvider,
|
||||
useCollection
|
||||
} from '@nocobase/client';
|
||||
import React, { useEffect } from 'react';
|
||||
import { useDesignable } from '../../..';
|
||||
import { apiClient } from './apiClient';
|
||||
|
||||
const schema: ISchema = {
|
||||
type: 'object',
|
||||
properties: {
|
||||
block1: {
|
||||
type: 'void',
|
||||
'x-decorator': 'CollectionBlock',
|
||||
properties: {
|
||||
table1: {
|
||||
type: 'void',
|
||||
'x-uid': 'input',
|
||||
'x-component': 'VoidTable',
|
||||
'x-component-props': {
|
||||
rowKey: 'id',
|
||||
rowSelection: {
|
||||
type: 'checkbox',
|
||||
},
|
||||
pagination: {
|
||||
current: 2,
|
||||
pageSize: 2,
|
||||
},
|
||||
request: {
|
||||
resource: 'posts',
|
||||
action: 'list',
|
||||
params: {
|
||||
filter: {},
|
||||
// pageSize: 5,
|
||||
},
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
column1: {
|
||||
type: 'void',
|
||||
// title: 'ID',
|
||||
'x-decorator': 'TableColumnDecorator',
|
||||
'x-component': 'VoidTable.Column',
|
||||
properties: {
|
||||
id: {
|
||||
type: 'number',
|
||||
'x-component': 'CollectionField',
|
||||
'x-read-pretty': true,
|
||||
},
|
||||
},
|
||||
},
|
||||
column2: {
|
||||
type: 'void',
|
||||
// title: 'Name',
|
||||
'x-decorator': 'TableColumnDecorator',
|
||||
'x-component': 'VoidTable.Column',
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
'x-component': 'CollectionField',
|
||||
'x-read-pretty': true,
|
||||
},
|
||||
},
|
||||
},
|
||||
column3: {
|
||||
type: 'void',
|
||||
// title: 'Name',
|
||||
'x-decorator': 'TableColumnDecorator',
|
||||
'x-component': 'VoidTable.Column',
|
||||
properties: {
|
||||
date: {
|
||||
type: 'string',
|
||||
'x-component': 'CollectionField',
|
||||
'x-read-pretty': true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const useColumnSchema = () => {
|
||||
const { getField } = useCollection();
|
||||
const columnSchema = useFieldSchema();
|
||||
const fieldSchema = columnSchema.reduceProperties((buf, s) => {
|
||||
if (s['x-component'] === 'CollectionField') {
|
||||
return s;
|
||||
}
|
||||
return buf;
|
||||
}, null);
|
||||
if (!fieldSchema) {
|
||||
return;
|
||||
}
|
||||
const collectionField = getField(fieldSchema.name);
|
||||
return { columnSchema, fieldSchema, collectionField };
|
||||
};
|
||||
|
||||
const TableColumnDecorator = (props) => {
|
||||
const field = useField();
|
||||
const { columnSchema, fieldSchema, collectionField } = useColumnSchema();
|
||||
const { refresh } = useDesignable();
|
||||
useEffect(() => {
|
||||
if (field.title) {
|
||||
return;
|
||||
}
|
||||
if (!fieldSchema) {
|
||||
return;
|
||||
}
|
||||
if (collectionField?.uiSchema?.title) {
|
||||
field.title = collectionField?.uiSchema?.title;
|
||||
}
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
{props.children}
|
||||
<div
|
||||
onClick={() => {
|
||||
field.title = uid();
|
||||
columnSchema.title = field.title = field.title;
|
||||
refresh();
|
||||
field.query(`.*.${fieldSchema.name}`).take((f) => {
|
||||
f.componentProps.dateFormat = 'YYYY-MM-DD';
|
||||
});
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const CollectionBlock = (props) => {
|
||||
return (
|
||||
<CollectionProvider
|
||||
collection={{
|
||||
name: 'posts',
|
||||
fields: [
|
||||
{
|
||||
type: 'integer',
|
||||
name: 'id',
|
||||
interface: 'input',
|
||||
uiSchema: {
|
||||
title: 'ID1',
|
||||
type: 'number',
|
||||
'x-component': 'InputNumber',
|
||||
required: true,
|
||||
description: 'description1',
|
||||
} as ISchema,
|
||||
},
|
||||
{
|
||||
type: 'string',
|
||||
name: 'name',
|
||||
interface: 'input',
|
||||
uiSchema: {
|
||||
title: 'Name1',
|
||||
type: 'string',
|
||||
'x-component': 'Input',
|
||||
required: true,
|
||||
description: 'description1',
|
||||
} as ISchema,
|
||||
},
|
||||
{
|
||||
type: 'string',
|
||||
name: 'date',
|
||||
interface: 'datetime',
|
||||
uiSchema: {
|
||||
type: 'boolean',
|
||||
title: `Date1`,
|
||||
'x-read-pretty': true,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'DatePicker',
|
||||
'x-component-props': {
|
||||
dateFormat: 'YYYY/MM/DD',
|
||||
// showTime: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
{props.children}
|
||||
</CollectionProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<APIClientProvider apiClient={apiClient}>
|
||||
<SchemaComponentProvider components={{ TableColumnDecorator, CollectionBlock, CollectionField }}>
|
||||
<AntdSchemaComponentProvider>
|
||||
<SchemaComponent schema={schema} />
|
||||
</AntdSchemaComponentProvider>
|
||||
</SchemaComponentProvider>
|
||||
</APIClientProvider>
|
||||
);
|
||||
};
|
||||
@ -202,34 +202,6 @@ export default () => {
|
||||
|
||||
<code src="./demos/demo1.tsx">
|
||||
|
||||
为了更好的支持 columns 的渲染，添加了 VoidTable.Column 用于配置表格列，VoidTable.Column 写在 properties 里，属性与 antd 的 [Table.Column](https://ant.design/components/table/#Column) 一致。
|
||||
CollectionProvider + CollectionField
|
||||
|
||||
```ts
|
||||
{
|
||||
type: 'void',
|
||||
'x-component': 'VoidTable',
|
||||
'x-component-props': {
|
||||
rowKey: 'id',
|
||||
dataSource: [
|
||||
{ id: 1, name: 'Name1' },
|
||||
{ id: 2, name: 'Name2' },
|
||||
{ id: 3, name: 'Name3' },
|
||||
],
|
||||
},
|
||||
properties: {
|
||||
column1: {
|
||||
type: 'void',
|
||||
'x-component': 'VoidTable.Column',
|
||||
'x-component-props': {
|
||||
title: 'Name',
|
||||
},
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
'x-component': 'Input',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
```
|
||||
<code src="./demos/demo2.tsx">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user