@hi-ui/tabs 4.1.1 → 4.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +35 -0
- package/lib/cjs/TabInk.js +7 -19
- package/lib/cjs/TabItem.js +33 -56
- package/lib/cjs/TabList.js +64 -107
- package/lib/cjs/TabPane.js +10 -27
- package/lib/cjs/Tabs.js +39 -59
- package/lib/cjs/hooks/index.js +5 -14
- package/lib/cjs/index.js +0 -5
- package/lib/cjs/styles/index.scss.js +0 -3
- package/lib/cjs/utils/index.js +0 -5
- package/lib/esm/TabInk.js +5 -11
- package/lib/esm/TabItem.js +31 -46
- package/lib/esm/TabList.js +62 -88
- package/lib/esm/TabPane.js +8 -17
- package/lib/esm/Tabs.js +37 -46
- package/lib/esm/hooks/index.js +5 -10
- package/lib/esm/index.js +1 -3
- package/lib/esm/styles/index.scss.js +0 -2
- package/lib/esm/utils/index.js +0 -4
- package/package.json +13 -13
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,40 @@
|
|
|
1
1
|
# @hi-ui/tabs
|
|
2
2
|
|
|
3
|
+
## 4.1.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- fix: 修复 rollup3 打包 cjs 模块问题
|
|
8
|
+
- Updated dependencies
|
|
9
|
+
- @hi-ui/env@4.0.3
|
|
10
|
+
- @hi-ui/core@4.0.7
|
|
11
|
+
- @hi-ui/use-latest@4.0.3
|
|
12
|
+
- @hi-ui/use-uncontrolled-state@4.0.3
|
|
13
|
+
- @hi-ui/use-unmount-effect@4.0.3
|
|
14
|
+
- @hi-ui/icons@4.0.17
|
|
15
|
+
- @hi-ui/icon-button@4.0.7
|
|
16
|
+
- @hi-ui/classname@4.0.3
|
|
17
|
+
- @hi-ui/react-utils@4.0.3
|
|
18
|
+
- @hi-ui/type-assertion@4.0.3
|
|
19
|
+
|
|
20
|
+
## 4.1.2
|
|
21
|
+
|
|
22
|
+
### Patch Changes
|
|
23
|
+
|
|
24
|
+
- [#2672](https://github.com/XiaoMi/hiui/pull/2672) [`1ebe27830`](https://github.com/XiaoMi/hiui/commit/1ebe2783098b3a8cd980bd10076d67635463800e) Thanks [@zyprepare](https://github.com/zyprepare)! - build: 升级到 rollup3,重新构建发布组件
|
|
25
|
+
|
|
26
|
+
- Updated dependencies [[`1ebe27830`](https://github.com/XiaoMi/hiui/commit/1ebe2783098b3a8cd980bd10076d67635463800e)]:
|
|
27
|
+
- @hi-ui/core@4.0.6
|
|
28
|
+
- @hi-ui/use-latest@4.0.2
|
|
29
|
+
- @hi-ui/use-uncontrolled-state@4.0.2
|
|
30
|
+
- @hi-ui/use-unmount-effect@4.0.2
|
|
31
|
+
- @hi-ui/icons@4.0.16
|
|
32
|
+
- @hi-ui/icon-button@4.0.6
|
|
33
|
+
- @hi-ui/classname@4.0.2
|
|
34
|
+
- @hi-ui/env@4.0.2
|
|
35
|
+
- @hi-ui/react-utils@4.0.2
|
|
36
|
+
- @hi-ui/type-assertion@4.0.2
|
|
37
|
+
|
|
3
38
|
## 4.1.1
|
|
4
39
|
|
|
5
40
|
### Patch Changes
|
package/lib/cjs/TabInk.js
CHANGED
|
@@ -10,34 +10,26 @@
|
|
|
10
10
|
'use strict';
|
|
11
11
|
|
|
12
12
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
13
|
-
|
|
14
13
|
Object.defineProperty(exports, '__esModule', {
|
|
15
14
|
value: true
|
|
16
15
|
});
|
|
17
|
-
|
|
18
16
|
var React = require('react');
|
|
19
|
-
|
|
20
17
|
var classname = require('@hi-ui/classname');
|
|
21
|
-
|
|
22
18
|
var index = require('./hooks/index.js');
|
|
23
|
-
|
|
24
|
-
function _interopDefaultLegacy(e) {
|
|
19
|
+
function _interopDefaultCompat(e) {
|
|
25
20
|
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
26
21
|
'default': e
|
|
27
22
|
};
|
|
28
23
|
}
|
|
29
|
-
|
|
30
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
31
|
-
|
|
24
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
32
25
|
var TabInk = function TabInk(_ref) {
|
|
33
26
|
var _cx;
|
|
34
|
-
|
|
35
27
|
var disabled = _ref.disabled,
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
28
|
+
prefixCls = _ref.prefixCls,
|
|
29
|
+
activeItemElement = _ref.activeItemElement,
|
|
30
|
+
activeTabId = _ref.activeTabId,
|
|
31
|
+
getTabOffset = _ref.getTabOffset,
|
|
32
|
+
showHorizontal = _ref.showHorizontal;
|
|
41
33
|
var inkRef = React.useRef(null);
|
|
42
34
|
var setTabLnkPositionStyle = React.useCallback(function () {
|
|
43
35
|
if (!inkRef.current) return;
|
|
@@ -45,9 +37,7 @@ var TabInk = function TabInk(_ref) {
|
|
|
45
37
|
var computedStyle = getComputedStyle(activeItemElement);
|
|
46
38
|
var itemRect = activeItemElement.getBoundingClientRect();
|
|
47
39
|
var offset = getTabOffset(activeTabId);
|
|
48
|
-
|
|
49
40
|
var _style;
|
|
50
|
-
|
|
51
41
|
if (!showHorizontal) {
|
|
52
42
|
var paddingTop = parseFloat(computedStyle.getPropertyValue('padding-top'));
|
|
53
43
|
var paddingBottom = parseFloat(computedStyle.getPropertyValue('padding-bottom'));
|
|
@@ -68,7 +58,6 @@ var TabInk = function TabInk(_ref) {
|
|
|
68
58
|
height: ''
|
|
69
59
|
};
|
|
70
60
|
}
|
|
71
|
-
|
|
72
61
|
Object.assign(inkRef.current.style, _style);
|
|
73
62
|
}, [activeItemElement, activeTabId, getTabOffset, showHorizontal]);
|
|
74
63
|
React.useEffect(function () {
|
|
@@ -87,5 +76,4 @@ var TabInk = function TabInk(_ref) {
|
|
|
87
76
|
ref: inkRef
|
|
88
77
|
});
|
|
89
78
|
};
|
|
90
|
-
|
|
91
79
|
exports.TabInk = TabInk;
|
package/lib/cjs/TabItem.js
CHANGED
|
@@ -10,69 +10,56 @@
|
|
|
10
10
|
'use strict';
|
|
11
11
|
|
|
12
12
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
13
|
-
|
|
14
13
|
Object.defineProperty(exports, '__esModule', {
|
|
15
14
|
value: true
|
|
16
15
|
});
|
|
17
|
-
|
|
18
16
|
var React = require('react');
|
|
19
|
-
|
|
20
17
|
var classname = require('@hi-ui/classname');
|
|
21
|
-
|
|
22
18
|
var env = require('@hi-ui/env');
|
|
23
|
-
|
|
24
19
|
var icons = require('@hi-ui/icons');
|
|
25
|
-
|
|
26
|
-
function _interopDefaultLegacy(e) {
|
|
20
|
+
function _interopDefaultCompat(e) {
|
|
27
21
|
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
28
22
|
'default': e
|
|
29
23
|
};
|
|
30
24
|
}
|
|
31
|
-
|
|
32
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
33
|
-
|
|
25
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
34
26
|
var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
35
27
|
var _cx;
|
|
36
|
-
|
|
37
28
|
var className = _ref.className,
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
29
|
+
style = _ref.style,
|
|
30
|
+
disabled = _ref.disabled,
|
|
31
|
+
tabTitle = _ref.tabTitle,
|
|
32
|
+
tabDesc = _ref.tabDesc,
|
|
33
|
+
prefixCls = _ref.prefixCls,
|
|
34
|
+
tabId = _ref.tabId,
|
|
35
|
+
onTabClick = _ref.onTabClick,
|
|
36
|
+
active = _ref.active,
|
|
37
|
+
editable = _ref.editable,
|
|
38
|
+
onDelete = _ref.onDelete,
|
|
39
|
+
index = _ref.index,
|
|
40
|
+
_onDragStart = _ref.onDragStart,
|
|
41
|
+
_onDragOver = _ref.onDragOver,
|
|
42
|
+
_onDrop = _ref.onDrop,
|
|
43
|
+
_onDragEnd = _ref.onDragEnd,
|
|
44
|
+
itemRef = _ref.itemRef,
|
|
45
|
+
draggable = _ref.draggable,
|
|
46
|
+
_ref$type = _ref.type,
|
|
47
|
+
type = _ref$type === void 0 ? 'line' : _ref$type,
|
|
48
|
+
_ref$closeable = _ref.closeable,
|
|
49
|
+
closeable = _ref$closeable === void 0 ? true : _ref$closeable,
|
|
50
|
+
_ref$direction = _ref.direction,
|
|
51
|
+
layout = _ref$direction === void 0 ? 'horizontal' : _ref$direction;
|
|
62
52
|
var _useState = React.useState(null),
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
53
|
+
dragId = _useState[0],
|
|
54
|
+
setDragId = _useState[1];
|
|
66
55
|
var _useState2 = React.useState(null),
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
56
|
+
direction = _useState2[0],
|
|
57
|
+
setDirection = _useState2[1];
|
|
70
58
|
var _onClick = React.useCallback(function (e) {
|
|
71
59
|
if (onTabClick) {
|
|
72
60
|
onTabClick(tabId, e);
|
|
73
61
|
}
|
|
74
62
|
}, [onTabClick, tabId]);
|
|
75
|
-
|
|
76
63
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
77
64
|
style: style,
|
|
78
65
|
className: classname.cx(prefixCls + "__item", className, (_cx = {}, _cx[prefixCls + "__item--active"] = active, _cx[prefixCls + "__item--disabled"] = disabled, _cx[prefixCls + "__item--" + direction] = direction, _cx)),
|
|
@@ -87,7 +74,6 @@ var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
87
74
|
tabTitle: tabTitle
|
|
88
75
|
}));
|
|
89
76
|
setDragId(tabId);
|
|
90
|
-
|
|
91
77
|
if (_onDragStart) {
|
|
92
78
|
_onDragStart(e, {
|
|
93
79
|
dragNode: {
|
|
@@ -102,7 +88,6 @@ var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
102
88
|
e.stopPropagation();
|
|
103
89
|
e.dataTransfer.clearData();
|
|
104
90
|
setDragId(null);
|
|
105
|
-
|
|
106
91
|
if (_onDragEnd) {
|
|
107
92
|
_onDragEnd(e, {
|
|
108
93
|
dragNode: {
|
|
@@ -120,15 +105,13 @@ var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
120
105
|
onDragOver: function onDragOver(e) {
|
|
121
106
|
e.preventDefault();
|
|
122
107
|
e.stopPropagation();
|
|
123
|
-
|
|
124
108
|
if (dragId !== tabId && itemRef) {
|
|
125
109
|
var targetBoundingRect = itemRef.getBoundingClientRect();
|
|
126
110
|
var hoverTargetSortY = (targetBoundingRect.bottom - targetBoundingRect.top) / 2;
|
|
127
|
-
var hoverTargetSortX = (targetBoundingRect.right - targetBoundingRect.left) / 2;
|
|
128
|
-
|
|
111
|
+
var hoverTargetSortX = (targetBoundingRect.right - targetBoundingRect.left) / 2;
|
|
112
|
+
// 鼠标垂直移动距离
|
|
129
113
|
var hoverClientY = e.clientY - targetBoundingRect.top;
|
|
130
114
|
var hoverClientX = e.clientX - targetBoundingRect.left;
|
|
131
|
-
|
|
132
115
|
if (layout === 'vertical') {
|
|
133
116
|
if (hoverClientY < hoverTargetSortY) {
|
|
134
117
|
setDirection('prev');
|
|
@@ -143,7 +126,6 @@ var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
143
126
|
}
|
|
144
127
|
}
|
|
145
128
|
}
|
|
146
|
-
|
|
147
129
|
if (_onDragOver) {
|
|
148
130
|
_onDragOver(e, {
|
|
149
131
|
targetNode: {
|
|
@@ -157,10 +139,8 @@ var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
157
139
|
e.preventDefault();
|
|
158
140
|
e.stopPropagation();
|
|
159
141
|
setDirection(null);
|
|
160
|
-
|
|
161
142
|
if (_onDrop && dragId !== tabId) {
|
|
162
143
|
var passedData = JSON.parse(e.dataTransfer.getData('tab'));
|
|
163
|
-
|
|
164
144
|
_onDrop(e, {
|
|
165
145
|
dragNode: {
|
|
166
146
|
tabId: tabId,
|
|
@@ -178,11 +158,10 @@ var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
178
158
|
className: prefixCls + "-item__title"
|
|
179
159
|
}, tabTitle), type === 'desc' && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
180
160
|
className: prefixCls + "-item__desc"
|
|
181
|
-
}, tabDesc), editable && closeable && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
161
|
+
}, tabDesc), editable && closeable && ( /*#__PURE__*/React__default["default"].createElement("span", {
|
|
182
162
|
className: prefixCls + "__close-btn",
|
|
183
163
|
onClick: function onClick(e) {
|
|
184
164
|
e.stopPropagation();
|
|
185
|
-
|
|
186
165
|
if (onDelete) {
|
|
187
166
|
onDelete({
|
|
188
167
|
tabId: tabId,
|
|
@@ -190,11 +169,9 @@ var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
190
169
|
}, index);
|
|
191
170
|
}
|
|
192
171
|
}
|
|
193
|
-
}, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutlined, null)));
|
|
172
|
+
}, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutlined, null))));
|
|
194
173
|
});
|
|
195
|
-
|
|
196
174
|
if (env.__DEV__) {
|
|
197
175
|
TabItem.displayName = 'TabItem';
|
|
198
176
|
}
|
|
199
|
-
|
|
200
177
|
exports.TabItem = TabItem;
|
package/lib/cjs/TabList.js
CHANGED
|
@@ -10,128 +10,94 @@
|
|
|
10
10
|
'use strict';
|
|
11
11
|
|
|
12
12
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
13
|
-
|
|
14
13
|
Object.defineProperty(exports, '__esModule', {
|
|
15
14
|
value: true
|
|
16
15
|
});
|
|
17
|
-
|
|
18
16
|
var tslib = require('tslib');
|
|
19
|
-
|
|
20
17
|
var React = require('react');
|
|
21
|
-
|
|
22
18
|
var env = require('@hi-ui/env');
|
|
23
|
-
|
|
24
19
|
var TabItem = require('./TabItem.js');
|
|
25
|
-
|
|
26
20
|
var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
|
|
27
|
-
|
|
28
21
|
var classname = require('@hi-ui/classname');
|
|
29
|
-
|
|
30
22
|
var TabInk = require('./TabInk.js');
|
|
31
|
-
|
|
32
23
|
var icons = require('@hi-ui/icons');
|
|
33
|
-
|
|
34
24
|
var typeAssertion = require('@hi-ui/type-assertion');
|
|
35
|
-
|
|
36
25
|
var iconButton = require('@hi-ui/icon-button');
|
|
37
|
-
|
|
38
26
|
var index = require('./hooks/index.js');
|
|
39
|
-
|
|
40
27
|
var useLatest = require('@hi-ui/use-latest');
|
|
41
|
-
|
|
42
28
|
var index$1 = require('./utils/index.js');
|
|
43
|
-
|
|
44
|
-
function _interopDefaultLegacy(e) {
|
|
29
|
+
function _interopDefaultCompat(e) {
|
|
45
30
|
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
46
31
|
'default': e
|
|
47
32
|
};
|
|
48
33
|
}
|
|
49
|
-
|
|
50
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
51
|
-
|
|
34
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
52
35
|
var _role = 'tabs';
|
|
53
|
-
|
|
54
36
|
var _prefix = classname.getPrefixCls(_role);
|
|
55
|
-
|
|
56
37
|
var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
57
38
|
var _cx;
|
|
58
|
-
|
|
59
39
|
var _b;
|
|
60
|
-
|
|
61
40
|
var data = _a.data,
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
41
|
+
className = _a.className,
|
|
42
|
+
style = _a.style,
|
|
43
|
+
activeId = _a.activeId,
|
|
44
|
+
defaultActiveId = _a.defaultActiveId,
|
|
45
|
+
onChange = _a.onChange,
|
|
46
|
+
onTabClick = _a.onTabClick,
|
|
47
|
+
_a$prefixCls = _a.prefixCls,
|
|
48
|
+
prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
|
|
49
|
+
directionProp = _a.direction,
|
|
50
|
+
_a$placement = _a.placement,
|
|
51
|
+
placement = _a$placement === void 0 ? 'horizontal' : _a$placement,
|
|
52
|
+
editable = _a.editable,
|
|
53
|
+
onAdd = _a.onAdd,
|
|
54
|
+
onDelete = _a.onDelete,
|
|
55
|
+
draggable = _a.draggable,
|
|
56
|
+
onDragStart = _a.onDragStart,
|
|
57
|
+
onDragOver = _a.onDragOver,
|
|
58
|
+
onDrop = _a.onDrop,
|
|
59
|
+
onDragEnd = _a.onDragEnd,
|
|
60
|
+
_a$type = _a.type,
|
|
61
|
+
type = _a$type === void 0 ? 'line' : _a$type,
|
|
62
|
+
extra = _a.extra,
|
|
63
|
+
rest = tslib.__rest(_a, ["data", "className", "style", "activeId", "defaultActiveId", "onChange", "onTabClick", "prefixCls", "direction", "placement", "editable", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDrop", "onDragEnd", "type", "extra"]);
|
|
86
64
|
var direction = (_b = placement !== null && placement !== void 0 ? placement : directionProp) !== null && _b !== void 0 ? _b : 'horizontal';
|
|
87
|
-
|
|
88
65
|
var _useUncontrolledState = useUncontrolledState.useUncontrolledState(function () {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
setActiveTabId = _useUncontrolledState[1];
|
|
97
|
-
|
|
66
|
+
if (typeAssertion.isUndef(defaultActiveId)) {
|
|
67
|
+
return data[0] ? data[0].tabId : '';
|
|
68
|
+
}
|
|
69
|
+
return defaultActiveId;
|
|
70
|
+
}, activeId, onChange, Object.is),
|
|
71
|
+
activeTabId = _useUncontrolledState[0],
|
|
72
|
+
setActiveTabId = _useUncontrolledState[1];
|
|
98
73
|
var _useState = React.useState(null),
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
74
|
+
innerElement = _useState[0],
|
|
75
|
+
setInnerElement = _useState[1];
|
|
102
76
|
var _useState2 = React.useState(null),
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
77
|
+
scrollElement = _useState2[0],
|
|
78
|
+
setScrollElement = _useState2[1];
|
|
106
79
|
var showHorizontal = direction === 'horizontal';
|
|
107
80
|
var getClientSize = React.useCallback(function (element) {
|
|
108
81
|
return showHorizontal ? element.clientWidth : element.clientHeight;
|
|
109
82
|
}, [showHorizontal]);
|
|
110
|
-
|
|
111
83
|
var _useState3 = React.useState(0),
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
84
|
+
translatePos = _useState3[0],
|
|
85
|
+
setTranslatePos = _useState3[1];
|
|
115
86
|
var _useState4 = React.useState(0),
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
87
|
+
translateBoundPos = _useState4[0],
|
|
88
|
+
setTranslateBoundPos = _useState4[1];
|
|
119
89
|
var itemsRef = React.useRef({});
|
|
120
|
-
|
|
121
90
|
var _useState5 = React.useState(false),
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
91
|
+
showScrollBtn = _useState5[0],
|
|
92
|
+
setShowScrollBtn = _useState5[1];
|
|
125
93
|
var resizeScroll = function resizeScroll(scrollSize, innerSize) {
|
|
126
94
|
var showScrollBtn = scrollSize > innerSize;
|
|
127
95
|
setShowScrollBtn(showScrollBtn);
|
|
128
|
-
|
|
129
96
|
if (showScrollBtn) {
|
|
130
97
|
setTranslateBoundPos(scrollSize - innerSize);
|
|
131
98
|
}
|
|
132
|
-
};
|
|
133
|
-
|
|
134
|
-
|
|
99
|
+
};
|
|
100
|
+
// 响应式滚动按钮展示
|
|
135
101
|
index.useResizeObserver({
|
|
136
102
|
element: innerElement,
|
|
137
103
|
getSize: getClientSize,
|
|
@@ -148,36 +114,32 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
148
114
|
onResize: function onResize(_, scrollSize) {
|
|
149
115
|
if (innerElement) {
|
|
150
116
|
var innerSize = getClientSize(innerElement);
|
|
151
|
-
resizeScroll(scrollSize, innerSize);
|
|
152
|
-
|
|
117
|
+
resizeScroll(scrollSize, innerSize);
|
|
118
|
+
// 每次滚动容器大小改变后,需要同步更新滚动位置
|
|
153
119
|
initScrollPosition(activeId);
|
|
154
120
|
}
|
|
155
121
|
}
|
|
156
122
|
});
|
|
157
123
|
var getTabPos = React.useCallback(function (tabId) {
|
|
158
|
-
var target = 0;
|
|
159
|
-
|
|
124
|
+
var target = 0;
|
|
125
|
+
// 获取目标元素的位置
|
|
160
126
|
var targetElement = itemsRef.current[tabId];
|
|
161
|
-
|
|
162
127
|
if (targetElement) {
|
|
163
128
|
var rect = targetElement.getBoundingClientRect();
|
|
164
129
|
target = showHorizontal ? rect.left : rect.top;
|
|
165
130
|
}
|
|
166
|
-
|
|
167
131
|
return target;
|
|
168
132
|
}, [showHorizontal]);
|
|
169
133
|
var getTabOffset = React.useCallback(function (tabId) {
|
|
170
134
|
// 获取目标元素的位置
|
|
171
|
-
var targetPos = getTabPos(tabId);
|
|
172
|
-
|
|
135
|
+
var targetPos = getTabPos(tabId);
|
|
136
|
+
// 获取基准元素的位置(第一个)
|
|
173
137
|
var basePos = 0;
|
|
174
|
-
|
|
175
138
|
if (typeAssertion.isArrayNonEmpty(data)) {
|
|
176
139
|
var baseItem = data[0];
|
|
177
140
|
basePos = getTabPos(baseItem.tabId);
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
|
|
141
|
+
}
|
|
142
|
+
// 返回目标元素相对基准元素的偏移量
|
|
181
143
|
return targetPos ? targetPos - basePos : 0;
|
|
182
144
|
}, [data, getTabPos]);
|
|
183
145
|
var syncScrollPosition = React.useCallback(function (tabId) {
|
|
@@ -185,19 +147,16 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
185
147
|
if (!scrollElement) return;
|
|
186
148
|
var scrollSize = getClientSize(scrollElement);
|
|
187
149
|
var innerSize = getClientSize(innerElement);
|
|
188
|
-
var offsetValue = getTabOffset(tabId);
|
|
189
|
-
|
|
150
|
+
var offsetValue = getTabOffset(tabId);
|
|
151
|
+
// 左边或上半部内容展示不全
|
|
190
152
|
var currentOffset = -translatePos;
|
|
191
|
-
|
|
192
153
|
if (offsetValue < currentOffset) {
|
|
193
154
|
setTranslatePos(-offsetValue);
|
|
194
155
|
} else {
|
|
195
156
|
// 右边或下半部内容展示不全
|
|
196
157
|
var nextTabId = index$1.getNextTabId(data, tabId);
|
|
197
158
|
var nextOffsetValue = nextTabId !== null ? getTabOffset(nextTabId) : scrollSize;
|
|
198
|
-
|
|
199
159
|
var _currentOffset = -translatePos + innerSize;
|
|
200
|
-
|
|
201
160
|
if (nextOffsetValue > _currentOffset) {
|
|
202
161
|
setTranslatePos(translatePos - (nextOffsetValue - _currentOffset));
|
|
203
162
|
}
|
|
@@ -219,15 +178,15 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
219
178
|
style: style,
|
|
220
179
|
className: classname.cx(prefixCls + "__list", prefixCls + "__list--placement-" + direction, (_cx = {}, _cx[prefixCls + "__list--" + type] = type, _cx), className),
|
|
221
180
|
ref: ref
|
|
222
|
-
}, rest), showScrollBtn ? /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
|
|
181
|
+
}, rest), showScrollBtn ? ( /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
|
|
223
182
|
className: showHorizontal ? prefixCls + "__left-btn" : prefixCls + "__up-btn",
|
|
224
183
|
effect: true,
|
|
225
184
|
disabled: translatePos === 0,
|
|
226
185
|
icon: showHorizontal ? /*#__PURE__*/React__default["default"].createElement(icons.LeftOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.UpOutlined, null),
|
|
227
186
|
onClick: function onClick() {
|
|
228
187
|
if (!scrollElement) return;
|
|
229
|
-
if (!innerElement) return;
|
|
230
|
-
|
|
188
|
+
if (!innerElement) return;
|
|
189
|
+
// 向前面滚动
|
|
231
190
|
var clientSize = getClientSize(innerElement);
|
|
232
191
|
var canScroll = -translatePos - clientSize;
|
|
233
192
|
var moveWidth = canScroll >= 0 ? clientSize : -translatePos;
|
|
@@ -235,7 +194,7 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
235
194
|
return prev + moveWidth;
|
|
236
195
|
});
|
|
237
196
|
}
|
|
238
|
-
}) : null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
197
|
+
})) : null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
239
198
|
className: classname.cx(prefixCls + "__list--inner"),
|
|
240
199
|
ref: setInnerElement
|
|
241
200
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
@@ -266,21 +225,21 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
266
225
|
onDragEnd: onDragEnd,
|
|
267
226
|
direction: direction
|
|
268
227
|
}));
|
|
269
|
-
}), type === 'line' ? /*#__PURE__*/React__default["default"].createElement(TabInk.TabInk, {
|
|
228
|
+
}), type === 'line' ? ( /*#__PURE__*/React__default["default"].createElement(TabInk.TabInk, {
|
|
270
229
|
prefixCls: prefixCls,
|
|
271
230
|
showHorizontal: showHorizontal,
|
|
272
231
|
activeItemElement: itemsRef.current[activeTabId],
|
|
273
232
|
activeTabId: activeTabId,
|
|
274
233
|
getTabOffset: getTabOffset
|
|
275
|
-
}) : null)), showScrollBtn ? /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
|
|
234
|
+
})) : null)), showScrollBtn ? ( /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
|
|
276
235
|
effect: true,
|
|
277
236
|
className: showHorizontal ? prefixCls + "__right-btn" : prefixCls + "__down-btn",
|
|
278
237
|
disabled: translateBoundPos === -translatePos,
|
|
279
238
|
icon: showHorizontal ? /*#__PURE__*/React__default["default"].createElement(icons.RightOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, null),
|
|
280
239
|
onClick: function onClick() {
|
|
281
240
|
if (!scrollElement) return;
|
|
282
|
-
if (!innerElement) return;
|
|
283
|
-
|
|
241
|
+
if (!innerElement) return;
|
|
242
|
+
// 向后面滚动
|
|
284
243
|
var scrollSize = getClientSize(scrollElement);
|
|
285
244
|
var innerSize = getClientSize(innerElement);
|
|
286
245
|
var canScrollWidth = scrollSize - innerSize + translatePos;
|
|
@@ -289,15 +248,13 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
289
248
|
return prev - moveWidth;
|
|
290
249
|
});
|
|
291
250
|
}
|
|
292
|
-
}) : null, editable ? /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
|
|
251
|
+
})) : null, editable ? ( /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
|
|
293
252
|
icon: /*#__PURE__*/React__default["default"].createElement(icons.PlusOutlined, null),
|
|
294
253
|
className: prefixCls + "__add-btn",
|
|
295
254
|
onClick: onAdd
|
|
296
|
-
}) : null, extra);
|
|
255
|
+
})) : null, extra);
|
|
297
256
|
});
|
|
298
|
-
|
|
299
257
|
if (env.__DEV__) {
|
|
300
258
|
TabList.displayName = 'TabList';
|
|
301
259
|
}
|
|
302
|
-
|
|
303
260
|
exports.TabList = TabList;
|
package/lib/cjs/TabPane.js
CHANGED
|
@@ -10,61 +10,45 @@
|
|
|
10
10
|
'use strict';
|
|
11
11
|
|
|
12
12
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
13
|
-
|
|
14
13
|
Object.defineProperty(exports, '__esModule', {
|
|
15
14
|
value: true
|
|
16
15
|
});
|
|
17
|
-
|
|
18
16
|
var tslib = require('tslib');
|
|
19
|
-
|
|
20
17
|
var React = require('react');
|
|
21
|
-
|
|
22
18
|
var reactUtils = require('@hi-ui/react-utils');
|
|
23
|
-
|
|
24
19
|
var classname = require('@hi-ui/classname');
|
|
25
|
-
|
|
26
|
-
function _interopDefaultLegacy(e) {
|
|
20
|
+
function _interopDefaultCompat(e) {
|
|
27
21
|
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
28
22
|
'default': e
|
|
29
23
|
};
|
|
30
24
|
}
|
|
31
|
-
|
|
32
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
33
|
-
|
|
25
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
34
26
|
var _role = 'tabs-tab-pane';
|
|
35
|
-
|
|
36
27
|
var _prefix = classname.getPrefixCls(_role);
|
|
37
|
-
|
|
38
28
|
var omitProps = ['tabId', 'tabTitle', 'disabled', 'tabDesc', 'closeable'];
|
|
39
|
-
|
|
40
29
|
var TabPane = function TabPane(_a) {
|
|
41
30
|
var children = _a.children,
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
31
|
+
className = _a.className,
|
|
32
|
+
style = _a.style,
|
|
33
|
+
active = _a.active,
|
|
34
|
+
_a$unmountOnInactive = _a.unmountOnInactive,
|
|
35
|
+
unmountOnInactive = _a$unmountOnInactive === void 0 ? true : _a$unmountOnInactive,
|
|
36
|
+
rest = tslib.__rest(_a, ["children", "className", "style", "active", "unmountOnInactive"]);
|
|
49
37
|
var htmlProps = reactUtils.filterProps(rest, omitProps);
|
|
50
|
-
|
|
51
38
|
var _React$useState = React__default["default"].useState(false),
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
39
|
+
isLoaded = _React$useState[0],
|
|
40
|
+
setIsLoaded = _React$useState[1];
|
|
55
41
|
var childrenContentMemo = React__default["default"].useMemo(function () {
|
|
56
42
|
if (!unmountOnInactive) {
|
|
57
43
|
if (active && !isLoaded) {
|
|
58
44
|
setIsLoaded(true);
|
|
59
45
|
}
|
|
60
|
-
|
|
61
46
|
if (isLoaded) {
|
|
62
47
|
return children;
|
|
63
48
|
}
|
|
64
49
|
} else if (active) {
|
|
65
50
|
return children;
|
|
66
51
|
}
|
|
67
|
-
|
|
68
52
|
return null;
|
|
69
53
|
}, [active, children, isLoaded, unmountOnInactive]);
|
|
70
54
|
return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
|
|
@@ -72,5 +56,4 @@ var TabPane = function TabPane(_a) {
|
|
|
72
56
|
className: classname.cx(className, !unmountOnInactive && !active && _prefix + "--hide")
|
|
73
57
|
}, htmlProps), childrenContentMemo);
|
|
74
58
|
};
|
|
75
|
-
|
|
76
59
|
exports.TabPane = TabPane;
|