@hi-ui/dropdown 4.0.0-alpha.3 → 4.0.0-alpha.7
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/README.md +58 -7
- package/lib/cjs/Dropdown.js +43 -49
- package/lib/cjs/Dropdown.js.map +1 -1
- package/lib/cjs/styles/index.scss.js +1 -1
- package/lib/cjs/use-dropdown.js +31 -21
- package/lib/cjs/use-dropdown.js.map +1 -1
- package/lib/esm/Dropdown.js +43 -49
- package/lib/esm/Dropdown.js.map +1 -1
- package/lib/esm/styles/index.scss.js +1 -1
- package/lib/esm/use-dropdown.js +29 -21
- package/lib/esm/use-dropdown.js.map +1 -1
- package/lib/types/Dropdown.d.ts +20 -1
- package/lib/types/use-dropdown.d.ts +4 -1
- package/package.json +8 -7
package/README.md
CHANGED
|
@@ -1,11 +1,62 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Dropdown 下拉菜单
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
用来将菜单收起在下拉面板中，使用中唤起面板，有效节省空间
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## 何时使用
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
const Dropdown = require('@hi-ui/dropdown');
|
|
7
|
+
有二级以上的菜单且展示空间有限
|
|
9
8
|
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
当一组平级的动作要展示时，将其收入一个入口，可让页面信息更整洁
|
|
10
|
+
|
|
11
|
+
## 使用示例
|
|
12
|
+
|
|
13
|
+
<!-- Inject Stories -->
|
|
14
|
+
|
|
15
|
+
## Props
|
|
16
|
+
|
|
17
|
+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
18
|
+
| ---------------- | --------------------------------------- | ------------------------------------------ | ----------------------------------- | ------- |
|
|
19
|
+
| data | 下拉菜单数据项 | DataItem [] | - | - |
|
|
20
|
+
| title | 下拉菜单显示标题的内容 | ReactNode | - | - |
|
|
21
|
+
| type | 下拉菜单按钮类型 | string | 'text' \| 'button' \| 'group' | 'text' |
|
|
22
|
+
| trigger | 下拉菜单触发方式 | string \| string [] | 'click' \| 'contextmenu' \| 'hover' | 'hover' |
|
|
23
|
+
| disabled | 是否禁用下拉菜单 | boolean | true \| false | - |
|
|
24
|
+
| width | 菜单项宽度 | number | - | 180 |
|
|
25
|
+
| overlayClassName | 下拉根元素的类名称 | string | - | - |
|
|
26
|
+
| popper | 自定义控制弹出层 popper 行为 | Omit<PopperProps, 'visible' \| 'attachEl'> | - | - |
|
|
27
|
+
| triggerButton | 自定义下拉菜单触发按钮，优先级大于 type | ReactElement | - | - |
|
|
28
|
+
|
|
29
|
+
> 注意：自定义按钮需要支持 ref 获取元素 dom 引用 以及 trigger 对应的事件：
|
|
30
|
+
>
|
|
31
|
+
> hover: onMouseEnter \ onMouseLeave
|
|
32
|
+
> click: onClick
|
|
33
|
+
> contextmenu: onContextMenu
|
|
34
|
+
|
|
35
|
+
## Events
|
|
36
|
+
|
|
37
|
+
| 名称 | 说明 | 类型 | 参数 | 返回值 |
|
|
38
|
+
| ------------- | --------------------------------------------- | --------------------------- | ------------------- | ------ |
|
|
39
|
+
| onClick | 点击后的回调 | (id: ReactText) => void | id: 点击的数据项 ID | - |
|
|
40
|
+
| onButtonClick | 点击左侧按钮的回调，仅在 type 为 group 时有效 | (event: MouseEvent) => void | event: 鼠标事件对象 | - |
|
|
41
|
+
|
|
42
|
+
## Type
|
|
43
|
+
|
|
44
|
+
### DataItem
|
|
45
|
+
|
|
46
|
+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
47
|
+
| -------- | --------------------------------------------- | --------- | ---------------------------------------------- | ------ |
|
|
48
|
+
| title | 标题的内容，设置为 `'-'` 时是分割线 | ReactNode | - | - |
|
|
49
|
+
| id | 唯一标识 id | ReactText | - | - |
|
|
50
|
+
| disabled | 是否禁用 | boolean | true \| false | false |
|
|
51
|
+
| href | 点击跳转的路径 | string | - | - |
|
|
52
|
+
| target | 同 a 标签的 target 属性，仅在设置 href 后有效 | string | '\_self' \| '\_blank' \| '\_parent' \| '\_top' | - |
|
|
53
|
+
|
|
54
|
+
## CHANGELOG
|
|
55
|
+
|
|
56
|
+
| 参数 | 变更类型 | 变更内容 | 解决的问题 |
|
|
57
|
+
| ------------- | ------------------------------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------- |
|
|
58
|
+
| propName | feature \| deprecated \| update | 变更了什么 | 之前是什么样子，解决什么问题 |
|
|
59
|
+
| ---- | ---- | ---- | ---- |
|
|
60
|
+
| triggerButton | feature | - | 功能强化 |
|
|
61
|
+
| popper | feature | 字段 placement -> popper | Picker 类型组件统一支持，聚合管理。比如： placement arrow container disablePortal 等，之前有的加了有的没加 |
|
|
62
|
+
| id | update | 对于表单控件 id 值的控制，均使用 ReactText（即 string 和 number 都支持） | 之前是 string 类型 |
|
package/lib/cjs/Dropdown.js
CHANGED
|
@@ -51,7 +51,12 @@ var _prefix = classname.getPrefixCls(_role);
|
|
|
51
51
|
|
|
52
52
|
var DEFAULT_DATA = [];
|
|
53
53
|
/**
|
|
54
|
-
*
|
|
54
|
+
* 下拉菜单
|
|
55
|
+
*
|
|
56
|
+
* TODO:
|
|
57
|
+
* 1. 支持自定义icon
|
|
58
|
+
* 2. 支持 titleRender
|
|
59
|
+
* 3. 支持 onClick 阻止默认行为关闭
|
|
55
60
|
*/
|
|
56
61
|
|
|
57
62
|
var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
@@ -68,7 +73,8 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
68
73
|
_onClick = _a.onClick,
|
|
69
74
|
onButtonClick = _a.onButtonClick,
|
|
70
75
|
overlayClassName = _a.overlayClassName,
|
|
71
|
-
|
|
76
|
+
triggerButton = _a.triggerButton,
|
|
77
|
+
rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "data", "title", "type", "onClick", "onButtonClick", "overlayClassName", "triggerButton"]);
|
|
72
78
|
|
|
73
79
|
var _b = useDropdown.useDropdown(rest),
|
|
74
80
|
rootProps = _b.rootProps,
|
|
@@ -115,23 +121,40 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
115
121
|
});
|
|
116
122
|
};
|
|
117
123
|
|
|
124
|
+
var renderButton = function renderButton() {
|
|
125
|
+
if (triggerButton) {
|
|
126
|
+
// @ts-ignore
|
|
127
|
+
return /*#__PURE__*/React.cloneElement(triggerButton, getTriggerProps(triggerButton.props, triggerButton.ref));
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
if (type === 'text' || type === 'button') {
|
|
131
|
+
return /*#__PURE__*/React__default['default'].createElement(Button__default['default'], Object.assign({}, getTriggerProps(), {
|
|
132
|
+
appearance: type === 'button' ? 'flat' : 'link'
|
|
133
|
+
}), title, /*#__PURE__*/React__default['default'].createElement(icons.DownOutlined, {
|
|
134
|
+
style: {
|
|
135
|
+
marginInlineStart: 2
|
|
136
|
+
}
|
|
137
|
+
}));
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
if (type === 'group') {
|
|
141
|
+
return /*#__PURE__*/React__default['default'].createElement(Button.ButtonGroup, null, /*#__PURE__*/React__default['default'].createElement(Button__default['default'], {
|
|
142
|
+
onClick: onButtonClick
|
|
143
|
+
}, title), /*#__PURE__*/React__default['default'].createElement(Button__default['default'], Object.assign({
|
|
144
|
+
className: classname.cx(prefixCls + "__icon", prefixCls + "__icon-btn-wrap")
|
|
145
|
+
}, getTriggerProps()), /*#__PURE__*/React__default['default'].createElement(icons.DownOutlined, null)));
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
return null;
|
|
149
|
+
};
|
|
150
|
+
|
|
118
151
|
return /*#__PURE__*/React__default['default'].createElement(context.DropDownProvider, {
|
|
119
152
|
value: providedValue
|
|
120
153
|
}, /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
|
|
121
154
|
ref: ref,
|
|
122
155
|
role: role,
|
|
123
156
|
className: cls
|
|
124
|
-
}, rootProps),
|
|
125
|
-
appearance: type === 'button' ? 'flat' : 'link'
|
|
126
|
-
}), title, /*#__PURE__*/React__default['default'].createElement(icons.DownOutlined, {
|
|
127
|
-
style: {
|
|
128
|
-
marginInlineStart: 2
|
|
129
|
-
}
|
|
130
|
-
})) : null, type === 'group' ? /*#__PURE__*/React__default['default'].createElement(Button.ButtonGroup, null, /*#__PURE__*/React__default['default'].createElement(Button__default['default'], {
|
|
131
|
-
onClick: onButtonClick
|
|
132
|
-
}, title), /*#__PURE__*/React__default['default'].createElement(Button__default['default'], Object.assign({
|
|
133
|
-
className: classname.cx(prefixCls + "__icon", prefixCls + "__icon-btn-wrap")
|
|
134
|
-
}, getTriggerProps()), /*#__PURE__*/React__default['default'].createElement(icons.DownOutlined, null))) : null, typeAssertion.isArrayNonEmpty(data) ? /*#__PURE__*/React__default['default'].createElement(DropdownMenu, Object.assign({}, getMenuProps({
|
|
157
|
+
}, rootProps), renderButton(), typeAssertion.isArrayNonEmpty(data) ? /*#__PURE__*/React__default['default'].createElement(DropdownMenu, Object.assign({}, getMenuProps({
|
|
135
158
|
popper: {
|
|
136
159
|
disabledPortal: false,
|
|
137
160
|
className: overlayClassName
|
|
@@ -143,43 +166,14 @@ if (env.__DEV__) {
|
|
|
143
166
|
Dropdown.displayName = 'Dropdown';
|
|
144
167
|
}
|
|
145
168
|
|
|
146
|
-
var dropdownButtonPrefix = classname.getPrefixCls('dropdown-button');
|
|
147
|
-
/**
|
|
148
|
-
* TODO: What is DropdownButton
|
|
149
|
-
*/
|
|
150
|
-
|
|
151
|
-
var DropdownButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
152
|
-
var _a$prefixCls2 = _a.prefixCls,
|
|
153
|
-
prefixCls = _a$prefixCls2 === void 0 ? dropdownButtonPrefix : _a$prefixCls2,
|
|
154
|
-
_a$role2 = _a.role,
|
|
155
|
-
role = _a$role2 === void 0 ? _role : _a$role2,
|
|
156
|
-
className = _a.className,
|
|
157
|
-
children = _a.children,
|
|
158
|
-
rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children"]);
|
|
159
|
-
|
|
160
|
-
var _useDropDownContext = context.useDropDownContext(),
|
|
161
|
-
getTriggerProps = _useDropDownContext.getTriggerProps;
|
|
162
|
-
|
|
163
|
-
var triggerProps = getTriggerProps();
|
|
164
|
-
var cls = classname.cx(prefixCls, className);
|
|
165
|
-
return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
|
|
166
|
-
role: role,
|
|
167
|
-
className: cls
|
|
168
|
-
}, rest, triggerProps), children);
|
|
169
|
-
});
|
|
170
|
-
|
|
171
|
-
if (env.__DEV__) {
|
|
172
|
-
DropdownButton.displayName = 'DropdownButton';
|
|
173
|
-
}
|
|
174
|
-
|
|
175
169
|
var dropdownMenuPrefix = classname.getPrefixCls('dropdown-menu');
|
|
176
170
|
/**
|
|
177
171
|
* TODO: What is DropdownMenu
|
|
178
172
|
*/
|
|
179
173
|
|
|
180
174
|
var DropdownMenu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
181
|
-
var _a$
|
|
182
|
-
prefixCls = _a$
|
|
175
|
+
var _a$prefixCls2 = _a.prefixCls,
|
|
176
|
+
prefixCls = _a$prefixCls2 === void 0 ? dropdownMenuPrefix : _a$prefixCls2,
|
|
183
177
|
popper$1 = _a.popper,
|
|
184
178
|
parents = _a.parents,
|
|
185
179
|
className = _a.className,
|
|
@@ -207,8 +201,8 @@ var dropdownMenuItemPrefix = classname.getPrefixCls('dropdown-menu-item');
|
|
|
207
201
|
*/
|
|
208
202
|
|
|
209
203
|
var DropdownMenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
210
|
-
var _a$
|
|
211
|
-
prefixCls = _a$
|
|
204
|
+
var _a$prefixCls3 = _a.prefixCls,
|
|
205
|
+
prefixCls = _a$prefixCls3 === void 0 ? dropdownMenuItemPrefix : _a$prefixCls3,
|
|
212
206
|
className = _a.className,
|
|
213
207
|
children = _a.children,
|
|
214
208
|
href = _a.href,
|
|
@@ -218,9 +212,9 @@ var DropdownMenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
218
212
|
menu = _a.menu,
|
|
219
213
|
rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "href", "value", "target", "disabled", "parents", "menu"]);
|
|
220
214
|
|
|
221
|
-
var
|
|
222
|
-
triggerMethods =
|
|
223
|
-
width =
|
|
215
|
+
var _useDropDownContext = context.useDropDownContext(),
|
|
216
|
+
triggerMethods = _useDropDownContext.triggerMethods,
|
|
217
|
+
width = _useDropDownContext.width;
|
|
224
218
|
|
|
225
219
|
var _useDropdown = useDropdown.useDropdown(Object.assign(Object.assign({
|
|
226
220
|
popper: {
|
package/lib/cjs/Dropdown.js.map
CHANGED
|
@@ -1 +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","
|
|
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","triggerButton","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","renderButton","cloneElement","props","Button","appearance","DownOutlined","style","marginInlineStart","ButtonGroup","DropDownProvider","disabledPortal","__DEV__","displayName","dropdownMenuPrefix","parents","PopperPortal","Children","child","dropdownMenuItemPrefix","parentsProp","useDropDownContext","triggerMethods","width","placement","trigger","shouldUseLink"],"mappings":"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"}
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
|
13
13
|
value: true
|
|
14
14
|
});
|
|
15
|
-
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
|
|
15
|
+
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 width: 180px;\n width: var(--hi-v4-dropdown-menu-width, 180px); }\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 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";
|
|
16
16
|
|
|
17
17
|
var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
|
|
18
18
|
|
package/lib/cjs/use-dropdown.js
CHANGED
|
@@ -33,6 +33,10 @@ var classname = require('@hi-ui/classname');
|
|
|
33
33
|
|
|
34
34
|
var reactUtils = require('@hi-ui/react-utils');
|
|
35
35
|
|
|
36
|
+
var domUtils = require('@hi-ui/dom-utils');
|
|
37
|
+
|
|
38
|
+
var typeAssertion = require('@hi-ui/type-assertion');
|
|
39
|
+
|
|
36
40
|
var NOOP_ARRAY = [];
|
|
37
41
|
|
|
38
42
|
var useDropdown = function useDropdown(props) {
|
|
@@ -102,41 +106,47 @@ var useDropdown = function useDropdown(props) {
|
|
|
102
106
|
hoveringRef.current = true;
|
|
103
107
|
startOpenTimer();
|
|
104
108
|
});
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
+
var getTriggerProps = React.useCallback(function (props, ref) {
|
|
110
|
+
if (props === void 0) {
|
|
111
|
+
props = {};
|
|
112
|
+
}
|
|
109
113
|
|
|
110
|
-
|
|
111
|
-
|
|
114
|
+
if (ref === void 0) {
|
|
115
|
+
ref = null;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
var triggerProps = {
|
|
119
|
+
ref: reactUtils.mergeRefs(triggerElementRef, ref),
|
|
120
|
+
disabled: disabled
|
|
121
|
+
};
|
|
122
|
+
/**
|
|
123
|
+
* 事件收集
|
|
124
|
+
* 'click' | 'contextmenu' | 'hover'
|
|
125
|
+
*/
|
|
126
|
+
|
|
127
|
+
triggerMethods.reduce(function (acc, cur) {
|
|
112
128
|
switch (cur) {
|
|
113
129
|
case types.TriggerActionEnum.HOVER:
|
|
114
|
-
acc.onMouseEnter = handlePopperEnter;
|
|
115
|
-
acc.onMouseLeave = handlePopperLeave;
|
|
130
|
+
acc.onMouseEnter = domUtils.mockDefaultHandlers(props.onMouseEnter, handlePopperEnter);
|
|
131
|
+
acc.onMouseLeave = domUtils.mockDefaultHandlers(props.onMouseLeave, handlePopperLeave);
|
|
116
132
|
break;
|
|
117
133
|
|
|
118
134
|
case types.TriggerActionEnum.CONTEXTMENU:
|
|
119
|
-
acc.onContextMenu = function (evt) {
|
|
135
|
+
acc.onContextMenu = domUtils.mockDefaultHandlers(props.onContextMenu, function (evt) {
|
|
120
136
|
evt.preventDefault();
|
|
121
137
|
menuVisibleAction.not();
|
|
122
|
-
};
|
|
123
|
-
|
|
138
|
+
});
|
|
124
139
|
break;
|
|
125
140
|
|
|
126
141
|
case types.TriggerActionEnum.CLICK:
|
|
127
|
-
acc.onClick = menuVisibleAction.not;
|
|
142
|
+
acc.onClick = domUtils.mockDefaultHandlers(props.onClick, menuVisibleAction.not);
|
|
128
143
|
break;
|
|
129
144
|
}
|
|
130
145
|
|
|
131
146
|
return acc;
|
|
132
|
-
},
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
return Object.assign({
|
|
136
|
-
ref: triggerElementRef,
|
|
137
|
-
disabled: disabled
|
|
138
|
-
}, eventHandler);
|
|
139
|
-
}, [eventHandler, disabled]);
|
|
147
|
+
}, triggerProps);
|
|
148
|
+
return triggerProps;
|
|
149
|
+
}, [disabled, triggerMethods, menuVisibleAction, handlePopperEnter, handlePopperLeave]);
|
|
140
150
|
var rootProps = rest;
|
|
141
151
|
var getMenuProps = useLatest.useLatestCallback(function (props, ref) {
|
|
142
152
|
var _Object$assign;
|
|
@@ -153,7 +163,7 @@ var useDropdown = function useDropdown(props) {
|
|
|
153
163
|
var menuProps = Object.assign(Object.assign({}, props), {
|
|
154
164
|
ref: reactUtils.mergeRefs(popperElementRef, ref),
|
|
155
165
|
parents: menuParents,
|
|
156
|
-
style: Object.assign(Object.assign({}, props.style), (_Object$assign = {}, _Object$assign[classname.getPrefixStyleVar('dropdown-menu-
|
|
166
|
+
style: Object.assign(Object.assign({}, props.style), (_Object$assign = {}, _Object$assign[classname.getPrefixStyleVar('dropdown-menu-width')] = typeAssertion.isNumeric(width) ? width + 'px' : width, _Object$assign)),
|
|
157
167
|
popper: Object.assign(Object.assign(Object.assign({}, popper), props.popper), {
|
|
158
168
|
closeOnOutsideClick: true,
|
|
159
169
|
visible: menuVisible,
|
|
@@ -1 +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","
|
|
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","getTriggerProps","ref","triggerProps","mergeRefs","reduce","acc","cur","onMouseEnter","mockDefaultHandlers","onMouseLeave","CONTEXTMENU","onContextMenu","preventDefault","not","CLICK","onClick","rootProps","getMenuProps","menuParents","concat","menuProps","style","getPrefixStyleVar","isNumeric","closeOnOutsideClick","visible","attachEl","onClose","includes"],"mappings":"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"}
|
package/lib/esm/Dropdown.js
CHANGED
|
@@ -23,7 +23,12 @@ var _prefix = getPrefixCls(_role);
|
|
|
23
23
|
|
|
24
24
|
var DEFAULT_DATA = [];
|
|
25
25
|
/**
|
|
26
|
-
*
|
|
26
|
+
* 下拉菜单
|
|
27
|
+
*
|
|
28
|
+
* TODO:
|
|
29
|
+
* 1. 支持自定义icon
|
|
30
|
+
* 2. 支持 titleRender
|
|
31
|
+
* 3. 支持 onClick 阻止默认行为关闭
|
|
27
32
|
*/
|
|
28
33
|
|
|
29
34
|
var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
@@ -40,7 +45,8 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
40
45
|
_onClick = _a.onClick,
|
|
41
46
|
onButtonClick = _a.onButtonClick,
|
|
42
47
|
overlayClassName = _a.overlayClassName,
|
|
43
|
-
|
|
48
|
+
triggerButton = _a.triggerButton,
|
|
49
|
+
rest = __rest(_a, ["prefixCls", "role", "className", "children", "data", "title", "type", "onClick", "onButtonClick", "overlayClassName", "triggerButton"]);
|
|
44
50
|
|
|
45
51
|
var _b = useDropdown(rest),
|
|
46
52
|
rootProps = _b.rootProps,
|
|
@@ -87,23 +93,40 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
87
93
|
});
|
|
88
94
|
};
|
|
89
95
|
|
|
96
|
+
var renderButton = function renderButton() {
|
|
97
|
+
if (triggerButton) {
|
|
98
|
+
// @ts-ignore
|
|
99
|
+
return /*#__PURE__*/cloneElement(triggerButton, getTriggerProps(triggerButton.props, triggerButton.ref));
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
if (type === 'text' || type === 'button') {
|
|
103
|
+
return /*#__PURE__*/React.createElement(Button, Object.assign({}, getTriggerProps(), {
|
|
104
|
+
appearance: type === 'button' ? 'flat' : 'link'
|
|
105
|
+
}), title, /*#__PURE__*/React.createElement(DownOutlined, {
|
|
106
|
+
style: {
|
|
107
|
+
marginInlineStart: 2
|
|
108
|
+
}
|
|
109
|
+
}));
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
if (type === 'group') {
|
|
113
|
+
return /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
|
|
114
|
+
onClick: onButtonClick
|
|
115
|
+
}, title), /*#__PURE__*/React.createElement(Button, Object.assign({
|
|
116
|
+
className: cx(prefixCls + "__icon", prefixCls + "__icon-btn-wrap")
|
|
117
|
+
}, getTriggerProps()), /*#__PURE__*/React.createElement(DownOutlined, null)));
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
return null;
|
|
121
|
+
};
|
|
122
|
+
|
|
90
123
|
return /*#__PURE__*/React.createElement(DropDownProvider, {
|
|
91
124
|
value: providedValue
|
|
92
125
|
}, /*#__PURE__*/React.createElement("div", Object.assign({
|
|
93
126
|
ref: ref,
|
|
94
127
|
role: role,
|
|
95
128
|
className: cls
|
|
96
|
-
}, rootProps),
|
|
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({
|
|
129
|
+
}, rootProps), renderButton(), isArrayNonEmpty(data) ? /*#__PURE__*/React.createElement(DropdownMenu, Object.assign({}, getMenuProps({
|
|
107
130
|
popper: {
|
|
108
131
|
disabledPortal: false,
|
|
109
132
|
className: overlayClassName
|
|
@@ -115,43 +138,14 @@ if (__DEV__) {
|
|
|
115
138
|
Dropdown.displayName = 'Dropdown';
|
|
116
139
|
}
|
|
117
140
|
|
|
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
141
|
var dropdownMenuPrefix = getPrefixCls('dropdown-menu');
|
|
148
142
|
/**
|
|
149
143
|
* TODO: What is DropdownMenu
|
|
150
144
|
*/
|
|
151
145
|
|
|
152
146
|
var DropdownMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
153
|
-
var _a$
|
|
154
|
-
prefixCls = _a$
|
|
147
|
+
var _a$prefixCls2 = _a.prefixCls,
|
|
148
|
+
prefixCls = _a$prefixCls2 === void 0 ? dropdownMenuPrefix : _a$prefixCls2,
|
|
155
149
|
popper = _a.popper,
|
|
156
150
|
parents = _a.parents,
|
|
157
151
|
className = _a.className,
|
|
@@ -179,8 +173,8 @@ var dropdownMenuItemPrefix = getPrefixCls('dropdown-menu-item');
|
|
|
179
173
|
*/
|
|
180
174
|
|
|
181
175
|
var DropdownMenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
182
|
-
var _a$
|
|
183
|
-
prefixCls = _a$
|
|
176
|
+
var _a$prefixCls3 = _a.prefixCls,
|
|
177
|
+
prefixCls = _a$prefixCls3 === void 0 ? dropdownMenuItemPrefix : _a$prefixCls3,
|
|
184
178
|
className = _a.className,
|
|
185
179
|
children = _a.children,
|
|
186
180
|
href = _a.href,
|
|
@@ -190,9 +184,9 @@ var DropdownMenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
190
184
|
menu = _a.menu,
|
|
191
185
|
rest = __rest(_a, ["prefixCls", "role", "className", "children", "href", "value", "target", "disabled", "parents", "menu"]);
|
|
192
186
|
|
|
193
|
-
var
|
|
194
|
-
triggerMethods =
|
|
195
|
-
width =
|
|
187
|
+
var _useDropDownContext = useDropDownContext(),
|
|
188
|
+
triggerMethods = _useDropDownContext.triggerMethods,
|
|
189
|
+
width = _useDropDownContext.width;
|
|
196
190
|
|
|
197
191
|
var _useDropdown = useDropdown(Object.assign(Object.assign({
|
|
198
192
|
popper: {
|
package/lib/esm/Dropdown.js.map
CHANGED
|
@@ -1 +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","
|
|
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","triggerButton","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","renderButton","cloneElement","props","Button","appearance","DownOutlined","style","marginInlineStart","ButtonGroup","DropDownProvider","disabledPortal","__DEV__","displayName","dropdownMenuPrefix","parents","PopperPortal","Children","child","dropdownMenuItemPrefix","parentsProp","useDropDownContext","triggerMethods","width","placement","trigger","shouldUseLink"],"mappings":"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"}
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
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
|
|
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 width: 180px;\n width: var(--hi-v4-dropdown-menu-width, 180px); }\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 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
11
|
|
|
12
12
|
var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
|
|
13
13
|
|
package/lib/esm/use-dropdown.js
CHANGED
|
@@ -17,6 +17,8 @@ import { useTimeout } from '@hi-ui/use-timeout';
|
|
|
17
17
|
import { useUnmountEffect } from '@hi-ui/use-unmount-effect';
|
|
18
18
|
import { getPrefixStyleVar } from '@hi-ui/classname';
|
|
19
19
|
import { mergeRefs } from '@hi-ui/react-utils';
|
|
20
|
+
import { mockDefaultHandlers } from '@hi-ui/dom-utils';
|
|
21
|
+
import { isNumeric } from '@hi-ui/type-assertion';
|
|
20
22
|
var NOOP_ARRAY = [];
|
|
21
23
|
|
|
22
24
|
var useDropdown = function useDropdown(props) {
|
|
@@ -86,41 +88,47 @@ var useDropdown = function useDropdown(props) {
|
|
|
86
88
|
hoveringRef.current = true;
|
|
87
89
|
startOpenTimer();
|
|
88
90
|
});
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
91
|
+
var getTriggerProps = useCallback(function (props, ref) {
|
|
92
|
+
if (props === void 0) {
|
|
93
|
+
props = {};
|
|
94
|
+
}
|
|
93
95
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
+
if (ref === void 0) {
|
|
97
|
+
ref = null;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
var triggerProps = {
|
|
101
|
+
ref: mergeRefs(triggerElementRef, ref),
|
|
102
|
+
disabled: disabled
|
|
103
|
+
};
|
|
104
|
+
/**
|
|
105
|
+
* 事件收集
|
|
106
|
+
* 'click' | 'contextmenu' | 'hover'
|
|
107
|
+
*/
|
|
108
|
+
|
|
109
|
+
triggerMethods.reduce(function (acc, cur) {
|
|
96
110
|
switch (cur) {
|
|
97
111
|
case TriggerActionEnum.HOVER:
|
|
98
|
-
acc.onMouseEnter = handlePopperEnter;
|
|
99
|
-
acc.onMouseLeave = handlePopperLeave;
|
|
112
|
+
acc.onMouseEnter = mockDefaultHandlers(props.onMouseEnter, handlePopperEnter);
|
|
113
|
+
acc.onMouseLeave = mockDefaultHandlers(props.onMouseLeave, handlePopperLeave);
|
|
100
114
|
break;
|
|
101
115
|
|
|
102
116
|
case TriggerActionEnum.CONTEXTMENU:
|
|
103
|
-
acc.onContextMenu = function (evt) {
|
|
117
|
+
acc.onContextMenu = mockDefaultHandlers(props.onContextMenu, function (evt) {
|
|
104
118
|
evt.preventDefault();
|
|
105
119
|
menuVisibleAction.not();
|
|
106
|
-
};
|
|
107
|
-
|
|
120
|
+
});
|
|
108
121
|
break;
|
|
109
122
|
|
|
110
123
|
case TriggerActionEnum.CLICK:
|
|
111
|
-
acc.onClick = menuVisibleAction.not;
|
|
124
|
+
acc.onClick = mockDefaultHandlers(props.onClick, menuVisibleAction.not);
|
|
112
125
|
break;
|
|
113
126
|
}
|
|
114
127
|
|
|
115
128
|
return acc;
|
|
116
|
-
},
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
return Object.assign({
|
|
120
|
-
ref: triggerElementRef,
|
|
121
|
-
disabled: disabled
|
|
122
|
-
}, eventHandler);
|
|
123
|
-
}, [eventHandler, disabled]);
|
|
129
|
+
}, triggerProps);
|
|
130
|
+
return triggerProps;
|
|
131
|
+
}, [disabled, triggerMethods, menuVisibleAction, handlePopperEnter, handlePopperLeave]);
|
|
124
132
|
var rootProps = rest;
|
|
125
133
|
var getMenuProps = useLatestCallback(function (props, ref) {
|
|
126
134
|
var _Object$assign;
|
|
@@ -137,7 +145,7 @@ var useDropdown = function useDropdown(props) {
|
|
|
137
145
|
var menuProps = Object.assign(Object.assign({}, props), {
|
|
138
146
|
ref: mergeRefs(popperElementRef, ref),
|
|
139
147
|
parents: menuParents,
|
|
140
|
-
style: Object.assign(Object.assign({}, props.style), (_Object$assign = {}, _Object$assign[getPrefixStyleVar('dropdown-menu-
|
|
148
|
+
style: Object.assign(Object.assign({}, props.style), (_Object$assign = {}, _Object$assign[getPrefixStyleVar('dropdown-menu-width')] = isNumeric(width) ? width + 'px' : width, _Object$assign)),
|
|
141
149
|
popper: Object.assign(Object.assign(Object.assign({}, popper), props.popper), {
|
|
142
150
|
closeOnOutsideClick: true,
|
|
143
151
|
visible: menuVisible,
|
|
@@ -1 +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","
|
|
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","getTriggerProps","ref","triggerProps","mergeRefs","reduce","acc","cur","onMouseEnter","mockDefaultHandlers","onMouseLeave","CONTEXTMENU","onContextMenu","preventDefault","not","CLICK","onClick","rootProps","getMenuProps","menuParents","concat","menuProps","style","getPrefixStyleVar","isNumeric","closeOnOutsideClick","visible","attachEl","onClose","includes"],"mappings":"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"}
|
package/lib/types/Dropdown.d.ts
CHANGED
|
@@ -1,9 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { HiBaseHTMLProps } from '@hi-ui/core';
|
|
3
|
+
import { PopperPortalProps } from '@hi-ui/popper';
|
|
3
4
|
import { UseDropdownProps } from './use-dropdown';
|
|
4
5
|
import { DropdownDataItem } from './types';
|
|
5
6
|
/**
|
|
6
|
-
*
|
|
7
|
+
* 下拉菜单
|
|
8
|
+
*
|
|
9
|
+
* TODO:
|
|
10
|
+
* 1. 支持自定义icon
|
|
11
|
+
* 2. 支持 titleRender
|
|
12
|
+
* 3. 支持 onClick 阻止默认行为关闭
|
|
7
13
|
*/
|
|
8
14
|
export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement | null>>;
|
|
9
15
|
export interface DropdownProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'>, UseDropdownProps {
|
|
@@ -35,4 +41,17 @@ export interface DropdownProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'>,
|
|
|
35
41
|
* 下拉根元素的类名称
|
|
36
42
|
*/
|
|
37
43
|
overlayClassName?: string;
|
|
44
|
+
/**
|
|
45
|
+
* 自定义下拉菜单触发按钮
|
|
46
|
+
* 注意：自定义按钮需要支持 ref 获取元素 dom 引用 以及 trigger 对应的事件：
|
|
47
|
+
*
|
|
48
|
+
* hover: onMouseEnter \ onMouseLeave
|
|
49
|
+
* click: onClick
|
|
50
|
+
* contextmenu: onContextMenu
|
|
51
|
+
*/
|
|
52
|
+
triggerButton?: React.ReactElement;
|
|
53
|
+
/**
|
|
54
|
+
* 自定义控制 下拉 popper 行为
|
|
55
|
+
*/
|
|
56
|
+
popper?: Omit<PopperPortalProps, 'visible' | 'attachEl'>;
|
|
38
57
|
}
|
|
@@ -14,7 +14,10 @@ export declare const useDropdown: (props: UseDropdownProps) => {
|
|
|
14
14
|
};
|
|
15
15
|
triggerElementRef: React.RefObject<HTMLElement>;
|
|
16
16
|
triggerMethods: TriggerActionEnum[];
|
|
17
|
-
getTriggerProps: () =>
|
|
17
|
+
getTriggerProps: (props?: any, ref?: any) => {
|
|
18
|
+
ref: ((value: HTMLElement | null) => void) | null;
|
|
19
|
+
disabled: boolean;
|
|
20
|
+
};
|
|
18
21
|
getMenuProps: (props?: any, ref?: any) => any;
|
|
19
22
|
};
|
|
20
23
|
export interface UseDropdownProps {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hi-ui/dropdown",
|
|
3
|
-
"version": "4.0.0-alpha.
|
|
3
|
+
"version": "4.0.0-alpha.7",
|
|
4
4
|
"description": "A sub-package for @hi-ui/hiui.",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "HIUI <mi-hiui@xiaomi.com>",
|
|
@@ -43,13 +43,14 @@
|
|
|
43
43
|
"url": "https://github.com/XiaoMi/hiui/issues"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@hi-ui/button": "^4.0.0-alpha.
|
|
46
|
+
"@hi-ui/button": "^4.0.0-alpha.19",
|
|
47
47
|
"@hi-ui/classname": "^4.0.0-alpha.3",
|
|
48
|
-
"@hi-ui/core": "^4.0.0-alpha.
|
|
49
|
-
"@hi-ui/core-css": "^4.0.0-alpha.
|
|
48
|
+
"@hi-ui/core": "^4.0.0-alpha.16",
|
|
49
|
+
"@hi-ui/core-css": "^4.0.0-alpha.12",
|
|
50
|
+
"@hi-ui/dom-utils": "^4.0.0-alpha.6",
|
|
50
51
|
"@hi-ui/env": "^4.0.0-alpha.5",
|
|
51
|
-
"@hi-ui/icons": "^4.0.0-alpha.
|
|
52
|
-
"@hi-ui/popper": "^4.0.0-alpha.
|
|
52
|
+
"@hi-ui/icons": "^4.0.0-alpha.23",
|
|
53
|
+
"@hi-ui/popper": "^4.0.0-alpha.19",
|
|
53
54
|
"@hi-ui/react-utils": "^4.0.0-alpha.6",
|
|
54
55
|
"@hi-ui/type-assertion": "^4.0.0-alpha.13",
|
|
55
56
|
"@hi-ui/use-latest": "^4.0.0-alpha.4",
|
|
@@ -66,5 +67,5 @@
|
|
|
66
67
|
"react": "^17.0.1",
|
|
67
68
|
"react-dom": "^17.0.1"
|
|
68
69
|
},
|
|
69
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "3b991dda3ffcbe843fc06b3c3c781ce870cb7adc"
|
|
70
71
|
}
|