ruiling/tachybase_todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'upstream/main' into fix_new_version

Browse Source
This commit is contained in:
sealday 2024-03-27 19:27:21 +08:00
commit 86ffb8f4a9
75 changed files with 2296 additions and 894 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/core/client/src/block-provider/BlockSchemaComponentProvider.tsx
View File

@ -1,9 +1,14 @@
import React from 'react';
import { Plugin } from '../application/Plugin';
import { ActionSchemaToolbar } from '../modules/actions/ActionSchemaToolbar';
import { CollapseItemSchemaToolbar } from '../modules/blocks/filter-blocks/collapse/CollapseItemSchemaToolbar';
import { BlockSchemaToolbar } from '../modules/blocks/BlockSchemaToolbar';
import { FormItemSchemaToolbar } from '../modules/blocks/data-blocks/form/FormItemSchemaToolbar';
import { useCreateFormBlockDecoratorProps } from '../modules/blocks/data-blocks/form/hooks/useCreateFormBlockDecoratorProps';
import { useCreateFormBlockProps } from '../modules/blocks/data-blocks/form/hooks/useCreateFormBlockProps';
import { useEditFormBlockDecoratorProps } from '../modules/blocks/data-blocks/form/hooks/useEditFormBlockDecoratorProps';
import { useEditFormBlockProps } from '../modules/blocks/data-blocks/form/hooks/useEditFormBlockProps';
import { TableColumnSchemaToolbar } from '../modules/blocks/data-blocks/table/TableColumnSchemaToolbar';
import { CollapseItemSchemaToolbar } from '../modules/blocks/filter-blocks/collapse/CollapseItemSchemaToolbar';
import { SchemaComponentOptions } from '../schema-component';
import { RecordLink, useParamsFromRecord, useSourceIdFromParentRecord, useSourceIdFromRecord } from './BlockProvider';
import { DetailsBlockProvider, useDetailsBlockProps } from './DetailsBlockProvider';
@ -15,8 +20,10 @@ import { useTableBlockProps } from '../modules/blocks/data-blocks/table/hooks/us
import { TableFieldProvider, useTableFieldProps } from './TableFieldProvider';
import { TableSelectorProvider, useTableSelectorProps } from './TableSelectorProvider';
import * as bp from './hooks';
import { BlockSchemaToolbar } from '../modules/blocks/BlockSchemaToolbar';
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';
import { useCollapseBlockDecoratorProps } from '../modules/blocks/filter-blocks/collapse/hooks/useCollapseBlockDecoratorProps';
// TODO: delete this, replaced by `BlockSchemaComponentPlugin`
export const BlockSchemaComponentProvider: React.FC = (props) => {
@ -38,12 +45,19 @@ export const BlockSchemaComponentProvider: React.FC = (props) => {
useSourceIdFromParentRecord,
useParamsFromRecord,
useFormBlockProps,
useCreateFormBlockProps,
useCreateFormBlockDecoratorProps,
useEditFormBlockDecoratorProps,
useEditFormBlockProps,
useFormFieldProps,
useDetailsBlockProps,
useTableFieldProps,
useTableBlockProps,
useTableSelectorProps,
useTableBlockDecoratorProps,
useListBlockDecoratorProps,
useTableSelectorDecoratorProps,
useCollapseBlockDecoratorProps,
}}
>
{props.children}
@ -82,12 +96,19 @@ export class BlockSchemaComponentPlugin extends Plugin {
useSourceIdFromParentRecord,
useParamsFromRecord,
useFormBlockProps,
useCreateFormBlockProps,
useCreateFormBlockDecoratorProps,
useEditFormBlockDecoratorProps,
useEditFormBlockProps,
useFormFieldProps,
useDetailsBlockProps,
useTableFieldProps,
useTableBlockProps,
useTableSelectorProps,
useTableBlockDecoratorProps,
useListBlockDecoratorProps,
useTableSelectorDecoratorProps,
useCollapseBlockDecoratorProps,
});
}
}

7
packages/core/client/src/block-provider/FormBlockProvider.tsx
View File

