feat(client): improve code
This commit is contained in:
parent
118abe1de5
commit
991345d988
@ -72,7 +72,7 @@ export const roleCollectionsSchema: ISchema = {
|
|||||||
// rowSelection: {
|
// rowSelection: {
|
||||||
// type: 'checkbox',
|
// type: 'checkbox',
|
||||||
// },
|
// },
|
||||||
useDataSource: '{{ useDataSourceFromRAC }}',
|
useDataSource: '{{ cm.useDataSourceFromRAC }}',
|
||||||
},
|
},
|
||||||
properties: {
|
properties: {
|
||||||
column1: {
|
column1: {
|
||||||
@ -149,7 +149,7 @@ export const roleCollectionsSchema: ISchema = {
|
|||||||
title: 'Cancel',
|
title: 'Cancel',
|
||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
useAction: '{{ useCancelAction }}',
|
useAction: '{{ cm.useCancelAction }}',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
action2: {
|
action2: {
|
||||||
|
@ -100,7 +100,7 @@ export const roleSchema: ISchema = {
|
|||||||
title: 'Cancel',
|
title: 'Cancel',
|
||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
useAction: '{{ useCancelAction }}',
|
useAction: '{{ cm.useCancelAction }}',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
action2: {
|
action2: {
|
||||||
@ -108,7 +108,7 @@ export const roleSchema: ISchema = {
|
|||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
useAction: '{{ useCreateAction }}',
|
useAction: '{{ cm.useCreateAction }}',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -128,7 +128,7 @@ export const roleSchema: ISchema = {
|
|||||||
rowSelection: {
|
rowSelection: {
|
||||||
type: 'checkbox',
|
type: 'checkbox',
|
||||||
},
|
},
|
||||||
useDataSource: '{{ useDataSourceFromRAC }}',
|
useDataSource: '{{ cm.useDataSourceFromRAC }}',
|
||||||
},
|
},
|
||||||
properties: {
|
properties: {
|
||||||
column1: {
|
column1: {
|
||||||
@ -233,7 +233,7 @@ export const roleSchema: ISchema = {
|
|||||||
'x-component': 'Action.Drawer',
|
'x-component': 'Action.Drawer',
|
||||||
'x-decorator': 'Form',
|
'x-decorator': 'Form',
|
||||||
'x-decorator-props': {
|
'x-decorator-props': {
|
||||||
useValues: '{{ useValuesFromRecord }}',
|
useValues: '{{ cm.useValuesFromRecord }}',
|
||||||
},
|
},
|
||||||
title: '编辑角色',
|
title: '编辑角色',
|
||||||
properties: {
|
properties: {
|
||||||
@ -254,7 +254,7 @@ export const roleSchema: ISchema = {
|
|||||||
title: 'Cancel',
|
title: 'Cancel',
|
||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
useAction: '{{ useCancelAction }}',
|
useAction: '{{ cm.useCancelAction }}',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
action2: {
|
action2: {
|
||||||
@ -262,7 +262,7 @@ export const roleSchema: ISchema = {
|
|||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
useAction: '{{ useUpdateAction }}',
|
useAction: '{{ cm.useUpdateAction }}',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -276,7 +276,7 @@ export const roleSchema: ISchema = {
|
|||||||
title: '删除',
|
title: '删除',
|
||||||
'x-component': 'Action.Link',
|
'x-component': 'Action.Link',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
useAction: '{{ useDestroyAction }}',
|
useAction: '{{ cm.useDestroyAction }}',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -23,5 +23,5 @@ export const useRoleResourceValues = (options) => {
|
|||||||
result.run();
|
result.run();
|
||||||
}
|
}
|
||||||
}, [visible, record.usingConfig]);
|
}, [visible, record.usingConfig]);
|
||||||
return;
|
return result;
|
||||||
};
|
};
|
||||||
|
@ -12,7 +12,7 @@ import * as hooks from './action-hooks';
|
|||||||
export const CollectionManagerSchemaComponentProvider: React.FC = (props) => {
|
export const CollectionManagerSchemaComponentProvider: React.FC = (props) => {
|
||||||
return (
|
return (
|
||||||
<SchemaComponentOptions
|
<SchemaComponentOptions
|
||||||
scope={{ ...hooks, useDataSourceFromRAC }}
|
scope={{ cm: { ...hooks, useDataSourceFromRAC } }}
|
||||||
components={{ CollectionField, CollectionFieldProvider, CollectionProvider, ResourceActionProvider }}
|
components={{ CollectionField, CollectionFieldProvider, CollectionProvider, ResourceActionProvider }}
|
||||||
>
|
>
|
||||||
{props.children}
|
{props.children}
|
||||||
|
@ -51,7 +51,7 @@ const getSchema = (schema: IField): ISchema => {
|
|||||||
title: '{{ t("Cancel") }}',
|
title: '{{ t("Cancel") }}',
|
||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
useAction: '{{ useCancelAction }}',
|
useAction: '{{ cm.useCancelAction }}',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
action2: {
|
action2: {
|
||||||
@ -59,7 +59,7 @@ const getSchema = (schema: IField): ISchema => {
|
|||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
useAction: '{{ useCreateActionAndRefreshCM }}',
|
useAction: '{{ cm.useCreateActionAndRefreshCM }}',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -53,7 +53,7 @@ const getSchema = (schema: IField): ISchema => {
|
|||||||
title: '{{ t("Cancel") }}',
|
title: '{{ t("Cancel") }}',
|
||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
useAction: '{{ useCancelAction }}',
|
useAction: '{{ cm.useCancelAction }}',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
action2: {
|
action2: {
|
||||||
@ -61,7 +61,7 @@ const getSchema = (schema: IField): ISchema => {
|
|||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
useAction: '{{ useUpdateActionAndRefreshCM }}',
|
useAction: '{{ cm.useUpdateActionAndRefreshCM }}',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -114,7 +114,7 @@ export const collectionFieldSchema: ISchema = {
|
|||||||
rowSelection: {
|
rowSelection: {
|
||||||
type: 'checkbox',
|
type: 'checkbox',
|
||||||
},
|
},
|
||||||
useDataSource: '{{ useDataSourceFromRAC }}',
|
useDataSource: '{{ cm.useDataSourceFromRAC }}',
|
||||||
},
|
},
|
||||||
properties: {
|
properties: {
|
||||||
column1: {
|
column1: {
|
||||||
@ -176,7 +176,7 @@ export const collectionFieldSchema: ISchema = {
|
|||||||
title: '{{ t("Delete") }}',
|
title: '{{ t("Delete") }}',
|
||||||
'x-component': 'Action.Link',
|
'x-component': 'Action.Link',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
useAction: '{{ useDestroyActionAndRefreshCM }}',
|
useAction: '{{ cm.useDestroyActionAndRefreshCM }}',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -110,7 +110,7 @@ export const collectionSchema: ISchema = {
|
|||||||
title: '{{ t("Cancel") }}',
|
title: '{{ t("Cancel") }}',
|
||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
useAction: '{{ useCancelAction }}',
|
useAction: '{{ cm.useCancelAction }}',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
action2: {
|
action2: {
|
||||||
@ -118,7 +118,7 @@ export const collectionSchema: ISchema = {
|
|||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
useAction: '{{ useCreateActionAndRefreshCM }}',
|
useAction: '{{ cm.useCreateActionAndRefreshCM }}',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -138,7 +138,7 @@ export const collectionSchema: ISchema = {
|
|||||||
rowSelection: {
|
rowSelection: {
|
||||||
type: 'checkbox',
|
type: 'checkbox',
|
||||||
},
|
},
|
||||||
useDataSource: '{{ useDataSourceFromRAC }}',
|
useDataSource: '{{ cm.useDataSourceFromRAC }}',
|
||||||
},
|
},
|
||||||
properties: {
|
properties: {
|
||||||
column1: {
|
column1: {
|
||||||
@ -205,7 +205,7 @@ export const collectionSchema: ISchema = {
|
|||||||
'x-component': 'Action.Drawer',
|
'x-component': 'Action.Drawer',
|
||||||
'x-decorator': 'Form',
|
'x-decorator': 'Form',
|
||||||
'x-decorator-props': {
|
'x-decorator-props': {
|
||||||
useValues: '{{ useValuesFromRecord }}',
|
useValues: '{{ cm.useValuesFromRecord }}',
|
||||||
},
|
},
|
||||||
title: '{{ t("Edit collection") }}',
|
title: '{{ t("Edit collection") }}',
|
||||||
properties: {
|
properties: {
|
||||||
@ -226,7 +226,7 @@ export const collectionSchema: ISchema = {
|
|||||||
title: '{{ t("Cancel") }}',
|
title: '{{ t("Cancel") }}',
|
||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
useAction: '{{ useCancelAction }}',
|
useAction: '{{ cm.useCancelAction }}',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
action2: {
|
action2: {
|
||||||
@ -234,7 +234,7 @@ export const collectionSchema: ISchema = {
|
|||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
useAction: '{{ useUpdateActionAndRefreshCM }}',
|
useAction: '{{ cm.useUpdateActionAndRefreshCM }}',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -248,7 +248,7 @@ export const collectionSchema: ISchema = {
|
|||||||
title: '{{ t("Delete") }}',
|
title: '{{ t("Delete") }}',
|
||||||
'x-component': 'Action.Link',
|
'x-component': 'Action.Link',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
useAction: '{{ useDestroyActionAndRefreshCM }}',
|
useAction: '{{ cm.useDestroyActionAndRefreshCM }}',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import { ISchema } from '@formily/react';
|
import { ISchema } from '@formily/react';
|
||||||
import {
|
import {
|
||||||
AntdSchemaComponentProvider, CollectionManagerProvider,
|
AntdSchemaComponentProvider,
|
||||||
|
CollectionManagerProvider,
|
||||||
SchemaComponent,
|
SchemaComponent,
|
||||||
SchemaComponentProvider
|
SchemaComponentProvider
|
||||||
} from '@nocobase/client';
|
} from '@nocobase/client';
|
||||||
|
@ -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 (
|
||||||
|
<SchemaComponentProvider scope={{ useCloseAction }}>
|
||||||
|
<AntdSchemaComponentProvider>
|
||||||
|
<ActionContext.Provider value={{ visible, setVisible }}>
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
setVisible(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</Button>
|
||||||
|
<SchemaComponent schema={schema} />
|
||||||
|
</ActionContext.Provider>
|
||||||
|
</AntdSchemaComponentProvider>
|
||||||
|
</SchemaComponentProvider>
|
||||||
|
);
|
||||||
|
});
|
@ -39,6 +39,12 @@ Form 也可以作 decorator 存在
|
|||||||
|
|
||||||
<code src="./demos/demo7.tsx"/>
|
<code src="./demos/demo7.tsx"/>
|
||||||
|
|
||||||
|
### DrawerForm
|
||||||
|
|
||||||
|
自由控制弹窗表单(Drawer+Form),并异步填充表单数据
|
||||||
|
|
||||||
|
<code src="./demos/demo8.tsx"/>
|
||||||
|
|
||||||
## API
|
## API
|
||||||
|
|
||||||
属性说明
|
属性说明
|
||||||
|
@ -45,7 +45,7 @@ const createSchema = (collectionName) => {
|
|||||||
rowSelection: {
|
rowSelection: {
|
||||||
type: 'checkbox',
|
type: 'checkbox',
|
||||||
},
|
},
|
||||||
useDataSource: '{{ useDataSourceFromRAC }}',
|
useDataSource: '{{ cm.useDataSourceFromRAC }}',
|
||||||
},
|
},
|
||||||
'x-column-initializer': 'TableColumnInitializer',
|
'x-column-initializer': 'TableColumnInitializer',
|
||||||
properties: {
|
properties: {
|
||||||
|
@ -69,7 +69,7 @@ export const FormActionInitializer = observer((props: any) => {
|
|||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
useAction: '{{ useCreateActionWithoutRefresh }}',
|
useAction: '{{ cm.useCreateActionWithoutRefresh }}',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -104,7 +104,7 @@ export const TableActionInitializer = observer((props: any) => {
|
|||||||
title: '{{ t("Cancel") }}',
|
title: '{{ t("Cancel") }}',
|
||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
useAction: '{{ useCancelAction }}',
|
useAction: '{{ cm.useCancelAction }}',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
action2: {
|
action2: {
|
||||||
@ -112,7 +112,7 @@ export const TableActionInitializer = observer((props: any) => {
|
|||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
useAction: '{{ useCreateAction }}',
|
useAction: '{{ cm.useCreateAction }}',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -130,7 +130,7 @@ export const TableActionInitializer = observer((props: any) => {
|
|||||||
title: '{{ t("Delete") }}',
|
title: '{{ t("Delete") }}',
|
||||||
'x-action': 'destroy',
|
'x-action': 'destroy',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
useAction: '{{ useBulkDestroyAction }}',
|
useAction: '{{ cm.useBulkDestroyAction }}',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -183,7 +183,7 @@ export const TableRecordActionInitializer = observer((props: any) => {
|
|||||||
title: '{{ t("Delete") }}',
|
title: '{{ t("Delete") }}',
|
||||||
'x-action': 'destroy',
|
'x-action': 'destroy',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
useAction: '{{ useDestroyAction }}',
|
useAction: '{{ cm.useDestroyAction }}',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user