Skip to content

X
xiaomai-cloud-class-web
Commit d8557afd by maolipeng
Options

Merge branch 'feature/maolipeng/youhua' into feature/maolipeng/20210610/zuhuyouhua 

# Conflicts:
#	yarn.lock
parents 08b590b6 4fa775ed
Showing with 40 additions and 18 deletions
src/modules/root/Menu.tsx
import React, { useContext, useEffect, useRef, useState } from 'react'; import React, { Key, useContext, useEffect, useRef, useState } from 'react';
import { import {
withRouter, withRouter,
} from 'react-router-dom'; } from 'react-router-dom';
...@@ -129,6 +129,7 @@ function Aside(props: any) { ...@@ -129,6 +129,7 @@ function Aside(props: any) {
const ctx: any = useContext(XMContext); const ctx: any = useContext(XMContext);
const [selectKey, setSelectKey] = useState(); const [selectKey, setSelectKey] = useState();
const [openKeys, setOpenKeys] = useState(['']); const [openKeys, setOpenKeys] = useState(['']);
const [lastOpenKeys, setLastOpenKeys] = useState(['']);
const [topLogoUrl, setTopLogoUrl] = useState("") const [topLogoUrl, setTopLogoUrl] = useState("")
const [collapsed, setCollapsed] = useState(false) const [collapsed, setCollapsed] = useState(false)
const rootSubmenuKeys = _.pluck(menuList, 'groupCode'); const rootSubmenuKeys = _.pluck(menuList, 'groupCode');
...@@ -138,6 +139,7 @@ function Aside(props: any) { ...@@ -138,6 +139,7 @@ function Aside(props: any) {
if (link.indexOf(item.link) !== -1) { if (link.indexOf(item.link) !== -1) {
setSelectKey(item.groupCode); setSelectKey(item.groupCode);
setOpenKeys([]) setOpenKeys([])
setLastOpenKeys([])
} else if (item.children) { } else if (item.children) {
item.children.map((_item: any, _index: any) => { item.children.map((_item: any, _index: any) => {
if (link.indexOf(_item.link) !== -1) { if (link.indexOf(_item.link) !== -1) {
...@@ -166,30 +168,45 @@ function Aside(props: any) { ...@@ -166,30 +168,45 @@ function Aside(props: any) {
} }
function toggleMenu(item: any) { function toggleMenu(item: any) {
window.RCHistory.push(item.link) window.RCHistory.push(item.link)
// if (!menuType) { if (!menuType) {
// setOpenKeys([]) setOpenKeys([])
// } }
} }
function onOpenChange(key: any) { function onOpenChange(key: Key[]) {
if (openKeys.includes(key)) { if (typeof key === "string") {
setOpenKeys([]); if (openKeys.includes(key)) {
} else { setOpenKeys([]);
setOpenKeys([key]); setLastOpenKeys([]);
} else {
setOpenKeys([key]);
setLastOpenKeys([key])
}
} }
} }
function onOpenChangeForHover(key: any) {
function onOpenChangeForHover(key: Key[]) {
if (menuType) { if (menuType) {
return return
} }
if (openKeys.includes(key)) { if (typeof key === "string") {
setOpenKeys([]); if (openKeys.includes(key)) {
} else { setOpenKeys([]);
setOpenKeys([key]); setLastOpenKeys([]);
} else {
setOpenKeys([key]);
setLastOpenKeys([key])
}
} }
} }
function handleMenu() { function handleMenu() {
handleMenuType(); handleMenuType();
setCollapsed(!collapsed) setCollapsed(!collapsed)
// if (!collapsed) {
// setOpenKeys([])
// } else {
// setOpenKeys(lastOpenKeys)
// }
} }
return ( return (
...@@ -226,7 +243,10 @@ function Aside(props: any) { ...@@ -226,7 +243,10 @@ function Aside(props: any) {
<div className="nav"> <div className="nav">
<Menu <Menu
style={{ minHeight: "100%", background: '#0E1935' }} style={menuType ? { minHeight: "100%", background: '#0E1935' }:{minHeight: "100%", background: '#0E1935',width:"56px" }}
selectedKeys={selectKey}
openKeys={openKeys}
onOpenChange={onOpenChange}
inlineCollapsed={collapsed} inlineCollapsed={collapsed}
mode={menuType ? "inline" : "vertical"} mode={menuType ? "inline" : "vertical"}
> >
...@@ -239,14 +259,16 @@ function Aside(props: any) { ...@@ -239,14 +259,16 @@ function Aside(props: any) {
return <SubMenu return <SubMenu
key={item.groupCode} key={item.groupCode}
style={{ marginTop: 0 }} style={{ marginTop: 0 }}
title={<div><img src={item.img} className="icon-img"></img><span>{item.groupName}</span></div> } icon={<img src={item.img} className="icon-img"></img>}
onTitleClick={() => onOpenChange(item.groupCode)}> title={menuType ? <span>{item.groupName}</span> : ""}
onTitleClick={() => onOpenChange(item.groupCode)}
>
{ {
item.children.map((_item: any, _index: any) => { item.children.map((_item: any, _index: any) => {
if (ctx.xmState.storeUserPermissionList.indexOf(_item.groupCode) === -1) { if (ctx.xmState.storeUserPermissionList.indexOf(_item.groupCode) === -1) {
return null; return null;
} }
return <Menu.Item onClick={() => { toggleMenu(_item) }} style={{ marginTop: 0 }} key={_item.groupCode + index + _index}> return <Menu.Item onClick={() => { toggleMenu(_item) }} style={{ marginTop: 0 }} key={_item.groupCode + index + _index} >
<span className="name">{_item.groupName}</span> <span className="name">{_item.groupName}</span>
</Menu.Item> </Menu.Item>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment