@hi-ui/menu 4.0.0-beta.21 → 4.0.0-beta.24

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 (4) hide show
  1. package/lib/cjs/Menu.js +38 -28
  2. package/lib/esm/Menu.js +38 -28
  3. package/lib/types/Menu.d.ts +8 -0
  4. package/package.json +4 -4
package/lib/cjs/Menu.js CHANGED
@@ -46,6 +46,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
46
46
  var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
47
47
 
48
48
  var MENU_PREFIX = classname.getPrefixCls('menu');
49
+ var DEFAULT_EXPANDED_IDS = [];
50
+ var NOOP_ARRAY = [];
49
51
  /**
50
52
  * TODO: What is Menu
51
53
  */
@@ -58,62 +60,70 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
58
60
  _a$role = _a.role,
59
61
  role = _a$role === void 0 ? 'menu' : _a$role,
60
62
  className = _a.className,
61
- data = _a.data,
63
+ _a$data = _a.data,
64
+ data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
62
65
  _a$placement = _a.placement,
63
66
  placement = _a$placement === void 0 ? 'vertical' : _a$placement,
64
- showCollapse = _a.showCollapse,
67
+ _a$showCollapse = _a.showCollapse,
68
+ showCollapse = _a$showCollapse === void 0 ? false : _a$showCollapse,
65
69
  _a$expandedType = _a.expandedType,
66
70
  expandedType = _a$expandedType === void 0 ? 'collapse' : _a$expandedType,
67
71
  _a$showAllSubMenus = _a.showAllSubMenus,
68
72
  showAllSubMenus = _a$showAllSubMenus === void 0 ? false : _a$showAllSubMenus,
69
- defaultExpandedIds = _a.defaultExpandedIds,
70
- defaultActiveId = _a.defaultActiveId,
71
- activeId = _a.activeId,
73
+ _a$defaultExpandedIds = _a.defaultExpandedIds,
74
+ defaultExpandedIds = _a$defaultExpandedIds === void 0 ? DEFAULT_EXPANDED_IDS : _a$defaultExpandedIds,
75
+ expandedIdsProp = _a.expandedIds,
76
+ onExpand = _a.onExpand,
77
+ _a$defaultActiveId = _a.defaultActiveId,
78
+ defaultActiveId = _a$defaultActiveId === void 0 ? '' : _a$defaultActiveId,
79
+ activeIdProp = _a.activeId,
72
80
  onClickSubMenu = _a.onClickSubMenu,
73
81
  onClick = _a.onClick,
74
- rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandedIds", "defaultActiveId", "activeId", "onClickSubMenu", "onClick"]);
82
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "onClick"]);
75
83
 
76
- var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultActiveId || '', activeId, onClick),
77
- _activeId = _useUncontrolledState[0],
84
+ var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultActiveId, activeIdProp, onClick),
85
+ activeId = _useUncontrolledState[0],
78
86
  updateActiveId = _useUncontrolledState[1];
79
87
 
80
- var _useState = React.useState(util.getAncestorIds(_activeId, data)),
88
+ var _useState = React.useState(function () {
89
+ return util.getAncestorIds(activeId, data);
90
+ }),
81
91
  activeParents = _useState[0],
82
92
  updateActiveParents = _useState[1];
83
93
 
84
94
  React.useEffect(function () {
85
- updateActiveParents(util.getAncestorIds(_activeId, data));
86
- }, [_activeId, data]);
95
+ updateActiveParents(util.getAncestorIds(activeId, data));
96
+ }, [activeId, data]);
87
97
 
88
- var _useState2 = React.useState(defaultExpandedIds || []),
89
- _expandedIds = _useState2[0],
90
- updateExpanedIds = _useState2[1];
98
+ var _useUncontrolledState2 = useUncontrolledState.useUncontrolledState(defaultExpandedIds, expandedIdsProp, onExpand),
99
+ expandedIds = _useUncontrolledState2[0],
100
+ updateExpandedIds = _useUncontrolledState2[1];
91
101
 
92
102
  var clickMenu = React.useCallback(function (id) {
93
103
  updateActiveId(id);
94
104
  }, [updateActiveId]);
95
105
  var clickSubMenu = React.useCallback(function (id) {
96
- var expandedIds = _expandedIds.includes(id) ? _expandedIds.filter(function (expandedId) {
106
+ var nextExpandedIds = expandedIds.includes(id) ? expandedIds.filter(function (expandedId) {
97
107
  return expandedId !== id;
98
- }) : _expandedIds.concat(id);
99
- updateExpanedIds(expandedIds);
108
+ }) : expandedIds.concat(id);
109
+ updateExpandedIds(nextExpandedIds);
100
110
 
101
111
  if (onClickSubMenu) {
102
- onClickSubMenu(id, expandedIds);
112
+ onClickSubMenu(id, nextExpandedIds);
103
113
  }
104
- }, [onClickSubMenu, _expandedIds]);
114
+ }, [onClickSubMenu, expandedIds, updateExpandedIds]);
105
115
  var closePopper = React.useCallback(function (id) {
106
- updateExpanedIds(_expandedIds.filter(function (expandedId) {
116
+ updateExpandedIds(expandedIds.filter(function (expandedId) {
107
117
  return expandedId !== id;
108
118
  }));
109
- }, [_expandedIds]);
119
+ }, [expandedIds, updateExpandedIds]);
110
120
  var closeAllPopper = React.useCallback(function () {
111
- updateExpanedIds([]);
112
- }, []);
121
+ updateExpandedIds([]);
122
+ }, [updateExpandedIds]);
113
123
 
