diff --git a/packages/core/client/src/block-provider/BlockSchemaComponentProvider.tsx b/packages/core/client/src/block-provider/BlockSchemaComponentProvider.tsx index 97ec052c2..f453264bd 100644 --- a/packages/core/client/src/block-provider/BlockSchemaComponentProvider.tsx +++ b/packages/core/client/src/block-provider/BlockSchemaComponentProvider.tsx @@ -22,6 +22,7 @@ import { TableSelectorProvider, useTableSelectorProps } from './TableSelectorPro import * as bp from './hooks'; import { useTableBlockDecoratorProps } from '../modules/blocks/data-blocks/table/hooks/useTableBlockDecoratorProps'; import { useListBlockDecoratorProps } from '../modules/blocks/data-blocks/list/hooks/useListBlockDecoratorProps'; +import { useTableSelectorDecoratorProps } from '../modules/blocks/data-blocks/table-selector/hooks/useTableSelectorDecoratorProps'; // TODO: delete this, replaced by `BlockSchemaComponentPlugin` export const BlockSchemaComponentProvider: React.FC = (props) => { @@ -54,6 +55,7 @@ export const BlockSchemaComponentProvider: React.FC = (props) => { useTableSelectorProps, useTableBlockDecoratorProps, useListBlockDecoratorProps, + useTableSelectorDecoratorProps, }} > {props.children} @@ -103,6 +105,7 @@ export class BlockSchemaComponentPlugin extends Plugin { useTableSelectorProps, useTableBlockDecoratorProps, useListBlockDecoratorProps, + useTableSelectorDecoratorProps, }); } } diff --git a/packages/core/client/src/block-provider/TableSelectorProvider.tsx b/packages/core/client/src/block-provider/TableSelectorProvider.tsx index 11f3903e0..506c70e0e 100644 --- a/packages/core/client/src/block-provider/TableSelectorProvider.tsx +++ b/packages/core/client/src/block-provider/TableSelectorProvider.tsx @@ -11,6 +11,7 @@ import { RecordProvider, useRecord } from '../record-provider'; import { SchemaComponentOptions } from '../schema-component'; import { BlockProvider, RenderChildrenWithAssociationFilter, useBlockRequestContext } from './BlockProvider'; import { useParsedFilter } from './hooks'; +import { withDynamicSchemaProps } from '../application/hoc/withDynamicSchemaProps'; type Params = { filter?: any; @@ -141,7 +142,7 @@ const useAssociationNames = (collection) => { ); }; -export const TableSelectorProvider = (props: TableSelectorProviderProps) => { +export const TableSelectorProvider = withDynamicSchemaProps((props: TableSelectorProviderProps) => { const parentParams = useTableSelectorParams(); const fieldSchema = useFieldSchema(); const { getCollectionJoinField, getCollectionFields } = useCollectionManager_deprecated(); @@ -263,7 +264,7 @@ export const TableSelectorProvider = (props: TableSelectorProviderProps) => { ); -}; +}); export const useTableSelectorContext = () => { return useContext(TableSelectorContext); diff --git a/packages/core/client/src/modules/blocks/data-blocks/table-selector/TableSelectorInitializer.tsx b/packages/core/client/src/modules/blocks/data-blocks/table-selector/TableSelectorInitializer.tsx index 85733dc98..908a2894a 100644 --- a/packages/core/client/src/modules/blocks/data-blocks/table-selector/TableSelectorInitializer.tsx +++ b/packages/core/client/src/modules/blocks/data-blocks/table-selector/TableSelectorInitializer.tsx @@ -2,7 +2,7 @@ import { FormOutlined } from '@ant-design/icons'; import React from 'react'; import { useCollection_deprecated } from '../../../../collection-manager'; -import { createTableSelectorSchema } from '../../../../schema-initializer/utils'; +import { createTableSelectorUISchema } from './createTableSelectorUISchema'; import { SchemaInitializerItem, useSchemaInitializer, useSchemaInitializerItem } from '../../../../application'; export const TableSelectorInitializer = () => { @@ -16,11 +16,10 @@ export const TableSelectorInitializer = () => { {...others} onClick={async () => { insert( - createTableSelectorSchema({ + createTableSelectorUISchema({ rowKey: collection.filterTargetKey, - collection: collection.name, + collectionName: collection.name, dataSource: collection.dataSource, - resource: collection.name, }), ); }} diff --git a/packages/core/client/src/modules/blocks/data-blocks/table-selector/__e2e__/schemaInitializer.test.ts b/packages/core/client/src/modules/blocks/data-blocks/table-selector/__e2e__/schemaInitializer.test.ts index 32bd72dce..a4d333bed 100644 --- a/packages/core/client/src/modules/blocks/data-blocks/table-selector/__e2e__/schemaInitializer.test.ts +++ b/packages/core/client/src/modules/blocks/data-blocks/table-selector/__e2e__/schemaInitializer.test.ts @@ -2,7 +2,7 @@ import { Page, expect, test } from '@nocobase/test/e2e'; import { createTable } from './utils'; test.describe('where table data selector can be added', () => { - test('popup', async ({ page, mockPage, mockRecord }) => { + test('popup', async ({ page, mockPage }) => { await createTable({ page, mockPage, fieldName: 'manyToOne' }); // 选中一行数据之后，弹窗自动关闭，且数据被填充到关联字段中 diff --git a/packages/core/client/src/modules/blocks/data-blocks/table-selector/__tests__/createTableSelectorSchema.test.ts b/packages/core/client/src/modules/blocks/data-blocks/table-selector/__tests__/createTableSelectorSchema.test.ts new file mode 100644 index 000000000..1821c6079 --- /dev/null +++ b/packages/core/client/src/modules/blocks/data-blocks/table-selector/__tests__/createTableSelectorSchema.test.ts @@ -0,0 +1,61 @@ +import { createTableSelectorUISchema } from '../createTableSelectorUISchema'; + +vi.mock('@formily/shared', () => { + return { + uid: () => 'mocked-uid', + }; +}); + +describe('createTableSelectorSchema', () => { + test('should return the correct schema', () => { + const schema = createTableSelectorUISchema({ + collectionName: 'example', + dataSource: 'example', + rowKey: 'id', + }); + + expect(schema).toMatchInlineSnapshot(` + { + "properties": { + "mocked-uid": { + "type": "void", + "x-component": "ActionBar", + "x-component-props": { + "style": { + "marginBottom": "var(--nb-spacing)", + }, + }, + "x-initializer": "table:configureActions", + }, + "value": { + "type": "array", + "x-component": "TableV2.Selector", + "x-component-props": { + "rowSelection": { + "type": "checkbox", + }, + }, + "x-initializer": "table:configureColumns", + "x-use-component-props": "useTableSelectorProps", + }, + }, + "type": "void", + "x-acl-action": "example:list", + "x-component": "CardItem", + "x-decorator": "TableSelectorProvider", + "x-decorator-props": { + "action": "list", + "collection": "example", + "dataSource": "example", + "params": { + "pageSize": 20, + }, + "rowKey": "id", + }, + "x-settings": "blockSettings:tableSelector", + "x-toolbar": "BlockSchemaToolbar", + "x-use-decorator-props": "useTableSelectorDecoratorProps", + } + `); + }); +}); diff --git a/packages/core/client/src/modules/blocks/data-blocks/table-selector/createTableSelectorUISchema.ts b/packages/core/client/src/modules/blocks/data-blocks/table-selector/createTableSelectorUISchema.ts new file mode 100644 index 000000000..3fb226e4b --- /dev/null +++ b/packages/core/client/src/modules/blocks/data-blocks/table-selector/createTableSelectorUISchema.ts @@ -0,0 +1,56 @@ +import { ISchema } from '@formily/react'; +import { uid } from '@formily/shared'; + +export const createTableSelectorUISchema = (options: { + collectionName: string; + dataSource: string; + rowKey: string; +}): ISchema => { + const { collectionName, dataSource, rowKey } = options; + + if (!collectionName || !dataSource || !rowKey) { + throw new Error('collectionName, dataSource, rowKey is required'); + } + + return { + type: 'void', + 'x-acl-action': `${collectionName}:list`, + 'x-decorator': 'TableSelectorProvider', + 'x-use-decorator-props': 'useTableSelectorDecoratorProps', + 'x-decorator-props': { + collection: collectionName, + dataSource, + action: 'list', + params: { + pageSize: 20, + }, + rowKey, + }, + 'x-toolbar': 'BlockSchemaToolbar', + 'x-settings': 'blockSettings:tableSelector', + 'x-component': 'CardItem', + properties: { + [uid()]: { + type: 'void', + 'x-initializer': 'table:configureActions', + 'x-component': 'ActionBar', + 'x-component-props': { + style: { + marginBottom: 'var(--nb-spacing)', + }, + }, + }, + value: { + type: 'array', + 'x-initializer': 'table:configureColumns', + 'x-component': 'TableV2.Selector', + 'x-use-component-props': 'useTableSelectorProps', + 'x-component-props': { + rowSelection: { + type: 'checkbox', + }, + }, + }, + }, + }; +}; diff --git a/packages/core/client/src/modules/blocks/data-blocks/table-selector/hooks/useTableSelectorDecoratorProps.ts b/packages/core/client/src/modules/blocks/data-blocks/table-selector/hooks/useTableSelectorDecoratorProps.ts new file mode 100644 index 000000000..634013b9a --- /dev/null +++ b/packages/core/client/src/modules/blocks/data-blocks/table-selector/hooks/useTableSelectorDecoratorProps.ts @@ -0,0 +1 @@ +export function useTableSelectorDecoratorProps() {} diff --git a/packages/core/client/src/modules/fields/component/Picker/TableSelectorInitializers.tsx b/packages/core/client/src/modules/fields/component/Picker/TableSelectorInitializers.tsx index 403ea1d41..319d66c17 100644 --- a/packages/core/client/src/modules/fields/component/Picker/TableSelectorInitializers.tsx +++ b/packages/core/client/src/modules/fields/component/Picker/TableSelectorInitializers.tsx @@ -2,11 +2,7 @@ import { useCollection_deprecated } from '../../../..'; import { CompatibleSchemaInitializer } from '../../../../application/schema-initializer/CompatibleSchemaInitializer'; import { gridRowColWrap } from '../../../../schema-initializer/utils'; -/** - * @deprecated - */ -export const tableSelectorInitializers_deprecated = new CompatibleSchemaInitializer({ - name: 'TableSelectorInitializers', +const commonOptions = { wrap: gridRowColWrap, title: '{{t("Add block")}}', icon: 'PlusOutlined', @@ -84,88 +80,20 @@ export const tableSelectorInitializers_deprecated = new CompatibleSchemaInitiali ], }, ], +}; + +/** + * @deprecated + */ +export const tableSelectorInitializers_deprecated = new CompatibleSchemaInitializer({ + name: 'TableSelectorInitializers', + ...commonOptions, }); export const tableSelectorInitializers = new CompatibleSchemaInitializer( { name: 'popup:tableSelector:addBlock', - wrap: gridRowColWrap, - title: '{{t("Add block")}}', - icon: 'PlusOutlined', - items: [ - { - type: 'itemGroup', - title: '{{t("Selector")}}', - name: 'selector', - children: [ - { - name: 'title', - title: 'Table', - Component: 'TableSelectorInitializer', - }, - ], - }, - { - type: 'itemGroup', - title: '{{t("Filter blocks")}}', - name: 'filterBlocks', - useChildren() { - const { name, dataSource } = useCollection_deprecated(); - return [ - { - name: 'filterFormBlockInTableSelector', - title: '{{t("Form")}}', - Component: 'FilterFormBlockInitializer', - componentProps: { - filterCollections() { - return false; - }, - onlyCurrentDataSource: true, - }, - collectionName: name, - dataSource, - }, - { - name: 'filterCollapseBlockInTableSelector', - title: '{{t("Collapse")}}', - Component: 'FilterCollapseBlockInitializer', - componentProps: { - filterCollections() { - return false; - }, - onlyCurrentDataSource: true, - }, - collectionName: name, - dataSource, - }, - ]; - }, - }, - { - type: 'itemGroup', - title: '{{t("Other blocks")}}', - name: 'otherBlocks', - children: [ - { - title: '{{t("Add text")}}', - Component: 'BlockItemInitializer', - name: 'addText', - schema: { - type: 'void', - 'x-editable': false, - 'x-decorator': 'BlockItem', - // 'x-designer': 'Markdown.Void.Designer', - 'x-toolbar': 'BlockSchemaToolbar', - 'x-settings': 'blockSettings:markdown', - 'x-component': 'Markdown.Void', - 'x-component-props': { - content: '{{t("This is a demo text, **supports Markdown syntax**.")}}', - }, - }, - }, - ], - }, - ], + ...commonOptions, }, tableSelectorInitializers_deprecated, ); diff --git a/packages/core/client/src/schema-initializer/utils.ts b/packages/core/client/src/schema-initializer/utils.ts index 2525d5f89..01b339c4d 100644 --- a/packages/core/client/src/schema-initializer/utils.ts +++ b/packages/core/client/src/schema-initializer/utils.ts @@ -1415,55 +1415,6 @@ export const createCollapseBlockSchema = (options) => { return schema; }; -export const createTableSelectorSchema = (options) => { - const { collection, dataSource, resource, rowKey, ...others } = options; - const schema: ISchema = { - type: 'void', - 'x-acl-action': `${resource || collection}:list`, - 'x-decorator': 'TableSelectorProvider', - 'x-decorator-props': { - collection, - resource: resource || collection, - dataSource, - action: 'list', - params: { - pageSize: 20, - }, - rowKey, - ...others, - }, - 'x-toolbar': 'BlockSchemaToolbar', - 'x-settings': 'blockSettings:tableSelector', - 'x-component': 'CardItem', - properties: { - [uid()]: { - type: 'void', - 'x-initializer': 'table:configureActions', - 'x-component': 'ActionBar', - 'x-component-props': { - style: { - marginBottom: 'var(--nb-spacing)', - }, - }, - properties: {}, - }, - value: { - type: 'array', - 'x-initializer': 'table:configureColumns', - 'x-component': 'TableV2.Selector', - 'x-component-props': { - rowSelection: { - type: 'checkbox', - }, - useProps: '{{ useTableSelectorProps }}', - }, - properties: {}, - }, - }, - }; - return schema; -}; - const getChildren = ({ collections, dataSource,