@tsingroc/tsingroc-components 2.3.0 → 2.4.0
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.
|
@@ -1,17 +1,35 @@
|
|
|
1
|
-
import type
|
|
1
|
+
import { type MenuProps } from "antd";
|
|
2
|
+
import { type ReactNode } from "react";
|
|
2
3
|
export type MenuItem = Required<MenuProps>["items"][number];
|
|
3
4
|
export interface SidebarProps extends MenuProps {
|
|
4
5
|
/**
|
|
5
|
-
*
|
|
6
|
+
* 侧边栏的宽度。
|
|
6
7
|
* @default 260
|
|
7
8
|
*/
|
|
8
9
|
width?: number | string;
|
|
10
|
+
/**
|
|
11
|
+
* 是否启用伸缩功能。
|
|
12
|
+
* @default false
|
|
13
|
+
*/
|
|
14
|
+
collapsible?: boolean;
|
|
9
15
|
/**
|
|
10
16
|
* 网站 Logo 的 URL。
|
|
11
17
|
*
|
|
12
18
|
* 建议导入图片，然后将导入得到的地址填入 `logo`，而不要硬编码地址。
|
|
13
19
|
*/
|
|
14
20
|
logo?: string;
|
|
21
|
+
/** 侧边栏的标题。*/
|
|
22
|
+
title?: string;
|
|
23
|
+
/**
|
|
24
|
+
* 侧边栏头部（logo 和标题部分）的高度。
|
|
25
|
+
* @default 98
|
|
26
|
+
*/
|
|
27
|
+
headerHeight?: number | string;
|
|
28
|
+
/**
|
|
29
|
+
* 侧边栏的头部（logo 和标题部分）。这个属性将替换掉 `logo`、`title` 和 `headerHeight`。
|
|
30
|
+
* 参数 `collapsed` 表示侧边栏是否收起。
|
|
31
|
+
*/
|
|
32
|
+
header?: (collapsed: boolean) => ReactNode;
|
|
15
33
|
/**
|
|
16
34
|
* 菜单项配置，默认与 TMS 系统的菜单相同。
|
|
17
35
|
*
|
|
@@ -28,6 +46,8 @@ export interface SidebarProps extends MenuProps {
|
|
|
28
46
|
onSelect?: MenuProps["onSelect"];
|
|
29
47
|
/** 子菜单展开/收起时的回调函数。 */
|
|
30
48
|
onOpenChange?: MenuProps["onOpenChange"];
|
|
49
|
+
/** 侧边栏底部的额外内容。参数 `collapsed` 表示侧边栏是否收起。*/
|
|
50
|
+
footer?: (collapsed: boolean) => ReactNode;
|
|
31
51
|
}
|
|
32
52
|
/**
|
|
33
53
|
* 出自 TMS 系统的侧边栏组件。该组件需要放置在 [Ant Design 的 `Layout` 组件][1]内部才能正常工作。
|
|
@@ -36,8 +56,6 @@ export interface SidebarProps extends MenuProps {
|
|
|
36
56
|
*
|
|
37
57
|
* 除了文档中列出的属性之外，该组件会把额外的属性全部传递给内部的菜单 [`Menu` 组件][2]。
|
|
38
58
|
*
|
|
39
|
-
* 该组件不支持暗色模式。
|
|
40
|
-
*
|
|
41
59
|
* [1]: https://ant-design.antgroup.com/components/layout-cn
|
|
42
60
|
* [2]: https://ant-design.antgroup.com/components/menu-cn
|
|
43
61
|
*/
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { BarChartOutlined, SwapOutlined, TeamOutlined, } from "@ant-design/icons";
|
|
3
|
-
import {
|
|
2
|
+
import { BarChartOutlined, LeftOutlined, RightOutlined, SwapOutlined, TeamOutlined, } from "@ant-design/icons";
|
|
3
|
+
import { Button, Flex, Layout, Menu } from "antd";
|
|
4
|
+
import { useState } from "react";
|
|
5
|
+
import { createStyles } from "antd-style";
|
|
4
6
|
const { Sider } = Layout;
|
|
5
7
|
const menuItem = (label, key, icon, children) => ({ key, icon, children, label });
|
|
6
8
|
/** 默认菜单项配置，可以作为参考或默认值 */
|
|
@@ -22,6 +24,49 @@ const DEFAULT_MENU_ITEMS = [
|
|
|
22
24
|
menuItem("购电合约管理", "purchase-contract"),
|
|
23
25
|
]),
|
|
24
26
|
];
|
|
27
|
+
const useStyles = createStyles(({ token, css, cx, prefixCls }) => {
|
|
28
|
+
const sidebarMenu = css `
|
|
29
|
+
flex-basis: 100%;
|
|
30
|
+
overflow-y: auto;
|
|
31
|
+
`;
|
|
32
|
+
const sidebarBtn = css `
|
|
33
|
+
position: absolute;
|
|
34
|
+
top: 75%;
|
|
35
|
+
right: 0;
|
|
36
|
+
transform: translate(50%, -50%);
|
|
37
|
+
|
|
38
|
+
font-size: ${token.sizeSM}px;
|
|
39
|
+
|
|
40
|
+
transition: opacity ${token.motionDurationMid};
|
|
41
|
+
opacity: 0%;
|
|
42
|
+
`;
|
|
43
|
+
const sidebar = css `
|
|
44
|
+
position: relative;
|
|
45
|
+
box-shadow: rgba(0, 0, 0, 0.15) 0 2px 8px;
|
|
46
|
+
|
|
47
|
+
& .${prefixCls}-layout-sider-children {
|
|
48
|
+
display: flex;
|
|
49
|
+
flex-direction: column;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* 为了提高权重 */
|
|
53
|
+
& .${cx(sidebarBtn)} {
|
|
54
|
+
width: ${token.controlHeightXS}px;
|
|
55
|
+
}
|
|
56
|
+
& .${cx(sidebarMenu)}.${cx(sidebarMenu)} {
|
|
57
|
+
border-inline-end: none;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&:hover .${cx(sidebarBtn)} {
|
|
61
|
+
opacity: 100%;
|
|
62
|
+
}
|
|
63
|
+
`;
|
|
64
|
+
return {
|
|
65
|
+
sidebar,
|
|
66
|
+
sidebarMenu,
|
|
67
|
+
sidebarBtn,
|
|
68
|
+
};
|
|
69
|
+
});
|
|
25
70
|
/**
|
|
26
71
|
* 出自 TMS 系统的侧边栏组件。该组件需要放置在 [Ant Design 的 `Layout` 组件][1]内部才能正常工作。
|
|
27
72
|
*
|
|
@@ -29,37 +74,17 @@ const DEFAULT_MENU_ITEMS = [
|
|
|
29
74
|
*
|
|
30
75
|
* 除了文档中列出的属性之外，该组件会把额外的属性全部传递给内部的菜单 [`Menu` 组件][2]。
|
|
31
76
|
*
|
|
32
|
-
* 该组件不支持暗色模式。
|
|
33
|
-
*
|
|
34
77
|
* [1]: https://ant-design.antgroup.com/components/layout-cn
|
|
35
78
|
* [2]: https://ant-design.antgroup.com/components/menu-cn
|
|
36
79
|
*/
|
|
37
80
|
function Sidebar(props) {
|
|
38
|
-
const { width = 260, logo, items = DEFAULT_MENU_ITEMS, selectedKeys, openKeys, onSelect, onOpenChange, ...rest } = props;
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
display: "flex",
|
|
46
|
-
alignItems: "center",
|
|
47
|
-
justifyContent: "center",
|
|
48
|
-
transition: "all 0.3s",
|
|
49
|
-
}, children: _jsx("img", { alt: "logo", src: logo, style: {
|
|
50
|
-
width: "100%",
|
|
51
|
-
height: "100%",
|
|
52
|
-
objectFit: "contain",
|
|
53
|
-
} }) }), _jsx(ConfigProvider, { theme: {
|
|
54
|
-
components: {
|
|
55
|
-
Menu: {
|
|
56
|
-
itemMarginBlock: 0,
|
|
57
|
-
itemMarginInline: 0,
|
|
58
|
-
itemSelectedColor: "#1890FF",
|
|
59
|
-
itemSelectedBg: "#F0F7FF",
|
|
60
|
-
},
|
|
61
|
-
},
|
|
62
|
-
}, children: _jsx(Menu, { mode: "inline", style: { borderRight: 0 }, selectedKeys: selectedKeys, openKeys: openKeys, onSelect: onSelect, onOpenChange: onOpenChange, items: items, ...rest }) })] }));
|
|
81
|
+
const { width = 260, collapsible = false, logo, title, headerHeight = 98, header, items = DEFAULT_MENU_ITEMS, selectedKeys, openKeys, onSelect, onOpenChange, footer, ...rest } = props;
|
|
82
|
+
const { cx, styles, theme } = useStyles();
|
|
83
|
+
const [collapsed, setCollapsed] = useState(false);
|
|
84
|
+
return (_jsxs(Sider, { theme: "light", width: width, collapsed: collapsible ? collapsed : false, collapsible: collapsible, trigger: null, className: cx(styles.sidebar), children: [header ? (header(collapsed)) : (_jsxs(Flex, { vertical: true, align: "center", justify: "center", style: { height: headerHeight }, children: [_jsx("img", { alt: "logo", src: logo, style: { width: "40%" } }), _jsx("h1", { style: {
|
|
85
|
+
fontSize: collapsed ? theme.fontSizeSM : theme.fontSize,
|
|
86
|
+
transition: `font-size ${theme.motionDurationMid}`,
|
|
87
|
+
}, children: title })] })), _jsx(Menu, { mode: "inline", selectedKeys: selectedKeys, openKeys: openKeys, onSelect: onSelect, onOpenChange: onOpenChange, items: items, inlineCollapsed: collapsible ? collapsed : false, className: cx(styles.sidebarMenu, rest.className), ...rest }), footer?.(collapsed), collapsible && (_jsx(Button, { className: cx(styles.sidebarBtn), icon: collapsed ? _jsx(RightOutlined, {}) : _jsx(LeftOutlined, {}), onClick: () => setCollapsed(!collapsed) }))] }));
|
|
63
88
|
}
|
|
64
89
|
export default Sidebar;
|
|
65
90
|
//# sourceMappingURL=Sidebar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.js","sourceRoot":"","sources":["../../src/components/Sidebar.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,YAAY,GACb,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Sidebar.js","sourceRoot":"","sources":["../../src/components/Sidebar.tsx"],"names":[],"mappings":"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"}
|