@hi-ui/menu 4.1.3 → 4.1.5

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 CHANGED
@@ -1,5 +1,50 @@
1
1
  # @hi-ui/menu
2
2
 
3
+ ## 4.1.5
4
+
5
+ ### Patch Changes
6
+
7
+ - fix: 修复 rollup3 打包 cjs 模块问题
8
+ - Updated dependencies
9
+ - @hi-ui/env@4.0.3
10
+ - @hi-ui/core@4.0.7
11
+ - @hi-ui/use-id@4.0.3
12
+ - @hi-ui/use-merge-refs@4.0.3
13
+ - @hi-ui/use-resize-observer@4.0.3
14
+ - @hi-ui/use-toggle@4.0.3
15
+ - @hi-ui/use-uncontrolled-state@4.0.3
16
+ - @hi-ui/icons@4.0.17
17
+ - @hi-ui/popper@4.1.2
18
+ - @hi-ui/tooltip@4.0.9
19
+ - @hi-ui/array-utils@4.0.3
20
+ - @hi-ui/classname@4.0.3
21
+ - @hi-ui/times@4.0.3
22
+ - @hi-ui/tree-utils@4.1.3
23
+ - @hi-ui/type-assertion@4.0.3
24
+
25
+ ## 4.1.4
26
+
27
+ ### Patch Changes
28
+
29
+ - [#2672](https://github.com/XiaoMi/hiui/pull/2672) [`1ebe27830`](https://github.com/XiaoMi/hiui/commit/1ebe2783098b3a8cd980bd10076d67635463800e) Thanks [@zyprepare](https://github.com/zyprepare)! - build: 升级到 rollup3,重新构建发布组件
30
+
31
+ - Updated dependencies [[`1ebe27830`](https://github.com/XiaoMi/hiui/commit/1ebe2783098b3a8cd980bd10076d67635463800e)]:
32
+ - @hi-ui/core@4.0.6
33
+ - @hi-ui/use-id@4.0.2
34
+ - @hi-ui/use-merge-refs@4.0.2
35
+ - @hi-ui/use-resize-observer@4.0.2
36
+ - @hi-ui/use-toggle@4.0.2
37
+ - @hi-ui/use-uncontrolled-state@4.0.2
38
+ - @hi-ui/icons@4.0.16
39
+ - @hi-ui/popper@4.1.1
40
+ - @hi-ui/tooltip@4.0.8
41
+ - @hi-ui/array-utils@4.0.2
42
+ - @hi-ui/classname@4.0.2
43
+ - @hi-ui/env@4.0.2
44
+ - @hi-ui/times@4.0.2
45
+ - @hi-ui/tree-utils@4.1.2
46
+ - @hi-ui/type-assertion@4.0.2
47
+
3
48
  ## 4.1.3
4
49
 
5
50
  ### Patch Changes
@@ -10,32 +10,24 @@
10
10
  'use strict';
11
11
 
12
12
  var _typeof = require("@babel/runtime/helpers/typeof");
13
-
14
13
  Object.defineProperty(exports, '__esModule', {
15
14
  value: true
16
15
  });
17
-
18
16
  var React = require('react');
19
-
20
17
  var reactTransitionGroup = require('react-transition-group');
21
-
22
- function _interopDefaultLegacy(e) {
18
+ function _interopDefaultCompat(e) {
23
19
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
24
20
  'default': e
25
21
  };
26
22
  }
27
-
28
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
29
-
23
+ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
30
24
  var Expander = function Expander(_ref) {
31
25
  var children = _ref.children,
32
- visible = _ref.visible,
33
- className = _ref.className;
34
-
26
+ visible = _ref.visible,
27
+ className = _ref.className;
35
28
  var _useState = React.useState(visible ? 'auto' : 0),
36
- height = _useState[0],
37
- setHeight = _useState[1];
38
-
29
+ height = _useState[0],
30
+ setHeight = _useState[1];
39
31
  return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
40
32
  "in": visible,
41
33
  timeout: 200,
@@ -64,5 +56,4 @@ var Expander = function Expander(_ref) {
64
56
  }
65
57
  }, children));
66
58
  };
67
-
68
59
  exports.Expander = Expander;
package/lib/cjs/Menu.js CHANGED
@@ -10,53 +10,32 @@
10
10
  'use strict';
11
11
 
12
12
  var _typeof = require("@babel/runtime/helpers/typeof");
13
-
14
13
  Object.defineProperty(exports, '__esModule', {
15
14
  value: true
16
15
  });
17
-
18
16
  var tslib = require('tslib');
19
-
20
17
  var React = require('react');
21
-
22
18
  var classname = require('@hi-ui/classname');
23
-
24
19
  var icons = require('@hi-ui/icons');
25
-
26
20
  var env = require('@hi-ui/env');
27
-
28
21
  var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
29
-
30
22
  var Tooltip = require('@hi-ui/tooltip');
31
-
32
23
  var useToggle = require('@hi-ui/use-toggle');
33
-
34
24
  var treeUtils = require('@hi-ui/tree-utils');
35
-
36
25
  var typeAssertion = require('@hi-ui/type-assertion');
37
-
38
26
  var useResizeObserver = require('@hi-ui/use-resize-observer');
39
-
40
27
  var useMergeRefs = require('@hi-ui/use-merge-refs');
41
-
42
28
  var useId = require('@hi-ui/use-id');
43
-
44
29
  var MenuItem = require('./MenuItem.js');
45
-
46
30
  var context = require('./context.js');
47
-
48
31
  var util = require('./util.js');
49
-
50
- function _interopDefaultLegacy(e) {
32
+ function _interopDefaultCompat(e) {
51
33
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
52
34
  'default': e
53
35
  };
54
36
  }
55
-
56
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
57
-
58
- var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
59
-
37
+ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
38
+ var Tooltip__default = /*#__PURE__*/_interopDefaultCompat(Tooltip);
60
39
  var MENU_PREFIX = classname.getPrefixCls('menu');
61
40
  var DEFAULT_EXPANDED_IDS = [];
62
41
  var NOOP_ARRAY = [];
@@ -65,68 +44,62 @@ var MENU_MORE_ID = "MENU_MORE_" + useId.uuid();
65
44
  /**
66
45
  * 菜单
67
46
  */
68
-
69
47
  var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
70
48
  var _a$prefixCls = _a.prefixCls,
