feat(client): menu schema insert

This commit is contained in:
chenos 2022-03-06 08:50:06 +08:00
parent e2f4fa32a7
commit b05cfe4b02
2 changed files with 143 additions and 1 deletions

View File

@ -2,6 +2,141 @@ import { ISchema, useField, useFieldSchema } from '@formily/react';
import React from 'react';
import { GeneralSchemaDesigner, SchemaSettings, useDesignable } from '../../../';
const InsertMenuItems = (props) => {
const { dn, refresh } = useDesignable();
const { eventKey, title, insertPosition } = props;
const fieldSchema = useFieldSchema();
const isSubMenu = fieldSchema['x-component'] === 'Menu.SubMenu';
if (!isSubMenu && insertPosition === 'beforeEnd') {
return null;
}
return (
<SchemaSettings.SubMenu eventKey={eventKey} title={title}>
<SchemaSettings.ModalItem
eventKey={`${insertPosition}group`}
title={'分组'}
schema={
{
type: 'object',
title: `${title}分组`,
properties: {
title: {
'x-decorator': 'FormItem',
'x-component': 'Input',
title: '分组名称',
'x-component-props': {},
// description: `原字段标题:${collectionField?.uiSchema?.title}`,
},
icon: {
title: '图标',
'x-component': 'IconPicker',
'x-decorator': 'FormItem',
},
},
} as ISchema
}
onSubmit={({ title, icon }) => {
dn.insertAdjacent(insertPosition, {
type: 'void',
title,
'x-component': 'Menu.SubMenu',
'x-component-props': {
icon,
},
});
}}
/>
<SchemaSettings.ModalItem
eventKey={`${insertPosition}page`}
title={'页面'}
schema={
{
type: 'object',
title: `${title}页面`,
properties: {
title: {
'x-decorator': 'FormItem',
'x-component': 'Input',
title: '菜单项名称',
'x-component-props': {},
// description: `原字段标题:${collectionField?.uiSchema?.title}`,
},
icon: {
title: '图标',
'x-component': 'IconPicker',
'x-decorator': 'FormItem',
},
},
} as ISchema
}
onSubmit={({ title, icon }) => {
dn.insertAdjacent(insertPosition, {
type: 'void',
title,
'x-component': 'Menu.Item',
'x-component-props': {
icon,
},
properties: {
page: {
type: 'void',
'x-component': 'Page',
'x-async': true,
properties: {
grid: {
type: 'void',
'x-component': 'Grid',
'x-initializer': 'BlockInitializers',
properties: {},
},
},
},
},
});
}}
/>
<SchemaSettings.ModalItem
eventKey={`${insertPosition}link`}
title={'链接'}
schema={
{
type: 'object',
title: `${title}链接`,
properties: {
title: {
title: '链接文字',
'x-component': 'Input',
'x-decorator': 'FormItem',
},
href: {
title: '链接',
'x-component': 'Input',
'x-decorator': 'FormItem',
},
icon: {
title: '图标',
'x-component': 'IconPicker',
'x-decorator': 'FormItem',
},
},
} as ISchema
}
onSubmit={({ title, icon, href }) => {
dn.insertAdjacent(insertPosition, {
type: 'void',
title,
'x-component': 'Menu.URL',
'x-component-props': {
icon,
href,
},
});
}}
/>
</SchemaSettings.SubMenu>
);
};
export const MenuDesigner = () => {
const field = useField();
const fieldSchema = useFieldSchema();
@ -54,6 +189,10 @@ export const MenuDesigner = () => {
}}
/>
<SchemaSettings.Divider />
<InsertMenuItems eventKey={'insertbeforeBegin'} title={'在前面插入'} insertPosition={'beforeBegin'} />
<InsertMenuItems eventKey={'insertafterEnd'} title={'在后面插入'} insertPosition={'afterEnd'} />
<InsertMenuItems eventKey={'insertbeforeEnd'} title={'在里面插入'} insertPosition={'beforeEnd'} />
<SchemaSettings.Divider />
<SchemaSettings.Remove />
</GeneralSchemaDesigner>
);

View File

@ -83,8 +83,11 @@ export const SchemaSettings: React.FC<SchemaSettingsProps> & SchemaSettingsNeste
};
SchemaSettings.Item = (props) => {
const { eventKey } = props;
return (
<Menu.Item
key={eventKey}
eventKey={eventKey}
{...props}
onClick={(info) => {
info.domEvent.preventDefault();
@ -103,7 +106,7 @@ SchemaSettings.ItemGroup = (props) => {
};
SchemaSettings.SubMenu = (props) => {
return <Menu.SubMenu {...props}>{props.children || props.title}</Menu.SubMenu>;
return <Menu.SubMenu {...props} />;
};
SchemaSettings.Divider = (props) => {