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

refactor: 跟踪上游,(refactor: change useProps to x-use-component-props (#3853)) (#629)

Browse Source 
Reviewed-on: daoyoucloud/tachycode#629
Co-authored-by: bai.jingfeng <bai.jingfeng@foxmail.com>
Co-committed-by: bai.jingfeng <bai.jingfeng@foxmail.com>
This commit is contained in:
bai.jingfeng 2024-04-08 17:09:14 +08:00 committed by sealday
parent bab77e28ac
commit 799603f9f2
94 changed files with 796 additions and 1036 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

262
packages/core/client/src/acl/Configuration/schemas/roleCollections.ts
View File

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

1
packages/core/client/src/acl/Configuration/schemas/roles.ts
View File

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

50
packages/core/client/src/acl/Configuration/schemas/scopes.ts
View File

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

35
packages/core/client/src/application/hoc/withDynamicSchemaProps.tsx
View File

@ -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<T = any>(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<string, any>, 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<T = any>(Component: any, options: WithSch
return { ...props, ...schemaProps };
}, [schemaProps, props]);
// @ts-ignore
return <Component {...memoProps}>{props.children}</Component>;
};

2
packages/core/client/src/collection-manager/interfaces/subTable.ts
View File

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

2
packages/core/client/src/modules/actions/bulk-destroy/BulkDestroyActionInitializer.tsx
View File

@ -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: [],

2
packages/core/client/src/modules/actions/delete/DestroyActionInitializer.tsx
View File

@ -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: [],

2
packages/core/client/src/modules/actions/disassociate/DisassociateActionInitializer.tsx
View File

@ -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: [],

2
packages/core/client/src/modules/actions/filter/FilterActionInitializer.tsx
View File

@ -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 <ActionInitializer {...props} schema={schema} />;

2
packages/core/client/src/modules/actions/refresh/RefreshActionInitializer.tsx
View File

@ -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 <ActionInitializer {...props} schema={schema} />;

4
packages/core/client/src/modules/actions/save-record/SaveRecordActionInitializer.tsx
View File

@ -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();

2
packages/core/client/src/modules/actions/submit/CreateSubmitActionInitializer.tsx
View File

@ -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: [],

2
packages/core/client/src/modules/actions/submit/UpdateSubmitActionInitializer.tsx
View File

@ -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: [],

4
packages/core/client/src/modules/actions/update-record/UpdateRecordActionInitializer.tsx
View File

@ -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();

2
packages/core/client/src/modules/blocks/filter-blocks/collapse/filterCollapseItemFieldSettings.ts
View File

@ -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'],

15
packages/core/client/src/modules/blocks/filter-blocks/collapse/filterCollapseItemInitializer.tsx
View File

@ -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: {},
},

7
packages/core/client/src/schema-component/antd/action/Action.Link.tsx
View File

@ -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 (
<Action {...props} component={props.component || 'a'} className={classnames('nb-action-link', props.className)} />
);
},
}),
{ displayName: 'ActionLink' },
);

9
packages/core/client/src/schema-component/antd/action/Action.tsx
View File

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

3
packages/core/client/src/schema-component/antd/action/demos/demo3.tsx
View File

@ -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);
}}
>
<Radio.Button value="drawer">Drawer</Radio.Button>

4
packages/core/client/src/schema-component/antd/association-field/FileManager.tsx
View File

@ -145,8 +145,8 @@ const InternalFileManager = (props) => {
<FileSelector
value={options}
multiple={multiple}
quickUpload={fieldSchema['x-component-props'].quickUpload !== false}
selectFile={fieldSchema['x-component-props'].selectFile !== false}
quickUpload={fieldSchema['x-component-props']?.quickUpload !== false}
selectFile={fieldSchema['x-component-props']?.selectFile !== false}
action={`${collectionField?.target}:create`}
onSelect={handleSelect}
onRemove={handleRemove}

2
packages/core/client/src/schema-component/antd/association-field/schema.ts
View File

@ -71,13 +71,13 @@ export default {
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 }}',
},
},
},

3
packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.Initializer.tsx
View File

