@hi-ui/dropdown 5.0.0-canary.0 → 5.0.0-canary.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +123 -0
- package/lib/cjs/Dropdown.js +29 -14
- package/lib/cjs/styles/index.scss.js +1 -1
- package/lib/esm/Dropdown.js +29 -14
- package/lib/esm/styles/index.scss.js +1 -1
- package/lib/types/Dropdown.d.ts +1 -1
- package/package.json +18 -18
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,128 @@
|
|
|
1
1
|
# @hi-ui/dropdown
|
|
2
2
|
|
|
3
|
+
## 5.0.0-canary.10
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- d1e7ade1e: styles: 主题定制功能完善&&样式变量化写法改造&&兼容 RTL (5.0)
|
|
8
|
+
- Updated dependencies [d1e7ade1e]
|
|
9
|
+
- Updated dependencies [da16450b4]
|
|
10
|
+
- @hi-ui/button@5.0.0-canary.13
|
|
11
|
+
- @hi-ui/popper@5.0.0-canary.12
|
|
12
|
+
- @hi-ui/icons@5.0.0-canary.8
|
|
13
|
+
|
|
14
|
+
## 5.0.0-canary.9
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- 1f9c6e335: perf: 优化全局 size 配置,对于组件中没有的 size 值,取最接近的尺寸展示 (5.0)
|
|
19
|
+
- 22db9cf70: style: fix ui bug (5.0)
|
|
20
|
+
- Updated dependencies [d97cc24eb]
|
|
21
|
+
- Updated dependencies [1f9c6e335]
|
|
22
|
+
- Updated dependencies [22db9cf70]
|
|
23
|
+
- @hi-ui/popper@5.0.0-canary.9
|
|
24
|
+
- @hi-ui/core@5.0.0-canary.6
|
|
25
|
+
- @hi-ui/button@5.0.0-canary.12
|
|
26
|
+
|
|
27
|
+
## 5.0.0-canary.8
|
|
28
|
+
|
|
29
|
+
### Minor Changes
|
|
30
|
+
|
|
31
|
+
- 922686dcc: feat(global-context): 增加 size api 全局配置 (5.0)
|
|
32
|
+
|
|
33
|
+
### Patch Changes
|
|
34
|
+
|
|
35
|
+
- 86877b241: style: 修改样式问题 (5.0)
|
|
36
|
+
- 70f9e99a1: chore(dropdown): 点击选项时阻止 click 事件冒泡 (5.0)
|
|
37
|
+
- Updated dependencies [86877b241]
|
|
38
|
+
- Updated dependencies [922686dcc]
|
|
39
|
+
- Updated dependencies [8e969ad73]
|
|
40
|
+
- @hi-ui/button@5.0.0-canary.11
|
|
41
|
+
- @hi-ui/popper@5.0.0-canary.8
|
|
42
|
+
- @hi-ui/core@5.0.0-canary.5
|
|
43
|
+
- @hi-ui/icons@5.0.0-canary.5
|
|
44
|
+
|
|
45
|
+
## 5.0.0-canary.7
|
|
46
|
+
|
|
47
|
+
### Patch Changes
|
|
48
|
+
|
|
49
|
+
- 1bb79f984: style(dropdown): 增加下拉菜单的最大高度和垂直溢出处理 (5.0)
|
|
50
|
+
|
|
51
|
+
## 5.0.0-canary.6
|
|
52
|
+
|
|
53
|
+
### Patch Changes
|
|
54
|
+
|
|
55
|
+
- efce04a26: fix: 修改 UI 问题 (5.0)
|
|
56
|
+
- Updated dependencies [efce04a26]
|
|
57
|
+
- Updated dependencies [9106dca82]
|
|
58
|
+
- @hi-ui/popper@5.0.0-canary.6
|
|
59
|
+
- @hi-ui/core@5.0.0-canary.3
|
|
60
|
+
- @hi-ui/icons@5.0.0-canary.3
|
|
61
|
+
- @hi-ui/button@5.0.0-canary.8
|
|
62
|
+
|
|
63
|
+
## 5.0.0-canary.5
|
|
64
|
+
|
|
65
|
+
### Patch Changes
|
|
66
|
+
|
|
67
|
+
- chore: rebase master (5.0)
|
|
68
|
+
- Updated dependencies
|
|
69
|
+
- @hi-ui/core@5.0.0-canary.2
|
|
70
|
+
- @hi-ui/use-latest@5.0.0-canary.2
|
|
71
|
+
- @hi-ui/use-timeout@5.0.0-canary.2
|
|
72
|
+
- @hi-ui/use-toggle@5.0.0-canary.2
|
|
73
|
+
- @hi-ui/use-unmount-effect@5.0.0-canary.2
|
|
74
|
+
- @hi-ui/icons@5.0.0-canary.2
|
|
75
|
+
- @hi-ui/button@5.0.0-canary.5
|
|
76
|
+
- @hi-ui/popper@5.0.0-canary.3
|
|
77
|
+
- @hi-ui/classname@5.0.0-canary.2
|
|
78
|
+
- @hi-ui/dom-utils@5.0.0-canary.2
|
|
79
|
+
- @hi-ui/env@5.0.0-canary.2
|
|
80
|
+
- @hi-ui/react-utils@5.0.0-canary.2
|
|
81
|
+
- @hi-ui/type-assertion@5.0.0-canary.2
|
|
82
|
+
|
|
83
|
+
## 5.0.0-canary.4
|
|
84
|
+
|
|
85
|
+
### Patch Changes
|
|
86
|
+
|
|
87
|
+
- 4b09e728b: build: 将 package.json 中 exports 配置中的 types 配置放在最上面 (5.0)
|
|
88
|
+
- Updated dependencies [4b09e728b]
|
|
89
|
+
- @hi-ui/core@5.0.0-canary.1
|
|
90
|
+
- @hi-ui/use-latest@5.0.0-canary.1
|
|
91
|
+
- @hi-ui/use-timeout@5.0.0-canary.1
|
|
92
|
+
- @hi-ui/use-toggle@5.0.0-canary.1
|
|
93
|
+
- @hi-ui/use-unmount-effect@5.0.0-canary.1
|
|
94
|
+
- @hi-ui/icons@5.0.0-canary.1
|
|
95
|
+
- @hi-ui/button@5.0.0-canary.4
|
|
96
|
+
- @hi-ui/popper@5.0.0-canary.2
|
|
97
|
+
- @hi-ui/classname@5.0.0-canary.1
|
|
98
|
+
- @hi-ui/dom-utils@5.0.0-canary.1
|
|
99
|
+
- @hi-ui/env@5.0.0-canary.1
|
|
100
|
+
- @hi-ui/react-utils@5.0.0-canary.1
|
|
101
|
+
- @hi-ui/type-assertion@5.0.0-canary.1
|
|
102
|
+
|
|
103
|
+
## 5.0.0-canary.3
|
|
104
|
+
|
|
105
|
+
### Patch Changes
|
|
106
|
+
|
|
107
|
+
- 0c5923439: style: 修改样式问题 (5.0)
|
|
108
|
+
|
|
109
|
+
## 5.0.0-canary.2
|
|
110
|
+
|
|
111
|
+
### Patch Changes
|
|
112
|
+
|
|
113
|
+
- c3a7005b0: style: 修改 UI 问题 (5.0)
|
|
114
|
+
|
|
115
|
+
## 5.0.0-canary.1
|
|
116
|
+
|
|
117
|
+
### Major Changes
|
|
118
|
+
|
|
119
|
+
- 2451ab789: style(dropdown): 下拉框带边框&圆角改为 6px&size 改为只有 md 尺寸 (5.0)
|
|
120
|
+
|
|
121
|
+
### Patch Changes
|
|
122
|
+
|
|
123
|
+
- Updated dependencies [2451ab789]
|
|
124
|
+
- @hi-ui/popper@5.0.0-canary.1
|
|
125
|
+
|
|
3
126
|
## 5.0.0-canary.0
|
|
4
127
|
|
|
5
128
|
### Major Changes
|
package/lib/cjs/Dropdown.js
CHANGED
|
@@ -17,6 +17,7 @@ var tslib = require('tslib');
|
|
|
17
17
|
var React = require('react');
|
|
18
18
|
var classname = require('@hi-ui/classname');
|
|
19
19
|
var env = require('@hi-ui/env');
|
|
20
|
+
var core = require('@hi-ui/core');
|
|
20
21
|
var popper = require('@hi-ui/popper');
|
|
21
22
|
var context = require('./context.js');
|
|
22
23
|
var useDropdown = require('./use-dropdown.js');
|
|
@@ -38,6 +39,7 @@ var DEFAULT_DATA = [];
|
|
|
38
39
|
* 下拉菜单
|
|
39
40
|
*/
|
|
40
41
|
var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
42
|
+
var _b;
|
|
41
43
|
var _a$prefixCls = _a.prefixCls,
|
|
42
44
|
prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
|
|
43
45
|
_a$role = _a.role,
|
|
@@ -53,25 +55,31 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
53
55
|
_onClick = _a.onClick,
|
|
54
56
|
onButtonClick = _a.onButtonClick,
|
|
55
57
|
overlayClassName = _a.overlayClassName,
|
|
56
|
-
|
|
57
|
-
size = _a$size === void 0 ? 'md' : _a$size,
|
|
58
|
+
sizeProp = _a.size,
|
|
58
59
|
rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "data", "fieldNames", "title", "type", "onClick", "onButtonClick", "overlayClassName", "size"]);
|
|
59
60
|
var transformedData = React.useMemo(function () {
|
|
60
61
|
return index.transformData(data, fieldNames);
|
|
61
62
|
}, [data, fieldNames]);
|
|
62
|
-
var
|
|
63
|
-
rootProps =
|
|
64
|
-
providedValue = tslib.__rest(
|
|
63
|
+
var _c = useDropdown.useDropdown(rest),
|
|
64
|
+
rootProps = _c.rootProps,
|
|
65
|
+
providedValue = tslib.__rest(_c, ["rootProps"]);
|
|
65
66
|
var getMenuProps = providedValue.getMenuProps,
|
|
66
67
|
getTriggerProps = providedValue.getTriggerProps,
|
|
67
68
|
disabled = providedValue.disabled,
|
|
69
|
+
menuVisible = providedValue.menuVisible,
|
|
68
70
|
menuVisibleAction = providedValue.menuVisibleAction;
|
|
69
71
|
var cls = classname.cx(prefixCls, className, disabled && prefixCls + "--disabled");
|
|
72
|
+
var _useGlobalContext = core.useGlobalContext(),
|
|
73
|
+
globalSize = _useGlobalContext.size;
|
|
74
|
+
var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _b !== void 0 ? _b : 'md';
|
|
75
|
+
if (size === 'xs') {
|
|
76
|
+
size = 'sm';
|
|
77
|
+
}
|
|
70
78
|
var dig = function dig(treeData) {
|
|
71
79
|
return treeData.map(function (item) {
|
|
72
80
|
var menu = typeAssertion.isArrayNonEmpty(item.children) ? ( /*#__PURE__*/React__default["default"].createElement(DropdownMenu, {
|
|
73
81
|
overlay: {
|
|
74
|
-
gutterGap:
|
|
82
|
+
gutterGap: 8
|
|
75
83
|
},
|
|
76
84
|
size: size
|
|
77
85
|
}, dig(item.children))) : null;
|
|
@@ -88,7 +96,8 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
88
96
|
target: item.target,
|
|
89
97
|
value: item.id,
|
|
90
98
|
menu: menu,
|
|
91
|
-
onClick: function onClick() {
|
|
99
|
+
onClick: function onClick(evt) {
|
|
100
|
+
evt.stopPropagation();
|
|
92
101
|
if (item.disabled) return;
|
|
93
102
|
_onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id);
|
|
94
103
|
if (!typeAssertion.isArray(item.children)) {
|
|
@@ -105,10 +114,11 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
105
114
|
}
|
|
106
115
|
if (type === 'text' || type === 'button') {
|
|
107
116
|
return /*#__PURE__*/React__default["default"].createElement(Button__default["default"], Object.assign({}, getTriggerProps(), {
|
|
108
|
-
appearance: type === 'button' ? '
|
|
117
|
+
appearance: type === 'button' ? 'line' : 'link'
|
|
109
118
|
}), title, /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, {
|
|
110
119
|
style: {
|
|
111
|
-
marginInlineStart: 2
|
|
120
|
+
marginInlineStart: 2,
|
|
121
|
+
transform: menuVisible ? 'rotate(180deg)' : 'rotate(0)'
|
|
112
122
|
}
|
|
113
123
|
}));
|
|
114
124
|
}
|
|
@@ -118,7 +128,11 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
118
128
|
}, title), /*#__PURE__*/React__default["default"].createElement(Button__default["default"], Object.assign({
|
|
119
129
|
className: classname.cx(prefixCls + "__icon", prefixCls + "__icon-btn-wrap")
|
|
120
130
|
}, getTriggerProps(), {
|
|
121
|
-
icon: /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined,
|
|
131
|
+
icon: /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, {
|
|
132
|
+
style: {
|
|
133
|
+
transform: menuVisible ? 'rotate(180deg)' : 'rotate(0)'
|
|
134
|
+
}
|
|
135
|
+
})
|
|
122
136
|
})));
|
|
123
137
|
}
|
|
124
138
|
return null;
|
|
@@ -132,7 +146,8 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
132
146
|
}, rootProps), renderButton(), typeAssertion.isArrayNonEmpty(transformedData) ? ( /*#__PURE__*/React__default["default"].createElement(DropdownMenu, Object.assign({}, getMenuProps({
|
|
133
147
|
overlay: {
|
|
134
148
|
disabledPortal: false,
|
|
135
|
-
className: overlayClassName
|
|
149
|
+
className: overlayClassName,
|
|
150
|
+
gutterGap: 4
|
|
136
151
|
}
|
|
137
152
|
}), {
|
|
138
153
|
size: size
|
|
@@ -149,8 +164,8 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
149
164
|
parents = _a.parents,
|
|
150
165
|
className = _a.className,
|
|
151
166
|
children = _a.children,
|
|
152
|
-
_a$
|
|
153
|
-
size = _a$
|
|
167
|
+
_a$size = _a.size,
|
|
168
|
+
size = _a$size === void 0 ? 'lg' : _a$size,
|
|
154
169
|
rest = tslib.__rest(_a, ["prefixCls", "role", "overlay", "parents", "className", "children", "size"]);
|
|
155
170
|
var cls = classname.cx(prefixCls, className, prefixCls + "--size-" + size);
|
|
156
171
|
return /*#__PURE__*/React__default["default"].createElement(popper.Popper, Object.assign({}, overlay), /*#__PURE__*/React__default["default"].createElement("ul", Object.assign({
|
|
@@ -202,7 +217,7 @@ var DropdownMenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
202
217
|
className: cls
|
|
203
218
|
}, rootProps), /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
|
|
204
219
|
className: prefixCls + "__trigger"
|
|
205
|
-
}, getTriggerProps()), shouldUseLink ? ( /*#__PURE__*/React__default["default"].createElement("a", {
|
|
220
|
+
}, menu ? getTriggerProps() : {}), shouldUseLink ? ( /*#__PURE__*/React__default["default"].createElement("a", {
|
|
206
221
|
className: prefixCls + "__link",
|
|
207
222
|
href: href,
|
|
208
223
|
target: target
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
|
13
13
|
value: true
|
|
14
14
|
});
|
|
15
|
-
var css_248z = ".hi-v5-dropdown {display: inline-block;}.hi-v5-dropdown-menu {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;background-color: var(--hi-v5-color-static-white, #fff);border-radius: var(--hi-v5-border-radius-
|
|
15
|
+
var css_248z = ".hi-v5-dropdown {display: inline-block;}.hi-v5-dropdown-menu {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;background-color: var(--hi-v5-color-static-white, #fff);border-radius: var(--hi-v5-border-radius-xl, 8px);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #edeff2);font-size: var(--hi-v5-text-size-md, 0.875rem);padding: var(--hi-v5-spacing-2, 4px);color: var(--hi-v5-color-gray-800, #1a1d26);max-height: 268px;overflow-y: auto;width: var(--hi-v5-dropdown-menu-width, 180px);}.hi-v5-dropdown-menu-item {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;margin: var(--hi-v5-spacing-1, 2px) 0 0 0;box-sizing: border-box;overflow: visible;}.hi-v5-dropdown-menu-item:first-child {-webkit-margin-before: 0;margin-block-start: 0;}.hi-v5-dropdown-menu-item__link {color: var(--hi-v5-color-gray-800, #1a1d26);width: 100%;text-decoration: none;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-dropdown-menu-item__arrow {-webkit-transform: rotate(-90deg);transform: rotate(-90deg);}.hi-v5-dropdown-menu-item__trigger {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;height: 100%;cursor: pointer;border-radius: var(--hi-v5-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-v5-dropdown-menu--size-lg .hi-v5-dropdown-menu-item__trigger {padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-4, 8px);}.hi-v5-dropdown-menu--size-md .hi-v5-dropdown-menu-item__trigger {padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-4, 8px);}.hi-v5-dropdown-menu--size-sm .hi-v5-dropdown-menu-item__trigger {padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-4, 8px);}.hi-v5-dropdown-menu-item:not(.hi-v5-dropdown-menu-item--disabled) > .hi-v5-dropdown-menu-item__trigger:hover {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-dropdown-menu-item--active:not(.hi-v5-dropdown-menu-item--disabled) > .hi-v5-dropdown-menu-item__trigger {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-dropdown-menu-item--disabled > .hi-v5-dropdown-menu-item__trigger {cursor: not-allowed;color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-dropdown-divider {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;background-color: var(--hi-v5-color-gray-300, #e6e8eb);width: 100%;height: 1px;margin: var(--hi-v5-spacing-4, 8px) 0;}";
|
|
16
16
|
var __styleInject__ = require('@hi-ui/style-inject')["default"];
|
|
17
17
|
__styleInject__(css_248z);
|
|
18
18
|
exports["default"] = css_248z;
|
package/lib/esm/Dropdown.js
CHANGED
|
@@ -11,6 +11,7 @@ import { __rest } from 'tslib';
|
|
|
11
11
|
import React, { forwardRef, useMemo, cloneElement } from 'react';
|
|
12
12
|
import { getPrefixCls, cx } from '@hi-ui/classname';
|
|
13
13
|
import { __DEV__ } from '@hi-ui/env';
|
|
14
|
+
import { useGlobalContext } from '@hi-ui/core';
|
|
14
15
|
import { Popper } from '@hi-ui/popper';
|
|
15
16
|
import { DropDownProvider, useDropDownContext } from './context.js';
|
|
16
17
|
import { useDropdown } from './use-dropdown.js';
|
|
@@ -25,6 +26,7 @@ var DEFAULT_DATA = [];
|
|
|
25
26
|
* 下拉菜单
|
|
26
27
|
*/
|
|
27
28
|
var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
29
|
+
var _b;
|
|
28
30
|
var _a$prefixCls = _a.prefixCls,
|
|
29
31
|
prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
|
|
30
32
|
_a$role = _a.role,
|
|
@@ -40,25 +42,31 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
40
42
|
_onClick = _a.onClick,
|
|
41
43
|
onButtonClick = _a.onButtonClick,
|
|
42
44
|
overlayClassName = _a.overlayClassName,
|
|
43
|
-
|
|
44
|
-
size = _a$size === void 0 ? 'md' : _a$size,
|
|
45
|
+
sizeProp = _a.size,
|
|
45
46
|
rest = __rest(_a, ["prefixCls", "role", "className", "children", "data", "fieldNames", "title", "type", "onClick", "onButtonClick", "overlayClassName", "size"]);
|
|
46
47
|
var transformedData = useMemo(function () {
|
|
47
48
|
return transformData(data, fieldNames);
|
|
48
49
|
}, [data, fieldNames]);
|
|
49
|
-
var
|
|
50
|
-
rootProps =
|
|
51
|
-
providedValue = __rest(
|
|
50
|
+
var _c = useDropdown(rest),
|
|
51
|
+
rootProps = _c.rootProps,
|
|
52
|
+
providedValue = __rest(_c, ["rootProps"]);
|
|
52
53
|
var getMenuProps = providedValue.getMenuProps,
|
|
53
54
|
getTriggerProps = providedValue.getTriggerProps,
|
|
54
55
|
disabled = providedValue.disabled,
|
|
56
|
+
menuVisible = providedValue.menuVisible,
|
|
55
57
|
menuVisibleAction = providedValue.menuVisibleAction;
|
|
56
58
|
var cls = cx(prefixCls, className, disabled && prefixCls + "--disabled");
|
|
59
|
+
var _useGlobalContext = useGlobalContext(),
|
|
60
|
+
globalSize = _useGlobalContext.size;
|
|
61
|
+
var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _b !== void 0 ? _b : 'md';
|
|
62
|
+
if (size === 'xs') {
|
|
63
|
+
size = 'sm';
|
|
64
|
+
}
|
|
57
65
|
var dig = function dig(treeData) {
|
|
58
66
|
return treeData.map(function (item) {
|
|
59
67
|
var menu = isArrayNonEmpty(item.children) ? ( /*#__PURE__*/React.createElement(DropdownMenu, {
|
|
60
68
|
overlay: {
|
|
61
|
-
gutterGap:
|
|
69
|
+
gutterGap: 8
|
|
62
70
|
},
|
|
63
71
|
size: size
|
|
64
72
|
}, dig(item.children))) : null;
|
|
@@ -75,7 +83,8 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
75
83
|
target: item.target,
|
|
76
84
|
value: item.id,
|
|
77
85
|
menu: menu,
|
|
78
|
-
onClick: function onClick() {
|
|
86
|
+
onClick: function onClick(evt) {
|
|
87
|
+
evt.stopPropagation();
|
|
79
88
|
if (item.disabled) return;
|
|
80
89
|
_onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id);
|
|
81
90
|
if (!isArray(item.children)) {
|
|
@@ -92,10 +101,11 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
92
101
|
}
|
|
93
102
|
if (type === 'text' || type === 'button') {
|
|
94
103
|
return /*#__PURE__*/React.createElement(Button, Object.assign({}, getTriggerProps(), {
|
|
95
|
-
appearance: type === 'button' ? '
|
|
104
|
+
appearance: type === 'button' ? 'line' : 'link'
|
|
96
105
|
}), title, /*#__PURE__*/React.createElement(DownOutlined, {
|
|
97
106
|
style: {
|
|
98
|
-
marginInlineStart: 2
|
|
107
|
+
marginInlineStart: 2,
|
|
108
|
+
transform: menuVisible ? 'rotate(180deg)' : 'rotate(0)'
|
|
99
109
|
}
|
|
100
110
|
}));
|
|
101
111
|
}
|
|
@@ -105,7 +115,11 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
105
115
|
}, title), /*#__PURE__*/React.createElement(Button, Object.assign({
|
|
106
116
|
className: cx(prefixCls + "__icon", prefixCls + "__icon-btn-wrap")
|
|
107
117
|
}, getTriggerProps(), {
|
|
108
|
-
icon: /*#__PURE__*/React.createElement(DownOutlined,
|
|
118
|
+
icon: /*#__PURE__*/React.createElement(DownOutlined, {
|
|
119
|
+
style: {
|
|
120
|
+
transform: menuVisible ? 'rotate(180deg)' : 'rotate(0)'
|
|
121
|
+
}
|
|
122
|
+
})
|
|
109
123
|
})));
|
|
110
124
|
}
|
|
111
125
|
return null;
|
|
@@ -119,7 +133,8 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
119
133
|
}, rootProps), renderButton(), isArrayNonEmpty(transformedData) ? ( /*#__PURE__*/React.createElement(DropdownMenu, Object.assign({}, getMenuProps({
|
|
120
134
|
overlay: {
|
|
121
135
|
disabledPortal: false,
|
|
122
|
-
className: overlayClassName
|
|
136
|
+
className: overlayClassName,
|
|
137
|
+
gutterGap: 4
|
|
123
138
|
}
|
|
124
139
|
}), {
|
|
125
140
|
size: size
|
|
@@ -136,8 +151,8 @@ var DropdownMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
136
151
|
parents = _a.parents,
|
|
137
152
|
className = _a.className,
|
|
138
153
|
children = _a.children,
|
|
139
|
-
_a$
|
|
140
|
-
size = _a$
|
|
154
|
+
_a$size = _a.size,
|
|
155
|
+
size = _a$size === void 0 ? 'lg' : _a$size,
|
|
141
156
|
rest = __rest(_a, ["prefixCls", "role", "overlay", "parents", "className", "children", "size"]);
|
|
142
157
|
var cls = cx(prefixCls, className, prefixCls + "--size-" + size);
|
|
143
158
|
return /*#__PURE__*/React.createElement(Popper, Object.assign({}, overlay), /*#__PURE__*/React.createElement("ul", Object.assign({
|
|
@@ -189,7 +204,7 @@ var DropdownMenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
189
204
|
className: cls
|
|
190
205
|
}, rootProps), /*#__PURE__*/React.createElement("div", Object.assign({
|
|
191
206
|
className: prefixCls + "__trigger"
|
|
192
|
-
}, getTriggerProps()), shouldUseLink ? ( /*#__PURE__*/React.createElement("a", {
|
|
207
|
+
}, menu ? getTriggerProps() : {}), shouldUseLink ? ( /*#__PURE__*/React.createElement("a", {
|
|
193
208
|
className: prefixCls + "__link",
|
|
194
209
|
href: href,
|
|
195
210
|
target: target
|
|
@@ -8,6 +8,6 @@
|
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
9
|
*/
|
|
10
10
|
import __styleInject__ from '@hi-ui/style-inject';
|
|
11
|
-
var css_248z = ".hi-v5-dropdown {display: inline-block;}.hi-v5-dropdown-menu {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;background-color: var(--hi-v5-color-static-white, #fff);border-radius: var(--hi-v5-border-radius-
|
|
11
|
+
var css_248z = ".hi-v5-dropdown {display: inline-block;}.hi-v5-dropdown-menu {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;background-color: var(--hi-v5-color-static-white, #fff);border-radius: var(--hi-v5-border-radius-xl, 8px);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #edeff2);font-size: var(--hi-v5-text-size-md, 0.875rem);padding: var(--hi-v5-spacing-2, 4px);color: var(--hi-v5-color-gray-800, #1a1d26);max-height: 268px;overflow-y: auto;width: var(--hi-v5-dropdown-menu-width, 180px);}.hi-v5-dropdown-menu-item {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;margin: var(--hi-v5-spacing-1, 2px) 0 0 0;box-sizing: border-box;overflow: visible;}.hi-v5-dropdown-menu-item:first-child {-webkit-margin-before: 0;margin-block-start: 0;}.hi-v5-dropdown-menu-item__link {color: var(--hi-v5-color-gray-800, #1a1d26);width: 100%;text-decoration: none;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-dropdown-menu-item__arrow {-webkit-transform: rotate(-90deg);transform: rotate(-90deg);}.hi-v5-dropdown-menu-item__trigger {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;height: 100%;cursor: pointer;border-radius: var(--hi-v5-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-v5-dropdown-menu--size-lg .hi-v5-dropdown-menu-item__trigger {padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-4, 8px);}.hi-v5-dropdown-menu--size-md .hi-v5-dropdown-menu-item__trigger {padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-4, 8px);}.hi-v5-dropdown-menu--size-sm .hi-v5-dropdown-menu-item__trigger {padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-4, 8px);}.hi-v5-dropdown-menu-item:not(.hi-v5-dropdown-menu-item--disabled) > .hi-v5-dropdown-menu-item__trigger:hover {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-dropdown-menu-item--active:not(.hi-v5-dropdown-menu-item--disabled) > .hi-v5-dropdown-menu-item__trigger {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-dropdown-menu-item--disabled > .hi-v5-dropdown-menu-item__trigger {cursor: not-allowed;color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-dropdown-divider {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;background-color: var(--hi-v5-color-gray-300, #e6e8eb);width: 100%;height: 1px;margin: var(--hi-v5-spacing-4, 8px) 0;}";
|
|
12
12
|
__styleInject__(css_248z);
|
|
13
13
|
export { css_248z as default };
|
package/lib/types/Dropdown.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hi-ui/dropdown",
|
|
3
|
-
"version": "5.0.0-canary.
|
|
3
|
+
"version": "5.0.0-canary.10",
|
|
4
4
|
"description": "A sub-package for @hi-ui/hiui.",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "HiUI <mi-hiui@xiaomi.com>",
|
|
@@ -19,9 +19,9 @@
|
|
|
19
19
|
"typings": "lib/types/index.d.ts",
|
|
20
20
|
"exports": {
|
|
21
21
|
".": {
|
|
22
|
+
"types": "./lib/types/index.d.ts",
|
|
22
23
|
"require": "./lib/cjs/index.js",
|
|
23
|
-
"default": "./lib/esm/index.js"
|
|
24
|
-
"types": "./lib/types/index.d.ts"
|
|
24
|
+
"default": "./lib/esm/index.js"
|
|
25
25
|
}
|
|
26
26
|
},
|
|
27
27
|
"publishConfig": {
|
|
@@ -44,27 +44,27 @@
|
|
|
44
44
|
"url": "https://github.com/XiaoMi/hiui/issues"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@hi-ui/button": "^5.0.0-canary.
|
|
48
|
-
"@hi-ui/classname": "^5.0.0-canary.
|
|
49
|
-
"@hi-ui/dom-utils": "^5.0.0-canary.
|
|
50
|
-
"@hi-ui/env": "^5.0.0-canary.
|
|
51
|
-
"@hi-ui/icons": "^5.0.0-canary.
|
|
52
|
-
"@hi-ui/popper": "^5.0.0-canary.
|
|
53
|
-
"@hi-ui/react-utils": "^5.0.0-canary.
|
|
54
|
-
"@hi-ui/type-assertion": "^5.0.0-canary.
|
|
55
|
-
"@hi-ui/use-latest": "^5.0.0-canary.
|
|
56
|
-
"@hi-ui/use-timeout": "^5.0.0-canary.
|
|
57
|
-
"@hi-ui/use-toggle": "^5.0.0-canary.
|
|
58
|
-
"@hi-ui/use-unmount-effect": "^5.0.0-canary.
|
|
47
|
+
"@hi-ui/button": "^5.0.0-canary.13",
|
|
48
|
+
"@hi-ui/classname": "^5.0.0-canary.2",
|
|
49
|
+
"@hi-ui/dom-utils": "^5.0.0-canary.2",
|
|
50
|
+
"@hi-ui/env": "^5.0.0-canary.2",
|
|
51
|
+
"@hi-ui/icons": "^5.0.0-canary.8",
|
|
52
|
+
"@hi-ui/popper": "^5.0.0-canary.12",
|
|
53
|
+
"@hi-ui/react-utils": "^5.0.0-canary.2",
|
|
54
|
+
"@hi-ui/type-assertion": "^5.0.0-canary.2",
|
|
55
|
+
"@hi-ui/use-latest": "^5.0.0-canary.2",
|
|
56
|
+
"@hi-ui/use-timeout": "^5.0.0-canary.2",
|
|
57
|
+
"@hi-ui/use-toggle": "^5.0.0-canary.2",
|
|
58
|
+
"@hi-ui/use-unmount-effect": "^5.0.0-canary.2"
|
|
59
59
|
},
|
|
60
60
|
"peerDependencies": {
|
|
61
|
-
"@hi-ui/core": ">=5.0.0-canary.
|
|
61
|
+
"@hi-ui/core": ">=5.0.0-canary.6",
|
|
62
62
|
"react": ">=16.8.6",
|
|
63
63
|
"react-dom": ">=16.8.6"
|
|
64
64
|
},
|
|
65
65
|
"devDependencies": {
|
|
66
|
-
"@hi-ui/core": "^5.0.0-canary.
|
|
67
|
-
"@hi-ui/core-css": "^5.0.0-canary.
|
|
66
|
+
"@hi-ui/core": "^5.0.0-canary.6",
|
|
67
|
+
"@hi-ui/core-css": "^5.0.0-canary.9",
|
|
68
68
|
"react": "^17.0.1",
|
|
69
69
|
"react-dom": "^17.0.1"
|
|
70
70
|
}
|