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 6c2eaf1

Browse files
committed
chore: update app-layout deps
1 parent 41fc373 commit 6c2eaf1

File tree

14 files changed

+245
-277
lines changed

14 files changed

+245
-277
lines changed
Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@alicloud/xconsole-rc-app-layout",
3-
"version": "2.5.1",
3+
"version": "2.5.2",
44
"main": "lib/index.js",
55
"module": "es/index.js",
66
"license": "MIT",
@@ -12,31 +12,28 @@
1212
"bugs": {
1313
"url": "https://github.com/aliyun/alibabacloud-console-design/issues"
1414
},
15-
"author": {
16-
"name": "Boelroy",
17-
"email": "boelroy@live.com",
18-
"url": "https://github.com/Boelroy"
19-
},
2015
"devDependencies": {
2116
"@alicloud/console-components": "alpha",
2217
"@alicloud/console-toolkit-cli": "^1.0.0",
2318
"@alicloud/console-toolkit-preset-wind-component": "^1.0.0",
19+
"@types/history": "^4.7.0",
20+
"@types/lodash-es": "^4.17.12",
2421
"@types/lodash.foreach": "^4.5.6",
2522
"@types/lodash.get": "^4.4.6",
2623
"@types/lodash.isundefined": "^3.0.6",
2724
"@types/lodash.map": "^4.6.13",
2825
"@types/react": "^16.0.0",
2926
"@types/react-dom": "^16.0.0",
3027
"@types/react-router": "^5.0.0",
28+
"@types/react-router-dom": "^5.0.0",
3129
"babel-loader": "^8.0.5",
32-
"dva": "2.6.0-beta.20",
3330
"history": "^4.9.0",
3431
"jest": "^24.2.0-alpha.0",
3532
"js-cookie": "^2.2.0",
3633
"less": "^3.0.0-alpha.3",
37-
"prop-types": "^15.7.2",
3834
"react": "^16.8.6",
3935
"react-dom": "^16.8.6",
36+
"react-router-dom": "^5.0.0",
4037
"styled-components": "^4.2.1",
4138
"typescript": "^4.0.0"
4239
},
@@ -49,19 +46,17 @@
4946
"clean": "rm -rf es build lib yarn.lock"
5047
},
5148
"peerDependencies": {
52-
"dva": "2.6.0-beta.20",
53-
"prop-types": "^15.7.2",
54-
"react": "^16.8.6",
55-
"react-dom": "^16.8.6",
56-
"styled-components": "^4.2.1"
49+
"moment": "^2.24.0",
50+
"react": ">=16.8.6",
51+
"react-dom": ">=16.8.6",
52+
"react-router-dom": "^5.0.0",
53+
"styled-components": ">=4.2.1"
5754
},
5855
"dependencies": {
59-
"@alicloud/console-components-app-layout": "2.0.0-alpha.4",
60-
"@alicloud/console-components-console-menu": "alpha",
61-
"lodash": "^4.17.4",
62-
"lodash.isundefined": "^3.0.1",
56+
"@alicloud/console-components-app-layout": "^1.1.4",
57+
"@alicloud/console-components-console-menu": "^1.2.12",
58+
"lodash-es": "^4.17.21",
6359
"moment": "^2.24.0",
6460
"tslib": "^2.0.0"
65-
},
66-
"gitHead": "a4fa53aa90b996e0a144c4fa010590763436de34"
61+
}
6762
}
Lines changed: 72 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,92 @@
1-
import React, { useCallback, useEffect, useState } from 'react';
2-
import isFunction from 'lodash/isFunction';
3-
import { withRouter } from 'dva/router';
4-
import { IProp, ISidebarConfig } from './types/index';
5-
import Context from './Context';
6-
import Aside from './Aside';
7-
import useCollapsed from './hooks/useCollapsed';
8-
9-
let noticeFlag = false;
1+
import React, { useContext } from 'react';
2+
import AppLayout from '@alicloud/console-components-app-layout';
3+
import { XConsoleTheme } from '@alicloud/console-components-console-menu';
104

