@hi-ui/menu 4.1.3 → 4.1.4
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/CHANGELOG.md +23 -0
- package/lib/cjs/Expander.js +6 -25
- package/lib/cjs/Menu.js +76 -136
- package/lib/cjs/MenuItem.js +80 -124
- package/lib/cjs/context.js +0 -2
- package/lib/cjs/index.js +0 -3
- package/lib/cjs/styles/index.scss.js +0 -3
- package/lib/cjs/util.js +3 -10
- package/lib/esm/Expander.js +4 -8
- package/lib/esm/Menu.js +65 -93
- package/lib/esm/MenuItem.js +31 -48
- package/lib/esm/styles/index.scss.js +0 -2
- package/lib/esm/util.js +2 -6
- package/package.json +18 -18
package/lib/esm/Menu.js
CHANGED
|
@@ -31,68 +31,62 @@ var MENU_MORE_ID = "MENU_MORE_" + uuid();
|
|
|
31
31
|
/**
|
|
32
32
|
* 菜单
|
|
33
33
|
*/
|
|
34
|
-
|
|
35
34
|
var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
36
35
|
var _a$prefixCls = _a.prefixCls,
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
36
|
+
prefixCls = _a$prefixCls === void 0 ? MENU_PREFIX : _a$prefixCls,
|
|
37
|
+
_a$role = _a.role,
|
|
38
|
+
role = _a$role === void 0 ? 'menu' : _a$role,
|
|
39
|
+
className = _a.className,
|
|
40
|
+
_a$data = _a.data,
|
|
41
|
+
data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
|
|
42
|
+
_a$placement = _a.placement,
|
|
43
|
+
placement = _a$placement === void 0 ? 'vertical' : _a$placement,
|
|
44
|
+
_a$showCollapse = _a.showCollapse,
|
|
45
|
+
showCollapse = _a$showCollapse === void 0 ? false : _a$showCollapse,
|
|
46
|
+
_a$expandedType = _a.expandedType,
|
|
47
|
+
expandedType = _a$expandedType === void 0 ? 'collapse' : _a$expandedType,
|
|
48
|
+
_a$showAllSubMenus = _a.showAllSubMenus,
|
|
49
|
+
showAllSubMenus = _a$showAllSubMenus === void 0 ? false : _a$showAllSubMenus,
|
|
50
|
+
_a$defaultExpandAll = _a.defaultExpandAll,
|
|
51
|
+
defaultExpandAll = _a$defaultExpandAll === void 0 ? false : _a$defaultExpandAll,
|
|
52
|
+
_a$defaultExpandedIds = _a.defaultExpandedIds,
|
|
53
|
+
defaultExpandedIds = _a$defaultExpandedIds === void 0 ? DEFAULT_EXPANDED_IDS : _a$defaultExpandedIds,
|
|
54
|
+
expandedIdsProp = _a.expandedIds,
|
|
55
|
+
onExpand = _a.onExpand,
|
|
56
|
+
_a$defaultActiveId = _a.defaultActiveId,
|
|
57
|
+
defaultActiveId = _a$defaultActiveId === void 0 ? '' : _a$defaultActiveId,
|
|
58
|
+
activeIdProp = _a.activeId,
|
|
59
|
+
onClickSubMenu = _a.onClickSubMenu,
|
|
60
|
+
collapsed = _a.collapsed,
|
|
61
|
+
_a$defaultCollapsed = _a.defaultCollapsed,
|
|
62
|
+
defaultCollapsed = _a$defaultCollapsed === void 0 ? false : _a$defaultCollapsed,
|
|
63
|
+
overlayClassName = _a.overlayClassName,
|
|
64
|
+
onCollapse = _a.onCollapse,
|
|
65
|
+
footerRender = _a.footerRender,
|
|
66
|
+
render = _a.render,
|
|
67
|
+
extraHeader = _a.extraHeader,
|
|
68
|
+
onClick = _a.onClick,
|
|
69
|
+
_a$size = _a.size,
|
|
70
|
+
size = _a$size === void 0 ? 'lg' : _a$size,
|
|
71
|
+
rest = __rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "render", "extraHeader", "onClick", "size"]);
|
|
74
72
|
var _useUncontrolledState = useUncontrolledState(defaultActiveId, activeIdProp, onClick),
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
73
|
+
activeId = _useUncontrolledState[0],
|
|
74
|
+
updateActiveId = _useUncontrolledState[1];
|
|
78
75
|
var _useState = useState(function () {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
76
|
+
return getAncestorIds(activeId, data);
|
|
77
|
+
}),
|
|
78
|
+
activeParents = _useState[0],
|
|
79
|
+
updateActiveParents = _useState[1];
|
|
84
80
|
useEffect(function () {
|
|
85
81
|
updateActiveParents(getAncestorIds(activeId, data));
|
|
86
82
|
}, [activeId, data]);
|
|
87
|
-
|
|
88
83
|
var _useUncontrolledState2 = useUncontrolledState(function () {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
84
|
+
return defaultExpandAll ? getTreeNodesWithChildren(data).map(function (node) {
|
|
85
|
+
return node.id;
|
|
86
|
+
}) : defaultExpandedIds;
|
|
87
|
+
}, expandedIdsProp, onExpand),
|
|
88
|
+
expandedIds = _useUncontrolledState2[0],
|
|
89
|
+
updateExpandedIds = _useUncontrolledState2[1];
|
|
96
90
|
var clickMenu = useCallback(function (id, raw) {
|
|
97
91
|
updateActiveId(id, raw);
|
|
98
92
|
}, [updateActiveId]);
|
|
@@ -101,7 +95,6 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
101
95
|
return expandedId !== id;
|
|
102
96
|
}) : expandedIds.concat(id);
|
|
103
97
|
updateExpandedIds(nextExpandedIds);
|
|
104
|
-
|
|
105
98
|
if (onClickSubMenu) {
|
|
106
99
|
onClickSubMenu(id, nextExpandedIds);
|
|
107
100
|
}
|
|
@@ -114,28 +107,23 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
114
107
|
var closeAllPopper = useCallback(function () {
|
|
115
108
|
updateExpandedIds([]);
|
|
116
109
|
}, [updateExpandedIds]);
|
|
117
|
-
|
|
118
110
|
var _useUncontrolledToggl = useUncontrolledToggle({
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
111
|
+
defaultVisible: defaultCollapsed,
|
|
112
|
+
visible: collapsed,
|
|
113
|
+
onToggle: onCollapse
|
|
114
|
+
}),
|
|
115
|
+
mini = _useUncontrolledToggl[0],
|
|
116
|
+
miniToggleAction = _useUncontrolledToggl[1];
|
|
126
117
|
var showVertical = placement === 'vertical';
|
|
127
118
|
var canToggle = showVertical && showCollapse;
|
|
128
119
|
var showMini = showVertical && mini;
|
|
129
|
-
|
|
130
120
|
var _useState2 = useState(null),
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
121
|
+
containerElement = _useState2[0],
|
|
122
|
+
setContainerElement = _useState2[1];
|
|
134
123
|
var _useState3 = useState(),
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
124
|
+
_useState3$ = _useState3[0],
|
|
125
|
+
containerWidth = _useState3$ === void 0 ? 0 : _useState3$,
|
|
126
|
+
setContainerWidth = _useState3[1];
|
|
139
127
|
useResizeObserver({
|
|
140
128
|
element: containerElement,
|
|
141
129
|
disabled: showVertical,
|
|
@@ -147,11 +135,9 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
147
135
|
setContainerWidth(width);
|
|
148
136
|
}
|
|
149
137
|
});
|
|
150
|
-
|
|
151
138
|
var _useState4 = useState(0),
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
139
|
+
tagMaxCount = _useState4[0],
|
|
140
|
+
setTagMaxCount = _useState4[1];
|
|
155
141
|
var mergedTagList = useMemo(function () {
|
|
156
142
|
if (showVertical) return data;
|
|
157
143
|
if (containerWidth < MIN_WIDTH) return data;
|
|
@@ -171,21 +157,16 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
171
157
|
useLayoutEffect(function () {
|
|
172
158
|
if (showVertical) return;
|
|
173
159
|
var tagMaxCount = 0;
|
|
174
|
-
|
|
175
160
|
if (isArrayNonEmpty(mergedTagList)) {
|
|
176
161
|
var len = mergedTagList.length;
|
|
177
162
|
var lastIndex = len - 1;
|
|
178
163
|
var totalWidth = 72; // 更多
|
|
179
|
-
|
|
180
164
|
for (var i = 0; i < len; ++i) {
|
|
181
165
|
var currentTagWidth = getTagWidth(i);
|
|
182
|
-
|
|
183
166
|
if (currentTagWidth === undefined) {
|
|
184
167
|
break;
|
|
185
168
|
}
|
|
186
|
-
|
|
187
169
|
totalWidth += currentTagWidth;
|
|
188
|
-
|
|
189
170
|
if (lastIndex === 0 && totalWidth <= containerWidth || i === lastIndex - 1 && totalWidth + getTagWidth(lastIndex) <= containerWidth) {
|
|
190
171
|
tagMaxCount = lastIndex;
|
|
191
172
|
break;
|
|
@@ -196,18 +177,16 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
196
177
|
}
|
|
197
178
|
} else {
|
|
198
179
|
tagMaxCount = 0;
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
|
|
180
|
+
}
|
|
181
|
+
// 保底要展示 1 个
|
|
202
182
|
setTagMaxCount(isArrayNonEmpty(mergedTagList) && tagMaxCount < 1 ? 1 : tagMaxCount + 1);
|
|
203
183
|
}, [showVertical, getTagWidth, containerWidth, mergedTagList]);
|
|
204
|
-
|
|
205
184
|
var renderFooter = function renderFooter() {
|
|
206
185
|
var collapseNode = canToggle ? /*#__PURE__*/React.createElement("div", {
|
|
207
186
|
className: cx(prefixCls + "__toggle"),
|
|
208
187
|
onClick: function onClick() {
|
|
209
|
-
miniToggleAction.not();
|
|
210
|
-
|
|
188
|
+
miniToggleAction.not();
|
|
189
|
+
// 关闭所有展开的子菜单,防止切换到 mini 模式后,子菜单还是展开的
|
|
211
190
|
updateExpandedIds([]);
|
|
212
191
|
}
|
|
213
192
|
}, mini ? /*#__PURE__*/React.createElement(MenuUnfoldOutlined, null) : /*#__PURE__*/React.createElement(MenuFoldOutlined, null)) : null;
|
|
@@ -216,13 +195,11 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
216
195
|
collapseNode: collapseNode
|
|
217
196
|
}) : collapseNode);
|
|
218
197
|
};
|
|
219
|
-
|
|
220
198
|
var renderItem = useCallback(function (menuItem, level) {
|
|
221
199
|
// 显示缩略内容
|
|
222
200
|
if (showMini && level === 1) {
|
|
223
201
|
return renderMenuItemMini(menuItem);
|
|
224
202
|
}
|
|
225
|
-
|
|
226
203
|
return isFunction(render) ? render(menuItem, level) : menuItem.title;
|
|
227
204
|
}, [render, showMini]);
|
|
228
205
|
var cls = cx(prefixCls, className, prefixCls + "--" + placement, prefixCls + "--size-" + size, mini && prefixCls + "--mini", (expandedType === 'pop' || showAllSubMenus || mini) && prefixCls + "--popup");
|
|
@@ -275,21 +252,16 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
275
252
|
className: prefixCls + "__footer"
|
|
276
253
|
}, renderFooter())));
|
|
277
254
|
});
|
|
278
|
-
|
|
279
255
|
if (__DEV__) {
|
|
280
256
|
Menu.displayName = 'Menu';
|
|
281
257
|
}
|
|
282
258
|
/**
|
|
283
259
|
* Mini 模式下渲染 item
|
|
284
260
|
*/
|
|
285
|
-
|
|
286
|
-
|
|
287
261
|
var renderMenuItemMini = function renderMenuItemMini(menu) {
|
|
288
262
|
if (typeof menu.title === 'string') {
|
|
289
263
|
return menu.title.substring(0, 1);
|
|
290
264
|
}
|
|
291
|
-
|
|
292
265
|
return menu.title;
|
|
293
266
|
};
|
|
294
|
-
|
|
295
267
|
export { Menu };
|
package/lib/esm/MenuItem.js
CHANGED
|
@@ -27,44 +27,39 @@ var hiddenStyle = {
|
|
|
27
27
|
};
|
|
28
28
|
var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
29
29
|
var _cx, _cx2;
|
|
30
|
-
|
|
31
30
|
var _a$prefixCls = _a.prefixCls,
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
31
|
+
prefixCls = _a$prefixCls === void 0 ? MENU_PREFIX : _a$prefixCls,
|
|
32
|
+
className = _a.className,
|
|
33
|
+
icon = _a.icon,
|
|
34
|
+
title = _a.title,
|
|
35
|
+
disabled = _a.disabled,
|
|
36
|
+
id = _a.id,
|
|
37
|
+
_a$level = _a.level,
|
|
38
|
+
level = _a$level === void 0 ? 1 : _a$level,
|
|
39
|
+
children = _a.children,
|
|
40
|
+
parentIds = _a.parentIds,
|
|
41
|
+
_a$hidden = _a.hidden,
|
|
42
|
+
hidden = _a$hidden === void 0 ? false : _a$hidden,
|
|
43
|
+
render = _a.render,
|
|
44
|
+
raw = _a.raw,
|
|
45
|
+
_a$size = _a.size,
|
|
46
|
+
size = _a$size === void 0 ? 'lg' : _a$size,
|
|
47
|
+
rest = __rest(_a, ["prefixCls", "className", "icon", "title", "disabled", "id", "level", "children", "parentIds", "hidden", "render", "raw", "size"]);
|
|
50
48
|
var itemRef = useRef(null);
|
|
51
|
-
|
|
52
49
|
var _useContext = useContext(MenuContext),
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
50
|
+
placement = _useContext.placement,
|
|
51
|
+
expandedType = _useContext.expandedType,
|
|
52
|
+
showAllSubMenus = _useContext.showAllSubMenus,
|
|
53
|
+
mini = _useContext.mini,
|
|
54
|
+
activeId = _useContext.activeId,
|
|
55
|
+
closePopper = _useContext.closePopper,
|
|
56
|
+
expandedIds = _useContext.expandedIds,
|
|
57
|
+
clickMenu = _useContext.clickMenu,
|
|
58
|
+
clickSubMenu = _useContext.clickSubMenu,
|
|
59
|
+
closeAllPopper = _useContext.closeAllPopper,
|
|
60
|
+
activeParents = _useContext.activeParents,
|
|
61
|
+
overlayClassName = _useContext.overlayClassName;
|
|
66
62
|
var _parentIds = (parentIds || []).concat(id);
|
|
67
|
-
|
|
68
63
|
var hasChildren = isArrayNonEmpty(children);
|
|
69
64
|
var mergedRef = useMergeRefs(itemRef, ref);
|
|
70
65
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", Object.assign({
|
|
@@ -78,7 +73,6 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
78
73
|
!disabled && (clickSubMenu === null || clickSubMenu === void 0 ? void 0 : clickSubMenu(id));
|
|
79
74
|
} else {
|
|
80
75
|
!disabled && (clickMenu === null || clickMenu === void 0 ? void 0 : clickMenu(id, raw));
|
|
81
|
-
|
|
82
76
|
if (closeAllPopper && !(placement === 'vertical' && expandedType === 'collapse' && mini === false)) {
|
|
83
77
|
closeAllPopper();
|
|
84
78
|
}
|
|
@@ -227,7 +221,6 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
227
221
|
className: prefixCls + "-group-item"
|
|
228
222
|
}, child.title), child && isArrayNonEmpty(child.children) ? /*#__PURE__*/React.createElement("ul", null, child.children.map(function (item) {
|
|
229
223
|
var _cx3;
|
|
230
|
-
|
|
231
224
|
return /*#__PURE__*/React.createElement("div", {
|
|
232
225
|
onClick: function onClick() {
|
|
233
226
|
if (!item.disabled) {
|
|
@@ -299,7 +292,6 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
299
292
|
className: prefixCls + "-group-item"
|
|
300
293
|
}, child.title), child && isArrayNonEmpty(child.children) ? /*#__PURE__*/React.createElement("ul", null, child.children.map(function (item) {
|
|
301
294
|
var _cx4;
|
|
302
|
-
|
|
303
295
|
return /*#__PURE__*/React.createElement("div", {
|
|
304
296
|
className: cx(prefixCls + "-item", (_cx4 = {}, _cx4[prefixCls + "-item--active"] = activeId === item.id, _cx4[prefixCls + "-item--disabled"] = item.disabled, _cx4)),
|
|
305
297
|
onClick: function onClick() {
|
|
@@ -313,29 +305,23 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
313
305
|
})) : null);
|
|
314
306
|
}))) : null);
|
|
315
307
|
});
|
|
316
|
-
|
|
317
308
|
if (__DEV__) {
|
|
318
309
|
MenuItem.displayName = 'MenuItem';
|
|
319
310
|
}
|
|
320
|
-
|
|
321
311
|
var Arrow = function Arrow(_ref) {
|
|
322
312
|
var prefixCls = _ref.prefixCls,
|
|
323
|
-
|
|
313
|
+
direction = _ref.direction;
|
|
324
314
|
var icon;
|
|
325
|
-
|
|
326
315
|
switch (direction) {
|
|
327
316
|
case 'up':
|
|
328
317
|
icon = /*#__PURE__*/React.createElement(UpOutlined, null);
|
|
329
318
|
break;
|
|
330
|
-
|
|
331
319
|
case 'down':
|
|
332
320
|
icon = /*#__PURE__*/React.createElement(DownOutlined, null);
|
|
333
321
|
break;
|
|
334
|
-
|
|
335
322
|
default:
|
|
336
323
|
icon = /*#__PURE__*/React.createElement(RightOutlined, null);
|
|
337
324
|
}
|
|
338
|
-
|
|
339
325
|
return /*#__PURE__*/React.createElement("span", {
|
|
340
326
|
className: prefixCls + "__arrow"
|
|
341
327
|
}, icon);
|
|
@@ -343,11 +329,9 @@ var Arrow = function Arrow(_ref) {
|
|
|
343
329
|
/**
|
|
344
330
|
* 渲染空白占位
|
|
345
331
|
*/
|
|
346
|
-
|
|
347
|
-
|
|
348
332
|
var renderIndent = function renderIndent(_ref2) {
|
|
349
333
|
var prefixCls = _ref2.prefixCls,
|
|
350
|
-
|
|
334
|
+
depth = _ref2.depth;
|
|
351
335
|
return times(depth, function (index) {
|
|
352
336
|
return /*#__PURE__*/React.createElement("span", {
|
|
353
337
|
className: prefixCls + "__indent",
|
|
@@ -355,5 +339,4 @@ var renderIndent = function renderIndent(_ref2) {
|
|
|
355
339
|
});
|
|
356
340
|
});
|
|
357
341
|
};
|
|
358
|
-
|
|
359
342
|
export { MenuItem };
|
|
@@ -9,7 +9,5 @@
|
|
|
9
9
|
*/
|
|
10
10
|
import __styleInject__ from 'style-inject';
|
|
11
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;margin-bottom: var(--hi-v4-spacing-4, 8px);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--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: 40px;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);height: 40px;-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--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--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--size-sm .hi-v4-menu-item__inner {height: var(--hi-v4-height-8, 32px);margin-bottom: var(--hi-v4-spacing-1, 2px);}";
|
|
12
|
-
|
|
13
12
|
__styleInject__(css_248z);
|
|
14
|
-
|
|
15
13
|
export { css_248z as default };
|
package/lib/esm/util.js
CHANGED
|
@@ -22,20 +22,16 @@ var getParentId = function getParentId(id, data) {
|
|
|
22
22
|
}
|
|
23
23
|
});
|
|
24
24
|
return parentId;
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
};
|
|
26
|
+
// 寻找某一节点的所有祖先节点
|
|
28
27
|
var getAncestorIds = function getAncestorIds(id, data, arr) {
|
|
29
28
|
if (arr === void 0) {
|
|
30
29
|
arr = [];
|
|
31
30
|
}
|
|
32
|
-
|
|
33
31
|
if (getParentId(id, data)) {
|
|
34
32
|
arr.push(getParentId(id, data));
|
|
35
33
|
getAncestorIds(getParentId(id, data), data, arr);
|
|
36
34
|
}
|
|
37
|
-
|
|
38
35
|
return arr;
|
|
39
36
|
};
|
|
40
|
-
|
|
41
37
|
export { getAncestorIds, getParentId };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hi-ui/menu",
|
|
3
|
-
"version": "4.1.
|
|
3
|
+
"version": "4.1.4",
|
|
4
4
|
"description": "A sub-package for @hi-ui/hiui.",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "HiUI <mi-hiui@xiaomi.com>",
|
|
@@ -43,30 +43,30 @@
|
|
|
43
43
|
"url": "https://github.com/XiaoMi/hiui/issues"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@hi-ui/array-utils": "^4.0.
|
|
47
|
-
"@hi-ui/classname": "^4.0.
|
|
48
|
-
"@hi-ui/env": "^4.0.
|
|
49
|
-
"@hi-ui/icons": "^4.0.
|
|
50
|
-
"@hi-ui/popper": "^4.1.
|
|
51
|
-
"@hi-ui/times": "^4.0.
|
|
52
|
-
"@hi-ui/tooltip": "^4.0.
|
|
53
|
-
"@hi-ui/tree-utils": "^4.1.
|
|
54
|
-
"@hi-ui/type-assertion": "^4.0.
|
|
55
|
-
"@hi-ui/use-id": "^4.0.
|
|
56
|
-
"@hi-ui/use-merge-refs": "^4.0.
|
|
57
|
-
"@hi-ui/use-resize-observer": "^4.0.
|
|
58
|
-
"@hi-ui/use-toggle": "^4.0.
|
|
59
|
-
"@hi-ui/use-uncontrolled-state": "^4.0.
|
|
46
|
+
"@hi-ui/array-utils": "^4.0.2",
|
|
47
|
+
"@hi-ui/classname": "^4.0.2",
|
|
48
|
+
"@hi-ui/env": "^4.0.2",
|
|
49
|
+
"@hi-ui/icons": "^4.0.16",
|
|
50
|
+
"@hi-ui/popper": "^4.1.1",
|
|
51
|
+
"@hi-ui/times": "^4.0.2",
|
|
52
|
+
"@hi-ui/tooltip": "^4.0.8",
|
|
53
|
+
"@hi-ui/tree-utils": "^4.1.2",
|
|
54
|
+
"@hi-ui/type-assertion": "^4.0.2",
|
|
55
|
+
"@hi-ui/use-id": "^4.0.2",
|
|
56
|
+
"@hi-ui/use-merge-refs": "^4.0.2",
|
|
57
|
+
"@hi-ui/use-resize-observer": "^4.0.2",
|
|
58
|
+
"@hi-ui/use-toggle": "^4.0.2",
|
|
59
|
+
"@hi-ui/use-uncontrolled-state": "^4.0.2",
|
|
60
60
|
"react-transition-group": "^4.4.2"
|
|
61
61
|
},
|
|
62
62
|
"peerDependencies": {
|
|
63
|
-
"@hi-ui/core": ">=4.0.
|
|
63
|
+
"@hi-ui/core": ">=4.0.6",
|
|
64
64
|
"react": ">=16.8.6",
|
|
65
65
|
"react-dom": ">=16.8.6"
|
|
66
66
|
},
|
|
67
67
|
"devDependencies": {
|
|
68
|
-
"@hi-ui/core": "^4.0.
|
|
69
|
-
"@hi-ui/core-css": "^4.1.
|
|
68
|
+
"@hi-ui/core": "^4.0.6",
|
|
69
|
+
"@hi-ui/core-css": "^4.1.3",
|
|
70
70
|
"react": "^17.0.1",
|
|
71
71
|
"react-dom": "^17.0.1"
|
|
72
72
|
}
|