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
This commit is contained in:
parent
06980fd87d
commit
d6f38495a7
@ -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,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -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 (
|
||||
<DatePickerProvider value={{ utc: false }}>
|
||||
<DefaultValueProvider isAllowToSetDefaultValue={() => false}>
|
||||
@ -11,4 +12,4 @@ export const FilterFormBlockProvider = (props) => {
|
||||
</DefaultValueProvider>
|
||||
</DatePickerProvider>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
@ -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',
|
||||
}),
|
||||
);
|
||||
}}
|
||||
|
@ -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",
|
||||
}
|
||||
`);
|
||||
});
|
||||
});
|
@ -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;
|
||||
};
|
@ -0,0 +1 @@
|
||||
export function useFilterFormBlockDecoratorProps() {}
|
@ -0,0 +1,5 @@
|
||||
import { useFormBlockProps } from '../../../../../block-provider/FormBlockProvider';
|
||||
|
||||
export function useFilterFormBlockProps() {
|
||||
return useFormBlockProps();
|
||||
}
|
@ -123,7 +123,6 @@ export * from './buttons';
|
||||
export * from './items';
|
||||
export {
|
||||
createDetailsBlockSchema,
|
||||
createFilterFormBlockSchema,
|
||||
createFormBlockSchema,
|
||||
createReadPrettyFormBlockSchema,
|
||||
createTableBlockSchema,
|
||||
|
@ -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 替换
|
||||
|
Loading…
Reference in New Issue
Block a user