@ -19,7 +19,6 @@ export const associationFilterInitializer = new SchemaInitializer({
title: '{{t("Association fields")}}',
useChildren() {
const associatedFields = useAssociatedFields();
const useProps = '{{useAssociationFilterProps}}';
const children: SchemaInitializerItemType[] = associatedFields.map((field) => ({
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: {},
},

2
packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.Item.Designer.tsx
View File

@ -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'],

258
packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.Item.tsx
View File

@ -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<React.Key[]>(
() => (defaultCollapse && collectionField?.name ? [collectionField.name] : []),
[],
);
const valueKey = _valueKey || collectionField?.targetKey || 'id';
const labelKey = _labelKey || fieldSchema['x-component-props']?.fieldNames?.label || valueKey;
const defaultActiveKeyCollapse = useMemo<React.Key[]>(
() => (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<React.Key[]>([]);
const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
const [autoExpandParent, setAutoExpandParent] = useState<boolean>(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<any>) => {
_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(
<SortableItem className={cls(componentCls, hashId, 'nb-block-item', props.className, 'SortableItem')}>
<Designer />
<Collapse defaultActiveKey={defaultActiveKeyCollapse} ghost expandIcon={searchVisible ? () => null : undefined}>
<Panel
className="Panel"
header={
<Row
className="headerRow"
style={{
borderBottom: searchVisible ? `1px solid ${token.colorBorder}` : 'none',
}}
gutter={5}
>
<Col title={compile(title)} className="headerCol">
{searchVisible ? (
<Input
bordered={false}
autoFocus
placeholder="Search..."
className="search"
onClick={handleSearchClick}
onChange={handleSearchInput}
/>
) : (
compile(title)
)}
</Col>
<Col
const handleSearchClick = (e: MouseEvent) => {
e.stopPropagation();
};
const handleSearchInput = (e: ChangeEvent<any>) => {
_handleSearchInput(e);
};
const title = fieldSchema.title ?? collectionField?.uiSchema?.title;
return wrapSSR(
<SortableItem className={cls(componentCls, hashId, 'nb-block-item', props.className, 'SortableItem')}>
<Designer />
<Collapse defaultActiveKey={defaultActiveKeyCollapse} ghost expandIcon={searchVisible ? () => null : undefined}>
<Panel
className="Panel"
header={
<Row
className="headerRow"
style={{
flex: '0 0 auto',
borderBottom: searchVisible ? `1px solid ${token.colorBorder}` : 'none',
}}
gutter={5}
>
{searchVisible ? (
<CloseOutlined className="CloseOutlined" onClick={handleSearchToggle} />
) : (
<SearchOutlined className="SearchOutlined" onClick={handleSearchToggle} />
)}
</Col>
</Row>
}
key={defaultActiveKeyCollapse[0]}
>
<Tree
className="Tree"
onExpand={onExpand}
expandedKeys={expandedKeys}
autoExpandParent={autoExpandParent}
treeData={list}
onSelect={onSelect}
fieldNames={fieldNames}
titleRender={(node) => {
return (
<EllipsisWithTooltip ellipsis>
{getLabelFormatValue(labelUiSchema, compile(node[labelKey]))}
</EllipsisWithTooltip>
);
}}
selectedKeys={selectedKeys}
blockNode
/>
</Panel>
</Collapse>
</SortableItem>,
);
};
<Col title={compile(title)} className="headerCol">
{searchVisible ? (
<Input
bordered={false}
autoFocus
placeholder="Search..."
className="search"
onClick={handleSearchClick}
onChange={handleSearchInput}
/>
) : (
compile(title)
)}
</Col>
<Col
style={{
flex: '0 0 auto',
}}
>
{searchVisible ? (
<CloseOutlined className="CloseOutlined" onClick={handleSearchToggle} />
) : (
<SearchOutlined className="SearchOutlined" onClick={handleSearchToggle} />
)}
</Col>
</Row>
}
key={defaultActiveKeyCollapse[0]}
>
<Tree
className="Tree"
onExpand={onExpand}
expandedKeys={expandedKeys}
autoExpandParent={autoExpandParent}
treeData={list}
onSelect={onSelect}
fieldNames={fieldNames}
titleRender={(node) => {
return (
<EllipsisWithTooltip ellipsis>
{getLabelFormatValue(labelUiSchema, compile(node[labelKey]))}
</EllipsisWithTooltip>
);
}}
selectedKeys={selectedKeys}
blockNode
/>
</Panel>
</Collapse>
</SortableItem>,
);
},
{ displayName: 'AssociationFilterItem' },
);

9
packages/core/client/src/schema-component/antd/filter/Filter.tsx
View File

@ -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<ObjectFieldModel>();
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<ObjectFieldModel>();
const fieldSchema: any = useFieldSchema();
@ -47,7 +50,7 @@ export const Filter: any = observer(
</FilterContext.Provider>
</div>
);
},
}),
{ displayName: 'Filter' },
);

9
packages/core/client/src/schema-component/antd/filter/FilterAction.tsx
View File

@ -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<any>(null);
FilterActionContext.displayName = 'FilterActionContext';
export const FilterAction = observer(
(props: any) => {
export const FilterAction = withDynamicSchemaProps(
observer((props: any) => {
const { t } = useTranslation();
const field = useField<Field>();
const [visible, setVisible] = useState(false);
const { designable, dn } = useDesignable();
const fieldSchema = useFieldSchema();
const form = useMemo<Form>(() => 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(
</StablePopover>
</FilterActionContext.Provider>
);
},
}),
{ displayName: 'FilterAction' },
);

16
packages/core/client/src/schema-component/antd/filter/demos/demo6.tsx
View File

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

4
packages/core/client/src/schema-component/antd/form-v2/demos/demo2.tsx
View File

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

4
packages/core/client/src/schema-component/antd/form-v2/demos/demo3.tsx
View File

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

7
packages/core/client/src/schema-component/antd/g2plot/G2PlotDesigner.tsx
View File

@ -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,

5
packages/core/client/src/schema-component/antd/grid/Grid.tsx
View File

@ -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<any>({});
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: [
{

4
packages/core/client/src/schema-component/antd/record-picker/demos/demo1.tsx
View File

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

5
packages/core/client/src/schema-component/antd/table-v2/Table.Column.Designer.tsx
View File

@ -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;

6
packages/core/client/src/schema-component/antd/table-v2/demos/demo1.tsx
View File

@ -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: {

5
packages/core/client/src/schema-component/antd/table/Table.Column.Designer.tsx
View File

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

70
packages/core/client/src/schema-component/antd/upload/Upload.tsx
View File

@ -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<string, any> = 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(
<div className={cls(`${prefixCls}-dragger`, hashId)}>
<AntdUpload.Dragger {...useUploadProps({ ...props, ...extraProps, onChange: handleChange })}>
<p className={`${prefixCls}-drag-icon`}>
{loading ? <LoadingOutlined style={{ fontSize: 36 }} spin /> : <InboxOutlined />}
</p>
<p className={`${prefixCls}-text`}>{title}</p>
<p className={`${prefixCls}-hint`}>{subTitle}</p>
</AntdUpload.Dragger>
</div>,
);
},
mapProps({
value: 'fileList',
}),
return wrapSSR(
<div className={cls(`${prefixCls}-dragger`, hashId)}>
<AntdUpload.Dragger {...useUploadProps({ ...props, ...extraProps, onChange: handleChange })}>
<p className={`${prefixCls}-drag-icon`}>
{loading ? <LoadingOutlined style={{ fontSize: 36 }} spin /> : <InboxOutlined />}
</p>
<p className={`${prefixCls}-text`}>{title}</p>
<p className={`${prefixCls}-hint`}>{subTitle}</p>
</AntdUpload.Dragger>
</div>,
);
},
mapProps({
value: 'fileList',
}),
),
{ displayName: 'Upload.DraggerV2' },
);
export default Upload;

1
packages/core/client/src/schema-component/antd/upload/type.d.ts vendored
View File

@ -22,6 +22,7 @@ export type DraggerV2Props = Omit<AntdDraggerProps, 'onChange'> & {
title?: string;
subTitle?: string;
children?: React.ReactNode;
/** @deprecated */
useProps?: () => any;
};

2
packages/core/client/src/schema-initializer/items/CreateFilterActionInitializer.tsx
View File

@ -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 <ActionInitializer {...props} schema={schema} />;

4
packages/core/client/src/schema-initializer/items/CreateResetActionInitializer.tsx
View File

@ -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 <ActionInitializer {...props} schema={schema} />;
};

2
packages/core/client/src/schema-initializer/items/SelectActionInitializer.tsx
View File

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

1
packages/core/client/src/schema-initializer/items/SubmitActionInitializer.tsx
View File

@ -13,7 +13,6 @@ export const SubmitActionInitializer = (props) => {
'x-component-props': {
type: 'primary',
htmlType: 'submit',
// useProps: '{{ bp.useSubmitActionProps }}',
},
};
return <ActionInitializer {...props} schema={schema} />;

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

@ -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: {

402
packages/core/client/src/schema-settings/DataTemplates/FormDataTemplates.tsx
View File

@ -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<ITemplate>(
() =>
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<ITemplate>(
() =>
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: [<AsDefaultTemplate key="0" />],
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: [<AsDefaultTemplate key="0" />],
},
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 (
<SchemaComponentContext.Provider value={{ ...designerCtx, designable: true }}>
<SchemaComponent components={components} scope={scope} schema={schema} />
</SchemaComponentContext.Provider>
);
},
return (
<SchemaComponentContext.Provider value={{ ...designerCtx, designable: true }}>
<SchemaComponent components={components} scope={scope} schema={schema} />
</SchemaComponentContext.Provider>
);
},
{ displayName: 'FormDataTemplates' },
),
{ displayName: 'FormDataTemplates' },
);

2
packages/core/client/src/schema-settings/DataTemplates/utils.tsx
View File

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

12
packages/core/client/src/schema-settings/EnableChildCollections/index.tsx
View File

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

68
packages/core/client/src/schema-settings/LinkageRules/LinkageRuleActionGroup.tsx
View File

@ -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<VoidField>();
const logic = 'actions';
const { type, linkageOptions, collectionName } = props.useProps();
export const LinkageRuleActionGroup = withDynamicSchemaProps(
(props: LinkageRuleActionGroupProps) => {
const { t } = useTranslation();
const field = useField<VoidField>();
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 (
<div style={style}>
<ArrayField name={logic} component={components} disabled={false} />
<Space size={16} style={spaceStyle}>
<a onClick={onClick}>{t('Add property')}</a>
</Space>
</div>
);
};
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 (
<div style={style}>
<ArrayField name={logic} component={components} disabled={false} />
<Space size={16} style={spaceStyle}>
<a onClick={onClick}>{t('Add property')}</a>
</Space>
</div>
);
},
{ displayName: 'LinkageRuleActionGroup' },
);

44
packages/core/client/src/schema-settings/LinkageRules/index.tsx
View File

@ -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(
</RecordProvider>
</FormBlockContext.Provider>
);
},
}),
{ displayName: 'FormLinkageRules' },
);

