From 799603f9f2230900f3e5d43e8da6a0dd96a6722b Mon Sep 17 00:00:00 2001 From: "bai.jingfeng" Date: Mon, 8 Apr 2024 17:09:14 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=B7=9F=E8=B8=AA=E4=B8=8A?= =?UTF-8?q?=E6=B8=B8,(refactor:=20change=20useProps=20to=20x-use-component?= =?UTF-8?q?-props=20(#3853))=20(#629)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Reviewed-on: https://git.daoyoucloud.com/daoyoucloud/tachycode/pulls/629 Co-authored-by: bai.jingfeng Co-committed-by: bai.jingfeng --- .../Configuration/schemas/roleCollections.ts | 262 ------------ .../src/acl/Configuration/schemas/roles.ts | 1 - .../src/acl/Configuration/schemas/scopes.ts | 50 +-- .../hoc/withDynamicSchemaProps.tsx | 35 +- .../collection-manager/interfaces/subTable.ts | 2 +- .../BulkDestroyActionInitializer.tsx | 2 +- .../delete/DestroyActionInitializer.tsx | 2 +- .../DisassociateActionInitializer.tsx | 2 +- .../filter/FilterActionInitializer.tsx | 2 +- .../refresh/RefreshActionInitializer.tsx | 2 +- .../SaveRecordActionInitializer.tsx | 4 +- .../submit/CreateSubmitActionInitializer.tsx | 2 +- .../submit/UpdateSubmitActionInitializer.tsx | 2 +- .../UpdateRecordActionInitializer.tsx | 4 +- .../filterCollapseItemFieldSettings.ts | 2 +- .../filterCollapseItemInitializer.tsx | 15 +- .../antd/action/Action.Link.tsx | 7 +- .../schema-component/antd/action/Action.tsx | 9 +- .../antd/action/demos/demo3.tsx | 3 +- .../antd/association-field/FileManager.tsx | 4 +- .../antd/association-field/schema.ts | 2 +- .../AssociationFilter.Initializer.tsx | 3 +- .../AssociationFilter.Item.Designer.tsx | 2 +- .../AssociationFilter.Item.tsx | 258 +++++------ .../schema-component/antd/filter/Filter.tsx | 9 +- .../antd/filter/FilterAction.tsx | 9 +- .../antd/filter/demos/demo6.tsx | 16 +- .../antd/form-v2/demos/demo2.tsx | 4 +- .../antd/form-v2/demos/demo3.tsx | 4 +- .../antd/g2plot/G2PlotDesigner.tsx | 7 +- .../src/schema-component/antd/grid/Grid.tsx | 5 +- .../antd/record-picker/demos/demo1.tsx | 4 +- .../antd/table-v2/Table.Column.Designer.tsx | 5 +- .../antd/table-v2/demos/demo1.tsx | 6 +- .../antd/table/Table.Column.Designer.tsx | 5 +- .../schema-component/antd/upload/Upload.tsx | 70 +-- .../schema-component/antd/upload/type.d.ts | 1 + .../items/CreateFilterActionInitializer.tsx | 2 +- .../items/CreateResetActionInitializer.tsx | 4 +- .../items/SelectActionInitializer.tsx | 2 +- .../items/SubmitActionInitializer.tsx | 1 - .../client/src/schema-initializer/utils.ts | 24 +- .../DataTemplates/FormDataTemplates.tsx | 402 +++++++++--------- .../schema-settings/DataTemplates/utils.tsx | 2 +- .../EnableChildCollections/index.tsx | 12 +- .../LinkageRules/LinkageRuleActionGroup.tsx | 68 +-- .../schema-settings/LinkageRules/index.tsx | 44 +- .../src/schema-settings/SchemaSettings.tsx | 58 ++- .../SchemaSettingsDefaultValue.tsx | 2 +- .../schemas/uiSchemaTemplates.ts | 12 +- .../plugin-acl/src/client/schemas/roles.ts | 2 +- .../plugin-acl/src/client/schemas/scopes.ts | 50 +-- .../BulkEditSubmitActionInitializer.tsx | 2 +- .../src/client/createBulkEditBlockUISchema.ts | 4 +- .../client/BulkUpdateActionInitializer.tsx | 2 +- .../src/client/DuplicateAction.Settings.tsx | 2 +- .../src/client/PrintActionInitializer.tsx | 2 +- .../src/client/Configuration/schema.tsx | 2 +- .../AuditLogsViewActionInitializer.tsx | 6 +- .../src/client/createAuditLogsBlockSchema.tsx | 2 +- .../src/client/deplicated/AuditLogs.tsx | 8 +- .../src/client/calendar/demos/demo2.tsx | 4 +- .../CalendarFormActionInitializers.tsx | 4 +- .../src/client/ChartBlockEngineDesigner.tsx | 2 +- .../migrations/20230623145414-number-step.ts | 3 +- .../components/TitleField.tsx | 78 ++-- .../schema/collectionFields.ts | 4 +- .../CollectionsManager/schema/collections.ts | 4 +- .../Configuration/schemas/collections.ts | 2 +- .../schemas/roleCollections.ts | 2 +- .../PermissionManager/schemas/scopes.ts | 50 +-- .../src/client/schema/index.ts | 2 +- .../filter/FilterActionInitializers.tsx | 8 +- .../src/client/hooks/filter.ts | 3 +- .../src/client/ExportActionInitializer.tsx | 2 +- .../initializers/UploadActionInitializer.tsx | 2 +- .../20230831160742-fix-attachment-field.ts | 1 + .../plugin-gantt/src/client/demos/demo1.tsx | 2 +- .../SnapshotBlockInitializersDetailItem.tsx | 4 +- .../migrations/20230510235247-form-field.ts | 4 +- .../plugin-users/src/client/schemas/users.ts | 6 +- .../src/client/index.ts | 4 +- .../src/client/AggregateInstruction.tsx | 26 +- .../src/client/WorkflowTodo.tsx | 6 +- .../src/client/instruction/forms/custom.tsx | 5 +- .../src/client/instruction/forms/update.tsx | 13 +- .../components/CollectionBlockInitializer.tsx | 4 +- .../src/client/nodes/index.tsx | 5 +- .../src/client/schemas/collection.ts | 26 +- .../src/client/schemas/workflows.ts | 2 +- .../src/client/triggers/collection.tsx | 4 +- .../src/client/triggers/index.tsx | 5 +- .../20230411034722-manual-multi-form.ts | 4 +- .../20230612021134-manual-collection-block.ts | 4 +- 94 files changed, 796 insertions(+), 1036 deletions(-) delete mode 100644 packages/core/client/src/acl/Configuration/schemas/roleCollections.ts diff --git a/packages/core/client/src/acl/Configuration/schemas/roleCollections.ts b/packages/core/client/src/acl/Configuration/schemas/roleCollections.ts deleted file mode 100644 index 31f96e09b..000000000 --- a/packages/core/client/src/acl/Configuration/schemas/roleCollections.ts +++ /dev/null @@ -1,262 +0,0 @@ -import { ISchema } from '@nocobase/schema'; -import { uid } from '@nocobase/schema'; -import { useRoleResourceValues } from './useRoleResourceValues'; -import { useSaveRoleResourceAction } from './useSaveRoleResourceAction'; - -const collection = { - name: 'collections', - targetKey: 'name', - filterTargetKey: 'name', - fields: [ - { - type: 'integer', - name: 'title', - interface: 'input', - uiSchema: { - title: '{{t("Collection display name")}}', - type: 'number', - 'x-component': 'Input', - required: true, - } as ISchema, - }, - { - type: 'string', - name: 'name', - interface: 'input', - uiSchema: { - title: '{{t("Collection name")}}', - type: 'string', - 'x-component': 'Input', - } as ISchema, - }, - { - type: 'string', - name: 'type', - interface: 'input', - uiSchema: { - title: '{{t("Resource type")}}', - type: 'string', - 'x-component': 'Select', - enum: [ - { label: '{{t("Collection")}}', value: 'collection', color: 'green' }, - { label: '{{t("Association")}}', value: 'association', color: 'blue' }, - ], - } as ISchema, - }, - { - type: 'string', - name: 'usingConfig', - interface: 'input', - uiSchema: { - title: '{{t("Permission policy")}}', - type: 'string', - 'x-component': 'Select', - enum: [ - { label: '{{t("Individual")}}', value: 'resourceAction', color: 'orange' }, - { label: '{{t("General")}}', value: 'strategy', color: 'default' }, - ], - } as ISchema, - }, - { - type: 'hasMany', - name: 'fields', - target: 'fields', - collectionName: 'collections', - sourceKey: 'name', - targetKey: 'name', - uiSchema: {}, - }, - ], -}; - -export const roleCollectionsSchema: ISchema = { - type: 'void', - 'x-decorator': 'ResourceActionProvider', - 'x-decorator-props': { - collection, - association: { - sourceKey: 'name', - targetKey: 'name', - }, - resourceName: 'roles.collections', - request: { - resource: 'roles.collections', - action: 'list', - params: { - pageSize: 20, - filter: { hidden: { $isFalsy: true } }, - sort: ['sort'], - appends: [], - }, - }, - }, - properties: { - [uid()]: { - type: 'void', - 'x-component': 'ActionBar', - 'x-component-props': { - style: { - marginBottom: 16, - }, - }, - properties: { - filter: { - type: 'void', - title: '{{ t("Filter") }}', - default: { - $and: [{ title: { $includes: '' } }, { name: { $includes: '' } }], - }, - 'x-action': 'filter', - 'x-component': 'Filter.Action', - 'x-component-props': { - icon: 'FilterOutlined', - useProps: '{{ cm.useFilterActionProps }}', - }, - 'x-align': 'left', - }, - }, - }, - table1: { - type: 'void', - 'x-uid': 'input', - 'x-component': 'Table.Void', - 'x-component-props': { - rowKey: 'name', - // rowSelection: { - // type: 'checkbox', - // }, - useDataSource: '{{ cm.useDataSourceFromRAC }}', - }, - properties: { - column0: { - type: 'void', - 'x-decorator': 'Table.Column.Decorator', - 'x-component': 'Table.Column', - properties: { - title: { - type: 'number', - 'x-component': 'CollectionField', - 'x-read-pretty': true, - }, - }, - }, - // column1: { - // type: 'void', - // 'x-decorator': 'Table.Column.Decorator', - // 'x-component': 'Table.Column', - // properties: { - // type: { - // type: 'string', - // 'x-component': 'CollectionField', - // 'x-read-pretty': true, - // }, - // }, - // }, - column2: { - type: 'void', - 'x-decorator': 'Table.Column.Decorator', - 'x-component': 'Table.Column', - properties: { - name: { - type: 'string', - 'x-component': 'CollectionField', - 'x-read-pretty': true, - }, - }, - }, - column3: { - type: 'void', - 'x-decorator': 'Table.Column.Decorator', - 'x-component': 'Table.Column', - properties: { - usingConfig: { - type: 'string', - 'x-component': 'CollectionField', - 'x-read-pretty': true, - }, - }, - }, - column4: { - type: 'void', - title: '{{t("Actions")}}', - 'x-component': 'Table.Column', - properties: { - actions: { - type: 'void', - 'x-component': 'Space', - 'x-component-props': { - split: '|', - }, - properties: { - configure: { - type: 'void', - title: '{{t("Configure")}}', - 'x-component': 'Action.Link', - 'x-component-props': { - type: 'primary', - }, - properties: { - drawer: { - type: 'void', - 'x-component': 'Action.Drawer', - 'x-decorator': 'Form', - 'x-decorator-props': { - useValues: useRoleResourceValues, - }, - title: '{{t("Configure permission")}}', - properties: { - usingActionsConfig: { - title: '{{t("Permission policy")}}', - 'x-component': 'Radio.Group', - 'x-decorator': 'FormItem', - default: false, - enum: [ - { value: false, label: '{{t("General")}}' }, - { value: true, label: '{{t("Individual")}}' }, - ], - 'x-reactions': { - target: 'actions', - fulfill: { - state: { - hidden: '{{!$self.value}}', - }, - }, - }, - }, - actions: { - 'x-component': 'RolesResourcesActions', - 'x-decorator': 'FormItem', - }, - footer: { - type: 'void', - 'x-component': 'Action.Drawer.Footer', - properties: { - cancel: { - title: '{{t("Cancel")}}', - 'x-component': 'Action', - 'x-component-props': { - useAction: '{{ cm.useCancelAction }}', - }, - }, - submit: { - title: '{{t("Submit")}}', - 'x-component': 'Action', - 'x-component-props': { - type: 'primary', - useAction: useSaveRoleResourceAction, - }, - }, - }, - }, - }, - }, - }, - }, - }, - }, - }, - }, - }, - }, - }, -}; diff --git a/packages/core/client/src/acl/Configuration/schemas/roles.ts b/packages/core/client/src/acl/Configuration/schemas/roles.ts index c64de583b..ced47bcda 100644 --- a/packages/core/client/src/acl/Configuration/schemas/roles.ts +++ b/packages/core/client/src/acl/Configuration/schemas/roles.ts @@ -5,7 +5,6 @@ import { useEffect } from 'react'; import { useRequest } from '../../../api-client'; import { useRecord } from '../../../record-provider'; import { useActionContext } from '../../../schema-component'; -import { roleCollectionsSchema } from './roleCollections'; const collection = { name: 'roles', diff --git a/packages/core/client/src/acl/Configuration/schemas/scopes.ts b/packages/core/client/src/acl/Configuration/schemas/scopes.ts index 004a2ae81..e6adcafde 100644 --- a/packages/core/client/src/acl/Configuration/schemas/scopes.ts +++ b/packages/core/client/src/acl/Configuration/schemas/scopes.ts @@ -124,9 +124,7 @@ export const scopesSchema: ISchema = { form: { type: 'void', 'x-component': 'FormV2', - 'x-component-props': { - useProps: useFormBlockProps, - }, + 'x-use-component-props': useFormBlockProps, properties: { name: { type: 'string', @@ -139,15 +137,17 @@ export const scopesSchema: ISchema = { name: 'filter', 'x-decorator': 'FormItem', 'x-component': 'Filter', + 'x-use-component-props': () => { + // eslint-disable-next-line react-hooks/rules-of-hooks + const ctx = useContext(RoleResourceCollectionContext); + // eslint-disable-next-line react-hooks/rules-of-hooks + const options = useFilterOptions(ctx.name); + return { + options, + }; + }, 'x-component-props': { dynamicComponent: VariableInput, - useProps() { - const ctx = useContext(RoleResourceCollectionContext); - const options = useFilterOptions(ctx.name); - return { - options, - }; - }, }, }, actions: { @@ -164,10 +164,10 @@ export const scopesSchema: ISchema = { title: '{{ t("Submit") }}', 'x-action': 'submit', 'x-component': 'Action', + 'x-use-component-props': 'useCreateActionProps', 'x-component-props': { type: 'primary', htmlType: 'submit', - useProps: '{{ useCreateActionProps }}', }, }, }, @@ -185,12 +185,12 @@ export const scopesSchema: ISchema = { value: { type: 'array', 'x-component': 'TableV2.Selector', + 'x-use-component-props': 'useTableSelectorProps', 'x-component-props': { rowKey: 'id', rowSelection: { type: 'checkbox', }, - useProps: '{{ useTableSelectorProps }}', }, properties: { column1: { @@ -252,9 +252,7 @@ export const scopesSchema: ISchema = { form: { type: 'void', 'x-component': 'FormV2', - 'x-component-props': { - useProps: '{{ useFormBlockProps }}', - }, + 'x-use-component-props': 'useFormBlockProps', properties: { name: { type: 'string', @@ -267,15 +265,17 @@ export const scopesSchema: ISchema = { name: 'filter', 'x-decorator': 'FormItem', 'x-component': 'Filter', + 'x-use-component-props': () => { + // eslint-disable-next-line react-hooks/rules-of-hooks + const ctx = useContext(RoleResourceCollectionContext); + // eslint-disable-next-line react-hooks/rules-of-hooks + const options = useFilterOptions(ctx.name); + return { + options, + }; + }, 'x-component-props': { dynamicComponent: VariableInput, - useProps() { - const ctx = useContext(RoleResourceCollectionContext); - const options = useFilterOptions(ctx.name); - return { - options, - }; - }, }, }, actions: { @@ -292,10 +292,10 @@ export const scopesSchema: ISchema = { title: '{{ t("Submit") }}', 'x-action': 'submit', 'x-component': 'Action', + 'x-use-component-props': 'useUpdateActionProps', 'x-component-props': { type: 'primary', htmlType: 'submit', - useProps: '{{ useUpdateActionProps }}', }, }, }, @@ -313,13 +313,13 @@ export const scopesSchema: ISchema = { 'x-action': 'destroy', 'x-decorator': 'ACLActionProvider', 'x-component': 'Action.Link', + 'x-use-component-props': 'useDestroyActionProps', 'x-component-props': { icon: 'DeleteOutlined', confirm: { title: "{{t('Delete record')}}", content: "{{t('Are you sure you want to delete it?')}}", }, - useProps: '{{ useDestroyActionProps }}', }, }, }, @@ -343,10 +343,10 @@ export const scopesSchema: ISchema = { title: '{{ t("Submit") }}', 'x-action': 'submit', 'x-component': 'Action', + 'x-use-component-props': 'usePickActionProps', 'x-component-props': { type: 'primary', htmlType: 'submit', - useProps: '{{ usePickActionProps }}', }, }, }, diff --git a/packages/core/client/src/application/hoc/withDynamicSchemaProps.tsx b/packages/core/client/src/application/hoc/withDynamicSchemaProps.tsx index 8fdc8d7ed..1ed608b6f 100644 --- a/packages/core/client/src/application/hoc/withDynamicSchemaProps.tsx +++ b/packages/core/client/src/application/hoc/withDynamicSchemaProps.tsx @@ -1,6 +1,7 @@ import { useExpressionScope } from '@nocobase/schema'; import React, { ComponentType, useMemo } from 'react'; import { useDesignable } from '../../schema-component'; +import _ from 'lodash'; const useDefaultSchemaProps = () => undefined; @@ -28,14 +29,35 @@ export function withDynamicSchemaProps(Component: any, options: WithSch } }, [dn]); const useSchemaProps = useMemo(() => { - let res = undefined; - if (useComponentPropsStr) { - res = scope[useComponentPropsStr]; - if (!res) { - console.error(`${useComponentPropsStr} is not registered`); + const getHook = (str: string, scope: Record, allText: string) => { + let res = undefined; + if (_.isFunction(str)) { + res = str; + } else { + res = scope[str]; + if (!res) { + console.error(`${allText} is not registered`); + } } + return res || useDefaultSchemaProps; + }; + + if (!useComponentPropsStr) { + return useDefaultSchemaProps; } - return res || useDefaultSchemaProps; + + if (_.isFunction(useComponentPropsStr)) { + return useComponentPropsStr; + } + + const pathList = useComponentPropsStr.split('.'); + let result; + + for (const item of pathList) { + result = getHook(item, result || scope, useComponentPropsStr); + } + + return result; }, [scope, useComponentPropsStr]); const schemaProps = useSchemaProps(props); @@ -43,6 +65,7 @@ export function withDynamicSchemaProps(Component: any, options: WithSch return { ...props, ...schemaProps }; }, [schemaProps, props]); + // @ts-ignore return {props.children}; }; diff --git a/packages/core/client/src/collection-manager/interfaces/subTable.ts b/packages/core/client/src/collection-manager/interfaces/subTable.ts index 474ec1da8..4cd1e56d0 100644 --- a/packages/core/client/src/collection-manager/interfaces/subTable.ts +++ b/packages/core/client/src/collection-manager/interfaces/subTable.ts @@ -50,11 +50,11 @@ export class SubTableFieldInterface extends CollectionFieldInterface { type: 'array', 'x-initializer': 'table:configureColumns', 'x-component': 'TableV2', + 'x-use-component-props': 'useTableFieldProps', 'x-component-props': { rowSelection: { type: 'checkbox', }, - useProps: '{{ useTableFieldProps }}', }, }, }, diff --git a/packages/core/client/src/modules/actions/bulk-destroy/BulkDestroyActionInitializer.tsx b/packages/core/client/src/modules/actions/bulk-destroy/BulkDestroyActionInitializer.tsx index 96158d885..372cc5bee 100644 --- a/packages/core/client/src/modules/actions/bulk-destroy/BulkDestroyActionInitializer.tsx +++ b/packages/core/client/src/modules/actions/bulk-destroy/BulkDestroyActionInitializer.tsx @@ -15,13 +15,13 @@ export const BulkDestroyActionInitializer = (props) => { 'x-acl-action-props': { skipScopeCheck: true, }, + 'x-use-component-props': 'useBulkDestroyActionProps', 'x-component-props': { icon: 'DeleteOutlined', confirm: { title: "{{t('Delete record')}}", content: "{{t('Are you sure you want to delete it?')}}", }, - useProps: '{{ useBulkDestroyActionProps }}', }, 'x-action-settings': { triggerWorkflows: [], diff --git a/packages/core/client/src/modules/actions/delete/DestroyActionInitializer.tsx b/packages/core/client/src/modules/actions/delete/DestroyActionInitializer.tsx index c1ae72bfa..7f8447a52 100644 --- a/packages/core/client/src/modules/actions/delete/DestroyActionInitializer.tsx +++ b/packages/core/client/src/modules/actions/delete/DestroyActionInitializer.tsx @@ -7,6 +7,7 @@ export const DestroyActionInitializer = (props) => { title: '{{ t("Delete") }}', 'x-action': 'destroy', 'x-component': 'Action', + 'x-use-component-props': 'useDestroyActionProps', 'x-toolbar': 'ActionSchemaToolbar', 'x-settings': 'actionSettings:delete', 'x-component-props': { @@ -15,7 +16,6 @@ export const DestroyActionInitializer = (props) => { title: "{{t('Delete record')}}", content: "{{t('Are you sure you want to delete it?')}}", }, - useProps: '{{ useDestroyActionProps }}', }, 'x-action-settings': { triggerWorkflows: [], diff --git a/packages/core/client/src/modules/actions/disassociate/DisassociateActionInitializer.tsx b/packages/core/client/src/modules/actions/disassociate/DisassociateActionInitializer.tsx index 2065e4f6d..d50377e28 100644 --- a/packages/core/client/src/modules/actions/disassociate/DisassociateActionInitializer.tsx +++ b/packages/core/client/src/modules/actions/disassociate/DisassociateActionInitializer.tsx @@ -7,6 +7,7 @@ export const DisassociateActionInitializer = (props) => { title: '{{ t("Disassociate") }}', 'x-action': 'disassociate', 'x-component': 'Action', + 'x-use-component-props': 'useDisassociateActionProps', 'x-toolbar': 'ActionSchemaToolbar', 'x-settings': 'actionSettings:disassociate', 'x-component-props': { @@ -15,7 +16,6 @@ export const DisassociateActionInitializer = (props) => { title: "{{t('Disassociate record')}}", content: "{{t('Are you sure you want to disassociate it?')}}", }, - useProps: '{{ useDisassociateActionProps }}', }, 'x-action-settings': { triggerWorkflows: [], diff --git a/packages/core/client/src/modules/actions/filter/FilterActionInitializer.tsx b/packages/core/client/src/modules/actions/filter/FilterActionInitializer.tsx index 3d93a3935..cae54d7fa 100644 --- a/packages/core/client/src/modules/actions/filter/FilterActionInitializer.tsx +++ b/packages/core/client/src/modules/actions/filter/FilterActionInitializer.tsx @@ -10,9 +10,9 @@ export const FilterActionInitializer = (props) => { 'x-toolbar': 'ActionSchemaToolbar', 'x-settings': 'actionSettings:filter', 'x-component': 'Filter.Action', + 'x-use-component-props': 'useFilterActionProps', 'x-component-props': { icon: 'FilterOutlined', - useProps: '{{ useFilterActionProps }}', }, }; return ; diff --git a/packages/core/client/src/modules/actions/refresh/RefreshActionInitializer.tsx b/packages/core/client/src/modules/actions/refresh/RefreshActionInitializer.tsx index e3548838d..308313a05 100644 --- a/packages/core/client/src/modules/actions/refresh/RefreshActionInitializer.tsx +++ b/packages/core/client/src/modules/actions/refresh/RefreshActionInitializer.tsx @@ -6,11 +6,11 @@ export const RefreshActionInitializer = (props) => { title: '{{ t("Refresh") }}', 'x-action': 'refresh', 'x-component': 'Action', + 'x-use-component-props': 'useRefreshActionProps', 'x-toolbar': 'ActionSchemaToolbar', 'x-settings': 'actionSettings:refresh', 'x-component-props': { icon: 'ReloadOutlined', - useProps: '{{ useRefreshActionProps }}', }, }; return ; diff --git a/packages/core/client/src/modules/actions/save-record/SaveRecordActionInitializer.tsx b/packages/core/client/src/modules/actions/save-record/SaveRecordActionInitializer.tsx index 22c3356d0..561016b07 100644 --- a/packages/core/client/src/modules/actions/save-record/SaveRecordActionInitializer.tsx +++ b/packages/core/client/src/modules/actions/save-record/SaveRecordActionInitializer.tsx @@ -7,6 +7,7 @@ export const SaveRecordActionInitializer = () => { title: '{{ t("Save record") }}', 'x-action': 'customize:save', 'x-component': 'Action', + 'x-use-component-props': 'useCreateActionProps', 'x-toolbar': 'ActionSchemaToolbar', 'x-settings': 'actionSettings:saveRecord', 'x-designer-props': { @@ -23,9 +24,6 @@ export const SaveRecordActionInitializer = () => { }, triggerWorkflows: [], }, - 'x-component-props': { - useProps: '{{ useCreateActionProps }}', - }, }; const itemConfig = useSchemaInitializerItem(); diff --git a/packages/core/client/src/modules/actions/submit/CreateSubmitActionInitializer.tsx b/packages/core/client/src/modules/actions/submit/CreateSubmitActionInitializer.tsx index e233ab9f2..e06d23e12 100644 --- a/packages/core/client/src/modules/actions/submit/CreateSubmitActionInitializer.tsx +++ b/packages/core/client/src/modules/actions/submit/CreateSubmitActionInitializer.tsx @@ -6,12 +6,12 @@ export const CreateSubmitActionInitializer = (props) => { title: '{{ t("Submit") }}', 'x-action': 'submit', 'x-component': 'Action', + 'x-use-component-props': 'useCreateActionProps', 'x-toolbar': 'ActionSchemaToolbar', 'x-settings': 'actionSettings:createSubmit', 'x-component-props': { type: 'primary', htmlType: 'submit', - useProps: '{{ useCreateActionProps }}', }, 'x-action-settings': { triggerWorkflows: [], diff --git a/packages/core/client/src/modules/actions/submit/UpdateSubmitActionInitializer.tsx b/packages/core/client/src/modules/actions/submit/UpdateSubmitActionInitializer.tsx index c66463dcc..a2d0e6124 100644 --- a/packages/core/client/src/modules/actions/submit/UpdateSubmitActionInitializer.tsx +++ b/packages/core/client/src/modules/actions/submit/UpdateSubmitActionInitializer.tsx @@ -7,13 +7,13 @@ export const UpdateSubmitActionInitializer = (props) => { title: '{{ t("Submit") }}', 'x-action': 'submit', 'x-component': 'Action', + 'x-use-component-props': 'useUpdateActionProps', // 'x-designer': 'Action.Designer', 'x-toolbar': 'ActionSchemaToolbar', 'x-settings': 'actionSettings:updateSubmit', 'x-component-props': { type: 'primary', htmlType: 'submit', - useProps: '{{ useUpdateActionProps }}', }, 'x-action-settings': { triggerWorkflows: [], diff --git a/packages/core/client/src/modules/actions/update-record/UpdateRecordActionInitializer.tsx b/packages/core/client/src/modules/actions/update-record/UpdateRecordActionInitializer.tsx index 47153ecb8..3671e390d 100644 --- a/packages/core/client/src/modules/actions/update-record/UpdateRecordActionInitializer.tsx +++ b/packages/core/client/src/modules/actions/update-record/UpdateRecordActionInitializer.tsx @@ -6,6 +6,7 @@ export const UpdateRecordActionInitializer = (props) => { const schema = { title: '{{ t("Update record") }}', 'x-component': props?.['x-component'] || 'Action.Link', + 'x-use-component-props': 'useCustomizeUpdateActionProps', 'x-action': 'customize:update', 'x-decorator': 'ACLActionProvider', 'x-acl-action': 'update', @@ -21,9 +22,6 @@ export const UpdateRecordActionInitializer = (props) => { }, triggerWorkflows: [], }, - 'x-component-props': { - useProps: '{{ useCustomizeUpdateActionProps }}', - }, }; const itemConfig = useSchemaInitializerItem(); diff --git a/packages/core/client/src/modules/blocks/filter-blocks/collapse/filterCollapseItemFieldSettings.ts b/packages/core/client/src/modules/blocks/filter-blocks/collapse/filterCollapseItemFieldSettings.ts index 7d62e4409..af5943429 100644 --- a/packages/core/client/src/modules/blocks/filter-blocks/collapse/filterCollapseItemFieldSettings.ts +++ b/packages/core/client/src/modules/blocks/filter-blocks/collapse/filterCollapseItemFieldSettings.ts @@ -80,7 +80,7 @@ export const filterCollapseItemFieldSettings = new SchemaSettings({ checked: field.componentProps.defaultCollapse, onChange: (v) => { field.componentProps.defaultCollapse = v; - fieldSchema['x-component-props']['defaultCollapse'] = v; + _.set(fieldSchema, 'x-component-props.defaultCollapse', v); dn.emit('patch', { schema: { ['x-uid']: fieldSchema['x-uid'], diff --git a/packages/core/client/src/modules/blocks/filter-blocks/collapse/filterCollapseItemInitializer.tsx b/packages/core/client/src/modules/blocks/filter-blocks/collapse/filterCollapseItemInitializer.tsx index 01ae30774..6b6ce91d2 100644 --- a/packages/core/client/src/modules/blocks/filter-blocks/collapse/filterCollapseItemInitializer.tsx +++ b/packages/core/client/src/modules/blocks/filter-blocks/collapse/filterCollapseItemInitializer.tsx @@ -19,7 +19,6 @@ export const associationFilterFilterBlockInitializer = new SchemaInitializer({ title: '{{t("Association fields")}}', useChildren() { const associatedFields = useAssociatedFields(); - const useProps = '{{useAssociationFilterBlockProps}}'; const children = associatedFields.map((field) => ({ name: field.key, title: field.uiSchema?.title, @@ -32,11 +31,11 @@ export const associationFilterFilterBlockInitializer = new SchemaInitializer({ 'x-toolbar': 'CollapseItemSchemaToolbar', 'x-settings': 'fieldSettings:FilterCollapseItem', 'x-component': 'AssociationFilter.Item', + 'x-use-component-props': 'useAssociationFilterBlockProps', 'x-component-props': { fieldNames: { label: field.targetKey || 'id', }, - useProps, }, properties: {}, }, @@ -96,7 +95,6 @@ export const filterCollapseItemInitializer_deprecated = new CompatibleSchemaInit title: '{{t("Association fields")}}', useChildren() { const associatedFields = useAssociatedFields(); - const useProps = '{{useAssociationFilterBlockProps}}'; const cm = useCollectionManager_deprecated(); const children = associatedFields.map((field) => ({ name: field.key, @@ -110,11 +108,11 @@ export const filterCollapseItemInitializer_deprecated = new CompatibleSchemaInit 'x-toolbar': 'CollapseItemSchemaToolbar', 'x-settings': 'fieldSettings:FilterCollapseItem', 'x-component': 'AssociationFilter.Item', + 'x-use-component-props': 'useAssociationFilterBlockProps', 'x-component-props': { fieldNames: { label: cm.getCollection(field.target)?.getPrimaryKey() || 'id', }, - useProps, }, properties: {}, }, @@ -129,7 +127,6 @@ export const filterCollapseItemInitializer_deprecated = new CompatibleSchemaInit hideIfNoChildren: true, useChildren() { const optionalList = useOptionalFieldList(); - const useProps = '{{useAssociationFilterBlockProps}}'; const optionalChildren = optionalList.map((field) => ({ name: field.key, title: field.uiSchema.title, @@ -143,11 +140,11 @@ export const filterCollapseItemInitializer_deprecated = new CompatibleSchemaInit 'x-toolbar': 'CollapseItemSchemaToolbar', 'x-settings': 'fieldSettings:FilterCollapseItem', 'x-component': 'AssociationFilter.Item', + 'x-use-component-props': 'useAssociationFilterBlockProps', 'x-component-props': { fieldNames: { label: field.name, }, - useProps, }, properties: {}, }, @@ -172,7 +169,6 @@ export const filterCollapseItemInitializer = new CompatibleSchemaInitializer( title: '{{t("Association fields")}}', useChildren() { const associatedFields = useAssociatedFields(); - const useProps = '{{useAssociationFilterBlockProps}}'; const cm = useCollectionManager_deprecated(); const children = associatedFields.map((field) => ({ name: field.key, @@ -186,11 +182,11 @@ export const filterCollapseItemInitializer = new CompatibleSchemaInitializer( 'x-toolbar': 'CollapseItemSchemaToolbar', 'x-settings': 'fieldSettings:FilterCollapseItem', 'x-component': 'AssociationFilter.Item', + 'x-use-component-props': 'useAssociationFilterBlockProps', 'x-component-props': { fieldNames: { label: cm.getCollection(field.target)?.getPrimaryKey() || 'id', }, - useProps, }, properties: {}, }, @@ -205,7 +201,6 @@ export const filterCollapseItemInitializer = new CompatibleSchemaInitializer( hideIfNoChildren: true, useChildren() { const optionalList = useOptionalFieldList(); - const useProps = '{{useAssociationFilterBlockProps}}'; const optionalChildren = optionalList.map((field) => ({ name: field.key, title: field.uiSchema.title, @@ -219,11 +214,11 @@ export const filterCollapseItemInitializer = new CompatibleSchemaInitializer( 'x-toolbar': 'CollapseItemSchemaToolbar', 'x-settings': 'fieldSettings:FilterCollapseItem', 'x-component': 'AssociationFilter.Item', + 'x-use-component-props': 'useAssociationFilterBlockProps', 'x-component-props': { fieldNames: { label: field.name, }, - useProps, }, properties: {}, }, diff --git a/packages/core/client/src/schema-component/antd/action/Action.Link.tsx b/packages/core/client/src/schema-component/antd/action/Action.Link.tsx index 09560aadb..0ec107c3b 100644 --- a/packages/core/client/src/schema-component/antd/action/Action.Link.tsx +++ b/packages/core/client/src/schema-component/antd/action/Action.Link.tsx @@ -3,12 +3,13 @@ import React from 'react'; import classnames from 'classnames'; import Action from './Action'; import { ComposedAction } from './types'; +import { withDynamicSchemaProps } from '../../../application/hoc/withDynamicSchemaProps'; -export const ActionLink: ComposedAction = observer( - (props: any) => { +export const ActionLink: ComposedAction = withDynamicSchemaProps( + observer((props: any) => { return ( ); - }, + }), { displayName: 'ActionLink' }, ); diff --git a/packages/core/client/src/schema-component/antd/action/Action.tsx b/packages/core/client/src/schema-component/antd/action/Action.tsx index 74521f8f8..3a3a474ea 100644 --- a/packages/core/client/src/schema-component/antd/action/Action.tsx +++ b/packages/core/client/src/schema-component/antd/action/Action.tsx @@ -26,9 +26,10 @@ import { useA } from './hooks'; import { useGetAriaLabelOfAction } from './hooks/useGetAriaLabelOfAction'; import { ComposedAction } from './types'; import { linkageAction } from './utils'; +import { withDynamicSchemaProps } from '../../../application/hoc/withDynamicSchemaProps'; -export const Action: ComposedAction = observer( - (props: any) => { +export const Action: ComposedAction = withDynamicSchemaProps( + observer((props: any) => { const { popover, confirm, @@ -47,7 +48,7 @@ export const Action: ComposedAction = observer( /** 如果为 true 则说明该按钮是树表格的 Add child 按钮 */ addChild, ...others - } = useProps(props); + } = useProps(props); // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema const aclCtx = useACLActionParamsContext(); const { wrapSSR, componentCls, hashId } = useStyles(); const { t } = useTranslation(); @@ -181,7 +182,7 @@ export const Action: ComposedAction = observer( } return wrapSSR(result); - }, + }), { displayName: 'Action' }, ); diff --git a/packages/core/client/src/schema-component/antd/action/demos/demo3.tsx b/packages/core/client/src/schema-component/antd/action/demos/demo3.tsx index 25b78dd2c..888c89856 100644 --- a/packages/core/client/src/schema-component/antd/action/demos/demo3.tsx +++ b/packages/core/client/src/schema-component/antd/action/demos/demo3.tsx @@ -3,6 +3,7 @@ import { ISchema, observer, useField, useFieldSchema } from '@nocobase/schema'; import { Action, SchemaComponent, SchemaComponentProvider, useActionContext } from '@nocobase/client'; import { Radio } from 'antd'; import React, { useRef } from 'react'; +import _ from 'lodash'; const useCloseAction = () => { const { setVisible } = useActionContext(); @@ -25,7 +26,7 @@ const Editable = observer( value={field.componentProps.openMode} onChange={(e) => { field.componentProps.openMode = e.target.value; - schema['x-component-props']['openMode'] = e.target.value; + _.set(schema, 'x-component-props.openMode', e.target.value); }} > Drawer diff --git a/packages/core/client/src/schema-component/antd/association-field/FileManager.tsx b/packages/core/client/src/schema-component/antd/association-field/FileManager.tsx index 707b41c6e..69b96aa81 100644 --- a/packages/core/client/src/schema-component/antd/association-field/FileManager.tsx +++ b/packages/core/client/src/schema-component/antd/association-field/FileManager.tsx @@ -145,8 +145,8 @@ const InternalFileManager = (props) => { ({ type: 'item', name: field.key, @@ -33,11 +32,11 @@ export const associationFilterInitializer = new SchemaInitializer({ 'x-toolbar': 'CollapseItemSchemaToolbar', 'x-settings': 'fieldSettings:FilterCollapseItem', 'x-component': 'AssociationFilter.Item', + 'x-use-component-props': 'useAssociationFilterProps', 'x-component-props': { fieldNames: { label: field.targetKey || 'id', }, - useProps, }, properties: {}, }, diff --git a/packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.Item.Designer.tsx b/packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.Item.Designer.tsx index 2bf5ef9a2..785932c7d 100644 --- a/packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.Item.Designer.tsx +++ b/packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.Item.Designer.tsx @@ -95,7 +95,7 @@ export const AssociationFilterItemDesigner = (props) => { checked={field.componentProps.defaultCollapse} onChange={(v) => { field.componentProps.defaultCollapse = v; - fieldSchema['x-component-props']['defaultCollapse'] = v; + _.set(fieldSchema, 'x-component-props.defaultCollapse', v); dn.emit('patch', { schema: { ['x-uid']: fieldSchema['x-uid'], diff --git a/packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.Item.tsx b/packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.Item.tsx index 0f3017828..49f75fe84 100644 --- a/packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.Item.tsx +++ b/packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.Item.tsx @@ -10,148 +10,152 @@ import { EllipsisWithTooltip } from '../input'; import { getLabelFormatValue, useLabelUiSchema } from '../record-picker'; import { AssociationFilter } from './AssociationFilter'; import useStyles from './AssociationFilter.Item.style'; +import { withDynamicSchemaProps } from '../../../application/hoc/withDynamicSchemaProps'; const { Panel } = Collapse; -export const AssociationFilterItem = (props) => { - const { wrapSSR, componentCls, hashId } = useStyles(); - const { token } = useToken(); - const collectionField = AssociationFilter.useAssociationField(); +export const AssociationFilterItem = withDynamicSchemaProps( + (props) => { + const { wrapSSR, componentCls, hashId } = useStyles(); + const { token } = useToken(); + const collectionField = AssociationFilter.useAssociationField(); - // 把一些可定制的状态通过 hook 提取出去了，为了兼容之前添加的 Table 区块，这里加了个默认值 - const fieldSchema = useFieldSchema(); - const Designer = useDesigner(); - const compile = useCompile(); - const { - list, - onSelected, - handleSearchInput: _handleSearchInput, - params, - run, - valueKey: _valueKey, - labelKey: _labelKey, - defaultCollapse, - } = useProps(props); + // 把一些可定制的状态通过 hook 提取出去了，为了兼容之前添加的 Table 区块，这里加了个默认值 + const fieldSchema = useFieldSchema(); + const Designer = useDesigner(); + const compile = useCompile(); + const { + list, + onSelected, + handleSearchInput: _handleSearchInput, + params, + run, + valueKey: _valueKey, + labelKey: _labelKey, + defaultCollapse, + } = useProps(props); - const [searchVisible, setSearchVisible] = useState(false); + const [searchVisible, setSearchVisible] = useState(false); - const defaultActiveKeyCollapse = useMemo( - () => (defaultCollapse && collectionField?.name ? [collectionField.name] : []), - [], - ); - const valueKey = _valueKey || collectionField?.targetKey || 'id'; - const labelKey = _labelKey || fieldSchema['x-component-props']?.fieldNames?.label || valueKey; + const defaultActiveKeyCollapse = useMemo( + () => (defaultCollapse && collectionField?.name ? [collectionField.name] : []), + [], + ); + const valueKey = _valueKey || collectionField?.targetKey || 'id'; + const labelKey = _labelKey || fieldSchema['x-component-props']?.fieldNames?.label || valueKey; - const fieldNames = { - title: labelKey || valueKey, - key: valueKey, - }; + const fieldNames = { + title: labelKey || valueKey, + key: valueKey, + }; - const [expandedKeys, setExpandedKeys] = useState([]); - const [selectedKeys, setSelectedKeys] = useState([]); - const [autoExpandParent, setAutoExpandParent] = useState(true); + const [expandedKeys, setExpandedKeys] = useState([]); + const [selectedKeys, setSelectedKeys] = useState([]); + const [autoExpandParent, setAutoExpandParent] = useState(true); - const labelUiSchema = useLabelUiSchema(collectionField, fieldNames?.title || 'label'); + const labelUiSchema = useLabelUiSchema(collectionField, fieldNames?.title || 'label'); - if (!collectionField) { - return null; - } - - const onExpand = (expandedKeysValue: React.Key[]) => { - setExpandedKeys(expandedKeysValue); - setAutoExpandParent(false); - }; - - const onSelect = (selectedKeysValue: React.Key[]) => { - setSelectedKeys(selectedKeysValue); - onSelected(selectedKeysValue); - }; - - const handleSearchToggle = (e: MouseEvent) => { - const filter = params?.[0]?.filter; - if (searchVisible || filter) { - run({ - ...params?.[0], - filter: undefined, - }); + if (!collectionField) { + return null; } - setSearchVisible(!searchVisible); - e.stopPropagation(); - }; - const handleSearchClick = (e: MouseEvent) => { - e.stopPropagation(); - }; + const onExpand = (expandedKeysValue: React.Key[]) => { + setExpandedKeys(expandedKeysValue); + setAutoExpandParent(false); + }; - const handleSearchInput = (e: ChangeEvent) => { - _handleSearchInput(e); - }; + const onSelect = (selectedKeysValue: React.Key[]) => { + setSelectedKeys(selectedKeysValue); + onSelected(selectedKeysValue); + }; - const title = fieldSchema.title ?? collectionField?.uiSchema?.title; + const handleSearchToggle = (e: MouseEvent) => { + const filter = params?.[0]?.filter; + if (searchVisible || filter) { + run({ + ...params?.[0], + filter: undefined, + }); + } + setSearchVisible(!searchVisible); + e.stopPropagation(); + }; - return wrapSSR( - - - null : undefined}> - - - {searchVisible ? ( - - ) : ( - compile(title) - )} - - { + e.stopPropagation(); + }; + + const handleSearchInput = (e: ChangeEvent) => { + _handleSearchInput(e); + }; + + const title = fieldSchema.title ?? collectionField?.uiSchema?.title; + + return wrapSSR( + + + null : undefined}> + - {searchVisible ? ( - - ) : ( - - )} - - - } - key={defaultActiveKeyCollapse[0]} - > - { - return ( - - {getLabelFormatValue(labelUiSchema, compile(node[labelKey]))} - - ); - }} - selectedKeys={selectedKeys} - blockNode - /> - - - , - ); -}; + + {searchVisible ? ( + + ) : ( + compile(title) + )} + + + {searchVisible ? ( + + ) : ( + + )} + + + } + key={defaultActiveKeyCollapse[0]} + > + { + return ( + + {getLabelFormatValue(labelUiSchema, compile(node[labelKey]))} + + ); + }} + selectedKeys={selectedKeys} + blockNode + /> + + + , + ); + }, + { displayName: 'AssociationFilterItem' }, +); diff --git a/packages/core/client/src/schema-component/antd/filter/Filter.tsx b/packages/core/client/src/schema-component/antd/filter/Filter.tsx index 61d4b15a0..488fc5ef0 100644 --- a/packages/core/client/src/schema-component/antd/filter/Filter.tsx +++ b/packages/core/client/src/schema-component/antd/filter/Filter.tsx @@ -8,15 +8,18 @@ import { FilterAction } from './FilterAction'; import { FilterGroup } from './FilterGroup'; import { SaveDefaultValue } from './SaveDefaultValue'; import { FilterContext } from './context'; +import { withDynamicSchemaProps } from '../../../application/hoc/withDynamicSchemaProps'; const useDef = (options) => { const field = useField(); return useRequest(() => Promise.resolve({ data: field.dataSource }), options); }; -export const Filter: any = observer( - (props: any) => { +export const Filter: any = withDynamicSchemaProps( + observer((props: any) => { const { useDataSource = useDef } = props; + + // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema const { options, dynamicComponent, className, collectionName } = useProps(props); const field = useField(); const fieldSchema: any = useFieldSchema(); @@ -47,7 +50,7 @@ export const Filter: any = observer( ); - }, + }), { displayName: 'Filter' }, ); diff --git a/packages/core/client/src/schema-component/antd/filter/FilterAction.tsx b/packages/core/client/src/schema-component/antd/filter/FilterAction.tsx index 7f188a8fb..de77a7e70 100644 --- a/packages/core/client/src/schema-component/antd/filter/FilterAction.tsx +++ b/packages/core/client/src/schema-component/antd/filter/FilterAction.tsx @@ -10,18 +10,21 @@ import { useDesignable } from '../../hooks'; import { useProps } from '../../hooks/useProps'; import { Action } from '../action'; import { StablePopover } from '../popover'; +import { withDynamicSchemaProps } from '../../../application/hoc/withDynamicSchemaProps'; export const FilterActionContext = createContext(null); FilterActionContext.displayName = 'FilterActionContext'; -export const FilterAction = observer( - (props: any) => { +export const FilterAction = withDynamicSchemaProps( + observer((props: any) => { const { t } = useTranslation(); const field = useField(); const [visible, setVisible] = useState(false); const { designable, dn } = useDesignable(); const fieldSchema = useFieldSchema(); const form = useMemo
(() => props.form || createForm(), []); + + // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema const { options, onSubmit, onReset, ...others } = useProps(props); const onOpenChange = useCallback((visible: boolean): void => { setVisible(visible); @@ -93,7 +96,7 @@ export const FilterAction = observer( ); - }, + }), { displayName: 'FilterAction' }, ); diff --git a/packages/core/client/src/schema-component/antd/filter/demos/demo6.tsx b/packages/core/client/src/schema-component/antd/filter/demos/demo6.tsx index 3156148be..c15df1092 100644 --- a/packages/core/client/src/schema-component/antd/filter/demos/demo6.tsx +++ b/packages/core/client/src/schema-component/antd/filter/demos/demo6.tsx @@ -60,14 +60,14 @@ const schema: any = { name: 'filter', type: 'object', 'x-component': 'Filter', - 'x-component-props': { - useProps: () => { - const { name } = useCollection_deprecated(); - const options = useFilterOptions(name); - return { - options, - }; - }, + 'x-use-component-props': () => { + // eslint-disable-next-line react-hooks/rules-of-hooks + const { name } = useCollection_deprecated(); + // eslint-disable-next-line react-hooks/rules-of-hooks + const options = useFilterOptions(name); + return { + options, + }; }, }, }, diff --git a/packages/core/client/src/schema-component/antd/form-v2/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/form-v2/demos/demo2.tsx index cd2db6c0e..ed0838010 100644 --- a/packages/core/client/src/schema-component/antd/form-v2/demos/demo2.tsx +++ b/packages/core/client/src/schema-component/antd/form-v2/demos/demo2.tsx @@ -74,9 +74,7 @@ const schema: ISchema = { form: { type: 'void', 'x-component': 'FormV2', - 'x-component-props': { - useProps: '{{ useFormBlockProps }}', - }, + 'x-use-component-props': 'useFormBlockProps', properties: { nickname: { type: 'string', diff --git a/packages/core/client/src/schema-component/antd/form-v2/demos/demo3.tsx b/packages/core/client/src/schema-component/antd/form-v2/demos/demo3.tsx index c877c8574..797d8161c 100644 --- a/packages/core/client/src/schema-component/antd/form-v2/demos/demo3.tsx +++ b/packages/core/client/src/schema-component/antd/form-v2/demos/demo3.tsx @@ -51,9 +51,7 @@ const schema: ISchema = { type: 'void', 'x-component': 'FormV2', 'x-read-pretty': true, - 'x-component-props': { - useProps: '{{ useFormBlockProps }}', - }, + 'x-use-component-props': 'useFormBlockProps', properties: { grid: { type: 'void', diff --git a/packages/core/client/src/schema-component/antd/g2plot/G2PlotDesigner.tsx b/packages/core/client/src/schema-component/antd/g2plot/G2PlotDesigner.tsx index 2d3f5fff8..296ac6fe9 100644 --- a/packages/core/client/src/schema-component/antd/g2plot/G2PlotDesigner.tsx +++ b/packages/core/client/src/schema-component/antd/g2plot/G2PlotDesigner.tsx @@ -9,6 +9,7 @@ import { SchemaSettingsRemove, } from '../../../schema-settings'; import { useCompile, useDesignable } from '../../hooks'; +import _ from 'lodash'; const validateJSON = { validator: `{{(value, rule)=> { @@ -94,9 +95,9 @@ export const G2PlotDesigner = () => { } else { field.componentProps.config = conf; } - fieldSchema.title = title; - fieldSchema['x-component-props']['plot'] = plot; - fieldSchema['x-component-props']['config'] = JSON.parse(config); + _.set(fieldSchema, 'title', title); + _.set(fieldSchema, 'x-component-props.plot', plot); + _.set(fieldSchema, 'x-component-props.config', JSON.parse(config)); dn.emit('patch', { schema: { title, diff --git a/packages/core/client/src/schema-component/antd/grid/Grid.tsx b/packages/core/client/src/schema-component/antd/grid/Grid.tsx index 2a5550379..7f87aa305 100644 --- a/packages/core/client/src/schema-component/antd/grid/Grid.tsx +++ b/packages/core/client/src/schema-component/antd/grid/Grid.tsx @@ -9,6 +9,7 @@ import { useFormBlockType } from '../../../block-provider'; import { DndContext } from '../../common/dnd-context'; import { useToken } from '../__builtins__'; import useStyles from './Grid.style'; +import _ from 'lodash'; const GridRowContext = createContext({}); GridRowContext.displayName = 'GridRowContext'; @@ -124,8 +125,8 @@ const ColDivider = (props) => { el.parentElement.clientWidth ).toFixed(2); - prevSchema['x-component-props']['width'] = preWidth; - nextSchema['x-component-props']['width'] = nextWidth; + _.set(prevSchema, 'x-component-props.width', preWidth); + _.set(nextSchema, 'x-component-props.width', nextWidth); dn.emit('batchPatch', { schemas: [ { diff --git a/packages/core/client/src/schema-component/antd/record-picker/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/record-picker/demos/demo1.tsx index 74e068b13..f9b0b4951 100644 --- a/packages/core/client/src/schema-component/antd/record-picker/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/record-picker/demos/demo1.tsx @@ -92,12 +92,12 @@ const schema: ISchema = { value: { type: 'array', 'x-component': 'TableV2.Selector', + 'x-use-component-props': 'useTableSelectorProps', 'x-component-props': { rowKey: 'id', rowSelection: { type: 'checkbox', }, - useProps: '{{ useTableSelectorProps }}', }, properties: { column1: { @@ -129,10 +129,10 @@ const schema: ISchema = { title: '{{ t("Submit") }}', 'x-action': 'submit', 'x-component': 'Action', + 'x-use-component-props': 'usePickActionProps', 'x-component-props': { type: 'primary', htmlType: 'submit', - useProps: '{{ usePickActionProps }}', }, }, }, diff --git a/packages/core/client/src/schema-component/antd/table-v2/Table.Column.Designer.tsx b/packages/core/client/src/schema-component/antd/table-v2/Table.Column.Designer.tsx index c166d71d2..81642350b 100644 --- a/packages/core/client/src/schema-component/antd/table-v2/Table.Column.Designer.tsx +++ b/packages/core/client/src/schema-component/antd/table-v2/Table.Column.Designer.tsx @@ -21,6 +21,7 @@ import { SchemaSettingsDataScope } from '../../../schema-settings/SchemaSettings import { isPatternDisabled } from '../../../schema-settings/isPatternDisabled'; import { SchemaSettingsDateFormat } from '../../../schema-settings/SchemaSettingsDateFormat'; import { SchemaSettingsSortingRule } from '../../../schema-settings/SchemaSettingsSortingRule'; +import _ from 'lodash'; export const useLabelFields = (collectionName?: any) => { // 需要在组件顶层调用 @@ -232,11 +233,11 @@ export const TableColumnDesigner = (props) => { value={fieldNames?.['label']} onChange={(label) => { const fieldNames = { - ...collectionField?.uiSchema?.['x-component-props']['fieldNames'], + ...collectionField?.uiSchema?.['x-component-props']?.['fieldNames'], ...fieldSchema?.['x-component-props']?.['fieldNames'], label, }; - fieldSchema['x-component-props']['fieldNames'] = fieldNames; + _.set(fieldSchema, 'x-component-props.fieldNames', fieldNames); const path = field.path?.splice(field.path?.length - 1, 1); field.form.query(`${path.concat(`*.` + fieldSchema.name)}`).forEach((f) => { f.componentProps.fieldNames = fieldNames; diff --git a/packages/core/client/src/schema-component/antd/table-v2/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/table-v2/demos/demo1.tsx index 90a3c88c9..c0bb0bb6b 100644 --- a/packages/core/client/src/schema-component/antd/table-v2/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/table-v2/demos/demo1.tsx @@ -99,9 +99,7 @@ const formSchema: ISchema = { form: { type: 'void', 'x-component': 'FormV2', - 'x-component-props': { - useProps: '{{ useFormBlockProps }}', - }, + 'x-use-component-props': 'useFormBlockProps', properties: { id: { type: 'string', @@ -157,12 +155,12 @@ const schema: ISchema = { type: 'array', title: `编辑模式`, 'x-component': 'TableV2', + 'x-use-component-props': 'useTableBlockProps', 'x-component-props': { rowKey: 'id', rowSelection: { type: 'checkbox', }, - useProps: '{{ useTableBlockProps }}', }, properties: { column1: { diff --git a/packages/core/client/src/schema-component/antd/table/Table.Column.Designer.tsx b/packages/core/client/src/schema-component/antd/table/Table.Column.Designer.tsx index 43987f8d3..1b981962b 100644 --- a/packages/core/client/src/schema-component/antd/table/Table.Column.Designer.tsx +++ b/packages/core/client/src/schema-component/antd/table/Table.Column.Designer.tsx @@ -10,6 +10,7 @@ import { } from '../../../schema-settings'; import { useCompile, useDesignable } from '../../hooks'; import { useActionContext } from '../action'; +import _ from 'lodash'; const useLabelFields = (collectionName?: any) => { const compile = useCompile(); @@ -122,10 +123,10 @@ export const TableColumnDesigner = (props) => { value={fieldSchema?.['x-component-props']?.['fieldNames']?.['label']} onChange={(label) => { const fieldNames = { - ...fieldSchema['x-component-props']['fieldNames'], + ...fieldSchema['x-component-props']?.['fieldNames'], label, }; - fieldSchema['x-component-props']['fieldNames'] = fieldNames; + _.set(fieldSchema, 'x-component-props.fieldNames', fieldNames); field.query(`.*.${fieldSchema.name}`).take((f) => { f.componentProps.fieldNames = fieldNames; }); diff --git a/packages/core/client/src/schema-component/antd/upload/Upload.tsx b/packages/core/client/src/schema-component/antd/upload/Upload.tsx index 1d25a72fa..729836d42 100644 --- a/packages/core/client/src/schema-component/antd/upload/Upload.tsx +++ b/packages/core/client/src/schema-component/antd/upload/Upload.tsx @@ -11,6 +11,8 @@ import { ReadPretty } from './ReadPretty'; import { isImage, isPdf, toArr, toFileList, toItem, toValue, useUploadProps } from './shared'; import { useStyles } from './style'; import type { ComposedUpload, DraggerProps, DraggerV2Props, UploadProps } from './type'; +import { withDynamicSchemaProps } from '../../../application/hoc/withDynamicSchemaProps'; +import { useProps } from '../../hooks/useProps'; export const Upload: ComposedUpload = connect( (props: UploadProps) => { @@ -299,42 +301,44 @@ Upload.Dragger = connect( }), ); -Upload.DraggerV2 = connect( - (props: DraggerV2Props) => { - const { t } = useTranslation(); - const defaultTitle = t('Click or drag file to this area to upload'); - const defaultSubTitle = t('Support for a single or bulk upload, file size should not exceed') + ` 10MB`; - const { title = defaultTitle, subTitle = defaultSubTitle, useProps } = props; - const extraProps: Record = useProps?.() || {}; - const [loading, setLoading] = useState(false); - const { wrapSSR, hashId, componentCls: prefixCls } = useStyles(); +Upload.DraggerV2 = withDynamicSchemaProps( + connect( + (props: DraggerV2Props) => { + const { t } = useTranslation(); + const defaultTitle = t('Click or drag file to this area to upload'); + const defaultSubTitle = t('Support for a single or bulk upload, file size should not exceed') + ` 10MB`; + const { title = defaultTitle, subTitle = defaultSubTitle, ...extraProps } = useProps(props); + const [loading, setLoading] = useState(false); + const { wrapSSR, hashId, componentCls: prefixCls } = useStyles(); - const handleChange = (fileList: any[] = []) => { - const { onChange } = extraProps; - onChange?.(fileList); + const handleChange = (fileList: any[] = []) => { + const { onChange } = extraProps; + onChange?.(fileList); - if (fileList.some((file) => file.status === 'uploading')) { - setLoading(true); - } else { - setLoading(false); - } - }; + if (fileList.some((file) => file.status === 'uploading')) { + setLoading(true); + } else { + setLoading(false); + } + }; - return wrapSSR( -
- -

- {loading ? : } -

-

{title}

-

{subTitle}

- -
, - ); - }, - mapProps({ - value: 'fileList', - }), + return wrapSSR( +
+ +

+ {loading ? : } +

+

{title}

+

{subTitle}

+ +
, + ); + }, + mapProps({ + value: 'fileList', + }), + ), + { displayName: 'Upload.DraggerV2' }, ); export default Upload; diff --git a/packages/core/client/src/schema-component/antd/upload/type.d.ts b/packages/core/client/src/schema-component/antd/upload/type.d.ts index be3447012..ba7c9c05c 100644 --- a/packages/core/client/src/schema-component/antd/upload/type.d.ts +++ b/packages/core/client/src/schema-component/antd/upload/type.d.ts @@ -22,6 +22,7 @@ export type DraggerV2Props = Omit & { title?: string; subTitle?: string; children?: React.ReactNode; + /** @deprecated */ useProps?: () => any; }; diff --git a/packages/core/client/src/schema-initializer/items/CreateFilterActionInitializer.tsx b/packages/core/client/src/schema-initializer/items/CreateFilterActionInitializer.tsx index dbea92159..8e8708a67 100644 --- a/packages/core/client/src/schema-initializer/items/CreateFilterActionInitializer.tsx +++ b/packages/core/client/src/schema-initializer/items/CreateFilterActionInitializer.tsx @@ -7,11 +7,11 @@ export const CreateFilterActionInitializer = (props) => { title: '{{ t("Filter") }}', 'x-action': 'submit', 'x-component': 'Action', + 'x-use-component-props': 'useFilterBlockActionProps', 'x-designer': 'Action.Designer', 'x-component-props': { type: 'primary', htmlType: 'submit', - useProps: '{{ useFilterBlockActionProps }}', }, }; return ; diff --git a/packages/core/client/src/schema-initializer/items/CreateResetActionInitializer.tsx b/packages/core/client/src/schema-initializer/items/CreateResetActionInitializer.tsx index f9af63735..af9e9f0e4 100644 --- a/packages/core/client/src/schema-initializer/items/CreateResetActionInitializer.tsx +++ b/packages/core/client/src/schema-initializer/items/CreateResetActionInitializer.tsx @@ -6,10 +6,8 @@ export const CreateResetActionInitializer = (props) => { const schema = { title: '{{ t("Reset") }}', 'x-component': 'Action', + 'x-use-component-props': 'useResetBlockActionProps', 'x-designer': 'Action.Designer', - 'x-component-props': { - useProps: '{{ useResetBlockActionProps }}', - }, }; return ; }; diff --git a/packages/core/client/src/schema-initializer/items/SelectActionInitializer.tsx b/packages/core/client/src/schema-initializer/items/SelectActionInitializer.tsx index 54768b091..a4b1b4086 100644 --- a/packages/core/client/src/schema-initializer/items/SelectActionInitializer.tsx +++ b/packages/core/client/src/schema-initializer/items/SelectActionInitializer.tsx @@ -39,13 +39,13 @@ export const SelectActionInitializer = (props) => { title: '{{ t("Submit") }}', 'x-action': 'submit', 'x-component': 'Action', + 'x-use-component-props': 'usePickActionProps', // 'x-designer': 'Action.Designer', 'x-toolbar': 'ActionSchemaToolbar', 'x-settings': 'actionSettings:submit', 'x-component-props': { type: 'primary', htmlType: 'submit', - useProps: '{{ usePickActionProps }}', }, }, }, diff --git a/packages/core/client/src/schema-initializer/items/SubmitActionInitializer.tsx b/packages/core/client/src/schema-initializer/items/SubmitActionInitializer.tsx index c0edbf266..50ab05c77 100644 --- a/packages/core/client/src/schema-initializer/items/SubmitActionInitializer.tsx +++ b/packages/core/client/src/schema-initializer/items/SubmitActionInitializer.tsx @@ -13,7 +13,6 @@ export const SubmitActionInitializer = (props) => { 'x-component-props': { type: 'primary', htmlType: 'submit', - // useProps: '{{ bp.useSubmitActionProps }}', }, }; return ; diff --git a/packages/core/client/src/schema-initializer/utils.ts b/packages/core/client/src/schema-initializer/utils.ts index cec754cc2..159cfbba3 100644 --- a/packages/core/client/src/schema-initializer/utils.ts +++ b/packages/core/client/src/schema-initializer/utils.ts @@ -965,6 +965,12 @@ export const useCollectionDataSourceItems = ({ return noAssociationMenu; }; +/** + * @deprecated + * 已弃用，请使用 createDetailsUISchema 和 createDetailsWithPaginationUISchema 替代 + * @param options + * @returns + */ export const createDetailsBlockSchema = (options: { collection: string; dataSource: string; @@ -1015,10 +1021,8 @@ export const createDetailsBlockSchema = (options: { [uid()]: { type: 'void', 'x-component': 'Details', + 'x-use-component-props': 'useDetailsBlockProps', 'x-read-pretty': true, - 'x-component-props': { - useProps: '{{ useDetailsBlockProps }}', - }, properties: { [uid()]: { type: 'void', @@ -1042,9 +1046,7 @@ export const createDetailsBlockSchema = (options: { pagination: { type: 'void', 'x-component': 'Pagination', - 'x-component-props': { - useProps: '{{ useDetailsPaginationProps }}', - }, + 'x-use-component-props': 'useDetailsPaginationProps', }, } : {}), @@ -1117,9 +1119,7 @@ export const createFormBlockSchema = (options: { [uid()]: { type: 'void', 'x-component': 'FormV2', - 'x-component-props': { - useProps: '{{ useFormBlockProps }}', - }, + 'x-use-component-props': 'useFormBlockProps', properties: { [uid()]: { type: 'void', @@ -1185,10 +1185,8 @@ export const createReadPrettyFormBlockSchema = (options) => { [uid()]: { type: 'void', 'x-component': 'FormV2', + 'x-use-component-props': 'useFormBlockProps', 'x-read-pretty': true, - 'x-component-props': { - useProps: '{{ useFormBlockProps }}', - }, properties: { [uid()]: { type: 'void', @@ -1273,12 +1271,12 @@ export const createTableBlockSchema = (options) => { type: 'array', 'x-initializer': tableColumnInitializers ?? 'table:configureColumns', 'x-component': 'TableV2', + 'x-use-component-props': 'useTableBlockProps', 'x-component-props': { rowKey: 'id', rowSelection: { type: 'checkbox', }, - useProps: '{{ useTableBlockProps }}', }, properties: { actions: { diff --git a/packages/core/client/src/schema-settings/DataTemplates/FormDataTemplates.tsx b/packages/core/client/src/schema-settings/DataTemplates/FormDataTemplates.tsx index 8245b021c..2932ada43 100644 --- a/packages/core/client/src/schema-settings/DataTemplates/FormDataTemplates.tsx +++ b/packages/core/client/src/schema-settings/DataTemplates/FormDataTemplates.tsx @@ -7,7 +7,7 @@ import React, { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { useCollectionManager_deprecated } from '../../collection-manager'; import { mergeFilter } from '../../filter-provider/utils'; -import { SchemaComponent, SchemaComponentContext, removeNullCondition } from '../../schema-component'; +import { SchemaComponent, SchemaComponentContext, removeNullCondition, useProps } from '../../schema-component'; import { ITemplate } from '../../schema-component/antd/form-v2/Templates'; import { VariableInput } from '../VariableInput'; import { AsDefaultTemplate } from './components/AsDefaultTemplate'; @@ -15,6 +15,7 @@ import { ArrayCollapse } from './components/DataTemplateTitle'; import { getSelectedIdFilter } from './components/Designer'; import { useCollectionState } from './hooks/useCollectionState'; import { useSyncFromForm } from './utils'; +import { withDynamicSchemaProps } from '../../application/hoc/withDynamicSchemaProps'; const Tree = connect( AntdTree, @@ -38,232 +39,235 @@ export const compatibleDataId = (data, config?) => { }); }; -export const FormDataTemplates = observer( - (props: any) => { - const { useProps, formSchema, designerCtx } = props; - const { defaultValues, collectionName } = useProps(); - const { - collectionList, - getEnableFieldTree, - getOnLoadData, - getOnCheck, - getScopeDataSource, - useTitleFieldDataSource, - } = useCollectionState(collectionName); - const { getCollection, getCollectionField } = useCollectionManager_deprecated(); - const { t } = useTranslation(); - // 不要在后面的数组中依赖 defaultValues，否则会因为 defaultValues 的变化导致 activeData 响应性丢失 - const activeData = useMemo( - () => - observable( - { ...defaultValues, items: compatibleDataId(defaultValues?.items || [], defaultValues?.config) } || { - items: [], - display: true, - config: { [collectionName]: { titleField: '', filter: {} } }, - }, - ), - [], - ); - const getTargetField = (collectionName: string) => { - const collection = getCollection(collectionName); - return getCollectionField( - `${collectionName}.${activeData?.config[collectionName]?.titleField || collection?.titleField || 'id'}`, - ); - }; - - const getFieldNames = (collectionName: string) => { - const collection = getCollection(collectionName); - return { - label: getLabel(activeData.config?.[collectionName]?.titleField || collection?.titleField || 'id'), - value: 'id', - }; - }; - - const getFilter = (collectionName: string, value: any) => { - const filter = activeData.config?.[collectionName]?.filter; - return _.isEmpty(filter) ? {} : removeNullCondition(mergeFilter([filter, getSelectedIdFilter(value)], '$or')); - }; - const components = useMemo(() => ({ ArrayCollapse }), []); - - const scope = useMemo( - () => ({ +export const FormDataTemplates = withDynamicSchemaProps( + observer( + (props: any) => { + // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema + const { formSchema, designerCtx, defaultValues, collectionName } = useProps(props); + const { + collectionList, getEnableFieldTree, - getTargetField, - getFieldNames, - getFilter, - getResource, getOnLoadData, getOnCheck, - collectionName, getScopeDataSource, useTitleFieldDataSource, - }), - [], - ); - const schema = useMemo( - () => ({ - type: 'object', - properties: { - items: { - type: 'array', - default: activeData?.items, - 'x-component': 'ArrayCollapse', - 'x-decorator': 'FormItem', - 'x-component-props': { - accordion: true, + } = useCollectionState(collectionName); + const { getCollection, getCollectionField } = useCollectionManager_deprecated(); + const { t } = useTranslation(); + // 不要在后面的数组中依赖 defaultValues，否则会因为 defaultValues 的变化导致 activeData 响应性丢失 + const activeData = useMemo( + () => + observable( + { ...defaultValues, items: compatibleDataId(defaultValues?.items || [], defaultValues?.config) } || { + items: [], + display: true, + config: { [collectionName]: { titleField: '', filter: {} } }, }, + ), + [], + ); + const getTargetField = (collectionName: string) => { + const collection = getCollection(collectionName); + return getCollectionField( + `${collectionName}.${activeData?.config[collectionName]?.titleField || collection?.titleField || 'id'}`, + ); + }; + + const getFieldNames = (collectionName: string) => { + const collection = getCollection(collectionName); + return { + label: getLabel(activeData.config?.[collectionName]?.titleField || collection?.titleField || 'id'), + value: 'id', + }; + }; + + const getFilter = (collectionName: string, value: any) => { + const filter = activeData.config?.[collectionName]?.filter; + return _.isEmpty(filter) ? {} : removeNullCondition(mergeFilter([filter, getSelectedIdFilter(value)], '$or')); + }; + const components = useMemo(() => ({ ArrayCollapse }), []); + + const scope = useMemo( + () => ({ + getEnableFieldTree, + getTargetField, + getFieldNames, + getFilter, + getResource, + getOnLoadData, + getOnCheck, + collectionName, + getScopeDataSource, + useTitleFieldDataSource, + }), + [], + ); + const schema = useMemo( + () => ({ + type: 'object', + properties: { items: { - type: 'object', - 'x-component': 'ArrayCollapse.CollapsePanel', + type: 'array', + default: activeData?.items, + 'x-component': 'ArrayCollapse', + 'x-decorator': 'FormItem', 'x-component-props': { - extra: [], + accordion: true, }, - properties: { - layout: { - type: 'void', - 'x-component': 'FormLayout', - 'x-component-props': { - layout: 'vertical', - }, - properties: { - collection: { - type: 'string', - title: '{{ t("Collection") }}', - required: true, - description: t('If collection inherits, choose inherited collections as templates'), - default: '{{ collectionName }}', - 'x-display': collectionList.length > 1 ? 'visible' : 'hidden', - 'x-decorator': 'FormItem', - 'x-component': 'Select', - 'x-component-props': { - options: collectionList, - }, + items: { + type: 'object', + 'x-component': 'ArrayCollapse.CollapsePanel', + 'x-component-props': { + extra: [], + }, + properties: { + layout: { + type: 'void', + 'x-component': 'FormLayout', + 'x-component-props': { + layout: 'vertical', }, - dataScope: { - type: 'object', - title: '{{ t("Assign data scope for the template") }}', - 'x-decorator': 'FormItem', - 'x-component': 'Filter', - 'x-component-props': { - dynamicComponent: VariableInput, - }, - 'x-decorator-props': { - style: { - marginBottom: '0px', + properties: { + collection: { + type: 'string', + title: '{{ t("Collection") }}', + required: true, + description: t('If collection inherits, choose inherited collections as templates'), + default: '{{ collectionName }}', + 'x-display': collectionList.length > 1 ? 'visible' : 'hidden', + 'x-decorator': 'FormItem', + 'x-component': 'Select', + 'x-component-props': { + options: collectionList, }, }, - required: true, - 'x-reactions': [ - { - dependencies: ['.collection'], - fulfill: { - state: { - disabled: '{{ !$deps[0] }}', - }, - schema: { - enum: '{{ getScopeDataSource($deps[0]) }}', - }, + dataScope: { + type: 'object', + title: '{{ t("Assign data scope for the template") }}', + 'x-decorator': 'FormItem', + 'x-component': 'Filter', + 'x-component-props': { + dynamicComponent: VariableInput, + }, + 'x-decorator-props': { + style: { + marginBottom: '0px', }, }, - ], - }, - titleField: { - type: 'string', - 'x-decorator': 'FormItem', - title: '{{ t("Title field") }}', - 'x-component': 'Select', - required: true, - 'x-reactions': '{{useTitleFieldDataSource}}', - }, - syncFromForm: { - type: 'void', - title: '{{ t("Sync from form fields") }}', - 'x-component': 'Action.Link', - 'x-component-props': { - type: 'primary', - style: { float: 'right', position: 'relative', zIndex: 1200 }, - useAction: () => useSyncFromForm(formSchema), - }, - }, - fields: { - type: 'array', - title: '{{ t("Data fields") }}', - required: true, - description: t('Only the selected fields will be used as the initialization data for the form'), - 'x-decorator': 'FormItem', - 'x-component': Tree, - 'x-component-props': { - treeData: [], - checkable: true, - checkStrictly: true, - selectable: false, - loadData: '{{ getOnLoadData($self) }}', - onCheck: '{{ getOnCheck($self) }}', - rootStyle: { - padding: '8px 0', - border: '1px solid #d9d9d9', - borderRadius: '2px', - maxHeight: '30vh', - overflow: 'auto', - margin: '2px 0', - }, - }, - 'x-reactions': [ - { - dependencies: ['.collection'], - fulfill: { - state: { - disabled: '{{ !$deps[0] }}', - componentProps: { - treeData: '{{ getEnableFieldTree($deps[0], $self) }}', + required: true, + 'x-reactions': [ + { + dependencies: ['.collection'], + fulfill: { + state: { + disabled: '{{ !$deps[0] }}', + }, + schema: { + enum: '{{ getScopeDataSource($deps[0]) }}', }, }, }, + ], + }, + titleField: { + type: 'string', + 'x-decorator': 'FormItem', + title: '{{ t("Title field") }}', + 'x-component': 'Select', + required: true, + 'x-reactions': '{{useTitleFieldDataSource}}', + }, + syncFromForm: { + type: 'void', + title: '{{ t("Sync from form fields") }}', + 'x-component': 'Action.Link', + 'x-component-props': { + type: 'primary', + style: { float: 'right', position: 'relative', zIndex: 1200 }, + useAction: () => useSyncFromForm(formSchema), }, - ], + }, + fields: { + type: 'array', + title: '{{ t("Data fields") }}', + required: true, + description: t('Only the selected fields will be used as the initialization data for the form'), + 'x-decorator': 'FormItem', + 'x-component': Tree, + 'x-component-props': { + treeData: [], + checkable: true, + checkStrictly: true, + selectable: false, + loadData: '{{ getOnLoadData($self) }}', + onCheck: '{{ getOnCheck($self) }}', + rootStyle: { + padding: '8px 0', + border: '1px solid #d9d9d9', + borderRadius: '2px', + maxHeight: '30vh', + overflow: 'auto', + margin: '2px 0', + }, + }, + 'x-reactions': [ + { + dependencies: ['.collection'], + fulfill: { + state: { + disabled: '{{ !$deps[0] }}', + componentProps: { + treeData: '{{ getEnableFieldTree($deps[0], $self) }}', + }, + }, + }, + }, + ], + }, }, }, + remove: { + type: 'void', + 'x-component': 'ArrayCollapse.Remove', + }, + moveUp: { + type: 'void', + 'x-component': 'ArrayCollapse.MoveUp', + }, + moveDown: { + type: 'void', + 'x-component': 'ArrayCollapse.MoveDown', + }, }, - remove: { + }, + properties: { + add: { type: 'void', - 'x-component': 'ArrayCollapse.Remove', - }, - moveUp: { - type: 'void', - 'x-component': 'ArrayCollapse.MoveUp', - }, - moveDown: { - type: 'void', - 'x-component': 'ArrayCollapse.MoveDown', + title: '{{ t("Add template") }}', + 'x-component': 'ArrayCollapse.Addition', }, }, }, - properties: { - add: { - type: 'void', - title: '{{ t("Add template") }}', - 'x-component': 'ArrayCollapse.Addition', - }, + display: { + type: 'boolean', + 'x-content': '{{ t("Display data template selector") }}', + default: activeData?.display !== false, + 'x-decorator': 'FormItem', + 'x-component': 'Checkbox', }, }, - display: { - type: 'boolean', - 'x-content': '{{ t("Display data template selector") }}', - default: activeData?.display !== false, - 'x-decorator': 'FormItem', - 'x-component': 'Checkbox', - }, - }, - }), - [], - ); + }), + [], + ); - return ( - - - - ); - }, + return ( + + + + ); + }, + { displayName: 'FormDataTemplates' }, + ), { displayName: 'FormDataTemplates' }, ); diff --git a/packages/core/client/src/schema-settings/DataTemplates/utils.tsx b/packages/core/client/src/schema-settings/DataTemplates/utils.tsx index f3adc1f77..fdf843fe7 100644 --- a/packages/core/client/src/schema-settings/DataTemplates/utils.tsx +++ b/packages/core/client/src/schema-settings/DataTemplates/utils.tsx @@ -184,7 +184,7 @@ export const useSyncFromForm = (fieldSchema, collection?, callBack?) => { selectFields.add(path); } if (collectionfield && (isAssociationField || isAssociationSubfield) && s['x-component'] !== 'TableField') { - formData.add({ name: path, fieldMode: s['x-component-props']['mode'] || 'Select' }); + formData.add({ name: path, fieldMode: s['x-component-props']?.['mode'] || 'Select' }); if (['Nester', 'SubTable'].includes(s['x-component-props']?.mode)) { const bufPrefix = prefix && prefix !== '' ? prefix + '.' + s.name : s.name; getAssociationAppends(s, bufPrefix); diff --git a/packages/core/client/src/schema-settings/EnableChildCollections/index.tsx b/packages/core/client/src/schema-settings/EnableChildCollections/index.tsx index 1d2ea2243..3d18f18b1 100644 --- a/packages/core/client/src/schema-settings/EnableChildCollections/index.tsx +++ b/packages/core/client/src/schema-settings/EnableChildCollections/index.tsx @@ -2,12 +2,12 @@ import { observer, useForm } from '@nocobase/schema'; import { action } from '@nocobase/schema'; import React from 'react'; import { useCollectionManager_deprecated } from '../../collection-manager'; -import { SchemaComponent, useCompile } from '../../schema-component'; +import { SchemaComponent, useCompile, useProps } from '../../schema-component'; +import { withDynamicSchemaProps } from '../../application/hoc/withDynamicSchemaProps'; -export const EnableChildCollections = observer( - (props: any) => { - const { useProps } = props; - const { defaultValues, collectionName } = useProps(); +export const EnableChildCollections = withDynamicSchemaProps( + observer((props: any) => { + const { defaultValues, collectionName } = useProps(props); const form = useForm(); const compile = useCompile(); const { getChildrenCollections } = useCollectionManager_deprecated(); @@ -105,6 +105,6 @@ export const EnableChildCollections = observer( scope={{ useAsyncDataSource, loadData }} /> ); - }, + }), { displayName: 'EnableChildCollections' }, ); diff --git a/packages/core/client/src/schema-settings/LinkageRules/LinkageRuleActionGroup.tsx b/packages/core/client/src/schema-settings/LinkageRules/LinkageRuleActionGroup.tsx index 685b76a47..622bc6cb0 100644 --- a/packages/core/client/src/schema-settings/LinkageRules/LinkageRuleActionGroup.tsx +++ b/packages/core/client/src/schema-settings/LinkageRules/LinkageRuleActionGroup.tsx @@ -10,6 +10,9 @@ import React, { useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { FormButtonLinkageRuleAction, FormFieldLinkageRuleAction } from './LinkageRuleAction'; import { RemoveActionContext } from './context'; +import { withDynamicSchemaProps } from '../../application/hoc/withDynamicSchemaProps'; +import { useProps } from '../../schema-component/hooks/useProps'; + export const LinkageRuleActions = observer( (props: any): any => { const { type, linkageOptions } = props; @@ -32,38 +35,41 @@ export const LinkageRuleActions = observer( ); interface LinkageRuleActionGroupProps { - useProps: () => { - type: 'button' | 'field'; - linkageOptions: any; - collectionName: string; - }; + type: 'button' | 'field'; + linkageOptions: any; + collectionName: string; } -export const LinkageRuleActionGroup = (props: LinkageRuleActionGroupProps) => { - const { t } = useTranslation(); - const field = useField(); - const logic = 'actions'; - const { type, linkageOptions, collectionName } = props.useProps(); +export const LinkageRuleActionGroup = withDynamicSchemaProps( + (props: LinkageRuleActionGroupProps) => { + const { t } = useTranslation(); + const field = useField(); + const logic = 'actions'; - const style = useMemo(() => ({ marginLeft: 10 }), []); - const components = useMemo( - () => [LinkageRuleActions, { type, linkageOptions, collectionName }], - [collectionName, linkageOptions, type], - ); - const spaceStyle = useMemo(() => ({ marginTop: 8, marginBottom: 8 }), []); - const onClick = useCallback(() => { - const f = field.query('.actions').take() as ArrayFieldModel; - const items = f.value || []; - items.push({}); - f.value = items; - }, [field]); + // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema + const { type, linkageOptions, collectionName } = useProps(props); - return ( - - ); -}; + const style = useMemo(() => ({ marginLeft: 10 }), []); + const components = useMemo( + () => [LinkageRuleActions, { type, linkageOptions, collectionName }], + [collectionName, linkageOptions, type], + ); + const spaceStyle = useMemo(() => ({ marginTop: 8, marginBottom: 8 }), []); + const onClick = useCallback(() => { + const f = field.query('.actions').take() as ArrayFieldModel; + const items = f.value || []; + items.push({}); + f.value = items; + }, [field]); + + return ( + + ); + }, + { displayName: 'LinkageRuleActionGroup' }, +); diff --git a/packages/core/client/src/schema-settings/LinkageRules/index.tsx b/packages/core/client/src/schema-settings/LinkageRules/index.tsx index 636be74bb..7e8a1d783 100644 --- a/packages/core/client/src/schema-settings/LinkageRules/index.tsx +++ b/packages/core/client/src/schema-settings/LinkageRules/index.tsx @@ -6,7 +6,7 @@ import { FormBlockContext } from '../../block-provider'; import { useCollectionManager_deprecated } from '../../collection-manager'; import { useCollectionParentRecordData } from '../../data-source/collection-record/CollectionRecordProvider'; import { RecordProvider } from '../../record-provider'; -import { SchemaComponent } from '../../schema-component'; +import { SchemaComponent, useProps } from '../../schema-component'; import { DynamicComponentProps } from '../../schema-component/antd/filter/DynamicComponent'; import { FilterContext } from '../../schema-component/antd/filter/context'; import { VariableOption, VariablesContextType } from '../../variables/types'; @@ -14,6 +14,7 @@ import { VariableInput, getShouldChange } from '../VariableInput/VariableInput'; import { LinkageRuleActionGroup } from './LinkageRuleActionGroup'; import { EnableLinkage } from './components/EnableLinkage'; import { ArrayCollapse } from './components/LinkageHeader'; +import { withDynamicSchemaProps } from '../../application/hoc/withDynamicSchemaProps'; interface usePropsReturn { options: any; @@ -30,16 +31,23 @@ interface usePropsReturn { } interface Props { - useProps: () => usePropsReturn; dynamicComponent: any; } -export const FormLinkageRules = observer( - (props: Props) => { +export const FormLinkageRules = withDynamicSchemaProps( + observer((props: Props) => { const fieldSchema = useFieldSchema(); - const { useProps, dynamicComponent } = props; - const { options, defaultValues, collectionName, form, formBlockType, variables, localVariables, record } = - useProps(); + const { + options, + defaultValues, + collectionName, + form, + formBlockType, + variables, + localVariables, + record, + dynamicComponent, + } = useProps(props); const { getAllCollectionsInheritChain } = useCollectionManager_deprecated(); const parentRecordData = useCollectionParentRecordData(); @@ -80,18 +88,18 @@ export const FormLinkageRules = observer( }, condition: { 'x-component': 'Filter', + 'x-use-component-props': () => { + return { + options, + className: css` + position: relative; + width: 100%; + margin-left: 10px; + `, + }; + }, 'x-component-props': { collectionName, - useProps() { - return { - options, - className: css` - position: relative; - width: 100%; - margin-left: 10px; - `, - }; - }, dynamicComponent: (props: DynamicComponentProps) => { const { collectionField } = props; return ( @@ -175,6 +183,6 @@ export const FormLinkageRules = observer( ); - }, + }), { displayName: 'FormLinkageRules' }, ); diff --git a/packages/core/client/src/schema-settings/SchemaSettings.tsx b/packages/core/client/src/schema-settings/SchemaSettings.tsx index 10b246c8f..940fd9333 100644 --- a/packages/core/client/src/schema-settings/SchemaSettings.tsx +++ b/packages/core/client/src/schema-settings/SchemaSettings.tsx @@ -1245,22 +1245,22 @@ export const SchemaSettingsLinkageRules = function LinkageRules(props) { properties: { fieldReaction: { 'x-component': FormLinkageRules, - 'x-component-props': { - useProps: () => { - const options = useLinkageCollectionFilterOptions(collectionName); - return { - options, - defaultValues: gridSchema?.['x-linkage-rules'] || fieldSchema?.['x-linkage-rules'], - type, - linkageOptions: useLinkageCollectionFieldOptions(collectionName), - collectionName, - form, - variables, - localVariables, - record, - formBlockType, - }; - }, + 'x-use-component-props': () => { + // eslint-disable-next-line react-hooks/rules-of-hooks + const options = useLinkageCollectionFilterOptions(collectionName); + return { + options, + defaultValues: gridSchema?.['x-linkage-rules'] || fieldSchema?.['x-linkage-rules'], + type, + // eslint-disable-next-line react-hooks/rules-of-hooks + linkageOptions: useLinkageCollectionFieldOptions(collectionName), + collectionName, + form, + variables, + localVariables, + record, + formBlockType, + }; }, }, }, @@ -1274,7 +1274,7 @@ export const SchemaSettingsLinkageRules = function LinkageRules(props) { for (const rule of v.fieldReaction.rules) { rules.push(_.pickBy(rule, _.identity)); } - const templateId = gridSchema['x-component'] === 'BlockTemplate' && gridSchema['x-component-props'].templateId; + const templateId = gridSchema['x-component'] === 'BlockTemplate' && gridSchema['x-component-props']?.templateId; const uid = (templateId && getTemplateById(templateId).uid) || gridSchema['x-uid']; const schema = { ['x-uid']: uid, @@ -1332,15 +1332,15 @@ export const SchemaSettingsDataTemplates = function DataTemplates(props) { fieldReaction: { 'x-decorator': (props) => , 'x-component': FormDataTemplates, + 'x-use-component-props': () => { + return { + defaultValues: templateData, + collectionName, + }; + }, 'x-component-props': { designerCtx, formSchema, - useProps: () => { - return { - defaultValues: templateData, - collectionName, - }; - }, }, }, }, @@ -1395,13 +1395,11 @@ export function SchemaSettingsEnableChildCollections(props) { properties: { enableChildren: { 'x-component': EnableChildCollections, - 'x-component-props': { - useProps: () => { - return { - defaultValues: fieldSchema?.['x-enable-children'], - collectionName, - }; - }, + 'x-use-component-props': () => { + return { + defaultValues: fieldSchema?.['x-enable-children'], + collectionName, + }; }, }, allowAddToCurrent: { diff --git a/packages/core/client/src/schema-settings/SchemaSettingsDefaultValue.tsx b/packages/core/client/src/schema-settings/SchemaSettingsDefaultValue.tsx index 0c83b415b..32fe8cfe4 100644 --- a/packages/core/client/src/schema-settings/SchemaSettingsDefaultValue.tsx +++ b/packages/core/client/src/schema-settings/SchemaSettingsDefaultValue.tsx @@ -140,7 +140,7 @@ export const SchemaSettingsDefaultValue = function DefaultValueConfigure(props: } if (collectionField?.uiSchema['x-component'] === 'Checkbox') { - s['x-component-props'].defaultChecked = defaultValue; + _.set(s, 'x-component-props.defaultChecked', defaultValue); // 在这里如果不设置 type 为 void，会导致设置的默认值不生效 // 但是我不知道为什么必须要设置为 void ？ diff --git a/packages/core/client/src/schema-templates/schemas/uiSchemaTemplates.ts b/packages/core/client/src/schema-templates/schemas/uiSchemaTemplates.ts index c45f17ffb..fb227fcc7 100644 --- a/packages/core/client/src/schema-templates/schemas/uiSchemaTemplates.ts +++ b/packages/core/client/src/schema-templates/schemas/uiSchemaTemplates.ts @@ -72,13 +72,13 @@ export const uiSchemaTemplatesSchema: ISchema = { title: '{{ t("Delete") }}', 'x-action': 'destroy', 'x-component': 'Action', + 'x-use-component-props': useBulkDestroyTemplateProps, 'x-component-props': { icon: 'DeleteOutlined', confirm: { title: "{{t('Delete record')}}", content: "{{t('Are you sure you want to delete it?')}}", }, - useProps: useBulkDestroyTemplateProps, }, }, }, @@ -86,11 +86,11 @@ export const uiSchemaTemplatesSchema: ISchema = { [uid()]: { type: 'array', 'x-component': 'TableV2', + 'x-use-component-props': 'useTableBlockProps', 'x-component-props': { rowSelection: { type: 'checkbox', }, - useProps: '{{ useTableBlockProps }}', }, properties: { actions: { @@ -146,9 +146,7 @@ export const uiSchemaTemplatesSchema: ISchema = { [uid()]: { type: 'void', 'x-component': 'FormV2', - 'x-component-props': { - useProps: '{{ useFormBlockProps }}', - }, + 'x-use-component-props': 'useFormBlockProps', properties: { name: { type: 'string', @@ -171,10 +169,10 @@ export const uiSchemaTemplatesSchema: ISchema = { title: '{{t("Submit")}}', 'x-action': 'submit', 'x-component': 'Action', + 'x-use-component-props': useUpdateSchemaTemplateActionProps, 'x-component-props': { type: 'primary', htmlType: 'submit', - useProps: useUpdateSchemaTemplateActionProps, }, type: 'void', }, @@ -192,13 +190,13 @@ export const uiSchemaTemplatesSchema: ISchema = { title: '{{ t("Delete") }}', 'x-action': 'destroy', 'x-component': 'Action.Link', + 'x-use-component-props': useDestroyTemplateProps, 'x-component-props': { icon: 'DeleteOutlined', confirm: { title: "{{t('Delete record')}}", content: "{{t('Are you sure you want to delete it?')}}", }, - useProps: useDestroyTemplateProps, }, }, }, diff --git a/packages/plugins/@nocobase/plugin-acl/src/client/schemas/roles.ts b/packages/plugins/@nocobase/plugin-acl/src/client/schemas/roles.ts index a162416cc..50a8d2990 100644 --- a/packages/plugins/@nocobase/plugin-acl/src/client/schemas/roles.ts +++ b/packages/plugins/@nocobase/plugin-acl/src/client/schemas/roles.ts @@ -97,9 +97,9 @@ export const roleCollectionsSchema: ISchema = { }, 'x-action': 'filter', 'x-component': 'Filter.Action', + 'x-use-component-props': 'useFilterActionProps', 'x-component-props': { icon: 'FilterOutlined', - useProps: '{{ useFilterActionProps }}', }, 'x-align': 'left', }, diff --git a/packages/plugins/@nocobase/plugin-acl/src/client/schemas/scopes.ts b/packages/plugins/@nocobase/plugin-acl/src/client/schemas/scopes.ts index 90db59f9c..5e7d428d8 100644 --- a/packages/plugins/@nocobase/plugin-acl/src/client/schemas/scopes.ts +++ b/packages/plugins/@nocobase/plugin-acl/src/client/schemas/scopes.ts @@ -122,9 +122,7 @@ export const scopesSchema: ISchema = { form: { type: 'void', 'x-component': 'FormV2', - 'x-component-props': { - useProps: useFormBlockProps, - }, + 'x-use-component-props': useFormBlockProps, properties: { name: { type: 'string', @@ -137,15 +135,17 @@ export const scopesSchema: ISchema = { name: 'filter', 'x-decorator': 'FormItem', 'x-component': 'Filter', + 'x-use-component-props': () => { + // eslint-disable-next-line react-hooks/rules-of-hooks + const ctx = useContext(RoleResourceCollectionContext); + // eslint-disable-next-line react-hooks/rules-of-hooks + const options = useFilterOptions(ctx.name); + return { + options, + }; + }, 'x-component-props': { dynamicComponent: VariableInput, - useProps() { - const ctx = useContext(RoleResourceCollectionContext); - const options = useFilterOptions(ctx.name); - return { - options, - }; - }, }, }, actions: { @@ -162,10 +162,10 @@ export const scopesSchema: ISchema = { title: '{{ t("Submit") }}', 'x-action': 'submit', 'x-component': 'Action', + 'x-use-component-props': 'useCreateActionProps', 'x-component-props': { type: 'primary', htmlType: 'submit', - useProps: '{{ useCreateActionProps }}', }, }, }, @@ -183,12 +183,12 @@ export const scopesSchema: ISchema = { value: { type: 'array', 'x-component': 'TableV2.Selector', + 'x-use-component-props': 'useTableSelectorProps', 'x-component-props': { rowKey: 'id', rowSelection: { type: 'checkbox', }, - useProps: '{{ useTableSelectorProps }}', }, properties: { column1: { @@ -250,9 +250,7 @@ export const scopesSchema: ISchema = { form: { type: 'void', 'x-component': 'FormV2', - 'x-component-props': { - useProps: '{{ useFormBlockProps }}', - }, + 'x-use-component-props': 'useFormBlockProps', properties: { name: { type: 'string', @@ -265,15 +263,17 @@ export const scopesSchema: ISchema = { name: 'filter', 'x-decorator': 'FormItem', 'x-component': 'Filter', + 'x-use-component-props': () => { + // eslint-disable-next-line react-hooks/rules-of-hooks + const ctx = useContext(RoleResourceCollectionContext); + // eslint-disable-next-line react-hooks/rules-of-hooks + const options = useFilterOptions(ctx.name); + return { + options, + }; + }, 'x-component-props': { dynamicComponent: VariableInput, - useProps() { - const ctx = useContext(RoleResourceCollectionContext); - const options = useFilterOptions(ctx.name); - return { - options, - }; - }, }, }, actions: { @@ -290,10 +290,10 @@ export const scopesSchema: ISchema = { title: '{{ t("Submit") }}', 'x-action': 'submit', 'x-component': 'Action', + 'x-use-component-props': 'useUpdateActionProps', 'x-component-props': { type: 'primary', htmlType: 'submit', - useProps: '{{ useUpdateActionProps }}', }, }, }, @@ -311,13 +311,13 @@ export const scopesSchema: ISchema = { 'x-action': 'destroy', 'x-decorator': 'ACLActionProvider', 'x-component': 'Action.Link', + 'x-use-component-props': 'useDestroyActionProps', 'x-component-props': { icon: 'DeleteOutlined', confirm: { title: "{{t('Delete record')}}", content: "{{t('Are you sure you want to delete it?')}}", }, - useProps: '{{ useDestroyActionProps }}', }, }, }, @@ -341,10 +341,10 @@ export const scopesSchema: ISchema = { title: '{{ t("Submit") }}', 'x-action': 'submit', 'x-component': 'Action', + 'x-use-component-props': 'usePickActionProps', 'x-component-props': { type: 'primary', htmlType: 'submit', - useProps: '{{ usePickActionProps }}', }, }, }, diff --git a/packages/plugins/@nocobase/plugin-action-bulk-edit/src/client/BulkEditSubmitActionInitializer.tsx b/packages/plugins/@nocobase/plugin-action-bulk-edit/src/client/BulkEditSubmitActionInitializer.tsx index a213d3d44..878deb997 100644 --- a/packages/plugins/@nocobase/plugin-action-bulk-edit/src/client/BulkEditSubmitActionInitializer.tsx +++ b/packages/plugins/@nocobase/plugin-action-bulk-edit/src/client/BulkEditSubmitActionInitializer.tsx @@ -6,13 +6,13 @@ export const BulkEditSubmitActionInitializer = (props) => { title: '{{ t("Submit") }}', 'x-action': 'submit', 'x-component': 'Action', + 'x-use-component-props': 'useCustomizeBulkEditActionProps', // 'x-designer': 'Action.Designer', 'x-toolbar': 'ActionSchemaToolbar', 'x-settings': 'actionSettings:updateSubmit', 'x-component-props': { type: 'primary', htmlType: 'submit', - useProps: '{{ useCustomizeBulkEditActionProps }}', }, }; return ; diff --git a/packages/plugins/@nocobase/plugin-action-bulk-edit/src/client/createBulkEditBlockUISchema.ts b/packages/plugins/@nocobase/plugin-action-bulk-edit/src/client/createBulkEditBlockUISchema.ts index d875595cd..c1e76a291 100644 --- a/packages/plugins/@nocobase/plugin-action-bulk-edit/src/client/createBulkEditBlockUISchema.ts +++ b/packages/plugins/@nocobase/plugin-action-bulk-edit/src/client/createBulkEditBlockUISchema.ts @@ -36,9 +36,7 @@ export function createBulkEditBlockUISchema(options: { [uid()]: { type: 'void', 'x-component': 'FormV2', - 'x-component-props': { - useProps: '{{ useCreateFormBlockProps }}', - }, + 'x-use-component-props': 'useCreateFormBlockProps', properties: { grid: { type: 'void', diff --git a/packages/plugins/@nocobase/plugin-action-bulk-update/src/client/BulkUpdateActionInitializer.tsx b/packages/plugins/@nocobase/plugin-action-bulk-update/src/client/BulkUpdateActionInitializer.tsx index a374245e7..fa89e0cab 100644 --- a/packages/plugins/@nocobase/plugin-action-bulk-update/src/client/BulkUpdateActionInitializer.tsx +++ b/packages/plugins/@nocobase/plugin-action-bulk-update/src/client/BulkUpdateActionInitializer.tsx @@ -7,6 +7,7 @@ export const BulkUpdateActionInitializer = () => { type: 'void', title: '{{ t("Bulk update") }}', 'x-component': 'Action', + 'x-use-component-props': 'useCustomizeBulkUpdateActionProps', 'x-align': 'right', 'x-acl-action': 'update', 'x-decorator': 'ACLActionProvider', @@ -27,7 +28,6 @@ export const BulkUpdateActionInitializer = () => { }, 'x-component-props': { icon: 'EditOutlined', - useProps: '{{ useCustomizeBulkUpdateActionProps }}', }, }; return ; diff --git a/packages/plugins/@nocobase/plugin-action-duplicate/src/client/DuplicateAction.Settings.tsx b/packages/plugins/@nocobase/plugin-action-duplicate/src/client/DuplicateAction.Settings.tsx index df7043022..0a51c8978 100644 --- a/packages/plugins/@nocobase/plugin-action-duplicate/src/client/DuplicateAction.Settings.tsx +++ b/packages/plugins/@nocobase/plugin-action-duplicate/src/client/DuplicateAction.Settings.tsx @@ -84,7 +84,7 @@ function DuplicationMode() { const fieldSchema = useFieldSchema(); const { name } = useCollection_deprecated(); const { collectionList, getEnableFieldTree, getOnLoadData, getOnCheck } = useCollectionState(name); - const duplicateValues = cloneDeep(fieldSchema['x-component-props'].duplicateFields || []); + const duplicateValues = cloneDeep(fieldSchema['x-component-props']?.duplicateFields || []); const record = useRecord(); const syncCallBack = useCallback((treeData, selectFields, form) => { form.query('duplicateFields').take((f) => { diff --git a/packages/plugins/@nocobase/plugin-action-print/src/client/PrintActionInitializer.tsx b/packages/plugins/@nocobase/plugin-action-print/src/client/PrintActionInitializer.tsx index 9cd4c4dd0..09f8fbd16 100644 --- a/packages/plugins/@nocobase/plugin-action-print/src/client/PrintActionInitializer.tsx +++ b/packages/plugins/@nocobase/plugin-action-print/src/client/PrintActionInitializer.tsx @@ -7,9 +7,9 @@ export const PrintActionInitializer = (props) => { title: '{{ t("Print") }}', 'x-action': 'print', 'x-component': 'Action', + 'x-use-component-props': 'useDetailPrintActionProps', 'x-component-props': { icon: 'PrinterOutlined', - useProps: '{{ useDetailPrintActionProps }}', }, }; return ; diff --git a/packages/plugins/@nocobase/plugin-api-keys/src/client/Configuration/schema.tsx b/packages/plugins/@nocobase/plugin-api-keys/src/client/Configuration/schema.tsx index 7a7ba26a7..701868b78 100644 --- a/packages/plugins/@nocobase/plugin-api-keys/src/client/Configuration/schema.tsx +++ b/packages/plugins/@nocobase/plugin-api-keys/src/client/Configuration/schema.tsx @@ -166,9 +166,9 @@ export const configurationSchema: ISchema = { [uid()]: { type: 'array', 'x-component': 'TableV2', + 'x-use-component-props': 'useTableBlockProps', 'x-component-props': { rowKey: 'id', - useProps: '{{ useTableBlockProps }}', }, properties: { column1: { diff --git a/packages/plugins/@nocobase/plugin-audit-logs/src/client/components/AuditLogsViewActionInitializer.tsx b/packages/plugins/@nocobase/plugin-audit-logs/src/client/components/AuditLogsViewActionInitializer.tsx index 2ab850ef3..3e51c3bd3 100644 --- a/packages/plugins/@nocobase/plugin-audit-logs/src/client/components/AuditLogsViewActionInitializer.tsx +++ b/packages/plugins/@nocobase/plugin-audit-logs/src/client/components/AuditLogsViewActionInitializer.tsx @@ -66,10 +66,8 @@ export const AuditLogsViewActionInitializer = () => { bv710pbf9w6: { type: 'void', 'x-component': 'FormV2', + 'x-use-component-props': 'useFormBlockProps', 'x-read-pretty': true, - 'x-component-props': { - useProps: '{{ useFormBlockProps }}', - }, properties: { grid: { type: 'void', @@ -259,9 +257,9 @@ export const AuditLogsViewActionInitializer = () => { changes: { type: 'array', 'x-component': 'TableV2', + 'x-use-component-props': 'useTableFieldProps', 'x-component-props': { rowSelection: false, - useProps: '{{ useTableFieldProps }}', }, properties: { '5uvv96u9ict': { diff --git a/packages/plugins/@nocobase/plugin-audit-logs/src/client/createAuditLogsBlockSchema.tsx b/packages/plugins/@nocobase/plugin-audit-logs/src/client/createAuditLogsBlockSchema.tsx index 03679773c..ea0920e6a 100644 --- a/packages/plugins/@nocobase/plugin-audit-logs/src/client/createAuditLogsBlockSchema.tsx +++ b/packages/plugins/@nocobase/plugin-audit-logs/src/client/createAuditLogsBlockSchema.tsx @@ -37,12 +37,12 @@ export function createAuditLogsBlockSchema(): ISchema { type: 'array', 'x-initializer': 'auditLogsTable:configureColumns', 'x-component': 'TableV2', + 'x-use-component-props': 'useTableBlockProps', 'x-component-props': { rowKey: 'id', rowSelection: { type: 'checkbox', }, - useProps: '{{ useTableBlockProps }}', }, properties: { actions: { diff --git a/packages/plugins/@nocobase/plugin-audit-logs/src/client/deplicated/AuditLogs.tsx b/packages/plugins/@nocobase/plugin-audit-logs/src/client/deplicated/AuditLogs.tsx index 71a339723..a97756af2 100644 --- a/packages/plugins/@nocobase/plugin-audit-logs/src/client/deplicated/AuditLogs.tsx +++ b/packages/plugins/@nocobase/plugin-audit-logs/src/client/deplicated/AuditLogs.tsx @@ -145,9 +145,9 @@ export const AuditLogs: any = () => { 'x-action': 'filter', // 'x-designer': 'Filter.Action.Designer', 'x-component': 'Filter.Action', + 'x-use-component-props': 'useFilterActionProps', 'x-component-props': { icon: 'FilterOutlined', - useProps: '{{ useFilterActionProps }}', }, 'x-align': 'left', }, @@ -156,12 +156,12 @@ export const AuditLogs: any = () => { y84dlntcaup: { type: 'array', 'x-component': 'TableV2', + 'x-use-component-props': 'useTableBlockProps', 'x-component-props': { rowKey: 'id', rowSelection: { type: 'checkbox', }, - useProps: '{{ useTableBlockProps }}', }, properties: { actions: { @@ -232,10 +232,8 @@ export const AuditLogs: any = () => { mevpuonrda0: { type: 'void', 'x-component': 'FormV2', + 'x-use-component-props': 'useFormBlockProps', 'x-read-pretty': true, - 'x-component-props': { - useProps: '{{ useFormBlockProps }}', - }, properties: { grid: { type: 'void', diff --git a/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/demos/demo2.tsx b/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/demos/demo2.tsx index ed8ad0e2b..82ce48fc1 100644 --- a/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/demos/demo2.tsx +++ b/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/demos/demo2.tsx @@ -39,9 +39,7 @@ const schema: ISchema = { type: 'array', name: 'calendar1', 'x-component': 'CalendarV2', - 'x-component-props': { - useProps: '{{ useCalendarBlockProps }}', - }, + 'x-use-component-props': 'useCalendarBlockProps', properties: { toolBar: { type: 'void', diff --git a/packages/plugins/@nocobase/plugin-calendar/src/client/schema-initializer/initializers/CalendarFormActionInitializers.tsx b/packages/plugins/@nocobase/plugin-calendar/src/client/schema-initializer/initializers/CalendarFormActionInitializers.tsx index 67bea5c3f..631456477 100644 --- a/packages/plugins/@nocobase/plugin-calendar/src/client/schema-initializer/initializers/CalendarFormActionInitializers.tsx +++ b/packages/plugins/@nocobase/plugin-calendar/src/client/schema-initializer/initializers/CalendarFormActionInitializers.tsx @@ -132,6 +132,7 @@ export const CalendarFormActionInitializers = new SchemaInitializer({ schema: { title: generateNTemplate('Update record'), 'x-component': 'Action', + 'x-use-component-props': 'useCustomizeUpdateActionProps', // 'x-designer': 'Action.Designer', 'x-toolbar': 'ActionSchemaToolbar', 'x-settings': 'actionSettings:updateRecord', @@ -146,9 +147,6 @@ export const CalendarFormActionInitializers = new SchemaInitializer({ }, triggerWorkflows: [], }, - 'x-component-props': { - useProps: '{{ useCustomizeUpdateActionProps }}', - }, }, useVisible() { const collection = useCollection_deprecated(); diff --git a/packages/plugins/@nocobase/plugin-charts/src/client/ChartBlockEngineDesigner.tsx b/packages/plugins/@nocobase/plugin-charts/src/client/ChartBlockEngineDesigner.tsx index bae502b92..8ae7ea1ed 100644 --- a/packages/plugins/@nocobase/plugin-charts/src/client/ChartBlockEngineDesigner.tsx +++ b/packages/plugins/@nocobase/plugin-charts/src/client/ChartBlockEngineDesigner.tsx @@ -231,7 +231,7 @@ export const ChartBlockEngineDesignerInitializer = (props) => { field.title = values.chart.title; fieldSchema['title'] = values.chart.title; field.componentProps.chartBlockEngineMetaData = values; - fieldSchema['x-component-props'].chartBlockEngineMetaData = values; + _.set(fieldSchema, 'x-component-props.chartBlockEngineMetaData', values); dn.emit('patch', { schema: { 'x-uid': fieldSchema['x-uid'], diff --git a/packages/plugins/@nocobase/plugin-collection-manager/src/server/migrations/20230623145414-number-step.ts b/packages/plugins/@nocobase/plugin-collection-manager/src/server/migrations/20230623145414-number-step.ts index 46335c5e1..f6b4cdce7 100644 --- a/packages/plugins/@nocobase/plugin-collection-manager/src/server/migrations/20230623145414-number-step.ts +++ b/packages/plugins/@nocobase/plugin-collection-manager/src/server/migrations/20230623145414-number-step.ts @@ -1,6 +1,7 @@ import { Collection } from '@nocobase/database'; import { Migration } from '@nocobase/server'; import { FieldModel } from '../models'; +import _ from 'lodash'; export default class extends Migration { appVersion = '<0.10.0-alpha.3'; @@ -24,7 +25,7 @@ export default class extends Migration { if (uiSchema?.['x-component-props']?.step !== '0') { continue; } - uiSchema['x-component-props']['step'] = '1'; + _.set(uiSchema, 'x-component-props.step', '1'); fieldRecord.set('uiSchema', uiSchema); await fieldRecord.save({ transaction, diff --git a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/components/TitleField.tsx b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/components/TitleField.tsx index d238ce013..10788264b 100644 --- a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/components/TitleField.tsx +++ b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/components/TitleField.tsx @@ -1,39 +1,49 @@ import React from 'react'; import { Switch, Tooltip, message } from 'antd'; import { useTranslation } from 'react-i18next'; -import { useCollectionManager_deprecated, useRecord, useAPIClient } from '@nocobase/client'; +import { + useCollectionManager_deprecated, + useRecord, + useAPIClient, + withDynamicSchemaProps, + useProps, +} from '@nocobase/client'; import { useRemoteCollectionContext } from '../CollectionFields'; -export const TitleField = (props) => { - const { useProps } = props; - const { t } = useTranslation(); - const { isTitleField } = useCollectionManager_deprecated(); - const [loadingRecord, setLoadingRecord] = React.useState(null); - const { setTitleField, filterByTk, dataSourceKey } = useProps(); - const record = useRecord(); - const api = useAPIClient(); - const { refreshRM, titleField } = useRemoteCollectionContext(); - const handleChange = async (checked) => { - setLoadingRecord(record); - await api.request({ - url: `dataSources/${dataSourceKey}/collections:update?filterByTk=${filterByTk}`, - method: 'post', - data: { titleField: checked ? record.name : 'id' }, - }); - message.success(t('Saved successfully')); - refreshRM(); - setTitleField(checked ? record.name : 'id'); - setLoadingRecord(null); - }; - return isTitleField(record) ? ( - - - - ) : null; -}; +export const TitleField = withDynamicSchemaProps( + (props) => { + const { t } = useTranslation(); + const { isTitleField } = useCollectionManager_deprecated(); + const [loadingRecord, setLoadingRecord] = React.useState(null); + + // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema + const { setTitleField, filterByTk, dataSourceKey } = useProps(props); + const record = useRecord(); + const api = useAPIClient(); + const { refreshRM, titleField } = useRemoteCollectionContext(); + const handleChange = async (checked) => { + setLoadingRecord(record); + await api.request({ + url: `dataSources/${dataSourceKey}/collections:update?filterByTk=${filterByTk}`, + method: 'post', + data: { titleField: checked ? record.name : 'id' }, + }); + message.success(t('Saved successfully')); + refreshRM(); + setTitleField(checked ? record.name : 'id'); + setLoadingRecord(null); + }; + return isTitleField(record) ? ( + + + + ) : null; + }, + { displayName: 'TitleField' }, +); diff --git a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/schema/collectionFields.ts b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/schema/collectionFields.ts index 16749972b..84075be34 100644 --- a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/schema/collectionFields.ts +++ b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/schema/collectionFields.ts @@ -194,10 +194,8 @@ export const fieldsTableSchema: ISchema = { properties: { titleField: { 'x-component': 'TitleField', + 'x-use-component-props': 'useTitleFieldProps', 'x-read-pretty': false, - 'x-component-props': { - useProps: '{{useTitleFieldProps}}', - }, }, }, }, diff --git a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/schema/collections.ts b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/schema/collections.ts index 24d8517d1..31a3f30bf 100644 --- a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/schema/collections.ts +++ b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/schema/collections.ts @@ -136,9 +136,9 @@ export const collectionTableSchema: ISchema = { }, 'x-action': 'filter', 'x-component': 'Filter.Action', + 'x-use-component-props': 'cm.useFilterActionProps', 'x-component-props': { icon: 'FilterOutlined', - useProps: '{{ cm.useFilterActionProps }}', }, 'x-align': 'left', }, @@ -146,9 +146,9 @@ export const collectionTableSchema: ISchema = { type: 'void', title: '{{ t("Refresh") }}', 'x-component': 'Action', + 'x-use-component-props': 'useRefreshActionProps', 'x-component-props': { icon: 'ReloadOutlined', - useProps: '{{ useRefreshActionProps }}', }, }, delete: { diff --git a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/MainDataSourceManager/Configuration/schemas/collections.ts b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/MainDataSourceManager/Configuration/schemas/collections.ts index b2ada3638..abf74fa68 100644 --- a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/MainDataSourceManager/Configuration/schemas/collections.ts +++ b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/MainDataSourceManager/Configuration/schemas/collections.ts @@ -137,9 +137,9 @@ export const collectionTableSchema: ISchema = { }, 'x-action': 'filter', 'x-component': 'Filter.Action', + 'x-use-component-props': 'cm.useFilterActionProps', 'x-component-props': { icon: 'FilterOutlined', - useProps: '{{ cm.useFilterActionProps }}', }, 'x-align': 'left', }, diff --git a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/schemas/roleCollections.ts b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/schemas/roleCollections.ts index 313fbe3d5..645d1f807 100644 --- a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/schemas/roleCollections.ts +++ b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/schemas/roleCollections.ts @@ -112,9 +112,9 @@ export const roleCollectionsSchema: ISchema = { }, 'x-action': 'filter', 'x-component': 'Filter.Action', + 'x-use-component-props': 'cm.useFilterActionProps', 'x-component-props': { icon: 'FilterOutlined', - useProps: '{{ cm.useFilterActionProps }}', }, 'x-align': 'left', }, diff --git a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/schemas/scopes.ts b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/schemas/scopes.ts index b73eca039..81e1166bd 100644 --- a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/schemas/scopes.ts +++ b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/schemas/scopes.ts @@ -125,9 +125,7 @@ export const getScopesSchema = (dataSourceKey) => { form: { type: 'void', 'x-component': 'FormV2', - 'x-component-props': { - useProps: useFormBlockProps, - }, + 'x-use-component-props': useFormBlockProps, properties: { name: { type: 'string', @@ -140,15 +138,17 @@ export const getScopesSchema = (dataSourceKey) => { name: 'filter', 'x-decorator': 'FormItem', 'x-component': 'Filter', + 'x-use-component-props': () => { + // eslint-disable-next-line react-hooks/rules-of-hooks + const ctx = useContext(RoleResourceCollectionContext); + // eslint-disable-next-line react-hooks/rules-of-hooks + const options = useFilterFieldOptions(ctx.fields); + return { + options, + }; + }, 'x-component-props': { dynamicComponent: VariableInput, - useProps() { - const ctx = useContext(RoleResourceCollectionContext); - const options = useFilterFieldOptions(ctx.fields); - return { - options, - }; - }, }, }, actions: { @@ -165,10 +165,10 @@ export const getScopesSchema = (dataSourceKey) => { title: '{{ t("Submit") }}', 'x-action': 'submit', 'x-component': 'Action', + 'x-use-component-props': 'useCreateActionProps', 'x-component-props': { type: 'primary', htmlType: 'submit', - useProps: '{{ useCreateActionProps }}', }, }, }, @@ -186,12 +186,12 @@ export const getScopesSchema = (dataSourceKey) => { value: { type: 'array', 'x-component': 'TableV2.Selector', + 'x-use-component-props': 'useTableSelectorProps', 'x-component-props': { rowKey: 'id', rowSelection: { type: 'checkbox', }, - useProps: '{{ useTableSelectorProps }}', }, properties: { column1: { @@ -253,9 +253,7 @@ export const getScopesSchema = (dataSourceKey) => { form: { type: 'void', 'x-component': 'FormV2', - 'x-component-props': { - useProps: '{{ useFormBlockProps }}', - }, + 'x-use-component-props': 'useFormBlockProps', properties: { name: { type: 'string', @@ -268,15 +266,17 @@ export const getScopesSchema = (dataSourceKey) => { name: 'filter', 'x-decorator': 'FormItem', 'x-component': 'Filter', + 'x-use-component-props': () => { + // eslint-disable-next-line react-hooks/rules-of-hooks + const ctx = useContext(RoleResourceCollectionContext); + // eslint-disable-next-line react-hooks/rules-of-hooks + const options = useFilterFieldOptions(ctx.fields); + return { + options, + }; + }, 'x-component-props': { dynamicComponent: VariableInput, - useProps() { - const ctx = useContext(RoleResourceCollectionContext); - const options = useFilterFieldOptions(ctx.fields); - return { - options, - }; - }, }, }, actions: { @@ -293,10 +293,10 @@ export const getScopesSchema = (dataSourceKey) => { title: '{{ t("Submit") }}', 'x-action': 'submit', 'x-component': 'Action', + 'x-use-component-props': 'useUpdateActionProps', 'x-component-props': { type: 'primary', htmlType: 'submit', - useProps: '{{ useUpdateActionProps }}', }, }, }, @@ -314,13 +314,13 @@ export const getScopesSchema = (dataSourceKey) => { 'x-action': 'destroy', 'x-decorator': 'ACLActionProvider', 'x-component': 'Action.Link', + 'x-use-component-props': 'useDestroyActionProps', 'x-component-props': { icon: 'DeleteOutlined', confirm: { title: "{{t('Delete record')}}", content: "{{t('Are you sure you want to delete it?')}}", }, - useProps: '{{ useDestroyActionProps }}', }, }, }, @@ -344,10 +344,10 @@ export const getScopesSchema = (dataSourceKey) => { title: '{{ t("Submit") }}', 'x-action': 'submit', 'x-component': 'Action', + 'x-use-component-props': 'usePickActionProps', 'x-component-props': { type: 'primary', htmlType: 'submit', - useProps: '{{ usePickActionProps }}', }, }, }, diff --git a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/schema/index.ts b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/schema/index.ts index 6086f0a95..5f5211a08 100644 --- a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/schema/index.ts +++ b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/schema/index.ts @@ -102,9 +102,9 @@ export const databaseConnectionSchema: ISchema = { type: 'void', title: '{{ t("Refresh") }}', 'x-component': 'Action', + 'x-use-component-props': 'useRefreshActionProps', 'x-component-props': { icon: 'ReloadOutlined', - useProps: '{{ useRefreshActionProps }}', }, }, delete: { diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterActionInitializers.tsx b/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterActionInitializers.tsx index 83bbe6406..1ec554741 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterActionInitializers.tsx +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterActionInitializers.tsx @@ -88,11 +88,11 @@ const ChartFilterActionInitializer = (props) => { title: '{{ t("Filter") }}', 'x-action': 'submit', 'x-component': 'Action', + 'x-use-component-props': 'useChartFilterActionProps', 'x-designer': 'ChartFilterActionDesigner', 'x-component-props': { htmlType: 'submit', type: 'primary', - useProps: '{{ useChartFilterActionProps }}', }, }; return ; @@ -103,10 +103,8 @@ const ChartFilterResetInitializer = (props) => { title: '{{ t("Reset") }}', 'x-action': 'reset', 'x-component': 'Action', + 'x-use-component-props': 'useChartFilterResetProps', 'x-designer': 'ChartFilterActionDesigner', - 'x-component-props': { - useProps: '{{ useChartFilterResetProps }}', - }, }; return ; }; @@ -116,9 +114,9 @@ const ChartFilterCollapseInitializer = (props) => { title: `{{ t("Collapse") }}`, 'x-action': 'collapse', 'x-component': 'Action', + 'x-use-component-props': 'useChartFilterCollapseProps', 'x-component-props': { type: 'link', - useProps: '{{ useChartFilterCollapseProps }}', }, 'x-designer': 'ChartFilterCollapseDesigner', }; diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/hooks/filter.ts b/packages/plugins/@nocobase/plugin-data-visualization/src/client/hooks/filter.ts index ec9fb1db1..2cb2100c3 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/hooks/filter.ts +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/hooks/filter.ts @@ -20,6 +20,7 @@ import lodash from 'lodash'; import { getFormulaComponent, getValuesByPath } from '../utils'; import deepmerge from 'deepmerge'; import { findSchema, getFilterFieldPrefix, parseFilterFieldName } from '../filter/utils'; +import _ from 'lodash'; export const useCustomFieldInterface = () => { const { getInterface } = useCollectionManager_deprecated(); @@ -135,7 +136,7 @@ export const useChartFilter = () => { }; } if (['oho', 'o2m'].includes(field.interface)) { - schema['x-component-props'].useOriginalFilter = true; + _.set(schema, 'x-component-props.useOriginalFilter', true); } const resultItem: SchemaInitializerItemType = { key: `${name}.${field.name}`, diff --git a/packages/plugins/@nocobase/plugin-export/src/client/ExportActionInitializer.tsx b/packages/plugins/@nocobase/plugin-export/src/client/ExportActionInitializer.tsx index 2c6dc6d2a..951e03fc0 100644 --- a/packages/plugins/@nocobase/plugin-export/src/client/ExportActionInitializer.tsx +++ b/packages/plugins/@nocobase/plugin-export/src/client/ExportActionInitializer.tsx @@ -61,9 +61,9 @@ export const ExportActionInitializer = () => { 'x-settings': 'actionSettings:export', 'x-decorator': 'ACLActionProvider', 'x-component': 'Action', + 'x-use-component-props': 'useExportAction', 'x-component-props': { icon: 'clouddownloadoutlined', - useProps: '{{ useExportAction }}', }, }; return ( diff --git a/packages/plugins/@nocobase/plugin-file-manager/src/client/initializers/UploadActionInitializer.tsx b/packages/plugins/@nocobase/plugin-file-manager/src/client/initializers/UploadActionInitializer.tsx index c6130d393..abac45943 100644 --- a/packages/plugins/@nocobase/plugin-file-manager/src/client/initializers/UploadActionInitializer.tsx +++ b/packages/plugins/@nocobase/plugin-file-manager/src/client/initializers/UploadActionInitializer.tsx @@ -26,10 +26,10 @@ export const UploadActionInitializer = (props) => { type: 'void', title: '{{ t("Upload files") }}', 'x-component': 'Upload.DraggerV2', + 'x-use-component-props': 'useUploadFiles', 'x-component-props': { height: '50vh', // action: `${collection.name}:create`, - useProps: '{{useUploadFiles}}', multiple: true, listType: 'picture', }, diff --git a/packages/plugins/@nocobase/plugin-file-manager/src/server/migrations/20230831160742-fix-attachment-field.ts b/packages/plugins/@nocobase/plugin-file-manager/src/server/migrations/20230831160742-fix-attachment-field.ts index 36e91acbf..d186249ab 100644 --- a/packages/plugins/@nocobase/plugin-file-manager/src/server/migrations/20230831160742-fix-attachment-field.ts +++ b/packages/plugins/@nocobase/plugin-file-manager/src/server/migrations/20230831160742-fix-attachment-field.ts @@ -31,6 +31,7 @@ export default class extends Migration { if (!field) { continue; } + schema['x-component-props'] = schema['x-component-props'] || {}; schema['x-component-props'].action = schema['x-component-props'].action.replace( 'attachementField', 'attachmentField', diff --git a/packages/plugins/@nocobase/plugin-gantt/src/client/demos/demo1.tsx b/packages/plugins/@nocobase/plugin-gantt/src/client/demos/demo1.tsx index 28c68400f..1f70e9aaa 100644 --- a/packages/plugins/@nocobase/plugin-gantt/src/client/demos/demo1.tsx +++ b/packages/plugins/@nocobase/plugin-gantt/src/client/demos/demo1.tsx @@ -7,8 +7,8 @@ const schema = { tasks: { type: 'void', 'x-component': 'Gantt', + 'x-use-component-props': 'useGanttBlockProps', 'x-component-props': { - useProps: '{{ useGanttBlockProps }}', tasks: [ { start: new Date(2020, 0, 1), diff --git a/packages/plugins/@nocobase/plugin-snapshot-field/src/client/SnapshotBlock/SnapshotBlockInitializers/SnapshotBlockInitializersDetailItem.tsx b/packages/plugins/@nocobase/plugin-snapshot-field/src/client/SnapshotBlock/SnapshotBlockInitializers/SnapshotBlockInitializersDetailItem.tsx index e22920776..816be3a37 100644 --- a/packages/plugins/@nocobase/plugin-snapshot-field/src/client/SnapshotBlock/SnapshotBlockInitializers/SnapshotBlockInitializersDetailItem.tsx +++ b/packages/plugins/@nocobase/plugin-snapshot-field/src/client/SnapshotBlock/SnapshotBlockInitializers/SnapshotBlockInitializersDetailItem.tsx @@ -44,9 +44,7 @@ export const createSnapshotBlockSchema = (options) => { type: 'void', 'x-component': 'FormV2', 'x-read-pretty': true, - 'x-component-props': { - useProps: '{{ useFormBlockProps }}', - }, + 'x-use-component-props': 'useFormBlockProps', properties: { grid: template || { type: 'void', diff --git a/packages/plugins/@nocobase/plugin-ui-schema-storage/src/server/migrations/20230510235247-form-field.ts b/packages/plugins/@nocobase/plugin-ui-schema-storage/src/server/migrations/20230510235247-form-field.ts index a65925324..32ca49fde 100644 --- a/packages/plugins/@nocobase/plugin-ui-schema-storage/src/server/migrations/20230510235247-form-field.ts +++ b/packages/plugins/@nocobase/plugin-ui-schema-storage/src/server/migrations/20230510235247-form-field.ts @@ -2,6 +2,7 @@ import { Schema } from '@formily/json-schema'; import { Migration } from '@nocobase/server'; import { uid } from '@nocobase/utils'; import UiSchemaRepository from '../repository'; +import _ from 'lodash'; export default class extends Migration { appVersion = '<0.9.3-alpha.1'; @@ -23,7 +24,8 @@ export default class extends Migration { const schema = item.schema; schema['type'] = 'object'; schema['x-component'] = 'CollectionField'; - schema['x-component-props']['mode'] = 'Nester'; + _.set(schema, 'x-component-props.mode', 'Nester'); + item.set('schema', schema); await item.save({ transaction }); const s = await r.getProperties(item['x-uid'], { transaction }); diff --git a/packages/plugins/@nocobase/plugin-users/src/client/schemas/users.ts b/packages/plugins/@nocobase/plugin-users/src/client/schemas/users.ts index a9b226992..3ad91ab11 100644 --- a/packages/plugins/@nocobase/plugin-users/src/client/schemas/users.ts +++ b/packages/plugins/@nocobase/plugin-users/src/client/schemas/users.ts @@ -152,9 +152,9 @@ export const usersSchema: ISchema = { title: '{{ t("Filter") }}', 'x-action': 'filter', 'x-component': 'Filter.Action', + 'x-use-component-props': 'useFilterActionProps', 'x-component-props': { icon: 'FilterOutlined', - useProps: '{{ useFilterActionProps }}', }, 'x-align': 'left', }, @@ -493,9 +493,9 @@ export const getRoleUsersSchema = (): ISchema => ({ title: '{{ t("Filter") }}', 'x-action': 'filter', 'x-component': 'Filter.Action', + 'x-use-component-props': 'useFilterActionProps', 'x-component-props': { icon: 'FilterOutlined', - useProps: '{{ useFilterActionProps }}', }, 'x-align': 'left', }, @@ -556,9 +556,9 @@ export const getRoleUsersSchema = (): ISchema => ({ }, 'x-action': 'filter', 'x-component': 'Filter.Action', + 'x-use-component-props': 'useFilterActionProps', 'x-component-props': { icon: 'FilterOutlined', - useProps: '{{ useFilterActionProps }}', }, 'x-align': 'left', }, diff --git a/packages/plugins/@nocobase/plugin-workflow-action-trigger/src/client/index.ts b/packages/plugins/@nocobase/plugin-workflow-action-trigger/src/client/index.ts index e629579b3..2fcc981df 100644 --- a/packages/plugins/@nocobase/plugin-workflow-action-trigger/src/client/index.ts +++ b/packages/plugins/@nocobase/plugin-workflow-action-trigger/src/client/index.ts @@ -13,9 +13,7 @@ const submitToWorkflowActionInitializer: SchemaInitializerItemType = { schema: { title: '{{t("Submit to workflow", { ns: "workflow" })}}', 'x-component': 'Action', - 'x-component-props': { - useProps: '{{ useTriggerWorkflowsActionProps }}', - }, + 'x-use-component-props': 'useTriggerWorkflowsActionProps', 'x-designer': 'Action.Designer', 'x-action-settings': { // assignedValues: {}, diff --git a/packages/plugins/@nocobase/plugin-workflow-aggregate/src/client/AggregateInstruction.tsx b/packages/plugins/@nocobase/plugin-workflow-aggregate/src/client/AggregateInstruction.tsx index 1f238b02d..71b08e1d4 100644 --- a/packages/plugins/@nocobase/plugin-workflow-aggregate/src/client/AggregateInstruction.tsx +++ b/packages/plugins/@nocobase/plugin-workflow-aggregate/src/client/AggregateInstruction.tsx @@ -341,19 +341,21 @@ export default class extends Instruction { title: '{{t("Filter")}}', 'x-decorator': 'FormItem', 'x-component': 'Filter', + 'x-use-component-props': () => { + // eslint-disable-next-line react-hooks/rules-of-hooks + const { values } = useForm(); + const [dataSourceName, collectionName] = parseCollectionName(values?.collection); + // eslint-disable-next-line react-hooks/rules-of-hooks + const options = useCollectionFilterOptions(collectionName, dataSourceName); + return { + options, + className: css` + position: relative; + width: 100%; + `, + }; + }, 'x-component-props': { - useProps() { - const { values } = useForm(); - const [dataSourceName, collectionName] = parseCollectionName(values?.collection); - const options = useCollectionFilterOptions(collectionName, dataSourceName); - return { - options, - className: css` - position: relative; - width: 100%; - `, - }; - }, dynamicComponent: 'FilterDynamicComponent', }, 'x-reactions': [ diff --git a/packages/plugins/@nocobase/plugin-workflow-manual/src/client/WorkflowTodo.tsx b/packages/plugins/@nocobase/plugin-workflow-manual/src/client/WorkflowTodo.tsx index 78501a55a..dc2a28c99 100644 --- a/packages/plugins/@nocobase/plugin-workflow-manual/src/client/WorkflowTodo.tsx +++ b/packages/plugins/@nocobase/plugin-workflow-manual/src/client/WorkflowTodo.tsx @@ -245,9 +245,9 @@ export const WorkflowTodo: React.FC & { Drawer: React.FC; Decorator: React.FC } 'x-action': 'filter', 'x-designer': 'Filter.Action.Designer', 'x-component': 'Filter.Action', + 'x-use-component-props': 'useFilterActionProps', 'x-component-props': { icon: 'FilterOutlined', - useProps: '{{ useFilterActionProps }}', }, 'x-align': 'left', }, @@ -259,9 +259,9 @@ export const WorkflowTodo: React.FC & { Drawer: React.FC; Decorator: React.FC } // 'x-designer': 'Action.Designer', 'x-toolbar': 'ActionSchemaToolbar', 'x-settings': 'actionSettings:refresh', + 'x-use-component-props': 'useRefreshActionProps', 'x-component-props': { icon: 'ReloadOutlined', - useProps: '{{ useRefreshActionProps }}', }, 'x-align': 'right', }, @@ -270,9 +270,9 @@ export const WorkflowTodo: React.FC & { Drawer: React.FC; Decorator: React.FC } table: { type: 'array', 'x-component': 'TableV2', + 'x-use-component-props': 'useTableBlockProps', 'x-component-props': { rowKey: 'id', - useProps: '{{ useTableBlockProps }}', }, properties: { actions: { diff --git a/packages/plugins/@nocobase/plugin-workflow-manual/src/client/instruction/forms/custom.tsx b/packages/plugins/@nocobase/plugin-workflow-manual/src/client/instruction/forms/custom.tsx index b913a1d0f..0645db631 100644 --- a/packages/plugins/@nocobase/plugin-workflow-manual/src/client/instruction/forms/custom.tsx +++ b/packages/plugins/@nocobase/plugin-workflow-manual/src/client/instruction/forms/custom.tsx @@ -95,10 +95,7 @@ function CustomFormBlockInitializer() { [uid()]: { type: 'void', 'x-component': 'FormV2', - 'x-component-props': { - // disabled / read-pretty / initialValues - useProps: '{{ useFormBlockProps }}', - }, + 'x-use-component-props': 'useFormBlockProps', properties: { grid: { type: 'void', diff --git a/packages/plugins/@nocobase/plugin-workflow-manual/src/client/instruction/forms/update.tsx b/packages/plugins/@nocobase/plugin-workflow-manual/src/client/instruction/forms/update.tsx index b5f594b62..c48ed31b8 100644 --- a/packages/plugins/@nocobase/plugin-workflow-manual/src/client/instruction/forms/update.tsx +++ b/packages/plugins/@nocobase/plugin-workflow-manual/src/client/instruction/forms/update.tsx @@ -39,13 +39,14 @@ function UpdateFormDesigner() { title: `{{t("Filter")}}`, // 'x-decorator': 'FormItem', 'x-component': 'Filter', + 'x-use-component-props': () => { + // eslint-disable-next-line react-hooks/rules-of-hooks + const options = useCollectionFilterOptions(fieldSchema?.['x-decorator-props']?.collection); + return { + options, + }; + }, 'x-component-props': { - useProps() { - const options = useCollectionFilterOptions(fieldSchema?.['x-decorator-props']?.collection); - return { - options, - }; - }, dynamicComponent: 'FilterDynamicComponent', }, }} diff --git a/packages/plugins/@nocobase/plugin-workflow/src/client/components/CollectionBlockInitializer.tsx b/packages/plugins/@nocobase/plugin-workflow/src/client/components/CollectionBlockInitializer.tsx index 9f9379328..7bfe9e769 100644 --- a/packages/plugins/@nocobase/plugin-workflow/src/client/components/CollectionBlockInitializer.tsx +++ b/packages/plugins/@nocobase/plugin-workflow/src/client/components/CollectionBlockInitializer.tsx @@ -48,9 +48,7 @@ function InnerCollectionBlockInitializer({ collection, dataPath, ...props }) { grid: { type: 'void', 'x-component': 'FormV2', - 'x-component-props': { - useProps: '{{useDetailsBlockProps}}', - }, + 'x-use-component-props': 'useDetailsBlockProps', 'x-read-pretty': true, properties: { grid: template || { diff --git a/packages/plugins/@nocobase/plugin-workflow/src/client/nodes/index.tsx b/packages/plugins/@nocobase/plugin-workflow/src/client/nodes/index.tsx index 0fd5b3f78..6fde5deca 100644 --- a/packages/plugins/@nocobase/plugin-workflow/src/client/nodes/index.tsx +++ b/packages/plugins/@nocobase/plugin-workflow/src/client/nodes/index.tsx @@ -407,10 +407,7 @@ export function NodeDefaultView(props) { ), 'x-decorator': 'FormV2', - 'x-decorator-props': { - // form, - useProps: '{{ useFormProviderProps }}', - }, + 'x-use-decorator-props': 'useFormProviderProps', 'x-component': 'Action.Drawer', properties: { ...(instruction.description diff --git a/packages/plugins/@nocobase/plugin-workflow/src/client/schemas/collection.ts b/packages/plugins/@nocobase/plugin-workflow/src/client/schemas/collection.ts index eeb5e2015..16c6e949f 100644 --- a/packages/plugins/@nocobase/plugin-workflow/src/client/schemas/collection.ts +++ b/packages/plugins/@nocobase/plugin-workflow/src/client/schemas/collection.ts @@ -30,19 +30,21 @@ export const filter = { title: '{{t("Filter")}}', 'x-decorator': 'FormItem', 'x-component': 'Filter', + 'x-use-component-props': () => { + // eslint-disable-next-line react-hooks/rules-of-hooks + const { values } = useForm(); + const [dataSourceName, collectionName] = parseCollectionName(values?.collection); + // eslint-disable-next-line react-hooks/rules-of-hooks + const options = useCollectionFilterOptions(collectionName, dataSourceName); + return { + options, + className: css` + position: relative; + width: 100%; + `, + }; + }, 'x-component-props': { - useProps() { - const { values } = useForm(); - const [dataSourceName, collectionName] = parseCollectionName(values?.collection); - const options = useCollectionFilterOptions(collectionName, dataSourceName); - return { - options, - className: css` - position: relative; - width: 100%; - `, - }; - }, dynamicComponent: 'FilterDynamicComponent', }, }; diff --git a/packages/plugins/@nocobase/plugin-workflow/src/client/schemas/workflows.ts b/packages/plugins/@nocobase/plugin-workflow/src/client/schemas/workflows.ts index 6765dcbc2..901900f27 100644 --- a/packages/plugins/@nocobase/plugin-workflow/src/client/schemas/workflows.ts +++ b/packages/plugins/@nocobase/plugin-workflow/src/client/schemas/workflows.ts @@ -178,9 +178,9 @@ export const workflowSchema: ISchema = { }, 'x-action': 'filter', 'x-component': 'Filter.Action', + 'x-use-component-props': 'cm.useFilterActionProps', 'x-component-props': { icon: 'FilterOutlined', - useProps: '{{ cm.useFilterActionProps }}', }, 'x-align': 'left', }, diff --git a/packages/plugins/@nocobase/plugin-workflow/src/client/triggers/collection.tsx b/packages/plugins/@nocobase/plugin-workflow/src/client/triggers/collection.tsx index 7a15e27b7..2658eb2d4 100644 --- a/packages/plugins/@nocobase/plugin-workflow/src/client/triggers/collection.tsx +++ b/packages/plugins/@nocobase/plugin-workflow/src/client/triggers/collection.tsx @@ -123,9 +123,7 @@ export default class extends Trigger { condition: { ...filter, title: `{{t("Only triggers when match conditions", { ns: "${NAMESPACE}" })}}`, - 'x-component-props': { - useProps: filter['x-component-props'].useProps, - }, + 'x-component-props': {}, 'x-reactions': [ { dependencies: ['collection'], diff --git a/packages/plugins/@nocobase/plugin-workflow/src/client/triggers/index.tsx b/packages/plugins/@nocobase/plugin-workflow/src/client/triggers/index.tsx index 0374bab40..c9872e4f6 100644 --- a/packages/plugins/@nocobase/plugin-workflow/src/client/triggers/index.tsx +++ b/packages/plugins/@nocobase/plugin-workflow/src/client/triggers/index.tsx @@ -266,10 +266,7 @@ export const TriggerConfig = () => { title: titleText, 'x-component': 'Action.Drawer', 'x-decorator': 'FormV2', - 'x-decorator-props': { - // form, - useProps: '{{ useFormProviderProps }}', - }, + 'x-use-decorator-props': 'useFormProviderProps', properties: { ...(trigger.description ? { diff --git a/packages/plugins/@nocobase/plugin-workflow/src/server/migrations/20230411034722-manual-multi-form.ts b/packages/plugins/@nocobase/plugin-workflow/src/server/migrations/20230411034722-manual-multi-form.ts index a2a786694..ad5d59f43 100644 --- a/packages/plugins/@nocobase/plugin-workflow/src/server/migrations/20230411034722-manual-multi-form.ts +++ b/packages/plugins/@nocobase/plugin-workflow/src/server/migrations/20230411034722-manual-multi-form.ts @@ -108,9 +108,7 @@ function migrateConfig({ schema = {}, actions = [] }: { schema: any; actions: nu [formId]: { type: 'void', 'x-component': 'FormV2', - 'x-component-props': { - useProps: '{{ useFormBlockProps }}', - }, + 'x-use-component-props': 'useFormBlockProps', properties: { grid: Object.assign(formBlock.properties.grid, { 'x-initializer': 'workflowManual:customForm:configureFields', diff --git a/packages/plugins/@nocobase/plugin-workflow/src/server/migrations/20230612021134-manual-collection-block.ts b/packages/plugins/@nocobase/plugin-workflow/src/server/migrations/20230612021134-manual-collection-block.ts index 05fe1ec51..e1e97cddc 100644 --- a/packages/plugins/@nocobase/plugin-workflow/src/server/migrations/20230612021134-manual-collection-block.ts +++ b/packages/plugins/@nocobase/plugin-workflow/src/server/migrations/20230612021134-manual-collection-block.ts @@ -56,9 +56,7 @@ function migrateSchema(schema = {}): object { type: 'void', name: id, 'x-component': 'FormV2', - 'x-component-props': { - useProps: '{{useDetailsBlockProps}}', - }, + 'x-use-component-props': 'useDetailsBlockProps', properties: { grid: { type: 'void',