@ -10,6 +10,7 @@ import { Templates as DataTemplateSelect } from '../schema-component/antd/form-v
import { BlockProvider, useBlockRequestContext } from './BlockProvider';
import { TemplateBlockProvider } from './TemplateBlockProvider';
import { FormActiveFieldsProvider } from './hooks/useFormActiveFields';
import { withDynamicSchemaProps } from '../application/hoc/withDynamicSchemaProps';
export const FormBlockContext = createContext<{
form?: any;
@ -29,7 +30,7 @@ FormBlockContext.displayName = 'FormBlockContext';
const InternalFormBlockProvider = (props) => {
const ctx = useFormBlockContext();
const { action, readPretty, params, association, collection } = props;
const { action, readPretty, params, collection } = props;
const field = useField();
const form = useMemo(
() =>
@ -89,7 +90,7 @@ export const useIsDetailBlock = () => {
return ctx.type !== 'create' && fieldSchema?.['x-acl-action'] !== 'create' && fieldSchema?.['x-action'] !== 'create';
};
export const FormBlockProvider = (props) => {
export const FormBlockProvider = withDynamicSchemaProps((props) => {
const record = useRecord();
const parentRecordData = useCollectionParentRecordData();
const { collection, isCusomeizeCreate } = props;
@ -120,7 +121,7 @@ export const FormBlockProvider = (props) => {
</BlockProvider>
</TemplateBlockProvider>
);
};
});
export const useFormBlockContext = () => {
return useContext(FormBlockContext);

5
packages/core/client/src/block-provider/TableSelectorProvider.tsx
View File

@ -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) => {
</BlockProvider>
</SchemaComponentOptions>
);
};
});
export const useTableSelectorContext = () => {
return useContext(TableSelectorContext);

1
packages/core/client/src/block-provider/hooks/index.ts
View File

@ -36,6 +36,7 @@ import { TableFieldResource } from '../TableFieldProvider';
export * from './useFormActiveFields';
export * from './useParsedFilter';
export * from './useDataBlockSourceId';
export const usePickActionProps = () => {
const form = useForm();

1
packages/core/client/src/block-provider/hooks/useDataBlockSourceId.tsx
View File

@ -7,6 +7,7 @@ import {
} from '../..';
/**
* @internal
* 注意：这里有一个需要更改 schema 才能解决的问题，就是在获取 sourceId 的时候无法确定（在关系字段和当前表同表时）
* 是需要从 recordData 还是 parentRecordData 中获取;解决方法是通过更改 schema，在不同类型的关系区块中
* （`通过点击关系字段按钮打开的弹窗中创建的非关系字段区块`和`关系字段区块`）使用不同的 hook。

34
packages/core/client/src/modules/blocks/data-blocks/form/CreateFormBlockInitializer.tsx
View File

@ -4,8 +4,9 @@ import React from 'react';
import { SchemaInitializerItem, useSchemaInitializer, useSchemaInitializerItem } from '../../../../application';
import { useBlockAssociationContext } from '../../../../block-provider';
import { useCollection_deprecated } from '../../../../collection-manager';
import { useRecordCollectionDataSourceItems } from '../../../../schema-initializer/utils';
import { useSchemaTemplateManager } from '../../../../schema-templates';
import { createFormBlockSchema, useRecordCollectionDataSourceItems } from '../../../../schema-initializer/utils';
import { createCreateFormBlockUISchema } from './createCreateFormBlockUISchema';
// TODO: `SchemaInitializerItem` items
export const CreateFormBlockInitializer = () => {
@ -23,14 +24,19 @@ export const CreateFormBlockInitializer = () => {
if (item.template) {
const s = await getTemplateSchemaByMode(item);
if (item.template.componentName === 'FormItem') {
const blockSchema = createFormBlockSchema({
actionInitializers: 'createForm:configureActions',
const blockSchema = createCreateFormBlockUISchema(
association
? {
association,
dataSource: collection.dataSource,
collection: collection.name,
template: s,
settings: 'blockSettings:createForm',
});
templateSchema: s,
}
: {
collectionName: collection.name,
dataSource: collection.dataSource,
templateSchema: s,
},
);
if (item.mode === 'reference') {
blockSchema['x-template-key'] = item.template.key;
}
@ -40,13 +46,17 @@ export const CreateFormBlockInitializer = () => {
}
} else {
insert(
createFormBlockSchema({
actionInitializers: 'createForm:configureActions',
createCreateFormBlockUISchema(
association
? {
association,
dataSource: collection.dataSource,
collection: collection.name,
settings: 'blockSettings:createForm',
}),
}
: {
collectionName: collection.name,
dataSource: collection.dataSource,
},
),
);
}
}}

16
packages/core/client/src/modules/blocks/data-blocks/form/FormBlockInitializer.tsx
View File

@ -1,9 +1,9 @@
import { FormOutlined } from '@ant-design/icons';
import React, { useCallback } from 'react';
import { useSchemaInitializer, useSchemaInitializerItem } from '../../../../application';
import { createFormBlockSchema } from '../../../../schema-initializer/utils';
import { DataBlockInitializer } from '../../../../schema-initializer/items/DataBlockInitializer';
import { Collection, CollectionFieldOptions } from '../../../../data-source/collection/Collection';
import { DataBlockInitializer } from '../../../../schema-initializer/items/DataBlockInitializer';
import { createCreateFormBlockUISchema } from './createCreateFormBlockUISchema';
export const FormBlockInitializer = ({
filterCollections,
@ -44,11 +44,10 @@ export const FormBlockInitializer = ({
}
insert(
createFormBlockSchema({
collection: item.collectionName || item.name,
createCreateFormBlockUISchema({
collectionName: item.collectionName || item.name,
dataSource: item.dataSource,
isCusomeizeCreate,
settings: 'blockSettings:createForm',
}),
);
},
@ -65,12 +64,11 @@ export const FormBlockInitializer = ({
return templateWrap(templateSchema, { item });
}
const schema = createFormBlockSchema({
const schema = createCreateFormBlockUISchema({
isCusomeizeCreate,
dataSource: item.dataSource,
template: templateSchema,
collection: item.name,
settings: 'blockSettings:createForm',
templateSchema: templateSchema,
collectionName: item.name,
});
if (item.template && item.mode === 'reference') {
schema['x-template-key'] = item.template.key;

40
packages/core/client/src/modules/blocks/data-blocks/form/RecordFormBlockInitializer.tsx
View File

@ -3,8 +3,9 @@ import React, { useCallback } from 'react';
import { SchemaInitializerItem, useSchemaInitializer, useSchemaInitializerItem } from '../../../../application';
import { useBlockAssociationContext } from '../../../../block-provider';
import { useCollection_deprecated } from '../../../../collection-manager';
import { useRecordCollectionDataSourceItems } from '../../../../schema-initializer/utils';
import { useSchemaTemplateManager } from '../../../../schema-templates';
import { createFormBlockSchema, useRecordCollectionDataSourceItems } from '../../../../schema-initializer/utils';
import { createEditFormBlockUISchema } from './createEditFormBlockUISchema';
/**
* @deprecated
@ -43,16 +44,17 @@ export function useCreateEditFormBlock() {
const createEditFormBlock = useCallback(
({ item }) => {
insert(
createFormBlockSchema({
createEditFormBlockUISchema(
association
? {
association,
collection: item.collectionName || item.name,
dataSource: item.dataSource,
action: 'get',
useSourceId: '{{ useSourceIdFromParentRecord }}',
useParams: '{{ useParamsFromRecord }}',
actionInitializers: 'editForm:configureActions',
settings: 'blockSettings:editForm',
}),
}
: {
collectionName: item.collectionName || item.name,
dataSource: item.dataSource,
},
),
);
},
[association, insert],
@ -61,17 +63,19 @@ export function useCreateEditFormBlock() {
const templateWrap = useCallback(
(templateSchema, { item }) => {
if (item.template.componentName === 'FormItem') {
const blockSchema = createFormBlockSchema({
const blockSchema = createEditFormBlockUISchema(
association
? {
association,
collection: item.collectionName || item.name,
dataSource: item.dataSource,
action: 'get',
useSourceId: '{{ useSourceIdFromParentRecord }}',
useParams: '{{ useParamsFromRecord }}',
actionInitializers: 'editForm:configureActions',
template: templateSchema,
settings: 'blockSettings:editForm',
});
templateSchema: templateSchema,
}
: {
collectionName: item.collectionName || item.name,
dataSource: item.dataSource,
templateSchema: templateSchema,
},
);
if (item.mode === 'reference') {
blockSchema['x-template-key'] = item.template.key;
}

64
packages/core/client/src/modules/blocks/data-blocks/form/__tests__/createCreateFormBlockUISchema.test.ts Normal file
View File

@ -0,0 +1,64 @@
import { CreateFormBlockUISchemaOptions, createCreateFormBlockUISchema } from '../createCreateFormBlockUISchema';
vi.mock('@formily/shared', () => {
return {
uid: () => 'mocked-uid',
};
});
describe('createCreateFormBlockUISchema', () => {
it('should create a schema with all options', () => {
const options: CreateFormBlockUISchemaOptions = {
collectionName: 'users',
dataSource: 'userDataSource',
association: 'userAssociation',
templateSchema: { type: 'string' },
isCusomeizeCreate: true,
};
const result = createCreateFormBlockUISchema(options);
expect(result).toMatchInlineSnapshot(`
{
"properties": {
"mocked-uid": {
"properties": {
"grid": {
"type": "string",
},
"mocked-uid": {
"type": "void",
"x-component": "ActionBar",
"x-component-props": {
"layout": "one-column",
"style": {
"marginTop": 24,
},
},
"x-initializer": "createForm:configureActions",
},
},
"type": "void",
"x-component": "FormV2",
"x-use-component-props": "useCreateFormBlockProps",
},
},
"type": "void",
"x-acl-action": "userAssociation:create",
"x-acl-action-props": {
"skipScopeCheck": true,
},
"x-component": "CardItem",
"x-decorator": "FormBlockProvider",
"x-decorator-props": {
"association": "userAssociation",
"collection": "users",
"dataSource": "userDataSource",
"isCusomeizeCreate": true,
},
"x-settings": "blockSettings:createForm",
"x-toolbar": "BlockSchemaToolbar",
"x-use-decorator-props": "useCreateFormBlockDecoratorProps",
}
`);
});
});

62
packages/core/client/src/modules/blocks/data-blocks/form/__tests__/createEditFormBlockUISchema.test.ts Normal file
View File

@ -0,0 +1,62 @@
import { ISchema } from '@formily/react';
import { vi } from 'vitest';
import { createEditFormBlockUISchema } from '../createEditFormBlockUISchema';
vi.mock('@formily/shared', () => ({
uid: () => 'uniqueId',
}));
describe('createEditFormBlockUISchema', () => {
it('should create a schema with all options', () => {
const schema = createEditFormBlockUISchema({
collectionName: 'users',
dataSource: 'UserDataSource',
association: 'users:update',
templateSchema: { type: 'string' },
});
expect(schema).toMatchInlineSnapshot(`
{
"properties": {
"uniqueId": {
"properties": {
"grid": {
"type": "string",
},
"uniqueId": {
"type": "void",
"x-component": "ActionBar",
"x-component-props": {
"layout": "one-column",
"style": {
"marginTop": 24,
},
},
"x-initializer": "editForm:configureActions",
},
},
"type": "void",
"x-component": "FormV2",
"x-use-component-props": "useEditFormBlockProps",
},
},
"type": "void",
"x-acl-action": "users:update:update",
"x-acl-action-props": {
"skipScopeCheck": false,
},
"x-component": "CardItem",
"x-decorator": "FormBlockProvider",
"x-decorator-props": {
"action": "get",
"association": "users:update",
"collection": "users",
"dataSource": "UserDataSource",
},
"x-settings": "blockSettings:editForm",
"x-toolbar": "BlockSchemaToolbar",
"x-use-decorator-props": "useEditFormBlockDecoratorProps",
}
`);
});
});

70
packages/core/client/src/modules/blocks/data-blocks/form/createCreateFormBlockUISchema.ts Normal file
View File

@ -0,0 +1,70 @@
import { ISchema } from '@formily/react';
import { uid } from '@formily/shared';
export interface CreateFormBlockUISchemaOptions {
dataSource: string;
/** 如果传了 association 就不需要再传 collectionName 了 */
collectionName?: string;
association?: string;
templateSchema?: ISchema;
isCusomeizeCreate?: boolean;
}
/**
* 创建新增表单的 UI Schema
* @returns
*/
export function createCreateFormBlockUISchema(options: CreateFormBlockUISchemaOptions): ISchema {
const { collectionName, association, dataSource, templateSchema, isCusomeizeCreate } = options;
const resourceName = association || collectionName;
if (!dataSource) {
throw new Error('dataSource are required');
}
const schema: ISchema = {
type: 'void',
'x-acl-action-props': {
skipScopeCheck: true,
},
'x-acl-action': `${resourceName}:create`,
'x-decorator': 'FormBlockProvider',
'x-use-decorator-props': 'useCreateFormBlockDecoratorProps',
'x-decorator-props': {
dataSource,
collection: collectionName,
association,
isCusomeizeCreate,
},
'x-toolbar': 'BlockSchemaToolbar',
'x-settings': 'blockSettings:createForm',
'x-component': 'CardItem',
properties: {
[uid()]: {
type: 'void',
'x-component': 'FormV2',
'x-use-component-props': 'useCreateFormBlockProps',
properties: {
grid: templateSchema || {
type: 'void',
'x-component': 'Grid',
'x-initializer': 'form:configureFields',
properties: {},
},
[uid()]: {
type: 'void',
'x-initializer': 'createForm:configureActions',
'x-component': 'ActionBar',
'x-component-props': {
layout: 'one-column',
style: {
marginTop: 24,
},
},
},
},
},
},
};
return schema;
}

64
packages/core/client/src/modules/blocks/data-blocks/form/createEditFormBlockUISchema.ts Normal file
View File

@ -0,0 +1,64 @@
import { ISchema } from '@formily/react';
import { uid } from '@formily/shared';
interface EditFormBlockOptions {
dataSource: string;
/** 如果传了 association 就不需要再传 collectionName 了 */
collectionName?: string;
association?: string;
templateSchema?: ISchema;
}
export function createEditFormBlockUISchema(options: EditFormBlockOptions): ISchema {
const { collectionName, dataSource, association, templateSchema } = options;
const resourceName = association || collectionName;
if (!dataSource) {
throw new Error('dataSource are required');
}
return {
type: 'void',
'x-acl-action-props': {
skipScopeCheck: false,
},
'x-acl-action': `${resourceName}:update`,
'x-decorator': 'FormBlockProvider',
'x-use-decorator-props': 'useEditFormBlockDecoratorProps',
'x-decorator-props': {
action: 'get',
dataSource,
collection: collectionName,
association,
},
'x-toolbar': 'BlockSchemaToolbar',
'x-settings': 'blockSettings:editForm',
'x-component': 'CardItem',
properties: {
[uid()]: {
type: 'void',
'x-component': 'FormV2',
'x-use-component-props': 'useEditFormBlockProps',
properties: {
grid: templateSchema || {
type: 'void',
'x-component': 'Grid',
'x-initializer': 'form:configureFields',
properties: {},
},
[uid()]: {
type: 'void',
'x-initializer': 'editForm:configureActions',
'x-component': 'ActionBar',
'x-component-props': {
layout: 'one-column',
style: {
marginTop: 24,
},
},
},
},
},
},
};
}

15
packages/core/client/src/modules/blocks/data-blocks/form/hooks/useCreateFormBlockDecoratorProps.ts Normal file
View File

@ -0,0 +1,15 @@
import { useFormBlockSourceId } from './useFormBlockSourceId';
export function useCreateFormBlockDecoratorProps(props) {
let sourceId;
// association 的值是固定不变的，所以这里可以使用 hooks
if (props.association) {
// eslint-disable-next-line react-hooks/rules-of-hooks
sourceId = useFormBlockSourceId(props);
}
return {
sourceId,
};
}

5
packages/core/client/src/modules/blocks/data-blocks/form/hooks/useCreateFormBlockProps.ts Normal file
View File

@ -0,0 +1,5 @@
import { useFormBlockProps } from '../../../../../block-provider/FormBlockProvider';
export function useCreateFormBlockProps() {
return useFormBlockProps();
}

22
packages/core/client/src/modules/blocks/data-blocks/form/hooks/useEditFormBlockDecoratorProps.ts Normal file
View File

@ -0,0 +1,22 @@
import { useParamsFromRecord } from '../../../../../block-provider/BlockProvider';
import { useFormBlockSourceId } from './useFormBlockSourceId';
export function useEditFormBlockDecoratorProps(props) {
const params = useFormBlockParams();
let sourceId;
// association 的值是固定不变的，所以这里可以使用 hooks
if (props.association) {
// eslint-disable-next-line react-hooks/rules-of-hooks
sourceId = useFormBlockSourceId(props);
}
return {
params,
sourceId,
};
}
function useFormBlockParams() {
return useParamsFromRecord();
}

5
packages/core/client/src/modules/blocks/data-blocks/form/hooks/useEditFormBlockProps.ts Normal file
View File

@ -0,0 +1,5 @@
import { useFormBlockProps } from '../../../../../block-provider/FormBlockProvider';
export function useEditFormBlockProps() {
return useFormBlockProps();
}

5
packages/core/client/src/modules/blocks/data-blocks/form/hooks/useFormBlockSourceId.ts Normal file
View File

@ -0,0 +1,5 @@
import { useDataBlockSourceId } from '../../../../../block-provider/hooks/useDataBlockSourceId';
export function useFormBlockSourceId(props) {
return useDataBlockSourceId(props);
}

7
packages/core/client/src/modules/blocks/data-blocks/form/index.ts
View File

@ -1,11 +1,12 @@
export * from './createFormBlockSettings';
export * from './CreateFormBlockInitializer';
export * from './FormBlockInitializer';
export * from './FormItemSchemaToolbar';
export * from './RecordFormBlockInitializer';
export * from './editFormBlockSettings';
export * from './createCreateFormBlockUISchema';
export * from './createFormActionInitializers';
export * from './createFormBlockSettings';
export * from './editFormBlockSettings';
export * from './fieldSettingsFormItem';
export * from './formActionInitializers';
export * from './formItemInitializers';
export * from './fieldSettingsFormItem';
export * from './updateFormActionInitializers';

5
packages/core/client/src/modules/blocks/data-blocks/list/ListBlockInitializer.tsx
View File

@ -2,7 +2,7 @@ import { OrderedListOutlined } from '@ant-design/icons';
import React from 'react';
import { useSchemaInitializer, useSchemaInitializerItem } from '../../../../application';
import { useCollectionManager_deprecated } from '../../../../collection-manager';
import { createListBlockSchema } from '../../../../schema-initializer/utils';
import { createListBlockSchema } from './createListBlockSchema';
import { DataBlockInitializer } from '../../../../schema-initializer/items/DataBlockInitializer';
import { Collection, CollectionFieldOptions } from '../../../../data-source/collection/Collection';
@ -48,10 +48,9 @@ export const ListBlockInitializer = ({
const collection = getCollection(item.name, item.dataSource);
const schema = createListBlockSchema({
collection: item.name,
collectionName: item.name,
dataSource: item.dataSource,
rowKey: collection.filterTargetKey || 'id',
settings: 'blockSettings:list',
});
insert(schema);
}}

97
packages/core/client/src/modules/blocks/data-blocks/list/__tests__/createListBlockSchema.test.ts Normal file
View File

@ -0,0 +1,97 @@
import { createListBlockSchema } from '../createListBlockSchema';
describe('createListBlockSchema', () => {
test('should return the correct schema', () => {
const options = {
collectionName: 'users',
dataSource: 'users',
association: 'user',
templateSchema: {
type: 'object',
properties: {
name: {
type: 'string',
},
age: {
type: 'number',
},
},
},
rowKey: 'id',
};
const schema = createListBlockSchema(options);
expect(schema).toMatchInlineSnapshot(`
{
"properties": {
"actionBar": {
"type": "void",
"x-component": "ActionBar",
"x-component-props": {
"style": {
"marginBottom": "var(--nb-spacing)",
},
},
"x-initializer": "list:configureActions",
},
"list": {
"properties": {
"item": {
"properties": {
"actionBar": {
"type": "void",
"x-align": "left",
"x-component": "ActionBar",
"x-component-props": {
"layout": "one-column",
},
"x-initializer": "list:configureItemActions",
"x-use-component-props": "useListActionBarProps",
},
"grid": {
"properties": {
"age": {
"type": "number",
},
"name": {
"type": "string",
},
},
"type": "object",
},
},
"type": "object",
"x-component": "List.Item",
"x-read-pretty": true,
"x-use-component-props": "useListItemProps",
},
},
"type": "array",
"x-component": "List",
"x-use-component-props": "useListBlockProps",
},
},
"type": "void",
"x-acl-action": "user:view",
"x-component": "CardItem",
"x-decorator": "List.Decorator",
"x-decorator-props": {
"action": "list",
"association": "user",
"collection": "users",
"dataSource": "users",
"params": {
"pageSize": 10,
},
"readPretty": true,
"rowKey": "id",
"runWhenParamsChanged": true,
},
"x-settings": "blockSettings:list",
"x-toolbar": "BlockSchemaToolbar",
"x-use-decorator-props": "useListBlockDecoratorProps",
}
`);
});
});

76
packages/core/client/src/modules/blocks/data-blocks/list/createListBlockSchema.ts Normal file
View File

@ -0,0 +1,76 @@
import { ISchema } from '@formily/react';
export const createListBlockSchema = (options: {
dataSource: string;
collectionName?: string;
association?: string;
templateSchema?: ISchema;
rowKey?: string;
}): ISchema => {
const { collectionName, dataSource, association, templateSchema, rowKey } = options;
const resourceName = association || collectionName;
return {
type: 'void',
'x-acl-action': `${resourceName}:view`,
'x-decorator': 'List.Decorator',
'x-use-decorator-props': 'useListBlockDecoratorProps',
'x-decorator-props': {
collection: collectionName,
dataSource,
association,
readPretty: true,
action: 'list',
params: {
pageSize: 10,
},
runWhenParamsChanged: true,
rowKey,
},
'x-component': 'CardItem',
'x-toolbar': 'BlockSchemaToolbar',
'x-settings': 'blockSettings:list',
properties: {
actionBar: {
type: 'void',
'x-initializer': 'list:configureActions',
'x-component': 'ActionBar',
'x-component-props': {
style: {
marginBottom: 'var(--nb-spacing)',
},
},
},
list: {
type: 'array',
'x-component': 'List',
'x-use-component-props': 'useListBlockProps',
properties: {
item: {
type: 'object',
'x-component': 'List.Item',
'x-read-pretty': true,
'x-use-component-props': 'useListItemProps',
properties: {
grid: templateSchema || {
type: 'void',
'x-component': 'Grid',
'x-initializer': 'details:configureFields',
},
actionBar: {
type: 'void',
'x-align': 'left',
'x-initializer': 'list:configureItemActions',
'x-component': 'ActionBar',
'x-use-component-props': 'useListActionBarProps',
'x-component-props': {
layout: 'one-column',
},
},
},
},
},
},
},
};
};

15
packages/core/client/src/modules/blocks/data-blocks/list/hooks/useListBlockDecoratorProps.ts Normal file
View File

@ -0,0 +1,15 @@
import { useDataBlockSourceId } from '../../../../../block-provider/hooks/useDataBlockSourceId';
export function useListBlockDecoratorProps(props) {
let sourceId;
// 因为 association 的值是固定的，所以这里可以使用 hooks
if (props.association) {
// eslint-disable-next-line react-hooks/rules-of-hooks
sourceId = useDataBlockSourceId({ association: props.association });
}
return {
sourceId,
};
}

7
packages/core/client/src/modules/blocks/data-blocks/table-selector/TableSelectorInitializer.tsx
View File

@ -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,
}),
);
}}

