feat(client): menu schema insert
This commit is contained in:
parent
e2f4fa32a7
commit
b05cfe4b02
@ -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>
|
||||
);
|
||||
|
@ -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) => {
|
||||
|
Loading…
Reference in New Issue
Block a user