71
- prefixCls = _a$prefixCls === void 0 ? MENU_PREFIX : _a$prefixCls,
72
- _a$role = _a.role,
73
- role = _a$role === void 0 ? 'menu' : _a$role,
74
- className = _a.className,
75
- _a$data = _a.data,
76
- data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
77
- _a$placement = _a.placement,
78
- placement = _a$placement === void 0 ? 'vertical' : _a$placement,
79
- _a$showCollapse = _a.showCollapse,
80
- showCollapse = _a$showCollapse === void 0 ? false : _a$showCollapse,
81
- _a$expandedType = _a.expandedType,
82
- expandedType = _a$expandedType === void 0 ? 'collapse' : _a$expandedType,
83
- _a$showAllSubMenus = _a.showAllSubMenus,
84
- showAllSubMenus = _a$showAllSubMenus === void 0 ? false : _a$showAllSubMenus,
85
- _a$defaultExpandAll = _a.defaultExpandAll,
86
- defaultExpandAll = _a$defaultExpandAll === void 0 ? false : _a$defaultExpandAll,
87
- _a$defaultExpandedIds = _a.defaultExpandedIds,
88
- defaultExpandedIds = _a$defaultExpandedIds === void 0 ? DEFAULT_EXPANDED_IDS : _a$defaultExpandedIds,
89
- expandedIdsProp = _a.expandedIds,
90
- onExpand = _a.onExpand,
91
- _a$defaultActiveId = _a.defaultActiveId,
92
- defaultActiveId = _a$defaultActiveId === void 0 ? '' : _a$defaultActiveId,
93
- activeIdProp = _a.activeId,
94
- onClickSubMenu = _a.onClickSubMenu,
95
- collapsed = _a.collapsed,
96
- _a$defaultCollapsed = _a.defaultCollapsed,
97
- defaultCollapsed = _a$defaultCollapsed === void 0 ? false : _a$defaultCollapsed,
98
- overlayClassName = _a.overlayClassName,
99
- onCollapse = _a.onCollapse,
100
- footerRender = _a.footerRender,
101
- render = _a.render,
102
- extraHeader = _a.extraHeader,
103
- onClick = _a.onClick,
104
- _a$size = _a.size,
105
- size = _a$size === void 0 ? 'lg' : _a$size,
106
- rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "render", "extraHeader", "onClick", "size"]);
107
-
49
+ prefixCls = _a$prefixCls === void 0 ? MENU_PREFIX : _a$prefixCls,
50
+ _a$role = _a.role,
51
+ role = _a$role === void 0 ? 'menu' : _a$role,
52
+ className = _a.className,
53
+ _a$data = _a.data,
54
+ data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
55
+ _a$placement = _a.placement,
56
+ placement = _a$placement === void 0 ? 'vertical' : _a$placement,
57
+ _a$showCollapse = _a.showCollapse,
58
+ showCollapse = _a$showCollapse === void 0 ? false : _a$showCollapse,
59
+ _a$expandedType = _a.expandedType,
60
+ expandedType = _a$expandedType === void 0 ? 'collapse' : _a$expandedType,
61
+ _a$showAllSubMenus = _a.showAllSubMenus,
62
+ showAllSubMenus = _a$showAllSubMenus === void 0 ? false : _a$showAllSubMenus,
63
+ _a$defaultExpandAll = _a.defaultExpandAll,
64
+ defaultExpandAll = _a$defaultExpandAll === void 0 ? false : _a$defaultExpandAll,
65
+ _a$defaultExpandedIds = _a.defaultExpandedIds,
66
+ defaultExpandedIds = _a$defaultExpandedIds === void 0 ? DEFAULT_EXPANDED_IDS : _a$defaultExpandedIds,
67
+ expandedIdsProp = _a.expandedIds,
68
+ onExpand = _a.onExpand,
69
+ _a$defaultActiveId = _a.defaultActiveId,
70
+ defaultActiveId = _a$defaultActiveId === void 0 ? '' : _a$defaultActiveId,
71
+ activeIdProp = _a.activeId,
72
+ onClickSubMenu = _a.onClickSubMenu,
73
+ collapsed = _a.collapsed,
74
+ _a$defaultCollapsed = _a.defaultCollapsed,
75
+ defaultCollapsed = _a$defaultCollapsed === void 0 ? false : _a$defaultCollapsed,
76
+ overlayClassName = _a.overlayClassName,
77
+ onCollapse = _a.onCollapse,
78
+ footerRender = _a.footerRender,
79
+ render = _a.render,
80
+ extraHeader = _a.extraHeader,
81
+ onClick = _a.onClick,
82
+ _a$size = _a.size,
83
+ size = _a$size === void 0 ? 'lg' : _a$size,
84
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "render", "extraHeader", "onClick", "size"]);
108
85
  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultActiveId, activeIdProp, onClick),
109
- activeId = _useUncontrolledState[0],
110
- updateActiveId = _useUncontrolledState[1];
111
-
86
+ activeId = _useUncontrolledState[0],
87
+ updateActiveId = _useUncontrolledState[1];
112
88
  var _useState = React.useState(function () {
113
- return util.getAncestorIds(activeId, data);
114
- }),
115
- activeParents = _useState[0],
116
- updateActiveParents = _useState[1];
117
-
89
+ return util.getAncestorIds(activeId, data);
90
+ }),
91
+ activeParents = _useState[0],
92
+ updateActiveParents = _useState[1];
118
93
  React.useEffect(function () {
119
94
  updateActiveParents(util.getAncestorIds(activeId, data));
120
95
  }, [activeId, data]);
121
-
122
96
  var _useUncontrolledState2 = useUncontrolledState.useUncontrolledState(function () {
123
- return defaultExpandAll ? treeUtils.getTreeNodesWithChildren(data).map(function (node) {
124
- return node.id;
125
- }) : defaultExpandedIds;
126
- }, expandedIdsProp, onExpand),
127
- expandedIds = _useUncontrolledState2[0],
128
- updateExpandedIds = _useUncontrolledState2[1];
129
-
97
+ return defaultExpandAll ? treeUtils.getTreeNodesWithChildren(data).map(function (node) {
98
+ return node.id;
99
+ }) : defaultExpandedIds;
100
+ }, expandedIdsProp, onExpand),
101
+ expandedIds = _useUncontrolledState2[0],
102
+ updateExpandedIds = _useUncontrolledState2[1];
130
103
  var clickMenu = React.useCallback(function (id, raw) {
131
104
  updateActiveId(id, raw);
132
105
  }, [updateActiveId]);
