fix(client): auto collapse menu items when overflow
This commit is contained in:
parent
54ad1535d6
commit
cf1fb16638
@ -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={[
|
||||||
|
@ -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' &&
|
||||||
|
Loading…
Reference in New Issue
Block a user