@hi-ui/menu 4.0.0-alpha.9 → 4.0.0-beta.10

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.
Files changed (35) hide show
  1. package/README.md +50 -0
  2. package/lib/cjs/Expander.js +2 -3
  3. package/lib/cjs/Menu.js +45 -35
  4. package/lib/cjs/MenuItem.js +140 -70
  5. package/lib/cjs/context.js +0 -1
  6. package/lib/cjs/index.js +0 -1
  7. package/lib/cjs/styles/index.scss.js +1 -2
  8. package/lib/cjs/util.js +0 -1
  9. package/lib/esm/Expander.js +0 -1
  10. package/lib/esm/Menu.js +39 -33
  11. package/lib/esm/MenuItem.js +110 -46
  12. package/lib/esm/context.js +1 -2
  13. package/lib/esm/index.js +0 -1
  14. package/lib/esm/styles/index.scss.js +2 -3
  15. package/lib/esm/util.js +0 -1
  16. package/lib/types/Menu.d.ts +7 -34
  17. package/lib/types/MenuItem.d.ts +11 -2
  18. package/lib/types/context.d.ts +1 -1
  19. package/lib/types/index.d.ts +1 -0
  20. package/lib/types/types.d.ts +12 -0
  21. package/package.json +17 -12
  22. package/lib/cjs/Expander.js.map +0 -1
  23. package/lib/cjs/Menu.js.map +0 -1
  24. package/lib/cjs/MenuItem.js.map +0 -1
  25. package/lib/cjs/context.js.map +0 -1
  26. package/lib/cjs/index.js.map +0 -1
  27. package/lib/cjs/styles/index.scss.js.map +0 -1
  28. package/lib/cjs/util.js.map +0 -1
  29. package/lib/esm/Expander.js.map +0 -1
  30. package/lib/esm/Menu.js.map +0 -1
  31. package/lib/esm/MenuItem.js.map +0 -1
  32. package/lib/esm/context.js.map +0 -1
  33. package/lib/esm/index.js.map +0 -1
  34. package/lib/esm/styles/index.scss.js.map +0 -1
  35. package/lib/esm/util.js.map +0 -1
package/README.md CHANGED
@@ -9,3 +9,53 @@ const Menu = require('@hi-ui/menu');
9
9
 
10
10
  // TODO: DEMONSTRATE API
