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,
useDocumentTitle,
useRoute,
useSystemSettings
useSystemSettings,
} from '../../../';
const InternalAdminLayout = (props: any) => {

View File

@ -192,59 +192,66 @@ export const Menu: ComposedMenu = observer((props) => {
<DndContext>
<MenuItemDesignerContext.Provider value={Designer}>
<MenuModeContext.Provider value={mode}>
<AntdMenu
{...others}
<div
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 />
{render({ style: { background: 'none', marginTop: 7, marginLeft: 8 } })}
</AntdMenu>
<AntdMenu
{...others}
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
? null
: mode === 'mix' &&

View File

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