@hi-ui/menu 4.0.0-beta.26 → 4.0.0-beta.29
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/Menu.js +159 -25
- package/lib/cjs/MenuItem.js +24 -7
- package/lib/cjs/styles/index.scss.js +1 -1
- package/lib/esm/Menu.js +155 -26
- package/lib/esm/MenuItem.js +25 -8
- package/lib/esm/styles/index.scss.js +1 -1
- package/lib/types/Menu.d.ts +16 -4
- package/lib/types/MenuItem.d.ts +4 -1
- package/lib/types/context.d.ts +2 -1
- package/lib/types/types.d.ts +10 -0
- package/package.json +10 -7
package/lib/cjs/Menu.js
CHANGED
|
@@ -35,6 +35,16 @@ var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
|
|
|
35
35
|
|
|
36
36
|
var Tooltip = require('@hi-ui/tooltip');
|
|
37
37
|
|
|
38
|
+
var useToggle = require('@hi-ui/use-toggle');
|
|
39
|
+
|
|
40
|
+
var treeUtils = require('@hi-ui/tree-utils');
|
|
41
|
+
|
|
42
|
+
var typeAssertion = require('@hi-ui/type-assertion');
|
|
43
|
+
|
|
44
|
+
var useResizeObserver = require('@hi-ui/use-resize-observer');
|
|
45
|
+
|
|
46
|
+
var useMergeRefs = require('@hi-ui/use-merge-refs');
|
|
47
|
+
|
|
38
48
|
function _interopDefaultLegacy(e) {
|
|
39
49
|
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
40
50
|
'default': e
|
|
@@ -48,13 +58,12 @@ var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
|
|
|
48
58
|
var MENU_PREFIX = classname.getPrefixCls('menu');
|
|
49
59
|
var DEFAULT_EXPANDED_IDS = [];
|
|
50
60
|
var NOOP_ARRAY = [];
|
|
61
|
+
var MIN_WIDTH = 56;
|
|
51
62
|
/**
|
|
52
63
|
* TODO: What is Menu
|
|
53
64
|
*/
|
|
54
65
|
|
|
55
66
|
var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
56
|
-
var _cx;
|
|
57
|
-
|
|
58
67
|
var _a$prefixCls = _a.prefixCls,
|
|
59
68
|
prefixCls = _a$prefixCls === void 0 ? MENU_PREFIX : _a$prefixCls,
|
|
60
69
|
_a$role = _a.role,
|
|
@@ -70,6 +79,8 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
70
79
|
expandedType = _a$expandedType === void 0 ? 'collapse' : _a$expandedType,
|
|
71
80
|
_a$showAllSubMenus = _a.showAllSubMenus,
|
|
72
81
|
showAllSubMenus = _a$showAllSubMenus === void 0 ? false : _a$showAllSubMenus,
|
|
82
|
+
_a$defaultExpandedAll = _a.defaultExpandedAll,
|
|
83
|
+
defaultExpandedAll = _a$defaultExpandedAll === void 0 ? false : _a$defaultExpandedAll,
|
|
73
84
|
_a$defaultExpandedIds = _a.defaultExpandedIds,
|
|
74
85
|
defaultExpandedIds = _a$defaultExpandedIds === void 0 ? DEFAULT_EXPANDED_IDS : _a$defaultExpandedIds,
|
|
75
86
|
expandedIdsProp = _a.expandedIds,
|
|
@@ -78,8 +89,13 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
78
89
|
defaultActiveId = _a$defaultActiveId === void 0 ? '' : _a$defaultActiveId,
|
|
79
90
|
activeIdProp = _a.activeId,
|
|
80
91
|
onClickSubMenu = _a.onClickSubMenu,
|
|
92
|
+
collapsed = _a.collapsed,
|
|
93
|
+
_a$defaultCollapsed = _a.defaultCollapsed,
|
|
94
|
+
defaultCollapsed = _a$defaultCollapsed === void 0 ? false : _a$defaultCollapsed,
|
|
95
|
+
onCollapse = _a.onCollapse,
|
|
96
|
+
footerRender = _a.footerRender,
|
|
81
97
|
onClick = _a.onClick,
|
|
82
|
-
rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "onClick"]);
|
|
98
|
+
rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandedAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "onCollapse", "footerRender", "onClick"]);
|
|
83
99
|
|
|
84
100
|
var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultActiveId, activeIdProp, onClick),
|
|
85
101
|
activeId = _useUncontrolledState[0],
|
|
@@ -95,12 +111,16 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
95
111
|
updateActiveParents(util.getAncestorIds(activeId, data));
|
|
96
112
|
}, [activeId, data]);
|
|
97
113
|
|
|
98
|
-
var _useUncontrolledState2 = useUncontrolledState.useUncontrolledState(
|
|
114
|
+
var _useUncontrolledState2 = useUncontrolledState.useUncontrolledState(function () {
|
|
115
|
+
return defaultExpandedAll ? treeUtils.getTreeNodesWithChildren(data).map(function (node) {
|
|
116
|
+
return node.id;
|
|
117
|
+
}) : defaultExpandedIds;
|
|
118
|
+
}, expandedIdsProp, onExpand),
|
|
99
119
|
expandedIds = _useUncontrolledState2[0],
|
|
100
120
|
updateExpandedIds = _useUncontrolledState2[1];
|
|
101
121
|
|
|
102
|
-
var clickMenu = React.useCallback(function (id) {
|
|
103
|
-
updateActiveId(id);
|
|
122
|
+
var clickMenu = React.useCallback(function (id, raw) {
|
|
123
|
+
updateActiveId(id, raw);
|
|
104
124
|
}, [updateActiveId]);
|
|
105
125
|
var clickSubMenu = React.useCallback(function (id) {
|
|
106
126
|
var nextExpandedIds = expandedIds.includes(id) ? expandedIds.filter(function (expandedId) {
|
|
@@ -121,18 +141,107 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
121
141
|
updateExpandedIds([]);
|
|
122
142
|
}, [updateExpandedIds]);
|
|
123
143
|
|
|
124
|
-
var
|
|
125
|
-
|
|
126
|
-
|
|
144
|
+
var _useUncontrolledToggl = useToggle.useUncontrolledToggle({
|
|
145
|
+
defaultVisible: defaultCollapsed,
|
|
146
|
+
visible: collapsed,
|
|
147
|
+
onToggle: onCollapse
|
|
148
|
+
}),
|
|
149
|
+
mini = _useUncontrolledToggl[0],
|
|
150
|
+
miniToggleAction = _useUncontrolledToggl[1];
|
|
151
|
+
|
|
152
|
+
var showVertical = placement === 'vertical';
|
|
153
|
+
var canToggle = showVertical && showCollapse;
|
|
154
|
+
var showMini = showVertical && mini;
|
|
155
|
+
|
|
156
|
+
var _useState2 = React.useState(null),
|
|
157
|
+
containerElement = _useState2[0],
|
|
158
|
+
setContainerElement = _useState2[1];
|
|
159
|
+
|
|
160
|
+
var _useState3 = React.useState(),
|
|
161
|
+
_useState3$ = _useState3[0],
|
|
162
|
+
containerWidth = _useState3$ === void 0 ? 0 : _useState3$,
|
|
163
|
+
setContainerWidth = _useState3[1];
|
|
164
|
+
|
|
165
|
+
useResizeObserver.useResizeObserver({
|
|
166
|
+
element: containerElement,
|
|
167
|
+
disabled: showVertical,
|
|
168
|
+
getSize: function getSize(element) {
|
|
169
|
+
var itemRect = element.getBoundingClientRect();
|
|
170
|
+
return itemRect.width;
|
|
171
|
+
},
|
|
172
|
+
onResize: function onResize(el, width) {
|
|
173
|
+
setContainerWidth(width);
|
|
174
|
+
}
|
|
175
|
+
});
|
|
176
|
+
|
|
177
|
+
var _useState4 = React.useState(0),
|
|
178
|
+
tagMaxCount = _useState4[0],
|
|
179
|
+
setTagMaxCount = _useState4[1];
|
|
180
|
+
|
|
181
|
+
var mergedTagList = React.useMemo(function () {
|
|
182
|
+
if (showVertical) return data;
|
|
183
|
+
if (containerWidth < MIN_WIDTH) return data;
|
|
184
|
+
return data.slice(0, Math.min(data.length, containerWidth / MIN_WIDTH));
|
|
185
|
+
}, [showVertical, data, containerWidth]);
|
|
186
|
+
var restTagList = React.useMemo(function () {
|
|
187
|
+
if (tagMaxCount > 0) return data.slice(tagMaxCount);
|
|
188
|
+
return [];
|
|
189
|
+
}, [data, tagMaxCount]);
|
|
190
|
+
var getTagWidth = React.useCallback(function (index) {
|
|
191
|
+
if (!containerElement) return MIN_WIDTH;
|
|
192
|
+
var elements = containerElement.getElementsByClassName('hi-v4-menu-item');
|
|
193
|
+
var element = elements && elements[index];
|
|
194
|
+
if (!element) return MIN_WIDTH;
|
|
195
|
+
return element.getBoundingClientRect().width;
|
|
196
|
+
}, [containerElement]);
|
|
197
|
+
React.useLayoutEffect(function () {
|
|
198
|
+
if (showVertical) return;
|
|
199
|
+
var tagMaxCount = 0;
|
|
200
|
+
|
|
201
|
+
if (typeAssertion.isArrayNonEmpty(mergedTagList)) {
|
|
202
|
+
var len = mergedTagList.length;
|
|
203
|
+
var lastIndex = len - 1;
|
|
204
|
+
var totalWidth = 72; // 更多
|
|
127
205
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
206
|
+
for (var i = 0; i < len; ++i) {
|
|
207
|
+
var currentTagWidth = getTagWidth(i);
|
|
208
|
+
|
|
209
|
+
if (currentTagWidth === undefined) {
|
|
210
|
+
break;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
totalWidth += currentTagWidth;
|
|
214
|
+
|
|
215
|
+
if (lastIndex === 0 && totalWidth <= containerWidth || i === lastIndex - 1 && totalWidth + getTagWidth(lastIndex) <= containerWidth) {
|
|
216
|
+
tagMaxCount = lastIndex;
|
|
217
|
+
break;
|
|
218
|
+
} else if (totalWidth > containerWidth) {
|
|
219
|
+
tagMaxCount = i - 1;
|
|
220
|
+
break;
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
} else {
|
|
224
|
+
tagMaxCount = 0;
|
|
225
|
+
} // 保底要展示 1 个
|
|
226
|
+
|
|
227
|
+
|
|
228
|
+
setTagMaxCount(typeAssertion.isArrayNonEmpty(mergedTagList) && tagMaxCount < 1 ? 1 : tagMaxCount + 1);
|
|
229
|
+
}, [showVertical, getTagWidth, containerWidth, mergedTagList]);
|
|
230
|
+
|
|
231
|
+
var renderFooter = function renderFooter() {
|
|
232
|
+
var collapseNode = canToggle ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
233
|
+
className: classname.cx(prefixCls + "__toggle"),
|
|
234
|
+
onClick: miniToggleAction.not
|
|
235
|
+
}, mini ? /*#__PURE__*/React__default["default"].createElement(icons.MenuUnfoldOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.MenuFoldOutlined, null)) : null;
|
|
236
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, typeAssertion.isFunction(footerRender) ? footerRender({
|
|
237
|
+
collapsed: showMini,
|
|
238
|
+
collapseNode: collapseNode
|
|
239
|
+
}) : collapseNode);
|
|
240
|
+
};
|
|
241
|
+
|
|
242
|
+
var cls = classname.cx(prefixCls, className, prefixCls + "--" + placement, mini && prefixCls + "--mini", (expandedType === 'pop' || showAllSubMenus || mini) && prefixCls + "--popup");
|
|
134
243
|
return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
|
|
135
|
-
ref: ref,
|
|
244
|
+
ref: useMergeRefs.useMergeRefs(ref, setContainerElement),
|
|
136
245
|
role: role,
|
|
137
246
|
className: cls
|
|
138
247
|
}, rest), /*#__PURE__*/React__default["default"].createElement(context["default"].Provider, {
|
|
@@ -151,25 +260,50 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
151
260
|
}
|
|
152
261
|
}, /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
153
262
|
className: classname.cx(prefixCls + "__wrapper")
|
|
154
|
-
},
|
|
155
|
-
return
|
|
263
|
+
}, mergedTagList.map(function (item, index) {
|
|
264
|
+
return showMini ? /*#__PURE__*/React__default["default"].createElement(Tooltip__default["default"], {
|
|
156
265
|
title: item.title,
|
|
157
266
|
key: item.id,
|
|
158
267
|
placement: "right"
|
|
159
268
|
}, /*#__PURE__*/React__default["default"].createElement(MenuItem.MenuItem, Object.assign({}, item, {
|
|
160
|
-
level: 1
|
|
161
|
-
|
|
269
|
+
level: 1,
|
|
270
|
+
render: renderMenuItemMini,
|
|
271
|
+
raw: item
|
|
272
|
+
}))) : /*#__PURE__*/React__default["default"].createElement(MenuItem.MenuItem, Object.assign({
|
|
273
|
+
hidden: index >= tagMaxCount
|
|
274
|
+
}, item, {
|
|
162
275
|
key: item.id,
|
|
163
|
-
level: 1
|
|
276
|
+
level: 1,
|
|
277
|
+
raw: item
|
|
164
278
|
}));
|
|
165
|
-
})
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
279
|
+
}), /*#__PURE__*/React__default["default"].createElement(MenuItem.MenuItem, {
|
|
280
|
+
hidden: showVertical || restTagList.length === 0,
|
|
281
|
+
id: "hi-v4-menu-more",
|
|
282
|
+
title: "\u66F4\u591A",
|
|
283
|
+
children: restTagList
|
|
284
|
+
})), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
285
|
+
className: prefixCls + "__footer"
|
|
286
|
+
}, renderFooter())));
|
|
169
287
|
});
|
|
170
288
|
|
|
171
289
|
if (env.__DEV__) {
|
|
172
290
|
Menu.displayName = 'Menu';
|
|
173
291
|
}
|
|
292
|
+
/**
|
|
293
|
+
* Mini 模式下渲染 item
|
|
294
|
+
*/
|
|
295
|
+
|
|
296
|
+
|
|
297
|
+
var renderMenuItemMini = function renderMenuItemMini(menu) {
|
|
298
|
+
if (typeof menu.icon !== 'undefined') {
|
|
299
|
+
return menu.icon;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
if (typeof menu.title === 'string') {
|
|
303
|
+
return menu.title.substring(0, 1);
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
return menu.title;
|
|
307
|
+
};
|
|
174
308
|
|
|
175
309
|
exports.Menu = Menu;
|
package/lib/cjs/MenuItem.js
CHANGED
|
@@ -48,6 +48,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
48
48
|
var Popper__default = /*#__PURE__*/_interopDefaultLegacy(Popper);
|
|
49
49
|
|
|
50
50
|
var MENU_PREFIX = classname.getPrefixCls('menu');
|
|
51
|
+
var hiddenStyle = {
|
|
52
|
+
position: 'absolute',
|
|
53
|
+
opacity: 0,
|
|
54
|
+
order: 9999,
|
|
55
|
+
visibility: 'hidden'
|
|
56
|
+
};
|
|
51
57
|
var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
52
58
|
var _cx, _cx2;
|
|
53
59
|
|
|
@@ -62,7 +68,11 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
62
68
|
level = _a$level === void 0 ? 1 : _a$level,
|
|
63
69
|
children = _a.children,
|
|
64
70
|
parentIds = _a.parentIds,
|
|
65
|
-
|
|
71
|
+
_a$hidden = _a.hidden,
|
|
72
|
+
hidden = _a$hidden === void 0 ? false : _a$hidden,
|
|
73
|
+
render = _a.render,
|
|
74
|
+
raw = _a.raw,
|
|
75
|
+
rest = tslib.__rest(_a, ["prefixCls", "className", "icon", "title", "disabled", "id", "level", "children", "parentIds", "hidden", "render", "raw"]);
|
|
66
76
|
|
|
67
77
|
var itemRef = React.useRef(null);
|
|
68
78
|
|
|
@@ -85,7 +95,8 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
85
95
|
var mergedRef = useMergeRefs.useMergeRefs(itemRef, ref);
|
|
86
96
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("li", Object.assign({
|
|
87
97
|
ref: mergedRef,
|
|
88
|
-
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)
|
|
98
|
+
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),
|
|
99
|
+
style: hidden ? hiddenStyle : undefined
|
|
89
100
|
}, rest), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
90
101
|
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)),
|
|
91
102
|
onClick: function onClick() {
|
|
@@ -95,7 +106,8 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
95
106
|
}
|
|
96
107
|
} else {
|
|
97
108
|
if (clickMenu) {
|
|
98
|
-
|
|
109
|
+
// @ts-ignore
|
|
110
|
+
clickMenu(id, raw);
|
|
99
111
|
}
|
|
100
112
|
|
|
101
113
|
if (closeAllPopper && !(placement === 'vertical' && expandedType === 'collapse' && mini === false)) {
|
|
@@ -110,7 +122,11 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
110
122
|
className: prefixCls + "-item__icon"
|
|
111
123
|
}, icon) : null, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
112
124
|
className: prefixCls + "-item__content"
|
|
113
|
-
},
|
|
125
|
+
}, typeAssertion.isFunction(render) ? render({
|
|
126
|
+
id: id,
|
|
127
|
+
icon: icon,
|
|
128
|
+
title: title
|
|
129
|
+
}) : title), hasChildren && !mini && placement === 'vertical' && expandedType === 'collapse' && !showAllSubMenus && ((expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/React__default["default"].createElement(Arrow, {
|
|
114
130
|
prefixCls: prefixCls + "-item",
|
|
115
131
|
direction: "up"
|
|
116
132
|
}) : /*#__PURE__*/React__default["default"].createElement(Arrow, {
|
|
@@ -136,7 +152,8 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
136
152
|
return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
|
|
137
153
|
key: child.id,
|
|
138
154
|
level: level + 1,
|
|
139
|
-
parentIds: _parentIds
|
|
155
|
+
parentIds: _parentIds,
|
|
156
|
+
raw: child
|
|
140
157
|
}));
|
|
141
158
|
}))) : null), hasChildren && placement === 'vertical' && mini && !showAllSubMenus && expandedType === 'collapse' && (level === 1 ? /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], {
|
|
142
159
|
visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
|
|
@@ -236,7 +253,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
236
253
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
237
254
|
onClick: function onClick() {
|
|
238
255
|
if (clickMenu) {
|
|
239
|
-
clickMenu(item.id);
|
|
256
|
+
clickMenu(item.id, item);
|
|
240
257
|
}
|
|
241
258
|
|
|
242
259
|
if (closePopper) {
|
|
@@ -309,7 +326,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
309
326
|
className: classname.cx(prefixCls + "-item", (_cx4 = {}, _cx4[prefixCls + "-item--active"] = activeId === item.id, _cx4)),
|
|
310
327
|
onClick: function onClick() {
|
|
311
328
|
if (clickMenu) {
|
|
312
|
-
clickMenu(item.id);
|
|
329
|
+
clickMenu(item.id, item);
|
|
313
330
|
}
|
|
314
331
|
|
|
315
332
|
if (closePopper) {
|
|
@@ -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 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__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__wrapper {padding: 0;margin: 0; }.hi-v4-menu--horizontal {width: 100%;overflow
|
|
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 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__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__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--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;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);-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; }";
|
|
16
16
|
|
|
17
17
|
var __styleInject__ = require('inject-head-style')["default"];
|
|
18
18
|
|
package/lib/esm/Menu.js
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
9
|
*/
|
|
10
10
|
import { __rest } from 'tslib';
|
|
11
|
-
import React, { forwardRef, useState, useEffect, useCallback } from 'react';
|
|
11
|
+
import React, { forwardRef, useState, useEffect, useCallback, useMemo, useLayoutEffect } from 'react';
|
|
12
12
|
import { getPrefixCls, cx } from '@hi-ui/classname';
|
|
13
13
|
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@hi-ui/icons';
|
|
14
14
|
import { __DEV__ } from '@hi-ui/env';
|
|
@@ -17,16 +17,20 @@ import MenuContext from './context.js';
|
|
|
17
17
|
import { getAncestorIds } from './util.js';
|
|
18
18
|
import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
|
|
19
19
|
import Tooltip from '@hi-ui/tooltip';
|
|
20
|
+
import { useUncontrolledToggle } from '@hi-ui/use-toggle';
|
|
21
|
+
import { getTreeNodesWithChildren } from '@hi-ui/tree-utils';
|
|
22
|
+
import { isArrayNonEmpty, isFunction } from '@hi-ui/type-assertion';
|
|
23
|
+
import { useResizeObserver } from '@hi-ui/use-resize-observer';
|
|
24
|
+
import { useMergeRefs } from '@hi-ui/use-merge-refs';
|
|
20
25
|
var MENU_PREFIX = getPrefixCls('menu');
|
|
21
26
|
var DEFAULT_EXPANDED_IDS = [];
|
|
22
27
|
var NOOP_ARRAY = [];
|
|
28
|
+
var MIN_WIDTH = 56;
|
|
23
29
|
/**
|
|
24
30
|
* TODO: What is Menu
|
|
25
31
|
*/
|
|
26
32
|
|
|
27
33
|
var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
28
|
-
var _cx;
|
|
29
|
-
|
|
30
34
|
var _a$prefixCls = _a.prefixCls,
|
|
31
35
|
prefixCls = _a$prefixCls === void 0 ? MENU_PREFIX : _a$prefixCls,
|
|
32
36
|
_a$role = _a.role,
|
|
@@ -42,6 +46,8 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
42
46
|
expandedType = _a$expandedType === void 0 ? 'collapse' : _a$expandedType,
|
|
43
47
|
_a$showAllSubMenus = _a.showAllSubMenus,
|
|
44
48
|
showAllSubMenus = _a$showAllSubMenus === void 0 ? false : _a$showAllSubMenus,
|
|
49
|
+
_a$defaultExpandedAll = _a.defaultExpandedAll,
|
|
50
|
+
defaultExpandedAll = _a$defaultExpandedAll === void 0 ? false : _a$defaultExpandedAll,
|
|
45
51
|
_a$defaultExpandedIds = _a.defaultExpandedIds,
|
|
46
52
|
defaultExpandedIds = _a$defaultExpandedIds === void 0 ? DEFAULT_EXPANDED_IDS : _a$defaultExpandedIds,
|
|
47
53
|
expandedIdsProp = _a.expandedIds,
|
|
@@ -50,8 +56,13 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
50
56
|
defaultActiveId = _a$defaultActiveId === void 0 ? '' : _a$defaultActiveId,
|
|
51
57
|
activeIdProp = _a.activeId,
|
|
52
58
|
onClickSubMenu = _a.onClickSubMenu,
|
|
59
|
+
collapsed = _a.collapsed,
|
|
60
|
+
_a$defaultCollapsed = _a.defaultCollapsed,
|
|
61
|
+
defaultCollapsed = _a$defaultCollapsed === void 0 ? false : _a$defaultCollapsed,
|
|
62
|
+
onCollapse = _a.onCollapse,
|
|
63
|
+
footerRender = _a.footerRender,
|
|
53
64
|
onClick = _a.onClick,
|
|
54
|
-
rest = __rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "onClick"]);
|
|
65
|
+
rest = __rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandedAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "onCollapse", "footerRender", "onClick"]);
|
|
55
66
|
|
|
56
67
|
var _useUncontrolledState = useUncontrolledState(defaultActiveId, activeIdProp, onClick),
|
|
57
68
|
activeId = _useUncontrolledState[0],
|
|
@@ -67,12 +78,16 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
67
78
|
updateActiveParents(getAncestorIds(activeId, data));
|
|
68
79
|
}, [activeId, data]);
|
|
69
80
|
|
|
70
|
-
var _useUncontrolledState2 = useUncontrolledState(
|
|
81
|
+
var _useUncontrolledState2 = useUncontrolledState(function () {
|
|
82
|
+
return defaultExpandedAll ? getTreeNodesWithChildren(data).map(function (node) {
|
|
83
|
+
return node.id;
|
|
84
|
+
}) : defaultExpandedIds;
|
|
85
|
+
}, expandedIdsProp, onExpand),
|
|
71
86
|
expandedIds = _useUncontrolledState2[0],
|
|
72
87
|
updateExpandedIds = _useUncontrolledState2[1];
|
|
73
88
|
|
|
74
|
-
var clickMenu = useCallback(function (id) {
|
|
75
|
-
updateActiveId(id);
|
|
89
|
+
var clickMenu = useCallback(function (id, raw) {
|
|
90
|
+
updateActiveId(id, raw);
|
|
76
91
|
}, [updateActiveId]);
|
|
77
92
|
var clickSubMenu = useCallback(function (id) {
|
|
78
93
|
var nextExpandedIds = expandedIds.includes(id) ? expandedIds.filter(function (expandedId) {
|
|
@@ -93,18 +108,107 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
93
108
|
updateExpandedIds([]);
|
|
94
109
|
}, [updateExpandedIds]);
|
|
95
110
|
|
|
96
|
-
var
|
|
97
|
-
|
|
98
|
-
|
|
111
|
+
var _useUncontrolledToggl = useUncontrolledToggle({
|
|
112
|
+
defaultVisible: defaultCollapsed,
|
|
113
|
+
visible: collapsed,
|
|
114
|
+
onToggle: onCollapse
|
|
115
|
+
}),
|
|
116
|
+
mini = _useUncontrolledToggl[0],
|
|
117
|
+
miniToggleAction = _useUncontrolledToggl[1];
|
|
118
|
+
|
|
119
|
+
var showVertical = placement === 'vertical';
|
|
120
|
+
var canToggle = showVertical && showCollapse;
|
|
121
|
+
var showMini = showVertical && mini;
|
|
122
|
+
|
|
123
|
+
var _useState2 = useState(null),
|
|
124
|
+
containerElement = _useState2[0],
|
|
125
|
+
setContainerElement = _useState2[1];
|
|
126
|
+
|
|
127
|
+
var _useState3 = useState(),
|
|
128
|
+
_useState3$ = _useState3[0],
|
|
129
|
+
containerWidth = _useState3$ === void 0 ? 0 : _useState3$,
|
|
130
|
+
setContainerWidth = _useState3[1];
|
|
131
|
+
|
|
132
|
+
useResizeObserver({
|
|
133
|
+
element: containerElement,
|
|
134
|
+
disabled: showVertical,
|
|
135
|
+
getSize: function getSize(element) {
|
|
136
|
+
var itemRect = element.getBoundingClientRect();
|
|
137
|
+
return itemRect.width;
|
|
138
|
+
},
|
|
139
|
+
onResize: function onResize(el, width) {
|
|
140
|
+
setContainerWidth(width);
|
|
141
|
+
}
|
|
142
|
+
});
|
|
143
|
+
|
|
144
|
+
var _useState4 = useState(0),
|
|
145
|
+
tagMaxCount = _useState4[0],
|
|
146
|
+
setTagMaxCount = _useState4[1];
|
|
147
|
+
|
|
148
|
+
var mergedTagList = useMemo(function () {
|
|
149
|
+
if (showVertical) return data;
|
|
150
|
+
if (containerWidth < MIN_WIDTH) return data;
|
|
151
|
+
return data.slice(0, Math.min(data.length, containerWidth / MIN_WIDTH));
|
|
152
|
+
}, [showVertical, data, containerWidth]);
|
|
153
|
+
var restTagList = useMemo(function () {
|
|
154
|
+
if (tagMaxCount > 0) return data.slice(tagMaxCount);
|
|
155
|
+
return [];
|
|
156
|
+
}, [data, tagMaxCount]);
|
|
157
|
+
var getTagWidth = useCallback(function (index) {
|
|
158
|
+
if (!containerElement) return MIN_WIDTH;
|
|
159
|
+
var elements = containerElement.getElementsByClassName('hi-v4-menu-item');
|
|
160
|
+
var element = elements && elements[index];
|
|
161
|
+
if (!element) return MIN_WIDTH;
|
|
162
|
+
return element.getBoundingClientRect().width;
|
|
163
|
+
}, [containerElement]);
|
|
164
|
+
useLayoutEffect(function () {
|
|
165
|
+
if (showVertical) return;
|
|
166
|
+
var tagMaxCount = 0;
|
|
167
|
+
|
|
168
|
+
if (isArrayNonEmpty(mergedTagList)) {
|
|
169
|
+
var len = mergedTagList.length;
|
|
170
|
+
var lastIndex = len - 1;
|
|
171
|
+
var totalWidth = 72; // 更多
|
|
172
|
+
|
|
173
|
+
for (var i = 0; i < len; ++i) {
|
|
174
|
+
var currentTagWidth = getTagWidth(i);
|
|
175
|
+
|
|
176
|
+
if (currentTagWidth === undefined) {
|
|
177
|
+
break;
|
|
178
|
+
}
|
|
99
179
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
180
|
+
totalWidth += currentTagWidth;
|
|
181
|
+
|
|
182
|
+
if (lastIndex === 0 && totalWidth <= containerWidth || i === lastIndex - 1 && totalWidth + getTagWidth(lastIndex) <= containerWidth) {
|
|
183
|
+
tagMaxCount = lastIndex;
|
|
184
|
+
break;
|
|
185
|
+
} else if (totalWidth > containerWidth) {
|
|
186
|
+
tagMaxCount = i - 1;
|
|
187
|
+
break;
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
} else {
|
|
191
|
+
tagMaxCount = 0;
|
|
192
|
+
} // 保底要展示 1 个
|
|
193
|
+
|
|
194
|
+
|
|
195
|
+
setTagMaxCount(isArrayNonEmpty(mergedTagList) && tagMaxCount < 1 ? 1 : tagMaxCount + 1);
|
|
196
|
+
}, [showVertical, getTagWidth, containerWidth, mergedTagList]);
|
|
197
|
+
|
|
198
|
+
var renderFooter = function renderFooter() {
|
|
199
|
+
var collapseNode = canToggle ? /*#__PURE__*/React.createElement("div", {
|
|
200
|
+
className: cx(prefixCls + "__toggle"),
|
|
201
|
+
onClick: miniToggleAction.not
|
|
202
|
+
}, mini ? /*#__PURE__*/React.createElement(MenuUnfoldOutlined, null) : /*#__PURE__*/React.createElement(MenuFoldOutlined, null)) : null;
|
|
203
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, isFunction(footerRender) ? footerRender({
|
|
204
|
+
collapsed: showMini,
|
|
205
|
+
collapseNode: collapseNode
|
|
206
|
+
}) : collapseNode);
|
|
207
|
+
};
|
|
208
|
+
|
|
209
|
+
var cls = cx(prefixCls, className, prefixCls + "--" + placement, mini && prefixCls + "--mini", (expandedType === 'pop' || showAllSubMenus || mini) && prefixCls + "--popup");
|
|
106
210
|
return /*#__PURE__*/React.createElement("div", Object.assign({
|
|
107
|
-
ref: ref,
|
|
211
|
+
ref: useMergeRefs(ref, setContainerElement),
|
|
108
212
|
role: role,
|
|
109
213
|
className: cls
|
|
110
214
|
}, rest), /*#__PURE__*/React.createElement(MenuContext.Provider, {
|
|
@@ -123,25 +227,50 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
123
227
|
}
|
|
124
228
|
}, /*#__PURE__*/React.createElement("ul", {
|
|
125
229
|
className: cx(prefixCls + "__wrapper")
|
|
126
|
-
},
|
|
127
|
-
return
|
|
230
|
+
}, mergedTagList.map(function (item, index) {
|
|
231
|
+
return showMini ? /*#__PURE__*/React.createElement(Tooltip, {
|
|
128
232
|
title: item.title,
|
|
129
233
|
key: item.id,
|
|
130
234
|
placement: "right"
|
|
131
235
|
}, /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, item, {
|
|
132
|
-
level: 1
|
|
133
|
-
|
|
236
|
+
level: 1,
|
|
237
|
+
render: renderMenuItemMini,
|
|
238
|
+
raw: item
|
|
239
|
+
}))) : /*#__PURE__*/React.createElement(MenuItem, Object.assign({
|
|
240
|
+
hidden: index >= tagMaxCount
|
|
241
|
+
}, item, {
|
|
134
242
|
key: item.id,
|
|
135
|
-
level: 1
|
|
243
|
+
level: 1,
|
|
244
|
+
raw: item
|
|
136
245
|
}));
|
|
137
|
-
})
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
246
|
+
}), /*#__PURE__*/React.createElement(MenuItem, {
|
|
247
|
+
hidden: showVertical || restTagList.length === 0,
|
|
248
|
+
id: "hi-v4-menu-more",
|
|
249
|
+
title: "\u66F4\u591A",
|
|
250
|
+
children: restTagList
|
|
251
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
252
|
+
className: prefixCls + "__footer"
|
|
253
|
+
}, renderFooter())));
|
|
141
254
|
});
|
|
142
255
|
|
|
143
256
|
if (__DEV__) {
|
|
144
257
|
Menu.displayName = 'Menu';
|
|
145
258
|
}
|
|
259
|
+
/**
|
|
260
|
+
* Mini 模式下渲染 item
|
|
261
|
+
*/
|
|
262
|
+
|
|
263
|
+
|
|
264
|
+
var renderMenuItemMini = function renderMenuItemMini(menu) {
|
|
265
|
+
if (typeof menu.icon !== 'undefined') {
|
|
266
|
+
return menu.icon;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
if (typeof menu.title === 'string') {
|
|
270
|
+
return menu.title.substring(0, 1);
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
return menu.title;
|
|
274
|
+
};
|
|
146
275
|
|
|
147
276
|
export { Menu };
|
package/lib/esm/MenuItem.js
CHANGED
|
@@ -15,10 +15,16 @@ import { RightOutlined, DownOutlined, UpOutlined } from '@hi-ui/icons';
|
|
|
15
15
|
import MenuContext from './context.js';
|
|
16
16
|
import Popper from '@hi-ui/popper';
|
|
17
17
|
import { Expander } from './Expander.js';
|
|
18
|
-
import { isArrayNonEmpty } from '@hi-ui/type-assertion';
|
|
18
|
+
import { isArrayNonEmpty, isFunction } from '@hi-ui/type-assertion';
|
|
19
19
|
import { times } from '@hi-ui/array-utils';
|
|
20
20
|
import { useMergeRefs } from '@hi-ui/use-merge-refs';
|
|
21
21
|
var MENU_PREFIX = getPrefixCls('menu');
|
|
22
|
+
var hiddenStyle = {
|
|
23
|
+
position: 'absolute',
|
|
24
|
+
opacity: 0,
|
|
25
|
+
order: 9999,
|
|
26
|
+
visibility: 'hidden'
|
|
27
|
+
};
|
|
22
28
|
var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
23
29
|
var _cx, _cx2;
|
|
24
30
|
|
|
@@ -33,7 +39,11 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
33
39
|
level = _a$level === void 0 ? 1 : _a$level,
|
|
34
40
|
children = _a.children,
|
|
35
41
|
parentIds = _a.parentIds,
|
|
36
|
-
|
|
42
|
+
_a$hidden = _a.hidden,
|
|
43
|
+
hidden = _a$hidden === void 0 ? false : _a$hidden,
|
|
44
|
+
render = _a.render,
|
|
45
|
+
raw = _a.raw,
|
|
46
|
+
rest = __rest(_a, ["prefixCls", "className", "icon", "title", "disabled", "id", "level", "children", "parentIds", "hidden", "render", "raw"]);
|
|
37
47
|
|
|
38
48
|
var itemRef = useRef(null);
|
|
39
49
|
|
|
@@ -56,7 +66,8 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
56
66
|
var mergedRef = useMergeRefs(itemRef, ref);
|
|
57
67
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", Object.assign({
|
|
58
68
|
ref: mergedRef,
|
|
59
|
-
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)
|
|
69
|
+
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),
|
|
70
|
+
style: hidden ? hiddenStyle : undefined
|
|
60
71
|
}, rest), /*#__PURE__*/React.createElement("div", {
|
|
61
72
|
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)),
|
|
62
73
|
onClick: function onClick() {
|
|
@@ -66,7 +77,8 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
66
77
|
}
|
|
67
78
|
} else {
|
|
68
79
|
if (clickMenu) {
|
|
69
|
-
|
|
80
|
+
// @ts-ignore
|
|
81
|
+
clickMenu(id, raw);
|
|
70
82
|
}
|
|
71
83
|
|
|
72
84
|
if (closeAllPopper && !(placement === 'vertical' && expandedType === 'collapse' && mini === false)) {
|
|
@@ -81,7 +93,11 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
81
93
|
className: prefixCls + "-item__icon"
|
|
82
94
|
}, icon) : null, /*#__PURE__*/React.createElement("span", {
|
|
83
95
|
className: prefixCls + "-item__content"
|
|
84
|
-
},
|
|
96
|
+
}, isFunction(render) ? render({
|
|
97
|
+
id: id,
|
|
98
|
+
icon: icon,
|
|
99
|
+
title: title
|
|
100
|
+
}) : title), hasChildren && !mini && placement === 'vertical' && expandedType === 'collapse' && !showAllSubMenus && ((expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/React.createElement(Arrow, {
|
|
85
101
|
prefixCls: prefixCls + "-item",
|
|
86
102
|
direction: "up"
|
|
87
103
|
}) : /*#__PURE__*/React.createElement(Arrow, {
|
|
@@ -107,7 +123,8 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
107
123
|
return /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, child, {
|
|
108
124
|
key: child.id,
|
|
109
125
|
level: level + 1,
|
|
110
|
-
parentIds: _parentIds
|
|
126
|
+
parentIds: _parentIds,
|
|
127
|
+
raw: child
|
|
111
128
|
}));
|
|
112
129
|
}))) : null), hasChildren && placement === 'vertical' && mini && !showAllSubMenus && expandedType === 'collapse' && (level === 1 ? /*#__PURE__*/React.createElement(Popper, {
|
|
113
130
|
visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
|
|
@@ -207,7 +224,7 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
207
224
|
return /*#__PURE__*/React.createElement("div", {
|
|
208
225
|
onClick: function onClick() {
|
|
209
226
|
if (clickMenu) {
|
|
210
|
-
clickMenu(item.id);
|
|
227
|
+
clickMenu(item.id, item);
|
|
211
228
|
}
|
|
212
229
|
|
|
213
230
|
if (closePopper) {
|
|
@@ -280,7 +297,7 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
280
297
|
className: cx(prefixCls + "-item", (_cx4 = {}, _cx4[prefixCls + "-item--active"] = activeId === item.id, _cx4)),
|
|
281
298
|
onClick: function onClick() {
|
|
282
299
|
if (clickMenu) {
|
|
283
|
-
clickMenu(item.id);
|
|
300
|
+
clickMenu(item.id, item);
|
|
284
301
|
}
|
|
285
302
|
|
|
286
303
|
if (closePopper) {
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
9
|
*/
|
|
10
10
|
import __styleInject__ from 'inject-head-style';
|
|
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 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__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__wrapper {padding: 0;margin: 0; }.hi-v4-menu--horizontal {width: 100%;overflow
|
|
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 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__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__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--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;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);-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; }";
|
|
12
12
|
|
|
13
13
|
__styleInject__(css_248z);
|
|
14
14
|
|
package/lib/types/Menu.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { HiBaseHTMLProps } from '@hi-ui/core';
|
|
3
|
-
import { MenuDataItem } from './types';
|
|
3
|
+
import { MenuDataItem, MenuFooterRenderProps } from './types';
|
|
4
4
|
/**
|
|
5
5
|
* TODO: What is Menu
|
|
6
6
|
*/
|
|
@@ -26,6 +26,10 @@ export interface MenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'> {
|
|
|
26
26
|
* 是否收起子菜单，菜单垂直展示时有效
|
|
27
27
|
*/
|
|
28
28
|
collapsed?: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* 默认是否收起子菜单，菜单垂直展示时有效
|
|
31
|
+
*/
|
|
32
|
+
defaultCollapsed?: boolean;
|
|
29
33
|
/**
|
|
30
34
|
* 是否显示收缩开关，菜单垂直展示时有效
|
|
31
35
|
*/
|
|
@@ -47,11 +51,15 @@ export interface MenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'> {
|
|
|
47
51
|
*/
|
|
48
52
|
expandedType?: 'collapse' | 'pop';
|
|
49
53
|
/**
|
|
50
|
-
*
|
|
54
|
+
* 首次渲染默认展开所有菜单项，为非受控模式
|
|
55
|
+
*/
|
|
56
|
+
defaultExpandedAll?: boolean;
|
|
57
|
+
/**
|
|
58
|
+
* 首次渲染默认展开菜单项 ids 列表，为非受控模式
|
|
51
59
|
*/
|
|
52
60
|
defaultExpandedIds?: React.ReactText[];
|
|
53
61
|
/**
|
|
54
|
-
* 展开菜单项 ids
|
|
62
|
+
* 展开菜单项 ids 列表，开启受控
|
|
55
63
|
*/
|
|
56
64
|
expandedIds?: React.ReactText[];
|
|
57
65
|
/**
|
|
@@ -61,7 +69,7 @@ export interface MenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'> {
|
|
|
61
69
|
/**
|
|
62
70
|
* 点击菜单选项时的回调
|
|
63
71
|
*/
|
|
64
|
-
onClick?: (menuId: React.ReactText) => void;
|
|
72
|
+
onClick?: (menuId: React.ReactText, menuItem: MenuDataItem) => void;
|
|
65
73
|
/**
|
|
66
74
|
* 点击父菜单项时的回调
|
|
67
75
|
*/
|
|
@@ -70,4 +78,8 @@ export interface MenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'> {
|
|
|
70
78
|
* 点击收缩开关时的回调
|
|
71
79
|
*/
|
|
72
80
|
onCollapse?: (collapsed: boolean) => void;
|
|
81
|
+
/**
|
|
82
|
+
* 底部渲染器
|
|
83
|
+
*/
|
|
84
|
+
footerRender?: (props: MenuFooterRenderProps) => React.ReactNode;
|
|
73
85
|
}
|
package/lib/types/MenuItem.d.ts
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { HiBaseHTMLProps } from '@hi-ui/core';
|
|
3
|
+
import { MenuDataItem } from './types';
|
|
3
4
|
export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLLIElement | null>>;
|
|
4
5
|
export interface MenuItemProps extends Omit<HiBaseHTMLProps<'li'>, 'id'> {
|
|
5
6
|
id: React.ReactText;
|
|
6
7
|
title: React.ReactNode;
|
|
7
8
|
icon?: React.ReactNode;
|
|
8
9
|
disabled?: boolean;
|
|
9
|
-
children?:
|
|
10
|
+
children?: MenuDataItem[];
|
|
10
11
|
level?: number;
|
|
11
12
|
parentIds?: React.ReactText[];
|
|
13
|
+
render?: (node: MenuDataItem) => React.ReactNode;
|
|
14
|
+
raw?: MenuDataItem;
|
|
12
15
|
}
|
package/lib/types/context.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { MenuDataItem } from './types';
|
|
2
3
|
declare const MenuContext: React.Context<{
|
|
3
4
|
placement?: "vertical" | "horizontal" | undefined;
|
|
4
5
|
expandedType?: "collapse" | "pop" | undefined;
|
|
@@ -7,7 +8,7 @@ declare const MenuContext: React.Context<{
|
|
|
7
8
|
expandedIds?: React.ReactText[] | undefined;
|
|
8
9
|
activeId?: React.ReactText | undefined;
|
|
9
10
|
activeParents?: React.ReactText[] | undefined;
|
|
10
|
-
clickMenu?: ((id: React.ReactText) => void) | undefined;
|
|
11
|
+
clickMenu?: ((id: React.ReactText, raw: MenuDataItem) => void) | undefined;
|
|
11
12
|
clickSubMenu?: ((id: React.ReactText) => void) | undefined;
|
|
12
13
|
closePopper?: ((id: React.ReactText) => void) | undefined;
|
|
13
14
|
closeAllPopper?: (() => void) | undefined;
|
package/lib/types/types.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hi-ui/menu",
|
|
3
|
-
"version": "4.0.0-beta.
|
|
3
|
+
"version": "4.0.0-beta.29",
|
|
4
4
|
"description": "A sub-package for @hi-ui/hiui.",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "HIUI <mi-hiui@xiaomi.com>",
|
|
@@ -45,15 +45,18 @@
|
|
|
45
45
|
"dependencies": {
|
|
46
46
|
"@hi-ui/array-utils": "^4.0.0-beta.8",
|
|
47
47
|
"@hi-ui/classname": "^4.0.0-beta.0",
|
|
48
|
-
"@hi-ui/core": "^4.0.0-beta.
|
|
49
|
-
"@hi-ui/core-css": "^4.0.0-beta.
|
|
48
|
+
"@hi-ui/core": "^4.0.0-beta.10",
|
|
49
|
+
"@hi-ui/core-css": "^4.0.0-beta.6",
|
|
50
50
|
"@hi-ui/env": "^4.0.0-beta.1",
|
|
51
|
-
"@hi-ui/icons": "^4.0.0-beta.
|
|
52
|
-
"@hi-ui/popper": "^4.0.0-beta.
|
|
51
|
+
"@hi-ui/icons": "^4.0.0-beta.15",
|
|
52
|
+
"@hi-ui/popper": "^4.0.0-beta.20",
|
|
53
53
|
"@hi-ui/times": "^4.0.0-beta.6",
|
|
54
|
-
"@hi-ui/tooltip": "^4.0.0-beta.
|
|
54
|
+
"@hi-ui/tooltip": "^4.0.0-beta.27",
|
|
55
|
+
"@hi-ui/tree-utils": "^4.0.0-beta.6",
|
|
55
56
|
"@hi-ui/type-assertion": "^4.0.0-beta.5",
|
|
56
57
|
"@hi-ui/use-merge-refs": "^4.0.0-beta.5",
|
|
58
|
+
"@hi-ui/use-resize-observer": "^4.0.0-beta.1",
|
|
59
|
+
"@hi-ui/use-toggle": "^4.0.0-beta.6",
|
|
57
60
|
"@hi-ui/use-uncontrolled-state": "^4.0.0-beta.5",
|
|
58
61
|
"react-transition-group": "^4.4.2"
|
|
59
62
|
},
|
|
@@ -66,5 +69,5 @@
|
|
|
66
69
|
"react": "^17.0.1",
|
|
67
70
|
"react-dom": "^17.0.1"
|
|
68
71
|
},
|
|
69
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "73dbc1f9819eb21a69153c663ddff732f5446e92"
|
|
70
73
|
}
|