@@ -135,7 +108,6 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
135
108
  return expandedId !== id;
136
109
  }) : expandedIds.concat(id);
137
110
  updateExpandedIds(nextExpandedIds);
138
-
139
111
  if (onClickSubMenu) {
140
112
  onClickSubMenu(id, nextExpandedIds);
141
113
  }
@@ -148,28 +120,23 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
148
120
  var closeAllPopper = React.useCallback(function () {
149
121
  updateExpandedIds([]);
150
122
  }, [updateExpandedIds]);
151
-
152
123
  var _useUncontrolledToggl = useToggle.useUncontrolledToggle({
153
- defaultVisible: defaultCollapsed,
154
- visible: collapsed,
155
- onToggle: onCollapse
156
- }),
157
- mini = _useUncontrolledToggl[0],
158
- miniToggleAction = _useUncontrolledToggl[1];
159
-
124
+ defaultVisible: defaultCollapsed,
125
+ visible: collapsed,
126
+ onToggle: onCollapse
127
+ }),
128
+ mini = _useUncontrolledToggl[0],
129
+ miniToggleAction = _useUncontrolledToggl[1];
160
130
  var showVertical = placement === 'vertical';
161
131
  var canToggle = showVertical && showCollapse;
162
132
  var showMini = showVertical && mini;
163
-
164
133
  var _useState2 = React.useState(null),
165
- containerElement = _useState2[0],
166
- setContainerElement = _useState2[1];
167
-
134
+ containerElement = _useState2[0],
135
+ setContainerElement = _useState2[1];
168
136
  var _useState3 = React.useState(),
169
- _useState3$ = _useState3[0],
170
- containerWidth = _useState3$ === void 0 ? 0 : _useState3$,
171
- setContainerWidth = _useState3[1];
172
-
137
+ _useState3$ = _useState3[0],
138
+ containerWidth = _useState3$ === void 0 ? 0 : _useState3$,
139
+ setContainerWidth = _useState3[1];
173
140
  useResizeObserver.useResizeObserver({
174
141
  element: containerElement,
175
142
  disabled: showVertical,
@@ -181,11 +148,9 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
181
148
  setContainerWidth(width);
182
149
  }
183
150
  });
184
-
185
151
  var _useState4 = React.useState(0),
186
- tagMaxCount = _useState4[0],
187
- setTagMaxCount = _useState4[1];
188
-
152
+ tagMaxCount = _useState4[0],
153
+ setTagMaxCount = _useState4[1];
189
154
  var mergedTagList = React.useMemo(function () {
190
155
  if (showVertical) return data;
191
156
  if (containerWidth < MIN_WIDTH) return data;
@@ -205,21 +170,16 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
205
170
  React.useLayoutEffect(function () {
206
171
  if (showVertical) return;
207
172
  var tagMaxCount = 0;
208
-
209
173
  if (typeAssertion.isArrayNonEmpty(mergedTagList)) {
210
174
  var len = mergedTagList.length;
211
175
  var lastIndex = len - 1;
212
176
  var totalWidth = 72; // 更多
213
-
214
177
  for (var i = 0; i < len; ++i) {
215
178
  var currentTagWidth = getTagWidth(i);
216
-
217
179
  if (currentTagWidth === undefined) {
218
180
  break;
219
181
  }
220
-
221
182
  totalWidth += currentTagWidth;
222
-
223
183
  if (lastIndex === 0 && totalWidth <= containerWidth || i === lastIndex - 1 && totalWidth + getTagWidth(lastIndex) <= containerWidth) {
224
184
  tagMaxCount = lastIndex;
225
185
  break;
@@ -230,33 +190,29 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
230
190
  }
231
191
  } else {
232
192
  tagMaxCount = 0;
233
- } // 保底要展示 1 个
234
-
235
-
193
+ }
194
+ // 保底要展示 1 个
236
195
  setTagMaxCount(typeAssertion.isArrayNonEmpty(mergedTagList) && tagMaxCount < 1 ? 1 : tagMaxCount + 1);
237
196
  }, [showVertical, getTagWidth, containerWidth, mergedTagList]);
238
-
239
197
  var renderFooter = function renderFooter() {
240
- var collapseNode = canToggle ? /*#__PURE__*/React__default["default"].createElement("div", {
198
+ var collapseNode = canToggle ? ( /*#__PURE__*/React__default["default"].createElement("div", {
241
199
  className: classname.cx(prefixCls + "__toggle"),
242
200
  onClick: function onClick() {
243
- miniToggleAction.not(); // 关闭所有展开的子菜单,防止切换到 mini 模式后,子菜单还是展开的
244
-
201
+ miniToggleAction.not();
202
+ // 关闭所有展开的子菜单,防止切换到 mini 模式后,子菜单还是展开的
245
203
  updateExpandedIds([]);
246
204
  }
247
- }, mini ? /*#__PURE__*/React__default["default"].createElement(icons.MenuUnfoldOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.MenuFoldOutlined, null)) : null;
205
+ }, mini ? /*#__PURE__*/React__default["default"].createElement(icons.MenuUnfoldOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.MenuFoldOutlined, null))) : null;
248
206
  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, typeAssertion.isFunction(footerRender) ? footerRender({
249
207
  collapsed: showMini,
250
208
  collapseNode: collapseNode
251
209
  }) : collapseNode);
252
210
  };
253
-
254
211
  var renderItem = React.useCallback(function (menuItem, level) {
255
212
  // 显示缩略内容
256
213
  if (showMini && level === 1) {
257
214
  return renderMenuItemMini(menuItem);
258
215
  }
259
-
260
216
  return typeAssertion.isFunction(render) ? render(menuItem, level) : menuItem.title;
261
217
  }, [render, showMini]);
262
218
  var cls = classname.cx(prefixCls, className, prefixCls + "--" + placement, prefixCls + "--size-" + size, mini && prefixCls + "--mini", (expandedType === 'pop' || showAllSubMenus || mini) && prefixCls + "--popup");
@@ -282,7 +238,7 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
282
238
  }, /*#__PURE__*/React__default["default"].createElement("ul", {
283
239
  className: classname.cx(prefixCls + "__wrapper")
284
240
  }, mergedTagList.map(function (item, index) {
285
- return showMini ? /*#__PURE__*/React__default["default"].createElement(Tooltip__default["default"], {
241
+ return showMini ? ( /*#__PURE__*/React__default["default"].createElement(Tooltip__default["default"], {
286
242
  title: item.title,
287
243
  key: item.id,
288
244
  placement: "right"
@@ -291,7 +247,7 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
291
247
  render: renderItem,
292
248
  raw: item,
293
249
  size: size
294
- }))) : /*#__PURE__*/React__default["default"].createElement(MenuItem.MenuItem, Object.assign({
250
+ })))) : ( /*#__PURE__*/React__default["default"].createElement(MenuItem.MenuItem, Object.assign({
295
251
  hidden: !showVertical && index >= tagMaxCount
296
252
  }, item, {
297
253
  render: renderItem,
@@ -299,31 +255,26 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
299
255
  level: 1,
300
256
  raw: item,
301
257
  size: size
302
- }));
303
- }), showVertical || restTagList.length === 0 ? null : /*#__PURE__*/React__default["default"].createElement(MenuItem.MenuItem, {
258
+ })));
259
+ }), showVertical || restTagList.length === 0 ? null : ( /*#__PURE__*/React__default["default"].createElement(MenuItem.MenuItem, {
304
260
  key: MENU_MORE_ID,
305
261
  id: MENU_MORE_ID,
306
262
  title: "\u66F4\u591A",
307
263
  children: restTagList
308
- })), /*#__PURE__*/React__default["default"].createElement("div", {
264
+ }))), /*#__PURE__*/React__default["default"].createElement("div", {
309
265
  className: prefixCls + "__footer"
310
266
  }, renderFooter())));
311
267
  });
312
-
313
268
  if (env.__DEV__) {
314
269
  Menu.displayName = 'Menu';
315
270
  }
316
271
  /**
317
272
  * Mini 模式下渲染 item
318
273
  */
319
-
320
-
321
274
  var renderMenuItemMini = function renderMenuItemMini(menu) {
322
275
  if (typeof menu.title === 'string') {
323
276
  return menu.title.substring(0, 1);
324
277
  }
325
-
326
278
  return menu.title;
327
279
  };
328
-
329
280
  exports.Menu = Menu;