mirror of
https://github.com/nocobase/nocobase
synced 2024-11-15 12:56:13 +00:00
feat(client): improve code
This commit is contained in:
parent
118abe1de5
commit
991345d988
@ -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: {
|
||||
|
@ -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 }}',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
@ -23,5 +23,5 @@ export const useRoleResourceValues = (options) => {
|
||||
result.run();
|
||||
}
|
||||
}, [visible, record.usingConfig]);
|
||||
return;
|
||||
return result;
|
||||
};
|
||||
|
@ -12,7 +12,7 @@ import * as hooks from './action-hooks';
|
||||
export const CollectionManagerSchemaComponentProvider: React.FC = (props) => {
|
||||
return (
|
||||
<SchemaComponentOptions
|
||||
scope={{ ...hooks, useDataSourceFromRAC }}
|
||||
scope={{ cm: { ...hooks, useDataSourceFromRAC } }}
|
||||
components={{ CollectionField, CollectionFieldProvider, CollectionProvider, ResourceActionProvider }}
|
||||
>
|
||||
{props.children}
|
||||
|
@ -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 }}',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
@ -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 }}',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
@ -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 }}',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
@ -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 }}',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
@ -1,6 +1,7 @@
|
||||
import { ISchema } from '@formily/react';
|
||||
import {
|
||||
AntdSchemaComponentProvider, CollectionManagerProvider,
|
||||
AntdSchemaComponentProvider,
|
||||
CollectionManagerProvider,
|
||||
SchemaComponent,
|
||||
SchemaComponentProvider
|
||||
} 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"/>
|
||||
|
||||
### DrawerForm
|
||||
|
||||
自由控制弹窗表单(Drawer+Form),并异步填充表单数据
|
||||
|
||||
<code src="./demos/demo8.tsx"/>
|
||||
|
||||
## API
|
||||
|
||||
属性说明
|
||||
|
@ -45,7 +45,7 @@ const createSchema = (collectionName) => {
|
||||
rowSelection: {
|
||||
type: 'checkbox',
|
||||
},
|
||||
useDataSource: '{{ useDataSourceFromRAC }}',
|
||||
useDataSource: '{{ cm.useDataSourceFromRAC }}',
|
||||
},
|
||||
'x-column-initializer': 'TableColumnInitializer',
|
||||
properties: {
|
||||
|
@ -69,7 +69,7 @@ export const FormActionInitializer = observer((props: any) => {
|
||||
'x-component': 'Action',
|
||||
'x-component-props': {
|
||||
type: 'primary',
|
||||
useAction: '{{ useCreateActionWithoutRefresh }}',
|
||||
useAction: '{{ cm.useCreateActionWithoutRefresh }}',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
@ -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 }}',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
@ -183,7 +183,7 @@ export const TableRecordActionInitializer = observer((props: any) => {
|
||||
title: '{{ t("Delete") }}',
|
||||
'x-action': 'destroy',
|
||||
'x-component-props': {
|
||||
useAction: '{{ useDestroyAction }}',
|
||||
useAction: '{{ cm.useDestroyAction }}',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user