feat(client): menu schema settings
This commit is contained in:
parent
0c48463e53
commit
e2f4fa32a7
packages/client/src/schema-component/antd
@ -65,7 +65,6 @@ export const IconPicker = connect(
|
|||||||
mapProps((props, field) => {
|
mapProps((props, field) => {
|
||||||
return {
|
return {
|
||||||
...props,
|
...props,
|
||||||
value: props.type,
|
|
||||||
suffix: <span>{field?.['loading'] || field?.['validating'] ? <LoadingOutlined /> : props.suffix}</span>,
|
suffix: <span>{field?.['loading'] || field?.['validating'] ? <LoadingOutlined /> : props.suffix}</span>,
|
||||||
};
|
};
|
||||||
}),
|
}),
|
||||||
|
@ -1,23 +1,58 @@
|
|||||||
import { useField } from '@formily/react';
|
import { ISchema, useField, useFieldSchema } from '@formily/react';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { GeneralSchemaDesigner, SchemaSettings } from '../../../';
|
import { GeneralSchemaDesigner, SchemaSettings, useDesignable } from '../../../';
|
||||||
|
|
||||||
export const MenuDesigner = () => {
|
export const MenuDesigner = () => {
|
||||||
const field = useField();
|
const field = useField();
|
||||||
|
const fieldSchema = useFieldSchema();
|
||||||
|
const { dn, refresh } = useDesignable();
|
||||||
return (
|
return (
|
||||||
<GeneralSchemaDesigner>
|
<GeneralSchemaDesigner>
|
||||||
<SchemaSettings.Popup
|
<SchemaSettings.ModalItem
|
||||||
schema={{
|
title={'编辑'}
|
||||||
type: 'void',
|
schema={
|
||||||
'x-component': 'Action.Modal',
|
{
|
||||||
'x-decorator': 'Form',
|
type: 'object',
|
||||||
'x-component-props': {
|
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
|
||||||
|
}
|
||||||
|
initialValues={{
|
||||||
|
title: field.title,
|
||||||
|
icon: field.componentProps.icon,
|
||||||
}}
|
}}
|
||||||
>
|
onSubmit={({ title, icon }) => {
|
||||||
编辑
|
const schema = {
|
||||||
</SchemaSettings.Popup>
|
['x-uid']: fieldSchema['x-uid'],
|
||||||
|
};
|
||||||
|
if (title) {
|
||||||
|
fieldSchema.title = title;
|
||||||
|
field.title = title;
|
||||||
|
schema['title'] = title;
|
||||||
|
refresh();
|
||||||
|
}
|
||||||
|
field.componentProps.icon = icon;
|
||||||
|
schema['x-component-props'] = { icon };
|
||||||
|
fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
|
||||||
|
fieldSchema['x-component-props']['icon'] = icon;
|
||||||
|
dn.emit('patch', {
|
||||||
|
schema,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
<SchemaSettings.Divider />
|
<SchemaSettings.Divider />
|
||||||
<SchemaSettings.Remove />
|
<SchemaSettings.Remove />
|
||||||
</GeneralSchemaDesigner>
|
</GeneralSchemaDesigner>
|
||||||
|
@ -311,12 +311,13 @@ export const Menu: ComposedMenu = observer((props) => {
|
|||||||
Menu.Item = observer((props) => {
|
Menu.Item = observer((props) => {
|
||||||
const { icon, ...others } = props;
|
const { icon, ...others } = props;
|
||||||
const schema = useFieldSchema();
|
const schema = useFieldSchema();
|
||||||
|
const field = useField();
|
||||||
const Designer = useContext(MenuItemDesignerContext);
|
const Designer = useContext(MenuItemDesignerContext);
|
||||||
return (
|
return (
|
||||||
<AntdMenu.Item {...others} key={schema.name} eventKey={schema.name} schema={schema}>
|
<AntdMenu.Item {...others} key={schema.name} eventKey={schema.name} schema={schema}>
|
||||||
<SortableItem className={designerCss}>
|
<SortableItem className={designerCss}>
|
||||||
<Icon type={icon} style={{ marginRight: 5 }} />
|
<Icon type={icon} style={{ marginRight: 5 }} />
|
||||||
{schema.title}
|
{field.title}
|
||||||
<Designer />
|
<Designer />
|
||||||
</SortableItem>
|
</SortableItem>
|
||||||
</AntdMenu.Item>
|
</AntdMenu.Item>
|
||||||
@ -340,7 +341,7 @@ Menu.URL = observer((props) => {
|
|||||||
>
|
>
|
||||||
<SortableItem className={designerCss}>
|
<SortableItem className={designerCss}>
|
||||||
<Icon style={{ marginRight: 5 }} type={icon} />
|
<Icon style={{ marginRight: 5 }} type={icon} />
|
||||||
{schema.title}
|
{field.title}
|
||||||
<Designer />
|
<Designer />
|
||||||
</SortableItem>
|
</SortableItem>
|
||||||
</AntdMenu.Item>
|
</AntdMenu.Item>
|
||||||
|
Loading…
Reference in New Issue
Block a user