Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Aug 12, 2025. It is now read-only.

Commit 6a9f648

Browse files
committed
feat: appLayout add hideNav showNav in context
feat: appLayout add collapsed in context
1 parent 447f041 commit 6a9f648

File tree

5 files changed

+47
-12
lines changed

5 files changed

+47
-12
lines changed

‎packages/ui/xconsole-rc-app-layout/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@alicloud/xconsole-rc-app-layout",
3-
"version": "2.4.14",
3+
"version": "2.5.0",
44
"main": "lib/index.js",
55
"module": "es/index.js",
66
"license": "MIT",

‎packages/ui/xconsole-rc-app-layout/src/AppLayout.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const XConsoleAppLayout: React.FunctionComponent<IProp> = (props: IProp) => {
2222

2323
const [title, setTitle] = useState(sidebar.title || 'XConsole');
2424
const [navs, setNavs] = useState(sidebar.navs || []);
25+
const [navVisible, setNavVisible] = useState(consoleMenu.visible ?? true);
2526

2627
if (
2728
noticeFlag === false &&
@@ -60,9 +61,20 @@ const XConsoleAppLayout: React.FunctionComponent<IProp> = (props: IProp) => {
6061
consoleMenu?.collapsedPath || []
6162
);
6263

64+
const hideNav = useCallback(() => {
65+
setNavVisible(false);
66+
}, []);
67+
68+
const showNav = useCallback(() => {
69+
setNavVisible(true);
70+
}, []);
71+
6372
return (
6473
<Context.Provider
6574
value={{
75+
collapsed,
76+
hideNav,
77+
showNav,
6678
sidebar: {
6779
title,
6880
navs,
@@ -82,6 +94,7 @@ const XConsoleAppLayout: React.FunctionComponent<IProp> = (props: IProp) => {
8294
consoleMenu={consoleMenu}
8395
location={location}
8496
menuParams={menuParams}
97+
visible={navVisible}
8598
>
8699
{children}
87100
</Aside>

‎packages/ui/xconsole-rc-app-layout/src/Aside.tsx

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@ import { XConsoleTheme } from '@alicloud/console-components-console-menu';
44
import Nav from './Nav';
55
import Context from './Context';
66
import { isPathMatch } from './utils/index';
7-
import { IProp, PathRule } from './types/index';
8-
import useCollapsed from './hooks/useCollapsed';
7+
import { IAsideProp, PathRule } from './types/index';
8+
// import useCollapsed from './hooks/useCollapsed';
9+
10+
export let XConsoleAppLayoutHook: any;
911

1012
const computeSidebarVisibleStatus = (
1113
pathname: string,
@@ -27,16 +29,17 @@ const computeSidebarVisibleStatus = (
2729
return sidebarVisible;
2830
};
2931

30-
const XConsoleAppLayoutAside: React.FC<Partial<IProp>> = (
31-
props: Partial<IProp>
32+
const XConsoleAppLayoutAside: React.FC<Partial<IAsideProp>> = (
33+
props
3234
) => {
3335
const {
3436
consoleMenu = {},
3537
location: { pathname },
3638
children,
3739
menuParams,
3840
collapsed,
39-
onNavCollapseTriggerClick
41+
onNavCollapseTriggerClick,
42+
visible
4043
} = props;
4144

4245
const { sidebar } = useContext(Context);
@@ -47,7 +50,7 @@ const XConsoleAppLayoutAside: React.FC<Partial<IProp>> = (
4750
defaultOpen = [],
4851
} = consoleMenu;
4952

50-
const sidebarVisible = computeSidebarVisibleStatus(
53+
const shouldVisibleInCurrentPath = computeSidebarVisibleStatus(
5154
pathname,
5255
displayPath,
5356
notDisplayPath,
@@ -61,7 +64,7 @@ const XConsoleAppLayoutAside: React.FC<Partial<IProp>> = (
6164
<XConsoleTheme>
6265
<AppLayout
6366
adjustHeight={50}
64-
nav={sidebarVisible ? <Nav {...sidebar} currentPath={pathname} menuParams={menuParams}/> : null}
67+
nav={shouldVisibleInCurrentPath&&visible ? <Nav {...sidebar} currentPath={pathname} menuParams={menuParams}/> : null}
6568
navCollapsed={collapsed}
6669
onNavCollapseTriggerClick={onNavCollapseTriggerClick}
6770
>

‎packages/ui/xconsole-rc-app-layout/src/Context.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,22 @@ import { ISidebarConfig, INavConfig } from './types/index';
44

55
interface IContextValue {
66
sidebar: Partial<ISidebarConfig>;
7+
collapsed?: boolean;
78
setTitle: (title: string) => void;
89
setNavs: (navs: INavConfig[]) => void;
910
setCollapsed: (collapsed: boolean) => void;
11+
hideNav: () => void;
12+
showNav: () => void;
1013
onNavTriggerClick: (fn: () => void) => (() => void);
1114
}
1215

1316
export default React.createContext<IContextValue>({
1417
sidebar: {},
18+
collapsed: undefined,
1519
setTitle: (title: string) => {/* nothing */},
1620
setNavs: (navs: INavConfig[]) => {/* nothing */},
1721
setCollapsed: (collapsed: boolean) => {/* nothing */},
22+
hideNav: () => {/* nothing */},
23+
showNav: () => {/* nothing */},
1824
onNavTriggerClick: (fn: () => void) => () => {/* nothing */},
1925
});

‎packages/ui/xconsole-rc-app-layout/src/types/index.ts

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,22 @@ export interface INavConfig extends IRoutableItemDescriptor {
1616
}
1717

1818
export interface IConsoleMenuConfig {
19-
// 展示侧边栏的路径设置
20-
// 当 displayPath 设置时,不论是否列表为空,侧边栏默认对所有页面都会隐藏
21-
// 此时 notDisplayPath 的设置将不生效
22-
// 即设置了 displayPath 时, notDisplayPath 就不起作用了
19+
/**
20+
* 是否展示侧边栏,优先级高于 displayPath 和 notDisplayPath
21+
* 一般用于手动控制侧边栏状态
22+
*/
23+
visible?: boolean;
2324

25+
/**
26+
* 展示侧边栏的路径设置,优先级高于 notDisplayPath
27+
* 当 displayPath 设置时,不论是否列表为空,侧边栏默认对所有页面都会隐藏
28+
* 此时 notDisplayPath 的设置将不生效
29+
*/
2430
displayPath?: string[];
2531

32+
/**
33+
* 不展示侧边栏的路径设置,优先级低于 displayPath
34+
*/
2635
notDisplayPath?: PathRule;
2736

2837
/**
@@ -82,6 +91,10 @@ export interface IProp extends RouteComponentProps {
8291
onNavCollapseTriggerClick?: any;
8392
}
8493

94+
export interface IAsideProp extends IProp {
95+
visible?: boolean;
96+
}
97+
8598
export interface IMenuProps {
8699
header?: string;
87100
title?: string;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /