listpage-next 0.0.225 → 0.0.227
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Menu/Menu.d.ts +2 -0
- package/dist/components/Menu/Menu.js +28 -0
- package/dist/components/Menu/index.d.ts +3 -3
- package/dist/components/Menu/index.js +3 -43
- package/dist/components/Menu/types.d.ts +4 -14
- package/dist/components/Menu/utils.d.ts +2 -0
- package/dist/components/Menu/utils.js +9 -0
- package/dist/features/ChatClient/ui/ConversationDropdownMenu/index.js +2 -2
- package/package.json +1 -1
- package/dist/components/Menu/hooks/useMenuNavigation.d.ts +0 -2
- package/dist/components/Menu/hooks/useMenuNavigation.js +0 -70
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Menu } from "antd";
|
|
3
|
+
import { styled } from "styled-components";
|
|
4
|
+
import { useControllableValue } from "ahooks";
|
|
5
|
+
const Menu_Menu = (props)=>{
|
|
6
|
+
const { onSelect, ...restMenuProps } = props;
|
|
7
|
+
const [activeKey, setActiveKey] = useControllableValue(props, {
|
|
8
|
+
defaultValuePropName: 'defaultActiveKey'
|
|
9
|
+
});
|
|
10
|
+
return /*#__PURE__*/ jsx(MenuStyled, {
|
|
11
|
+
mode: "inline",
|
|
12
|
+
selectedKeys: activeKey ? [
|
|
13
|
+
activeKey
|
|
14
|
+
] : [],
|
|
15
|
+
onSelect: (info)=>{
|
|
16
|
+
setActiveKey(info.key);
|
|
17
|
+
const path = info.keyPath.reverse().join('/');
|
|
18
|
+
onSelect?.(path);
|
|
19
|
+
},
|
|
20
|
+
...restMenuProps
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
const MenuStyled = styled(Menu)`
|
|
24
|
+
.ant-menu {
|
|
25
|
+
border-inline-end: none !important;
|
|
26
|
+
}
|
|
27
|
+
`;
|
|
28
|
+
export { Menu_Menu as Menu };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
export
|
|
3
|
-
export
|
|
1
|
+
export { Menu } from './Menu';
|
|
2
|
+
export type { MenuItem, MenuProps } from './types';
|
|
3
|
+
export { detectActiveMenu } from './utils';
|
|
@@ -1,43 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
import { styled } from "styled-components";
|
|
5
|
-
import { useControllableValue } from "ahooks";
|
|
6
|
-
const Menu_Menu = (props)=>{
|
|
7
|
-
const { menus, theme, style, onSelect } = props;
|
|
8
|
-
const [activeKey, setActiveKey] = useControllableValue(props, {
|
|
9
|
-
defaultValuePropName: 'defaultActiveKey'
|
|
10
|
-
});
|
|
11
|
-
const menuItems = useMemo(()=>menus.map((item)=>({
|
|
12
|
-
key: item.key,
|
|
13
|
-
label: item.label,
|
|
14
|
-
icon: item.icon,
|
|
15
|
-
children: item.children?.map((child)=>({
|
|
16
|
-
key: child.key,
|
|
17
|
-
label: child.label,
|
|
18
|
-
icon: child.icon
|
|
19
|
-
}))
|
|
20
|
-
})), [
|
|
21
|
-
menus
|
|
22
|
-
]);
|
|
23
|
-
return /*#__PURE__*/ jsx(MenuStyled, {
|
|
24
|
-
mode: "inline",
|
|
25
|
-
theme: theme,
|
|
26
|
-
style: style,
|
|
27
|
-
items: menuItems,
|
|
28
|
-
selectedKeys: activeKey ? [
|
|
29
|
-
activeKey
|
|
30
|
-
] : [],
|
|
31
|
-
onSelect: (info)=>{
|
|
32
|
-
setActiveKey(info.key);
|
|
33
|
-
const path = info.keyPath.reverse().join('/');
|
|
34
|
-
onSelect?.(path);
|
|
35
|
-
}
|
|
36
|
-
});
|
|
37
|
-
};
|
|
38
|
-
const MenuStyled = styled(Menu)`
|
|
39
|
-
.ant-menu {
|
|
40
|
-
border-inline-end: none !important;
|
|
41
|
-
}
|
|
42
|
-
`;
|
|
43
|
-
export { Menu_Menu as Menu };
|
|
1
|
+
import { Menu } from "./Menu.js";
|
|
2
|
+
import { detectActiveMenu } from "./utils.js";
|
|
3
|
+
export { Menu, detectActiveMenu };
|
|
@@ -1,16 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
icon?: React.ReactNode;
|
|
6
|
-
children?: MenuItem[];
|
|
7
|
-
disabled?: boolean;
|
|
8
|
-
path?: string;
|
|
9
|
-
}
|
|
10
|
-
export interface MenuProps {
|
|
11
|
-
menus: MenuItem[];
|
|
12
|
-
theme?: 'light' | 'dark';
|
|
13
|
-
style?: CSSProperties;
|
|
1
|
+
import { ItemType } from 'antd/es/menu/interface';
|
|
2
|
+
import { MenuProps as AntdMenuProps } from 'antd';
|
|
3
|
+
export type MenuItem = ItemType;
|
|
4
|
+
export interface MenuProps extends Omit<AntdMenuProps, 'onSelect'> {
|
|
14
5
|
onSelect?: (path: string) => void;
|
|
15
|
-
defaultActiveKey?: string;
|
|
16
6
|
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
function detectActiveMenu(pathname, menus) {
|
|
2
|
+
debugger;
|
|
3
|
+
const activeMenu = menus.filter((item)=>item && pathname.startsWith(item.key)).sort((a, b)=>b.key.length - a.key.length)?.[0];
|
|
4
|
+
if (!activeMenu) return;
|
|
5
|
+
if (!activeMenu.children?.length) return activeMenu.key;
|
|
6
|
+
pathname = pathname.slice(activeMenu.key.length + 1);
|
|
7
|
+
return detectActiveMenu(pathname, activeMenu.children);
|
|
8
|
+
}
|
|
9
|
+
export { detectActiveMenu };
|
|
@@ -54,8 +54,8 @@ const ConversationDropdownMenu = (props)=>{
|
|
|
54
54
|
};
|
|
55
55
|
const DefaultPanelContainer = styled_components.div`
|
|
56
56
|
padding: 12px 24px;
|
|
57
|
-
background:
|
|
58
|
-
color:
|
|
57
|
+
background: #fff;
|
|
58
|
+
color: rgba(0,0,0,0.88);
|
|
59
59
|
border-radius: 8px;
|
|
60
60
|
min-height: 100px;
|
|
61
61
|
min-width: 200px;
|
package/package.json
CHANGED
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
import { useCallback, useMemo } from "react";
|
|
2
|
-
import { useLocation, useNavigate } from "react-router-dom";
|
|
3
|
-
function useActiveMenuKey(items, baseUrl = '') {
|
|
4
|
-
const location = useLocation();
|
|
5
|
-
const navigate = useNavigate();
|
|
6
|
-
const setActiveKey = useCallback((key)=>{
|
|
7
|
-
function findKeyPath(items, paths = []) {
|
|
8
|
-
for (const item of items){
|
|
9
|
-
if (item.key === key) return [
|
|
10
|
-
...paths,
|
|
11
|
-
item.path || item.key
|
|
12
|
-
];
|
|
13
|
-
if (item.children) {
|
|
14
|
-
const subPaths = findKeyPath(item.children, []);
|
|
15
|
-
if (subPaths.length) return [
|
|
16
|
-
...paths,
|
|
17
|
-
item.path || item.key,
|
|
18
|
-
...subPaths
|
|
19
|
-
];
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
return [];
|
|
23
|
-
}
|
|
24
|
-
const paths = findKeyPath(items, []);
|
|
25
|
-
const urlPath = paths.map((p)=>getPaths(p)).flat().join('/');
|
|
26
|
-
navigate(urlPath);
|
|
27
|
-
}, [
|
|
28
|
-
items,
|
|
29
|
-
navigate
|
|
30
|
-
]);
|
|
31
|
-
const activeKey = useMemo(()=>{
|
|
32
|
-
const filteredPaths = removeBaseUrl(location.pathname, baseUrl);
|
|
33
|
-
const paths = getPaths(filteredPaths);
|
|
34
|
-
return matchRoutes(items, paths);
|
|
35
|
-
}, [
|
|
36
|
-
location.pathname,
|
|
37
|
-
items,
|
|
38
|
-
baseUrl
|
|
39
|
-
]);
|
|
40
|
-
return [
|
|
41
|
-
activeKey,
|
|
42
|
-
setActiveKey
|
|
43
|
-
];
|
|
44
|
-
}
|
|
45
|
-
const removeBaseUrl = (pathname, baseUrl)=>{
|
|
46
|
-
if (!baseUrl) return pathname;
|
|
47
|
-
if (pathname.startsWith(baseUrl)) return pathname.slice(baseUrl.length);
|
|
48
|
-
return pathname;
|
|
49
|
-
};
|
|
50
|
-
const matchRoutes = (routes, paths)=>{
|
|
51
|
-
for (const route of routes){
|
|
52
|
-
const routePaths = getPaths(route.path || route.key);
|
|
53
|
-
const isMatch = isPathMatch(paths, routePaths);
|
|
54
|
-
if (isMatch) {
|
|
55
|
-
if (route.children) return matchRoutes(route.children, paths.slice(routePaths.length));
|
|
56
|
-
return route.key;
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
return null;
|
|
60
|
-
};
|
|
61
|
-
const isPathMatch = (urlPaths, routePaths)=>{
|
|
62
|
-
for(let i = 0; i < routePaths.length; i++){
|
|
63
|
-
const matchAny = '*' === routePaths[i];
|
|
64
|
-
const matchUrl = routePaths[i] === urlPaths[i];
|
|
65
|
-
if (!matchAny && !matchUrl) return false;
|
|
66
|
-
}
|
|
67
|
-
return true;
|
|
68
|
-
};
|
|
69
|
-
const getPaths = (path = '')=>path.split('/').filter(Boolean);
|
|
70
|
-
export { useActiveMenuKey };
|