fix: menu auto fold

This commit is contained in:
Semmy 2022-03-26 00:21:12 +08:00
parent 1a40f1e365
commit 4620a42932
3 changed files with 61 additions and 58 deletions

View File

@ -13,7 +13,7 @@ import {
RemoteSchemaTemplateManagerProvider, RemoteSchemaTemplateManagerProvider,
useDocumentTitle, useDocumentTitle,
useRoute, useRoute,
useSystemSettings useSystemSettings,
} from '../../../'; } from '../../../';
const InternalAdminLayout = (props: any) => { const InternalAdminLayout = (props: any) => {

View File

@ -192,59 +192,66 @@ export const Menu: ComposedMenu = observer((props) => {
<DndContext> <DndContext>
<MenuItemDesignerContext.Provider value={Designer}> <MenuItemDesignerContext.Provider value={Designer}>
<MenuModeContext.Provider value={mode}> <MenuModeContext.Provider value={mode}>
<AntdMenu <div
{...others}
style={{ style={{
width: mode === 'mix' ? '100%' : undefined, width: 'calc(100% - 200px - 390px)',
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
}} }}
className={css`
.ant-menu-item:hover {
> .ant-menu-title-content > div {
.general-schema-designer {
display: block;
}
}
}
`}
onSelect={(info: any) => {
const s = schema.properties[info.key];
if (mode === 'mix') {
setSideMenuSchema(s);
if (s['x-component'] !== 'Menu.SubMenu') {
onSelect && onSelect(info);
} else {
const menuItemSchema = findMenuItem(s);
if (!menuItemSchema) {
return;
}
// TODO
setLoading(true);
const keys = findKeysByUid(schema, menuItemSchema['x-uid']);
setDefaultSelectedKeys(keys);
setTimeout(() => {
setLoading(false);
}, 100);
onSelect &&
onSelect({
key: menuItemSchema.name,
item: {
props: {
schema: menuItemSchema,
},
},
});
}
} else {
onSelect && onSelect(info);
}
}}
mode={mode === 'mix' ? 'horizontal' : mode}
defaultOpenKeys={defaultOpenKeys}
defaultSelectedKeys={defaultSelectedKeys}
> >
<RecursionField schema={schema} onlyRenderProperties /> <AntdMenu
{render({ style: { background: 'none', marginTop: 7, marginLeft: 8 } })} {...others}
</AntdMenu> style={{
width: mode === 'mix' ? '100%' : undefined,
}}
className={css`
.ant-menu-item:hover {
> .ant-menu-title-content > div {
.general-schema-designer {
display: block;
}
}
}
`}
onSelect={(info: any) => {
const s = schema.properties[info.key];
if (mode === 'mix') {
setSideMenuSchema(s);
if (s['x-component'] !== 'Menu.SubMenu') {
onSelect && onSelect(info);
} else {
const menuItemSchema = findMenuItem(s);
if (!menuItemSchema) {
return;
}
// TODO
setLoading(true);
const keys = findKeysByUid(schema, menuItemSchema['x-uid']);
setDefaultSelectedKeys(keys);
setTimeout(() => {
setLoading(false);
}, 100);
onSelect &&
onSelect({
key: menuItemSchema.name,
item: {
props: {
schema: menuItemSchema,
},
},
});
}
} else {
onSelect && onSelect(info);
}
}}
mode={mode === 'mix' ? 'horizontal' : mode}
defaultOpenKeys={defaultOpenKeys}
defaultSelectedKeys={defaultSelectedKeys}
></AntdMenu>
{render({ style: { background: 'none' } })}
</div>
{loading {loading
? null ? null
: mode === 'mix' && : mode === 'mix' &&

View File

@ -13,7 +13,7 @@ import {
SchemaComponentOptions, SchemaComponentOptions,
useActionContext, useActionContext,
useAPIClient, useAPIClient,
useCollection useCollection,
} from '..'; } from '..';
import { useSchemaTemplateManager } from '../schema-templates'; import { useSchemaTemplateManager } from '../schema-templates';
import { useBlockTemplateContext } from '../schema-templates/BlockTemplate'; import { useBlockTemplateContext } from '../schema-templates/BlockTemplate';
@ -182,11 +182,11 @@ SchemaSettings.Template = (props) => {
}; };
SchemaSettings.Item = (props) => { SchemaSettings.Item = (props) => {
const { eventKey } = props; let { eventKey } = props;
return ( return (
<Menu.Item <Menu.Item
key={eventKey} key={eventKey}
eventKey={eventKey} eventKey={eventKey as any}
{...props} {...props}
onClick={(info) => { onClick={(info) => {
info.domEvent.preventDefault(); info.domEvent.preventDefault();
@ -200,10 +200,6 @@ SchemaSettings.Item = (props) => {
); );
}; };
SchemaSettings.ItemGroup = (props) => {
return <Menu.ItemGroup {...props}>{props.children || props.title}</Menu.ItemGroup>;
};
SchemaSettings.SubMenu = (props) => { SchemaSettings.SubMenu = (props) => {
return <Menu.SubMenu {...props} />; return <Menu.SubMenu {...props} />;
}; };