120 lines
2.9 KiB
TypeScript
120 lines
2.9 KiB
TypeScript
import { observer, useFieldSchema } from '@formily/react';
|
|
import {
|
|
Action,
|
|
ActionBar,
|
|
SchemaComponent,
|
|
SchemaComponentProvider,
|
|
SchemaInitializer,
|
|
useDesignable
|
|
} from '@nocobase/client';
|
|
import { Switch } from 'antd';
|
|
import React from 'react';
|
|
|
|
const ActionInitializerButton = observer((props: any) => {
|
|
return (
|
|
<SchemaInitializer.Button
|
|
insertPosition={'beforeEnd'}
|
|
style={{ marginLeft: 8 }}
|
|
items={[
|
|
{
|
|
title: 'Enable actions',
|
|
children: [
|
|
{
|
|
title: 'Create',
|
|
key: 'create',
|
|
component: 'ActionInitializerItem',
|
|
schema: {
|
|
title: 'Create',
|
|
'x-action': 'posts:create',
|
|
'x-align': 'left',
|
|
},
|
|
},
|
|
{
|
|
title: 'Update',
|
|
key: 'update',
|
|
schema: {
|
|
title: 'Update',
|
|
'x-action': 'posts:update',
|
|
},
|
|
component: 'ActionInitializerItem',
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
>
|
|
Configure actions
|
|
</SchemaInitializer.Button>
|
|
);
|
|
});
|
|
|
|
const useCurrentActionSchema = (action: string) => {
|
|
const fieldSchema = useFieldSchema();
|
|
const { remove } = useDesignable();
|
|
const schema = fieldSchema.reduceProperties((buf, s) => {
|
|
if (s['x-action'] === action) {
|
|
return s;
|
|
}
|
|
return buf;
|
|
});
|
|
return {
|
|
schema,
|
|
exists: !!schema,
|
|
remove() {
|
|
schema && remove(schema);
|
|
},
|
|
};
|
|
};
|
|
|
|
const ActionInitializerItem = (props) => {
|
|
const { title, schema, insert } = props;
|
|
const { exists, remove } = useCurrentActionSchema(schema['x-action']);
|
|
return (
|
|
<SchemaInitializer.Item
|
|
onClick={(info) => {
|
|
if (exists) {
|
|
return remove();
|
|
}
|
|
insert({
|
|
type: 'void',
|
|
'x-component': 'Action',
|
|
...schema,
|
|
});
|
|
}}
|
|
>
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
|
{title} <Switch size={'small'} checked={exists} />
|
|
</div>
|
|
</SchemaInitializer.Item>
|
|
);
|
|
};
|
|
|
|
export default function App() {
|
|
return (
|
|
<SchemaComponentProvider components={{ ActionBar, Action, ActionInitializerItem, ActionInitializerButton }}>
|
|
<SchemaComponent
|
|
schema={{
|
|
type: 'void',
|
|
name: 'page',
|
|
'x-component': 'ActionBar',
|
|
'x-action-initializer': 'ActionInitializerButton',
|
|
properties: {
|
|
action1: {
|
|
type: 'void',
|
|
title: 'Update',
|
|
'x-action': 'posts:update',
|
|
'x-component': 'Action',
|
|
},
|
|
// action2: {
|
|
// type: 'void',
|
|
// title: 'Create',
|
|
// 'x-action': 'posts:create',
|
|
// 'x-align': 'left',
|
|
// 'x-component': 'Action',
|
|
// },
|
|
},
|
|
}}
|
|
/>
|
|
</SchemaComponentProvider>
|
|
);
|
|
}
|