2
packages/core/client/src/modules/blocks/data-blocks/table-selector/__e2e__/schemaInitializer.test.ts
View File

@ -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' });
// 选中一行数据之后，弹窗自动关闭，且数据被填充到关联字段中

61
packages/core/client/src/modules/blocks/data-blocks/table-selector/__tests__/createTableSelectorSchema.test.ts Normal file
View File

@ -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",
}
`);
});
});

56
packages/core/client/src/modules/blocks/data-blocks/table-selector/createTableSelectorUISchema.ts Normal file
View File

@ -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',
},
},
},
},
};
};

1
packages/core/client/src/modules/blocks/data-blocks/table-selector/hooks/useTableSelectorDecoratorProps.ts Normal file
View File

@ -0,0 +1 @@
export function useTableSelectorDecoratorProps() {}

4
packages/core/client/src/modules/blocks/filter-blocks/collapse/FilterCollapseBlockInitializer.tsx
View File

@ -2,7 +2,7 @@ import { TableOutlined } from '@ant-design/icons';
import React from 'react';
import { useSchemaInitializer, useSchemaInitializerItem } from '../../../../application';
import { createCollapseBlockSchema } from '../../../../schema-initializer/utils';
import { createCollapseBlockSchema } from './createFilterCollapseBlockSchema';
import { DataBlockInitializer } from '../../../../schema-initializer/items/DataBlockInitializer';
import { Collection, CollectionFieldOptions } from '../../../../data-source';
@ -27,7 +27,7 @@ export const FilterCollapseBlockInitializer = ({
onCreateBlockSchema={async ({ item }) => {
const schema = createCollapseBlockSchema({
dataSource: item.dataSource,
collection: item.collectionName || item.name,
collectionName: item.collectionName || item.name,
// 与数据区块做区分
blockType: 'filter',
});

44
packages/core/client/src/modules/blocks/filter-blocks/collapse/__tests__/createCollapseBlockSchema.test.ts Normal file
View File

@ -0,0 +1,44 @@
import { createCollapseBlockSchema } from '../createFilterCollapseBlockSchema';
vi.mock('@formily/shared', () => ({
uid: vi.fn().mockReturnValue('mocked-uid'),
}));
describe('createCollapseBlockSchema', () => {
it('should return the correct schema', () => {
const options = {
collectionName: 'testCollection',
dataSource: 'testDataSource',
blockType: 'testBlockType',
};
const schema = createCollapseBlockSchema(options);
expect(schema).toEqual({
type: 'void',
'x-decorator': 'AssociationFilter.Provider',
'x-use-decorator-props': 'useCollapseBlockDecoratorProps',
'x-decorator-props': {
collection: 'testCollection',
dataSource: 'testDataSource',
blockType: 'testBlockType',
associationFilterStyle: {
width: '100%',
},
name: 'filter-collapse',
},
'x-toolbar': 'BlockSchemaToolbar',
'x-settings': 'blockSettings:filterCollapse',
'x-component': 'CardItem',
'x-filter-targets': [],
properties: {
'mocked-uid': {
type: 'void',
'x-action': 'associateFilter',
'x-initializer': 'filterCollapse:configureFields',
'x-component': 'AssociationFilter',
},
},
});
});
});

37
packages/core/client/src/modules/blocks/filter-blocks/collapse/createFilterCollapseBlockSchema.ts Normal file
View File

@ -0,0 +1,37 @@
import { ISchema } from '@formily/react';
import { uid } from '@formily/shared';
export const createCollapseBlockSchema = (options: {
collectionName: string;
dataSource: string;
blockType: string;
}): ISchema => {
const { collectionName, dataSource, blockType } = options;
return {
type: 'void',
'x-decorator': 'AssociationFilter.Provider',
'x-use-decorator-props': 'useCollapseBlockDecoratorProps',
'x-decorator-props': {
collection: collectionName,
dataSource,
blockType,
associationFilterStyle: {
width: '100%',
},
name: 'filter-collapse',
},
'x-toolbar': 'BlockSchemaToolbar',
'x-settings': 'blockSettings:filterCollapse',
'x-component': 'CardItem',
'x-filter-targets': [],
properties: {
[uid()]: {
type: 'void',
'x-action': 'associateFilter',
'x-initializer': 'filterCollapse:configureFields',
'x-component': 'AssociationFilter',
},
},
};
};

1
packages/core/client/src/modules/blocks/filter-blocks/collapse/hooks/useCollapseBlockDecoratorProps.ts Normal file
View File

@ -0,0 +1 @@
export function useCollapseBlockDecoratorProps() {}

236
packages/core/client/src/modules/fields/component/Picker/TableSelectorInitializers.tsx
View File

@ -2,170 +2,98 @@ import { useCollection_deprecated } from '../../../..';
import { CompatibleSchemaInitializer } from '../../../../application/schema-initializer/CompatibleSchemaInitializer';
import { gridRowColWrap } from '../../../../schema-initializer/utils';
const commonOptions = {
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**.")}}',
},
},
},
],
},
],
};
/**
* @deprecated
*/
export const tableSelectorInitializers_deprecated = new CompatibleSchemaInitializer({
name: 'TableSelectorInitializers',
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,
});
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,
);

10
packages/core/client/src/schema-component/antd/action/ActionBar.tsx
View File

@ -6,6 +6,7 @@ import { createPortal } from 'react-dom';
import { DndContext } from '../../common';
import { useDesignable, useProps } from '../../hooks';
import { useSchemaInitializerRender } from '../../../application';
import { withDynamicSchemaProps } from '../../../application/hoc/withDynamicSchemaProps';
interface ActionBarContextForceProps {
layout?: 'one-column' | 'tow-columns';
@ -46,10 +47,13 @@ const Portal: React.FC = (props) => {
);
};
export const ActionBar = observer(
(props: any) => {
export const ActionBar = withDynamicSchemaProps(
observer((props: any) => {
const { forceProps = {} } = useActionBarContext();
// 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
const { layout = 'tow-columns', style, spaceProps, ...others } = { ...useProps(props), ...forceProps } as any;
const fieldSchema = useFieldSchema();
const { render } = useSchemaInitializerRender(fieldSchema['x-initializer'], fieldSchema['x-initializer-props']);
const { designable } = useDesignable();
@ -128,6 +132,6 @@ export const ActionBar = observer(
{render()}
</div>
);
},
}),
{ displayName: 'ActionBar' },
);

1
packages/core/client/src/schema-component/antd/details/Details.tsx
View File

@ -1,6 +1,5 @@
import React from 'react';
import { FormV2 } from '../form-v2';
import { useDetailsBlockContext } from '../../../block-provider/DetailsBlockProvider';
import _ from 'lodash';
import { Empty } from 'antd';
import { useDataBlockRequest } from '../../../data-source';

11
packages/core/client/src/schema-component/antd/form-v2/Form.tsx
View File

@ -18,6 +18,7 @@ import { isVariable, REGEX_OF_VARIABLE } from '../../../variables/utils/isVariab
import { getInnermostKeyAndValue, getTargetField } from '../../common/utils/uitls';
import { useProps } from '../../hooks/useProps';
import { collectFieldStateOfLinkageRules, getTempFieldState } from './utils';
import { withDynamicSchemaProps } from '../../../application/hoc/withDynamicSchemaProps';
export interface FormProps {
[key: string]: any;
@ -197,14 +198,18 @@ export const Form: React.FC<FormProps> & {
FilterDesigner?: any;
ReadPrettyDesigner?: any;
Templates?: any;
} = observer(
(props) => {
} = withDynamicSchemaProps(
observer((props) => {
const field = useField<Field>();
// 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
const { form, disabled, ...others } = useProps(props);
const formDisabled = disabled || field.disabled;
return (
<ConfigProvider componentDisabled={formDisabled}>
<form
onSubmit={(e) => e.preventDefault()}
className={css`
.ant-formily-item-feedback-layout-loose {
margin-bottom: 12px;
@ -221,7 +226,7 @@ export const Form: React.FC<FormProps> & {
</form>
</ConfigProvider>
);
},
}),
{ displayName: 'Form' },
);

5
packages/core/client/src/schema-component/antd/list/List.Decorator.tsx
View File

