@hi-ui/dropdown 4.1.1 → 4.1.3
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 +41 -0
- package/lib/cjs/Dropdown.js +63 -102
- package/lib/cjs/context.js +0 -6
- package/lib/cjs/index.js +0 -4
- package/lib/cjs/styles/index.scss.js +0 -3
- package/lib/cjs/use-dropdown.js +30 -65
- package/lib/cjs/utils/index.js +1 -4
- package/lib/esm/Dropdown.js +60 -84
- package/lib/esm/context.js +0 -4
- package/lib/esm/styles/index.scss.js +0 -2
- package/lib/esm/use-dropdown.js +30 -52
- package/lib/esm/utils/index.js +1 -2
- package/package.json +16 -16
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,46 @@
|
|
|
1
1
|
# @hi-ui/dropdown
|
|
2
2
|
|
|
3
|
+
## 4.1.3
|
|
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-latest@4.0.3
|
|
12
|
+
- @hi-ui/use-timeout@4.0.3
|
|
13
|
+
- @hi-ui/use-toggle@4.0.3
|
|
14
|
+
- @hi-ui/use-unmount-effect@4.0.3
|
|
15
|
+
- @hi-ui/icons@4.0.17
|
|
16
|
+
- @hi-ui/button@4.0.8
|
|
17
|
+
- @hi-ui/popper@4.1.2
|
|
18
|
+
- @hi-ui/classname@4.0.3
|
|
19
|
+
- @hi-ui/dom-utils@4.0.6
|
|
20
|
+
- @hi-ui/react-utils@4.0.3
|
|
21
|
+
- @hi-ui/type-assertion@4.0.3
|
|
22
|
+
|
|
23
|
+
## 4.1.2
|
|
24
|
+
|
|
25
|
+
### Patch Changes
|
|
26
|
+
|
|
27
|
+
- [#2672](https://github.com/XiaoMi/hiui/pull/2672) [`1ebe27830`](https://github.com/XiaoMi/hiui/commit/1ebe2783098b3a8cd980bd10076d67635463800e) Thanks [@zyprepare](https://github.com/zyprepare)! - build: 升级到 rollup3,重新构建发布组件
|
|
28
|
+
|
|
29
|
+
- Updated dependencies [[`1ebe27830`](https://github.com/XiaoMi/hiui/commit/1ebe2783098b3a8cd980bd10076d67635463800e)]:
|
|
30
|
+
- @hi-ui/core@4.0.6
|
|
31
|
+
- @hi-ui/use-latest@4.0.2
|
|
32
|
+
- @hi-ui/use-timeout@4.0.2
|
|
33
|
+
- @hi-ui/use-toggle@4.0.2
|
|
34
|
+
- @hi-ui/use-unmount-effect@4.0.2
|
|
35
|
+
- @hi-ui/icons@4.0.16
|
|
36
|
+
- @hi-ui/button@4.0.7
|
|
37
|
+
- @hi-ui/popper@4.1.1
|
|
38
|
+
- @hi-ui/classname@4.0.2
|
|
39
|
+
- @hi-ui/dom-utils@4.0.5
|
|
40
|
+
- @hi-ui/env@4.0.2
|
|
41
|
+
- @hi-ui/react-utils@4.0.2
|
|
42
|
+
- @hi-ui/type-assertion@4.0.2
|
|
43
|
+
|
|
3
44
|
## 4.1.1
|
|
4
45
|
|
|
5
46
|
### Patch Changes
|
package/lib/cjs/Dropdown.js
CHANGED
|
@@ -10,95 +10,72 @@
|
|
|
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 env = require('@hi-ui/env');
|
|
25
|
-
|
|
26
20
|
var popper = require('@hi-ui/popper');
|
|
27
|
-
|
|
28
21
|
var context = require('./context.js');
|
|
29
|
-
|
|
30
22
|
var useDropdown = require('./use-dropdown.js');
|
|
31
|
-
|
|
32
23
|
var typeAssertion = require('@hi-ui/type-assertion');
|
|
33
|
-
|
|
34
24
|
var Button = require('@hi-ui/button');
|
|
35
|
-
|
|
36
25
|
var icons = require('@hi-ui/icons');
|
|
37
|
-
|
|
38
|
-
function _interopDefaultLegacy(e) {
|
|
26
|
+
function _interopDefaultCompat(e) {
|
|
39
27
|
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
40
28
|
'default': e
|
|
41
29
|
};
|
|
42
30
|
}
|
|
43
|
-
|
|
44
|
-
var
|
|
45
|
-
|
|
46
|
-
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
|
|
47
|
-
|
|
31
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
32
|
+
var Button__default = /*#__PURE__*/_interopDefaultCompat(Button);
|
|
48
33
|
var _role = 'dropdown';
|
|
49
|
-
|
|
50
34
|
var _prefix = classname.getPrefixCls(_role);
|
|
51
|
-
|
|
52
35
|
var DEFAULT_DATA = [];
|
|
53
36
|
/**
|
|
54
37
|
* 下拉菜单
|
|
55
38
|
*/
|
|
56
|
-
|
|
57
39
|
var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
58
40
|
var _a$prefixCls = _a.prefixCls,
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
41
|
+
prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
|
|
42
|
+
_a$role = _a.role,
|
|
43
|
+
role = _a$role === void 0 ? _role : _a$role,
|
|
44
|
+
className = _a.className,
|
|
45
|
+
triggerButton = _a.children,
|
|
46
|
+
_a$data = _a.data,
|
|
47
|
+
data = _a$data === void 0 ? DEFAULT_DATA : _a$data,
|
|
48
|
+
title = _a.title,
|
|
49
|
+
_a$type = _a.type,
|
|
50
|
+
type = _a$type === void 0 ? 'text' : _a$type,
|
|
51
|
+
_onClick = _a.onClick,
|
|
52
|
+
onButtonClick = _a.onButtonClick,
|
|
53
|
+
overlayClassName = _a.overlayClassName,
|
|
54
|
+
_a$size = _a.size,
|
|
55
|
+
size = _a$size === void 0 ? 'md' : _a$size,
|
|
56
|
+
rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "data", "title", "type", "onClick", "onButtonClick", "overlayClassName", "size"]);
|
|
76
57
|
var _b = useDropdown.useDropdown(rest),
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
58
|
+
rootProps = _b.rootProps,
|
|
59
|
+
providedValue = tslib.__rest(_b, ["rootProps"]);
|
|
80
60
|
var getMenuProps = providedValue.getMenuProps,
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
61
|
+
getTriggerProps = providedValue.getTriggerProps,
|
|
62
|
+
disabled = providedValue.disabled,
|
|
63
|
+
menuVisibleAction = providedValue.menuVisibleAction;
|
|
84
64
|
var cls = classname.cx(prefixCls, className, disabled && prefixCls + "--disabled");
|
|
85
|
-
|
|
86
65
|
var dig = function dig(treeData) {
|
|
87
66
|
return treeData.map(function (item) {
|
|
88
|
-
var menu = typeAssertion.isArrayNonEmpty(item.children) ? /*#__PURE__*/React__default["default"].createElement(DropdownMenu, {
|
|
67
|
+
var menu = typeAssertion.isArrayNonEmpty(item.children) ? ( /*#__PURE__*/React__default["default"].createElement(DropdownMenu, {
|
|
89
68
|
overlay: {
|
|
90
69
|
gutterGap: 16
|
|
91
70
|
},
|
|
92
71
|
size: size
|
|
93
|
-
}, dig(item.children)) : null;
|
|
94
|
-
|
|
72
|
+
}, dig(item.children))) : null;
|
|
95
73
|
if (item.split) {
|
|
96
74
|
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
97
75
|
key: item.id,
|
|
98
76
|
className: prefixCls + "-divider"
|
|
99
77
|
});
|
|
100
78
|
}
|
|
101
|
-
|
|
102
79
|
return /*#__PURE__*/React__default["default"].createElement(DropdownMenuItem, {
|
|
103
80
|
key: item.id,
|
|
104
81
|
disabled: item.disabled,
|
|
@@ -109,7 +86,6 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
109
86
|
onClick: function onClick() {
|
|
110
87
|
if (item.disabled) return;
|
|
111
88
|
_onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id);
|
|
112
|
-
|
|
113
89
|
if (!typeAssertion.isArray(item.children)) {
|
|
114
90
|
menuVisibleAction.off();
|
|
115
91
|
}
|
|
@@ -117,13 +93,11 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
117
93
|
}, item.title);
|
|
118
94
|
});
|
|
119
95
|
};
|
|
120
|
-
|
|
121
96
|
var renderButton = function renderButton() {
|
|
122
97
|
if (triggerButton) {
|
|
123
98
|
// @ts-ignore
|
|
124
99
|
return /*#__PURE__*/React.cloneElement(triggerButton, getTriggerProps(triggerButton.props, triggerButton.ref));
|
|
125
100
|
}
|
|
126
|
-
|
|
127
101
|
if (type === 'text' || type === 'button') {
|
|
128
102
|
return /*#__PURE__*/React__default["default"].createElement(Button__default["default"], Object.assign({}, getTriggerProps(), {
|
|
129
103
|
appearance: type === 'button' ? 'filled' : 'link'
|
|
@@ -133,7 +107,6 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
133
107
|
}
|
|
134
108
|
}));
|
|
135
109
|
}
|
|
136
|
-
|
|
137
110
|
if (type === 'group') {
|
|
138
111
|
return /*#__PURE__*/React__default["default"].createElement(Button.ButtonGroup, null, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
|
|
139
112
|
onClick: onButtonClick
|
|
@@ -143,42 +116,37 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
143
116
|
icon: /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, null)
|
|
144
117
|
})));
|
|
145
118
|
}
|
|
146
|
-
|
|
147
119
|
return null;
|
|
148
120
|
};
|
|
149
|
-
|
|
150
121
|
return /*#__PURE__*/React__default["default"].createElement(context.DropDownProvider, {
|
|
151
122
|
value: providedValue
|
|
152
123
|
}, /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
|
|
153
124
|
ref: ref,
|
|
154
125
|
role: role,
|
|
155
126
|
className: cls
|
|
156
|
-
}, rootProps), renderButton(), typeAssertion.isArrayNonEmpty(data) ? /*#__PURE__*/React__default["default"].createElement(DropdownMenu, Object.assign({}, getMenuProps({
|
|
127
|
+
}, rootProps), renderButton(), typeAssertion.isArrayNonEmpty(data) ? ( /*#__PURE__*/React__default["default"].createElement(DropdownMenu, Object.assign({}, getMenuProps({
|
|
157
128
|
overlay: {
|
|
158
129
|
disabledPortal: false,
|
|
159
130
|
className: overlayClassName
|
|
160
131
|
}
|
|
161
132
|
}), {
|
|
162
133
|
size: size
|
|
163
|
-
}), dig(data)) : null));
|
|
134
|
+
}), dig(data))) : null));
|
|
164
135
|
});
|
|
165
|
-
|
|
166
136
|
if (env.__DEV__) {
|
|
167
137
|
Dropdown.displayName = 'Dropdown';
|
|
168
138
|
}
|
|
169
|
-
|
|
170
139
|
var dropdownMenuPrefix = classname.getPrefixCls('dropdown-menu');
|
|
171
140
|
var DropdownMenu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
172
141
|
var _a$prefixCls2 = _a.prefixCls,
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
142
|
+
prefixCls = _a$prefixCls2 === void 0 ? dropdownMenuPrefix : _a$prefixCls2,
|
|
143
|
+
overlay = _a.overlay,
|
|
144
|
+
parents = _a.parents,
|
|
145
|
+
className = _a.className,
|
|
146
|
+
children = _a.children,
|
|
147
|
+
_a$size2 = _a.size,
|
|
148
|
+
size = _a$size2 === void 0 ? 'lg' : _a$size2,
|
|
149
|
+
rest = tslib.__rest(_a, ["prefixCls", "role", "overlay", "parents", "className", "children", "size"]);
|
|
182
150
|
var cls = classname.cx(prefixCls, className, prefixCls + "--size-" + size);
|
|
183
151
|
return /*#__PURE__*/React__default["default"].createElement(popper.Popper, Object.assign({}, overlay), /*#__PURE__*/React__default["default"].createElement("ul", Object.assign({
|
|
184
152
|
ref: ref,
|
|
@@ -189,43 +157,38 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
189
157
|
});
|
|
190
158
|
}) : children));
|
|
191
159
|
});
|
|
192
|
-
|
|
193
160
|
if (env.__DEV__) {
|
|
194
161
|
DropdownMenu.displayName = 'DropdownMenu';
|
|
195
162
|
}
|
|
196
|
-
|
|
197
163
|
var dropdownMenuItemPrefix = classname.getPrefixCls('dropdown-menu-item');
|
|
198
164
|
var DropdownMenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
199
165
|
var _a$prefixCls3 = _a.prefixCls,
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
166
|
+
prefixCls = _a$prefixCls3 === void 0 ? dropdownMenuItemPrefix : _a$prefixCls3,
|
|
167
|
+
className = _a.className,
|
|
168
|
+
children = _a.children,
|
|
169
|
+
href = _a.href,
|
|
170
|
+
target = _a.target,
|
|
171
|
+
disabled = _a.disabled,
|
|
172
|
+
parentsProp = _a.parents,
|
|
173
|
+
menu = _a.menu,
|
|
174
|
+
rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "href", "value", "target", "disabled", "parents", "menu"]);
|
|
210
175
|
var _useDropDownContext = context.useDropDownContext(),
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
176
|
+
triggerMethods = _useDropDownContext.triggerMethods,
|
|
177
|
+
width = _useDropDownContext.width;
|
|
214
178
|
var _useDropdown = useDropdown.useDropdown(Object.assign(Object.assign({
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
179
|
+
overlay: {
|
|
180
|
+
placement: 'right-start',
|
|
181
|
+
disabledPortal: true
|
|
182
|
+
},
|
|
183
|
+
width: width
|
|
184
|
+
}, rest), {
|
|
185
|
+
trigger: triggerMethods,
|
|
186
|
+
parents: parentsProp
|
|
187
|
+
})),
|
|
188
|
+
menuVisible = _useDropdown.menuVisible,
|
|
189
|
+
rootProps = _useDropdown.rootProps,
|
|
190
|
+
getTriggerProps = _useDropdown.getTriggerProps,
|
|
191
|
+
getMenuProps = _useDropdown.getMenuProps;
|
|
229
192
|
var cls = classname.cx(prefixCls, className, menuVisible && prefixCls + "--active", disabled && prefixCls + "--disabled");
|
|
230
193
|
var shouldUseLink = href && !disabled;
|
|
231
194
|
return /*#__PURE__*/React__default["default"].createElement("li", Object.assign({
|
|
@@ -233,17 +196,15 @@ var DropdownMenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
233
196
|
className: cls
|
|
234
197
|
}, rootProps), /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
|
|
235
198
|
className: prefixCls + "__trigger"
|
|
236
|
-
}, getTriggerProps()), shouldUseLink ? /*#__PURE__*/React__default["default"].createElement("a", {
|
|
199
|
+
}, getTriggerProps()), shouldUseLink ? ( /*#__PURE__*/React__default["default"].createElement("a", {
|
|
237
200
|
className: prefixCls + "__link",
|
|
238
201
|
href: href,
|
|
239
202
|
target: target
|
|
240
|
-
}, children) : children, menu ? /*#__PURE__*/React__default["default"].createElement("span", {
|
|
203
|
+
}, children)) : children, menu ? ( /*#__PURE__*/React__default["default"].createElement("span", {
|
|
241
204
|
className: prefixCls + "__arrow"
|
|
242
|
-
}, /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, null)) : null), menu ? /*#__PURE__*/React.cloneElement(menu, Object.assign({}, getMenuProps(menu.props))) : null);
|
|
205
|
+
}, /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, null))) : null), menu ? /*#__PURE__*/React.cloneElement(menu, Object.assign({}, getMenuProps(menu.props))) : null);
|
|
243
206
|
});
|
|
244
|
-
|
|
245
207
|
if (env.__DEV__) {
|
|
246
208
|
DropdownMenuItem.displayName = 'DropdownMenuItem';
|
|
247
209
|
}
|
|
248
|
-
|
|
249
210
|
exports.Dropdown = Dropdown;
|
package/lib/cjs/context.js
CHANGED
|
@@ -12,21 +12,15 @@
|
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
|
13
13
|
value: true
|
|
14
14
|
});
|
|
15
|
-
|
|
16
15
|
var React = require('react');
|
|
17
|
-
|
|
18
16
|
var dropDownContext = /*#__PURE__*/React.createContext(null);
|
|
19
17
|
var DropDownProvider = dropDownContext.Provider;
|
|
20
|
-
|
|
21
18
|
var useDropDownContext = function useDropDownContext() {
|
|
22
19
|
var context = React.useContext(dropDownContext);
|
|
23
|
-
|
|
24
20
|
if (!context) {
|
|
25
21
|
throw new Error('The dropDownContext is not defined, Maybe it should be wrapped in Dropdown.');
|
|
26
22
|
}
|
|
27
|
-
|
|
28
23
|
return context;
|
|
29
24
|
};
|
|
30
|
-
|
|
31
25
|
exports.DropDownProvider = DropDownProvider;
|
|
32
26
|
exports.useDropDownContext = useDropDownContext;
|
package/lib/cjs/index.js
CHANGED
|
@@ -12,13 +12,9 @@
|
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
|
13
13
|
value: true
|
|
14
14
|
});
|
|
15
|
-
|
|
16
15
|
require('./styles/index.scss.js');
|
|
17
|
-
|
|
18
16
|
var Dropdown = require('./Dropdown.js');
|
|
19
|
-
|
|
20
17
|
var types = require('./types.js');
|
|
21
|
-
|
|
22
18
|
exports.Dropdown = Dropdown.Dropdown;
|
|
23
19
|
exports["default"] = Dropdown.Dropdown;
|
|
24
20
|
exports.DropdownTriggerActionEnum = types.DropdownTriggerActionEnum;
|
|
@@ -13,9 +13,6 @@ Object.defineProperty(exports, '__esModule', {
|
|
|
13
13
|
value: true
|
|
14
14
|
});
|
|
15
15
|
var css_248z = ".hi-v4-dropdown {display: inline-block;}.hi-v4-dropdown-menu {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px);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: var(--hi-v4-dropdown-menu-width, 180px);}.hi-v4-dropdown-menu-item {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;margin: 0;box-sizing: border-box;overflow: visible;}.hi-v4-dropdown-menu-item__link {color: var(--hi-v4-color-gray-700, #1f2733);width: 100%;text-decoration: none;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-dropdown-menu-item__arrow {-webkit-transform: rotate(-90deg);transform: rotate(-90deg);}.hi-v4-dropdown-menu-item__trigger {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;height: 100%;cursor: pointer;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;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}.hi-v4-dropdown-menu--size-lg .hi-v4-dropdown-menu-item__trigger {padding: var(--hi-v4-spacing-5, 10px) var(--hi-v4-spacing-5, 10px);}.hi-v4-dropdown-menu--size-md .hi-v4-dropdown-menu-item__trigger {padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-4, 8px);}.hi-v4-dropdown-menu--size-sm .hi-v4-dropdown-menu-item__trigger {padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-3, 6px);}.hi-v4-dropdown-menu-item:not(.hi-v4-dropdown-menu-item--disabled) > .hi-v4-dropdown-menu-item__trigger:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-dropdown-menu-item--active:not(.hi-v4-dropdown-menu-item--disabled) > .hi-v4-dropdown-menu-item__trigger {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-dropdown-menu-item--disabled > .hi-v4-dropdown-menu-item__trigger {cursor: not-allowed;color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-dropdown-divider {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;background-color: var(--hi-v4-color-gray-200, #ebedf0);width: 100%;height: 1px;margin: var(--hi-v4-spacing-4, 8px) 0;}";
|
|
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/use-dropdown.js
CHANGED
|
@@ -12,92 +12,70 @@
|
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
|
13
13
|
value: true
|
|
14
14
|
});
|
|
15
|
-
|
|
16
15
|
var tslib = require('tslib');
|
|
17
|
-
|
|
18
16
|
var React = require('react');
|
|
19
|
-
|
|
20
17
|
var types = require('./types.js');
|
|
21
|
-
|
|
22
18
|
var index = require('./utils/index.js');
|
|
23
|
-
|
|
24
19
|
var useToggle = require('@hi-ui/use-toggle');
|
|
25
|
-
|
|
26
20
|
var useLatest = require('@hi-ui/use-latest');
|
|
27
|
-
|
|
28
21
|
var useTimeout = require('@hi-ui/use-timeout');
|
|
29
|
-
|
|
30
22
|
var useUnmountEffect = require('@hi-ui/use-unmount-effect');
|
|
31
|
-
|
|
32
23
|
var classname = require('@hi-ui/classname');
|
|
33
|
-
|
|
34
24
|
var reactUtils = require('@hi-ui/react-utils');
|
|
35
|
-
|
|
36
25
|
var domUtils = require('@hi-ui/dom-utils');
|
|
37
|
-
|
|
38
26
|
var typeAssertion = require('@hi-ui/type-assertion');
|
|
39
|
-
|
|
40
27
|
var NOOP_ARRAY = [];
|
|
41
|
-
|
|
42
28
|
var useDropdown = function useDropdown(props) {
|
|
43
29
|
var _props$trigger = props.trigger,
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
30
|
+
triggerProp = _props$trigger === void 0 ? types.DropdownTriggerActionEnum.HOVER : _props$trigger,
|
|
31
|
+
_props$disabled = props.disabled,
|
|
32
|
+
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
|
33
|
+
_props$parents = props.parents,
|
|
34
|
+
parents = _props$parents === void 0 ? NOOP_ARRAY : _props$parents,
|
|
35
|
+
width = props.width,
|
|
36
|
+
overlay = props.overlay,
|
|
37
|
+
rest = tslib.__rest(props, ["trigger", "disabled", "parents", "width", "overlay"]);
|
|
53
38
|
var triggerElementRef = React.useRef(null);
|
|
54
39
|
var popperElementRef = React.useRef(null);
|
|
55
40
|
/**
|
|
56
41
|
* 抹平数组或字符串结构,同时 memo 处理,减少重渲染
|
|
57
42
|
*/
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
43
|
+
var trigger = index.normalizeTrigger(triggerProp);
|
|
44
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
61
45
|
var triggerMethods = React.useMemo(function () {
|
|
62
46
|
return trigger;
|
|
63
47
|
}, trigger);
|
|
64
|
-
|
|
65
48
|
var _useUncontrolledToggl = useToggle.useUncontrolledToggle({
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
49
|
+
defaultVisible: false,
|
|
50
|
+
disabled: disabled
|
|
51
|
+
}),
|
|
52
|
+
menuVisible = _useUncontrolledToggl[0],
|
|
53
|
+
menuVisibleAction = _useUncontrolledToggl[1];
|
|
71
54
|
/**
|
|
72
55
|
* 维护 trigger 元素 或 tooltip 弹出层元素的 hover 态
|
|
73
56
|
*/
|
|
74
|
-
|
|
75
|
-
|
|
76
57
|
var hoveringRef = React.useRef(false);
|
|
77
|
-
|
|
78
58
|
var _useTimeout = useTimeout.useTimeout(function () {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
59
|
+
if (disabled) return;
|
|
60
|
+
menuVisibleAction.on();
|
|
61
|
+
}, 0),
|
|
62
|
+
startOpenTimer = _useTimeout.start,
|
|
63
|
+
clearOpenTimer = _useTimeout.clear;
|
|
85
64
|
var _useTimeout2 = useTimeout.useTimeout(function () {
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
65
|
+
if (disabled) return;
|
|
66
|
+
if (hoveringRef.current) return;
|
|
67
|
+
menuVisibleAction.off();
|
|
68
|
+
}, 100),
|
|
69
|
+
startCloseTimer = _useTimeout2.start,
|
|
70
|
+
clearCloseTimer = _useTimeout2.clear;
|
|
93
71
|
var clearToggleTimer = React.useCallback(function () {
|
|
94
72
|
clearOpenTimer();
|
|
95
73
|
clearCloseTimer();
|
|
96
74
|
}, [clearOpenTimer, clearCloseTimer]);
|
|
97
75
|
useUnmountEffect.useUnmountEffect(clearToggleTimer);
|
|
98
76
|
var handlePopperLeave = useLatest.useLatestCallback(function (evt) {
|
|
99
|
-
hoveringRef.current = false;
|
|
100
|
-
|
|
77
|
+
hoveringRef.current = false;
|
|
78
|
+
// if (triggerElementRef.current?.contains(evt.target as HTMLElement)) return
|
|
101
79
|
clearOpenTimer();
|
|
102
80
|
startCloseTimer();
|
|
103
81
|
});
|
|
@@ -110,11 +88,9 @@ var useDropdown = function useDropdown(props) {
|
|
|
110
88
|
if (props === void 0) {
|
|
111
89
|
props = {};
|
|
112
90
|
}
|
|
113
|
-
|
|
114
91
|
if (ref === void 0) {
|
|
115
92
|
ref = null;
|
|
116
93
|
}
|
|
117
|
-
|
|
118
94
|
var triggerProps = {
|
|
119
95
|
ref: reactUtils.mergeRefs(triggerElementRef, ref),
|
|
120
96
|
disabled: disabled
|
|
@@ -123,26 +99,22 @@ var useDropdown = function useDropdown(props) {
|
|
|
123
99
|
* 事件收集
|
|
124
100
|
* 'click' | 'contextmenu' | 'hover'
|
|
125
101
|
*/
|
|
126
|
-
|
|
127
102
|
triggerMethods.reduce(function (acc, cur) {
|
|
128
103
|
switch (cur) {
|
|
129
104
|
case types.DropdownTriggerActionEnum.HOVER:
|
|
130
105
|
acc.onMouseEnter = domUtils.mockDefaultHandlers(props.onMouseEnter, handlePopperEnter);
|
|
131
106
|
acc.onMouseLeave = domUtils.mockDefaultHandlers(props.onMouseLeave, handlePopperLeave);
|
|
132
107
|
break;
|
|
133
|
-
|
|
134
108
|
case types.DropdownTriggerActionEnum.CONTEXTMENU:
|
|
135
109
|
acc.onContextMenu = domUtils.mockDefaultHandlers(props.onContextMenu, function (evt) {
|
|
136
110
|
evt.preventDefault();
|
|
137
111
|
menuVisibleAction.not();
|
|
138
112
|
});
|
|
139
113
|
break;
|
|
140
|
-
|
|
141
114
|
case types.DropdownTriggerActionEnum.CLICK:
|
|
142
115
|
acc.onClick = domUtils.mockDefaultHandlers(props.onClick, menuVisibleAction.not);
|
|
143
116
|
break;
|
|
144
117
|
}
|
|
145
|
-
|
|
146
118
|
return acc;
|
|
147
119
|
}, triggerProps);
|
|
148
120
|
return triggerProps;
|
|
@@ -150,15 +122,12 @@ var useDropdown = function useDropdown(props) {
|
|
|
150
122
|
var rootProps = rest;
|
|
151
123
|
var getMenuProps = useLatest.useLatestCallback(function (props, ref) {
|
|
152
124
|
var _Object$assign;
|
|
153
|
-
|
|
154
125
|
if (props === void 0) {
|
|
155
126
|
props = {};
|
|
156
127
|
}
|
|
157
|
-
|
|
158
128
|
if (ref === void 0) {
|
|
159
129
|
ref = null;
|
|
160
130
|
}
|
|
161
|
-
|
|
162
131
|
var menuParents = parents.concat(triggerElementRef);
|
|
163
132
|
var menuProps = Object.assign(Object.assign({}, props), {
|
|
164
133
|
ref: reactUtils.mergeRefs(popperElementRef, ref),
|
|
@@ -171,17 +140,14 @@ var useDropdown = function useDropdown(props) {
|
|
|
171
140
|
onClose: menuVisibleAction.off
|
|
172
141
|
})
|
|
173
142
|
});
|
|
174
|
-
|
|
175
143
|
if (triggerMethods.includes(types.DropdownTriggerActionEnum.HOVER)) {
|
|
176
144
|
// @ts-ignore
|
|
177
145
|
menuProps.onMouseEnter = function () {
|
|
178
146
|
hoveringRef.current = true;
|
|
179
|
-
};
|
|
180
|
-
|
|
181
|
-
|
|
147
|
+
};
|
|
148
|
+
// @ts-ignore
|
|
182
149
|
menuProps.onMouseLeave = handlePopperLeave;
|
|
183
150
|
}
|
|
184
|
-
|
|
185
151
|
return menuProps;
|
|
186
152
|
});
|
|
187
153
|
return {
|
|
@@ -196,5 +162,4 @@ var useDropdown = function useDropdown(props) {
|
|
|
196
162
|
getMenuProps: getMenuProps
|
|
197
163
|
};
|
|
198
164
|
};
|
|
199
|
-
|
|
200
165
|
exports.useDropdown = useDropdown;
|
package/lib/cjs/utils/index.js
CHANGED
|
@@ -12,18 +12,15 @@
|
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
|
13
13
|
value: true
|
|
14
14
|
});
|
|
15
|
-
|
|
16
15
|
var typeAssertion = require('@hi-ui/type-assertion');
|
|
16
|
+
|
|
17
17
|
/**
|
|
18
18
|
* 抹平 trigger 结构为数组
|
|
19
19
|
*
|
|
20
20
|
* @param trigger
|
|
21
21
|
* @returns
|
|
22
22
|
*/
|
|
23
|
-
|
|
24
|
-
|
|
25
23
|
var normalizeTrigger = function normalizeTrigger(trigger) {
|
|
26
24
|
return typeAssertion.isArray(trigger) ? Array.from(new Set(trigger)) : [trigger];
|
|
27
25
|
};
|
|
28
|
-
|
|
29
26
|
exports.normalizeTrigger = normalizeTrigger;
|
package/lib/esm/Dropdown.js
CHANGED
|
@@ -18,59 +18,51 @@ import { isArrayNonEmpty, isArray } from '@hi-ui/type-assertion';
|
|
|
18
18
|
import Button, { ButtonGroup } from '@hi-ui/button';
|
|
19
19
|
import { DownOutlined } from '@hi-ui/icons';
|
|
20
20
|
var _role = 'dropdown';
|
|
21
|
-
|
|
22
21
|
var _prefix = getPrefixCls(_role);
|
|
23
|
-
|
|
24
22
|
var DEFAULT_DATA = [];
|
|
25
23
|
/**
|
|
26
24
|
* 下拉菜单
|
|
27
25
|
*/
|
|
28
|
-
|
|
29
26
|
var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
30
27
|
var _a$prefixCls = _a.prefixCls,
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
28
|
+
prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
|
|
29
|
+
_a$role = _a.role,
|
|
30
|
+
role = _a$role === void 0 ? _role : _a$role,
|
|
31
|
+
className = _a.className,
|
|
32
|
+
triggerButton = _a.children,
|
|
33
|
+
_a$data = _a.data,
|
|
34
|
+
data = _a$data === void 0 ? DEFAULT_DATA : _a$data,
|
|
35
|
+
title = _a.title,
|
|
36
|
+
_a$type = _a.type,
|
|
37
|
+
type = _a$type === void 0 ? 'text' : _a$type,
|
|
38
|
+
_onClick = _a.onClick,
|
|
39
|
+
onButtonClick = _a.onButtonClick,
|
|
40
|
+
overlayClassName = _a.overlayClassName,
|
|
41
|
+
_a$size = _a.size,
|
|
42
|
+
size = _a$size === void 0 ? 'md' : _a$size,
|
|
43
|
+
rest = __rest(_a, ["prefixCls", "role", "className", "children", "data", "title", "type", "onClick", "onButtonClick", "overlayClassName", "size"]);
|
|
48
44
|
var _b = useDropdown(rest),
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
45
|
+
rootProps = _b.rootProps,
|
|
46
|
+
providedValue = __rest(_b, ["rootProps"]);
|
|
52
47
|
var getMenuProps = providedValue.getMenuProps,
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
48
|
+
getTriggerProps = providedValue.getTriggerProps,
|
|
49
|
+
disabled = providedValue.disabled,
|
|
50
|
+
menuVisibleAction = providedValue.menuVisibleAction;
|
|
56
51
|
var cls = cx(prefixCls, className, disabled && prefixCls + "--disabled");
|
|
57
|
-
|
|
58
52
|
var dig = function dig(treeData) {
|
|
59
53
|
return treeData.map(function (item) {
|
|
60
|
-
var menu = isArrayNonEmpty(item.children) ? /*#__PURE__*/React.createElement(DropdownMenu, {
|
|
54
|
+
var menu = isArrayNonEmpty(item.children) ? ( /*#__PURE__*/React.createElement(DropdownMenu, {
|
|
61
55
|
overlay: {
|
|
62
56
|
gutterGap: 16
|
|
63
57
|
},
|
|
64
58
|
size: size
|
|
65
|
-
}, dig(item.children)) : null;
|
|
66
|
-
|
|
59
|
+
}, dig(item.children))) : null;
|
|
67
60
|
if (item.split) {
|
|
68
61
|
return /*#__PURE__*/React.createElement("li", {
|
|
69
62
|
key: item.id,
|
|
70
63
|
className: prefixCls + "-divider"
|
|
71
64
|
});
|
|
72
65
|
}
|
|
73
|
-
|
|
74
66
|
return /*#__PURE__*/React.createElement(DropdownMenuItem, {
|
|
75
67
|
key: item.id,
|
|
76
68
|
disabled: item.disabled,
|
|
@@ -81,7 +73,6 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
81
73
|
onClick: function onClick() {
|
|
82
74
|
if (item.disabled) return;
|
|
83
75
|
_onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id);
|
|
84
|
-
|
|
85
76
|
if (!isArray(item.children)) {
|
|
86
77
|
menuVisibleAction.off();
|
|
87
78
|
}
|
|
@@ -89,13 +80,11 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
89
80
|
}, item.title);
|
|
90
81
|
});
|
|
91
82
|
};
|
|
92
|
-
|
|
93
83
|
var renderButton = function renderButton() {
|
|
94
84
|
if (triggerButton) {
|
|
95
85
|
// @ts-ignore
|
|
96
86
|
return /*#__PURE__*/cloneElement(triggerButton, getTriggerProps(triggerButton.props, triggerButton.ref));
|
|
97
87
|
}
|
|
98
|
-
|
|
99
88
|
if (type === 'text' || type === 'button') {
|
|
100
89
|
return /*#__PURE__*/React.createElement(Button, Object.assign({}, getTriggerProps(), {
|
|
101
90
|
appearance: type === 'button' ? 'filled' : 'link'
|
|
@@ -105,7 +94,6 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
105
94
|
}
|
|
106
95
|
}));
|
|
107
96
|
}
|
|
108
|
-
|
|
109
97
|
if (type === 'group') {
|
|
110
98
|
return /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
|
|
111
99
|
onClick: onButtonClick
|
|
@@ -115,42 +103,37 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
115
103
|
icon: /*#__PURE__*/React.createElement(DownOutlined, null)
|
|
116
104
|
})));
|
|
117
105
|
}
|
|
118
|
-
|
|
119
106
|
return null;
|
|
120
107
|
};
|
|
121
|
-
|
|
122
108
|
return /*#__PURE__*/React.createElement(DropDownProvider, {
|
|
123
109
|
value: providedValue
|
|
124
110
|
}, /*#__PURE__*/React.createElement("div", Object.assign({
|
|
125
111
|
ref: ref,
|
|
126
112
|
role: role,
|
|
127
113
|
className: cls
|
|
128
|
-
}, rootProps), renderButton(), isArrayNonEmpty(data) ? /*#__PURE__*/React.createElement(DropdownMenu, Object.assign({}, getMenuProps({
|
|
114
|
+
}, rootProps), renderButton(), isArrayNonEmpty(data) ? ( /*#__PURE__*/React.createElement(DropdownMenu, Object.assign({}, getMenuProps({
|
|
129
115
|
overlay: {
|
|
130
116
|
disabledPortal: false,
|
|
131
117
|
className: overlayClassName
|
|
132
118
|
}
|
|
133
119
|
}), {
|
|
134
120
|
size: size
|
|
135
|
-
}), dig(data)) : null));
|
|
121
|
+
}), dig(data))) : null));
|
|
136
122
|
});
|
|
137
|
-
|
|
138
123
|
if (__DEV__) {
|
|
139
124
|
Dropdown.displayName = 'Dropdown';
|
|
140
125
|
}
|
|
141
|
-
|
|
142
126
|
var dropdownMenuPrefix = getPrefixCls('dropdown-menu');
|
|
143
127
|
var DropdownMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
144
128
|
var _a$prefixCls2 = _a.prefixCls,
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
129
|
+
prefixCls = _a$prefixCls2 === void 0 ? dropdownMenuPrefix : _a$prefixCls2,
|
|
130
|
+
overlay = _a.overlay,
|
|
131
|
+
parents = _a.parents,
|
|
132
|
+
className = _a.className,
|
|
133
|
+
children = _a.children,
|
|
134
|
+
_a$size2 = _a.size,
|
|
135
|
+
size = _a$size2 === void 0 ? 'lg' : _a$size2,
|
|
136
|
+
rest = __rest(_a, ["prefixCls", "role", "overlay", "parents", "className", "children", "size"]);
|
|
154
137
|
var cls = cx(prefixCls, className, prefixCls + "--size-" + size);
|
|
155
138
|
return /*#__PURE__*/React.createElement(Popper, Object.assign({}, overlay), /*#__PURE__*/React.createElement("ul", Object.assign({
|
|
156
139
|
ref: ref,
|
|
@@ -161,43 +144,38 @@ var DropdownMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
161
144
|
});
|
|
162
145
|
}) : children));
|
|
163
146
|
});
|
|
164
|
-
|
|
165
147
|
if (__DEV__) {
|
|
166
148
|
DropdownMenu.displayName = 'DropdownMenu';
|
|
167
149
|
}
|
|
168
|
-
|
|
169
150
|
var dropdownMenuItemPrefix = getPrefixCls('dropdown-menu-item');
|
|
170
151
|
var DropdownMenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
171
152
|
var _a$prefixCls3 = _a.prefixCls,
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
153
|
+
prefixCls = _a$prefixCls3 === void 0 ? dropdownMenuItemPrefix : _a$prefixCls3,
|
|
154
|
+
className = _a.className,
|
|
155
|
+
children = _a.children,
|
|
156
|
+
href = _a.href,
|
|
157
|
+
target = _a.target,
|
|
158
|
+
disabled = _a.disabled,
|
|
159
|
+
parentsProp = _a.parents,
|
|
160
|
+
menu = _a.menu,
|
|
161
|
+
rest = __rest(_a, ["prefixCls", "role", "className", "children", "href", "value", "target", "disabled", "parents", "menu"]);
|
|
182
162
|
var _useDropDownContext = useDropDownContext(),
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
163
|
+
triggerMethods = _useDropDownContext.triggerMethods,
|
|
164
|
+
width = _useDropDownContext.width;
|
|
186
165
|
var _useDropdown = useDropdown(Object.assign(Object.assign({
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
166
|
+
overlay: {
|
|
167
|
+
placement: 'right-start',
|
|
168
|
+
disabledPortal: true
|
|
169
|
+
},
|
|
170
|
+
width: width
|
|
171
|
+
}, rest), {
|
|
172
|
+
trigger: triggerMethods,
|
|
173
|
+
parents: parentsProp
|
|
174
|
+
})),
|
|
175
|
+
menuVisible = _useDropdown.menuVisible,
|
|
176
|
+
rootProps = _useDropdown.rootProps,
|
|
177
|
+
getTriggerProps = _useDropdown.getTriggerProps,
|
|
178
|
+
getMenuProps = _useDropdown.getMenuProps;
|
|
201
179
|
var cls = cx(prefixCls, className, menuVisible && prefixCls + "--active", disabled && prefixCls + "--disabled");
|
|
202
180
|
var shouldUseLink = href && !disabled;
|
|
203
181
|
return /*#__PURE__*/React.createElement("li", Object.assign({
|
|
@@ -205,17 +183,15 @@ var DropdownMenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
205
183
|
className: cls
|
|
206
184
|
}, rootProps), /*#__PURE__*/React.createElement("div", Object.assign({
|
|
207
185
|
className: prefixCls + "__trigger"
|
|
208
|
-
}, getTriggerProps()), shouldUseLink ? /*#__PURE__*/React.createElement("a", {
|
|
186
|
+
}, getTriggerProps()), shouldUseLink ? ( /*#__PURE__*/React.createElement("a", {
|
|
209
187
|
className: prefixCls + "__link",
|
|
210
188
|
href: href,
|
|
211
189
|
target: target
|
|
212
|
-
}, children) : children, menu ? /*#__PURE__*/React.createElement("span", {
|
|
190
|
+
}, children)) : children, menu ? ( /*#__PURE__*/React.createElement("span", {
|
|
213
191
|
className: prefixCls + "__arrow"
|
|
214
|
-
}, /*#__PURE__*/React.createElement(DownOutlined, null)) : null), menu ? /*#__PURE__*/cloneElement(menu, Object.assign({}, getMenuProps(menu.props))) : null);
|
|
192
|
+
}, /*#__PURE__*/React.createElement(DownOutlined, null))) : null), menu ? /*#__PURE__*/cloneElement(menu, Object.assign({}, getMenuProps(menu.props))) : null);
|
|
215
193
|
});
|
|
216
|
-
|
|
217
194
|
if (__DEV__) {
|
|
218
195
|
DropdownMenuItem.displayName = 'DropdownMenuItem';
|
|
219
196
|
}
|
|
220
|
-
|
|
221
197
|
export { Dropdown };
|
package/lib/esm/context.js
CHANGED
|
@@ -10,15 +10,11 @@
|
|
|
10
10
|
import { useContext, createContext } from 'react';
|
|
11
11
|
var dropDownContext = /*#__PURE__*/createContext(null);
|
|
12
12
|
var DropDownProvider = dropDownContext.Provider;
|
|
13
|
-
|
|
14
13
|
var useDropDownContext = function useDropDownContext() {
|
|
15
14
|
var context = useContext(dropDownContext);
|
|
16
|
-
|
|
17
15
|
if (!context) {
|
|
18
16
|
throw new Error('The dropDownContext is not defined, Maybe it should be wrapped in Dropdown.');
|
|
19
17
|
}
|
|
20
|
-
|
|
21
18
|
return context;
|
|
22
19
|
};
|
|
23
|
-
|
|
24
20
|
export { DropDownProvider, useDropDownContext };
|
|
@@ -9,7 +9,5 @@
|
|
|
9
9
|
*/
|
|
10
10
|
import __styleInject__ from 'style-inject';
|
|
11
11
|
var css_248z = ".hi-v4-dropdown {display: inline-block;}.hi-v4-dropdown-menu {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px);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: var(--hi-v4-dropdown-menu-width, 180px);}.hi-v4-dropdown-menu-item {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;margin: 0;box-sizing: border-box;overflow: visible;}.hi-v4-dropdown-menu-item__link {color: var(--hi-v4-color-gray-700, #1f2733);width: 100%;text-decoration: none;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-dropdown-menu-item__arrow {-webkit-transform: rotate(-90deg);transform: rotate(-90deg);}.hi-v4-dropdown-menu-item__trigger {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;height: 100%;cursor: pointer;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;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}.hi-v4-dropdown-menu--size-lg .hi-v4-dropdown-menu-item__trigger {padding: var(--hi-v4-spacing-5, 10px) var(--hi-v4-spacing-5, 10px);}.hi-v4-dropdown-menu--size-md .hi-v4-dropdown-menu-item__trigger {padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-4, 8px);}.hi-v4-dropdown-menu--size-sm .hi-v4-dropdown-menu-item__trigger {padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-3, 6px);}.hi-v4-dropdown-menu-item:not(.hi-v4-dropdown-menu-item--disabled) > .hi-v4-dropdown-menu-item__trigger:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-dropdown-menu-item--active:not(.hi-v4-dropdown-menu-item--disabled) > .hi-v4-dropdown-menu-item__trigger {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-dropdown-menu-item--disabled > .hi-v4-dropdown-menu-item__trigger {cursor: not-allowed;color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-dropdown-divider {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;background-color: var(--hi-v4-color-gray-200, #ebedf0);width: 100%;height: 1px;margin: var(--hi-v4-spacing-4, 8px) 0;}";
|
|
12
|
-
|
|
13
12
|
__styleInject__(css_248z);
|
|
14
|
-
|
|
15
13
|
export { css_248z as default };
|
package/lib/esm/use-dropdown.js
CHANGED
|
@@ -20,66 +20,57 @@ import { mergeRefs } from '@hi-ui/react-utils';
|
|
|
20
20
|
import { mockDefaultHandlers } from '@hi-ui/dom-utils';
|
|
21
21
|
import { isNumeric } from '@hi-ui/type-assertion';
|
|
22
22
|
var NOOP_ARRAY = [];
|
|
23
|
-
|
|
24
23
|
var useDropdown = function useDropdown(props) {
|
|
25
24
|
var _props$trigger = props.trigger,
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
25
|
+
triggerProp = _props$trigger === void 0 ? DropdownTriggerActionEnum.HOVER : _props$trigger,
|
|
26
|
+
_props$disabled = props.disabled,
|
|
27
|
+
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
|
28
|
+
_props$parents = props.parents,
|
|
29
|
+
parents = _props$parents === void 0 ? NOOP_ARRAY : _props$parents,
|
|
30
|
+
width = props.width,
|
|
31
|
+
overlay = props.overlay,
|
|
32
|
+
rest = __rest(props, ["trigger", "disabled", "parents", "width", "overlay"]);
|
|
35
33
|
var triggerElementRef = useRef(null);
|
|
36
34
|
var popperElementRef = useRef(null);
|
|
37
35
|
/**
|
|
38
36
|
* 抹平数组或字符串结构,同时 memo 处理,减少重渲染
|
|
39
37
|
*/
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
38
|
+
var trigger = normalizeTrigger(triggerProp);
|
|
39
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
43
40
|
var triggerMethods = useMemo(function () {
|
|
44
41
|
return trigger;
|
|
45
42
|
}, trigger);
|
|
46
|
-
|
|
47
43
|
var _useUncontrolledToggl = useUncontrolledToggle({
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
44
|
+
defaultVisible: false,
|
|
45
|
+
disabled: disabled
|
|
46
|
+
}),
|
|
47
|
+
menuVisible = _useUncontrolledToggl[0],
|
|
48
|
+
menuVisibleAction = _useUncontrolledToggl[1];
|
|
53
49
|
/**
|
|
54
50
|
* 维护 trigger 元素 或 tooltip 弹出层元素的 hover 态
|
|
55
51
|
*/
|
|
56
|
-
|
|
57
|
-
|
|
58
52
|
var hoveringRef = useRef(false);
|
|
59
|
-
|
|
60
53
|
var _useTimeout = useTimeout(function () {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
54
|
+
if (disabled) return;
|
|
55
|
+
menuVisibleAction.on();
|
|
56
|
+
}, 0),
|
|
57
|
+
startOpenTimer = _useTimeout.start,
|
|
58
|
+
clearOpenTimer = _useTimeout.clear;
|
|
67
59
|
var _useTimeout2 = useTimeout(function () {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
60
|
+
if (disabled) return;
|
|
61
|
+
if (hoveringRef.current) return;
|
|
62
|
+
menuVisibleAction.off();
|
|
63
|
+
}, 100),
|
|
64
|
+
startCloseTimer = _useTimeout2.start,
|
|
65
|
+
clearCloseTimer = _useTimeout2.clear;
|
|
75
66
|
var clearToggleTimer = useCallback(function () {
|
|
76
67
|
clearOpenTimer();
|
|
77
68
|
clearCloseTimer();
|
|
78
69
|
}, [clearOpenTimer, clearCloseTimer]);
|
|
79
70
|
useUnmountEffect(clearToggleTimer);
|
|
80
71
|
var handlePopperLeave = useLatestCallback(function (evt) {
|
|
81
|
-
hoveringRef.current = false;
|
|
82
|
-
|
|
72
|
+
hoveringRef.current = false;
|
|
73
|
+
// if (triggerElementRef.current?.contains(evt.target as HTMLElement)) return
|
|
83
74
|
clearOpenTimer();
|
|
84
75
|
startCloseTimer();
|
|
85
76
|
});
|
|
@@ -92,11 +83,9 @@ var useDropdown = function useDropdown(props) {
|
|
|
92
83
|
if (props === void 0) {
|
|
93
84
|
props = {};
|
|
94
85
|
}
|
|
95
|
-
|
|
96
86
|
if (ref === void 0) {
|
|
97
87
|
ref = null;
|
|
98
88
|
}
|
|
99
|
-
|
|
100
89
|
var triggerProps = {
|
|
101
90
|
ref: mergeRefs(triggerElementRef, ref),
|
|
102
91
|
disabled: disabled
|
|
@@ -105,26 +94,22 @@ var useDropdown = function useDropdown(props) {
|
|
|
105
94
|
* 事件收集
|
|
106
95
|
* 'click' | 'contextmenu' | 'hover'
|
|
107
96
|
*/
|
|
108
|
-
|
|
109
97
|
triggerMethods.reduce(function (acc, cur) {
|
|
110
98
|
switch (cur) {
|
|
111
99
|
case DropdownTriggerActionEnum.HOVER:
|
|
112
100
|
acc.onMouseEnter = mockDefaultHandlers(props.onMouseEnter, handlePopperEnter);
|
|
113
101
|
acc.onMouseLeave = mockDefaultHandlers(props.onMouseLeave, handlePopperLeave);
|
|
114
102
|
break;
|
|
115
|
-
|
|
116
103
|
case DropdownTriggerActionEnum.CONTEXTMENU:
|
|
117
104
|
acc.onContextMenu = mockDefaultHandlers(props.onContextMenu, function (evt) {
|
|
118
105
|
evt.preventDefault();
|
|
119
106
|
menuVisibleAction.not();
|
|
120
107
|
});
|
|
121
108
|
break;
|
|
122
|
-
|
|
123
109
|
case DropdownTriggerActionEnum.CLICK:
|
|
124
110
|
acc.onClick = mockDefaultHandlers(props.onClick, menuVisibleAction.not);
|
|
125
111
|
break;
|
|
126
112
|
}
|
|
127
|
-
|
|
128
113
|
return acc;
|
|
129
114
|
}, triggerProps);
|
|
130
115
|
return triggerProps;
|
|
@@ -132,15 +117,12 @@ var useDropdown = function useDropdown(props) {
|
|
|
132
117
|
var rootProps = rest;
|
|
133
118
|
var getMenuProps = useLatestCallback(function (props, ref) {
|
|
134
119
|
var _Object$assign;
|
|
135
|
-
|
|
136
120
|
if (props === void 0) {
|
|
137
121
|
props = {};
|
|
138
122
|
}
|
|
139
|
-
|
|
140
123
|
if (ref === void 0) {
|
|
141
124
|
ref = null;
|
|
142
125
|
}
|
|
143
|
-
|
|
144
126
|
var menuParents = parents.concat(triggerElementRef);
|
|
145
127
|
var menuProps = Object.assign(Object.assign({}, props), {
|
|
146
128
|
ref: mergeRefs(popperElementRef, ref),
|
|
@@ -153,17 +135,14 @@ var useDropdown = function useDropdown(props) {
|
|
|
153
135
|
onClose: menuVisibleAction.off
|
|
154
136
|
})
|
|
155
137
|
});
|
|
156
|
-
|
|
157
138
|
if (triggerMethods.includes(DropdownTriggerActionEnum.HOVER)) {
|
|
158
139
|
// @ts-ignore
|
|
159
140
|
menuProps.onMouseEnter = function () {
|
|
160
141
|
hoveringRef.current = true;
|
|
161
|
-
};
|
|
162
|
-
|
|
163
|
-
|
|
142
|
+
};
|
|
143
|
+
// @ts-ignore
|
|
164
144
|
menuProps.onMouseLeave = handlePopperLeave;
|
|
165
145
|
}
|
|
166
|
-
|
|
167
146
|
return menuProps;
|
|
168
147
|
});
|
|
169
148
|
return {
|
|
@@ -178,5 +157,4 @@ var useDropdown = function useDropdown(props) {
|
|
|
178
157
|
getMenuProps: getMenuProps
|
|
179
158
|
};
|
|
180
159
|
};
|
|
181
|
-
|
|
182
160
|
export { useDropdown };
|
package/lib/esm/utils/index.js
CHANGED
|
@@ -8,15 +8,14 @@
|
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
9
|
*/
|
|
10
10
|
import { isArray } from '@hi-ui/type-assertion';
|
|
11
|
+
|
|
11
12
|
/**
|
|
12
13
|
* 抹平 trigger 结构为数组
|
|
13
14
|
*
|
|
14
15
|
* @param trigger
|
|
15
16
|
* @returns
|
|
16
17
|
*/
|
|
17
|
-
|
|
18
18
|
var normalizeTrigger = function normalizeTrigger(trigger) {
|
|
19
19
|
return isArray(trigger) ? Array.from(new Set(trigger)) : [trigger];
|
|
20
20
|
};
|
|
21
|
-
|
|
22
21
|
export { normalizeTrigger };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hi-ui/dropdown",
|
|
3
|
-
"version": "4.1.
|
|
3
|
+
"version": "4.1.3",
|
|
4
4
|
"description": "A sub-package for @hi-ui/hiui.",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "HiUI <mi-hiui@xiaomi.com>",
|
|
@@ -43,27 +43,27 @@
|
|
|
43
43
|
"url": "https://github.com/XiaoMi/hiui/issues"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@hi-ui/button": "^4.0.
|
|
47
|
-
"@hi-ui/classname": "^4.0.
|
|
48
|
-
"@hi-ui/dom-utils": "^4.0.
|
|
49
|
-
"@hi-ui/env": "^4.0.
|
|
50
|
-
"@hi-ui/icons": "^4.0.
|
|
51
|
-
"@hi-ui/popper": "^4.
|
|
52
|
-
"@hi-ui/react-utils": "^4.0.
|
|
53
|
-
"@hi-ui/type-assertion": "^4.0.
|
|
54
|
-
"@hi-ui/use-latest": "^4.0.
|
|
55
|
-
"@hi-ui/use-timeout": "^4.0.
|
|
56
|
-
"@hi-ui/use-toggle": "^4.0.
|
|
57
|
-
"@hi-ui/use-unmount-effect": "^4.0.
|
|
46
|
+
"@hi-ui/button": "^4.0.8",
|
|
47
|
+
"@hi-ui/classname": "^4.0.3",
|
|
48
|
+
"@hi-ui/dom-utils": "^4.0.6",
|
|
49
|
+
"@hi-ui/env": "^4.0.3",
|
|
50
|
+
"@hi-ui/icons": "^4.0.17",
|
|
51
|
+
"@hi-ui/popper": "^4.1.2",
|
|
52
|
+
"@hi-ui/react-utils": "^4.0.3",
|
|
53
|
+
"@hi-ui/type-assertion": "^4.0.3",
|
|
54
|
+
"@hi-ui/use-latest": "^4.0.3",
|
|
55
|
+
"@hi-ui/use-timeout": "^4.0.3",
|
|
56
|
+
"@hi-ui/use-toggle": "^4.0.3",
|
|
57
|
+
"@hi-ui/use-unmount-effect": "^4.0.3"
|
|
58
58
|
},
|
|
59
59
|
"peerDependencies": {
|
|
60
|
-
"@hi-ui/core": ">=4.0.
|
|
60
|
+
"@hi-ui/core": ">=4.0.7",
|
|
61
61
|
"react": ">=16.8.6",
|
|
62
62
|
"react-dom": ">=16.8.6"
|
|
63
63
|
},
|
|
64
64
|
"devDependencies": {
|
|
65
|
-
"@hi-ui/core": "^4.0.
|
|
66
|
-
"@hi-ui/core-css": "^4.1.
|
|
65
|
+
"@hi-ui/core": "^4.0.7",
|
|
66
|
+
"@hi-ui/core-css": "^4.1.4",
|
|
67
67
|
"react": "^17.0.1",
|
|
68
68
|
"react-dom": "^17.0.1"
|
|
69
69
|
}
|