@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 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
- prefixCls = _ref.prefixCls,
37
- activeItemElement = _ref.activeItemElement,
38
- activeTabId = _ref.activeTabId,
39
- getTabOffset = _ref.getTabOffset,
40
- showHorizontal = _ref.showHorizontal;
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;
@@ -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
- style = _ref.style,
39
- disabled = _ref.disabled,
40
- tabTitle = _ref.tabTitle,
41
- tabDesc = _ref.tabDesc,
42
- prefixCls = _ref.prefixCls,
43
- tabId = _ref.tabId,
44
- onTabClick = _ref.onTabClick,
45
- active = _ref.active,
46
- editable = _ref.editable,
47
- onDelete = _ref.onDelete,
48
- index = _ref.index,
49
- _onDragStart = _ref.onDragStart,
50
- _onDragOver = _ref.onDragOver,
51
- _onDrop = _ref.onDrop,
52
- _onDragEnd = _ref.onDragEnd,
53
- itemRef = _ref.itemRef,
54
- draggable = _ref.draggable,
55
- _ref$type = _ref.type,
56
- type = _ref$type === void 0 ? 'line' : _ref$type,
57
- _ref$closeable = _ref.closeable,
58
- closeable = _ref$closeable === void 0 ? true : _ref$closeable,
59
- _ref$direction = _ref.direction,
60
- layout = _ref$direction === void 0 ? 'horizontal' : _ref$direction;
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
- dragId = _useState[0],
64
- setDragId = _useState[1];
65
-
53
+ dragId = _useState[0],
54
+ setDragId = _useState[1];
66
55
  var _useState2 = React.useState(null),
67
- direction = _useState2[0],
68
- setDirection = _useState2[1];
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;
@@ -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
- className = _a.className,
63
- style = _a.style,
64
- activeId = _a.activeId,
65
- defaultActiveId = _a.defaultActiveId,
66
- onChange = _a.onChange,
67
- onTabClick = _a.onTabClick,
68
- _a$prefixCls = _a.prefixCls,
69
- prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
70
- directionProp = _a.direction,
71
- _a$placement = _a.placement,
72
- placement = _a$placement === void 0 ? 'horizontal' : _a$placement,
73
- editable = _a.editable,
74
- onAdd = _a.onAdd,
75
- onDelete = _a.onDelete,
76
- draggable = _a.draggable,
77
- onDragStart = _a.onDragStart,
78
- onDragOver = _a.onDragOver,
79
- onDrop = _a.onDrop,
80
- onDragEnd = _a.onDragEnd,
81
- _a$type = _a.type,
82
- type = _a$type === void 0 ? 'line' : _a$type,
83
- extra = _a.extra,
84
- rest = tslib.__rest(_a, ["data", "className", "style", "activeId", "defaultActiveId", "onChange", "onTabClick", "prefixCls", "direction", "placement", "editable", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDrop", "onDragEnd", "type", "extra"]);
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
- if (typeAssertion.isUndef(defaultActiveId)) {
90
- return data[0] ? data[0].tabId : '';
91
- }
92
-
93
- return defaultActiveId;
94
- }, activeId, onChange, Object.is),
95
- activeTabId = _useUncontrolledState[0],
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
- innerElement = _useState[0],
100
- setInnerElement = _useState[1];
101
-
74
+ innerElement = _useState[0],
75
+ setInnerElement = _useState[1];
102
76
  var _useState2 = React.useState(null),
103
- scrollElement = _useState2[0],
104
- setScrollElement = _useState2[1];
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
- translatePos = _useState3[0],
113
- setTranslatePos = _useState3[1];
114
-
84
+ translatePos = _useState3[0],
85
+ setTranslatePos = _useState3[1];
115
86
  var _useState4 = React.useState(0),
116
- translateBoundPos = _useState4[0],
117
- setTranslateBoundPos = _useState4[1];
118
-
87
+ translateBoundPos = _useState4[0],
88
+ setTranslateBoundPos = _useState4[1];
119
89
  var itemsRef = React.useRef({});
120
-
121
90
  var _useState5 = React.useState(false),
122
- showScrollBtn = _useState5[0],
123
- setShowScrollBtn = _useState5[1];
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;
@@ -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
- className = _a.className,
43
- style = _a.style,
44
- active = _a.active,
45
- _a$unmountOnInactive = _a.unmountOnInactive,
46
- unmountOnInactive = _a$unmountOnInactive === void 0 ? true : _a$unmountOnInactive,
47
- rest = tslib.__rest(_a, ["children", "className", "style", "active", "unmountOnInactive"]);
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
- isLoaded = _React$useState[0],
53
- setIsLoaded = _React$useState[1];
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;