@ -5,6 +5,7 @@ import { FormContext, useField } from '@formily/react';
import _ from 'lodash';
import React, { createContext, useContext, useEffect, useMemo } from 'react';
import { BlockProvider, useBlockRequestContext, useParsedFilter } from '../../../block-provider';
import { withDynamicSchemaProps } from '../../../application/hoc/withDynamicSchemaProps';
export const ListBlockContext = createContext<any>({});
ListBlockContext.displayName = 'ListBlockContext';
@ -52,7 +53,7 @@ const InternalListBlockProvider = (props) => {
);
};
export const ListBlockProvider = (props) => {
export const ListBlockProvider = withDynamicSchemaProps((props) => {
const { params } = props;
const { filter: parsedFilter } = useParsedFilter({
filterOption: params?.filter,
@ -75,7 +76,7 @@ export const ListBlockProvider = (props) => {
<InternalListBlockProvider {...props} />
</BlockProvider>
);
};
});
export const useListBlockContext = () => {
return useContext(ListBlockContext);

5
packages/core/client/src/schema-component/antd/list/List.Item.tsx
View File

@ -7,8 +7,9 @@ import { useDesignable } from '../../hooks';
import { useCollectionParentRecordData } from '../../../data-source/collection-record/CollectionRecordProvider';
import { RecordProvider } from '../../../record-provider';
import { withDynamicSchemaProps } from '../../../application/hoc/withDynamicSchemaProps';
export const ListItem = (props) => {
export const ListItem = withDynamicSchemaProps((props) => {
const field = useField<ObjectField>();
const { designable } = useDesignable();
const parentRecordData = useCollectionParentRecordData();
@ -29,4 +30,4 @@ export const ListItem = (props) => {
</RecordProvider>
</div>
);
};
});

3
packages/core/client/src/schema-component/antd/list/List.tsx
View File

@ -11,6 +11,7 @@ import { ListDesigner } from './List.Designer';
import { ListItem } from './List.Item';
import useStyles from './List.style';
import { useListActionBarProps } from './hooks';
import { withDynamicSchemaProps } from '../../../application/hoc/withDynamicSchemaProps';
const InternalList = (props) => {
const { service } = useListBlockContext();
@ -93,7 +94,7 @@ const InternalList = (props) => {
);
};
export const List = InternalList as typeof InternalList & {
export const List = withDynamicSchemaProps(InternalList) as typeof InternalList & {
Item: typeof ListItem;
Designer: typeof ListDesigner;
Decorator: typeof ListBlockProvider;

6
packages/core/client/src/schema-component/hooks/useProps.ts
View File

@ -8,6 +8,12 @@ interface Options {
}
const useDef = () => ({});
/**
* 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
* @param originalProps
* @returns
*/
export const useProps = (originalProps: any = {}) => {
const { useProps: useDynamicHook = useDef, ...others } = originalProps;
let useDynamicProps = useDynamicHook;

70
packages/core/client/src/schema-initializer/items/RecordAssociationFormBlockInitializer.tsx
View File

@ -1,10 +1,11 @@
import React, { useCallback, useMemo } from 'react';
import { FormOutlined } from '@ant-design/icons';
import React, { useCallback, useMemo } from 'react';
import { SchemaInitializerItem, useSchemaInitializer, useSchemaInitializerItem } from '../../application';
import { useSchemaTemplateManager } from '../../schema-templates';
import { createFormBlockSchema, useRecordCollectionDataSourceItems } from '../utils';
import { useCollectionManager_deprecated } from '../../collection-manager';
import { createCreateFormBlockUISchema } from '../../modules/blocks/data-blocks/form/createCreateFormBlockUISchema';
import { useSchemaTemplateManager } from '../../schema-templates';
import { useRecordCollectionDataSourceItems } from '../utils';
/**
* @deprecated
@ -18,31 +19,18 @@ export const RecordAssociationFormBlockInitializer = () => {
const field = itemConfig.field;
const collectionName = field.target;
const collection = useMemo(() => getCollection(collectionName), [collectionName]);
const resource = `${field.collectionName}.${field.name}`;
return (
<SchemaInitializerItem
icon={<FormOutlined />}
{...others}
onClick={async ({ item }) => {
const action = ['hasOne', 'belongsTo'].includes(field.type) ? 'get' : null;
const actionInitializers = ['hasOne', 'belongsTo'].includes(field.type)
? 'editForm:configureActions'
: 'createForm:configureActions';
if (item.template) {
const template = await getTemplateSchemaByMode(item);
if (item.template.componentName === 'FormItem') {
const blockSchema = createFormBlockSchema({
collection: collectionName,
const blockSchema = createCreateFormBlockUISchema({
dataSource: collection.dataSource,
resource,
association: resource,
action,
useSourceId: '{{ useSourceIdFromParentRecord }}',
useParams: '{{ useParamsFromRecord }}',
actionInitializers,
template: template,
settings: 'blockSettings:createForm',
association: `${field.collectionName}.${field.name}`,
templateSchema: template,
});
if (item.mode === 'reference') {
blockSchema['x-template-key'] = item.template.key;
@ -53,21 +41,19 @@ export const RecordAssociationFormBlockInitializer = () => {
}
} else {
insert(
createFormBlockSchema({
collection: collectionName,
resource,
createCreateFormBlockUISchema({
dataSource: collection.dataSource,
association: resource,
action,
useSourceId: '{{ useSourceIdFromParentRecord }}',
useParams: '{{ useParamsFromRecord }}',
actionInitializers,
settings: 'blockSettings:createForm',
association: `${field.collectionName}.${field.name}`,
}),
);
}
}}
items={useRecordCollectionDataSourceItems('FormItem', itemConfig, collection, resource)}
items={useRecordCollectionDataSourceItems(
'FormItem',
itemConfig,
collection,
`${field.collectionName}.${field.name}`,
)}
/>
);
};
@ -80,21 +66,11 @@ export function useCreateAssociationFormBlock() {
({ item }) => {
const field = item.associationField;
const collection = getCollection(field.target);
const action = ['hasOne', 'belongsTo'].includes(field.type) ? 'get' : null;
const actionInitializers = ['hasOne', 'belongsTo'].includes(field.type)
? 'editForm:configureActions'
: 'createForm:configureActions';
insert(
createFormBlockSchema({
collection: field.target,
createCreateFormBlockUISchema({
dataSource: collection.dataSource,
association: `${field.collectionName}.${field.name}`,
action,
useSourceId: '{{ useSourceIdFromParentRecord }}',
useParams: '{{ useParamsFromRecord }}',
actionInitializers,
settings: 'blockSettings:createForm',
}),
);
},
@ -104,23 +80,13 @@ export function useCreateAssociationFormBlock() {
const templateWrap = useCallback(
(templateSchema, { item }) => {
const field = item.associationField;
const action = ['hasOne', 'belongsTo'].includes(field.type) ? 'get' : null;
const collection = getCollection(field.target);
const actionInitializers = ['hasOne', 'belongsTo'].includes(field.type)
? 'editForm:configureActions'
: 'createForm:configureActions';
if (item.template.componentName === 'FormItem') {
const blockSchema = createFormBlockSchema({
collection: field.target,
const blockSchema = createCreateFormBlockUISchema({
dataSource: collection.dataSource,
association: `${field.collectionName}.${field.name}`,
action,
useSourceId: '{{ useSourceIdFromParentRecord }}',
useParams: '{{ useParamsFromRecord }}',
actionInitializers,
template: templateSchema,
settings: 'blockSettings:createForm',
templateSchema: templateSchema,
});
if (item.mode === 'reference') {
blockSchema['x-template-key'] = item.template.key;

8
packages/core/client/src/schema-initializer/items/RecordAssociationListBlockInitializer.tsx
View File

@ -4,7 +4,8 @@ import React, { useCallback } from 'react';
import { SchemaInitializerItem, useSchemaInitializer, useSchemaInitializerItem } from '../../application';
import { useCollectionManager_deprecated } from '../../collection-manager';
import { useSchemaTemplateManager } from '../../schema-templates';
import { createListBlockSchema, useRecordCollectionDataSourceItems } from '../utils';
import { useRecordCollectionDataSourceItems } from '../utils';
import { createListBlockSchema } from '../../modules/blocks/data-blocks/list/createListBlockSchema';
export const RecordAssociationListBlockInitializer = () => {
const itemConfig = useSchemaInitializerItem();
@ -28,11 +29,8 @@ export const RecordAssociationListBlockInitializer = () => {
insert(
createListBlockSchema({
rowKey: collection.filterTargetKey,
collection: field.target,
resource,
dataSource: collection.dataSource,
association: resource,
settings: 'blockSettings:list',
}),
);
}
@ -54,10 +52,8 @@ export function useCreateAssociationListBlock() {
insert(
createListBlockSchema({
rowKey: collection.filterTargetKey,
collection: field.target,
dataSource: collection.dataSource,
association: `${field.collectionName}.${field.name}`,
settings: 'blockSettings:list',
}),
);
},

200
packages/core/client/src/schema-initializer/utils.ts
View File

@ -1,6 +1,7 @@
import { Field, Form } from '@formily/core';
import { ISchema, Schema, useFieldSchema, useForm } from '@formily/react';
import { uid } from '@formily/shared';
import _ from 'lodash';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import {
@ -12,13 +13,12 @@ import {
useFormActiveFields,
useFormBlockContext,
} from '../';
import { FieldOptions, useCollection_deprecated, useCollectionManager_deprecated } from '../collection-manager';
import { FieldOptions, useCollectionManager_deprecated, useCollection_deprecated } from '../collection-manager';
import { Collection, CollectionFieldOptions } from '../data-source/collection/Collection';
import { useDataSourceManager } from '../data-source/data-source/DataSourceManagerProvider';
import { isAssocField } from '../filter-provider/utils';
import { useActionContext, useCompile, useDesignable } from '../schema-component';
import { useSchemaTemplateManager } from '../schema-templates';
import { Collection, CollectionFieldOptions } from '../data-source/collection/Collection';
import { useDataSourceManager } from '../data-source/data-source/DataSourceManagerProvider';
import _ from 'lodash';
export const itemsMerge = (items1) => {
return items1;
@ -972,94 +972,6 @@ export const createDetailsBlockSchema = (options) => {
return schema;
};
export const createListBlockSchema = (options) => {
const {
formItemInitializers = 'details:configureFields',
actionInitializers = 'list:configureActions',
itemActionInitializers = 'list:configureItemActions',
collection,
dataSource,
association,
template,
settings,
...others
} = options;
const resourceName = association || collection;
const schema: ISchema = {
type: 'void',
'x-acl-action': `${resourceName}:view`,
'x-decorator': 'List.Decorator',
'x-decorator-props': {
collection,
dataSource,
association,
readPretty: true,
action: 'list',
params: {
pageSize: 10,
},
runWhenParamsChanged: true,
...others,
},
'x-component': 'CardItem',
'x-toolbar': 'BlockSchemaToolbar',
'x-settings': settings,
properties: {
actionBar: {
type: 'void',
'x-initializer': actionInitializers,
'x-component': 'ActionBar',
'x-component-props': {
style: {
marginBottom: 'var(--nb-spacing)',
},
},
properties: {},
},
list: {
type: 'array',
'x-component': 'List',
'x-component-props': {
props: '{{ useListBlockProps }}',
},
properties: {
item: {
type: 'object',
'x-component': 'List.Item',
'x-read-pretty': true,
'x-component-props': {
useProps: '{{ useListItemProps }}',
},
properties: {
grid: template || {
type: 'void',
'x-component': 'Grid',
'x-initializer': formItemInitializers,
'x-initializer-props': {
useProps: '{{ useListItemInitializerProps }}',
},
properties: {},
},
actionBar: {
type: 'void',
'x-align': 'left',
'x-initializer': itemActionInitializers,
'x-component': 'ActionBar',
'x-component-props': {
useProps: '{{ useListActionBarProps }}',
layout: 'one-column',
},
properties: {},
},
},
},
},
},
},
};
return schema;
};
export const createGridCardBlockSchema = (options) => {
const {
formItemInitializers = 'details:configureFields',
@ -1150,7 +1062,28 @@ export const createGridCardBlockSchema = (options) => {
};
return schema;
};
export const createFormBlockSchema = (options) => {
/**
* @deprecated
* 已弃用，请使用 createCreateFormBlockUISchema 或者 createEditFormBlockUISchema 替代
* @param options
* @returns
*/
export const createFormBlockSchema = (options: {
formItemInitializers?: string;
actionInitializers?: string;
collection: string;
resource?: string;
dataSource?: string;
association?: string;
action?: string;
actions?: Record<string, any>;
template?: any;
title?: string;
settings?: any;
'x-designer'?: string;
[key: string]: any;
}) => {
const {
formItemInitializers = 'form:configureFields',
actionInitializers = 'createForm:configureActions',
@ -1453,87 +1386,6 @@ export const createTableBlockSchema = (options) => {
return schema;
};
export const createCollapseBlockSchema = (options) => {
const { collection, dataSource, blockType } = options;
const schema: ISchema = {
type: 'void',
'x-decorator': 'AssociationFilter.Provider',
'x-decorator-props': {
collection,
dataSource,
blockType,
associationFilterStyle: {
width: '100%',
},
name: 'filter-collapse',
},
'x-toolbar': 'BlockSchemaToolbar',
'x-settings': 'blockSettings:filterCollapse',
'x-component': 'CardItem',
'x-filter-targets': [],
properties: {
[uid()]: {
type: 'void',
'x-action': 'associateFilter',
'x-initializer': 'filterCollapse:configureFields',
'x-component': 'AssociationFilter',
properties: {},
},
},
};
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,

31
packages/plugins/@nocobase/plugin-action-bulk-edit/src/client/CreateFormBulkEditBlockInitializer.tsx
View File

@ -1,15 +1,16 @@
import { FormOutlined } from '@ant-design/icons';
import React from 'react';
import {
SchemaInitializerItem,
createCreateFormBlockUISchema,
useBlockAssociationContext,
useCollection_deprecated,
useSchemaTemplateManager,
createFormBlockSchema,
useRecordCollectionDataSourceItems,
SchemaInitializerItem,
useSchemaInitializer,
useSchemaInitializerItem,
useSchemaTemplateManager,
} from '@nocobase/client';
import React from 'react';
import { createBulkEditBlockUISchema } from './createBulkEditBlockUISchema';
export const CreateFormBulkEditBlockInitializer = () => {
const itemConfig = useSchemaInitializerItem();
@ -26,13 +27,19 @@ export const CreateFormBulkEditBlockInitializer = () => {
if (item.template) {
const s = await getTemplateSchemaByMode(item);
if (item.template.componentName === 'FormItem') {
const blockSchema = createFormBlockSchema({
actionInitializers: 'createForm:configureActions',
const blockSchema = createCreateFormBlockUISchema(
association
? {
association,
collection: collection.name,
dataSource: collection.dataSource,
template: s,
});
templateSchema: s,
}
: {
collectionName: collection.name,
dataSource: collection.dataSource,
templateSchema: s,
},
);
if (item.mode === 'reference') {
blockSchema['x-template-key'] = item.template.key;
}
@ -42,11 +49,9 @@ export const CreateFormBulkEditBlockInitializer = () => {
}
} else {
insert(
createFormBlockSchema({
formItemInitializers: 'bulkEditForm:configureFields',
actionInitializers: 'bulkEditForm:configureActions',
createBulkEditBlockUISchema({
association,
collection: collection.name,
collectionName: collection.name,
dataSource: collection.dataSource,
}),
);

65
packages/plugins/@nocobase/plugin-action-bulk-edit/src/client/createBulkEditBlockUISchema.ts Normal file
View File

@ -0,0 +1,65 @@
import { ISchema } from '@formily/react';
import { uid } from '@formily/shared';
/**
* 创建批量编辑表单的 UI Schema
* @returns
*/
export function createBulkEditBlockUISchema(options: {
collectionName: string;
dataSource: string;
association?: string;
}): ISchema {
const { collectionName, association, dataSource } = options;
const resourceName = association || collectionName;
if (!collectionName || !dataSource) {
throw new Error('collectionName and dataSource are required');
}
const schema: ISchema = {
type: 'void',
'x-acl-action-props': {
skipScopeCheck: true,
},
'x-acl-action': `${resourceName}:create`,
'x-decorator': 'FormBlockProvider',
'x-decorator-props': {
dataSource,
collection: collectionName,
association,
},
'x-toolbar': 'BlockSchemaToolbar',
'x-settings': 'blockSettings:createForm',
'x-component': 'CardItem',
properties: {
[uid()]: {
type: 'void',
'x-component': 'FormV2',
'x-component-props': {
useProps: '{{ useCreateFormBlockProps }}',
},
properties: {
grid: {
type: 'void',
'x-component': 'Grid',
'x-initializer': 'bulkEditForm:configureFields',
properties: {},
},
[uid()]: {
type: 'void',
'x-initializer': 'bulkEditForm:configureActions',
'x-component': 'ActionBar',
'x-component-props': {
layout: 'one-column',
style: {
marginTop: 24,
},
},
},
},
},
},
};
return schema;
}

35
packages/plugins/@nocobase/plugin-calendar/src/client/__e2e__/schemaInitializer.test.ts Normal file
View File

@ -0,0 +1,35 @@
import { test, expect } from '@nocobase/test/e2e';
import { emptyPageWithCalendarCollection, oneTableWithCalendarCollection } from './templates';
test.describe('where can be added', () => {
test('page', async ({ page, mockPage }) => {
await mockPage(emptyPageWithCalendarCollection).goto();
await page.getByLabel('schema-initializer-Grid-page:').hover();
await page.getByRole('menuitem', { name: 'form Calendar right' }).hover();
await page.getByRole('menuitem', { name: 'calendar', exact: true }).click();
await page.getByLabel('block-item-Select-Title field').getByTestId('select-single').click();
await page.getByRole('option', { name: 'Repeats' }).click();
await page.getByRole('button', { name: 'OK', exact: true }).click();
await expect(page.getByLabel('block-item-CardItem-calendar-').getByText('Sun', { exact: true })).toBeVisible();
});
test('association block in popup', async ({ page, mockPage, mockRecord }) => {
await mockPage(oneTableWithCalendarCollection).goto();
await mockRecord('toManyCalendar');
// 打开弹窗
await page.getByLabel('action-Action.Link-View-view-').first().click();
await page.getByLabel('schema-initializer-Grid-popup').hover();
await page.getByRole('menuitem', { name: 'form Calendar right' }).hover();
await page.getByRole('menuitem', { name: 'manyToMany -> calendar' }).click();
await page.getByLabel('block-item-Select-Title field').getByTestId('select-single').click();
await page.getByRole('option', { name: 'Repeats' }).click();
await page.getByRole('button', { name: 'OK', exact: true }).click();
await expect(page.getByLabel('block-item-CardItem-calendar-').getByText('Sun', { exact: true })).toBeVisible();
});
});

238
packages/plugins/@nocobase/plugin-calendar/src/client/__e2e__/templates.ts Normal file
View File

@ -0,0 +1,238 @@
import { PageConfig } from '@nocobase/test/e2e';
const calendarCollection = {
name: 'calendar',
template: 'calendar',
};
export const emptyPageWithCalendarCollection: PageConfig = {
collections: [calendarCollection],
};
export const oneTableWithCalendarCollection: PageConfig = {
collections: [
calendarCollection,
{
name: 'toManyCalendar',
fields: [
{
name: 'manyToMany',
interface: 'm2m',
target: 'calendar',
},
],
},
],
pageSchema: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-component': 'Page',
properties: {
lqs2pzl6li1: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-component': 'Grid',
'x-initializer': 'page:addBlock',
properties: {
viawniezd4p: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-component': 'Grid.Row',
properties: {
s0nef2zgi5m: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-component': 'Grid.Col',
properties: {
ibwqgtls50q: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-decorator': 'TableBlockProvider',
'x-acl-action': 'toManyCalendar:list',
'x-use-decorator-props': 'useTableBlockDecoratorProps',
'x-decorator-props': {
collection: 'toManyCalendar',
dataSource: 'main',
action: 'list',
params: {
pageSize: 20,
},
rowKey: 'id',
showIndex: true,
dragSort: false,
},
'x-toolbar': 'BlockSchemaToolbar',
'x-settings': 'blockSettings:table',
'x-component': 'CardItem',
'x-filter-targets': [],
properties: {
actions: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-initializer': 'table:configureActions',
'x-component': 'ActionBar',
'x-component-props': {
style: {
marginBottom: 'var(--nb-spacing)',
},
},
'x-uid': 'xi12fv3arso',
'x-async': false,
'x-index': 1,
},
v931jk5mpmg: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'array',
'x-initializer': 'table:configureColumns',
'x-component': 'TableV2',
'x-use-component-props': 'useTableBlockProps',
'x-component-props': {
rowKey: 'id',
rowSelection: {
type: 'checkbox',
},
},
properties: {
actions: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
title: '{{ t("Actions") }}',
'x-action-column': 'actions',
'x-decorator': 'TableV2.Column.ActionBar',
'x-component': 'TableV2.Column',
'x-designer': 'TableV2.ActionColumnDesigner',
'x-initializer': 'table:configureItemActions',
properties: {
w4rc8u7s5q0: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-decorator': 'DndContext',
'x-component': 'Space',
'x-component-props': {
split: '|',
},
properties: {
hd95fsevokf: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
title: '{{ t("View") }}',
'x-action': 'view',
'x-toolbar': 'ActionSchemaToolbar',
'x-settings': 'actionSettings:view',
'x-component': 'Action.Link',
'x-component-props': {
openMode: 'drawer',
},
'x-decorator': 'ACLActionProvider',
'x-designer-props': {
linkageAction: true,
},
properties: {
drawer: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
title: '{{ t("View record") }}',
'x-component': 'Action.Container',
'x-component-props': {
className: 'nb-action-popup',
},
properties: {
tabs: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-component': 'Tabs',
'x-component-props': {},
'x-initializer': 'TabPaneInitializers',
properties: {
tab1: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
title: '{{t("Details")}}',
'x-component': 'Tabs.TabPane',
'x-designer': 'Tabs.Designer',
'x-component-props': {},
properties: {
grid: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-component': 'Grid',
'x-initializer': 'popup:common:addBlock',
'x-uid': 'wfpwj2q55xi',
'x-async': false,
'x-index': 1,
},
},
'x-uid': 'tvwvyrlvpv6',
'x-async': false,
'x-index': 1,
},
},
'x-uid': 'bys1tnlre1o',
'x-async': false,
'x-index': 1,
},
},
'x-uid': 'ml2scl3y6se',
'x-async': false,
'x-index': 1,
},
},
'x-uid': 'q9gwy03bevt',
'x-async': false,
'x-index': 1,
},
},
'x-uid': 'f8i1npjyidq',
'x-async': false,
'x-index': 1,
},
},
'x-uid': 'h26hp47w83k',
'x-async': false,
'x-index': 1,
},
},
'x-uid': 'bjbs9yvab1k',
'x-async': false,
'x-index': 2,
},
},
'x-uid': '5i6112zy12n',
'x-async': false,
'x-index': 1,
},
},
'x-uid': '6vh9ncefvs2',
'x-async': false,
'x-index': 1,
},
},
'x-uid': 'u4b441tpuzq',
'x-async': false,
'x-index': 1,
},
},
'x-uid': 'mworqfx7jaf',
'x-async': false,
'x-index': 1,
},
},
'x-uid': 'kgor3l32s12',
'x-async': true,
'x-index': 1,
},
};

116
packages/plugins/@nocobase/plugin-calendar/src/client/__tests__/createCalendarBlockSchema.test.ts Normal file
View File

@ -0,0 +1,116 @@
import { createCalendarBlockUISchema } from '../schema-initializer/createCalendarBlockUISchema';
vi.mock('@formily/shared', async () => {
const actual = await vi.importActual('@formily/shared');
return {
...actual,
uid: () => 'mocked-uid',
};
});
describe('createCalendarBlockSchema', () => {
it('should return the correct schema', () => {
const options = {
collectionName: 'users',
dataSource: 'events',
fieldNames: {
title: 'title',
startDate: 'start_date',
endDate: 'end_date',
},
association: 'users.roles',
};
const schema = createCalendarBlockUISchema(options);
expect(schema).toMatchInlineSnapshot(`
{
"properties": {
"mocked-uid": {
"properties": {
"event": {
"properties": {
"drawer": {
"properties": {
"tabs": {
"properties": {
"tab1": {
"properties": {
"grid": {
"type": "void",
"x-component": "Grid",
"x-initializer": "popup:common:addBlock",
"x-initializer-props": {
"actionInitializers": "details:configureActions",
},
},
},
"title": "{{t('Details', { ns: 'calendar' })}}",
"type": "void",
"x-component": "Tabs.TabPane",
"x-component-props": {},
"x-designer": "Tabs.Designer",
},
},
"type": "void",
"x-component": "Tabs",
"x-component-props": {},
"x-initializer": "TabPaneInitializers",
"x-initializer-props": {
"gridInitializer": "popup:common:addBlock",
},
},
},
"title": "{{t('View record', { ns: 'calendar' })}}",
"type": "void",
"x-component": "Action.Drawer",
"x-component-props": {
"className": "nb-action-popup",
},
},
},
"type": "void",
"x-component": "CalendarV2.Event",
},
"toolBar": {
"type": "void",
"x-component": "CalendarV2.ActionBar",
"x-component-props": {
"style": {
"marginBottom": 24,
},
},
"x-initializer": "calendar:configureActions",
},
},
"type": "void",
"x-component": "CalendarV2",
"x-use-component-props": "useCalendarBlockProps",
},
},
"type": "void",
"x-acl-action": "users.roles:list",
"x-component": "CardItem",
"x-decorator": "CalendarBlockProvider",
"x-decorator-props": {
"action": "list",
"association": "users.roles",
"collection": "users",
"dataSource": "events",
"fieldNames": {
"endDate": "end_date",
"id": "id",
"startDate": "start_date",
"title": "title",
},
"params": {
"paginate": false,
},
},
"x-settings": "blockSettings:calendar",
"x-toolbar": "BlockSchemaToolbar",
"x-use-decorator-props": "useCalendarBlockDecoratorProps",
}
`);
});
});

14
packages/plugins/@nocobase/plugin-calendar/src/client/calendar/Calendar.tsx
View File

@ -1,6 +1,12 @@
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { RecursionField, Schema, observer, useFieldSchema } from '@formily/react';
import { ActionContextProvider, RecordProvider, useCollectionParentRecordData, useProps } from '@nocobase/client';
import {
ActionContextProvider,
RecordProvider,
useCollectionParentRecordData,
useProps,
withDynamicSchemaProps,
} from '@nocobase/client';
import { parseExpression } from 'cron-parser';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
@ -171,9 +177,12 @@ const CalendarRecordViewer = (props) => {
);
};
export const Calendar: any = observer(
export const Calendar: any = withDynamicSchemaProps(
observer(
(props: any) => {
// 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
const { dataSource, fieldNames, showLunar, fixedBlock } = useProps(props);
const [date, setDate] = useState<Date>(new Date());
const [view, setView] = useState<View>('month');
const events = useEvents(dataSource, fieldNames, date, view);
@ -267,4 +276,5 @@ export const Calendar: any = observer(
);
},
{ displayName: 'Calendar' },
),
);

18
packages/plugins/@nocobase/plugin-calendar/src/client/hooks/useCalendarBlockDecoratorProps.ts Normal file
View File

@ -0,0 +1,18 @@
import { useDataBlockSourceId } from '@nocobase/client';
import { useCalendarBlockParams } from './useCalendarBlockParams';
export function useCalendarBlockDecoratorProps(props) {
const params = useCalendarBlockParams(props);
let sourceId: string;
// 因为 association 是一个固定的值，所以可以在 hooks 中直接使用
if (props.association) {
// eslint-disable-next-line react-hooks/rules-of-hooks
sourceId = useDataBlockSourceId({ association: props.association });
}
return {
params,
sourceId,
};
}

22
packages/plugins/@nocobase/plugin-calendar/src/client/hooks/useCalendarBlockParams.ts Normal file
View File

@ -0,0 +1,22 @@
import { useMemo } from 'react';
export function useCalendarBlockParams(props) {
const appends = useMemo(() => {
const arr: string[] = [];
const start = props.fieldNames?.start;
const end = props.fieldNames?.end;
if (Array.isArray(start) && start.length >= 2) {
arr.push(start[0]);
}
if (Array.isArray(end) && end.length >= 2) {
arr.push(end[0]);
}
return arr;
}, [props.fieldNames]);
return useMemo(() => {
return { ...props.params, appends: [...appends, ...(props.params.appends || [])], paginate: false };
}, [appends, props.params]);
}

3
packages/plugins/@nocobase/plugin-calendar/src/client/index.tsx
View File

@ -16,6 +16,7 @@ import {
useCreateAssociationCalendarBlock,
} from './schema-initializer/items';
import { useMemo } from 'react';
import { useCalendarBlockDecoratorProps } from './hooks/useCalendarBlockDecoratorProps';
export class PluginCalendarClient extends Plugin {
async load() {
@ -60,7 +61,7 @@ export class PluginCalendarClient extends Plugin {
RecordAssociationCalendarBlockInitializer,
CalendarV2,
});
this.app.addScopes({ useCalendarBlockProps });
this.app.addScopes({ useCalendarBlockProps, useCalendarBlockDecoratorProps });
this.schemaSettingsManager.add(calendarBlockSettings);
this.app.schemaInitializerManager.add(CalendarActionInitializers_deprecated);
this.app.schemaInitializerManager.add(calendarActionInitializers);

42
packages/plugins/@nocobase/plugin-calendar/src/client/schema-initializer/CalendarBlockProvider.tsx
View File

@ -1,8 +1,15 @@
import { ArrayField } from '@formily/core';
import { useField } from '@formily/react';
import { BlockProvider, FixedBlockWrapper, useBlockRequestContext, useParsedFilter } from '@nocobase/client';
import { useField, useFieldSchema } from '@formily/react';
import {
BlockProvider,
FixedBlockWrapper,
useBlockRequestContext,
useParsedFilter,
withDynamicSchemaProps,
} from '@nocobase/client';
import _ from 'lodash';
import React, { createContext, useContext, useEffect, useMemo } from 'react';
import { useCalendarBlockParams } from '../hooks/useCalendarBlockParams';
export const CalendarBlockContext = createContext<any>({});
CalendarBlockContext.displayName = 'CalendarBlockContext';
@ -38,31 +45,26 @@ const InternalCalendarBlockProvider = (props) => {
);
};
export const CalendarBlockProvider = (props) => {
const appends = useMemo(() => {
const arr: string[] = [];
const start = props.fieldNames?.start;
const end = props.fieldNames?.end;
const useCompatCalendarBlockParams = (props) => {
const fieldSchema = useFieldSchema();
if (Array.isArray(start) && start.length >= 2) {
arr.push(start[0]);
}
if (Array.isArray(end) && end.length >= 2) {
arr.push(end[0]);
// 因为 x-use-decorator-props 的值是固定不变的，所以可以在条件中使用 hooks
if (fieldSchema['x-use-decorator-props']) {
return props.params;
} else {
// eslint-disable-next-line react-hooks/rules-of-hooks
return useCalendarBlockParams(props);
}
};
return arr;
}, [props.fieldNames]);
export const CalendarBlockProvider = withDynamicSchemaProps((props) => {
const params = useCompatCalendarBlockParams(props);
return (
<BlockProvider
name="calendar"
{...props}
params={{ ...props.params, appends: [...appends, ...(props.params.appends || [])], paginate: false }}
>
<BlockProvider name="calendar" {...props} params={params}>
<InternalCalendarBlockProvider {...props} />
</BlockProvider>
);
};
});
export const useCalendarBlockContext = () => {
return useContext(CalendarBlockContext);

30
packages/plugins/@nocobase/plugin-calendar/src/client/schema-initializer/utils.ts → packages/plugins/@nocobase/plugin-calendar/src/client/schema-initializer/createCalendarBlockUISchema.ts
View File

@ -2,16 +2,23 @@ import { ISchema } from '@formily/react';
import { uid } from '@formily/shared';
import { generateNTemplate } from '../../locale';
export const createCalendarBlockSchema = (options) => {
const { collection, dataSource, resource, fieldNames, settings, ...others } = options;
const schema: ISchema = {
export const createCalendarBlockUISchema = (options: {
dataSource: string;
fieldNames: object;
collectionName?: string;
association?: string;
}): ISchema => {
const { collectionName, dataSource, fieldNames, association } = options;
return {
type: 'void',
'x-acl-action': `${resource || collection}:list`,
'x-acl-action': `${association || collectionName}:list`,
'x-decorator': 'CalendarBlockProvider',
'x-use-decorator-props': 'useCalendarBlockDecoratorProps',
'x-decorator-props': {
collection: collection,
collection: collectionName,
dataSource,
resource: resource || collection,
association,
action: 'list',
fieldNames: {
id: 'id',
@ -20,18 +27,15 @@ export const createCalendarBlockSchema = (options) => {
params: {
paginate: false,
},
...others,
},
'x-toolbar': 'BlockSchemaToolbar',
'x-settings': settings,
'x-settings': 'blockSettings:calendar',
'x-component': 'CardItem',
properties: {
[uid()]: {
type: 'void',
'x-component': 'CalendarV2',
'x-component-props': {
useProps: '{{ useCalendarBlockProps }}',
},
'x-use-component-props': 'useCalendarBlockProps',
properties: {
toolBar: {
type: 'void',
@ -42,7 +46,6 @@ export const createCalendarBlockSchema = (options) => {
},
},
'x-initializer': 'calendar:configureActions',
properties: {},
},
event: {
type: 'void',
@ -79,7 +82,6 @@ export const createCalendarBlockSchema = (options) => {
actionInitializers: 'details:configureActions',
},
'x-initializer': 'popup:common:addBlock',
properties: {},
},
},
},
@ -93,6 +95,4 @@ export const createCalendarBlockSchema = (options) => {
},
},
};
return schema;
};

7
packages/plugins/@nocobase/plugin-calendar/src/client/schema-initializer/items/CalendarBlockInitializer.tsx
View File

@ -14,7 +14,7 @@ import {
useSchemaInitializerItem,
} from '@nocobase/client';
import React, { useContext } from 'react';
import { createCalendarBlockSchema } from '../utils';
import { createCalendarBlockUISchema } from '../createCalendarBlockUISchema';
import { useTranslation } from '../../../locale';
export const CalendarBlockInitializer = ({
@ -95,13 +95,12 @@ export const CalendarBlockInitializer = ({
initialValues: {},
});
insert(
createCalendarBlockSchema({
collection: item.name,
createCalendarBlockUISchema({
collectionName: item.name,
dataSource: item.dataSource,
fieldNames: {
...values,
},
settings: 'blockSettings:calendar',
}),
);
}}

12
packages/plugins/@nocobase/plugin-calendar/src/client/schema-initializer/items/RecordAssociationCalendarBlockInitializer.tsx
View File

@ -15,7 +15,7 @@ import {
useSchemaInitializer,
SchemaInitializerItem,
} from '@nocobase/client';
import { createCalendarBlockSchema } from '../utils';
import { createCalendarBlockUISchema } from '../createCalendarBlockUISchema';
import { useTranslation } from '../../../locale';
export const RecordAssociationCalendarBlockInitializer = () => {
@ -98,10 +98,9 @@ export const RecordAssociationCalendarBlockInitializer = () => {
initialValues: {},
});
insert(
createCalendarBlockSchema({
collection: field.target,
resource,
createCalendarBlockUISchema({
association: resource,
dataSource: item.dataSource,
fieldNames: {
...values,
},
@ -183,13 +182,12 @@ export function useCreateAssociationCalendarBlock() {
initialValues: {},
});
insert(
createCalendarBlockSchema({
collection: field.target,
createCalendarBlockUISchema({
association: `${field.collectionName}.${field.name}`,
dataSource: item.dataSource,
fieldNames: {
...values,
},
settings: 'blockSettings:calendar',
}),
);
};

6
packages/plugins/@nocobase/plugin-gantt/src/client/GanttBlockInitializer.tsx
View File

@ -14,7 +14,7 @@ import {
DataBlockInitializer,
SchemaComponentOptions,
} from '@nocobase/client';
import { createGanttBlockSchema } from './utils';
import { createGanttBlockUISchema } from './createGanttBlockUISchema';
export const GanttBlockInitializer = () => {
const { insert } = useSchemaInitializer();
@ -120,8 +120,8 @@ export const GanttBlockInitializer = () => {
initialValues: {},
});
insert(
createGanttBlockSchema({
collection: item.name,
createGanttBlockUISchema({
collectionName: item.name,
dataSource: item.dataSource,
fieldNames: {
...values,

143
packages/plugins/@nocobase/plugin-gantt/src/client/__tests__/createGanttBlockSchema.test.ts Normal file
View File

@ -0,0 +1,143 @@
import { createGanttBlockUISchema } from '../createGanttBlockUISchema';
vi.mock('@formily/shared', () => {
return {
uid: () => 'mocked-uid',
};
});
describe('createGanttBlockSchema', () => {
it('should generate schema correctly', () => {
const options = {
collectionName: 'TestCollection',
fieldNames: {
label: 'field1',
value: 'field2',
},
dataSource: 'TestDataSource',
};
const schema = createGanttBlockUISchema(options);
expect(schema).toMatchInlineSnapshot(`
{
"properties": {
"mocked-uid": {
"properties": {
"detail": {
"properties": {
"drawer": {
"properties": {
"tabs": {
"properties": {
"tab1": {
"properties": {
"grid": {
"type": "void",
"x-component": "Grid",
"x-initializer": "popup:common:addBlock",
},
},
"title": "{{t("Details")}}",
"type": "void",
"x-component": "Tabs.TabPane",
"x-component-props": {},
"x-designer": "Tabs.Designer",
},
},
"type": "void",
"x-component": "Tabs",
"x-component-props": {},
"x-initializer": "TabPaneInitializers",
},
},
"title": "{{ t("View record") }}",
"type": "void",
"x-component": "Action.Drawer",
"x-component-props": {
"className": "nb-action-popup",
},
},
},
"type": "void",
"x-component": "Gantt.Event",
},
"table": {
"properties": {
"actions": {
"properties": {
"actions": {
"type": "void",
"x-component": "Space",
"x-component-props": {
"split": "|",
},
"x-decorator": "DndContext",
},
},
"title": "{{ t("Actions") }}",
"type": "void",
"x-action-column": "actions",
"x-component": "TableV2.Column",
"x-decorator": "TableV2.Column.ActionBar",
"x-designer": "TableV2.ActionColumnDesigner",
"x-initializer": "table:configureItemActions",
},
},
"type": "array",
"x-component": "TableV2",
"x-component-props": {
"pagination": false,
"rowKey": "id",
"rowSelection": {
"type": "checkbox",
},
},
"x-decorator": "div",
"x-decorator-props": {
"style": {
"float": "left",
"maxWidth": "35%",
},
},
"x-initializer": "table:configureColumns",
"x-use-component-props": "useTableBlockProps",
},
"toolBar": {
"properties": {},
"type": "void",
"x-component": "ActionBar",
"x-component-props": {
"style": {
"marginBottom": 24,
},
},
"x-initializer": "gantt:configureActions",
},
},
"type": "void",
"x-component": "Gantt",
"x-use-component-props": "useGanttBlockProps",
},
},
"type": "void",
"x-acl-action": "TestCollection:list",
"x-component": "CardItem",
"x-decorator": "GanttBlockProvider",
"x-decorator-props": {
"action": "list",
"collection": "TestCollection",
"dataSource": "TestDataSource",
"fieldNames": {
"label": "field1",
"value": "field2",
},
"params": {
"paginate": false,
},
},
"x-settings": "blockSettings:gantt",
"x-toolbar": "BlockSchemaToolbar",
}
`);
});
});

17
packages/plugins/@nocobase/plugin-gantt/src/client/components/gantt/gantt.tsx
View File

@ -9,6 +9,8 @@ import {
useCollectionParentRecordData,
useTableBlockContext,
useToken,
withDynamicSchemaProps,
useProps,
} from '@nocobase/client';
import { message } from 'antd';
import { debounce } from 'lodash';
@ -81,7 +83,8 @@ const debounceHandleProcessChange = debounce(async (task: Task, resource, fieldN
message.success(t('Saved successfully'));
await service?.refresh();
}, 300);
export const Gantt: any = (props: any) => {
export const Gantt: any = withDynamicSchemaProps((props: any) => {
const { styles } = useStyles();
const { token } = useToken();
const api = useAPIClient();
@ -116,12 +119,13 @@ export const Gantt: any = (props: any) => {
viewDate,
TooltipContent = StandardTooltipContent,
onDoubleClick,
onClick,
onDelete,
onSelect,
useProps,
} = props;
const { onExpanderClick, tasks, expandAndCollapseAll } = useProps();
onExpanderClick,
tasks,
expandAndCollapseAll,
fieldNames,
} = useProps(props); // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
const ctx = useGanttBlockContext();
const appInfo = useCurrentAppInfo();
const { t } = useTranslation();
@ -129,7 +133,6 @@ export const Gantt: any = (props: any) => {
const tableCtx = useTableBlockContext();
const { resource, service } = useBlockRequestContext();
const fieldSchema = useFieldSchema();
const { fieldNames } = useProps(props);
const viewMode = fieldNames.range || 'day';
const wrapperRef = useRef<HTMLDivElement>(null);
const taskListRef = useRef<HTMLDivElement>(null);
@ -559,4 +562,4 @@ export const Gantt: any = (props: any) => {
</div>
</div>
);
};
});

129
packages/plugins/@nocobase/plugin-gantt/src/client/createGanttBlockUISchema.tsx Normal file
View File

@ -0,0 +1,129 @@
import { ISchema } from '@formily/react';
import { uid } from '@formily/shared';
export const createGanttBlockUISchema = (options: {
collectionName: string;
fieldNames: object;
dataSource: string;
}): ISchema => {
const { collectionName, fieldNames, dataSource } = options;
return {
type: 'void',
'x-acl-action': `${collectionName}:list`,
'x-decorator': 'GanttBlockProvider',
'x-decorator-props': {
collection: collectionName,
dataSource,
action: 'list',
fieldNames,
params: {
paginate: false,
},
},
'x-toolbar': 'BlockSchemaToolbar',
'x-settings': 'blockSettings:gantt',
// 'x-designer': 'Gantt.Designer',
'x-component': 'CardItem',
properties: {
[uid()]: {
type: 'void',
'x-component': 'Gantt',
'x-use-component-props': 'useGanttBlockProps',
properties: {
toolBar: {
type: 'void',
'x-component': 'ActionBar',
'x-component-props': {
style: {
marginBottom: 24,
},
},
'x-initializer': 'gantt:configureActions',
properties: {},
},
table: {
type: 'array',
'x-decorator': 'div',
'x-decorator-props': {
style: {
float: 'left',
maxWidth: '35%',
},
},
'x-initializer': 'table:configureColumns',
'x-component': 'TableV2',
'x-use-component-props': 'useTableBlockProps',
'x-component-props': {
rowKey: 'id',
rowSelection: {
type: 'checkbox',
},
pagination: false,
},
properties: {
actions: {
type: 'void',
title: '{{ t("Actions") }}',
'x-action-column': 'actions',
'x-decorator': 'TableV2.Column.ActionBar',
'x-component': 'TableV2.Column',
'x-designer': 'TableV2.ActionColumnDesigner',
'x-initializer': 'table:configureItemActions',
properties: {
actions: {
type: 'void',
'x-decorator': 'DndContext',
'x-component': 'Space',
'x-component-props': {
split: '|',
},
},
},
},
},
},
detail: {
type: 'void',
'x-component': 'Gantt.Event',
properties: {
drawer: {
type: 'void',
'x-component': 'Action.Drawer',
'x-component-props': {
className: 'nb-action-popup',
},
title: '{{ t("View record") }}',
properties: {
tabs: {
type: 'void',
'x-component': 'Tabs',
'x-component-props': {},
'x-initializer': 'TabPaneInitializers',
properties: {
tab1: {
type: 'void',
title: '{{t("Details")}}',
'x-component': 'Tabs.TabPane',
'x-designer': 'Tabs.Designer',
'x-component-props': {},
properties: {
grid: {
type: 'void',
'x-component': 'Grid',
'x-initializer': 'popup:common:addBlock',
},
},
},
},
},
},
},
},
},
},
},
},
};
};

4
packages/plugins/@nocobase/plugin-gantt/src/client/index.tsx
View File

@ -41,6 +41,10 @@ export class GanttPlugin extends Plugin {
title: "{{t('Gantt')}}",
Component: 'GanttBlockInitializer',
});
this.app.addScopes({
useGanttBlockProps,
});
}
}

130
packages/plugins/@nocobase/plugin-gantt/src/client/utils.tsx
View File

@ -1,5 +1,3 @@
import { ISchema } from '@formily/react';
import { uid } from '@formily/shared';
import { useCollection_deprecated, useCompile } from '@nocobase/client';
import { useTranslation } from 'react-i18next';
@ -19,131 +17,3 @@ export const useOptions = (type = 'string') => {
});
return options;
};
export const createGanttBlockSchema = (options) => {
const { collection, resource, fieldNames, ...others } = options;
const schema: ISchema = {
type: 'void',
'x-acl-action': `${resource || collection}:list`,
'x-decorator': 'GanttBlockProvider',
'x-decorator-props': {
collection: collection,
resource: resource || collection,
action: 'list',
fieldNames: {
...fieldNames,
},
params: {
paginate: false,
},
...others,
},
'x-designer': 'Gantt.Designer',
'x-component': 'CardItem',
properties: {
[uid()]: {
type: 'void',
'x-component': 'Gantt',
'x-component-props': {
useProps: '{{ useGanttBlockProps }}',
},
properties: {
toolBar: {
type: 'void',
'x-component': 'ActionBar',
'x-component-props': {
style: {
marginBottom: 24,
},
},
'x-initializer': 'gantt:configureActions',
properties: {},
},
table: {
type: 'array',
'x-decorator': 'div',
'x-decorator-props': {
style: {
float: 'left',
maxWidth: '35%',
},
},
'x-initializer': 'table:configureColumns',
'x-component': 'TableV2',
'x-component-props': {
rowKey: 'id',
rowSelection: {
type: 'checkbox',
},
useProps: '{{ useTableBlockProps }}',
pagination: false,
},
properties: {
actions: {
type: 'void',
title: '{{ t("Actions") }}',
'x-action-column': 'actions',
'x-decorator': 'TableV2.Column.ActionBar',
'x-component': 'TableV2.Column',
'x-designer': 'TableV2.ActionColumnDesigner',
'x-initializer': 'table:configureItemActions',
properties: {
actions: {
type: 'void',
'x-decorator': 'DndContext',
'x-component': 'Space',
'x-component-props': {
split: '|',
},
properties: {},
},
},
},
},
},
detail: {
type: 'void',
'x-component': 'Gantt.Event',
properties: {
drawer: {
type: 'void',
'x-component': 'Action.Drawer',
'x-component-props': {
className: 'nb-action-popup',
},
title: '{{ t("View record") }}',
properties: {
tabs: {
type: 'void',
'x-component': 'Tabs',
'x-component-props': {},
'x-initializer': 'TabPaneInitializers',
properties: {
tab1: {
type: 'void',
title: '{{t("Details")}}',
'x-component': 'Tabs.TabPane',
'x-designer': 'Tabs.Designer',
'x-component-props': {},
properties: {
grid: {
type: 'void',
'x-component': 'Grid',
'x-initializer': 'popup:common:addBlock',
properties: {},
},
},
},
},
},
},
},
},
},
},
},
},
};
return schema;
};

8
packages/plugins/@nocobase/plugin-kanban/src/client/Kanban.tsx
View File

@ -6,6 +6,7 @@ import {
useCreateActionProps as useCAP,
useCollectionParentRecordData,
useProps,
withDynamicSchemaProps,
} from '@nocobase/client';
import { Spin, Tag } from 'antd';
import React, { useContext, useMemo, useState } from 'react';
@ -56,10 +57,14 @@ export const toColumns = (groupField: any, dataSource: Array<any> = [], primaryK
return Object.values(columns);
};
export const Kanban: any = observer(
export const Kanban: any = withDynamicSchemaProps(
observer(
(props: any) => {
const { styles } = useStyles();
// 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
const { groupField, onCardDragEnd, dataSource, setDataSource, ...restProps } = useProps(props);
const parentRecordData = useCollectionParentRecordData();
const field = useField<ArrayField>();
const fieldSchema = useFieldSchema();
@ -152,4 +157,5 @@ export const Kanban: any = observer(
);
},
{ displayName: 'Kanban' },
),
);

7
packages/plugins/@nocobase/plugin-kanban/src/client/KanbanBlockInitializer.tsx
View File

@ -16,7 +16,7 @@ import {
useSchemaInitializerItem,
useAPIClient,
} from '@nocobase/client';
import { createKanbanBlockSchema } from './utils';
import { createKanbanBlockUISchema } from './createKanbanBlockUISchema';
import { CreateAndSelectSort } from './CreateAndSelectSort';
import { NAMESPACE } from './locale';
@ -157,14 +157,13 @@ export const KanbanBlockInitializer = () => {
initialValues: {},
});
insert(
createKanbanBlockSchema({
createKanbanBlockUISchema({
sortField: values.dragSortBy,
groupField: values.groupField.value,
collection: item.name,
collectionName: item.name,
dataSource: item.dataSource,
params: {
sort: [values.dragSortBy],
paginate: false,
},
}),
);

126
packages/plugins/@nocobase/plugin-kanban/src/client/__tests__/createKanbanBlockSchema.test.ts Normal file
View File

@ -0,0 +1,126 @@
import { createKanbanBlockUISchema } from '../createKanbanBlockUISchema';
vi.mock('@formily/shared', () => {
return {
uid: vi.fn(() => 'mocked-uid'),
};
});
test('createKanbanBlockSchema should return an object with expected properties', () => {
const options = {
collectionName: 'testCollection',
groupField: 'testGroupField',
sortField: 'testSortField',
dataSource: 'testDataSource',
params: { testParam: 'testValue' },
};
const result = createKanbanBlockUISchema(options);
expect(result).toMatchInlineSnapshot(`
{
"properties": {
"actions": {
"properties": {},
"type": "void",
"x-component": "ActionBar",
"x-component-props": {
"style": {
"marginBottom": "var(--nb-spacing)",
},
},
"x-initializer": "kanban:configureActions",
},
"mocked-uid": {
"properties": {
"card": {
"properties": {
"grid": {
"type": "void",
"x-component": "Grid",
"x-component-props": {
"dndContext": false,
},
},
},
"type": "void",
"x-component": "Kanban.Card",
"x-component-props": {
"openMode": "drawer",
},
"x-decorator": "BlockItem",
"x-designer": "Kanban.Card.Designer",
"x-label-disabled": true,
"x-read-pretty": true,
},
"cardViewer": {
"properties": {
"drawer": {
"properties": {
"tabs": {
"properties": {
"tab1": {
"properties": {
"grid": {
"properties": {},
"type": "void",
"x-component": "Grid",
"x-initializer": "popup:common:addBlock",
},
},
"title": "{{t("Details")}}",
"type": "void",
"x-component": "Tabs.TabPane",
"x-component-props": {},
"x-designer": "Tabs.Designer",
},
},
"type": "void",
"x-component": "Tabs",
"x-component-props": {},
"x-initializer": "TabPaneInitializers",
},
},
"title": "{{ t("View record") }}",
"type": "void",
"x-component": "Action.Container",
"x-component-props": {
"className": "nb-action-popup",
},
},
},
"title": "{{ t("View") }}",
"type": "void",
"x-action": "view",
"x-component": "Kanban.CardViewer",
"x-component-props": {
"openMode": "drawer",
},
"x-designer": "Action.Designer",
},
},
"type": "array",
"x-component": "Kanban",
"x-use-component-props": "useKanbanBlockProps",
},
},
"type": "void",
"x-acl-action": "testCollection:list",
"x-component": "CardItem",
"x-decorator": "KanbanBlockProvider",
"x-decorator-props": {
"action": "list",
"collection": "testCollection",
"dataSource": "testDataSource",
"groupField": "testGroupField",
"params": {
"paginate": false,
"testParam": "testValue",
},
"sortField": "testSortField",
},
"x-settings": "blockSettings:kanban",
"x-toolbar": "BlockSchemaToolbar",
}
`);
});

30
packages/plugins/@nocobase/plugin-kanban/src/client/utils.ts → packages/plugins/@nocobase/plugin-kanban/src/client/createKanbanBlockUISchema.ts
View File

@ -1,24 +1,33 @@
import { ISchema } from '@formily/react';
import { uid } from '@formily/shared';
export const createKanbanBlockSchema = (options) => {
const { collection, resource, groupField, sortField, ...others } = options;
const schema: ISchema = {
export const createKanbanBlockUISchema = (options: {
collectionName: string;
groupField: string;
sortField: string;
dataSource: string;
params?: Record<string, any>;
}): ISchema => {
const { collectionName, groupField, sortField, dataSource, params } = options;
return {
type: 'void',
'x-acl-action': `${resource || collection}:list`,
'x-acl-action': `${collectionName}:list`,
'x-decorator': 'KanbanBlockProvider',
'x-decorator-props': {
collection: collection,
resource: resource || collection,
collection: collectionName,
action: 'list',
groupField,
sortField,
params: {
paginate: false,
...params,
},
...others,
dataSource,
},
'x-designer': 'Kanban.Designer',
// 'x-designer': 'Kanban.Designer',
'x-toolbar': 'BlockSchemaToolbar',
'x-settings': 'blockSettings:kanban',
'x-component': 'CardItem',
properties: {
actions: {
@ -35,9 +44,7 @@ export const createKanbanBlockSchema = (options) => {
[uid()]: {
type: 'array',
'x-component': 'Kanban',
'x-component-props': {
useProps: '{{ useKanbanBlockProps }}',
},
'x-use-component-props': 'useKanbanBlockProps',
properties: {
card: {
type: 'void',
@ -106,5 +113,4 @@ export const createKanbanBlockSchema = (options) => {
},
},
};
return schema;
};

95
packages/plugins/@nocobase/plugin-map/src/client/__tests__/block/createMapBlockSchema.test.ts Normal file
View File

@ -0,0 +1,95 @@
import { createMapBlockUISchema } from '../../block/createMapBlockUISchema';
vi.mock('@formily/shared', () => {
return {
uid: () => 'mocked-uid',
};
});
test('createMapBlockSchema should return an object with expected properties', () => {
const options = {
collectionName: 'testCollection',
dataSource: 'testDataSource',
fieldNames: {
label: 'field1',
value: 'field2',
},
};
const result = createMapBlockUISchema(options);
expect(result).toMatchInlineSnapshot(`
{
"properties": {
"actions": {
"type": "void",
"x-component": "ActionBar",
"x-component-props": {
"style": {
"marginBottom": 16,
},
},
"x-initializer": "map:configureActions",
},
"mocked-uid": {
"properties": {
"drawer": {
"properties": {
"tabs": {
"properties": {
"tab1": {
"properties": {
"grid": {
"type": "void",
"x-component": "Grid",
"x-initializer": "popup:common:addBlock",
},
},
"title": "{{t("Details")}}",
"type": "void",
"x-component": "Tabs.TabPane",
"x-component-props": {},
"x-designer": "Tabs.Designer",
},
},
"type": "void",
"x-component": "Tabs",
"x-component-props": {},
"x-initializer": "TabPaneInitializers",
},
},
"title": "{{ t("View record") }}",
"type": "void",
"x-component": "Action.Drawer",
"x-component-props": {
"className": "nb-action-popup",
},
},
},
"type": "void",
"x-component": "MapBlock",
"x-use-component-props": "useMapBlockProps",
},
},
"type": "void",
"x-acl-action": "testCollection:list",
"x-component": "CardItem",
"x-decorator": "MapBlockProvider",
"x-decorator-props": {
"action": "list",
"collection": "testCollection",
"dataSource": "testDataSource",
"fieldNames": {
"label": "field1",
"value": "field2",
},
"params": {
"paginate": false,
},
},
"x-filter-targets": [],
"x-settings": "blockSettings:map",
"x-toolbar": "BlockSchemaToolbar",
}
`);
});

13
packages/plugins/@nocobase/plugin-map/src/client/block/MapBlock.tsx
View File

@ -1,9 +1,16 @@
import { useCollection_deprecated, useCollectionManager_deprecated, useProps } from '@nocobase/client';
import {
useCollection_deprecated,
useCollectionManager_deprecated,
useProps,
withDynamicSchemaProps,
} from '@nocobase/client';
import React, { useMemo } from 'react';
import { MapBlockComponent } from '../components';
export const MapBlock = (props) => {
export const MapBlock = withDynamicSchemaProps((props) => {
// 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
const { fieldNames } = useProps(props);
const { getCollectionJoinField } = useCollectionManager_deprecated();
const { name } = useCollection_deprecated();
const collectionField = useMemo(() => {
@ -12,4 +19,4 @@ export const MapBlock = (props) => {
const fieldComponentProps = collectionField?.uiSchema?.['x-component-props'];
return <MapBlockComponent {...fieldComponentProps} {...props} collectionField={collectionField} />;
};
});

8
packages/plugins/@nocobase/plugin-map/src/client/block/MapBlockInitializer.tsx
View File

@ -13,7 +13,8 @@ import {
} from '@nocobase/client';
import React, { useContext } from 'react';
import { useMapTranslation } from '../locale';
import { createMapBlockSchema, findNestedOption } from './utils';
import { findNestedOption } from './utils';
import { createMapBlockUISchema } from './createMapBlockUISchema';
export const MapBlockInitializer = () => {
const itemConfig = useSchemaInitializerItem();
@ -84,13 +85,12 @@ export const MapBlockInitializer = () => {
initialValues: {},
});
insert(
createMapBlockSchema({
collection: item.name,
createMapBlockUISchema({
collectionName: item.name,
dataSource: item.dataSource,
fieldNames: {
...values,
},
settings: 'blockSettings:map',
}),
);
}}

81
packages/plugins/@nocobase/plugin-map/src/client/block/createMapBlockUISchema.ts Normal file
View File

@ -0,0 +1,81 @@
import { ISchema } from '@formily/react';
import { uid } from '@formily/shared';
export const createMapBlockUISchema = (options: {
collectionName: string;
dataSource: string;
fieldNames: object;
}): ISchema => {
const { collectionName, fieldNames, dataSource } = options;
return {
type: 'void',
'x-acl-action': `${collectionName}:list`,
'x-decorator': 'MapBlockProvider',
'x-decorator-props': {
collection: collectionName,
dataSource,
action: 'list',
fieldNames,
params: {
paginate: false,
},
},
'x-toolbar': 'BlockSchemaToolbar',
'x-settings': 'blockSettings:map',
'x-component': 'CardItem',
// 保存当前筛选区块所能过滤的数据区块
'x-filter-targets': [],
properties: {
actions: {
type: 'void',
'x-initializer': 'map:configureActions',
'x-component': 'ActionBar',
'x-component-props': {
style: {
marginBottom: 16,
},
},
},
[uid()]: {
type: 'void',
'x-component': 'MapBlock',
'x-use-component-props': 'useMapBlockProps',
properties: {
drawer: {
type: 'void',
'x-component': 'Action.Drawer',
'x-component-props': {
className: 'nb-action-popup',
},
title: '{{ t("View record") }}',
properties: {
tabs: {
type: 'void',
'x-component': 'Tabs',
'x-component-props': {},
'x-initializer': 'TabPaneInitializers',
properties: {
tab1: {
type: 'void',
title: '{{t("Details")}}',
'x-component': 'Tabs.TabPane',
'x-designer': 'Tabs.Designer',
'x-component-props': {},
properties: {
grid: {
type: 'void',
'x-component': 'Grid',
'x-initializer': 'popup:common:addBlock',
},
},
},
},
},
},
},
},
},
},
};
};

83
packages/plugins/@nocobase/plugin-map/src/client/block/utils.ts
View File

@ -1,86 +1,3 @@
import { ISchema } from '@formily/react';
import { uid } from '@formily/shared';
export const createMapBlockSchema = (options) => {
const { collection, resource, fieldNames, settings, ...others } = options;
const schema: ISchema = {
type: 'void',
'x-acl-action': `${resource || collection}:list`,
'x-decorator': 'MapBlockProvider',
'x-decorator-props': {
collection: collection,
resource: resource || collection,
action: 'list',
fieldNames,
params: {
paginate: false,
},
...others,
},
'x-toolbar': 'BlockSchemaToolbar',
'x-settings': settings,
'x-component': 'CardItem',
// 保存当前筛选区块所能过滤的数据区块
'x-filter-targets': [],
properties: {
actions: {
type: 'void',
'x-initializer': 'map:configureActions',
'x-component': 'ActionBar',
'x-component-props': {
style: {
marginBottom: 16,
},
},
properties: {},
},
[uid()]: {
type: 'void',
'x-component': 'MapBlock',
'x-component-props': {
useProps: '{{ useMapBlockProps }}',
},
properties: {
drawer: {
type: 'void',
'x-component': 'Action.Drawer',
'x-component-props': {
className: 'nb-action-popup',
},
title: '{{ t("View record") }}',
properties: {
tabs: {
type: 'void',
'x-component': 'Tabs',
'x-component-props': {},
'x-initializer': 'TabPaneInitializers',
properties: {
tab1: {
type: 'void',
title: '{{t("Details")}}',
'x-component': 'Tabs.TabPane',
'x-designer': 'Tabs.Designer',
'x-component-props': {},
properties: {
grid: {
type: 'void',
'x-component': 'Grid',
'x-initializer': 'popup:common:addBlock',
properties: {},
},
},
},
},
},
},
},
},
},
},
};
return schema;
};
export const findNestedOption = (value: string[] | string, options = []) => {
if (typeof value === 'string') {
value = [value];

1
packages/plugins/@nocobase/plugin-map/src/client/components/AMap/Block.tsx
View File

@ -20,6 +20,7 @@ import { getSource } from '../../utils';
import { AMapComponent, AMapForwardedRefProps } from './Map';
export const AMapBlock = (props) => {
// 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
const { collectionField, fieldNames, dataSource, fixedBlock, zoom, setSelectedRecordKeys, lineSort } =
useProps(props);
const { name, getPrimaryKey } = useCollection_deprecated();

1
packages/plugins/@nocobase/plugin-map/src/client/components/GoogleMaps/Block.tsx
View File

@ -38,6 +38,7 @@ const pointClass = css`
`;
export const GoogleMapsBlock = (props) => {
// 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
const { collectionField, fieldNames, dataSource, fixedBlock, zoom, setSelectedRecordKeys, lineSort } =
useProps(props);
const { getPrimaryKey } = useCollection_deprecated();

5
packages/plugins/@nocobase/plugin-map/src/client/index.tsx
View File

@ -6,6 +6,7 @@ import { mapBlockSettings } from './block/MapBlock.Settings';
import { Configuration, Map } from './components';
import { fields } from './fields';
import { NAMESPACE, generateNTemplate } from './locale';
import { useMapBlockProps } from './block/MapBlockProvider';
const MapProvider = React.memo((props) => {
return (
<CurrentAppInfoProvider>
@ -44,6 +45,10 @@ export class MapPlugin extends Plugin {
Component: Configuration,
aclSnippet: 'pm.map.configuration',
});
this.app.addScopes({
useMapBlockProps,
});
}
}

4
packages/plugins/@nocobase/plugin-workflow-manual/src/client/instruction/FormBlockInitializer.tsx
View File

@ -4,7 +4,6 @@ import {
CollectionProvider_deprecated,
SchemaInitializerItem,
SchemaInitializerItemType,
createFormBlockSchema,
useRecordCollectionDataSourceItems,
useSchemaInitializer,
useSchemaInitializerItem,
@ -14,6 +13,7 @@ import {
import { JOB_STATUS, traverseSchema } from '@nocobase/plugin-workflow/client';
import { NAMESPACE } from '../../locale';
import { createManualFormBlockUISchema } from './createManualFormBlockUISchema';
function InternalFormBlockInitializer({ schema, ...others }) {
const { getTemplateSchemaByMode } = useSchemaTemplateManager();
@ -21,7 +21,7 @@ function InternalFormBlockInitializer({ schema, ...others }) {
const items = useRecordCollectionDataSourceItems('FormItem') as SchemaInitializerItemType[];
async function onConfirm({ item }) {
const template = item.template ? await getTemplateSchemaByMode(item) : null;
const result = createFormBlockSchema({
const result = createManualFormBlockUISchema({
actionInitializers: 'workflowManual:form:configureActions',
actions: {
resolve: {

5
packages/plugins/@nocobase/plugin-workflow-manual/src/client/instruction/createManualFormBlockUISchema.ts Normal file
View File

@ -0,0 +1,5 @@
import { createFormBlockSchema } from '@nocobase/client';
export function createManualFormBlockUISchema(options) {
return createFormBlockSchema(options);
}