114
- var _useState3 = React.useState(false),
115
- mini = _useState3[0],
116
- setMini = _useState3[1];
124
+ var _useState2 = React.useState(false),
125
+ mini = _useState2[0],
126
+ setMini = _useState2[1];
117
127
 
118
128
  var cls = classname.cx(prefixCls, className, prefixCls + "--" + placement, (_cx = {}, _cx[prefixCls + "--mini"] = mini, _cx[prefixCls + "--popup"] = expandedType === 'pop' || showAllSubMenus || mini, _cx));
119
129
  var onToggle = React.useCallback(function () {
@@ -136,8 +146,8 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
136
146
  closePopper: closePopper,
137
147
  closeAllPopper: closeAllPopper,
138
148
  activeParents: activeParents,
139
- activeId: _activeId,
140
- expandedIds: _expandedIds
149
+ activeId: activeId,
150
+ expandedIds: expandedIds
141
151
  }
142
152
  }, /*#__PURE__*/React__default["default"].createElement("ul", {
143
153
  className: classname.cx(prefixCls + "__wrapper")
package/lib/esm/Menu.js CHANGED
@@ -18,6 +18,8 @@ import { getAncestorIds } from './util.js';
18
18
  import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
19
19
  import Tooltip from '@hi-ui/tooltip';
20
20
  var MENU_PREFIX = getPrefixCls('menu');
21
+ var DEFAULT_EXPANDED_IDS = [];
22
+ var NOOP_ARRAY = [];
21
23
  /**
22
24
  * TODO: What is Menu
23
25
  */
@@ -30,62 +32,70 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
30
32
  _a$role = _a.role,
31
33
  role = _a$role === void 0 ? 'menu' : _a$role,
32
34
  className = _a.className,
33
- data = _a.data,
35
+ _a$data = _a.data,
36
+ data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
34
37
  _a$placement = _a.placement,
35
38
  placement = _a$placement === void 0 ? 'vertical' : _a$placement,
36
- showCollapse = _a.showCollapse,
39
+ _a$showCollapse = _a.showCollapse,
40
+ showCollapse = _a$showCollapse === void 0 ? false : _a$showCollapse,
37
41
  _a$expandedType = _a.expandedType,
38
42
  expandedType = _a$expandedType === void 0 ? 'collapse' : _a$expandedType,
39
43
  _a$showAllSubMenus = _a.showAllSubMenus,
40
44
  showAllSubMenus = _a$showAllSubMenus === void 0 ? false : _a$showAllSubMenus,
41
- defaultExpandedIds = _a.defaultExpandedIds,
42
- defaultActiveId = _a.defaultActiveId,
43
- activeId = _a.activeId,
45
+ _a$defaultExpandedIds = _a.defaultExpandedIds,
46
+ defaultExpandedIds = _a$defaultExpandedIds === void 0 ? DEFAULT_EXPANDED_IDS : _a$defaultExpandedIds,
47
+ expandedIdsProp = _a.expandedIds,
48
+ onExpand = _a.onExpand,
49
+ _a$defaultActiveId = _a.defaultActiveId,
50
+ defaultActiveId = _a$defaultActiveId === void 0 ? '' : _a$defaultActiveId,
51
+ activeIdProp = _a.activeId,
44
52
  onClickSubMenu = _a.onClickSubMenu,
45
53
  onClick = _a.onClick,
46
- rest = __rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandedIds", "defaultActiveId", "activeId", "onClickSubMenu", "onClick"]);
54
+ rest = __rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "onClick"]);
47
55
 
48
- var _useUncontrolledState = useUncontrolledState(defaultActiveId || '', activeId, onClick),
49
- _activeId = _useUncontrolledState[0],
56
+ var _useUncontrolledState = useUncontrolledState(defaultActiveId, activeIdProp, onClick),
57
+ activeId = _useUncontrolledState[0],
50
58
  updateActiveId = _useUncontrolledState[1];
51
59
 
52
- var _useState = useState(getAncestorIds(_activeId, data)),
60
+ var _useState = useState(function () {
61
+ return getAncestorIds(activeId, data);
62
+ }),
53
63
  activeParents = _useState[0],
54
64
  updateActiveParents = _useState[1];
55
65
 
56
66
  useEffect(function () {
57
- updateActiveParents(getAncestorIds(_activeId, data));
58
- }, [_activeId, data]);
67
+ updateActiveParents(getAncestorIds(activeId, data));
68
+ }, [activeId, data]);
59
69
 
