@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/cjs/MenuItem.js
CHANGED
|
@@ -9,44 +9,17 @@
|
|
|
9
9
|
*/
|
|
10
10
|
'use strict';
|
|
11
11
|
|
|
12
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
13
|
-
|
|
14
|
-
Object.defineProperty(exports, '__esModule', {
|
|
15
|
-
value: true
|
|
16
|
-
});
|
|
17
|
-
|
|
18
12
|
var tslib = require('tslib');
|
|
19
|
-
|
|
20
13
|
var React = require('react');
|
|
21
|
-
|
|
22
14
|
var classname = require('@hi-ui/classname');
|
|
23
|
-
|
|
24
15
|
var env = require('@hi-ui/env');
|
|
25
|
-
|
|
26
16
|
var icons = require('@hi-ui/icons');
|
|
27
|
-
|
|
28
17
|
var Popper = require('@hi-ui/popper');
|
|
29
|
-
|
|
30
18
|
var typeAssertion = require('@hi-ui/type-assertion');
|
|
31
|
-
|
|
32
19
|
var arrayUtils = require('@hi-ui/array-utils');
|
|
33
|
-
|
|
34
20
|
var useMergeRefs = require('@hi-ui/use-merge-refs');
|
|
35
|
-
|
|
36
21
|
var context = require('./context.js');
|
|
37
|
-
|
|
38
22
|
var Expander = require('./Expander.js');
|
|
39
|
-
|
|
40
|
-
function _interopDefaultLegacy(e) {
|
|
41
|
-
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
42
|
-
'default': e
|
|
43
|
-
};
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
47
|
-
|
|
48
|
-
var Popper__default = /*#__PURE__*/_interopDefaultLegacy(Popper);
|
|
49
|
-
|
|
50
23
|
var MENU_PREFIX = classname.getPrefixCls('menu');
|
|
51
24
|
var hiddenStyle = {
|
|
52
25
|
position: 'absolute',
|
|
@@ -56,58 +29,52 @@ var hiddenStyle = {
|
|
|
56
29
|
};
|
|
57
30
|
var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
58
31
|
var _cx, _cx2;
|
|
59
|
-
|
|
60
32
|
var _a$prefixCls = _a.prefixCls,
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
33
|
+
prefixCls = _a$prefixCls === void 0 ? MENU_PREFIX : _a$prefixCls,
|
|
34
|
+
className = _a.className,
|
|
35
|
+
icon = _a.icon,
|
|
36
|
+
title = _a.title,
|
|
37
|
+
disabled = _a.disabled,
|
|
38
|
+
id = _a.id,
|
|
39
|
+
_a$level = _a.level,
|
|
40
|
+
level = _a$level === void 0 ? 1 : _a$level,
|
|
41
|
+
children = _a.children,
|
|
42
|
+
parentIds = _a.parentIds,
|
|
43
|
+
_a$hidden = _a.hidden,
|
|
44
|
+
hidden = _a$hidden === void 0 ? false : _a$hidden,
|
|
45
|
+
render = _a.render,
|
|
46
|
+
raw = _a.raw,
|
|
47
|
+
_a$size = _a.size,
|
|
48
|
+
size = _a$size === void 0 ? 'lg' : _a$size,
|
|
49
|
+
rest = tslib.__rest(_a, ["prefixCls", "className", "icon", "title", "disabled", "id", "level", "children", "parentIds", "hidden", "render", "raw", "size"]);
|
|
79
50
|
var itemRef = React.useRef(null);
|
|
80
|
-
|
|
81
51
|
var _useContext = React.useContext(context["default"]),
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
52
|
+
placement = _useContext.placement,
|
|
53
|
+
expandedType = _useContext.expandedType,
|
|
54
|
+
showAllSubMenus = _useContext.showAllSubMenus,
|
|
55
|
+
mini = _useContext.mini,
|
|
56
|
+
activeId = _useContext.activeId,
|
|
57
|
+
closePopper = _useContext.closePopper,
|
|
58
|
+
expandedIds = _useContext.expandedIds,
|
|
59
|
+
clickMenu = _useContext.clickMenu,
|
|
60
|
+
clickSubMenu = _useContext.clickSubMenu,
|
|
61
|
+
closeAllPopper = _useContext.closeAllPopper,
|
|
62
|
+
activeParents = _useContext.activeParents,
|
|
63
|
+
overlayClassName = _useContext.overlayClassName;
|
|
95
64
|
var _parentIds = (parentIds || []).concat(id);
|
|
96
|
-
|
|
97
65
|
var hasChildren = typeAssertion.isArrayNonEmpty(children);
|
|
98
66
|
var mergedRef = useMergeRefs.useMergeRefs(itemRef, ref);
|
|
99
|
-
return /*#__PURE__*/
|
|
67
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", Object.assign({
|
|
100
68
|
ref: mergedRef,
|
|
101
69
|
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),
|
|
102
70
|
style: hidden ? hiddenStyle : undefined
|
|
103
|
-
}, rest), /*#__PURE__*/
|
|
71
|
+
}, rest), /*#__PURE__*/React.createElement("div", {
|
|
104
72
|
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)),
|
|
105
73
|
onClick: function onClick() {
|
|
106
74
|
if (typeAssertion.isArrayNonEmpty(children)) {
|
|
107
75
|
!disabled && (clickSubMenu === null || clickSubMenu === void 0 ? void 0 : clickSubMenu(id));
|
|
108
76
|
} else {
|
|
109
77
|
!disabled && (clickMenu === null || clickMenu === void 0 ? void 0 : clickMenu(id, raw));
|
|
110
|
-
|
|
111
78
|
if (closeAllPopper && !(placement === 'vertical' && expandedType === 'collapse' && mini === false)) {
|
|
112
79
|
closeAllPopper();
|
|
113
80
|
}
|
|
@@ -116,38 +83,38 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
116
83
|
}, placement === 'vertical' && expandedType === 'collapse' && !mini ? renderIndent({
|
|
117
84
|
prefixCls: prefixCls + "-item",
|
|
118
85
|
depth: level - 1
|
|
119
|
-
}) : null, icon ? /*#__PURE__*/
|
|
86
|
+
}) : null, icon ? /*#__PURE__*/React.createElement("span", {
|
|
120
87
|
className: prefixCls + "-item__icon"
|
|
121
|
-
}, icon) : null, /*#__PURE__*/
|
|
88
|
+
}, icon) : null, /*#__PURE__*/React.createElement("span", {
|
|
122
89
|
className: prefixCls + "-item__content"
|
|
123
90
|
}, typeAssertion.isFunction(render) ? render({
|
|
124
91
|
id: id,
|
|
125
92
|
icon: icon,
|
|
126
93
|
title: title
|
|
127
|
-
}, level) : title), hasChildren && !mini && placement === 'vertical' && expandedType === 'collapse' && !showAllSubMenus && (!disabled && (expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/
|
|
94
|
+
}, level) : title), hasChildren && !mini && placement === 'vertical' && expandedType === 'collapse' && !showAllSubMenus && (!disabled && (expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/React.createElement(Arrow, {
|
|
128
95
|
prefixCls: prefixCls + "-item",
|
|
129
96
|
direction: "up"
|
|
130
|
-
}) : /*#__PURE__*/
|
|
97
|
+
}) : /*#__PURE__*/React.createElement(Arrow, {
|
|
131
98
|
prefixCls: prefixCls + "-item",
|
|
132
99
|
direction: "down"
|
|
133
|
-
})), hasChildren && mini && level > 1 && placement === 'vertical' ? /*#__PURE__*/
|
|
100
|
+
})), hasChildren && mini && level > 1 && placement === 'vertical' ? /*#__PURE__*/React.createElement(Arrow, {
|
|
134
101
|
prefixCls: prefixCls + "-item"
|
|
135
|
-
}) : null, hasChildren && !mini && placement === 'vertical' && (expandedType === 'pop' || showAllSubMenus) ? /*#__PURE__*/
|
|
102
|
+
}) : null, hasChildren && !mini && placement === 'vertical' && (expandedType === 'pop' || showAllSubMenus) ? /*#__PURE__*/React.createElement(Arrow, {
|
|
136
103
|
prefixCls: prefixCls + "-item"
|
|
137
|
-
}) : null, hasChildren && placement === 'horizontal' && level > 1 ? /*#__PURE__*/
|
|
104
|
+
}) : null, hasChildren && placement === 'horizontal' && level > 1 ? /*#__PURE__*/React.createElement(Arrow, {
|
|
138
105
|
prefixCls: prefixCls + "-item"
|
|
139
|
-
}) : null, hasChildren && placement === 'horizontal' && level === 1 && (!disabled && (expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/
|
|
106
|
+
}) : null, hasChildren && placement === 'horizontal' && level === 1 && (!disabled && (expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/React.createElement(Arrow, {
|
|
140
107
|
prefixCls: prefixCls + "-item",
|
|
141
108
|
direction: "up"
|
|
142
|
-
}) : /*#__PURE__*/
|
|
109
|
+
}) : /*#__PURE__*/React.createElement(Arrow, {
|
|
143
110
|
prefixCls: prefixCls + "-item",
|
|
144
111
|
direction: "down"
|
|
145
|
-
}))), hasChildren && placement === 'vertical' && !mini && !showAllSubMenus && expandedType === 'collapse' ? /*#__PURE__*/
|
|
112
|
+
}))), hasChildren && placement === 'vertical' && !mini && !showAllSubMenus && expandedType === 'collapse' ? /*#__PURE__*/React.createElement(Expander.Expander, {
|
|
146
113
|
visible: !disabled && !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id))
|
|
147
|
-
}, /*#__PURE__*/
|
|
114
|
+
}, /*#__PURE__*/React.createElement("ul", {
|
|
148
115
|
className: prefixCls + "-submenu"
|
|
149
116
|
}, children.map(function (child) {
|
|
150
|
-
return /*#__PURE__*/
|
|
117
|
+
return /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, child, {
|
|
151
118
|
key: child.id,
|
|
152
119
|
level: level + 1,
|
|
153
120
|
parentIds: _parentIds,
|
|
@@ -155,7 +122,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
155
122
|
render: render,
|
|
156
123
|
size: size
|
|
157
124
|
}));
|
|
158
|
-
}))) : null), hasChildren && placement === 'vertical' && mini && !showAllSubMenus && expandedType === 'collapse' && (level === 1 ? /*#__PURE__*/
|
|
125
|
+
}))) : null), hasChildren && placement === 'vertical' && mini && !showAllSubMenus && expandedType === 'collapse' && (level === 1 ? /*#__PURE__*/React.createElement(Popper, {
|
|
159
126
|
visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
|
|
160
127
|
attachEl: itemRef.current,
|
|
161
128
|
placement: 'right-start',
|
|
@@ -164,10 +131,10 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
164
131
|
onClose: function onClose() {
|
|
165
132
|
closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
|
|
166
133
|
}
|
|
167
|
-
}, /*#__PURE__*/
|
|
134
|
+
}, /*#__PURE__*/React.createElement("ul", {
|
|
168
135
|
className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
|
|
169
136
|
}, children.map(function (child) {
|
|
170
|
-
return /*#__PURE__*/
|
|
137
|
+
return /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, child, {
|
|
171
138
|
key: child.id,
|
|
172
139
|
level: level + 1,
|
|
173
140
|
parentIds: _parentIds,
|
|
@@ -175,7 +142,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
175
142
|
render: render,
|
|
176
143
|
size: size
|
|
177
144
|
}));
|
|
178
|
-
}))) : /*#__PURE__*/
|
|
145
|
+
}))) : /*#__PURE__*/React.createElement(Popper, {
|
|
179
146
|
visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
|
|
180
147
|
attachEl: itemRef.current,
|
|
181
148
|
placement: 'right-start',
|
|
@@ -185,10 +152,10 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
185
152
|
onClose: function onClose() {
|
|
186
153
|
closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
|
|
187
154
|
}
|
|
188
|
-
}, /*#__PURE__*/
|
|
155
|
+
}, /*#__PURE__*/React.createElement("ul", {
|
|
189
156
|
className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
|
|
190
157
|
}, children.map(function (child) {
|
|
191
|
-
return /*#__PURE__*/
|
|
158
|
+
return /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, child, {
|
|
192
159
|
key: child.id,
|
|
193
160
|
level: level + 1,
|
|
194
161
|
parentIds: _parentIds,
|
|
@@ -196,7 +163,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
196
163
|
render: render,
|
|
197
164
|
size: size
|
|
198
165
|
}));
|
|
199
|
-
})))), hasChildren && placement === 'vertical' && !showAllSubMenus && expandedType === 'pop' && (level === 1 ? /*#__PURE__*/
|
|
166
|
+
})))), hasChildren && placement === 'vertical' && !showAllSubMenus && expandedType === 'pop' && (level === 1 ? /*#__PURE__*/React.createElement(Popper, {
|
|
200
167
|
visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
|
|
201
168
|
attachEl: itemRef.current,
|
|
202
169
|
placement: 'right-start',
|
|
@@ -205,10 +172,10 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
205
172
|
onClose: function onClose() {
|
|
206
173
|
closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
|
|
207
174
|
}
|
|
208
|
-
}, /*#__PURE__*/
|
|
175
|
+
}, /*#__PURE__*/React.createElement("ul", {
|
|
209
176
|
className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
|
|
210
177
|
}, children.map(function (child) {
|
|
211
|
-
return /*#__PURE__*/
|
|
178
|
+
return /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, child, {
|
|
212
179
|
key: child.id,
|
|
213
180
|
level: level + 1,
|
|
214
181
|
parentIds: _parentIds,
|
|
@@ -216,7 +183,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
216
183
|
render: render,
|
|
217
184
|
size: size
|
|
218
185
|
}));
|
|
219
|
-
}))) : /*#__PURE__*/
|
|
186
|
+
}))) : /*#__PURE__*/React.createElement(Popper, {
|
|
220
187
|
visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
|
|
221
188
|
attachEl: itemRef.current,
|
|
222
189
|
disabledPortal: true,
|
|
@@ -226,10 +193,10 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
226
193
|
onClose: function onClose() {
|
|
227
194
|
closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
|
|
228
195
|
}
|
|
229
|
-
}, /*#__PURE__*/
|
|
196
|
+
}, /*#__PURE__*/React.createElement("ul", {
|
|
230
197
|
className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
|
|
231
198
|
}, children.map(function (child) {
|
|
232
|
-
return /*#__PURE__*/
|
|
199
|
+
return /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, child, {
|
|
233
200
|
key: child.id,
|
|
234
201
|
level: level + 1,
|
|
235
202
|
parentIds: _parentIds,
|
|
@@ -237,7 +204,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
237
204
|
render: render,
|
|
238
205
|
size: size
|
|
239
206
|
}));
|
|
240
|
-
})))), hasChildren && placement === 'vertical' && showAllSubMenus ? /*#__PURE__*/
|
|
207
|
+
})))), hasChildren && placement === 'vertical' && showAllSubMenus ? /*#__PURE__*/React.createElement(Popper, {
|
|
241
208
|
visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
|
|
242
209
|
attachEl: itemRef.current,
|
|
243
210
|
placement: 'right-start',
|
|
@@ -246,18 +213,17 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
246
213
|
onClose: function onClose() {
|
|
247
214
|
closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
|
|
248
215
|
}
|
|
249
|
-
}, /*#__PURE__*/
|
|
216
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
250
217
|
className: prefixCls + "-fat-menu"
|
|
251
218
|
}, children.map(function (child) {
|
|
252
|
-
return /*#__PURE__*/
|
|
219
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
253
220
|
key: child.id,
|
|
254
221
|
className: prefixCls + "-fat-menu__group"
|
|
255
|
-
}, /*#__PURE__*/
|
|
222
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
256
223
|
className: prefixCls + "-group-item"
|
|
257
|
-
}, child.title), child && typeAssertion.isArrayNonEmpty(child.children) ? /*#__PURE__*/
|
|
224
|
+
}, child.title), child && typeAssertion.isArrayNonEmpty(child.children) ? /*#__PURE__*/React.createElement("ul", null, child.children.map(function (item) {
|
|
258
225
|
var _cx3;
|
|
259
|
-
|
|
260
|
-
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
226
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
261
227
|
onClick: function onClick() {
|
|
262
228
|
if (!item.disabled) {
|
|
263
229
|
clickMenu === null || clickMenu === void 0 ? void 0 : clickMenu(item.id, item);
|
|
@@ -268,7 +234,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
268
234
|
key: item.id
|
|
269
235
|
}, item.title);
|
|
270
236
|
})) : null);
|
|
271
|
-
}))) : null, hasChildren && placement === 'horizontal' && !showAllSubMenus && (level === 1 ? /*#__PURE__*/
|
|
237
|
+
}))) : null, hasChildren && placement === 'horizontal' && !showAllSubMenus && (level === 1 ? /*#__PURE__*/React.createElement(Popper, {
|
|
272
238
|
visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
|
|
273
239
|
attachEl: itemRef.current,
|
|
274
240
|
placement: level === 1 ? 'bottom-start' : 'right-start',
|
|
@@ -277,10 +243,10 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
277
243
|
onClose: function onClose() {
|
|
278
244
|
closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
|
|
279
245
|
}
|
|
280
|
-
}, /*#__PURE__*/
|
|
246
|
+
}, /*#__PURE__*/React.createElement("ul", {
|
|
281
247
|
className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
|
|
282
248
|
}, children.map(function (child) {
|
|
283
|
-
return /*#__PURE__*/
|
|
249
|
+
return /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, child, {
|
|
284
250
|
key: child.id,
|
|
285
251
|
level: level + 1,
|
|
286
252
|
parentIds: _parentIds,
|
|
@@ -288,7 +254,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
288
254
|
render: render,
|
|
289
255
|
size: size
|
|
290
256
|
}));
|
|
291
|
-
}))) : /*#__PURE__*/
|
|
257
|
+
}))) : /*#__PURE__*/React.createElement(Popper, {
|
|
292
258
|
visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
|
|
293
259
|
attachEl: itemRef.current,
|
|
294
260
|
disabledPortal: true,
|
|
@@ -298,10 +264,10 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
298
264
|
onClose: function onClose() {
|
|
299
265
|
closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
|
|
300
266
|
}
|
|
301
|
-
}, /*#__PURE__*/
|
|
267
|
+
}, /*#__PURE__*/React.createElement("ul", {
|
|
302
268
|
className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
|
|
303
269
|
}, children.map(function (child) {
|
|
304
|
-
return /*#__PURE__*/
|
|
270
|
+
return /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, child, {
|
|
305
271
|
key: child.id,
|
|
306
272
|
level: level + 1,
|
|
307
273
|
parentIds: _parentIds,
|
|
@@ -309,7 +275,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
309
275
|
render: render,
|
|
310
276
|
size: size
|
|
311
277
|
}));
|
|
312
|
-
})))), hasChildren && placement === 'horizontal' && showAllSubMenus ? /*#__PURE__*/
|
|
278
|
+
})))), hasChildren && placement === 'horizontal' && showAllSubMenus ? /*#__PURE__*/React.createElement(Popper, {
|
|
313
279
|
visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
|
|
314
280
|
attachEl: itemRef.current,
|
|
315
281
|
placement: 'bottom-start',
|
|
@@ -318,18 +284,17 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
318
284
|
onClose: function onClose() {
|
|
319
285
|
closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
|
|
320
286
|
}
|
|
321
|
-
}, /*#__PURE__*/
|
|
287
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
322
288
|
className: prefixCls + "-fat-menu"
|
|
323
289
|
}, children.map(function (child) {
|
|
324
|
-
return /*#__PURE__*/
|
|
290
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
325
291
|
key: child.id,
|
|
326
292
|
className: prefixCls + "-fat-menu__group"
|
|
327
|
-
}, /*#__PURE__*/
|
|
293
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
328
294
|
className: prefixCls + "-group-item"
|
|
329
|
-
}, child.title), child && typeAssertion.isArrayNonEmpty(child.children) ? /*#__PURE__*/
|
|
295
|
+
}, child.title), child && typeAssertion.isArrayNonEmpty(child.children) ? /*#__PURE__*/React.createElement("ul", null, child.children.map(function (item) {
|
|
330
296
|
var _cx4;
|
|
331
|
-
|
|
332
|
-
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
297
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
333
298
|
className: classname.cx(prefixCls + "-item", (_cx4 = {}, _cx4[prefixCls + "-item--active"] = activeId === item.id, _cx4[prefixCls + "-item--disabled"] = item.disabled, _cx4)),
|
|
334
299
|
onClick: function onClick() {
|
|
335
300
|
if (!item.disabled) {
|
|
@@ -342,47 +307,38 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
342
307
|
})) : null);
|
|
343
308
|
}))) : null);
|
|
344
309
|
});
|
|
345
|
-
|
|
346
310
|
if (env.__DEV__) {
|
|
347
311
|
MenuItem.displayName = 'MenuItem';
|
|
348
312
|
}
|
|
349
|
-
|
|
350
313
|
var Arrow = function Arrow(_ref) {
|
|
351
314
|
var prefixCls = _ref.prefixCls,
|
|
352
|
-
|
|
315
|
+
direction = _ref.direction;
|
|
353
316
|
var icon;
|
|
354
|
-
|
|
355
317
|
switch (direction) {
|
|
356
318
|
case 'up':
|
|
357
|
-
icon = /*#__PURE__*/
|
|
319
|
+
icon = /*#__PURE__*/React.createElement(icons.UpOutlined, null);
|
|
358
320
|
break;
|
|
359
|
-
|
|
360
321
|
case 'down':
|
|
361
|
-
icon = /*#__PURE__*/
|
|
322
|
+
icon = /*#__PURE__*/React.createElement(icons.DownOutlined, null);
|
|
362
323
|
break;
|
|
363
|
-
|
|
364
324
|
default:
|
|
365
|
-
icon = /*#__PURE__*/
|
|
325
|
+
icon = /*#__PURE__*/React.createElement(icons.RightOutlined, null);
|
|
366
326
|
}
|
|
367
|
-
|
|
368
|
-
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
327
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
369
328
|
className: prefixCls + "__arrow"
|
|
370
329
|
}, icon);
|
|
371
330
|
};
|
|
372
331
|
/**
|
|
373
332
|
* 渲染空白占位
|
|
374
333
|
*/
|
|
375
|
-
|
|
376
|
-
|
|
377
334
|
var renderIndent = function renderIndent(_ref2) {
|
|
378
335
|
var prefixCls = _ref2.prefixCls,
|
|
379
|
-
|
|
336
|
+
depth = _ref2.depth;
|
|
380
337
|
return arrayUtils.times(depth, function (index) {
|
|
381
|
-
return /*#__PURE__*/
|
|
338
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
382
339
|
className: prefixCls + "__indent",
|
|
383
340
|
key: index
|
|
384
341
|
});
|
|
385
342
|
});
|
|
386
343
|
};
|
|
387
|
-
|
|
388
344
|
exports.MenuItem = MenuItem;
|
package/lib/cjs/context.js
CHANGED
package/lib/cjs/index.js
CHANGED
|
@@ -13,9 +13,6 @@ Object.defineProperty(exports, '__esModule', {
|
|
|
13
13
|
value: true
|
|
14
14
|
});
|
|
15
15
|
var css_248z = ".hi-v4-menu-fat-menu {background-color: var(--hi-v4-color-static-white, #fff);margin: 0;font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);display: -webkit-box;display: -ms-flexbox;display: flex;color: var(--hi-v4-color-gray-700, #1f2733);border-radius: var(--hi-v4-border-radius-md, 4px);-ms-flex-wrap: wrap;flex-wrap: wrap;}.hi-v4-menu-fat-menu__group:not(:last-of-type) {margin-right: var(--hi-v4-spacing-18, 36px);}.hi-v4-menu-fat-menu .hi-v4-menu-group-item {height: 40px;margin: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-6, 12px);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-menu-fat-menu .hi-v4-menu-item {height: 40px;margin: 0;border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);}.hi-v4-menu-fat-menu .hi-v4-menu-item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-menu-fat-menu .hi-v4-menu-item:not(.hi-v4-menu-item--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu-fat-menu .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu-fat-menu ul {padding: 0;margin: 0;}.hi-v4-menu-fat-menu ul li {list-style-type: none;}.hi-v4-menu-popmenu {background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px);margin: 0;font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);color: var(--hi-v4-color-gray-700, #1f2733);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-menu-popmenu .hi-v4-menu-item {height: 40px;margin: 0;}.hi-v4-menu-popmenu .hi-v4-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;height: 40px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;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);}";
|
|
16
|
-
|
|
17
16
|
var __styleInject__ = require('style-inject')["default"];
|
|
18
|
-
|
|
19
17
|
__styleInject__(css_248z);
|
|
20
|
-
|
|
21
18
|
exports["default"] = css_248z;
|
package/lib/cjs/util.js
CHANGED
|
@@ -9,10 +9,7 @@
|
|
|
9
9
|
*/
|
|
10
10
|
'use strict';
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
value: true
|
|
14
|
-
}); // 寻找某一节点的父节点
|
|
15
|
-
|
|
12
|
+
// 寻找某一节点的父节点
|
|
16
13
|
var getParentId = function getParentId(id, data) {
|
|
17
14
|
var parentId = '';
|
|
18
15
|
data.forEach(function (item) {
|
|
@@ -27,21 +24,17 @@ var getParentId = function getParentId(id, data) {
|
|
|
27
24
|
}
|
|
28
25
|
});
|
|
29
26
|
return parentId;
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
|
|
27
|
+
};
|
|
28
|
+
// 寻找某一节点的所有祖先节点
|
|
33
29
|
var getAncestorIds = function getAncestorIds(id, data, arr) {
|
|
34
30
|
if (arr === void 0) {
|
|
35
31
|
arr = [];
|
|
36
32
|
}
|
|
37
|
-
|
|
38
33
|
if (getParentId(id, data)) {
|
|
39
34
|
arr.push(getParentId(id, data));
|
|
40
35
|
getAncestorIds(getParentId(id, data), data, arr);
|
|
41
36
|
}
|
|
42
|
-
|
|
43
37
|
return arr;
|
|
44
38
|
};
|
|
45
|
-
|
|
46
39
|
exports.getAncestorIds = getAncestorIds;
|
|
47
40
|
exports.getParentId = getParentId;
|
package/lib/esm/Expander.js
CHANGED
|
@@ -9,16 +9,13 @@
|
|
|
9
9
|
*/
|
|
10
10
|
import React, { useState } from 'react';
|
|
11
11
|
import { CSSTransition } from 'react-transition-group';
|
|
12
|
-
|
|
13
12
|
var Expander = function Expander(_ref) {
|
|
14
13
|
var children = _ref.children,
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
visible = _ref.visible,
|
|
15
|
+
className = _ref.className;
|
|
18
16
|
var _useState = useState(visible ? 'auto' : 0),
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
17
|
+
height = _useState[0],
|
|
18
|
+
setHeight = _useState[1];
|
|
22
19
|
return /*#__PURE__*/React.createElement(CSSTransition, {
|
|
23
20
|
"in": visible,
|
|
24
21
|
timeout: 200,
|
|
@@ -47,5 +44,4 @@ var Expander = function Expander(_ref) {
|
|
|
47
44
|
}
|
|
48
45
|
}, children));
|
|
49
46
|
};
|
|
50
|
-
|
|
51
47
|
export { Expander };
|