@hi-ui/menu 4.1.7 → 4.2.0-alpha.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.
- package/lib/cjs/MenuItem.js +1 -1
- package/lib/cjs/Sidebar.js +166 -0
- package/lib/cjs/index.js +4 -0
- package/lib/cjs/styles/index.scss.js +1 -1
- package/lib/cjs/util.js +30 -0
- package/lib/esm/MenuItem.js +1 -1
- package/lib/esm/Sidebar.js +154 -0
- package/lib/esm/index.js +2 -0
- package/lib/esm/styles/index.scss.js +1 -1
- package/lib/esm/util.js +31 -1
- package/lib/types/Sidebar.d.ts +70 -0
- package/lib/types/index.d.ts +2 -0
- package/lib/types/util.d.ts +2 -0
- package/package.json +2 -2
package/lib/cjs/MenuItem.js
CHANGED
|
@@ -80,7 +80,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
80
80
|
className: classname.cx(prefixCls + "-item", (_cx = {}, _cx[prefixCls + "-item__inner--mini"] = mini, _cx[prefixCls + "-item--disabled"] = disabled, _cx[prefixCls + "-item--active"] = placement === 'horizontal' && (activeId === id || (activeParents === null || activeParents === void 0 ? void 0 : activeParents.includes(id))) && level === 1, _cx), className),
|
|
81
81
|
style: hidden ? hiddenStyle : undefined
|
|
82
82
|
}, rest), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
83
|
-
className: classname.cx(prefixCls + "-item__inner", (_cx2 = {}, _cx2[prefixCls + "-item__inner--active"] = activeId === id, _cx2[prefixCls + "-item__inner--active-p"] = activeParents === null || activeParents === void 0 ? void 0 : activeParents.includes(id), _cx2[prefixCls + "-item__inner--expanded"] = expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id), _cx2)),
|
|
83
|
+
className: classname.cx(prefixCls + "-item__inner", (_cx2 = {}, _cx2[prefixCls + "-item__inner--active"] = activeId === id, _cx2[prefixCls + "-item__inner--active-p"] = activeParents === null || activeParents === void 0 ? void 0 : activeParents.includes(id), _cx2[prefixCls + "-item__inner--expanded"] = expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id), _cx2[prefixCls + "-item__inner--hasIcon"] = icon, _cx2)),
|
|
84
84
|
onClick: function onClick() {
|
|
85
85
|
if (typeAssertion.isArrayNonEmpty(children)) {
|
|
86
86
|
!disabled && (clickSubMenu === null || clickSubMenu === void 0 ? void 0 : clickSubMenu(id));
|
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
/** @LICENSE
|
|
2
|
+
* @hi-ui/menu
|
|
3
|
+
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#readme
|
|
4
|
+
*
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
|
+
*
|
|
7
|
+
* This source code is licensed under the MIT license found in the
|
|
8
|
+
* LICENSE file in the root directory of this source tree.
|
|
9
|
+
*/
|
|
10
|
+
'use strict';
|
|
11
|
+
|
|
12
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
13
|
+
Object.defineProperty(exports, '__esModule', {
|
|
14
|
+
value: true
|
|
15
|
+
});
|
|
16
|
+
var tslib = require('tslib');
|
|
17
|
+
var React = require('react');
|
|
18
|
+
var classname = require('@hi-ui/classname');
|
|
19
|
+
var icons = require('@hi-ui/icons');
|
|
20
|
+
var env = require('@hi-ui/env');
|
|
21
|
+
var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
|
|
22
|
+
var useToggle = require('@hi-ui/use-toggle');
|
|
23
|
+
var typeAssertion = require('@hi-ui/type-assertion');
|
|
24
|
+
var util = require('./util.js');
|
|
25
|
+
var Menu = require('./Menu.js');
|
|
26
|
+
function _interopDefaultCompat(e) {
|
|
27
|
+
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
28
|
+
'default': e
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
32
|
+
var SIDEBAR_PREFIX = classname.getPrefixCls('sidebar');
|
|
33
|
+
var NOOP_ARRAY = [];
|
|
34
|
+
/**
|
|
35
|
+
* 侧边栏菜单
|
|
36
|
+
*/
|
|
37
|
+
var Sidebar = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
38
|
+
var _a$prefixCls = _a.prefixCls,
|
|
39
|
+
prefixCls = _a$prefixCls === void 0 ? SIDEBAR_PREFIX : _a$prefixCls,
|
|
40
|
+
_a$role = _a.role,
|
|
41
|
+
role = _a$role === void 0 ? 'sidebar' : _a$role,
|
|
42
|
+
_a$data = _a.data,
|
|
43
|
+
data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
|
|
44
|
+
_a$showCollapse = _a.showCollapse,
|
|
45
|
+
showCollapse = _a$showCollapse === void 0 ? true : _a$showCollapse,
|
|
46
|
+
_a$defaultActiveId = _a.defaultActiveId,
|
|
47
|
+
defaultActiveId = _a$defaultActiveId === void 0 ? '' : _a$defaultActiveId,
|
|
48
|
+
activeIdProp = _a.activeId,
|
|
49
|
+
collapsed = _a.collapsed,
|
|
50
|
+
_a$defaultCollapsed = _a.defaultCollapsed,
|
|
51
|
+
defaultCollapsed = _a$defaultCollapsed === void 0 ? false : _a$defaultCollapsed,
|
|
52
|
+
onCollapse = _a.onCollapse,
|
|
53
|
+
_render = _a.render,
|
|
54
|
+
extraHeader = _a.extraHeader,
|
|
55
|
+
onClick = _a.onClick,
|
|
56
|
+
_a$showMenuArrow = _a.showMenuArrow,
|
|
57
|
+
showMenuArrow = _a$showMenuArrow === void 0 ? false : _a$showMenuArrow;
|
|
58
|
+
tslib.__rest(_a, ["prefixCls", "role", "className", "data", "showCollapse", "defaultExpandAll", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "onCollapse", "footerRender", "render", "extraHeader", "onClick", "showMenuArrow"]);
|
|
59
|
+
var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultActiveId, activeIdProp, onClick),
|
|
60
|
+
activeId = _useUncontrolledState[0],
|
|
61
|
+
updateActiveId = _useUncontrolledState[1];
|
|
62
|
+
var _useState = React.useState(function () {
|
|
63
|
+
return util.getAncestorIds(activeId, data);
|
|
64
|
+
}),
|
|
65
|
+
activeParents = _useState[0],
|
|
66
|
+
updateActiveParents = _useState[1];
|
|
67
|
+
var sidebarActiveId = React.useMemo(function () {
|
|
68
|
+
var _a;
|
|
69
|
+
return (_a = activeParents[activeParents.length - 1]) !== null && _a !== void 0 ? _a : activeId;
|
|
70
|
+
}, [activeParents]);
|
|
71
|
+
var _useUncontrolledToggl = useToggle.useUncontrolledToggle({
|
|
72
|
+
defaultVisible: defaultCollapsed,
|
|
73
|
+
visible: collapsed,
|
|
74
|
+
onToggle: onCollapse
|
|
75
|
+
}),
|
|
76
|
+
showMenu = _useUncontrolledToggl[0],
|
|
77
|
+
menuToggleAction = _useUncontrolledToggl[1];
|
|
78
|
+
React.useEffect(function () {
|
|
79
|
+
var _a;
|
|
80
|
+
var newActiveParents = (_a = util.getAncestorIds(activeId, data)) !== null && _a !== void 0 ? _a : '';
|
|
81
|
+
updateActiveParents(newActiveParents);
|
|
82
|
+
}, [activeId, data, updateActiveId]);
|
|
83
|
+
var menuDataMemo = React.useMemo(function () {
|
|
84
|
+
var _a, _b;
|
|
85
|
+
var menuData = (_b = (_a = data.find(function (item) {
|
|
86
|
+
return item.id === sidebarActiveId;
|
|
87
|
+
})) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : [];
|
|
88
|
+
if (menuData.length > 0) {
|
|
89
|
+
menuToggleAction.on();
|
|
90
|
+
} else {
|
|
91
|
+
menuToggleAction.off();
|
|
92
|
+
}
|
|
93
|
+
return menuData;
|
|
94
|
+
}, [sidebarActiveId, data, menuToggleAction]);
|
|
95
|
+
var clickSidebar = React.useCallback(function (id, raw) {
|
|
96
|
+
if (sidebarActiveId === id) {
|
|
97
|
+
return;
|
|
98
|
+
}
|
|
99
|
+
updateActiveId(id, raw);
|
|
100
|
+
}, [sidebarActiveId, updateActiveId]);
|
|
101
|
+
var clickMenu = React.useCallback(function (id, raw) {
|
|
102
|
+
updateActiveId(id, raw);
|
|
103
|
+
}, [updateActiveId]);
|
|
104
|
+
var cls = classname.cx(prefixCls + "-wrapper", showMenu && prefixCls + "-wrapper--showMenu", showMenuArrow && prefixCls + "-wrapper--showMenuArrow");
|
|
105
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
106
|
+
className: cls
|
|
107
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
108
|
+
className: "" + prefixCls,
|
|
109
|
+
ref: ref,
|
|
110
|
+
role: role
|
|
111
|
+
}, /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
112
|
+
className: prefixCls + "-list"
|
|
113
|
+
}, data.map(function (item) {
|
|
114
|
+
return /*#__PURE__*/React__default["default"].createElement(SidebarItem, Object.assign({}, item, {
|
|
115
|
+
className: item.id === sidebarActiveId ? prefixCls + "-item--active" : '',
|
|
116
|
+
render: function render(node) {
|
|
117
|
+
return _render === null || _render === void 0 ? void 0 : _render(node, 0);
|
|
118
|
+
},
|
|
119
|
+
key: item.id,
|
|
120
|
+
onClick: function onClick() {
|
|
121
|
+
return clickSidebar(item.id, item);
|
|
122
|
+
}
|
|
123
|
+
}));
|
|
124
|
+
}))), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
125
|
+
className: classname.cx(prefixCls + "-menu-wrapper")
|
|
126
|
+
}, /*#__PURE__*/React__default["default"].createElement(Menu.Menu, {
|
|
127
|
+
activeId: activeId,
|
|
128
|
+
data: menuDataMemo,
|
|
129
|
+
defaultExpandAll: true,
|
|
130
|
+
onClick: clickMenu,
|
|
131
|
+
style: {
|
|
132
|
+
width: 164
|
|
133
|
+
},
|
|
134
|
+
extraHeader: extraHeader,
|
|
135
|
+
render: _render
|
|
136
|
+
})), menuDataMemo.length > 0 && showCollapse && ( /*#__PURE__*/React__default["default"].createElement("div", {
|
|
137
|
+
className: prefixCls + "-toggle",
|
|
138
|
+
onClick: menuToggleAction.not
|
|
139
|
+
}, /*#__PURE__*/React__default["default"].createElement(icons.RightOutlined, null))));
|
|
140
|
+
});
|
|
141
|
+
if (env.__DEV__) {
|
|
142
|
+
Sidebar.displayName = 'Sidebar';
|
|
143
|
+
}
|
|
144
|
+
var SIDEBAR_ITEM_PREFIX = classname.getPrefixCls('sidebar-item');
|
|
145
|
+
var SidebarItem = function SidebarItem(data) {
|
|
146
|
+
var title = data.title,
|
|
147
|
+
icon = data.icon,
|
|
148
|
+
render = data.render,
|
|
149
|
+
level = data.level,
|
|
150
|
+
className = data.className,
|
|
151
|
+
onClick = data.onClick;
|
|
152
|
+
var prefixCls = SIDEBAR_ITEM_PREFIX;
|
|
153
|
+
var cls = classname.cx(prefixCls, className);
|
|
154
|
+
var renderTitle = React.useCallback(function (data) {
|
|
155
|
+
return typeAssertion.isFunction(render) ? render(data, level) : title;
|
|
156
|
+
}, [level, render, title]);
|
|
157
|
+
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
158
|
+
className: cls,
|
|
159
|
+
onClick: onClick
|
|
160
|
+
}, icon && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
161
|
+
className: prefixCls + "__icon"
|
|
162
|
+
}, icon), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
163
|
+
className: prefixCls + "__title"
|
|
164
|
+
}, /*#__PURE__*/React__default["default"].createElement("span", null, renderTitle(data))));
|
|
165
|
+
};
|
|
166
|
+
exports.Sidebar = Sidebar;
|
package/lib/cjs/index.js
CHANGED
|
@@ -14,5 +14,9 @@ Object.defineProperty(exports, '__esModule', {
|
|
|
14
14
|
});
|
|
15
15
|
require('./styles/index.scss.js');
|
|
16
16
|
var Menu = require('./Menu.js');
|
|
17
|
+
var Sidebar = require('./Sidebar.js');
|
|
18
|
+
var util = require('./util.js');
|
|
17
19
|
exports.Menu = Menu.Menu;
|
|
18
20
|
exports["default"] = Menu.Menu;
|
|
21
|
+
exports.Sidebar = Sidebar.Sidebar;
|
|
22
|
+
exports.filterTreeData = util.filterTreeData;
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
|
13
13
|
value: true
|
|
14
14
|
});
|
|
15
|
-
var css_248z = ".hi-v4-menu-fat-menu {background-color: var(--hi-v4-color-static-white, #fff);margin: 0;font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);display: -webkit-box;display: -ms-flexbox;display: flex;color: var(--hi-v4-color-gray-700, #1f2733);border-radius: var(--hi-v4-border-radius-md, 4px);-ms-flex-wrap: wrap;flex-wrap: wrap;}.hi-v4-menu-fat-menu__group:not(:last-of-type) {margin-right: var(--hi-v4-spacing-18, 36px);}.hi-v4-menu-fat-menu .hi-v4-menu-group-item {height: 40px;margin: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-6, 12px);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-menu-fat-menu .hi-v4-menu-item {height: 40px;margin: 0;border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);}.hi-v4-menu-fat-menu .hi-v4-menu-item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-menu-fat-menu .hi-v4-menu-item:not(.hi-v4-menu-item--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu-fat-menu .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu-fat-menu ul {padding: 0;margin: 0;}.hi-v4-menu-fat-menu ul li {list-style-type: none;}.hi-v4-menu-popmenu {background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px);margin: 0;font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);color: var(--hi-v4-color-gray-700, #1f2733);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-menu-popmenu .hi-v4-menu-item {height: 40px;margin: 0;}.hi-v4-menu-popmenu .hi-v4-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;height: 40px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu-popmenu .hi-v4-menu-item__inner--expanded {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu-popmenu .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu-popmenu .hi-v4-menu-item__inner--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu-popmenu .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 100%;padding-right: var(--hi-v4-spacing-4, 8px);}.hi-v4-menu {background-color: var(--hi-v4-color-static-white, #fff);color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-menu ul {margin: 0;padding: 0;}.hi-v4-menu-item {list-style: none;-webkit-box-sizing: border-box;box-sizing: border-box;cursor: pointer;-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-menu-item__icon {color: var(--hi-v4-color-gray-500, #929aa6);-webkit-margin-end: var(--hi-v4-spacing-4, 8px);margin-inline-end: var(--hi-v4-spacing-4, 8px);}.hi-v4-menu-item__icon svg[class^=hi-v4-icon] {font-size: var(--hi-v4-text-size-lg, 1rem);}.hi-v4-menu-item__arrow {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-lg, 1rem);}.hi-v4-menu-item__indent {display: inline-block;width: 24px;height: 100%;-ms-flex-negative: 0;flex-shrink: 0;}.hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu__wrapper {padding: 0;margin: 0;}.hi-v4-menu--horizontal {width: 100%;overflow: hidden;}.hi-v4-menu--horizontal .hi-v4-menu__wrapper {display: -webkit-box;display: -ms-flexbox;display: flex;overflow: visible;width: -webkit-max-content;width: -moz-max-content;width: max-content;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-menu--horizontal .hi-v4-menu-item {padding: 0 var(--hi-v4-spacing-10, 20px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 56px;border: none;font-size: var(--hi-v4-text-size-lg, 1rem);}.hi-v4-menu--horizontal .hi-v4-menu-item__arrow {-webkit-margin-start: var(--hi-v4-spacing-2, 4px);margin-inline-start: var(--hi-v4-spacing-2, 4px);}.hi-v4-menu--horizontal .hi-v4-menu-item:hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item:hover .hi-v4-menu-item__inner {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__inner {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item__inner {height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom: 2px solid transparent;}.hi-v4-menu--horizontal .hi-v4-menu-item__inner--expanded {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;white-space: nowrap;max-width: none;}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled:hover .hi-v4-menu-item__inner {border-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled .hi-v4-menu-item__content {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-menu--vertical {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: var(--hi-v4-spacing-4, 8px);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v4-menu--vertical .hi-v4-menu__wrapper {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: auto;}.hi-v4-menu--vertical .hi-v4-menu__wrapper > .hi-v4-menu-item:last-child .hi-v4-menu-item__inner {margin-bottom: 0;}.hi-v4-menu--vertical.hi-v4-menu--mini {width: 56px;overflow-x: hidden;}.hi-v4-menu--vertical.hi-v4-menu--popup .hi-v4-menu-item__inner--expanded {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu--vertical .hi-v4-menu__toggle {width: var(--hi-v4-height-10, 40px);height: var(--hi-v4-height-10, 40px);margin-top: var(--hi-v4-spacing-4, 8px);cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;border-radius: var(--hi-v4-border-radius-md, 4px);color: var(--hi-v4-color-gray-500, #929aa6);-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));-webkit-transition-property: background-color;transition-property: background-color;}.hi-v4-menu--vertical .hi-v4-menu__toggle:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu--vertical .hi-v4-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-menu--vertical .hi-v4-menu-item__inner--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-menu--vertical .hi-v4-menu-item__inner--active .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--vertical .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu--vertical .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-indent: 0.5px;}.hi-v4-menu--vertical .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu--vertical.hi-v4-menu--size-lg .hi-v4-menu-item__inner {height: var(--hi-v4-height-10, 40px);margin-bottom: var(--hi-v4-spacing-4, 8px);}.hi-v4-menu--vertical.hi-v4-menu--size-md .hi-v4-menu-item__inner {height: var(--hi-v4-height-9, 36px);margin-bottom: var(--hi-v4-spacing-2, 4px);}.hi-v4-menu--vertical.hi-v4-menu--size-sm .hi-v4-menu-item__inner {height: var(--hi-v4-height-8, 32px);margin-bottom: var(--hi-v4-spacing-1, 2px);}";
|
|
15
|
+
var css_248z = ".hi-v4-menu-fat-menu {background-color: var(--hi-v4-color-static-white, #fff);margin: 0;font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);display: -webkit-box;display: -ms-flexbox;display: flex;color: var(--hi-v4-color-gray-700, #1f2733);border-radius: var(--hi-v4-border-radius-md, 4px);-ms-flex-wrap: wrap;flex-wrap: wrap;}.hi-v4-menu-fat-menu__group:not(:last-of-type) {margin-right: var(--hi-v4-spacing-18, 36px);}.hi-v4-menu-fat-menu .hi-v4-menu-group-item {height: 40px;margin: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-6, 12px);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-menu-fat-menu .hi-v4-menu-item {height: 40px;margin: 0;border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);}.hi-v4-menu-fat-menu .hi-v4-menu-item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-menu-fat-menu .hi-v4-menu-item:not(.hi-v4-menu-item--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu-fat-menu .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu-fat-menu ul {padding: 0;margin: 0;}.hi-v4-menu-fat-menu ul li {list-style-type: none;}.hi-v4-menu-popmenu {background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px);margin: 0;font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);color: var(--hi-v4-color-gray-700, #1f2733);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-menu-popmenu .hi-v4-menu-item {height: 40px;margin: 0;}.hi-v4-menu-popmenu .hi-v4-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;height: 40px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu-popmenu .hi-v4-menu-item__inner--expanded {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu-popmenu .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu-popmenu .hi-v4-menu-item__inner--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu-popmenu .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 100%;padding-right: var(--hi-v4-spacing-4, 8px);}.hi-v4-menu {background-color: var(--hi-v4-color-static-white, #fff);color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-menu ul {margin: 0;padding: 0;}.hi-v4-menu-item {list-style: none;-webkit-box-sizing: border-box;box-sizing: border-box;cursor: pointer;-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-menu-item__icon {color: var(--hi-v4-color-gray-500, #929aa6);-webkit-margin-end: var(--hi-v4-spacing-4, 8px);margin-inline-end: var(--hi-v4-spacing-4, 8px);}.hi-v4-menu-item__icon svg[class^=hi-v4-icon] {font-size: var(--hi-v4-text-size-lg, 1rem);}.hi-v4-menu-item__arrow {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-lg, 1rem);}.hi-v4-menu-item__indent {display: inline-block;width: 24px;height: 100%;-ms-flex-negative: 0;flex-shrink: 0;}.hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu__wrapper {padding: 0;margin: 0;}.hi-v4-menu--horizontal {width: 100%;overflow: hidden;}.hi-v4-menu--horizontal .hi-v4-menu__wrapper {display: -webkit-box;display: -ms-flexbox;display: flex;overflow: visible;width: -webkit-max-content;width: -moz-max-content;width: max-content;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-menu--horizontal .hi-v4-menu-item {padding: 0 var(--hi-v4-spacing-10, 20px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 56px;border: none;font-size: var(--hi-v4-text-size-lg, 1rem);}.hi-v4-menu--horizontal .hi-v4-menu-item__arrow {-webkit-margin-start: var(--hi-v4-spacing-2, 4px);margin-inline-start: var(--hi-v4-spacing-2, 4px);}.hi-v4-menu--horizontal .hi-v4-menu-item:hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item:hover .hi-v4-menu-item__inner {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__inner {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item__inner {height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom: 2px solid transparent;}.hi-v4-menu--horizontal .hi-v4-menu-item__inner--expanded {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;white-space: nowrap;max-width: none;}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled:hover .hi-v4-menu-item__inner {border-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled .hi-v4-menu-item__content {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-menu--vertical {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: var(--hi-v4-spacing-4, 8px);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v4-menu--vertical .hi-v4-menu__wrapper {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: auto;}.hi-v4-menu--vertical .hi-v4-menu__wrapper > .hi-v4-menu-item:last-child .hi-v4-menu-item__inner {margin-bottom: 0;}.hi-v4-menu--vertical.hi-v4-menu--mini {width: 56px;overflow-x: hidden;}.hi-v4-menu--vertical.hi-v4-menu--popup .hi-v4-menu-item__inner--expanded {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu--vertical .hi-v4-menu__toggle {width: var(--hi-v4-height-10, 40px);height: var(--hi-v4-height-10, 40px);margin-top: var(--hi-v4-spacing-4, 8px);cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;border-radius: var(--hi-v4-border-radius-md, 4px);color: var(--hi-v4-color-gray-500, #929aa6);-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));-webkit-transition-property: background-color;transition-property: background-color;}.hi-v4-menu--vertical .hi-v4-menu__toggle:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu--vertical .hi-v4-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-menu--vertical .hi-v4-menu-item__inner--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-menu--vertical .hi-v4-menu-item__inner--active .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--vertical .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu--vertical .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-indent: 0.5px;}.hi-v4-menu--vertical .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu--vertical.hi-v4-menu--size-lg .hi-v4-menu-item__inner {height: var(--hi-v4-height-10, 40px);margin-bottom: var(--hi-v4-spacing-4, 8px);}.hi-v4-menu--vertical.hi-v4-menu--size-md .hi-v4-menu-item__inner {height: var(--hi-v4-height-9, 36px);margin-bottom: var(--hi-v4-spacing-2, 4px);}.hi-v4-menu--vertical.hi-v4-menu--size-sm .hi-v4-menu-item__inner {height: var(--hi-v4-height-8, 32px);margin-bottom: var(--hi-v4-spacing-1, 2px);}.hi-v4-sidebar-wrapper {position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;height: 100%;}.hi-v4-sidebar-wrapper:not(.hi-v4-sidebar-wrapper-showMenuArrow) .hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__arrow {display: none;}.hi-v4-sidebar-wrapper--showMenu .hi-v4-sidebar-menu-wrapper {width: 164px;border-right: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-sidebar-wrapper--showMenu .hi-v4-sidebar-toggle svg[class^=hi-v4-icon] {-webkit-transform: rotate(180deg);transform: rotate(180deg);}.hi-v4-sidebar {-webkit-box-sizing: border-box;box-sizing: border-box;width: 64px;height: 100%;padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-3, 6px);overflow: auto;border-right: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);background-color: #fff;}.hi-v4-sidebar-list {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;}.hi-v4-sidebar-item {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;margin-top: var(--hi-v4-spacing-6, 12px);padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-1, 2px);width: 52px;overflow: hidden;text-align: center;border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-sidebar-item:first-child {margin-top: 0;}.hi-v4-sidebar-item:hover {cursor: pointer;}.hi-v4-sidebar-item:not(.hi-v4-sidebar-item--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-sidebar-item--active {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-sidebar-item--active .hi-v4-sidebar-item__icon, .hi-v4-sidebar-item--active .hi-v4-sidebar-item__title {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-sidebar-item__icon {height: 20px;color: var(--hi-v4-color-gray-600, #5f6a7a);}.hi-v4-sidebar-item__icon svg[class^=hi-v4-icon] {width: 20px;height: 20px;}.hi-v4-sidebar-item__title {font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: 20px;color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-sidebar-menu-wrapper {width: 0;border-right: none;overflow: hidden;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item .hi-v4-menu-item__inner {height: var(--hi-v4-height-8, 32px);margin-bottom: 0;padding: 0 var(--hi-v4-spacing-4, 8px);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item .hi-v4-menu-item__inner--hasIcon + div .hi-v4-menu-submenu .hi-v4-menu-item__indent {display: block;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__icon {color: var(--hi-v4-color-gray-600, #5f6a7a);-webkit-margin-end: var(--hi-v4-spacing-2, 4px);margin-inline-end: var(--hi-v4-spacing-2, 4px);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__indent {width: 20px;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__content {font-weight: var(--hi-v4-text-weight-medium, 500);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-gray-700, #1f2733);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__inner--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-gray-600, #5f6a7a);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-submenu .hi-v4-menu-item__inner .hi-v4-menu-item__content {font-size: var(--hi-v4-text-size-sm, 0.75rem);font-weight: var(--hi-v4-text-weight-normal, 400);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-submenu .hi-v4-menu-item__inner .hi-v4-menu-item__indent {display: none;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu__wrapper > .hi-v4-menu-item {margin-top: var(--hi-v4-spacing-4, 8px);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu__wrapper > .hi-v4-menu-item:first-child {margin-top: 0;}.hi-v4-sidebar-toggle {position: absolute;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;width: 12px;height: 60px;right: -12px;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);border-start-end-radius: 16px 8px;border-end-end-radius: 16px 8px;border: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);border-left: none;cursor: pointer;color: var(--hi-v4-color-gray-600, #5f6a7a);background-color: #fff;}";
|
|
16
16
|
var __styleInject__ = require('style-inject')["default"];
|
|
17
17
|
__styleInject__(css_248z);
|
|
18
18
|
exports["default"] = css_248z;
|
package/lib/cjs/util.js
CHANGED
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
|
13
13
|
value: true
|
|
14
14
|
});
|
|
15
|
+
var treeUtils = require('@hi-ui/tree-utils');
|
|
15
16
|
|
|
16
17
|
// 寻找某一节点的父节点
|
|
17
18
|
var getParentId = function getParentId(id, data) {
|
|
@@ -40,5 +41,34 @@ var getAncestorIds = function getAncestorIds(id, data, arr) {
|
|
|
40
41
|
}
|
|
41
42
|
return arr;
|
|
42
43
|
};
|
|
44
|
+
var filterTreeData = function filterTreeData(treeData, searchKey, activeId, level) {
|
|
45
|
+
if (level === void 0) {
|
|
46
|
+
level = 1;
|
|
47
|
+
}
|
|
48
|
+
var _a, _b;
|
|
49
|
+
if (searchKey === '') {
|
|
50
|
+
return [];
|
|
51
|
+
}
|
|
52
|
+
var activeParents = getAncestorIds(activeId, treeData);
|
|
53
|
+
var clonedData = treeUtils.cloneTree(treeData);
|
|
54
|
+
var sidebarActiveId = (_a = activeParents[activeParents.length - 1]) !== null && _a !== void 0 ? _a : activeId;
|
|
55
|
+
// 获取当前选中的树节点
|
|
56
|
+
var currentTree = clonedData.find(function (d) {
|
|
57
|
+
return d.id === sidebarActiveId;
|
|
58
|
+
});
|
|
59
|
+
if (!currentTree) {
|
|
60
|
+
return [];
|
|
61
|
+
}
|
|
62
|
+
var result = treeUtils.filterTree((_b = currentTree === null || currentTree === void 0 ? void 0 : currentTree.children) !== null && _b !== void 0 ? _b : [], function (d) {
|
|
63
|
+
return d.title.includes(searchKey);
|
|
64
|
+
});
|
|
65
|
+
if (level === 1) {
|
|
66
|
+
currentTree.children = result;
|
|
67
|
+
return clonedData;
|
|
68
|
+
} else {
|
|
69
|
+
return result;
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
exports.filterTreeData = filterTreeData;
|
|
43
73
|
exports.getAncestorIds = getAncestorIds;
|
|
44
74
|
exports.getParentId = getParentId;
|
package/lib/esm/MenuItem.js
CHANGED
|
@@ -67,7 +67,7 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
67
67
|
className: cx(prefixCls + "-item", (_cx = {}, _cx[prefixCls + "-item__inner--mini"] = mini, _cx[prefixCls + "-item--disabled"] = disabled, _cx[prefixCls + "-item--active"] = placement === 'horizontal' && (activeId === id || (activeParents === null || activeParents === void 0 ? void 0 : activeParents.includes(id))) && level === 1, _cx), className),
|
|
68
68
|
style: hidden ? hiddenStyle : undefined
|
|
69
69
|
}, rest), /*#__PURE__*/React.createElement("div", {
|
|
70
|
-
className: cx(prefixCls + "-item__inner", (_cx2 = {}, _cx2[prefixCls + "-item__inner--active"] = activeId === id, _cx2[prefixCls + "-item__inner--active-p"] = activeParents === null || activeParents === void 0 ? void 0 : activeParents.includes(id), _cx2[prefixCls + "-item__inner--expanded"] = expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id), _cx2)),
|
|
70
|
+
className: cx(prefixCls + "-item__inner", (_cx2 = {}, _cx2[prefixCls + "-item__inner--active"] = activeId === id, _cx2[prefixCls + "-item__inner--active-p"] = activeParents === null || activeParents === void 0 ? void 0 : activeParents.includes(id), _cx2[prefixCls + "-item__inner--expanded"] = expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id), _cx2[prefixCls + "-item__inner--hasIcon"] = icon, _cx2)),
|
|
71
71
|
onClick: function onClick() {
|
|
72
72
|
if (isArrayNonEmpty(children)) {
|
|
73
73
|
!disabled && (clickSubMenu === null || clickSubMenu === void 0 ? void 0 : clickSubMenu(id));
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
/** @LICENSE
|
|
2
|
+
* @hi-ui/menu
|
|
3
|
+
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#readme
|
|
4
|
+
*
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
|
+
*
|
|
7
|
+
* This source code is licensed under the MIT license found in the
|
|
8
|
+
* LICENSE file in the root directory of this source tree.
|
|
9
|
+
*/
|
|
10
|
+
import { __rest } from 'tslib';
|
|
11
|
+
import React, { forwardRef, useState, useMemo, useEffect, useCallback } from 'react';
|
|
12
|
+
import { getPrefixCls, cx } from '@hi-ui/classname';
|
|
13
|
+
import { RightOutlined } from '@hi-ui/icons';
|
|
14
|
+
import { __DEV__ } from '@hi-ui/env';
|
|
15
|
+
import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
|
|
16
|
+
import { useUncontrolledToggle } from '@hi-ui/use-toggle';
|
|
17
|
+
import { isFunction } from '@hi-ui/type-assertion';
|
|
18
|
+
import { getAncestorIds } from './util.js';
|
|
19
|
+
import { Menu } from './Menu.js';
|
|
20
|
+
var SIDEBAR_PREFIX = getPrefixCls('sidebar');
|
|
21
|
+
var NOOP_ARRAY = [];
|
|
22
|
+
/**
|
|
23
|
+
* 侧边栏菜单
|
|
24
|
+
*/
|
|
25
|
+
var Sidebar = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
26
|
+
var _a$prefixCls = _a.prefixCls,
|
|
27
|
+
prefixCls = _a$prefixCls === void 0 ? SIDEBAR_PREFIX : _a$prefixCls,
|
|
28
|
+
_a$role = _a.role,
|
|
29
|
+
role = _a$role === void 0 ? 'sidebar' : _a$role,
|
|
30
|
+
_a$data = _a.data,
|
|
31
|
+
data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
|
|
32
|
+
_a$showCollapse = _a.showCollapse,
|
|
33
|
+
showCollapse = _a$showCollapse === void 0 ? true : _a$showCollapse,
|
|
34
|
+
_a$defaultActiveId = _a.defaultActiveId,
|
|
35
|
+
defaultActiveId = _a$defaultActiveId === void 0 ? '' : _a$defaultActiveId,
|
|
36
|
+
activeIdProp = _a.activeId,
|
|
37
|
+
collapsed = _a.collapsed,
|
|
38
|
+
_a$defaultCollapsed = _a.defaultCollapsed,
|
|
39
|
+
defaultCollapsed = _a$defaultCollapsed === void 0 ? false : _a$defaultCollapsed,
|
|
40
|
+
onCollapse = _a.onCollapse,
|
|
41
|
+
_render = _a.render,
|
|
42
|
+
extraHeader = _a.extraHeader,
|
|
43
|
+
onClick = _a.onClick,
|
|
44
|
+
_a$showMenuArrow = _a.showMenuArrow,
|
|
45
|
+
showMenuArrow = _a$showMenuArrow === void 0 ? false : _a$showMenuArrow;
|
|
46
|
+
__rest(_a, ["prefixCls", "role", "className", "data", "showCollapse", "defaultExpandAll", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "onCollapse", "footerRender", "render", "extraHeader", "onClick", "showMenuArrow"]);
|
|
47
|
+
var _useUncontrolledState = useUncontrolledState(defaultActiveId, activeIdProp, onClick),
|
|
48
|
+
activeId = _useUncontrolledState[0],
|
|
49
|
+
updateActiveId = _useUncontrolledState[1];
|
|
50
|
+
var _useState = useState(function () {
|
|
51
|
+
return getAncestorIds(activeId, data);
|
|
52
|
+
}),
|
|
53
|
+
activeParents = _useState[0],
|
|
54
|
+
updateActiveParents = _useState[1];
|
|
55
|
+
var sidebarActiveId = useMemo(function () {
|
|
56
|
+
var _a;
|
|
57
|
+
return (_a = activeParents[activeParents.length - 1]) !== null && _a !== void 0 ? _a : activeId;
|
|
58
|
+
}, [activeParents]);
|
|
59
|
+
var _useUncontrolledToggl = useUncontrolledToggle({
|
|
60
|
+
defaultVisible: defaultCollapsed,
|
|
61
|
+
visible: collapsed,
|
|
62
|
+
onToggle: onCollapse
|
|
63
|
+
}),
|
|
64
|
+
showMenu = _useUncontrolledToggl[0],
|
|
65
|
+
menuToggleAction = _useUncontrolledToggl[1];
|
|
66
|
+
useEffect(function () {
|
|
67
|
+
var _a;
|
|
68
|
+
var newActiveParents = (_a = getAncestorIds(activeId, data)) !== null && _a !== void 0 ? _a : '';
|
|
69
|
+
updateActiveParents(newActiveParents);
|
|
70
|
+
}, [activeId, data, updateActiveId]);
|
|
71
|
+
var menuDataMemo = useMemo(function () {
|
|
72
|
+
var _a, _b;
|
|
73
|
+
var menuData = (_b = (_a = data.find(function (item) {
|
|
74
|
+
return item.id === sidebarActiveId;
|
|
75
|
+
})) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : [];
|
|
76
|
+
if (menuData.length > 0) {
|
|
77
|
+
menuToggleAction.on();
|
|
78
|
+
} else {
|
|
79
|
+
menuToggleAction.off();
|
|
80
|
+
}
|
|
81
|
+
return menuData;
|
|
82
|
+
}, [sidebarActiveId, data, menuToggleAction]);
|
|
83
|
+
var clickSidebar = useCallback(function (id, raw) {
|
|
84
|
+
if (sidebarActiveId === id) {
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
updateActiveId(id, raw);
|
|
88
|
+
}, [sidebarActiveId, updateActiveId]);
|
|
89
|
+
var clickMenu = useCallback(function (id, raw) {
|
|
90
|
+
updateActiveId(id, raw);
|
|
91
|
+
}, [updateActiveId]);
|
|
92
|
+
var cls = cx(prefixCls + "-wrapper", showMenu && prefixCls + "-wrapper--showMenu", showMenuArrow && prefixCls + "-wrapper--showMenuArrow");
|
|
93
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
94
|
+
className: cls
|
|
95
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
96
|
+
className: "" + prefixCls,
|
|
97
|
+
ref: ref,
|
|
98
|
+
role: role
|
|
99
|
+
}, /*#__PURE__*/React.createElement("ul", {
|
|
100
|
+
className: prefixCls + "-list"
|
|
101
|
+
}, data.map(function (item) {
|
|
102
|
+
return /*#__PURE__*/React.createElement(SidebarItem, Object.assign({}, item, {
|
|
103
|
+
className: item.id === sidebarActiveId ? prefixCls + "-item--active" : '',
|
|
104
|
+
render: function render(node) {
|
|
105
|
+
return _render === null || _render === void 0 ? void 0 : _render(node, 0);
|
|
106
|
+
},
|
|
107
|
+
key: item.id,
|
|
108
|
+
onClick: function onClick() {
|
|
109
|
+
return clickSidebar(item.id, item);
|
|
110
|
+
}
|
|
111
|
+
}));
|
|
112
|
+
}))), /*#__PURE__*/React.createElement("div", {
|
|
113
|
+
className: cx(prefixCls + "-menu-wrapper")
|
|
114
|
+
}, /*#__PURE__*/React.createElement(Menu, {
|
|
115
|
+
activeId: activeId,
|
|
116
|
+
data: menuDataMemo,
|
|
117
|
+
defaultExpandAll: true,
|
|
118
|
+
onClick: clickMenu,
|
|
119
|
+
style: {
|
|
120
|
+
width: 164
|
|
121
|
+
},
|
|
122
|
+
extraHeader: extraHeader,
|
|
123
|
+
render: _render
|
|
124
|
+
})), menuDataMemo.length > 0 && showCollapse && ( /*#__PURE__*/React.createElement("div", {
|
|
125
|
+
className: prefixCls + "-toggle",
|
|
126
|
+
onClick: menuToggleAction.not
|
|
127
|
+
}, /*#__PURE__*/React.createElement(RightOutlined, null))));
|
|
128
|
+
});
|
|
129
|
+
if (__DEV__) {
|
|
130
|
+
Sidebar.displayName = 'Sidebar';
|
|
131
|
+
}
|
|
132
|
+
var SIDEBAR_ITEM_PREFIX = getPrefixCls('sidebar-item');
|
|
133
|
+
var SidebarItem = function SidebarItem(data) {
|
|
134
|
+
var title = data.title,
|
|
135
|
+
icon = data.icon,
|
|
136
|
+
render = data.render,
|
|
137
|
+
level = data.level,
|
|
138
|
+
className = data.className,
|
|
139
|
+
onClick = data.onClick;
|
|
140
|
+
var prefixCls = SIDEBAR_ITEM_PREFIX;
|
|
141
|
+
var cls = cx(prefixCls, className);
|
|
142
|
+
var renderTitle = useCallback(function (data) {
|
|
143
|
+
return isFunction(render) ? render(data, level) : title;
|
|
144
|
+
}, [level, render, title]);
|
|
145
|
+
return /*#__PURE__*/React.createElement("li", {
|
|
146
|
+
className: cls,
|
|
147
|
+
onClick: onClick
|
|
148
|
+
}, icon && /*#__PURE__*/React.createElement("div", {
|
|
149
|
+
className: prefixCls + "__icon"
|
|
150
|
+
}, icon), /*#__PURE__*/React.createElement("div", {
|
|
151
|
+
className: prefixCls + "__title"
|
|
152
|
+
}, /*#__PURE__*/React.createElement("span", null, renderTitle(data))));
|
|
153
|
+
};
|
|
154
|
+
export { Sidebar };
|
package/lib/esm/index.js
CHANGED
|
@@ -8,6 +8,6 @@
|
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
9
|
*/
|
|
10
10
|
import __styleInject__ from 'style-inject';
|
|
11
|
-
var css_248z = ".hi-v4-menu-fat-menu {background-color: var(--hi-v4-color-static-white, #fff);margin: 0;font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);display: -webkit-box;display: -ms-flexbox;display: flex;color: var(--hi-v4-color-gray-700, #1f2733);border-radius: var(--hi-v4-border-radius-md, 4px);-ms-flex-wrap: wrap;flex-wrap: wrap;}.hi-v4-menu-fat-menu__group:not(:last-of-type) {margin-right: var(--hi-v4-spacing-18, 36px);}.hi-v4-menu-fat-menu .hi-v4-menu-group-item {height: 40px;margin: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-6, 12px);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-menu-fat-menu .hi-v4-menu-item {height: 40px;margin: 0;border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);}.hi-v4-menu-fat-menu .hi-v4-menu-item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-menu-fat-menu .hi-v4-menu-item:not(.hi-v4-menu-item--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu-fat-menu .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu-fat-menu ul {padding: 0;margin: 0;}.hi-v4-menu-fat-menu ul li {list-style-type: none;}.hi-v4-menu-popmenu {background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px);margin: 0;font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);color: var(--hi-v4-color-gray-700, #1f2733);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-menu-popmenu .hi-v4-menu-item {height: 40px;margin: 0;}.hi-v4-menu-popmenu .hi-v4-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;height: 40px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu-popmenu .hi-v4-menu-item__inner--expanded {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu-popmenu .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu-popmenu .hi-v4-menu-item__inner--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu-popmenu .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 100%;padding-right: var(--hi-v4-spacing-4, 8px);}.hi-v4-menu {background-color: var(--hi-v4-color-static-white, #fff);color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-menu ul {margin: 0;padding: 0;}.hi-v4-menu-item {list-style: none;-webkit-box-sizing: border-box;box-sizing: border-box;cursor: pointer;-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-menu-item__icon {color: var(--hi-v4-color-gray-500, #929aa6);-webkit-margin-end: var(--hi-v4-spacing-4, 8px);margin-inline-end: var(--hi-v4-spacing-4, 8px);}.hi-v4-menu-item__icon svg[class^=hi-v4-icon] {font-size: var(--hi-v4-text-size-lg, 1rem);}.hi-v4-menu-item__arrow {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-lg, 1rem);}.hi-v4-menu-item__indent {display: inline-block;width: 24px;height: 100%;-ms-flex-negative: 0;flex-shrink: 0;}.hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu__wrapper {padding: 0;margin: 0;}.hi-v4-menu--horizontal {width: 100%;overflow: hidden;}.hi-v4-menu--horizontal .hi-v4-menu__wrapper {display: -webkit-box;display: -ms-flexbox;display: flex;overflow: visible;width: -webkit-max-content;width: -moz-max-content;width: max-content;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-menu--horizontal .hi-v4-menu-item {padding: 0 var(--hi-v4-spacing-10, 20px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 56px;border: none;font-size: var(--hi-v4-text-size-lg, 1rem);}.hi-v4-menu--horizontal .hi-v4-menu-item__arrow {-webkit-margin-start: var(--hi-v4-spacing-2, 4px);margin-inline-start: var(--hi-v4-spacing-2, 4px);}.hi-v4-menu--horizontal .hi-v4-menu-item:hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item:hover .hi-v4-menu-item__inner {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__inner {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item__inner {height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom: 2px solid transparent;}.hi-v4-menu--horizontal .hi-v4-menu-item__inner--expanded {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;white-space: nowrap;max-width: none;}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled:hover .hi-v4-menu-item__inner {border-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled .hi-v4-menu-item__content {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-menu--vertical {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: var(--hi-v4-spacing-4, 8px);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v4-menu--vertical .hi-v4-menu__wrapper {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: auto;}.hi-v4-menu--vertical .hi-v4-menu__wrapper > .hi-v4-menu-item:last-child .hi-v4-menu-item__inner {margin-bottom: 0;}.hi-v4-menu--vertical.hi-v4-menu--mini {width: 56px;overflow-x: hidden;}.hi-v4-menu--vertical.hi-v4-menu--popup .hi-v4-menu-item__inner--expanded {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu--vertical .hi-v4-menu__toggle {width: var(--hi-v4-height-10, 40px);height: var(--hi-v4-height-10, 40px);margin-top: var(--hi-v4-spacing-4, 8px);cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;border-radius: var(--hi-v4-border-radius-md, 4px);color: var(--hi-v4-color-gray-500, #929aa6);-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));-webkit-transition-property: background-color;transition-property: background-color;}.hi-v4-menu--vertical .hi-v4-menu__toggle:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu--vertical .hi-v4-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-menu--vertical .hi-v4-menu-item__inner--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-menu--vertical .hi-v4-menu-item__inner--active .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--vertical .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu--vertical .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-indent: 0.5px;}.hi-v4-menu--vertical .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu--vertical.hi-v4-menu--size-lg .hi-v4-menu-item__inner {height: var(--hi-v4-height-10, 40px);margin-bottom: var(--hi-v4-spacing-4, 8px);}.hi-v4-menu--vertical.hi-v4-menu--size-md .hi-v4-menu-item__inner {height: var(--hi-v4-height-9, 36px);margin-bottom: var(--hi-v4-spacing-2, 4px);}.hi-v4-menu--vertical.hi-v4-menu--size-sm .hi-v4-menu-item__inner {height: var(--hi-v4-height-8, 32px);margin-bottom: var(--hi-v4-spacing-1, 2px);}";
|
|
11
|
+
var css_248z = ".hi-v4-menu-fat-menu {background-color: var(--hi-v4-color-static-white, #fff);margin: 0;font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);display: -webkit-box;display: -ms-flexbox;display: flex;color: var(--hi-v4-color-gray-700, #1f2733);border-radius: var(--hi-v4-border-radius-md, 4px);-ms-flex-wrap: wrap;flex-wrap: wrap;}.hi-v4-menu-fat-menu__group:not(:last-of-type) {margin-right: var(--hi-v4-spacing-18, 36px);}.hi-v4-menu-fat-menu .hi-v4-menu-group-item {height: 40px;margin: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-6, 12px);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-menu-fat-menu .hi-v4-menu-item {height: 40px;margin: 0;border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);}.hi-v4-menu-fat-menu .hi-v4-menu-item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-menu-fat-menu .hi-v4-menu-item:not(.hi-v4-menu-item--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu-fat-menu .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu-fat-menu ul {padding: 0;margin: 0;}.hi-v4-menu-fat-menu ul li {list-style-type: none;}.hi-v4-menu-popmenu {background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px);margin: 0;font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);color: var(--hi-v4-color-gray-700, #1f2733);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-menu-popmenu .hi-v4-menu-item {height: 40px;margin: 0;}.hi-v4-menu-popmenu .hi-v4-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;height: 40px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu-popmenu .hi-v4-menu-item__inner--expanded {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu-popmenu .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu-popmenu .hi-v4-menu-item__inner--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu-popmenu .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 100%;padding-right: var(--hi-v4-spacing-4, 8px);}.hi-v4-menu {background-color: var(--hi-v4-color-static-white, #fff);color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-menu ul {margin: 0;padding: 0;}.hi-v4-menu-item {list-style: none;-webkit-box-sizing: border-box;box-sizing: border-box;cursor: pointer;-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-menu-item__icon {color: var(--hi-v4-color-gray-500, #929aa6);-webkit-margin-end: var(--hi-v4-spacing-4, 8px);margin-inline-end: var(--hi-v4-spacing-4, 8px);}.hi-v4-menu-item__icon svg[class^=hi-v4-icon] {font-size: var(--hi-v4-text-size-lg, 1rem);}.hi-v4-menu-item__arrow {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-lg, 1rem);}.hi-v4-menu-item__indent {display: inline-block;width: 24px;height: 100%;-ms-flex-negative: 0;flex-shrink: 0;}.hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu__wrapper {padding: 0;margin: 0;}.hi-v4-menu--horizontal {width: 100%;overflow: hidden;}.hi-v4-menu--horizontal .hi-v4-menu__wrapper {display: -webkit-box;display: -ms-flexbox;display: flex;overflow: visible;width: -webkit-max-content;width: -moz-max-content;width: max-content;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-menu--horizontal .hi-v4-menu-item {padding: 0 var(--hi-v4-spacing-10, 20px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 56px;border: none;font-size: var(--hi-v4-text-size-lg, 1rem);}.hi-v4-menu--horizontal .hi-v4-menu-item__arrow {-webkit-margin-start: var(--hi-v4-spacing-2, 4px);margin-inline-start: var(--hi-v4-spacing-2, 4px);}.hi-v4-menu--horizontal .hi-v4-menu-item:hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item:hover .hi-v4-menu-item__inner {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__inner {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item__inner {height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom: 2px solid transparent;}.hi-v4-menu--horizontal .hi-v4-menu-item__inner--expanded {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;white-space: nowrap;max-width: none;}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled:hover .hi-v4-menu-item__inner {border-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled .hi-v4-menu-item__content {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-menu--vertical {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: var(--hi-v4-spacing-4, 8px);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v4-menu--vertical .hi-v4-menu__wrapper {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: auto;}.hi-v4-menu--vertical .hi-v4-menu__wrapper > .hi-v4-menu-item:last-child .hi-v4-menu-item__inner {margin-bottom: 0;}.hi-v4-menu--vertical.hi-v4-menu--mini {width: 56px;overflow-x: hidden;}.hi-v4-menu--vertical.hi-v4-menu--popup .hi-v4-menu-item__inner--expanded {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu--vertical .hi-v4-menu__toggle {width: var(--hi-v4-height-10, 40px);height: var(--hi-v4-height-10, 40px);margin-top: var(--hi-v4-spacing-4, 8px);cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;border-radius: var(--hi-v4-border-radius-md, 4px);color: var(--hi-v4-color-gray-500, #929aa6);-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));-webkit-transition-property: background-color;transition-property: background-color;}.hi-v4-menu--vertical .hi-v4-menu__toggle:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu--vertical .hi-v4-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-menu--vertical .hi-v4-menu-item__inner--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-menu--vertical .hi-v4-menu-item__inner--active .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--vertical .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu--vertical .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-indent: 0.5px;}.hi-v4-menu--vertical .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu--vertical.hi-v4-menu--size-lg .hi-v4-menu-item__inner {height: var(--hi-v4-height-10, 40px);margin-bottom: var(--hi-v4-spacing-4, 8px);}.hi-v4-menu--vertical.hi-v4-menu--size-md .hi-v4-menu-item__inner {height: var(--hi-v4-height-9, 36px);margin-bottom: var(--hi-v4-spacing-2, 4px);}.hi-v4-menu--vertical.hi-v4-menu--size-sm .hi-v4-menu-item__inner {height: var(--hi-v4-height-8, 32px);margin-bottom: var(--hi-v4-spacing-1, 2px);}.hi-v4-sidebar-wrapper {position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;height: 100%;}.hi-v4-sidebar-wrapper:not(.hi-v4-sidebar-wrapper-showMenuArrow) .hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__arrow {display: none;}.hi-v4-sidebar-wrapper--showMenu .hi-v4-sidebar-menu-wrapper {width: 164px;border-right: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-sidebar-wrapper--showMenu .hi-v4-sidebar-toggle svg[class^=hi-v4-icon] {-webkit-transform: rotate(180deg);transform: rotate(180deg);}.hi-v4-sidebar {-webkit-box-sizing: border-box;box-sizing: border-box;width: 64px;height: 100%;padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-3, 6px);overflow: auto;border-right: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);background-color: #fff;}.hi-v4-sidebar-list {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;}.hi-v4-sidebar-item {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;margin-top: var(--hi-v4-spacing-6, 12px);padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-1, 2px);width: 52px;overflow: hidden;text-align: center;border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-sidebar-item:first-child {margin-top: 0;}.hi-v4-sidebar-item:hover {cursor: pointer;}.hi-v4-sidebar-item:not(.hi-v4-sidebar-item--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-sidebar-item--active {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-sidebar-item--active .hi-v4-sidebar-item__icon, .hi-v4-sidebar-item--active .hi-v4-sidebar-item__title {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-sidebar-item__icon {height: 20px;color: var(--hi-v4-color-gray-600, #5f6a7a);}.hi-v4-sidebar-item__icon svg[class^=hi-v4-icon] {width: 20px;height: 20px;}.hi-v4-sidebar-item__title {font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: 20px;color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-sidebar-menu-wrapper {width: 0;border-right: none;overflow: hidden;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item .hi-v4-menu-item__inner {height: var(--hi-v4-height-8, 32px);margin-bottom: 0;padding: 0 var(--hi-v4-spacing-4, 8px);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item .hi-v4-menu-item__inner--hasIcon + div .hi-v4-menu-submenu .hi-v4-menu-item__indent {display: block;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__icon {color: var(--hi-v4-color-gray-600, #5f6a7a);-webkit-margin-end: var(--hi-v4-spacing-2, 4px);margin-inline-end: var(--hi-v4-spacing-2, 4px);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__indent {width: 20px;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__content {font-weight: var(--hi-v4-text-weight-medium, 500);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-gray-700, #1f2733);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__inner--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-gray-600, #5f6a7a);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-submenu .hi-v4-menu-item__inner .hi-v4-menu-item__content {font-size: var(--hi-v4-text-size-sm, 0.75rem);font-weight: var(--hi-v4-text-weight-normal, 400);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-submenu .hi-v4-menu-item__inner .hi-v4-menu-item__indent {display: none;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu__wrapper > .hi-v4-menu-item {margin-top: var(--hi-v4-spacing-4, 8px);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu__wrapper > .hi-v4-menu-item:first-child {margin-top: 0;}.hi-v4-sidebar-toggle {position: absolute;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;width: 12px;height: 60px;right: -12px;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);border-start-end-radius: 16px 8px;border-end-end-radius: 16px 8px;border: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);border-left: none;cursor: pointer;color: var(--hi-v4-color-gray-600, #5f6a7a);background-color: #fff;}";
|
|
12
12
|
__styleInject__(css_248z);
|
|
13
13
|
export { css_248z as default };
|
package/lib/esm/util.js
CHANGED
|
@@ -7,6 +7,8 @@
|
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
9
|
*/
|
|
10
|
+
import { cloneTree, filterTree } from '@hi-ui/tree-utils';
|
|
11
|
+
|
|
10
12
|
// 寻找某一节点的父节点
|
|
11
13
|
var getParentId = function getParentId(id, data) {
|
|
12
14
|
var parentId = '';
|
|
@@ -34,4 +36,32 @@ var getAncestorIds = function getAncestorIds(id, data, arr) {
|
|
|
34
36
|
}
|
|
35
37
|
return arr;
|
|
36
38
|
};
|
|
37
|
-
|
|
39
|
+
var filterTreeData = function filterTreeData(treeData, searchKey, activeId, level) {
|
|
40
|
+
if (level === void 0) {
|
|
41
|
+
level = 1;
|
|
42
|
+
}
|
|
43
|
+
var _a, _b;
|
|
44
|
+
if (searchKey === '') {
|
|
45
|
+
return [];
|
|
46
|
+
}
|
|
47
|
+
var activeParents = getAncestorIds(activeId, treeData);
|
|
48
|
+
var clonedData = cloneTree(treeData);
|
|
49
|
+
var sidebarActiveId = (_a = activeParents[activeParents.length - 1]) !== null && _a !== void 0 ? _a : activeId;
|
|
50
|
+
// 获取当前选中的树节点
|
|
51
|
+
var currentTree = clonedData.find(function (d) {
|
|
52
|
+
return d.id === sidebarActiveId;
|
|
53
|
+
});
|
|
54
|
+
if (!currentTree) {
|
|
55
|
+
return [];
|
|
56
|
+
}
|
|
57
|
+
var result = filterTree((_b = currentTree === null || currentTree === void 0 ? void 0 : currentTree.children) !== null && _b !== void 0 ? _b : [], function (d) {
|
|
58
|
+
return d.title.includes(searchKey);
|
|
59
|
+
});
|
|
60
|
+
if (level === 1) {
|
|
61
|
+
currentTree.children = result;
|
|
62
|
+
return clonedData;
|
|
63
|
+
} else {
|
|
64
|
+
return result;
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
export { filterTreeData, getAncestorIds, getParentId };
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { HiBaseHTMLProps } from '@hi-ui/core';
|
|
3
|
+
import { MenuDataItem, MenuFooterRenderProps } from './types';
|
|
4
|
+
/**
|
|
5
|
+
* 侧边栏菜单
|
|
6
|
+
*/
|
|
7
|
+
export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement | null>>;
|
|
8
|
+
export interface SidebarProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'> {
|
|
9
|
+
/**
|
|
10
|
+
* 菜单项数据列表
|
|
11
|
+
*/
|
|
12
|
+
data: MenuDataItem[];
|
|
13
|
+
/**
|
|
14
|
+
* 默认激活的菜单项 id
|
|
15
|
+
*/
|
|
16
|
+
defaultActiveId?: React.ReactText;
|
|
17
|
+
/**
|
|
18
|
+
* 激活的菜单项 id
|
|
19
|
+
*/
|
|
20
|
+
activeId?: React.ReactText;
|
|
21
|
+
/**
|
|
22
|
+
* 是否显示收缩开关，菜单垂直展示时有效
|
|
23
|
+
*/
|
|
24
|
+
showCollapse?: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* 首次渲染默认展开所有菜单项，为非受控模式
|
|
27
|
+
*/
|
|
28
|
+
defaultExpandAll?: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* 默认是否收起子菜单，菜单垂直展示时有效
|
|
31
|
+
*/
|
|
32
|
+
defaultCollapsed?: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* 是否收起子菜单，菜单垂直展示时有效
|
|
35
|
+
*/
|
|
36
|
+
collapsed?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* 展开菜单时回调
|
|
39
|
+
*/
|
|
40
|
+
onExpand?: (expandedIds: React.ReactText[]) => void;
|
|
41
|
+
/**
|
|
42
|
+
* 点击菜单选项时的回调
|
|
43
|
+
*/
|
|
44
|
+
onClick?: (menuId: React.ReactText, menuItem: MenuDataItem) => void;
|
|
45
|
+
/**
|
|
46
|
+
* 点击父菜单项时的回调
|
|
47
|
+
*/
|
|
48
|
+
onClickSubMenu?: (subMenuId: React.ReactText, expandedIds: React.ReactText[]) => void;
|
|
49
|
+
/**
|
|
50
|
+
* 点击收缩开关时的回调
|
|
51
|
+
*/
|
|
52
|
+
onCollapse?: (collapsed: boolean) => void;
|
|
53
|
+
/**
|
|
54
|
+
* 底部渲染器
|
|
55
|
+
*/
|
|
56
|
+
footerRender?: (props: MenuFooterRenderProps) => React.ReactNode;
|
|
57
|
+
/**
|
|
58
|
+
* 自定义渲染菜单项
|
|
59
|
+
*/
|
|
60
|
+
render?: (menuItem: MenuDataItem, level?: number) => React.ReactNode;
|
|
61
|
+
/**
|
|
62
|
+
* 额外的头部内容
|
|
63
|
+
*/
|
|
64
|
+
extraHeader?: React.ReactNode;
|
|
65
|
+
/**
|
|
66
|
+
* 是否显示菜单箭头
|
|
67
|
+
* @default false
|
|
68
|
+
*/
|
|
69
|
+
showMenuArrow?: boolean;
|
|
70
|
+
}
|
package/lib/types/index.d.ts
CHANGED
package/lib/types/util.d.ts
CHANGED
|
@@ -1,2 +1,4 @@
|
|
|
1
|
+
import { MenuDataItem } from './types';
|
|
1
2
|
export declare const getParentId: (id: string | number, data: Record<string, any>[]) => string | number;
|
|
2
3
|
export declare const getAncestorIds: (id: string | number, data: Record<string, any>[], arr?: (string | number)[]) => (string | number)[];
|
|
4
|
+
export declare const filterTreeData: (treeData: MenuDataItem[], searchKey: string, activeId: string | number, level?: number) => MenuDataItem[];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hi-ui/menu",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.2.0-alpha.0",
|
|
4
4
|
"description": "A sub-package for @hi-ui/hiui.",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "HiUI <mi-hiui@xiaomi.com>",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"@hi-ui/popper": "^4.1.4",
|
|
51
51
|
"@hi-ui/times": "^4.0.4",
|
|
52
52
|
"@hi-ui/tooltip": "^4.0.10",
|
|
53
|
-
"@hi-ui/tree-utils": "^4.1.
|
|
53
|
+
"@hi-ui/tree-utils": "^4.1.5-alpha.0",
|
|
54
54
|
"@hi-ui/type-assertion": "^4.0.4",
|
|
55
55
|
"@hi-ui/use-id": "^4.0.4",
|
|
56
56
|
"@hi-ui/use-merge-refs": "^4.0.4",
|