60
- var _useState2 = useState(defaultExpandedIds || []),
61
- _expandedIds = _useState2[0],
62
- updateExpanedIds = _useState2[1];
70
+ var _useUncontrolledState2 = useUncontrolledState(defaultExpandedIds, expandedIdsProp, onExpand),
71
+ expandedIds = _useUncontrolledState2[0],
72
+ updateExpandedIds = _useUncontrolledState2[1];
63
73
 
64
74
  var clickMenu = useCallback(function (id) {
65
75
  updateActiveId(id);
66
76
  }, [updateActiveId]);
67
77
  var clickSubMenu = useCallback(function (id) {
68
- var expandedIds = _expandedIds.includes(id) ? _expandedIds.filter(function (expandedId) {
78
+ var nextExpandedIds = expandedIds.includes(id) ? expandedIds.filter(function (expandedId) {
69
79
  return expandedId !== id;
70
- }) : _expandedIds.concat(id);
71
- updateExpanedIds(expandedIds);
80
+ }) : expandedIds.concat(id);
81
+ updateExpandedIds(nextExpandedIds);
72
82
 
73
83
  if (onClickSubMenu) {
74
- onClickSubMenu(id, expandedIds);
84
+ onClickSubMenu(id, nextExpandedIds);
75
85
  }
76
- }, [onClickSubMenu, _expandedIds]);
86
+ }, [onClickSubMenu, expandedIds, updateExpandedIds]);
77
87
  var closePopper = useCallback(function (id) {
78
- updateExpanedIds(_expandedIds.filter(function (expandedId) {
88
+ updateExpandedIds(expandedIds.filter(function (expandedId) {
79
89
  return expandedId !== id;
80
90
  }));
81
- }, [_expandedIds]);
91
+ }, [expandedIds, updateExpandedIds]);
82
92
  var closeAllPopper = useCallback(function () {
83
- updateExpanedIds([]);
84
- }, []);
93
+ updateExpandedIds([]);
94
+ }, [updateExpandedIds]);
85
95
 
86
- var _useState3 = useState(false),
87
- mini = _useState3[0],
88
- setMini = _useState3[1];
96
+ var _useState2 = useState(false),
97
+ mini = _useState2[0],
98
+ setMini = _useState2[1];
89
99
 
90
100
  var cls = cx(prefixCls, className, prefixCls + "--" + placement, (_cx = {}, _cx[prefixCls + "--mini"] = mini, _cx[prefixCls + "--popup"] = expandedType === 'pop' || showAllSubMenus || mini, _cx));
91
101
  var onToggle = useCallback(function () {
@@ -108,8 +118,8 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
108
118
  closePopper: closePopper,
109
119
  closeAllPopper: closeAllPopper,
110
120
  activeParents: activeParents,
111
- activeId: _activeId,
112
- expandedIds: _expandedIds
121
+ activeId: activeId,
122
+ expandedIds: expandedIds
113
123
  }
114
124
  }, /*#__PURE__*/React.createElement("ul", {
115
125
  className: cx(prefixCls + "__wrapper")
package/lib/types/Menu.d.ts CHANGED
@@ -50,6 +50,14 @@ export interface MenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'> {
50
50
  * 默认展开菜单项 ids 列表
51
51
  */
52
52
  defaultExpandedIds?: React.ReactText[];
53
+ /**
54
+ * 展开菜单项 ids 列表
55
+ */
56
+ expandedIds?: React.ReactText[];
57
+ /**
58
+ * 展开菜单时回调
59
+ */
60
+ onExpand?: (expandedIds: React.ReactText[]) => void;
53
61
  /**
54
62
  * 点击菜单选项时的回调
55
63
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/menu",
3
- "version": "4.0.0-beta.21",
3
+ "version": "4.0.0-beta.24",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -49,9 +49,9 @@
49
49
  "@hi-ui/core-css": "^4.0.0-beta.5",
50
50
  "@hi-ui/env": "^4.0.0-beta.1",
51
51
  "@hi-ui/icons": "^4.0.0-beta.11",
52
- "@hi-ui/popper": "^4.0.0-beta.17",
52
+ "@hi-ui/popper": "^4.0.0-beta.19",
53
53
  "@hi-ui/times": "^4.0.0-beta.6",
54
- "@hi-ui/tooltip": "^4.0.0-beta.22",
54
+ "@hi-ui/tooltip": "^4.0.0-beta.25",
55
55
  "@hi-ui/type-assertion": "^4.0.0-beta.5",
56
56
  "@hi-ui/use-merge-refs": "^4.0.0-beta.5",
57
57
  "@hi-ui/use-uncontrolled-state": "^4.0.0-beta.5",
@@ -66,5 +66,5 @@
66
66
  "react": "^17.0.1",
67
67
  "react-dom": "^17.0.1"
68
68
  },
69
- "gitHead": "a59dd6b403457d48fea690a9c6f50b701a8e667b"
69
+ "gitHead": "bbb2e20ee5502a277f756eb36ce587f2c0242a8e"
70
70
  }