11
11
  ```
12
+
13
+ ## Props
14
+
15
+ | 参数 | 说明 | 类型 | 可选值 | 默认值 |
16
+ | ---------------- | ------------------------------------------------------ | ---------- | -------------------------- | ---------- |
17
+ | data | 菜单项数据源 | MenuItemProps[] | - | - |
18
+ | defaultActiveId | 默认激活的菜单项 id | React.ReactText | - | - |
19
+ | activeId | 激活的菜单项 id | React.ReactText | - | - |
20
+ | placement | 设置菜单水平或垂直展示 | string | 'horizontal' \| 'vertical' | 'vertical' |
21
+ | collapsed(没做) | 是否收起子菜单，菜单垂直展示时有效 | boolean | true \| false | false |
22
+ | showCollapse | 是否显示收缩开关，菜单垂直展示时有效 | boolean | true \| false | false |
23
+ | showAllSubMenus | 是否以胖菜单的形式展开所有子菜单（仅在水平菜单时有效） | boolean | true \| false | false |
24
+ | accordion(没做) | 手风琴模式，菜单水平展示时有效 | boolean | true \| false | true |
25
+ | overlayClassName（没做） | 下拉根元素的类名称 | string | - | - |
26
+ | expandedType | 垂直菜单展开的方式 | string | 'default' | 'pop' | 'default' |
27
+ | defaultExpandedIds | 默认展开的菜单项（仅在垂直菜单下有效） | React.ReactText[] | - | - |
28
+ | expandedIds（没做） | 展开的菜单项（仅在垂直菜单下有效） | React.ReactText[] | - | - |
29
+
30
+ ## Events
31
+
32
+ | 名称 | 说明 | 类型 | 参数 | 返回值 |
33
+ | -------------- | -------------------- | -------------------------------------------------------------------- | ------------------------------------------------------- | ------ |
34
+ | onClick | 点击菜单选项时的回调 | (activeId: React.ReactText) => void | activeId: 激活的 id | - |
35
+ | onClickSubMenu | 点击父菜单项时的回调 | (subMenuId) => void | subMenuId: 当前点击子菜单的id | - |
36
+ | onCollapse | 点击收缩开关时的回调 | (collapsed: boolean) => void | collapsed: 打开状态 | - |
37
+
38
+ ## Type
39
+
40
+ ### MenuItemProps
41
+
42
+ | 参数 | 说明 | 类型 | 可选值 | 默认值 |
43
+ | -------- | ------------------------------------------------ | ------------------- | ------------- | ------ |
44
+ | content | 菜单项标题 | ReactNode | - | - |
45
+ | icon | 菜单项 icon | ReactNode | - | - |
46
+ | id | 菜单项唯一标识 | React.ReactText | - | - |
47
+ | disabled | 菜单项是否禁止点击 | boolean | true \| false | false |
48
+ | children | 子菜单项配置 | MenuItemProps[] | - | - |
49
+
50
+ ## CHANGELOG
51
+
52
+ | 参数 | 变更类型 | 变更内容 | 解决的问题 |
53
+ | ------------ | ------------------------------- | ------------------------------------------------------------------------------ | ---------------------------- |
54
+ | expandedType | feature | 垂直菜单展开的方式 | 原来只能向下展开，现在可以弹窗呼出 |
55
+ | defaultActiveId | feature | 默认激活的菜单项 id | 原来只支持受控，现在支持非受控模式 |
56
+ | defaultExpandedIds | feature | 默认展开的菜单项（仅在垂直菜单下有效） | 支持默认展开项 |
57
+ | expandedIds | feature | 展开的菜单项（仅在垂直菜单下有效） | 支持受控展开项 |
58
+ | ---- | ---- | ---- | ---- |
59
+ | onClick | update | 移除第二个参数prevActiveId | 这个感觉没有意义 |
60
+ | onClickSubMenu | update | 将入参由索引变更为subMenuId | 之前的入参感觉比较奇怪，意义不大 |
61
+ | icon | update | icon 不再支持 string 模式 | Menu 组件与 Icon 组件真正解耦 |
package/lib/cjs/Expander.js CHANGED
@@ -36,7 +36,7 @@ var Expander = function Expander(_ref) {
36
36
  height = _useState[0],
37
37
  setHeight = _useState[1];
38
38
 
39
- return /*#__PURE__*/React__default['default'].createElement(reactTransitionGroup.CSSTransition, {
39
+ return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
40
40
  "in": visible,
41
41
  timeout: 200,
42
42
  classNames: className,
@@ -56,7 +56,7 @@ var Expander = function Expander(_ref) {
56
56
  setHeight(0);
57
57
  });
58
58
  }
59
- }, /*#__PURE__*/React__default['default'].createElement("div", {
59
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
60
60
  style: {
61
61
  height: height,
62
62
  overflow: 'hidden',
@@ -66,4 +66,3 @@ var Expander = function Expander(_ref) {
66
66
  };
67
67
 
68
68
  exports.Expander = Expander;
69
- //# sourceMappingURL=Expander.js.map
package/lib/cjs/Menu.js CHANGED
@@ -31,6 +31,10 @@ var context = require('./context.js');
31
31
 
32
32
  var util = require('./util.js');
33
33
 
34
+ var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
35
+
36
+ var Tooltip = require('@hi-ui/tooltip');
37
+
34
38
  function _interopDefaultLegacy(e) {
35
39
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
36
40
  'default': e
@@ -39,6 +43,8 @@ function _interopDefaultLegacy(e) {
39
43
 
40
44
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
41
45
 
46
+ var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
47
+
42
48
  var MENU_PREFIX = classname.getPrefixCls('menu');
43
49
  /**
44
50
  * TODO: What is Menu
@@ -57,70 +63,69 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
57
63
  placement = _a$placement === void 0 ? 'vertical' : _a$placement,
58
64
  showCollapse = _a.showCollapse,
59
65
  _a$expandedType = _a.expandedType,
60
- expandedType = _a$expandedType === void 0 ? 'default' : _a$expandedType,
66
+ expandedType = _a$expandedType === void 0 ? 'collapse' : _a$expandedType,
61
67
  _a$showAllSubMenus = _a.showAllSubMenus,
62
68
  showAllSubMenus = _a$showAllSubMenus === void 0 ? false : _a$showAllSubMenus,
63
69
  defaultExpandedIds = _a.defaultExpandedIds,
64
70
  defaultActiveId = _a.defaultActiveId,
71
+ activeId = _a.activeId,
65
72
  onClickSubMenu = _a.onClickSubMenu,
66
73
  onClick = _a.onClick,
67
- rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandedIds", "defaultActiveId", "onClickSubMenu", "onClick"]);
74
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandedIds", "defaultActiveId", "activeId", "onClickSubMenu", "onClick"]);
68
75
 
69
- var _useState = React.useState(defaultActiveId || ''),
70
- _activeId = _useState[0],
71
- updateActiveId = _useState[1];
76
+ var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultActiveId || '', activeId, onClick),
77
+ _activeId = _useUncontrolledState[0],
78
+ updateActiveId = _useUncontrolledState[1];
72
79
 
73
- var _useState2 = React.useState(util.getAncestorIds(_activeId, data)),
74
- activeParents = _useState2[0],
75
- updateActiveParents = _useState2[1];
80
+ var _useState = React.useState(util.getAncestorIds(_activeId, data)),
81
+ activeParents = _useState[0],
82
+ updateActiveParents = _useState[1];
76
83
 
77
84
  React.useEffect(function () {
78
85
  updateActiveParents(util.getAncestorIds(_activeId, data));
79
86
  }, [_activeId, data]);
80
87
 
81
- var _useState3 = React.useState(defaultExpandedIds || []),
82
- _expandedIds = _useState3[0],
83
- updateExpanedIds = _useState3[1];
88
+ var _useState2 = React.useState(defaultExpandedIds || []),
89
+ _expandedIds = _useState2[0],
90
+ updateExpanedIds = _useState2[1];
84
91
 
85
92
  var clickMenu = React.useCallback(function (id) {
86
93
  updateActiveId(id);
87
-
88
- if (onClick) {
89
- onClick(id);
90
- }
91
- }, [onClick]);
94
+ }, [updateActiveId]);
92
95
  var clickSubMenu = React.useCallback(function (id) {
93
- updateExpanedIds(_expandedIds.includes(id) ? _expandedIds.filter(function (expandedid) {
94
- return expandedid !== id;
95
- }) : _expandedIds.concat(id));
96
+ var expandedIds = _expandedIds.includes(id) ? _expandedIds.filter(function (expandedId) {
97
+ return expandedId !== id;
98
+ }) : _expandedIds.concat(id);
99
+ updateExpanedIds(expandedIds);
96
100
 
97
101
  if (onClickSubMenu) {
98
- onClickSubMenu(id);
102
+ onClickSubMenu(id, expandedIds);
99
103
  }
100
104
  }, [onClickSubMenu, _expandedIds]);
101
105
  var closePopper = React.useCallback(function (id) {
102
- updateExpanedIds(_expandedIds.filter(function (expandedid) {
103
- return expandedid !== id;
106
+ updateExpanedIds(_expandedIds.filter(function (expandedId) {
107
+ return expandedId !== id;
104
108
  }));
105
109
  }, [_expandedIds]);
106
110
  var closeAllPopper = React.useCallback(function () {
107
111
  updateExpanedIds([]);
108
112
  }, []);
109
113
 
110
- var _useState4 = React.useState(false),
111
- mini = _useState4[0],
112
- setMini = _useState4[1];
114
+ var _useState3 = React.useState(false),
115
+ mini = _useState3[0],
116
+ setMini = _useState3[1];
113
117
 
114
- var cls = classname.cx(prefixCls, className, prefixCls + "--" + placement, (_cx = {}, _cx[prefixCls + "--mini"] = mini, _cx));
118
+ var cls = classname.cx(prefixCls, className, prefixCls + "--" + placement, (_cx = {}, _cx[prefixCls + "--mini"] = mini, _cx[prefixCls + "--popup"] = expandedType === 'pop' || showAllSubMenus || mini, _cx));
115
119
  var onToggle = React.useCallback(function () {
116
120
  setMini(!mini);
117
121
  closeAllPopper();
118
122
  }, [mini, closeAllPopper]);
119
- return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
123
+ var canToggle = placement === 'vertical' && showCollapse;
124
+ return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
120
125
  ref: ref,
121
126
  role: role,
122
127
  className: cls
123
- }, rest), /*#__PURE__*/React__default['default'].createElement(context['default'].Provider, {
128
+ }, rest), /*#__PURE__*/React__default["default"].createElement(context["default"].Provider, {
124
129
  value: {
125
130
  placement: placement,
126
131
  expandedType: expandedType,
@@ -134,17 +139,23 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
134
139
  activeId: _activeId,
135
140
  expandedIds: _expandedIds
136
141
  }
137
- }, /*#__PURE__*/React__default['default'].createElement("ul", {
142
+ }, /*#__PURE__*/React__default["default"].createElement("ul", {
138
143
  className: classname.cx(prefixCls + "__wrapper")
139
- }, data.map(function (d) {
140
- return /*#__PURE__*/React__default['default'].createElement(MenuItem.MenuItem, Object.assign({}, d, {
141
- key: d.id,
144
+ }, data.map(function (item) {
145
+ return canToggle && mini ? /*#__PURE__*/React__default["default"].createElement(Tooltip__default["default"], {
146
+ title: item.title,
147
+ key: item.id,
148
+ placement: "right"
149
+ }, /*#__PURE__*/React__default["default"].createElement(MenuItem.MenuItem, Object.assign({}, item, {
150
+ level: 1
151
+ }))) : /*#__PURE__*/React__default["default"].createElement(MenuItem.MenuItem, Object.assign({}, item, {
152
+ key: item.id,
142
153
  level: 1
143
154
  }));
144
- })), placement === 'vertical' && showCollapse && /*#__PURE__*/React__default['default'].createElement("div", {
155
+ })), canToggle ? /*#__PURE__*/React__default["default"].createElement("div", {
145
156
  className: classname.cx(prefixCls + "__toggle"),
146
157
  onClick: onToggle
147
- }, mini ? /*#__PURE__*/React__default['default'].createElement(icons.RightOutlined, null) : /*#__PURE__*/React__default['default'].createElement(icons.LeftOutlined, null))));
158
+ }, mini ? /*#__PURE__*/React__default["default"].createElement(icons.MenuUnfoldOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.MenuFoldOutlined, null)) : null));
148
159
  });
149
160
 
150
161
  if (env.__DEV__) {
@@ -152,4 +163,3 @@ if (env.__DEV__) {
152
163
  }
153
164
 
154
165
  exports.Menu = Menu;
155
- //# sourceMappingURL=Menu.js.map
package/lib/cjs/MenuItem.js CHANGED
@@ -15,6 +15,8 @@ Object.defineProperty(exports, '__esModule', {
15
15
  value: true
16
16
  });
17
17
 
18
+ var tslib = require('tslib');
19
+
18
20
  var React = require('react');
19
21
 
20
22
  var classname = require('@hi-ui/classname');
@@ -25,10 +27,16 @@ var icons = require('@hi-ui/icons');
25
27
 
26
28
  var context = require('./context.js');
27
29
 
28
- var popper = require('@hi-ui/popper');
30
+ var Popper = require('@hi-ui/popper');
29
31
 
30
32
  var Expander = require('./Expander.js');
31
33
 
34
+ var typeAssertion = require('@hi-ui/type-assertion');
35
+
36
+ var arrayUtils = require('@hi-ui/array-utils');
37
+
38
+ var useMergeRefs = require('@hi-ui/use-merge-refs');
39
+
32
40
  function _interopDefaultLegacy(e) {
33
41
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
34
42
  'default': e
@@ -37,24 +45,28 @@ function _interopDefaultLegacy(e) {
37
45
 
38
46
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
39
47
 
40
- var MENU_PREFIX = classname.getPrefixCls('menu');
48
+ var Popper__default = /*#__PURE__*/_interopDefaultLegacy(Popper);
41
49
 
42
- var MenuItem = function MenuItem(_ref) {
50
+ var MENU_PREFIX = classname.getPrefixCls('menu');
51
+ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
43
52
  var _cx, _cx2;
44
53
 
45
- var _ref$prefixCls = _ref.prefixCls,
46
- prefixCls = _ref$prefixCls === void 0 ? MENU_PREFIX : _ref$prefixCls,
47
- icon = _ref.icon,
48
- content = _ref.content,
49
- disabled = _ref.disabled,
50
- id = _ref.id,
51
- _ref$level = _ref.level,
52
- level = _ref$level === void 0 ? 1 : _ref$level,
53
- children = _ref.children,
54
- parentIds = _ref.parentIds;
54
+ var _a$prefixCls = _a.prefixCls,
55
+ prefixCls = _a$prefixCls === void 0 ? MENU_PREFIX : _a$prefixCls,
56
+ className = _a.className,
57
+ icon = _a.icon,
58
+ title = _a.title,
59
+ disabled = _a.disabled,
60
+ id = _a.id,
61
+ _a$level = _a.level,
62
+ level = _a$level === void 0 ? 1 : _a$level,
63
+ children = _a.children,
64
+ parentIds = _a.parentIds,
65
+ rest = tslib.__rest(_a, ["prefixCls", "className", "icon", "title", "disabled", "id", "level", "children", "parentIds"]);
66
+
55
67
  var itemRef = React.useRef(null);
56
68
 
57
- var _useContext = React.useContext(context['default']),
69
+ var _useContext = React.useContext(context["default"]),
58
70
  placement = _useContext.placement,
59
71
  expandedType = _useContext.expandedType,
60
72
  showAllSubMenus = _useContext.showAllSubMenus,
@@ -69,13 +81,15 @@ var MenuItem = function MenuItem(_ref) {
69
81
 
70
82
  var _parentIds = (parentIds || []).concat(id);
71
83
 
72
- return /*#__PURE__*/React__default['default'].createElement("li", {
73
- ref: itemRef,
74
- className: classname.cx(prefixCls + "-item", (_cx = {}, _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))
75
- }, /*#__PURE__*/React__default['default'].createElement("div", {
76
- className: classname.cx(prefixCls + "-item__inner", (_cx2 = {}, _cx2[prefixCls + "-item__inner--mini"] = mini, _cx2[prefixCls + "-item__inner--active"] = activeId === id, _cx2[prefixCls + "-item__inner--active-p"] = activeParents === null || activeParents === void 0 ? void 0 : activeParents.includes(id), _cx2)),
84
+ var hasChildren = typeAssertion.isArrayNonEmpty(children);
85
+ var mergedRef = useMergeRefs.useMergeRefs(itemRef, ref);
86
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("li", Object.assign({
87
+ 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)
89
+ }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
90
+ 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)),
77
91
  onClick: function onClick() {
78
- if (children === null || children === void 0 ? void 0 : children.length) {
92
+ if (typeAssertion.isArrayNonEmpty(children)) {
79
93
  if (clickSubMenu) {
80
94
  clickSubMenu(id);
81
95
  }
@@ -84,27 +98,47 @@ var MenuItem = function MenuItem(_ref) {
84
98
  clickMenu(id);
85
99
  }
86
100
 
87
- if (closeAllPopper && !(placement === 'vertical' && expandedType === 'default' && mini === false)) {
101
+ if (closeAllPopper && !(placement === 'vertical' && expandedType === 'collapse' && mini === false)) {
88
102
  closeAllPopper();
89
103
  }
90
104
  }
91
- },
92
- style: placement === 'vertical' && expandedType === 'default' && !mini ? {
93
- paddingLeft: level > 1 ? 12 + (level - 1 > 0 ? 1 : 0) * 20 + (level - 2 || 0) * 16 : 12
94
- } : {}
95
- }, icon, /*#__PURE__*/React__default['default'].createElement("span", {
105
+ }
106
+ }, placement === 'vertical' && expandedType === 'collapse' && !mini ? renderIndent({
107
+ prefixCls: prefixCls + "-item",
108
+ depth: level - 1
109
+ }) : null, icon ? /*#__PURE__*/React__default["default"].createElement("span", {
110
+ className: prefixCls + "-item__icon"
111
+ }, icon) : null, /*#__PURE__*/React__default["default"].createElement("span", {
96
112
  className: prefixCls + "-item__content"
97
- }, content), (children === null || children === void 0 ? void 0 : children.length) && !mini && placement === 'vertical' && expandedType === 'default' && !showAllSubMenus && ((expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/React__default['default'].createElement(icons.UpOutlined, null) : /*#__PURE__*/React__default['default'].createElement(icons.DownOutlined, null)), (children === null || children === void 0 ? void 0 : children.length) && mini && level > 1 && placement === 'vertical' && /*#__PURE__*/React__default['default'].createElement(icons.RightOutlined, null), (children === null || children === void 0 ? void 0 : children.length) && !mini && placement === 'vertical' && (expandedType === 'pop' || showAllSubMenus) && /*#__PURE__*/React__default['default'].createElement(icons.RightOutlined, null), (children === null || children === void 0 ? void 0 : children.length) && placement === 'horizontal' && level > 1 && /*#__PURE__*/React__default['default'].createElement(icons.RightOutlined, null), (children === null || children === void 0 ? void 0 : children.length) && placement === 'horizontal' && level === 1 && ((expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/React__default['default'].createElement(icons.UpOutlined, null) : /*#__PURE__*/React__default['default'].createElement(icons.DownOutlined, null))), (children === null || children === void 0 ? void 0 : children.length) && placement === 'vertical' && !mini && !showAllSubMenus && expandedType === 'default' && /*#__PURE__*/React__default['default'].createElement(Expander.Expander, {
113
+ }, 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
+ prefixCls: prefixCls + "-item",
115
+ direction: "up"
116
+ }) : /*#__PURE__*/React__default["default"].createElement(Arrow, {
117
+ prefixCls: prefixCls + "-item",
118
+ direction: "down"
119
+ })), hasChildren && mini && level > 1 && placement === 'vertical' ? /*#__PURE__*/React__default["default"].createElement(Arrow, {
120
+ prefixCls: prefixCls + "-item"
121
+ }) : null, hasChildren && !mini && placement === 'vertical' && (expandedType === 'pop' || showAllSubMenus) ? /*#__PURE__*/React__default["default"].createElement(Arrow, {
122
+ prefixCls: prefixCls + "-item"
123
+ }) : null, hasChildren && placement === 'horizontal' && level > 1 ? /*#__PURE__*/React__default["default"].createElement(Arrow, {
124
+ prefixCls: prefixCls + "-item"
125
+ }) : null, hasChildren && placement === 'horizontal' && level === 1 && ((expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/React__default["default"].createElement(Arrow, {
126
+ prefixCls: prefixCls + "-item",
127
+ direction: "up"
128
+ }) : /*#__PURE__*/React__default["default"].createElement(Arrow, {
129
+ prefixCls: prefixCls + "-item",
130
+ direction: "down"
131
+ }))), hasChildren && placement === 'vertical' && !mini && !showAllSubMenus && expandedType === 'collapse' ? /*#__PURE__*/React__default["default"].createElement(Expander.Expander, {
98
132
  visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id))
99
- }, /*#__PURE__*/React__default['default'].createElement("ul", {
133
+ }, /*#__PURE__*/React__default["default"].createElement("ul", {
100
134
  className: prefixCls + "-submenu"
101
135
  }, children.map(function (child) {
102
- return /*#__PURE__*/React__default['default'].createElement(MenuItem, Object.assign({}, child, {
136
+ return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
103
137
  key: child.id,
104
138
  level: level + 1,
105
139
  parentIds: _parentIds
106
140
  }));
107
- }))), (children === null || children === void 0 ? void 0 : children.length) && placement === 'vertical' && mini && !showAllSubMenus && expandedType === 'default' && (level === 1 ? /*#__PURE__*/React__default['default'].createElement(popper.PopperPortal, {
141
+ }))) : null), hasChildren && placement === 'vertical' && mini && !showAllSubMenus && expandedType === 'collapse' && (level === 1 ? /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], {
108
142
  visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
109
143
  attachEl: itemRef.current,
110
144
  placement: 'right-start',
@@ -114,33 +148,34 @@ var MenuItem = function MenuItem(_ref) {
114
148
  closePopper(id);
115
149
  }
116
150
  }
117
- }, /*#__PURE__*/React__default['default'].createElement("ul", {
151
+ }, /*#__PURE__*/React__default["default"].createElement("ul", {
118
152
  className: prefixCls + "-popmenu"
119
153
  }, children.map(function (child) {
120
- return /*#__PURE__*/React__default['default'].createElement(MenuItem, Object.assign({}, child, {
154
+ return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
121
155
  key: child.id,
122
156
  level: level + 1,
123
157
  parentIds: _parentIds
124
158
  }));
125
- }))) : /*#__PURE__*/React__default['default'].createElement(popper.Popper, {
159
+ }))) : /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], {
126
160
  visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
127
161
  attachEl: itemRef.current,
128
162
  placement: 'right-start',
129
163
  gutterGap: 16,
164
+ disabledPortal: true,
130
165
  onClose: function onClose() {
131
166
  if (closePopper) {
132
167
  closePopper(id);
133
168
  }
134
169
  }
135
- }, /*#__PURE__*/React__default['default'].createElement("ul", {
170
+ }, /*#__PURE__*/React__default["default"].createElement("ul", {
136
171
  className: prefixCls + "-popmenu"
137
172
  }, children.map(function (child) {
138
- return /*#__PURE__*/React__default['default'].createElement(MenuItem, Object.assign({}, child, {
173
+ return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
139
174
  key: child.id,
140
175
  level: level + 1,
141
176
  parentIds: _parentIds
142
177
  }));
143
- })))), (children === null || children === void 0 ? void 0 : children.length) && placement === 'vertical' && !showAllSubMenus && expandedType === 'pop' && (level === 1 ? /*#__PURE__*/React__default['default'].createElement(popper.PopperPortal, {
178
+ })))), hasChildren && placement === 'vertical' && !showAllSubMenus && expandedType === 'pop' && (level === 1 ? /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], {
144
179
  visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
145
180
  attachEl: itemRef.current,
146
181
  placement: 'right-start',
@@ -150,17 +185,18 @@ var MenuItem = function MenuItem(_ref) {
150
185
  closePopper(id);
151
186
  }
152
187
  }
153
- }, /*#__PURE__*/React__default['default'].createElement("ul", {
188
+ }, /*#__PURE__*/React__default["default"].createElement("ul", {
154
189
  className: prefixCls + "-popmenu"
155
190
  }, children.map(function (child) {
156
- return /*#__PURE__*/React__default['default'].createElement(MenuItem, Object.assign({}, child, {
191
+ return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
157
192
  key: child.id,
158
193
  level: level + 1,
159
194
  parentIds: _parentIds
160
195
  }));
161
- }))) : /*#__PURE__*/React__default['default'].createElement(popper.Popper, {
196
+ }))) : /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], {
162
197
  visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
163
198
  attachEl: itemRef.current,
199
+ disabledPortal: true,
164
200
  placement: 'right-start',
165
201
  gutterGap: 16,
166
202
  onClose: function onClose() {
@@ -168,15 +204,15 @@ var MenuItem = function MenuItem(_ref) {
168
204
  closePopper(id);
169
205
  }
170
206
  }
171
- }, /*#__PURE__*/React__default['default'].createElement("ul", {
207
+ }, /*#__PURE__*/React__default["default"].createElement("ul", {
172
208
  className: prefixCls + "-popmenu"
173
209
  }, children.map(function (child) {
174
- return /*#__PURE__*/React__default['default'].createElement(MenuItem, Object.assign({}, child, {
210
+ return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
175
211
  key: child.id,
176
212
  level: level + 1,
177
213
  parentIds: _parentIds
178
214
  }));
179
- })))), (children === null || children === void 0 ? void 0 : children.length) && placement === 'vertical' && showAllSubMenus && /*#__PURE__*/React__default['default'].createElement(popper.PopperPortal, {
215
+ })))), hasChildren && placement === 'vertical' && showAllSubMenus ? /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], {
180
216
  visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
181
217
  attachEl: itemRef.current,
182
218
  placement: 'right-start',
@@ -186,20 +222,18 @@ var MenuItem = function MenuItem(_ref) {
186
222
  closePopper(id);
187
223
  }
188
224
  }
189
- }, /*#__PURE__*/React__default['default'].createElement("div", {
225
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
190
226
  className: prefixCls + "-fat-menu"
191
227
  }, children.map(function (child) {
192
- var _a;
193
-
194
- return /*#__PURE__*/React__default['default'].createElement("div", {
228
+ return /*#__PURE__*/React__default["default"].createElement("div", {
195
229
  key: child.id,
196
230
  className: prefixCls + "-fat-menu__group"
197
- }, /*#__PURE__*/React__default['default'].createElement("div", {
231
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
198
232
  className: prefixCls + "-group-item"
199
- }, child.content), ((_a = child === null || child === void 0 ? void 0 : child.children) === null || _a === void 0 ? void 0 : _a.length) && /*#__PURE__*/React__default['default'].createElement("ul", null, child.children.map(function (item) {
233
+ }, child.title), child && typeAssertion.isArrayNonEmpty(child.children) ? /*#__PURE__*/React__default["default"].createElement("ul", null, child.children.map(function (item) {
200
234
  var _cx3;
201
235
 
202
- return /*#__PURE__*/React__default['default'].createElement("div", {
236
+ return /*#__PURE__*/React__default["default"].createElement("div", {
203
237
  onClick: function onClick() {
204
238
  if (clickMenu) {
205
239
  clickMenu(item.id);
@@ -211,9 +245,9 @@ var MenuItem = function MenuItem(_ref) {
211
245
  },
212
246
  className: classname.cx(prefixCls + "-item", (_cx3 = {}, _cx3[prefixCls + "-item--active"] = activeId === item.id, _cx3)),
213
247
  key: item.id
214
- }, item.content);
215
- })));
216
- }))), (children === null || children === void 0 ? void 0 : children.length) && placement === 'horizontal' && !showAllSubMenus && (level === 1 ? /*#__PURE__*/React__default['default'].createElement(popper.PopperPortal, {
248
+ }, item.title);
249
+ })) : null);
250
+ }))) : null, hasChildren && placement === 'horizontal' && !showAllSubMenus && (level === 1 ? /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], {
217
251
  visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
218
252
  attachEl: itemRef.current,
219
253
  placement: level === 1 ? 'bottom-start' : 'right-start',
@@ -223,17 +257,18 @@ var MenuItem = function MenuItem(_ref) {
223
257
  closePopper(id);
224
258
  }
225
259
  }
226
- }, /*#__PURE__*/React__default['default'].createElement("ul", {
260
+ }, /*#__PURE__*/React__default["default"].createElement("ul", {
227
261
  className: prefixCls + "-popmenu"
228
262
  }, children.map(function (child) {
229
- return /*#__PURE__*/React__default['default'].createElement(MenuItem, Object.assign({}, child, {
263
+ return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
230
264
  key: child.id,
231
265
  level: level + 1,
232
266
  parentIds: _parentIds
233
267
  }));
234
- }))) : /*#__PURE__*/React__default['default'].createElement(popper.Popper, {
268
+ }))) : /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], {
235
269
  visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
236
270
  attachEl: itemRef.current,
271
+ disabledPortal: true,
237
272
  placement: level === 1 ? 'bottom-start' : 'right-start',
238
273
  gutterGap: level === 1 ? 8 : 16,
239
274
  onClose: function onClose() {
@@ -241,15 +276,15 @@ var MenuItem = function MenuItem(_ref) {
241
276
  closePopper(id);
242
277
  }
243
278
  }
244
- }, /*#__PURE__*/React__default['default'].createElement("ul", {
279
+ }, /*#__PURE__*/React__default["default"].createElement("ul", {
245
280
  className: prefixCls + "-popmenu"
246
281
  }, children.map(function (child) {
247
- return /*#__PURE__*/React__default['default'].createElement(MenuItem, Object.assign({}, child, {
282
+ return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
248
283
  key: child.id,
249
284
  level: level + 1,
250
285
  parentIds: _parentIds
251
286
  }));
252
- })))), (children === null || children === void 0 ? void 0 : children.length) && placement === 'horizontal' && showAllSubMenus && /*#__PURE__*/React__default['default'].createElement(popper.PopperPortal, {
287
+ })))), hasChildren && placement === 'horizontal' && showAllSubMenus ? /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], {
253
288
  visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
254
289
  attachEl: itemRef.current,
255
290
  placement: 'bottom-start',
@@ -259,20 +294,18 @@ var MenuItem = function MenuItem(_ref) {
259
294
  closePopper(id);
260
295
  }
261
296
  }
262
- }, /*#__PURE__*/React__default['default'].createElement("div", {
297
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
263
298
  className: prefixCls + "-fat-menu"
264
299
  }, children.map(function (child) {
265
- var _a;
266
-
267
- return /*#__PURE__*/React__default['default'].createElement("div", {
300
+ return /*#__PURE__*/React__default["default"].createElement("div", {
268
301
  key: child.id,
269
302
  className: prefixCls + "-fat-menu__group"
270
- }, /*#__PURE__*/React__default['default'].createElement("div", {
303
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
271
304
  className: prefixCls + "-group-item"
272
- }, child.content), ((_a = child === null || child === void 0 ? void 0 : child.children) === null || _a === void 0 ? void 0 : _a.length) && /*#__PURE__*/React__default['default'].createElement("ul", null, child.children.map(function (item) {
305
+ }, child.title), child && typeAssertion.isArrayNonEmpty(child.children) ? /*#__PURE__*/React__default["default"].createElement("ul", null, child.children.map(function (item) {
273
306
  var _cx4;
274
307
 
275
- return /*#__PURE__*/React__default['default'].createElement("div", {
308
+ return /*#__PURE__*/React__default["default"].createElement("div", {
276
309
  className: classname.cx(prefixCls + "-item", (_cx4 = {}, _cx4[prefixCls + "-item--active"] = activeId === item.id, _cx4)),
277
310
  onClick: function onClick() {
278
311
  if (clickMenu) {
@@ -284,14 +317,51 @@ var MenuItem = function MenuItem(_ref) {
284
317
  }
285
318
  },
286
319
  key: item.id
287
- }, item.content);
288
- })));
289
- }))));
290
- };
320
+ }, item.title);
321
+ })) : null);
322
+ }))) : null);
323
+ });
291
324
 
292
325
  if (env.__DEV__) {
293
326
  MenuItem.displayName = 'MenuItem';
294
327
  }
295
328
 
329
+ var Arrow = function Arrow(_ref) {
330
+ var prefixCls = _ref.prefixCls,
331
+ direction = _ref.direction;
332
+ var icon = null;
333
+
334
+ switch (direction) {
335
+ case 'up':
336
+ icon = /*#__PURE__*/React__default["default"].createElement(icons.UpOutlined, null);
337
+ break;
338
+
339
+ case 'down':
340
+ icon = /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, null);
341
+ break;
342
+
343
+ default:
344
+ icon = /*#__PURE__*/React__default["default"].createElement(icons.RightOutlined, null);
345
+ }
346
+
347
+ return /*#__PURE__*/React__default["default"].createElement("span", {
348
+ className: prefixCls + "__arrow"
349
+ }, icon);
350
+ };
351
+ /**
352
+ * 渲染空白占位
353
+ */
354
+
355
+
356
+ var renderIndent = function renderIndent(_ref2) {
357
+ var prefixCls = _ref2.prefixCls,
358
+ depth = _ref2.depth;
359
+ return arrayUtils.times(depth, function (index) {
360
+ return /*#__PURE__*/React__default["default"].createElement("span", {
361
+ className: prefixCls + "__indent",
362
+ key: index
363
+ });
364
+ });
365
+ };
366
+
296
367
  exports.MenuItem = MenuItem;
297
- //# sourceMappingURL=MenuItem.js.map
package/lib/cjs/context.js CHANGED
@@ -17,4 +17,3 @@ var React = require('react');
17
17
 
18
18
  var MenuContext = /*#__PURE__*/React.createContext({});
19
19
  exports["default"] = MenuContext;
20
- //# sourceMappingURL=context.js.map
package/lib/cjs/index.js CHANGED
@@ -19,4 +19,3 @@ var Menu = require('./Menu.js');
19
19
 
20
20
  exports.Menu = Menu.Menu;
21
21
  exports["default"] = Menu.Menu;
22
- //# sourceMappingURL=index.js.map