11-
const XConsoleAppLayout: React.FunctionComponent<IProp> = (props: IProp) => {
12-
const { sidebar: rawSidebar, consoleMenu, location, children, menuParams } = props;
13-
const { pathname } = location;
5+
import Nav from './Nav';
6+
import Context from './Context';
7+
import { isPathMatch } from './utils/index';
8+
import type { IAsideProps, PathRule } from './types/index';
149

15-
let sidebar: ISidebarConfig=null;
10+
exportlet XConsoleAppLayoutHook: any;
1611

17-
if (isFunction(rawSidebar)) {
18-
sidebar = (rawSidebar as Function)(location);
12+
/**
13+
* 计算侧边栏展示状态
14+
* @param pathname
15+
* @param displayPath
16+
* @param notDisplayPath
17+
* @param invisiblePaths
18+
* @returns
19+
*/
20+
const computeSidebarVisibleStatus = (
21+
pathname: string,
22+
displayPath?: PathRule,
23+
notDisplayPath?: PathRule,
24+
invisiblePaths?: PathRule,
25+
): boolean => {
26+
let sidebarVisible = true;
27+
if (typeof displayPath !== 'undefined') {
28+
sidebarVisible = isPathMatch(pathname, displayPath);
1929
} else {
20-
sidebar = rawSidebar as ISidebarConfig;
21-
}
22-
23-
const [title, setTitle] = useState(sidebar.title || 'XConsole');
24-
const [navs, setNavs] = useState(sidebar.navs || []);
25-
const [navVisible, setNavVisible] = useState(consoleMenu?.visible ?? true);
26-
27-
if (
28-
noticeFlag === false &&
29-
(typeof sidebar.defaultOpenKeys !== 'undefined' ||
30-
typeof sidebar.collapsedKeys !== 'undefined' ||
31-
typeof sidebar.invisiblePaths !== 'undefined')
32-
) {
33-
noticeFlag = true;
34-
console.warn(
35-
'[xconsole rc-app-layout] sidebar.js 中关于 defaultOpenKeys collapsedKeys invisiblePaths 的配置不再推荐使用,请在 appConfig.js 中配置 consoleMenu, 具体配置信息及字段说明请前往官网查看 【开发指南】 文档。'
30+
sidebarVisible = !isPathMatch(
31+
pathname,
32+
notDisplayPath || invisiblePaths || [],
3633
);
3734
}
35+
return sidebarVisible;
36+
};
37+
38+
const XConsoleAppLayoutAside: React.FC<Partial<IAsideProps>> = (
39+
props,
40+
) => {
41+
const {
42+
consoleMenu = {},
43+
location,
44+
children,
45+
menuParams,
46+
collapsed,
47+
onNavCollapseTriggerClick,
48+
visible,
49+
adjustHeight,
50+
style,
51+
} = props;
52+
const { pathname = '' } = location || {};
3853

39-
useEffect(() => {
40-
if (sidebar.title !== title) {
41-
setTitle(sidebar.title);
42-
}
43-
if (JSON.stringify(sidebar.navs) !== JSON.stringify(navs)) {
44-
setTitle(sidebar.title);
45-
}
46-
setNavs(sidebar.navs);
47-
}, [JSON.stringify(sidebar)])
54+
const { sidebar } = useContext(Context);
4855

49-
const onNavTriggerClick = useCallback((fn: () => void) => {
50-
const cb = (e) => {
51-
if (e.data.type === 'xconsole:on_nav_click') {
52-
fn();
53-
}
54-
};
55-
window.addEventListener('message', cb);
56-
return () => window.removeEventListener('message', cb);
57-
}, []);
56+
const {
57+
displayPath,
58+
notDisplayPath,
59+
defaultOpen = [],
60+
} = consoleMenu;
5861

59-
const { collapsed, setCollapsed, onNavCollapseTriggerClick }=useCollapsed(
62+
const shouldVisibleInCurrentPath=computeSidebarVisibleStatus(
6063
pathname,
61-
consoleMenu?.collapsedPath || []
64+
displayPath,
65+
notDisplayPath,
66+
sidebar.invisiblePaths,
6267
);
6368

64-
const hideNav = useCallback(() => {
65-
setNavVisible(false);
66-
}, []);
67-
68-
const showNav = useCallback(() => {
69-
setNavVisible(true);
70-
}, []);
69+
// 合并 sidebar 的 defaultOpenKeys
70+
sidebar.defaultOpenKeys = defaultOpen;
7171

7272
return (
73-
<Context.Provider
74-
value={{
75-
collapsed,
76-
hideNav,
77-
showNav,
78-
sidebar: {
79-
title,
80-
navs,
81-
collapsedKeys: [],
82-
onItemClick: sidebar.onItemClick,
83-
onOpen: sidebar.onOpen,
84-
},
85-
setTitle,
86-
setNavs,
87-
setCollapsed,
88-
onNavTriggerClick
89-
}}
90-
>
91-
<Aside
92-
collapsed={collapsed}
73+
<XConsoleTheme>
74+
<AppLayout
75+
adjustHeight={adjustHeight || 50}
76+
nav={
77+
shouldVisibleInCurrentPath && visible ?
78+
<Nav {...sidebar} currentPath={pathname} menuParams={menuParams} />
79+
:
80+
null
81+
}
82+
navCollapsed={collapsed}
9383
onNavCollapseTriggerClick={onNavCollapseTriggerClick}
94-
consoleMenu={consoleMenu}
95-
location={location}
96-
menuParams={menuParams}
97-
visible={navVisible}
84+
style={style}
9885
>
9986
{children}
100-
</Aside>
101-
</Context.Provider>
87+
</AppLayout>
88+
</XConsoleTheme>
10289
);
10390
};
10491

105-
const AppLayout = withRouter(XConsoleAppLayout);
106-
107-
export default AppLayout;
92+
export default XConsoleAppLayoutAside;
Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import React, { useCallback, useEffect, useState } from 'react';
2+
import { isFunction } from 'lodash-es';
3+
import { withRouter } from 'react-router-dom';
4+
5+
import { IProps, ISidebarConfig } from './types/index';
6+
import Context from './Context';
7+
import AppLayout from './AppLayout';
8+
import useCollapsed from './hooks/useCollapsed';
9+
10+
let noticeFlag = false;
11+
12+
const XConsoleAppLayout = (props: IProps) => {
13+
const { sidebar: rawSidebar, consoleMenu, location, children, menuParams, style } = props;
14+
const { pathname } = location;
15+
16+
let sidebar: ISidebarConfig;
17+
18+
if (isFunction(rawSidebar)) {
19+
sidebar = (rawSidebar as Function)(location);
20+
} else {
21+
sidebar = rawSidebar as ISidebarConfig;
22+
}
23+
24+
const [title, setTitle] = useState(sidebar.title || 'XConsole');
25+
const [navs, setNavs] = useState(sidebar.navs || []);
26+
const [navVisible, setNavVisible] = useState(consoleMenu?.visible ?? true);
27+
28+
if (
29+
noticeFlag === false &&
30+
(typeof sidebar.defaultOpenKeys !== 'undefined' ||
31+
typeof sidebar.collapsedKeys !== 'undefined' ||
32+
typeof sidebar.invisiblePaths !== 'undefined')
33+
) {
34+
noticeFlag = true;
35+
console.warn(
36+
'[xconsole rc-app-layout] sidebar.js 中关于 defaultOpenKeys collapsedKeys invisiblePaths 的配置不再推荐使用,请在 appConfig.js 中配置 consoleMenu, 具体配置信息及字段说明请前往官网查看 【开发指南】 文档。',
37+
);
38+
}
39+
40+
useEffect(() => {
41+
if (sidebar.title !== title) {
42+
setTitle(sidebar.title);
43+
}
44+
if (JSON.stringify(sidebar.navs) !== JSON.stringify(navs)) {
45+
setTitle(sidebar.title);
46+
}
47+
setNavs(sidebar.navs);
48+
}, [JSON.stringify(sidebar)]);
49+
50+
const onNavTriggerClick = useCallback((fn: () => void) => {
51+
const cb = (e: MessageEvent) => {
52+
if (e.data.type === 'xconsole:on_nav_click') {
53+
fn();
54+
}
55+
};
56+
window.addEventListener('message', cb);
57+
58+
return () => window.removeEventListener('message', cb);
59+
}, []);
60+
61+
const { collapsed, setCollapsed, onNavCollapseTriggerClick } = useCollapsed(
62+
pathname,
63+
consoleMenu?.collapsedPath || [],
64+
);
65+
66+
const hideNav = useCallback(() => {
67+
setNavVisible(false);
68+
}, []);
69+
70+
const showNav = useCallback(() => {
71+
setNavVisible(true);
72+
}, []);
73+
74+
return (
75+
<Context.Provider
76+
value={{
77+
collapsed,
78+
hideNav,
79+
showNav,
80+
sidebar: {
81+
title,
82+
navs,
83+
collapsedKeys: [],
84+
onItemClick: sidebar.onItemClick,
85+
onOpen: sidebar.onOpen,
86+
},
87+
setTitle,
88+
setNavs,
89+
setCollapsed,
90+
onNavTriggerClick,
91+
}}
92+
>
93+
<AppLayout
94+
collapsed={collapsed}
95+
onNavCollapseTriggerClick={onNavCollapseTriggerClick}
96+
consoleMenu={consoleMenu}
97+
location={location}
98+
menuParams={menuParams}
99+
visible={navVisible}
100+
style={style}
101+
>
102+
{children}
103+
</AppLayout>
104+
</Context.Provider>
105+
);
106+
};
107+
108+
export default withRouter(XConsoleAppLayout);

0 commit comments

Comments
(0)

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