From 991345d9884dc6e96adb2776bc9072cfaf542a33 Mon Sep 17 00:00:00 2001 From: chenos Date: Sat, 19 Feb 2022 21:25:39 +0800 Subject: [PATCH] feat(client): improve code --- .../Configuration/schemas/roleCollections.ts | 4 +- .../src/acl/Configuration/schemas/roles.ts | 14 +-- .../schemas/useRoleResourceValues.ts | 2 +- ...llectionManagerSchemaComponentProvider.tsx | 2 +- .../Configuration/AddFieldAction.tsx | 4 +- .../Configuration/EditFieldAction.tsx | 4 +- .../Configuration/schemas/collectionFields.ts | 4 +- .../Configuration/schemas/collections.ts | 14 +-- .../src/collection-manager/demos/demo4.tsx | 3 +- .../antd/form/demos/demo8.tsx | 85 +++++++++++++++++++ .../src/schema-component/antd/form/index.md | 6 ++ .../BlockInitializer/TableBlock.tsx | 2 +- .../FormActionInitializer/index.tsx | 2 +- .../TableActionInitializer/index.tsx | 6 +- .../TableRecordActionInitializer/index.tsx | 2 +- 15 files changed, 123 insertions(+), 31 deletions(-) create mode 100644 packages/client/src/schema-component/antd/form/demos/demo8.tsx diff --git a/packages/client/src/acl/Configuration/schemas/roleCollections.ts b/packages/client/src/acl/Configuration/schemas/roleCollections.ts index 7bc842ad89..7522dcb43f 100644 --- a/packages/client/src/acl/Configuration/schemas/roleCollections.ts +++ b/packages/client/src/acl/Configuration/schemas/roleCollections.ts @@ -72,7 +72,7 @@ export const roleCollectionsSchema: ISchema = { // rowSelection: { // type: 'checkbox', // }, - useDataSource: '{{ useDataSourceFromRAC }}', + useDataSource: '{{ cm.useDataSourceFromRAC }}', }, properties: { column1: { @@ -149,7 +149,7 @@ export const roleCollectionsSchema: ISchema = { title: 'Cancel', 'x-component': 'Action', 'x-component-props': { - useAction: '{{ useCancelAction }}', + useAction: '{{ cm.useCancelAction }}', }, }, action2: { diff --git a/packages/client/src/acl/Configuration/schemas/roles.ts b/packages/client/src/acl/Configuration/schemas/roles.ts index 08b7d5e06d..805a6487d9 100644 --- a/packages/client/src/acl/Configuration/schemas/roles.ts +++ b/packages/client/src/acl/Configuration/schemas/roles.ts @@ -100,7 +100,7 @@ export const roleSchema: ISchema = { title: 'Cancel', 'x-component': 'Action', 'x-component-props': { - useAction: '{{ useCancelAction }}', + useAction: '{{ cm.useCancelAction }}', }, }, action2: { @@ -108,7 +108,7 @@ export const roleSchema: ISchema = { 'x-component': 'Action', 'x-component-props': { type: 'primary', - useAction: '{{ useCreateAction }}', + useAction: '{{ cm.useCreateAction }}', }, }, }, @@ -128,7 +128,7 @@ export const roleSchema: ISchema = { rowSelection: { type: 'checkbox', }, - useDataSource: '{{ useDataSourceFromRAC }}', + useDataSource: '{{ cm.useDataSourceFromRAC }}', }, properties: { column1: { @@ -233,7 +233,7 @@ export const roleSchema: ISchema = { 'x-component': 'Action.Drawer', 'x-decorator': 'Form', 'x-decorator-props': { - useValues: '{{ useValuesFromRecord }}', + useValues: '{{ cm.useValuesFromRecord }}', }, title: '编辑角色', properties: { @@ -254,7 +254,7 @@ export const roleSchema: ISchema = { title: 'Cancel', 'x-component': 'Action', 'x-component-props': { - useAction: '{{ useCancelAction }}', + useAction: '{{ cm.useCancelAction }}', }, }, action2: { @@ -262,7 +262,7 @@ export const roleSchema: ISchema = { 'x-component': 'Action', 'x-component-props': { type: 'primary', - useAction: '{{ useUpdateAction }}', + useAction: '{{ cm.useUpdateAction }}', }, }, }, @@ -276,7 +276,7 @@ export const roleSchema: ISchema = { title: '删除', 'x-component': 'Action.Link', 'x-component-props': { - useAction: '{{ useDestroyAction }}', + useAction: '{{ cm.useDestroyAction }}', }, }, }, diff --git a/packages/client/src/acl/Configuration/schemas/useRoleResourceValues.ts b/packages/client/src/acl/Configuration/schemas/useRoleResourceValues.ts index f8a9bb6440..b6d22137eb 100644 --- a/packages/client/src/acl/Configuration/schemas/useRoleResourceValues.ts +++ b/packages/client/src/acl/Configuration/schemas/useRoleResourceValues.ts @@ -23,5 +23,5 @@ export const useRoleResourceValues = (options) => { result.run(); } }, [visible, record.usingConfig]); - return; + return result; }; diff --git a/packages/client/src/collection-manager/CollectionManagerSchemaComponentProvider.tsx b/packages/client/src/collection-manager/CollectionManagerSchemaComponentProvider.tsx index 0f785ab1ec..e60f245ae7 100644 --- a/packages/client/src/collection-manager/CollectionManagerSchemaComponentProvider.tsx +++ b/packages/client/src/collection-manager/CollectionManagerSchemaComponentProvider.tsx @@ -12,7 +12,7 @@ import * as hooks from './action-hooks'; export const CollectionManagerSchemaComponentProvider: React.FC = (props) => { return ( {props.children} diff --git a/packages/client/src/collection-manager/Configuration/AddFieldAction.tsx b/packages/client/src/collection-manager/Configuration/AddFieldAction.tsx index 166b236e47..1ef79a3641 100644 --- a/packages/client/src/collection-manager/Configuration/AddFieldAction.tsx +++ b/packages/client/src/collection-manager/Configuration/AddFieldAction.tsx @@ -51,7 +51,7 @@ const getSchema = (schema: IField): ISchema => { title: '{{ t("Cancel") }}', 'x-component': 'Action', 'x-component-props': { - useAction: '{{ useCancelAction }}', + useAction: '{{ cm.useCancelAction }}', }, }, action2: { @@ -59,7 +59,7 @@ const getSchema = (schema: IField): ISchema => { 'x-component': 'Action', 'x-component-props': { type: 'primary', - useAction: '{{ useCreateActionAndRefreshCM }}', + useAction: '{{ cm.useCreateActionAndRefreshCM }}', }, }, }, diff --git a/packages/client/src/collection-manager/Configuration/EditFieldAction.tsx b/packages/client/src/collection-manager/Configuration/EditFieldAction.tsx index 8d47d145fd..48838f7491 100644 --- a/packages/client/src/collection-manager/Configuration/EditFieldAction.tsx +++ b/packages/client/src/collection-manager/Configuration/EditFieldAction.tsx @@ -53,7 +53,7 @@ const getSchema = (schema: IField): ISchema => { title: '{{ t("Cancel") }}', 'x-component': 'Action', 'x-component-props': { - useAction: '{{ useCancelAction }}', + useAction: '{{ cm.useCancelAction }}', }, }, action2: { @@ -61,7 +61,7 @@ const getSchema = (schema: IField): ISchema => { 'x-component': 'Action', 'x-component-props': { type: 'primary', - useAction: '{{ useUpdateActionAndRefreshCM }}', + useAction: '{{ cm.useUpdateActionAndRefreshCM }}', }, }, }, diff --git a/packages/client/src/collection-manager/Configuration/schemas/collectionFields.ts b/packages/client/src/collection-manager/Configuration/schemas/collectionFields.ts index 0eb35e08b8..e9e8d16cc3 100644 --- a/packages/client/src/collection-manager/Configuration/schemas/collectionFields.ts +++ b/packages/client/src/collection-manager/Configuration/schemas/collectionFields.ts @@ -114,7 +114,7 @@ export const collectionFieldSchema: ISchema = { rowSelection: { type: 'checkbox', }, - useDataSource: '{{ useDataSourceFromRAC }}', + useDataSource: '{{ cm.useDataSourceFromRAC }}', }, properties: { column1: { @@ -176,7 +176,7 @@ export const collectionFieldSchema: ISchema = { title: '{{ t("Delete") }}', 'x-component': 'Action.Link', 'x-component-props': { - useAction: '{{ useDestroyActionAndRefreshCM }}', + useAction: '{{ cm.useDestroyActionAndRefreshCM }}', }, }, }, diff --git a/packages/client/src/collection-manager/Configuration/schemas/collections.ts b/packages/client/src/collection-manager/Configuration/schemas/collections.ts index 8a73f34529..0e3d4e3f19 100644 --- a/packages/client/src/collection-manager/Configuration/schemas/collections.ts +++ b/packages/client/src/collection-manager/Configuration/schemas/collections.ts @@ -110,7 +110,7 @@ export const collectionSchema: ISchema = { title: '{{ t("Cancel") }}', 'x-component': 'Action', 'x-component-props': { - useAction: '{{ useCancelAction }}', + useAction: '{{ cm.useCancelAction }}', }, }, action2: { @@ -118,7 +118,7 @@ export const collectionSchema: ISchema = { 'x-component': 'Action', 'x-component-props': { type: 'primary', - useAction: '{{ useCreateActionAndRefreshCM }}', + useAction: '{{ cm.useCreateActionAndRefreshCM }}', }, }, }, @@ -138,7 +138,7 @@ export const collectionSchema: ISchema = { rowSelection: { type: 'checkbox', }, - useDataSource: '{{ useDataSourceFromRAC }}', + useDataSource: '{{ cm.useDataSourceFromRAC }}', }, properties: { column1: { @@ -205,7 +205,7 @@ export const collectionSchema: ISchema = { 'x-component': 'Action.Drawer', 'x-decorator': 'Form', 'x-decorator-props': { - useValues: '{{ useValuesFromRecord }}', + useValues: '{{ cm.useValuesFromRecord }}', }, title: '{{ t("Edit collection") }}', properties: { @@ -226,7 +226,7 @@ export const collectionSchema: ISchema = { title: '{{ t("Cancel") }}', 'x-component': 'Action', 'x-component-props': { - useAction: '{{ useCancelAction }}', + useAction: '{{ cm.useCancelAction }}', }, }, action2: { @@ -234,7 +234,7 @@ export const collectionSchema: ISchema = { 'x-component': 'Action', 'x-component-props': { type: 'primary', - useAction: '{{ useUpdateActionAndRefreshCM }}', + useAction: '{{ cm.useUpdateActionAndRefreshCM }}', }, }, }, @@ -248,7 +248,7 @@ export const collectionSchema: ISchema = { title: '{{ t("Delete") }}', 'x-component': 'Action.Link', 'x-component-props': { - useAction: '{{ useDestroyActionAndRefreshCM }}', + useAction: '{{ cm.useDestroyActionAndRefreshCM }}', }, }, }, diff --git a/packages/client/src/collection-manager/demos/demo4.tsx b/packages/client/src/collection-manager/demos/demo4.tsx index d465bb3163..96007cb61c 100644 --- a/packages/client/src/collection-manager/demos/demo4.tsx +++ b/packages/client/src/collection-manager/demos/demo4.tsx @@ -1,6 +1,7 @@ import { ISchema } from '@formily/react'; import { - AntdSchemaComponentProvider, CollectionManagerProvider, + AntdSchemaComponentProvider, + CollectionManagerProvider, SchemaComponent, SchemaComponentProvider } from '@nocobase/client'; diff --git a/packages/client/src/schema-component/antd/form/demos/demo8.tsx b/packages/client/src/schema-component/antd/form/demos/demo8.tsx new file mode 100644 index 0000000000..c8bb72fddc --- /dev/null +++ b/packages/client/src/schema-component/antd/form/demos/demo8.tsx @@ -0,0 +1,85 @@ +import { ISchema, observer } from '@formily/react'; +import { + ActionContext, + AntdSchemaComponentProvider, + SchemaComponent, + SchemaComponentProvider, + useActionContext, + useCloseAction, + useRequest +} from '@nocobase/client'; +import { Button } from 'antd'; +import React, { useEffect, useState } from 'react'; + +const useValues = (options) => { + const { visible } = useActionContext(); + const result = useRequest( + () => + Promise.resolve({ + data: { + id: 1, + name: 'hello nocobase', + }, + }), + { ...options, manual: true }, + ); + useEffect(() => { + // 默认 manual: true，点击弹窗之后才处理 + if (visible) { + result.run(); + } + }, [visible]); + return result; +}; + +const schema: ISchema = { + type: 'void', + name: 'drawer1', + 'x-component': 'Action.Drawer', + 'x-decorator': 'Form', + 'x-decorator-props': { + useValues, + }, + title: 'Drawer Title', + properties: { + name: { + title: 'T1', + 'x-component': 'Input', + 'x-decorator': 'FormItem', + }, + f1: { + type: 'void', + 'x-component': 'Action.Drawer.Footer', + properties: { + a1: { + 'x-component': 'Action', + title: 'Close', + 'x-component-props': { + useAction: '{{ useCloseAction }}', + }, + }, + }, + }, + }, +}; + +export default observer(() => { + const [visible, setVisible] = useState(false); + + return ( + + + + + + + + + ); +}); diff --git a/packages/client/src/schema-component/antd/form/index.md b/packages/client/src/schema-component/antd/form/index.md index 8b789eabda..58822be675 100644 --- a/packages/client/src/schema-component/antd/form/index.md +++ b/packages/client/src/schema-component/antd/form/index.md @@ -39,6 +39,12 @@ Form 也可以作 decorator 存在 +### DrawerForm + +自由控制弹窗表单（Drawer+Form），并异步填充表单数据 + + + ## API 属性说明 diff --git a/packages/client/src/schema-initializer/Initializers/BlockInitializer/TableBlock.tsx b/packages/client/src/schema-initializer/Initializers/BlockInitializer/TableBlock.tsx index bb83dbf6cf..64b51c8113 100644 --- a/packages/client/src/schema-initializer/Initializers/BlockInitializer/TableBlock.tsx +++ b/packages/client/src/schema-initializer/Initializers/BlockInitializer/TableBlock.tsx @@ -45,7 +45,7 @@ const createSchema = (collectionName) => { rowSelection: { type: 'checkbox', }, - useDataSource: '{{ useDataSourceFromRAC }}', + useDataSource: '{{ cm.useDataSourceFromRAC }}', }, 'x-column-initializer': 'TableColumnInitializer', properties: { diff --git a/packages/client/src/schema-initializer/Initializers/FormActionInitializer/index.tsx b/packages/client/src/schema-initializer/Initializers/FormActionInitializer/index.tsx index 00dfc4cb7e..dd8b400f21 100644 --- a/packages/client/src/schema-initializer/Initializers/FormActionInitializer/index.tsx +++ b/packages/client/src/schema-initializer/Initializers/FormActionInitializer/index.tsx @@ -69,7 +69,7 @@ export const FormActionInitializer = observer((props: any) => { 'x-component': 'Action', 'x-component-props': { type: 'primary', - useAction: '{{ useCreateActionWithoutRefresh }}', + useAction: '{{ cm.useCreateActionWithoutRefresh }}', }, }, }, diff --git a/packages/client/src/schema-initializer/Initializers/TableActionInitializer/index.tsx b/packages/client/src/schema-initializer/Initializers/TableActionInitializer/index.tsx index 103cbe6ded..e3a5048dca 100644 --- a/packages/client/src/schema-initializer/Initializers/TableActionInitializer/index.tsx +++ b/packages/client/src/schema-initializer/Initializers/TableActionInitializer/index.tsx @@ -104,7 +104,7 @@ export const TableActionInitializer = observer((props: any) => { title: '{{ t("Cancel") }}', 'x-component': 'Action', 'x-component-props': { - useAction: '{{ useCancelAction }}', + useAction: '{{ cm.useCancelAction }}', }, }, action2: { @@ -112,7 +112,7 @@ export const TableActionInitializer = observer((props: any) => { 'x-component': 'Action', 'x-component-props': { type: 'primary', - useAction: '{{ useCreateAction }}', + useAction: '{{ cm.useCreateAction }}', }, }, }, @@ -130,7 +130,7 @@ export const TableActionInitializer = observer((props: any) => { title: '{{ t("Delete") }}', 'x-action': 'destroy', 'x-component-props': { - useAction: '{{ useBulkDestroyAction }}', + useAction: '{{ cm.useBulkDestroyAction }}', }, }, }, diff --git a/packages/client/src/schema-initializer/Initializers/TableRecordActionInitializer/index.tsx b/packages/client/src/schema-initializer/Initializers/TableRecordActionInitializer/index.tsx index 5c2526dad5..aaf79c84f1 100644 --- a/packages/client/src/schema-initializer/Initializers/TableRecordActionInitializer/index.tsx +++ b/packages/client/src/schema-initializer/Initializers/TableRecordActionInitializer/index.tsx @@ -183,7 +183,7 @@ export const TableRecordActionInitializer = observer((props: any) => { title: '{{ t("Delete") }}', 'x-action': 'destroy', 'x-component-props': { - useAction: '{{ useDestroyAction }}', + useAction: '{{ cm.useDestroyAction }}', }, }, },