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 React from 'react';
|
||||||
import { GeneralSchemaDesigner, SchemaSettings, useDesignable } from '../../../';
|
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 = () => {
|
export const MenuDesigner = () => {
|
||||||
const field = useField();
|
const field = useField();
|
||||||
const fieldSchema = useFieldSchema();
|
const fieldSchema = useFieldSchema();
|
||||||
@ -54,6 +189,10 @@ export const MenuDesigner = () => {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<SchemaSettings.Divider />
|
<SchemaSettings.Divider />
|
||||||
|
<InsertMenuItems eventKey={'insertbeforeBegin'} title={'在前面插入'} insertPosition={'beforeBegin'} />
|
||||||
|
<InsertMenuItems eventKey={'insertafterEnd'} title={'在后面插入'} insertPosition={'afterEnd'} />
|
||||||
|
<InsertMenuItems eventKey={'insertbeforeEnd'} title={'在里面插入'} insertPosition={'beforeEnd'} />
|
||||||
|
<SchemaSettings.Divider />
|
||||||
<SchemaSettings.Remove />
|
<SchemaSettings.Remove />
|
||||||
</GeneralSchemaDesigner>
|
</GeneralSchemaDesigner>
|
||||||
);
|
);
|
||||||
|
@ -83,8 +83,11 @@ export const SchemaSettings: React.FC<SchemaSettingsProps> & SchemaSettingsNeste
|
|||||||
};
|
};
|
||||||
|
|
||||||
SchemaSettings.Item = (props) => {
|
SchemaSettings.Item = (props) => {
|
||||||
|
const { eventKey } = props;
|
||||||
return (
|
return (
|
||||||
<Menu.Item
|
<Menu.Item
|
||||||
|
key={eventKey}
|
||||||
|
eventKey={eventKey}
|
||||||
{...props}
|
{...props}
|
||||||
onClick={(info) => {
|
onClick={(info) => {
|
||||||
info.domEvent.preventDefault();
|
info.domEvent.preventDefault();
|
||||||
@ -103,7 +106,7 @@ SchemaSettings.ItemGroup = (props) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
SchemaSettings.SubMenu = (props) => {
|
SchemaSettings.SubMenu = (props) => {
|
||||||
return <Menu.SubMenu {...props}>{props.children || props.title}</Menu.SubMenu>;
|
return <Menu.SubMenu {...props} />;
|
||||||
};
|
};
|
||||||
|
|
||||||
SchemaSettings.Divider = (props) => {
|
SchemaSettings.Divider = (props) => {
|
||||||
|
Loading…
Reference in New Issue
Block a user