From d6f38495a7ab8497f30af3725c57dbdc8eaa5559 Mon Sep 17 00:00:00 2001 From: Zeke Zhang <958414905@qq.com> Date: Wed, 27 Mar 2024 20:52:29 +0800 Subject: [PATCH] refactor(DataBlock): filter form (#3785) * refactor: migrate to modules * refactor: add useFilterFormBlockProps * refactor: add useFilterFormBlockDecoratorProps hook * chore: avoid error * refactor: use x-use-component-props instead of useProps * chore: fix unit test * chore: fix build --- .../BlockSchemaComponentProvider.tsx | 6 + .../FilterFormBlockProvider.tsx | 5 +- .../form/FilterFormBlockInitializer.tsx | 10 +- .../createFilterFormBlockSchema.test.ts | 106 ++++++++++++++++++ .../form/createFilterFormBlockSchema.ts | 57 ++++++++++ .../hooks/useFilterFormBlockDecoratorProps.ts | 1 + .../form/hooks/useFilterFormBlockProps.ts | 5 + .../client/src/schema-initializer/index.ts | 1 - .../client/src/schema-initializer/utils.ts | 65 ----------- 9 files changed, 182 insertions(+), 74 deletions(-) create mode 100644 packages/core/client/src/modules/blocks/filter-blocks/form/__tests__/createFilterFormBlockSchema.test.ts create mode 100644 packages/core/client/src/modules/blocks/filter-blocks/form/createFilterFormBlockSchema.ts create mode 100644 packages/core/client/src/modules/blocks/filter-blocks/form/hooks/useFilterFormBlockDecoratorProps.ts create mode 100644 packages/core/client/src/modules/blocks/filter-blocks/form/hooks/useFilterFormBlockProps.ts diff --git a/packages/core/client/src/block-provider/BlockSchemaComponentProvider.tsx b/packages/core/client/src/block-provider/BlockSchemaComponentProvider.tsx index e5b1b8c69..04e53e396 100644 --- a/packages/core/client/src/block-provider/BlockSchemaComponentProvider.tsx +++ b/packages/core/client/src/block-provider/BlockSchemaComponentProvider.tsx @@ -24,6 +24,8 @@ import { useTableBlockDecoratorProps } from '../modules/blocks/data-blocks/table import { useListBlockDecoratorProps } from '../modules/blocks/data-blocks/list/hooks/useListBlockDecoratorProps'; import { useTableSelectorDecoratorProps } from '../modules/blocks/data-blocks/table-selector/hooks/useTableSelectorDecoratorProps'; import { useCollapseBlockDecoratorProps } from '../modules/blocks/filter-blocks/collapse/hooks/useCollapseBlockDecoratorProps'; +import { useFilterFormBlockProps } from '../modules/blocks/filter-blocks/form/hooks/useFilterFormBlockProps'; +import { useFilterFormBlockDecoratorProps } from '../modules/blocks/filter-blocks/form/hooks/useFilterFormBlockDecoratorProps'; // TODO: delete this, replaced by `BlockSchemaComponentPlugin` export const BlockSchemaComponentProvider: React.FC = (props) => { @@ -58,6 +60,8 @@ export const BlockSchemaComponentProvider: React.FC = (props) => { useListBlockDecoratorProps, useTableSelectorDecoratorProps, useCollapseBlockDecoratorProps, + useFilterFormBlockProps, + useFilterFormBlockDecoratorProps, }} > {props.children} @@ -109,6 +113,8 @@ export class BlockSchemaComponentPlugin extends Plugin { useListBlockDecoratorProps, useTableSelectorDecoratorProps, useCollapseBlockDecoratorProps, + useFilterFormBlockProps, + useFilterFormBlockDecoratorProps, }); } } diff --git a/packages/core/client/src/block-provider/FilterFormBlockProvider.tsx b/packages/core/client/src/block-provider/FilterFormBlockProvider.tsx index 850c04e7a..b54c9433a 100644 --- a/packages/core/client/src/block-provider/FilterFormBlockProvider.tsx +++ b/packages/core/client/src/block-provider/FilterFormBlockProvider.tsx @@ -2,8 +2,9 @@ import React from 'react'; import { DatePickerProvider } from '../schema-component'; import { DefaultValueProvider } from '../schema-settings'; import { FormBlockProvider } from './FormBlockProvider'; +import { withDynamicSchemaProps } from '../application/hoc/withDynamicSchemaProps'; -export const FilterFormBlockProvider = (props) => { +export const FilterFormBlockProvider = withDynamicSchemaProps((props) => { return ( false}> @@ -11,4 +12,4 @@ export const FilterFormBlockProvider = (props) => { ); -}; +}); diff --git a/packages/core/client/src/modules/blocks/filter-blocks/form/FilterFormBlockInitializer.tsx b/packages/core/client/src/modules/blocks/filter-blocks/form/FilterFormBlockInitializer.tsx index 1842396f5..3263e610e 100644 --- a/packages/core/client/src/modules/blocks/filter-blocks/form/FilterFormBlockInitializer.tsx +++ b/packages/core/client/src/modules/blocks/filter-blocks/form/FilterFormBlockInitializer.tsx @@ -1,7 +1,7 @@ import { FormOutlined } from '@ant-design/icons'; import React from 'react'; import { useSchemaInitializer, useSchemaInitializerItem } from '../../../../application'; -import { createFilterFormBlockSchema } from '../../../../schema-initializer/utils'; +import { createFilterFormBlockSchema } from './createFilterFormBlockSchema'; import { FilterBlockInitializer } from '../../../../schema-initializer/items/FilterBlockInitializer'; import { Collection, CollectionFieldOptions } from '../../../../data-source'; @@ -25,10 +25,9 @@ export const FilterFormBlockInitializer = ({ componentType={'FilterFormItem'} templateWrap={(templateSchema, { item }) => { const s = createFilterFormBlockSchema({ - template: templateSchema, + templateSchema: templateSchema, dataSource: item.dataSource, - collection: item.name || item.collectionName, - settings: 'blockSettings:filterForm', + collectionName: item.name || item.collectionName, }); if (item.template && item.mode === 'reference') { s['x-template-key'] = item.template.key; @@ -38,9 +37,8 @@ export const FilterFormBlockInitializer = ({ onCreateBlockSchema={({ item }) => { return insert( createFilterFormBlockSchema({ - collection: item.collectionName || item.name, + collectionName: item.collectionName || item.name, dataSource: item.dataSource, - settings: 'blockSettings:filterForm', }), ); }} diff --git a/packages/core/client/src/modules/blocks/filter-blocks/form/__tests__/createFilterFormBlockSchema.test.ts b/packages/core/client/src/modules/blocks/filter-blocks/form/__tests__/createFilterFormBlockSchema.test.ts new file mode 100644 index 000000000..4fc5e833d --- /dev/null +++ b/packages/core/client/src/modules/blocks/filter-blocks/form/__tests__/createFilterFormBlockSchema.test.ts @@ -0,0 +1,106 @@ +import { createFilterFormBlockSchema } from '../createFilterFormBlockSchema'; + +vi.mock('@formily/shared', () => { + return { + uid: () => 'mocked-uid', + }; +}); + +describe('createFilterFormBlockSchema', () => { + test('should return the correct schema', () => { + const schema = createFilterFormBlockSchema({ + collectionName: 'myCollection', + dataSource: 'myDataSource', + templateSchema: { type: 'string' }, + }); + + expect(schema).toMatchInlineSnapshot(` + { + "properties": { + "mocked-uid": { + "properties": { + "grid": { + "type": "string", + }, + "mocked-uid": { + "type": "void", + "x-component": "ActionBar", + "x-component-props": { + "layout": "one-column", + "style": { + "float": "right", + }, + }, + "x-initializer": "filterForm:configureActions", + }, + }, + "type": "void", + "x-component": "FormV2", + "x-use-component-props": "useFilterFormBlockProps", + }, + }, + "type": "void", + "x-component": "CardItem", + "x-decorator": "FilterFormBlockProvider", + "x-decorator-props": { + "collection": "myCollection", + "dataSource": "myDataSource", + }, + "x-filter-operators": {}, + "x-filter-targets": [], + "x-settings": "blockSettings:filterForm", + "x-toolbar": "BlockSchemaToolbar", + "x-use-decorator-props": "useFilterFormBlockDecoratorProps", + } + `); + }); + + test('should return the correct schema without templateSchema', () => { + const schema = createFilterFormBlockSchema({ + collectionName: 'myCollection', + dataSource: 'myDataSource', + }); + + expect(schema).toMatchInlineSnapshot(` + { + "properties": { + "mocked-uid": { + "properties": { + "grid": { + "type": "void", + "x-component": "Grid", + "x-initializer": "filterForm:configureFields", + }, + "mocked-uid": { + "type": "void", + "x-component": "ActionBar", + "x-component-props": { + "layout": "one-column", + "style": { + "float": "right", + }, + }, + "x-initializer": "filterForm:configureActions", + }, + }, + "type": "void", + "x-component": "FormV2", + "x-use-component-props": "useFilterFormBlockProps", + }, + }, + "type": "void", + "x-component": "CardItem", + "x-decorator": "FilterFormBlockProvider", + "x-decorator-props": { + "collection": "myCollection", + "dataSource": "myDataSource", + }, + "x-filter-operators": {}, + "x-filter-targets": [], + "x-settings": "blockSettings:filterForm", + "x-toolbar": "BlockSchemaToolbar", + "x-use-decorator-props": "useFilterFormBlockDecoratorProps", + } + `); + }); +}); diff --git a/packages/core/client/src/modules/blocks/filter-blocks/form/createFilterFormBlockSchema.ts b/packages/core/client/src/modules/blocks/filter-blocks/form/createFilterFormBlockSchema.ts new file mode 100644 index 000000000..85ab058de --- /dev/null +++ b/packages/core/client/src/modules/blocks/filter-blocks/form/createFilterFormBlockSchema.ts @@ -0,0 +1,57 @@ +import { ISchema } from '@formily/react'; +import { uid } from '@formily/shared'; + +export const createFilterFormBlockSchema = (options: { + collectionName: string; + dataSource: string; + templateSchema?: ISchema; +}) => { + const { collectionName, dataSource, templateSchema } = options; + + if (!collectionName || !dataSource) { + throw new Error('collectionName and dataSource are required'); + } + + const schema: ISchema = { + type: 'void', + 'x-decorator': 'FilterFormBlockProvider', + 'x-use-decorator-props': 'useFilterFormBlockDecoratorProps', + 'x-decorator-props': { + dataSource, + collection: collectionName, + }, + 'x-toolbar': 'BlockSchemaToolbar', + 'x-settings': 'blockSettings:filterForm', + 'x-component': 'CardItem', + // 保存当前筛选区块所能过滤的数据区块 + 'x-filter-targets': [], + // 用于存储用户设置的每个字段的运算符,目前仅筛选表单区块支持自定义 + 'x-filter-operators': {}, + properties: { + [uid()]: { + type: 'void', + 'x-component': 'FormV2', + 'x-use-component-props': 'useFilterFormBlockProps', + properties: { + grid: templateSchema || { + type: 'void', + 'x-component': 'Grid', + 'x-initializer': 'filterForm:configureFields', + }, + [uid()]: { + type: 'void', + 'x-initializer': 'filterForm:configureActions', + 'x-component': 'ActionBar', + 'x-component-props': { + layout: 'one-column', + style: { + float: 'right', + }, + }, + }, + }, + }, + }, + }; + return schema; +}; diff --git a/packages/core/client/src/modules/blocks/filter-blocks/form/hooks/useFilterFormBlockDecoratorProps.ts b/packages/core/client/src/modules/blocks/filter-blocks/form/hooks/useFilterFormBlockDecoratorProps.ts new file mode 100644 index 000000000..37f6d0fc8 --- /dev/null +++ b/packages/core/client/src/modules/blocks/filter-blocks/form/hooks/useFilterFormBlockDecoratorProps.ts @@ -0,0 +1 @@ +export function useFilterFormBlockDecoratorProps() {} diff --git a/packages/core/client/src/modules/blocks/filter-blocks/form/hooks/useFilterFormBlockProps.ts b/packages/core/client/src/modules/blocks/filter-blocks/form/hooks/useFilterFormBlockProps.ts new file mode 100644 index 000000000..76ad7db2b --- /dev/null +++ b/packages/core/client/src/modules/blocks/filter-blocks/form/hooks/useFilterFormBlockProps.ts @@ -0,0 +1,5 @@ +import { useFormBlockProps } from '../../../../../block-provider/FormBlockProvider'; + +export function useFilterFormBlockProps() { + return useFormBlockProps(); +} diff --git a/packages/core/client/src/schema-initializer/index.ts b/packages/core/client/src/schema-initializer/index.ts index 648cdb45f..7af974161 100644 --- a/packages/core/client/src/schema-initializer/index.ts +++ b/packages/core/client/src/schema-initializer/index.ts @@ -123,7 +123,6 @@ export * from './buttons'; export * from './items'; export { createDetailsBlockSchema, - createFilterFormBlockSchema, createFormBlockSchema, createReadPrettyFormBlockSchema, createTableBlockSchema, diff --git a/packages/core/client/src/schema-initializer/utils.ts b/packages/core/client/src/schema-initializer/utils.ts index cd1998681..14c26667c 100644 --- a/packages/core/client/src/schema-initializer/utils.ts +++ b/packages/core/client/src/schema-initializer/utils.ts @@ -1154,71 +1154,6 @@ export const createFormBlockSchema = (options: { return schema; }; -export const createFilterFormBlockSchema = (options) => { - const { - formItemInitializers = 'filterForm:configureFields', - actionInitializers = 'filterForm:configureActions', - collection, - resource, - association, - dataSource, - action, - template, - settings, - ...others - } = options; - const resourceName = resource || association || collection; - const schema: ISchema = { - type: 'void', - 'x-decorator': 'FilterFormBlockProvider', - 'x-decorator-props': { - ...others, - action, - resource: resourceName, - dataSource, - collection, - association, - }, - 'x-toolbar': 'BlockSchemaToolbar', - ...(settings ? { 'x-settings': settings } : { 'x-designer': 'FormV2.FilterDesigner' }), - 'x-component': 'CardItem', - // 保存当前筛选区块所能过滤的数据区块 - 'x-filter-targets': [], - // 用于存储用户设置的每个字段的运算符,目前仅筛选表单区块支持自定义 - 'x-filter-operators': {}, - properties: { - [uid()]: { - type: 'void', - 'x-component': 'FormV2', - 'x-component-props': { - useProps: '{{ useFormBlockProps }}', - }, - properties: { - grid: template || { - type: 'void', - 'x-component': 'Grid', - 'x-initializer': formItemInitializers, - properties: {}, - }, - [uid()]: { - type: 'void', - 'x-initializer': actionInitializers, - 'x-component': 'ActionBar', - 'x-component-props': { - layout: 'one-column', - style: { - float: 'right', - }, - }, - properties: {}, - }, - }, - }, - }, - }; - return schema; -}; - /** * @deprecated * 已弃用,可以使用 createDetailsBlockSchema 替换