fix(client): auto collapse menu items when overflow

This commit is contained in:
chenos 2022-03-30 14:21:25 +08:00
parent 54ad1535d6
commit cf1fb16638
2 changed files with 98 additions and 84 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) => {
@ -58,6 +58,11 @@ const InternalAdminLayout = (props: any) => {
/> />
{/* {result?.data?.data?.title} */} {/* {result?.data?.data?.title} */}
</div> </div>
<div
style={{
width: 'calc(100% - 590px)',
}}
>
<RemoteSchemaComponent <RemoteSchemaComponent
hidden={hidden} hidden={hidden}
uid={route.uiSchemaUid} uid={route.uiSchemaUid}
@ -89,6 +94,7 @@ const InternalAdminLayout = (props: any) => {
}} }}
/> />
</div> </div>
</div>
<div style={{ position: 'absolute', top: 0, right: 0 }}> <div style={{ position: 'absolute', top: 0, right: 0 }}>
<PluginManager.Toolbar <PluginManager.Toolbar
items={[ items={[

View File

@ -134,6 +134,19 @@ const useSideMenuRef = () => {
const MenuItemDesignerContext = createContext(null); const MenuItemDesignerContext = createContext(null);
const AddMenuItemButton = () => {
const schema = useFieldSchema();
const { render } = useSchemaInitializer(schema['x-initializer']);
const { designable } = useDesignable();
return (
designable && (
<AntdMenu.Item disabled style={{ padding: '0 8px', order: 9999 }}>
{render({ style: { background: 'none' } })}
</AntdMenu.Item>
)
);
};
export const Menu: ComposedMenu = observer((props) => { export const Menu: ComposedMenu = observer((props) => {
let { let {
onSelect, onSelect,
@ -192,19 +205,13 @@ export const Menu: ComposedMenu = observer((props) => {
<DndContext> <DndContext>
<MenuItemDesignerContext.Provider value={Designer}> <MenuItemDesignerContext.Provider value={Designer}>
<MenuModeContext.Provider value={mode}> <MenuModeContext.Provider value={mode}>
<div
style={{
width: 'calc(100% - 200px - 390px)',
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
}}
>
<AntdMenu <AntdMenu
{...others} {...others}
style={{ style={
{
// width: mode === 'mix' ? '100%' : undefined, // width: mode === 'mix' ? '100%' : undefined,
}} }
}
className={css` className={css`
.ant-menu-item:hover { .ant-menu-item:hover {
> .ant-menu-title-content > div { > .ant-menu-title-content > div {
@ -249,9 +256,10 @@ export const Menu: ComposedMenu = observer((props) => {
mode={mode === 'mix' ? 'horizontal' : mode} mode={mode === 'mix' ? 'horizontal' : mode}
defaultOpenKeys={defaultOpenKeys} defaultOpenKeys={defaultOpenKeys}
defaultSelectedKeys={defaultSelectedKeys} defaultSelectedKeys={defaultSelectedKeys}
></AntdMenu> >
{render({ style: { background: 'none' } })} <AddMenuItemButton />
</div> {props.children}
</AntdMenu>
{loading {loading
? null ? null
: mode === 'mix' && : mode === 'mix' &&