58
packages/core/client/src/schema-settings/SchemaSettings.tsx
View File

@ -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) => <FlagProvider {...props} isInFormDataTemplate />,
'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: {

2
packages/core/client/src/schema-settings/SchemaSettingsDefaultValue.tsx
View File

@ -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 ？

12
packages/core/client/src/schema-templates/schemas/uiSchemaTemplates.ts
View File

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

2
packages/plugins/@nocobase/plugin-acl/src/client/schemas/roles.ts
View File

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

50
packages/plugins/@nocobase/plugin-acl/src/client/schemas/scopes.ts
View File

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

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

@ -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 <ActionInitializer {...props} schema={schema} />;

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

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

2
packages/plugins/@nocobase/plugin-action-bulk-update/src/client/BulkUpdateActionInitializer.tsx
View File

@ -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 <BlockInitializer {...itemConfig} schema={schema} item={itemConfig} />;

2
packages/plugins/@nocobase/plugin-action-duplicate/src/client/DuplicateAction.Settings.tsx
View File

@ -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) => {

2
packages/plugins/@nocobase/plugin-action-print/src/client/PrintActionInitializer.tsx
View File

@ -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 <ActionInitializer {...props} schema={schema} />;

2
packages/plugins/@nocobase/plugin-api-keys/src/client/Configuration/schema.tsx
View File

@ -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: {

6
packages/plugins/@nocobase/plugin-audit-logs/src/client/components/AuditLogsViewActionInitializer.tsx
View File

@ -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': {

2
packages/plugins/@nocobase/plugin-audit-logs/src/client/createAuditLogsBlockSchema.tsx
View File

@ -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: {

8
packages/plugins/@nocobase/plugin-audit-logs/src/client/deplicated/AuditLogs.tsx
View File

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

4
packages/plugins/@nocobase/plugin-calendar/src/client/calendar/demos/demo2.tsx
View File

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

4
packages/plugins/@nocobase/plugin-calendar/src/client/schema-initializer/initializers/CalendarFormActionInitializers.tsx
View File

@ -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();

2
packages/plugins/@nocobase/plugin-charts/src/client/ChartBlockEngineDesigner.tsx
View File

@ -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'],

3
packages/plugins/@nocobase/plugin-collection-manager/src/server/migrations/20230623145414-number-step.ts
View File

@ -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,

78
packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/components/TitleField.tsx
View File

@ -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) ? (
<Tooltip title={t('Default title for each record')} placement="right" overlayInnerStyle={{ textAlign: 'center' }}>
<Switch
aria-label={`switch-title-field-${record?.name}`}
size="small"
loading={record?.name === loadingRecord?.name}
checked={record?.name === (titleField || 'id')}
onChange={handleChange}
/>
</Tooltip>
) : 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) ? (
<Tooltip title={t('Default title for each record')} placement="right" overlayInnerStyle={{ textAlign: 'center' }}>
<Switch
aria-label={`switch-title-field-${record?.name}`}
size="small"
loading={record?.name === loadingRecord?.name}
checked={record?.name === (titleField || 'id')}
onChange={handleChange}
/>
</Tooltip>
) : null;
},
{ displayName: 'TitleField' },
);

