Merge remote-tracking branch 'upstream/main' into fix_new_version
This commit is contained in:
commit
86ffb8f4a9
@ -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,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -36,6 +36,7 @@ import { TableFieldResource } from '../TableFieldProvider';
|
||||
|
||||
export * from './useFormActiveFields';
|
||||
export * from './useParsedFilter';
|
||||
export * from './useDataBlockSourceId';
|
||||
|
||||
export const usePickActionProps = () => {
|
||||
const form = useForm();
|
||||
|
||||
@ -7,6 +7,7 @@ import {
|
||||
} from '../..';
|
||||
|
||||
/**
|
||||
* @internal
|
||||
* 注意：这里有一个需要更改 schema 才能解决的问题，就是在获取 sourceId 的时候无法确定（在关系字段和当前表同表时）
|
||||
* 是需要从 recordData 还是 parentRecordData 中获取;解决方法是通过更改 schema，在不同类型的关系区块中
|
||||
* （`通过点击关系字段按钮打开的弹窗中创建的非关系字段区块`和`关系字段区块`）使用不同的 hook。
|
||||
|
||||
@ -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',
|
||||
association,
|
||||
dataSource: collection.dataSource,
|
||||
collection: collection.name,
|
||||
template: s,
|
||||
settings: 'blockSettings:createForm',
|
||||
});
|
||||
const blockSchema = createCreateFormBlockUISchema(
|
||||
association
|
||||
? {
|
||||
association,
|
||||
dataSource: collection.dataSource,
|
||||
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',
|
||||
association,
|
||||
dataSource: collection.dataSource,
|
||||
collection: collection.name,
|
||||
settings: 'blockSettings:createForm',
|
||||
}),
|
||||
createCreateFormBlockUISchema(
|
||||
association
|
||||
? {
|
||||
association,
|
||||
dataSource: collection.dataSource,
|
||||
}
|
||||
: {
|
||||
collectionName: collection.name,
|
||||
dataSource: collection.dataSource,
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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({
|
||||
association,
|
||||
collection: item.collectionName || item.name,
|
||||
dataSource: item.dataSource,
|
||||
action: 'get',
|
||||
useSourceId: '{{ useSourceIdFromParentRecord }}',
|
||||
useParams: '{{ useParamsFromRecord }}',
|
||||
actionInitializers: 'editForm:configureActions',
|
||||
settings: 'blockSettings:editForm',
|
||||
}),
|
||||
createEditFormBlockUISchema(
|
||||
association
|
||||
? {
|
||||
association,
|
||||
dataSource: item.dataSource,
|
||||
}
|
||||
: {
|
||||
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({
|
||||
association,
|
||||
collection: item.collectionName || item.name,
|
||||
dataSource: item.dataSource,
|
||||
action: 'get',
|
||||
useSourceId: '{{ useSourceIdFromParentRecord }}',
|
||||
useParams: '{{ useParamsFromRecord }}',
|
||||
actionInitializers: 'editForm:configureActions',
|
||||
template: templateSchema,
|
||||
settings: 'blockSettings:editForm',
|
||||
});
|
||||
const blockSchema = createEditFormBlockUISchema(
|
||||
association
|
||||
? {
|
||||
association,
|
||||
dataSource: item.dataSource,
|
||||
templateSchema: templateSchema,
|
||||
}
|
||||
: {
|
||||
collectionName: item.collectionName || item.name,
|
||||
dataSource: item.dataSource,
|
||||
templateSchema: templateSchema,
|
||||
},
|
||||
);
|
||||
if (item.mode === 'reference') {
|
||||
blockSchema['x-template-key'] = item.template.key;
|
||||
}
|
||||
|
||||
@ -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",
|
||||
}
|
||||
`);
|
||||
});
|
||||
});
|
||||
@ -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",
|
||||
}
|
||||
`);
|
||||
});
|
||||
});
|
||||
@ -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;
|
||||
}
|
||||
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -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,
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
import { useFormBlockProps } from '../../../../../block-provider/FormBlockProvider';
|
||||
|
||||
export function useCreateFormBlockProps() {
|
||||
return useFormBlockProps();
|
||||
}
|
||||
@ -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();
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
import { useFormBlockProps } from '../../../../../block-provider/FormBlockProvider';
|
||||
|
||||
export function useEditFormBlockProps() {
|
||||
return useFormBlockProps();
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
import { useDataBlockSourceId } from '../../../../../block-provider/hooks/useDataBlockSourceId';
|
||||
|
||||
export function useFormBlockSourceId(props) {
|
||||
return useDataBlockSourceId(props);
|
||||
}
|
||||
@ -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';
|
||||
|
||||
@ -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);
|
||||
}}
|
||||
|
||||
@ -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",
|
||||
}
|
||||
`);
|
||||
});
|
||||
});
|
||||
@ -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',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
@ -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,
|
||||
};
|
||||
}
|
||||
@ -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,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' });
|
||||
|
||||
// 选中一行数据之后，弹窗自动关闭，且数据被填充到关联字段中
|
||||
|
||||
@ -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",
|
||||
}
|
||||
`);
|
||||
});
|
||||
});
|
||||
@ -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',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
export function useTableSelectorDecoratorProps() {}
|
||||
@ -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',
|
||||
});
|
||||
|
||||
@ -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',
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -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',
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
export function useCollapseBlockDecoratorProps() {}
|
||||
@ -2,11 +2,7 @@ import { useCollection_deprecated } from '../../../..';
|
||||
import { CompatibleSchemaInitializer } from '../../../../application/schema-initializer/CompatibleSchemaInitializer';
|
||||
import { gridRowColWrap } from '../../../../schema-initializer/utils';
|
||||
|
||||
/**
|
||||
* @deprecated
|
||||
*/
|
||||
export const tableSelectorInitializers_deprecated = new CompatibleSchemaInitializer({
|
||||
name: 'TableSelectorInitializers',
|
||||
const commonOptions = {
|
||||
wrap: gridRowColWrap,
|
||||
title: '{{t("Add block")}}',
|
||||
icon: 'PlusOutlined',
|
||||
@ -84,88 +80,20 @@ export const tableSelectorInitializers_deprecated = new CompatibleSchemaInitiali
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
/**
|
||||
* @deprecated
|
||||
*/
|
||||
export const tableSelectorInitializers_deprecated = new CompatibleSchemaInitializer({
|
||||
name: 'TableSelectorInitializers',
|
||||
...commonOptions,
|
||||
});
|
||||
|
||||
export const tableSelectorInitializers = new CompatibleSchemaInitializer(
|
||||
{
|
||||
name: 'popup:tableSelector:addBlock',
|
||||
wrap: gridRowColWrap,
|
||||
title: '{{t("Add block")}}',
|
||||
icon: 'PlusOutlined',
|
||||
items: [
|
||||
{
|
||||
type: 'itemGroup',
|
||||
title: '{{t("Selector")}}',
|
||||
name: 'selector',
|
||||
children: [
|
||||
{
|
||||
name: 'title',
|
||||
title: 'Table',
|
||||
Component: 'TableSelectorInitializer',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'itemGroup',
|
||||
title: '{{t("Filter blocks")}}',
|
||||
name: 'filterBlocks',
|
||||
useChildren() {
|
||||
const { name, dataSource } = useCollection_deprecated();
|
||||
return [
|
||||
{
|
||||
name: 'filterFormBlockInTableSelector',
|
||||
title: '{{t("Form")}}',
|
||||
Component: 'FilterFormBlockInitializer',
|
||||
componentProps: {
|
||||
filterCollections() {
|
||||
return false;
|
||||
},
|
||||
onlyCurrentDataSource: true,
|
||||
},
|
||||
collectionName: name,
|
||||
dataSource,
|
||||
},
|
||||
{
|
||||
name: 'filterCollapseBlockInTableSelector',
|
||||
title: '{{t("Collapse")}}',
|
||||
Component: 'FilterCollapseBlockInitializer',
|
||||
componentProps: {
|
||||
filterCollections() {
|
||||
return false;
|
||||
},
|
||||
onlyCurrentDataSource: true,
|
||||
},
|
||||
collectionName: name,
|
||||
dataSource,
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'itemGroup',
|
||||
title: '{{t("Other blocks")}}',
|
||||
name: 'otherBlocks',
|
||||
children: [
|
||||
{
|
||||
title: '{{t("Add text")}}',
|
||||
Component: 'BlockItemInitializer',
|
||||
name: 'addText',
|
||||
schema: {
|
||||
type: 'void',
|
||||
'x-editable': false,
|
||||
'x-decorator': 'BlockItem',
|
||||
// 'x-designer': 'Markdown.Void.Designer',
|
||||
'x-toolbar': 'BlockSchemaToolbar',
|
||||
'x-settings': 'blockSettings:markdown',
|
||||
'x-component': 'Markdown.Void',
|
||||
'x-component-props': {
|
||||
content: '{{t("This is a demo text, **supports Markdown syntax**.")}}',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
...commonOptions,
|
||||
},
|
||||
tableSelectorInitializers_deprecated,
|
||||
);
|
||||
|
||||
@ -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,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';
|
||||
|
||||
@ -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,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);
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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',
|
||||
}),
|
||||
);
|
||||
},
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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',
|
||||
association,
|
||||
collection: collection.name,
|
||||
dataSource: collection.dataSource,
|
||||
template: s,
|
||||
});
|
||||
const blockSchema = createCreateFormBlockUISchema(
|
||||
association
|
||||
? {
|
||||
association,
|
||||
dataSource: collection.dataSource,
|
||||
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,
|
||||
}),
|
||||
);
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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,
|
||||
},
|
||||
};
|
||||
@ -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",
|
||||
}
|
||||
`);
|
||||
});
|
||||
});
|
||||
@ -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,100 +177,104 @@ const CalendarRecordViewer = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const Calendar: any = observer(
|
||||
(props: any) => {
|
||||
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);
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [record, setRecord] = useState<any>({});
|
||||
const { wrapSSR, hashId, componentCls: containerClassName } = useStyle();
|
||||
export const Calendar: any = withDynamicSchemaProps(
|
||||
observer(
|
||||
(props: any) => {
|
||||
// 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
|
||||
const { dataSource, fieldNames, showLunar, fixedBlock } = useProps(props);
|
||||
|
||||
const components = useMemo(() => {
|
||||
return {
|
||||
toolbar: (props) => <Toolbar {...props} showLunar={showLunar}></Toolbar>,
|
||||
// week: {
|
||||
// header: (props) => <Header {...props} type="week" showLunar={showLunar}></Header>,
|
||||
// },
|
||||
month: {
|
||||
dateHeader: (props) => <Header {...props} showLunar={showLunar}></Header>,
|
||||
},
|
||||
const [date, setDate] = useState<Date>(new Date());
|
||||
const [view, setView] = useState<View>('month');
|
||||
const events = useEvents(dataSource, fieldNames, date, view);
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [record, setRecord] = useState<any>({});
|
||||
const { wrapSSR, hashId, componentCls: containerClassName } = useStyle();
|
||||
|
||||
const components = useMemo(() => {
|
||||
return {
|
||||
toolbar: (props) => <Toolbar {...props} showLunar={showLunar}></Toolbar>,
|
||||
// week: {
|
||||
// header: (props) => <Header {...props} type="week" showLunar={showLunar}></Header>,
|
||||
// },
|
||||
month: {
|
||||
dateHeader: (props) => <Header {...props} showLunar={showLunar}></Header>,
|
||||
},
|
||||
};
|
||||
}, [showLunar]);
|
||||
|
||||
const messages: any = {
|
||||
allDay: '',
|
||||
previous: (
|
||||
<div>
|
||||
<LeftOutlined />
|
||||
</div>
|
||||
),
|
||||
next: (
|
||||
<div>
|
||||
<RightOutlined />
|
||||
</div>
|
||||
),
|
||||
today: i18nt('Today'),
|
||||
month: i18nt('Month'),
|
||||
week: i18nt('Week'),
|
||||
work_week: i18nt('Work week'),
|
||||
day: i18nt('Day'),
|
||||
agenda: i18nt('Agenda'),
|
||||
date: i18nt('Date'),
|
||||
time: i18nt('Time'),
|
||||
event: i18nt('Event'),
|
||||
noEventsInRange: i18nt('None'),
|
||||
showMore: (count) => i18nt('{{count}} more items', { count }),
|
||||
};
|
||||
}, [showLunar]);
|
||||
|
||||
const messages: any = {
|
||||
allDay: '',
|
||||
previous: (
|
||||
<div>
|
||||
<LeftOutlined />
|
||||
</div>
|
||||
),
|
||||
next: (
|
||||
<div>
|
||||
<RightOutlined />
|
||||
</div>
|
||||
),
|
||||
today: i18nt('Today'),
|
||||
month: i18nt('Month'),
|
||||
week: i18nt('Week'),
|
||||
work_week: i18nt('Work week'),
|
||||
day: i18nt('Day'),
|
||||
agenda: i18nt('Agenda'),
|
||||
date: i18nt('Date'),
|
||||
time: i18nt('Time'),
|
||||
event: i18nt('Event'),
|
||||
noEventsInRange: i18nt('None'),
|
||||
showMore: (count) => i18nt('{{count}} more items', { count }),
|
||||
};
|
||||
return wrapSSR(
|
||||
<div className={`${hashId} ${containerClassName}`} style={{ height: fixedBlock ? '100%' : 700 }}>
|
||||
<GlobalStyle />
|
||||
<CalendarRecordViewer visible={visible} setVisible={setVisible} record={record} />
|
||||
<BigCalendar
|
||||
popup
|
||||
selectable
|
||||
events={events}
|
||||
view={view}
|
||||
views={Weeks}
|
||||
date={date}
|
||||
step={60}
|
||||
showMultiDayTimes
|
||||
messages={messages}
|
||||
onNavigate={setDate}
|
||||
onView={setView}
|
||||
onSelectSlot={(slotInfo) => {
|
||||
console.log('onSelectSlot', slotInfo);
|
||||
}}
|
||||
onDoubleClickEvent={() => {
|
||||
console.log('onDoubleClickEvent');
|
||||
}}
|
||||
onSelectEvent={(event) => {
|
||||
const record = dataSource?.find((item) => item[fieldNames.id] === event.id);
|
||||
if (!record) {
|
||||
return;
|
||||
}
|
||||
record.__event = { ...event, start: formatDate(dayjs(event.start)), end: formatDate(dayjs(event.end)) };
|
||||
|
||||
setRecord(record);
|
||||
setVisible(true);
|
||||
}}
|
||||
formats={{
|
||||
monthHeaderFormat: 'YYYY-M',
|
||||
agendaDateFormat: 'M-DD',
|
||||
dayHeaderFormat: 'YYYY-M-DD',
|
||||
dayRangeHeaderFormat: ({ start, end }, culture, local) => {
|
||||
if (dates.eq(start, end, 'month')) {
|
||||
return local.format(start, 'YYYY-M', culture);
|
||||
return wrapSSR(
|
||||
<div className={`${hashId} ${containerClassName}`} style={{ height: fixedBlock ? '100%' : 700 }}>
|
||||
<GlobalStyle />
|
||||
<CalendarRecordViewer visible={visible} setVisible={setVisible} record={record} />
|
||||
<BigCalendar
|
||||
popup
|
||||
selectable
|
||||
events={events}
|
||||
view={view}
|
||||
views={Weeks}
|
||||
date={date}
|
||||
step={60}
|
||||
showMultiDayTimes
|
||||
messages={messages}
|
||||
onNavigate={setDate}
|
||||
onView={setView}
|
||||
onSelectSlot={(slotInfo) => {
|
||||
console.log('onSelectSlot', slotInfo);
|
||||
}}
|
||||
onDoubleClickEvent={() => {
|
||||
console.log('onDoubleClickEvent');
|
||||
}}
|
||||
onSelectEvent={(event) => {
|
||||
const record = dataSource?.find((item) => item[fieldNames.id] === event.id);
|
||||
if (!record) {
|
||||
return;
|
||||
}
|
||||
return `${local.format(start, 'YYYY-M', culture)} - ${local.format(end, 'YYYY-M', culture)}`;
|
||||
},
|
||||
}}
|
||||
components={components}
|
||||
localizer={localizer}
|
||||
/>
|
||||
</div>,
|
||||
);
|
||||
},
|
||||
{ displayName: 'Calendar' },
|
||||
record.__event = { ...event, start: formatDate(dayjs(event.start)), end: formatDate(dayjs(event.end)) };
|
||||
|
||||
setRecord(record);
|
||||
setVisible(true);
|
||||
}}
|
||||
formats={{
|
||||
monthHeaderFormat: 'YYYY-M',
|
||||
agendaDateFormat: 'M-DD',
|
||||
dayHeaderFormat: 'YYYY-M-DD',
|
||||
dayRangeHeaderFormat: ({ start, end }, culture, local) => {
|
||||
if (dates.eq(start, end, 'month')) {
|
||||
return local.format(start, 'YYYY-M', culture);
|
||||
}
|
||||
return `${local.format(start, 'YYYY-M', culture)} - ${local.format(end, 'YYYY-M', culture)}`;
|
||||
},
|
||||
}}
|
||||
components={components}
|
||||
localizer={localizer}
|
||||
/>
|
||||
</div>,
|
||||
);
|
||||
},
|
||||
{ displayName: 'Calendar' },
|
||||
),
|
||||
);
|
||||
|
||||
@ -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,
|
||||
};
|
||||
}
|
||||
@ -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]);
|
||||
}
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
};
|
||||
@ -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',
|
||||
}),
|
||||
);
|
||||
}}
|
||||
|
||||
@ -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',
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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",
|
||||
}
|
||||
`);
|
||||
});
|
||||
});
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
@ -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',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
@ -41,6 +41,10 @@ export class GanttPlugin extends Plugin {
|
||||
title: "{{t('Gantt')}}",
|
||||
Component: 'GanttBlockInitializer',
|
||||
});
|
||||
|
||||
this.app.addScopes({
|
||||
useGanttBlockProps,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
};
|
||||
|
||||
@ -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,100 +57,105 @@ export const toColumns = (groupField: any, dataSource: Array<any> = [], primaryK
|
||||
return Object.values(columns);
|
||||
};
|
||||
|
||||
export const Kanban: any = observer(
|
||||
(props: any) => {
|
||||
const { styles } = useStyles();
|
||||
const { groupField, onCardDragEnd, dataSource, setDataSource, ...restProps } = useProps(props);
|
||||
const parentRecordData = useCollectionParentRecordData();
|
||||
const field = useField<ArrayField>();
|
||||
const fieldSchema = useFieldSchema();
|
||||
const [disableCardDrag, setDisableCardDrag] = useState(false);
|
||||
const schemas = useMemo(
|
||||
() =>
|
||||
fieldSchema.reduceProperties(
|
||||
(buf, current) => {
|
||||
if (current['x-component'].endsWith('.Card')) {
|
||||
buf.card = current;
|
||||
} else if (current['x-component'].endsWith('.CardAdder')) {
|
||||
buf.cardAdder = current;
|
||||
} else if (current['x-component'].endsWith('.CardViewer')) {
|
||||
buf.cardViewer = current;
|
||||
}
|
||||
return buf;
|
||||
},
|
||||
{ card: null, cardAdder: null, cardViewer: null },
|
||||
),
|
||||
[],
|
||||
);
|
||||
const handleCardRemove = (card, column) => {
|
||||
const updatedBoard = Board.removeCard({ columns: field.value }, column, card);
|
||||
field.value = updatedBoard.columns;
|
||||
setDataSource(updatedBoard.columns);
|
||||
};
|
||||
const handleCardDragEnd = (card, fromColumn, toColumn) => {
|
||||
onCardDragEnd?.({ columns: field.value, groupField }, fromColumn, toColumn);
|
||||
const updatedBoard = Board.moveCard({ columns: field.value }, fromColumn, toColumn);
|
||||
field.value = updatedBoard.columns;
|
||||
setDataSource(updatedBoard.columns);
|
||||
};
|
||||
return (
|
||||
<Spin wrapperClassName={styles.nbKanban} spinning={field.loading || false}>
|
||||
<Board
|
||||
{...restProps}
|
||||
allowAddCard={!!schemas.cardAdder}
|
||||
disableColumnDrag
|
||||
cardAdderPosition={'bottom'}
|
||||
disableCardDrag={restProps.disableCardDrag || disableCardDrag}
|
||||
onCardRemove={handleCardRemove}
|
||||
onCardDragEnd={handleCardDragEnd}
|
||||
renderColumnHeader={({ title, color }) => (
|
||||
<div className={'react-kanban-column-header'}>
|
||||
<Tag color={color}>{title}</Tag>
|
||||
</div>
|
||||
)}
|
||||
renderCard={(card, { column, dragging }) => {
|
||||
const columnIndex = dataSource?.indexOf(column);
|
||||
const cardIndex = column?.cards?.indexOf(card);
|
||||
return (
|
||||
schemas.card && (
|
||||
<RecordProvider record={card} parent={parentRecordData}>
|
||||
<KanbanCardContext.Provider
|
||||
value={{
|
||||
setDisableCardDrag,
|
||||
cardViewerSchema: schemas.cardViewer,
|
||||
cardField: field,
|
||||
card,
|
||||
column,
|
||||
dragging,
|
||||
columnIndex,
|
||||
cardIndex,
|
||||
}}
|
||||
>
|
||||
<RecursionField name={schemas.card.name} schema={schemas.card} />
|
||||
</KanbanCardContext.Provider>
|
||||
</RecordProvider>
|
||||
)
|
||||
);
|
||||
}}
|
||||
renderCardAdder={({ column }) => {
|
||||
if (!schemas.cardAdder) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<KanbanColumnContext.Provider value={{ column, groupField }}>
|
||||
<SchemaComponentOptions scope={{ useCreateActionProps }}>
|
||||
<RecursionField name={schemas.cardAdder.name} schema={schemas.cardAdder} />
|
||||
</SchemaComponentOptions>
|
||||
</KanbanColumnContext.Provider>
|
||||
);
|
||||
}}
|
||||
>
|
||||
{{
|
||||
columns: dataSource || [],
|
||||
}}
|
||||
</Board>
|
||||
</Spin>
|
||||
);
|
||||
},
|
||||
{ displayName: 'Kanban' },
|
||||
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();
|
||||
const [disableCardDrag, setDisableCardDrag] = useState(false);
|
||||
const schemas = useMemo(
|
||||
() =>
|
||||
fieldSchema.reduceProperties(
|
||||
(buf, current) => {
|
||||
if (current['x-component'].endsWith('.Card')) {
|
||||
buf.card = current;
|
||||
} else if (current['x-component'].endsWith('.CardAdder')) {
|
||||
buf.cardAdder = current;
|
||||
} else if (current['x-component'].endsWith('.CardViewer')) {
|
||||
buf.cardViewer = current;
|
||||
}
|
||||
return buf;
|
||||
},
|
||||
{ card: null, cardAdder: null, cardViewer: null },
|
||||
),
|
||||
[],
|
||||
);
|
||||
const handleCardRemove = (card, column) => {
|
||||
const updatedBoard = Board.removeCard({ columns: field.value }, column, card);
|
||||
field.value = updatedBoard.columns;
|
||||
setDataSource(updatedBoard.columns);
|
||||
};
|
||||
const handleCardDragEnd = (card, fromColumn, toColumn) => {
|
||||
onCardDragEnd?.({ columns: field.value, groupField }, fromColumn, toColumn);
|
||||
const updatedBoard = Board.moveCard({ columns: field.value }, fromColumn, toColumn);
|
||||
field.value = updatedBoard.columns;
|
||||
setDataSource(updatedBoard.columns);
|
||||
};
|
||||
return (
|
||||
<Spin wrapperClassName={styles.nbKanban} spinning={field.loading || false}>
|
||||
<Board
|
||||
{...restProps}
|
||||
allowAddCard={!!schemas.cardAdder}
|
||||
disableColumnDrag
|
||||
cardAdderPosition={'bottom'}
|
||||
disableCardDrag={restProps.disableCardDrag || disableCardDrag}
|
||||
onCardRemove={handleCardRemove}
|
||||
onCardDragEnd={handleCardDragEnd}
|
||||
renderColumnHeader={({ title, color }) => (
|
||||
<div className={'react-kanban-column-header'}>
|
||||
<Tag color={color}>{title}</Tag>
|
||||
</div>
|
||||
)}
|
||||
renderCard={(card, { column, dragging }) => {
|
||||
const columnIndex = dataSource?.indexOf(column);
|
||||
const cardIndex = column?.cards?.indexOf(card);
|
||||
return (
|
||||
schemas.card && (
|
||||
<RecordProvider record={card} parent={parentRecordData}>
|
||||
<KanbanCardContext.Provider
|
||||
value={{
|
||||
setDisableCardDrag,
|
||||
cardViewerSchema: schemas.cardViewer,
|
||||
cardField: field,
|
||||
card,
|
||||
column,
|
||||
dragging,
|
||||
columnIndex,
|
||||
cardIndex,
|
||||
}}
|
||||
>
|
||||
<RecursionField name={schemas.card.name} schema={schemas.card} />
|
||||
</KanbanCardContext.Provider>
|
||||
</RecordProvider>
|
||||
)
|
||||
);
|
||||
}}
|
||||
renderCardAdder={({ column }) => {
|
||||
if (!schemas.cardAdder) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<KanbanColumnContext.Provider value={{ column, groupField }}>
|
||||
<SchemaComponentOptions scope={{ useCreateActionProps }}>
|
||||
<RecursionField name={schemas.cardAdder.name} schema={schemas.cardAdder} />
|
||||
</SchemaComponentOptions>
|
||||
</KanbanColumnContext.Provider>
|
||||
);
|
||||
}}
|
||||
>
|
||||
{{
|
||||
columns: dataSource || [],
|
||||
}}
|
||||
</Board>
|
||||
</Spin>
|
||||
);
|
||||
},
|
||||
{ displayName: 'Kanban' },
|
||||
),
|
||||
);
|
||||
|
||||
@ -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,
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
@ -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",
|
||||
}
|
||||
`);
|
||||
});
|
||||
@ -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;
|
||||
};
|
||||
@ -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",
|
||||
}
|
||||
`);
|
||||
});
|
||||
@ -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} />;
|
||||
};
|
||||
});
|
||||
|
||||
@ -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',
|
||||
}),
|
||||
);
|
||||
}}
|
||||
|
||||
@ -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',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
@ -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];
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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,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: {
|
||||
|
||||
@ -0,0 +1,5 @@
|
||||
import { createFormBlockSchema } from '@nocobase/client';
|
||||
|
||||
export function createManualFormBlockUISchema(options) {
|
||||
return createFormBlockSchema(options);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user