@hi-ui/dropdown 4.0.0-alpha.1
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/LICENSE +21 -0
- package/README.md +11 -0
- package/lib/cjs/Dropdown.js +258 -0
- package/lib/cjs/Dropdown.js.map +1 -0
- package/lib/cjs/context.js +33 -0
- package/lib/cjs/context.js.map +1 -0
- package/lib/cjs/index.js +22 -0
- package/lib/cjs/index.js.map +1 -0
- package/lib/cjs/styles/index.scss.js +22 -0
- package/lib/cjs/styles/index.scss.js.map +1 -0
- package/lib/cjs/types.js +22 -0
- package/lib/cjs/types.js.map +1 -0
- package/lib/cjs/use-dropdown.js +191 -0
- package/lib/cjs/use-dropdown.js.map +1 -0
- package/lib/cjs/utils/index.js +30 -0
- package/lib/cjs/utils/index.js.map +1 -0
- package/lib/esm/Dropdown.js +230 -0
- package/lib/esm/Dropdown.js.map +1 -0
- package/lib/esm/context.js +25 -0
- package/lib/esm/context.js.map +1 -0
- package/lib/esm/index.js +12 -0
- package/lib/esm/index.js.map +1 -0
- package/lib/esm/styles/index.scss.js +17 -0
- package/lib/esm/styles/index.scss.js.map +1 -0
- package/lib/esm/types.js +17 -0
- package/lib/esm/types.js.map +1 -0
- package/lib/esm/use-dropdown.js +175 -0
- package/lib/esm/use-dropdown.js.map +1 -0
- package/lib/esm/utils/index.js +23 -0
- package/lib/esm/utils/index.js.map +1 -0
- package/lib/types/Dropdown.d.ts +38 -0
- package/lib/types/context.d.ts +7 -0
- package/lib/types/index.d.ts +3 -0
- package/lib/types/types.d.ts +31 -0
- package/lib/types/use-dropdown.d.ts +43 -0
- package/lib/types/utils/index.d.ts +8 -0
- package/package.json +70 -0
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
/** @LICENSE
|
|
2
|
+
* @hi-ui/dropdown
|
|
3
|
+
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/dropdown#readme
|
|
4
|
+
*
|
|
5
|
+
* Copyright (c) HIUI <mi-hiui@xiaomi.com>.
|
|
6
|
+
*
|
|
7
|
+
* This source code is licensed under the MIT license found in the
|
|
8
|
+
* LICENSE file in the root directory of this source tree.
|
|
9
|
+
*/
|
|
10
|
+
import { __rest } from 'tslib';
|
|
11
|
+
import React, { forwardRef, cloneElement } from 'react';
|
|
12
|
+
import { getPrefixCls, cx } from '@hi-ui/classname';
|
|
13
|
+
import { __DEV__ } from '@hi-ui/env';
|
|
14
|
+
import { PopperPortal } from '@hi-ui/popper';
|
|
15
|
+
import { DropDownProvider, useDropDownContext } from './context.js';
|
|
16
|
+
import { useDropdown } from './use-dropdown.js';
|
|
17
|
+
import { isArrayNonEmpty, isArray } from '@hi-ui/type-assertion';
|
|
18
|
+
import Button, { ButtonGroup } from '@hi-ui/button';
|
|
19
|
+
import { DownOutlined } from '@hi-ui/icons';
|
|
20
|
+
var _role = 'dropdown';
|
|
21
|
+
|
|
22
|
+
var _prefix = getPrefixCls(_role);
|
|
23
|
+
|
|
24
|
+
var DEFAULT_DATA = [];
|
|
25
|
+
/**
|
|
26
|
+
* TODO: What is Dropdown
|
|
27
|
+
*/
|
|
28
|
+
|
|
29
|
+
var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
30
|
+
var _a$prefixCls = _a.prefixCls,
|
|
31
|
+
prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
|
|
32
|
+
_a$role = _a.role,
|
|
33
|
+
role = _a$role === void 0 ? _role : _a$role,
|
|
34
|
+
className = _a.className,
|
|
35
|
+
_a$data = _a.data,
|
|
36
|
+
data = _a$data === void 0 ? DEFAULT_DATA : _a$data,
|
|
37
|
+
title = _a.title,
|
|
38
|
+
_a$type = _a.type,
|
|
39
|
+
type = _a$type === void 0 ? 'text' : _a$type,
|
|
40
|
+
_onClick = _a.onClick,
|
|
41
|
+
onButtonClick = _a.onButtonClick,
|
|
42
|
+
overlayClassName = _a.overlayClassName,
|
|
43
|
+
rest = __rest(_a, ["prefixCls", "role", "className", "children", "data", "title", "type", "onClick", "onButtonClick", "overlayClassName"]);
|
|
44
|
+
|
|
45
|
+
var _b = useDropdown(rest),
|
|
46
|
+
rootProps = _b.rootProps,
|
|
47
|
+
providedValue = __rest(_b, ["rootProps"]);
|
|
48
|
+
|
|
49
|
+
var getMenuProps = providedValue.getMenuProps,
|
|
50
|
+
getTriggerProps = providedValue.getTriggerProps,
|
|
51
|
+
disabled = providedValue.disabled,
|
|
52
|
+
menuVisibleAction = providedValue.menuVisibleAction;
|
|
53
|
+
var cls = cx(prefixCls, className, disabled && prefixCls + "--disabled");
|
|
54
|
+
|
|
55
|
+
var dig = function dig(treeData) {
|
|
56
|
+
return treeData.map(function (item) {
|
|
57
|
+
var menu = isArrayNonEmpty(item.children) ? /*#__PURE__*/React.createElement(DropdownMenu, {
|
|
58
|
+
popper: {
|
|
59
|
+
gutterGap: 16
|
|
60
|
+
}
|
|
61
|
+
}, dig(item.children)) : null; // TODO: remove it
|
|
62
|
+
|
|
63
|
+
var shouldRenderDivider = item.title === '-';
|
|
64
|
+
|
|
65
|
+
if (shouldRenderDivider) {
|
|
66
|
+
return /*#__PURE__*/React.createElement("li", {
|
|
67
|
+
key: item.id,
|
|
68
|
+
className: prefixCls + "-divider"
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
return /*#__PURE__*/React.createElement(DropdownMenuItem, {
|
|
73
|
+
key: item.id,
|
|
74
|
+
disabled: item.disabled,
|
|
75
|
+
href: item.href,
|
|
76
|
+
target: item.target,
|
|
77
|
+
value: item.id,
|
|
78
|
+
menu: menu,
|
|
79
|
+
onClick: function onClick() {
|
|
80
|
+
_onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id);
|
|
81
|
+
|
|
82
|
+
if (!isArray(item.children)) {
|
|
83
|
+
menuVisibleAction.off();
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}, item.title);
|
|
87
|
+
});
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
return /*#__PURE__*/React.createElement(DropDownProvider, {
|
|
91
|
+
value: providedValue
|
|
92
|
+
}, /*#__PURE__*/React.createElement("div", Object.assign({
|
|
93
|
+
ref: ref,
|
|
94
|
+
role: role,
|
|
95
|
+
className: cls
|
|
96
|
+
}, rootProps), type === 'text' || type === 'button' ? /*#__PURE__*/React.createElement(Button, Object.assign({}, getTriggerProps(), {
|
|
97
|
+
appearance: type === 'button' ? 'flat' : 'link'
|
|
98
|
+
}), title, /*#__PURE__*/React.createElement(DownOutlined, {
|
|
99
|
+
style: {
|
|
100
|
+
marginInlineStart: 2
|
|
101
|
+
}
|
|
102
|
+
})) : null, type === 'group' ? /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
|
|
103
|
+
onClick: onButtonClick
|
|
104
|
+
}, title), /*#__PURE__*/React.createElement(Button, Object.assign({
|
|
105
|
+
className: cx(prefixCls + "__icon", prefixCls + "__icon-btn-wrap")
|
|
106
|
+
}, getTriggerProps()), /*#__PURE__*/React.createElement(DownOutlined, null))) : null, isArrayNonEmpty(data) ? /*#__PURE__*/React.createElement(DropdownMenu, Object.assign({}, getMenuProps({
|
|
107
|
+
popper: {
|
|
108
|
+
disabledPortal: false,
|
|
109
|
+
className: overlayClassName
|
|
110
|
+
}
|
|
111
|
+
})), dig(data)) : null));
|
|
112
|
+
});
|
|
113
|
+
|
|
114
|
+
if (__DEV__) {
|
|
115
|
+
Dropdown.displayName = 'Dropdown';
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
var dropdownButtonPrefix = getPrefixCls('dropdown-button');
|
|
119
|
+
/**
|
|
120
|
+
* TODO: What is DropdownButton
|
|
121
|
+
*/
|
|
122
|
+
|
|
123
|
+
var DropdownButton = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
124
|
+
var _a$prefixCls2 = _a.prefixCls,
|
|
125
|
+
prefixCls = _a$prefixCls2 === void 0 ? dropdownButtonPrefix : _a$prefixCls2,
|
|
126
|
+
_a$role2 = _a.role,
|
|
127
|
+
role = _a$role2 === void 0 ? _role : _a$role2,
|
|
128
|
+
className = _a.className,
|
|
129
|
+
children = _a.children,
|
|
130
|
+
rest = __rest(_a, ["prefixCls", "role", "className", "children"]);
|
|
131
|
+
|
|
132
|
+
var _useDropDownContext = useDropDownContext(),
|
|
133
|
+
getTriggerProps = _useDropDownContext.getTriggerProps;
|
|
134
|
+
|
|
135
|
+
var triggerProps = getTriggerProps();
|
|
136
|
+
var cls = cx(prefixCls, className);
|
|
137
|
+
return /*#__PURE__*/React.createElement("div", Object.assign({
|
|
138
|
+
role: role,
|
|
139
|
+
className: cls
|
|
140
|
+
}, rest, triggerProps), children);
|
|
141
|
+
});
|
|
142
|
+
|
|
143
|
+
if (__DEV__) {
|
|
144
|
+
DropdownButton.displayName = 'DropdownButton';
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
var dropdownMenuPrefix = getPrefixCls('dropdown-menu');
|
|
148
|
+
/**
|
|
149
|
+
* TODO: What is DropdownMenu
|
|
150
|
+
*/
|
|
151
|
+
|
|
152
|
+
var DropdownMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
153
|
+
var _a$prefixCls3 = _a.prefixCls,
|
|
154
|
+
prefixCls = _a$prefixCls3 === void 0 ? dropdownMenuPrefix : _a$prefixCls3,
|
|
155
|
+
popper = _a.popper,
|
|
156
|
+
parents = _a.parents,
|
|
157
|
+
className = _a.className,
|
|
158
|
+
children = _a.children,
|
|
159
|
+
rest = __rest(_a, ["prefixCls", "role", "popper", "parents", "className", "children"]);
|
|
160
|
+
|
|
161
|
+
var cls = cx(prefixCls, className);
|
|
162
|
+
return /*#__PURE__*/React.createElement(PopperPortal, Object.assign({}, popper), /*#__PURE__*/React.createElement("ul", Object.assign({
|
|
163
|
+
ref: ref,
|
|
164
|
+
className: cls
|
|
165
|
+
}, rest), children ? React.Children.map(children, function (child) {
|
|
166
|
+
return /*#__PURE__*/cloneElement(child, {
|
|
167
|
+
parents: parents
|
|
168
|
+
});
|
|
169
|
+
}) : children));
|
|
170
|
+
});
|
|
171
|
+
|
|
172
|
+
if (__DEV__) {
|
|
173
|
+
DropdownMenu.displayName = 'DropdownMenu';
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
var dropdownMenuItemPrefix = getPrefixCls('dropdown-menu-item');
|
|
177
|
+
/**
|
|
178
|
+
* TODO: What is DropdownMenuItem
|
|
179
|
+
*/
|
|
180
|
+
|
|
181
|
+
var DropdownMenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
182
|
+
var _a$prefixCls4 = _a.prefixCls,
|
|
183
|
+
prefixCls = _a$prefixCls4 === void 0 ? dropdownMenuItemPrefix : _a$prefixCls4,
|
|
184
|
+
className = _a.className,
|
|
185
|
+
children = _a.children,
|
|
186
|
+
href = _a.href,
|
|
187
|
+
target = _a.target,
|
|
188
|
+
disabled = _a.disabled,
|
|
189
|
+
parentsProp = _a.parents,
|
|
190
|
+
menu = _a.menu,
|
|
191
|
+
rest = __rest(_a, ["prefixCls", "role", "className", "children", "href", "value", "target", "disabled", "parents", "menu"]);
|
|
192
|
+
|
|
193
|
+
var _useDropDownContext2 = useDropDownContext(),
|
|
194
|
+
triggerMethods = _useDropDownContext2.triggerMethods,
|
|
195
|
+
width = _useDropDownContext2.width;
|
|
196
|
+
|
|
197
|
+
var _useDropdown = useDropdown(Object.assign(Object.assign({
|
|
198
|
+
popper: {
|
|
199
|
+
placement: 'right-start',
|
|
200
|
+
disabledPortal: true
|
|
201
|
+
},
|
|
202
|
+
width: width
|
|
203
|
+
}, rest), {
|
|
204
|
+
trigger: triggerMethods,
|
|
205
|
+
parents: parentsProp
|
|
206
|
+
})),
|
|
207
|
+
rootProps = _useDropdown.rootProps,
|
|
208
|
+
getTriggerProps = _useDropdown.getTriggerProps,
|
|
209
|
+
getMenuProps = _useDropdown.getMenuProps;
|
|
210
|
+
|
|
211
|
+
var cls = cx(prefixCls, className);
|
|
212
|
+
var shouldUseLink = href && !disabled;
|
|
213
|
+
return /*#__PURE__*/React.createElement("li", Object.assign({
|
|
214
|
+
ref: ref,
|
|
215
|
+
className: cls
|
|
216
|
+
}, rootProps), /*#__PURE__*/React.createElement("div", Object.assign({
|
|
217
|
+
className: prefixCls + "__trigger"
|
|
218
|
+
}, getTriggerProps()), shouldUseLink ? /*#__PURE__*/React.createElement("a", {
|
|
219
|
+
className: prefixCls + "__link",
|
|
220
|
+
href: href,
|
|
221
|
+
target: target
|
|
222
|
+
}, children) : children), menu ? /*#__PURE__*/cloneElement(menu, Object.assign({}, getMenuProps(menu.props))) : null);
|
|
223
|
+
});
|
|
224
|
+
|
|
225
|
+
if (__DEV__) {
|
|
226
|
+
DropdownMenuItem.displayName = 'DropdownMenuItem';
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
export { Dropdown };
|
|
230
|
+
//# sourceMappingURL=Dropdown.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sources":["../../src/Dropdown.tsx"],"sourcesContent":[null],"names":["_role","_prefix","getPrefixCls","DEFAULT_DATA","Dropdown","forwardRef","_a","ref","prefixCls","role","className","data","title","type","onClick","onButtonClick","overlayClassName","rest","_b","useDropdown","rootProps","providedValue","getMenuProps","getTriggerProps","disabled","menuVisibleAction","cls","cx","dig","treeData","map","item","menu","isArrayNonEmpty","children","React","DropdownMenu","popper","gutterGap","shouldRenderDivider","key","id","DropdownMenuItem","href","target","value","isArray","off","DropDownProvider","Button","appearance","DownOutlined","style","marginInlineStart","ButtonGroup","disabledPortal","__DEV__","displayName","dropdownButtonPrefix","DropdownButton","useDropDownContext","triggerProps","dropdownMenuPrefix","parents","PopperPortal","Children","child","cloneElement","dropdownMenuItemPrefix","parentsProp","triggerMethods","width","placement","trigger","shouldUseLink","props"],"mappings":"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"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/** @LICENSE
|
|
2
|
+
* @hi-ui/dropdown
|
|
3
|
+
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/dropdown#readme
|
|
4
|
+
*
|
|
5
|
+
* Copyright (c) HIUI <mi-hiui@xiaomi.com>.
|
|
6
|
+
*
|
|
7
|
+
* This source code is licensed under the MIT license found in the
|
|
8
|
+
* LICENSE file in the root directory of this source tree.
|
|
9
|
+
*/
|
|
10
|
+
import { useContext, createContext } from 'react';
|
|
11
|
+
var dropDownContext = /*#__PURE__*/createContext(null);
|
|
12
|
+
var DropDownProvider = dropDownContext.Provider;
|
|
13
|
+
|
|
14
|
+
var useDropDownContext = function useDropDownContext() {
|
|
15
|
+
var context = useContext(dropDownContext);
|
|
16
|
+
|
|
17
|
+
if (!context) {
|
|
18
|
+
throw new Error('The dropDownContext is not defined, Maybe it should be wrapped in Dropdown.');
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
return context;
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
export { DropDownProvider, useDropDownContext };
|
|
25
|
+
//# sourceMappingURL=context.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"context.js","sources":["../../src/context.ts"],"sourcesContent":[null],"names":["dropDownContext","createContext","DropDownProvider","Provider","useDropDownContext","context","useContext","Error"],"mappings":";;;;;;;;;;AAIA,IAAMA,eAAe,gBAAGC,aAAa,CAAyB,IAAzB,CAArC;IAEaC,gBAAgB,GAAGF,eAAe,CAACG;;IAEnCC,kBAAkB,GAAG,SAArBA,kBAAqB;MAC1BC,OAAO,GAAGC,UAAU,CAACN,eAAD;;MAEtB,CAACK,SAAS;UACN,IAAIE,KAAJ,CAAU,6EAAV;;;SAGDF;;;"}
|
package/lib/esm/index.js
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/** @LICENSE
|
|
2
|
+
* @hi-ui/dropdown
|
|
3
|
+
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/dropdown#readme
|
|
4
|
+
*
|
|
5
|
+
* Copyright (c) HIUI <mi-hiui@xiaomi.com>.
|
|
6
|
+
*
|
|
7
|
+
* This source code is licensed under the MIT license found in the
|
|
8
|
+
* LICENSE file in the root directory of this source tree.
|
|
9
|
+
*/
|
|
10
|
+
import './styles/index.scss.js';
|
|
11
|
+
export { Dropdown, Dropdown as default } from './Dropdown.js';
|
|
12
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/** @LICENSE
|
|
2
|
+
* @hi-ui/dropdown
|
|
3
|
+
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/dropdown#readme
|
|
4
|
+
*
|
|
5
|
+
* Copyright (c) HIUI <mi-hiui@xiaomi.com>.
|
|
6
|
+
*
|
|
7
|
+
* This source code is licensed under the MIT license found in the
|
|
8
|
+
* LICENSE file in the root directory of this source tree.
|
|
9
|
+
*/
|
|
10
|
+
var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-dropdown-menu {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n padding: 8px;\n padding: var(--hi-v4-spacing-4, 8px);\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-dropdown-menu-item {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n list-style: none;\n width: 200px;\n width: var(--hi-v4-dropdown-menu-item-width, 200px);\n margin: 0;\n box-sizing: border-box;\n overflow: visible; }\n.hi-v4-dropdown-menu-item__link {\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733);\n width: 100%;\n text-decoration: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box; }\n.hi-v4-dropdown-menu-item__trigger {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n cursor: pointer;\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n padding: 10px 12px;\n padding: var(--hi-v4-spacing-5, 10px) var(--hi-v4-spacing-6, 12px);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n.hi-v4-dropdown-menu-item__trigger:hover {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-dropdown-divider {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n list-style: none;\n background-color: #ebedf0;\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n width: 100%;\n height: 1px;\n margin: 8px 0;\n margin: var(--hi-v4-spacing-4, 8px) 0; }\n";
|
|
11
|
+
|
|
12
|
+
var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
|
|
13
|
+
|
|
14
|
+
__styleInject__(css_248z);
|
|
15
|
+
|
|
16
|
+
export default css_248z;
|
|
17
|
+
//# sourceMappingURL=index.scss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
|
package/lib/esm/types.js
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/** @LICENSE
|
|
2
|
+
* @hi-ui/dropdown
|
|
3
|
+
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/dropdown#readme
|
|
4
|
+
*
|
|
5
|
+
* Copyright (c) HIUI <mi-hiui@xiaomi.com>.
|
|
6
|
+
*
|
|
7
|
+
* This source code is licensed under the MIT license found in the
|
|
8
|
+
* LICENSE file in the root directory of this source tree.
|
|
9
|
+
*/
|
|
10
|
+
var TriggerActionEnum = {
|
|
11
|
+
CLICK: 'click',
|
|
12
|
+
CONTEXTMENU: 'contextmenu',
|
|
13
|
+
HOVER: 'hover'
|
|
14
|
+
};
|
|
15
|
+
Object.values(TriggerActionEnum);
|
|
16
|
+
export { TriggerActionEnum };
|
|
17
|
+
//# sourceMappingURL=types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sources":["../../src/types.ts"],"sourcesContent":[null],"names":["TriggerActionEnum","CLICK","CONTEXTMENU","HOVER","Object","values"],"mappings":";;;;;;;;;IAGaA,iBAAiB,GAAG;AAC/BC,EAAAA,KAAK,EAAE,OADwB;AAE/BC,EAAAA,WAAW,EAAE,aAFkB;AAG/BC,EAAAA,KAAK,EAAE;AAHwB;AAMHC,MAAM,CAACC,MAAPD,CAAcJ,iBAAdI;"}
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
/** @LICENSE
|
|
2
|
+
* @hi-ui/dropdown
|
|
3
|
+
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/dropdown#readme
|
|
4
|
+
*
|
|
5
|
+
* Copyright (c) HIUI <mi-hiui@xiaomi.com>.
|
|
6
|
+
*
|
|
7
|
+
* This source code is licensed under the MIT license found in the
|
|
8
|
+
* LICENSE file in the root directory of this source tree.
|
|
9
|
+
*/
|
|
10
|
+
import { __rest } from 'tslib';
|
|
11
|
+
import { useRef, useMemo, useCallback } from 'react';
|
|
12
|
+
import { TriggerActionEnum } from './types.js';
|
|
13
|
+
import { normalizeTrigger } from './utils/index.js';
|
|
14
|
+
import { useUncontrolledToggle } from '@hi-ui/use-toggle';
|
|
15
|
+
import { useLatestCallback } from '@hi-ui/use-latest';
|
|
16
|
+
import { useTimeout } from '@hi-ui/use-timeout';
|
|
17
|
+
import { useUnmountEffect } from '@hi-ui/use-unmount-effect';
|
|
18
|
+
import { getPrefixStyleVar } from '@hi-ui/classname';
|
|
19
|
+
import { mergeRefs } from '@hi-ui/react-utils';
|
|
20
|
+
var NOOP_ARRAY = [];
|
|
21
|
+
|
|
22
|
+
var useDropdown = function useDropdown(props) {
|
|
23
|
+
var _props$trigger = props.trigger,
|
|
24
|
+
triggerProp = _props$trigger === void 0 ? TriggerActionEnum.HOVER : _props$trigger,
|
|
25
|
+
_props$disabled = props.disabled,
|
|
26
|
+
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
|
27
|
+
_props$parents = props.parents,
|
|
28
|
+
parents = _props$parents === void 0 ? NOOP_ARRAY : _props$parents,
|
|
29
|
+
width = props.width,
|
|
30
|
+
popper = props.popper,
|
|
31
|
+
rest = __rest(props, ["trigger", "disabled", "parents", "width", "popper"]);
|
|
32
|
+
|
|
33
|
+
var triggerElementRef = useRef(null);
|
|
34
|
+
var popperElementRef = useRef(null);
|
|
35
|
+
/**
|
|
36
|
+
* 抹平数组或字符串结构,同时 memo 处理,减少重渲染
|
|
37
|
+
*/
|
|
38
|
+
|
|
39
|
+
var trigger = normalizeTrigger(triggerProp); // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
40
|
+
|
|
41
|
+
var triggerMethods = useMemo(function () {
|
|
42
|
+
return trigger;
|
|
43
|
+
}, trigger);
|
|
44
|
+
|
|
45
|
+
var _useUncontrolledToggl = useUncontrolledToggle({
|
|
46
|
+
defaultVisible: false,
|
|
47
|
+
disabled: disabled
|
|
48
|
+
}),
|
|
49
|
+
menuVisible = _useUncontrolledToggl[0],
|
|
50
|
+
menuVisibleAction = _useUncontrolledToggl[1];
|
|
51
|
+
/**
|
|
52
|
+
* 维护 trigger 元素 或 tooltip 弹出层元素的 hover 态
|
|
53
|
+
*/
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
var hoveringRef = useRef(false);
|
|
57
|
+
|
|
58
|
+
var _useTimeout = useTimeout(function () {
|
|
59
|
+
if (disabled) return;
|
|
60
|
+
menuVisibleAction.on();
|
|
61
|
+
}, 0),
|
|
62
|
+
startOpenTimer = _useTimeout.start,
|
|
63
|
+
clearOpenTimer = _useTimeout.clear;
|
|
64
|
+
|
|
65
|
+
var _useTimeout2 = useTimeout(function () {
|
|
66
|
+
if (disabled) return;
|
|
67
|
+
if (hoveringRef.current) return;
|
|
68
|
+
menuVisibleAction.off();
|
|
69
|
+
}, 100),
|
|
70
|
+
startCloseTimer = _useTimeout2.start,
|
|
71
|
+
clearCloseTimer = _useTimeout2.clear;
|
|
72
|
+
|
|
73
|
+
var clearToggleTimer = useCallback(function () {
|
|
74
|
+
clearOpenTimer();
|
|
75
|
+
clearCloseTimer();
|
|
76
|
+
}, [clearOpenTimer, clearCloseTimer]);
|
|
77
|
+
useUnmountEffect(clearToggleTimer);
|
|
78
|
+
var handlePopperLeave = useLatestCallback(function (evt) {
|
|
79
|
+
hoveringRef.current = false; // if (triggerElementRef.current?.contains(evt.target as HTMLElement)) return
|
|
80
|
+
|
|
81
|
+
clearOpenTimer();
|
|
82
|
+
startCloseTimer();
|
|
83
|
+
});
|
|
84
|
+
var handlePopperEnter = useLatestCallback(function () {
|
|
85
|
+
if (disabled) return;
|
|
86
|
+
hoveringRef.current = true;
|
|
87
|
+
startOpenTimer();
|
|
88
|
+
});
|
|
89
|
+
/**
|
|
90
|
+
* 事件收集
|
|
91
|
+
* 'click' | 'contextmenu' | 'hover'
|
|
92
|
+
*/
|
|
93
|
+
|
|
94
|
+
var eventHandler = useMemo(function () {
|
|
95
|
+
return triggerMethods.reduce(function (acc, cur) {
|
|
96
|
+
switch (cur) {
|
|
97
|
+
case TriggerActionEnum.HOVER:
|
|
98
|
+
acc.onMouseEnter = handlePopperEnter;
|
|
99
|
+
acc.onMouseLeave = handlePopperLeave;
|
|
100
|
+
break;
|
|
101
|
+
|
|
102
|
+
case TriggerActionEnum.CONTEXTMENU:
|
|
103
|
+
acc.onContextMenu = function (evt) {
|
|
104
|
+
evt.preventDefault();
|
|
105
|
+
menuVisibleAction.not();
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
break;
|
|
109
|
+
|
|
110
|
+
case TriggerActionEnum.CLICK:
|
|
111
|
+
acc.onClick = menuVisibleAction.not;
|
|
112
|
+
break;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
return acc;
|
|
116
|
+
}, {});
|
|
117
|
+
}, [triggerMethods, menuVisibleAction, handlePopperEnter, handlePopperLeave]);
|
|
118
|
+
var getTriggerProps = useCallback(function () {
|
|
119
|
+
return Object.assign({
|
|
120
|
+
ref: triggerElementRef,
|
|
121
|
+
disabled: disabled
|
|
122
|
+
}, eventHandler);
|
|
123
|
+
}, [eventHandler, disabled]);
|
|
124
|
+
var rootProps = rest;
|
|
125
|
+
var getMenuProps = useLatestCallback(function (props, ref) {
|
|
126
|
+
var _Object$assign;
|
|
127
|
+
|
|
128
|
+
if (props === void 0) {
|
|
129
|
+
props = {};
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
if (ref === void 0) {
|
|
133
|
+
ref = null;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
var menuParents = parents.concat(triggerElementRef);
|
|
137
|
+
var menuProps = Object.assign(Object.assign({}, props), {
|
|
138
|
+
ref: mergeRefs(popperElementRef, ref),
|
|
139
|
+
parents: menuParents,
|
|
140
|
+
style: Object.assign(Object.assign({}, props.style), (_Object$assign = {}, _Object$assign[getPrefixStyleVar('dropdown-menu-item-width')] = width + "px", _Object$assign)),
|
|
141
|
+
popper: Object.assign(Object.assign(Object.assign({}, popper), props.popper), {
|
|
142
|
+
closeOnOutsideClick: true,
|
|
143
|
+
visible: menuVisible,
|
|
144
|
+
attachEl: triggerElementRef.current,
|
|
145
|
+
onClose: menuVisibleAction.off
|
|
146
|
+
})
|
|
147
|
+
});
|
|
148
|
+
|
|
149
|
+
if (triggerMethods.includes(TriggerActionEnum.HOVER)) {
|
|
150
|
+
// @ts-ignore
|
|
151
|
+
menuProps.onMouseEnter = function () {
|
|
152
|
+
hoveringRef.current = true;
|
|
153
|
+
}; // @ts-ignore
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
menuProps.onMouseLeave = handlePopperLeave;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
return menuProps;
|
|
160
|
+
});
|
|
161
|
+
return {
|
|
162
|
+
width: width,
|
|
163
|
+
rootProps: rootProps,
|
|
164
|
+
disabled: disabled,
|
|
165
|
+
menuVisible: menuVisible,
|
|
166
|
+
menuVisibleAction: menuVisibleAction,
|
|
167
|
+
triggerElementRef: triggerElementRef,
|
|
168
|
+
triggerMethods: triggerMethods,
|
|
169
|
+
getTriggerProps: getTriggerProps,
|
|
170
|
+
getMenuProps: getMenuProps
|
|
171
|
+
};
|
|
172
|
+
};
|
|
173
|
+
|
|
174
|
+
export { useDropdown };
|
|
175
|
+
//# sourceMappingURL=use-dropdown.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-dropdown.js","sources":["../../src/use-dropdown.tsx"],"sourcesContent":[null],"names":["NOOP_ARRAY","useDropdown","props","trigger","triggerProp","TriggerActionEnum","HOVER","disabled","parents","width","popper","rest","triggerElementRef","useRef","popperElementRef","normalizeTrigger","triggerMethods","useMemo","useUncontrolledToggle","defaultVisible","menuVisible","menuVisibleAction","hoveringRef","useTimeout","on","startOpenTimer","start","clearOpenTimer","clear","current","off","startCloseTimer","clearCloseTimer","clearToggleTimer","useCallback","useUnmountEffect","handlePopperLeave","useLatestCallback","evt","handlePopperEnter","eventHandler","reduce","acc","cur","onMouseEnter","onMouseLeave","CONTEXTMENU","onContextMenu","preventDefault","not","CLICK","onClick","getTriggerProps","ref","rootProps","getMenuProps","menuParents","concat","menuProps","mergeRefs","style","getPrefixStyleVar","closeOnOutsideClick","visible","attachEl","onClose","includes"],"mappings":"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"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/** @LICENSE
|
|
2
|
+
* @hi-ui/dropdown
|
|
3
|
+
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/dropdown#readme
|
|
4
|
+
*
|
|
5
|
+
* Copyright (c) HIUI <mi-hiui@xiaomi.com>.
|
|
6
|
+
*
|
|
7
|
+
* This source code is licensed under the MIT license found in the
|
|
8
|
+
* LICENSE file in the root directory of this source tree.
|
|
9
|
+
*/
|
|
10
|
+
import { isArray } from '@hi-ui/type-assertion';
|
|
11
|
+
/**
|
|
12
|
+
* 抹平 trigger 结构为数组
|
|
13
|
+
*
|
|
14
|
+
* @param trigger
|
|
15
|
+
* @returns
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
var normalizeTrigger = function normalizeTrigger(trigger) {
|
|
19
|
+
return isArray(trigger) ? Array.from(new Set(trigger)) : [trigger];
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export { normalizeTrigger };
|
|
23
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/utils/index.ts"],"sourcesContent":[null],"names":["normalizeTrigger","trigger","isArray","Array","from","Set"],"mappings":";;;;;;;;;;AAGA;;;;;;;IAMaA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,OAAD;SAC9BC,OAAO,CAACD,OAAD,CAAPC,GAAmBC,KAAK,CAACC,IAAND,CAAW,IAAIE,GAAJ,CAAQJ,OAAR,CAAXE,CAAnBD,GAAkD,CAACD,OAAD;;;"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { HiBaseHTMLProps } from '@hi-ui/core';
|
|
3
|
+
import { UseDropdownProps } from './use-dropdown';
|
|
4
|
+
import { DropdownDataItem } from './types';
|
|
5
|
+
/**
|
|
6
|
+
* TODO: What is Dropdown
|
|
7
|
+
*/
|
|
8
|
+
export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement | null>>;
|
|
9
|
+
export interface DropdownProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'>, UseDropdownProps {
|
|
10
|
+
/**
|
|
11
|
+
* 下拉菜单显示标题的内容
|
|
12
|
+
*/
|
|
13
|
+
title?: React.ReactNode;
|
|
14
|
+
/**
|
|
15
|
+
* 下拉菜单数据项
|
|
16
|
+
*/
|
|
17
|
+
data?: DropdownDataItem[];
|
|
18
|
+
/**
|
|
19
|
+
* 设置下拉面板宽度
|
|
20
|
+
*/
|
|
21
|
+
width?: number;
|
|
22
|
+
/**
|
|
23
|
+
* 下拉菜单按钮类型
|
|
24
|
+
*/
|
|
25
|
+
type?: 'text' | 'button' | 'group';
|
|
26
|
+
/**
|
|
27
|
+
* 点击左侧按钮的回调,仅在 type 为 group 时有效
|
|
28
|
+
*/
|
|
29
|
+
onButtonClick?: (event: React.MouseEvent) => void;
|
|
30
|
+
/**
|
|
31
|
+
* 点击后的回调
|
|
32
|
+
*/
|
|
33
|
+
onClick?: (id: React.ReactText) => void;
|
|
34
|
+
/**
|
|
35
|
+
* 下拉根元素的类名称
|
|
36
|
+
*/
|
|
37
|
+
overlayClassName?: string;
|
|
38
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { UseDropdownReturn } from './use-dropdown';
|
|
3
|
+
interface DropDownContext extends Omit<UseDropdownReturn, 'rootProps'> {
|
|
4
|
+
}
|
|
5
|
+
export declare const DropDownProvider: import("react").Provider<DropDownContext | null>;
|
|
6
|
+
export declare const useDropDownContext: () => DropDownContext;
|
|
7
|
+
export {};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ValueOf } from '@hi-ui/core';
|
|
3
|
+
export declare const TriggerActionEnum: {
|
|
4
|
+
readonly CLICK: "click";
|
|
5
|
+
readonly CONTEXTMENU: "contextmenu";
|
|
6
|
+
readonly HOVER: "hover";
|
|
7
|
+
};
|
|
8
|
+
export declare const triggerActions: ("click" | "contextmenu" | "hover")[];
|
|
9
|
+
export declare type TriggerActionEnum = ValueOf<typeof TriggerActionEnum>;
|
|
10
|
+
export interface DropdownDataItem {
|
|
11
|
+
/**
|
|
12
|
+
* 唯一标识 id
|
|
13
|
+
*/
|
|
14
|
+
id?: React.ReactText;
|
|
15
|
+
/**
|
|
16
|
+
* 点击跳转的路径
|
|
17
|
+
*/
|
|
18
|
+
href?: string;
|
|
19
|
+
/**
|
|
20
|
+
* 同 a 标签的 target 属性,仅在设置 href 后有效 (3.0 新增)
|
|
21
|
+
*/
|
|
22
|
+
target?: '_self' | '_blank' | '_parent' | '_top';
|
|
23
|
+
/**
|
|
24
|
+
* 标题的内容,设置为 '-' 时是分割线
|
|
25
|
+
*/
|
|
26
|
+
title?: React.ReactNode;
|
|
27
|
+
/**
|
|
28
|
+
* 是否禁用
|
|
29
|
+
*/
|
|
30
|
+
disabled?: boolean;
|
|
31
|
+
}
|