ruiling/tachybase_todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(client): auto collapse menu items when overflow

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
packages/client/src/route-switch/antd/admin-layout/index.tsx
View File

@ -13,7 +13,7 @@ import {
RemoteSchemaTemplateManagerProvider,
useDocumentTitle,
useRoute,
useSystemSettings,
useSystemSettings
} from '../../../';
const InternalAdminLayout = (props: any) => {
@ -58,36 +58,42 @@ const InternalAdminLayout = (props: any) => {
/>
{/* {result?.data?.data?.title} */}
</div>
<RemoteSchemaComponent
hidden={hidden}
uid={route.uiSchemaUid}
scope={{ onSelect, sideMenuRef, defaultSelectedUid }}
schemaTransform={(data) => {
if (!data) {
return data;
}
data['x-component-props'] = data['x-component-props'] || {};
data['x-component-props']['defaultSelectedUid'] = defaultSelectedUid;
return data;
<div
style={{
width: 'calc(100% - 590px)',
}}
onSuccess={(data) => {
if (defaultSelectedUid) {
const s = findByUid(data?.data, defaultSelectedUid);
if (s) {
setTitle(s.title);
>
<RemoteSchemaComponent
hidden={hidden}
uid={route.uiSchemaUid}
scope={{ onSelect, sideMenuRef, defaultSelectedUid }}
schemaTransform={(data) => {
if (!data) {
return data;
}
return;
}
setHidden(true);
setTimeout(() => setHidden(false), 11);
const s = findMenuItem(data?.data);
if (s) {
setSchema(s);
setTitle(s.title);
history.push(`/admin/${s['x-uid']}`);
}
}}
/>
data['x-component-props'] = data['x-component-props'] || {};
data['x-component-props']['defaultSelectedUid'] = defaultSelectedUid;
return data;
}}
onSuccess={(data) => {
if (defaultSelectedUid) {
const s = findByUid(data?.data, defaultSelectedUid);
if (s) {
setTitle(s.title);
}
return;
}
setHidden(true);
setTimeout(() => setHidden(false), 11);
const s = findMenuItem(data?.data);
if (s) {
setSchema(s);
setTitle(s.title);
history.push(`/admin/${s['x-uid']}`);
}
}}
/>
</div>
</div>
<div style={{ position: 'absolute', top: 0, right: 0 }}>
<PluginManager.Toolbar

118
packages/client/src/schema-component/antd/menu/Menu.tsx
View File

@ -134,6 +134,19 @@ const useSideMenuRef = () => {
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) => {
let {
onSelect,
@ -192,66 +205,61 @@ export const Menu: ComposedMenu = observer((props) => {
<DndContext>
<MenuItemDesignerContext.Provider value={Designer}>
<MenuModeContext.Provider value={mode}>
<div
style={{
width: 'calc(100% - 200px - 390px)',
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
}}
>
<AntdMenu
{...others}
style={{
<AntdMenu
{...others}
style={
{
// width: mode === 'mix' ? '100%' : undefined,
}}
className={css`
.ant-menu-item:hover {
> .ant-menu-title-content > div {
.general-schema-designer {
display: block;
}
}
}
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={(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,
},
},
});
}
}}
mode={mode === 'mix' ? 'horizontal' : mode}
defaultOpenKeys={defaultOpenKeys}
defaultSelectedKeys={defaultSelectedKeys}
></AntdMenu>
{render({ style: { background: 'none' } })}
</div>
} else {
onSelect && onSelect(info);
}
}}
mode={mode === 'mix' ? 'horizontal' : mode}
defaultOpenKeys={defaultOpenKeys}
defaultSelectedKeys={defaultSelectedKeys}
>
<AddMenuItemButton />
{props.children}
</AntdMenu>
{loading
? null
: mode === 'mix' &&