4
packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/schema/collectionFields.ts
View File

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

4
packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/schema/collections.ts
View File

@ -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: {

2
packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/MainDataSourceManager/Configuration/schemas/collections.ts
View File

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

2
packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/schemas/roleCollections.ts
View File

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

50
packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/schemas/scopes.ts
View File

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

2
packages/plugins/@nocobase/plugin-data-source-manager/src/client/schema/index.ts
View File

@ -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: {

8
packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterActionInitializers.tsx
View File

@ -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 <ActionInitializer {...props} schema={schema} />;
@ -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 <ActionInitializer {...props} schema={schema} />;
};
@ -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',
};

3
packages/plugins/@nocobase/plugin-data-visualization/src/client/hooks/filter.ts
View File

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

2
packages/plugins/@nocobase/plugin-export/src/client/ExportActionInitializer.tsx
View File

@ -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 (

2
packages/plugins/@nocobase/plugin-file-manager/src/client/initializers/UploadActionInitializer.tsx
View File

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

1
packages/plugins/@nocobase/plugin-file-manager/src/server/migrations/20230831160742-fix-attachment-field.ts
View File

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

2
packages/plugins/@nocobase/plugin-gantt/src/client/demos/demo1.tsx
View File

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

4
packages/plugins/@nocobase/plugin-snapshot-field/src/client/SnapshotBlock/SnapshotBlockInitializers/SnapshotBlockInitializersDetailItem.tsx
View File

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

4
packages/plugins/@nocobase/plugin-ui-schema-storage/src/server/migrations/20230510235247-form-field.ts
View File

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

6
packages/plugins/@nocobase/plugin-users/src/client/schemas/users.ts
View File

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

4
packages/plugins/@nocobase/plugin-workflow-action-trigger/src/client/index.ts
View File

@ -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: {},

26
packages/plugins/@nocobase/plugin-workflow-aggregate/src/client/AggregateInstruction.tsx
View File

@ -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': [

6
packages/plugins/@nocobase/plugin-workflow-manual/src/client/WorkflowTodo.tsx
View File

@ -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: {

5
packages/plugins/@nocobase/plugin-workflow-manual/src/client/instruction/forms/custom.tsx
View File

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

13
packages/plugins/@nocobase/plugin-workflow-manual/src/client/instruction/forms/update.tsx
View File

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

4
packages/plugins/@nocobase/plugin-workflow/src/client/components/CollectionBlockInitializer.tsx
View File

@ -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 || {

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

@ -407,10 +407,7 @@ export function NodeDefaultView(props) {
</div>
),
'x-decorator': 'FormV2',
'x-decorator-props': {
// form,
useProps: '{{ useFormProviderProps }}',
},
'x-use-decorator-props': 'useFormProviderProps',
'x-component': 'Action.Drawer',
properties: {
...(instruction.description

26
packages/plugins/@nocobase/plugin-workflow/src/client/schemas/collection.ts
View File

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

2
packages/plugins/@nocobase/plugin-workflow/src/client/schemas/workflows.ts
View File

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

4
packages/plugins/@nocobase/plugin-workflow/src/client/triggers/collection.tsx
View File

@ -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'],

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

@ -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
? {

4
packages/plugins/@nocobase/plugin-workflow/src/server/migrations/20230411034722-manual-multi-form.ts
View File

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

4
packages/plugins/@nocobase/plugin-workflow/src/server/migrations/20230612021134-manual-collection-block.ts
View File

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