feat: add more demos for the void table
This commit is contained in:
		
							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