@hi-ui/tabs 4.0.6 → 4.0.8

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.
Files changed (4) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/lib/cjs/TabList.js +12 -5
  3. package/lib/esm/TabList.js +13 -6
  4. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @hi-ui/tabs
2
2
 
3
+ ## 4.0.8
4
+
5
+ ### Patch Changes
6
+
7
+ - [#2411](https://github.com/XiaoMi/hiui/pull/2411) [`f7d1257ad`](https://github.com/XiaoMi/hiui/commit/f7d1257ad2006fd40cabb2d16f1fde77677f3117) Thanks [@zyprepare](https://github.com/zyprepare)! - 问题修复: 在 tab 过多滚动场景下，如果选中的 tab 在最左侧，点击右箭头时无效果
8
+
9
+ - Updated dependencies [[`f7d1257ad`](https://github.com/XiaoMi/hiui/commit/f7d1257ad2006fd40cabb2d16f1fde77677f3117)]:
10
+ - @hi-ui/icons@4.0.6
11
+
12
+ ## 4.0.7
13
+
14
+ ### Patch Changes
15
+
16
+ - [#2396](https://github.com/XiaoMi/hiui/pull/2396) [`544858c34`](https://github.com/XiaoMi/hiui/commit/544858c342e043f3a60a0368c76c9411a634eb3f) Thanks [@zyprepare](https://github.com/zyprepare)! - 修复问题: activeId 受控模式下,后面的较深的 tab 无法自动显示到前面
17
+
18
+ - Updated dependencies [[`a7d47168b`](https://github.com/XiaoMi/hiui/commit/a7d47168b519cacfd7b34edf6ba239c5b0b92284)]:
19
+ - @hi-ui/core@4.0.5
20
+
3
21
  ## 4.0.6
4
22
 
5
23
  ### Patch Changes
package/lib/cjs/TabList.js CHANGED
@@ -148,7 +148,9 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
148
148
  onResize: function onResize(_, scrollSize) {
149
149
  if (innerElement) {
150
150
  var innerSize = getClientSize(innerElement);
151
- resizeScroll(scrollSize, innerSize);
151
+ resizeScroll(scrollSize, innerSize); // 每次滚动容器大小改变后，需要同步更新滚动位置
152
+
153
+ initScrollPosition(activeId);
152
154
  }
153
155
  }
154
156
  });
@@ -178,8 +180,7 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
178
180
 
179
181
  return targetPos ? targetPos - basePos : 0;
180
182
  }, [data, getTabPos]);
181
-
182
- var syncScrollPosition = function syncScrollPosition(tabId) {
183
+ var syncScrollPosition = React.useCallback(function (tabId) {
183
184
  if (!innerElement) return;
184
185
  if (!scrollElement) return;
185
186
  var scrollSize = getClientSize(scrollElement);
@@ -201,13 +202,19 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
201
202
  setTranslatePos(translatePos - (nextOffsetValue - _currentOffset));
202
203
  }
203
204
  }
204
- };
205
-
205
+ }, [data, getClientSize, getTabOffset, innerElement, scrollElement, translatePos]);
206
+ var initScrollPosition = useLatest.useLatestCallback(function (tabId) {
207
+ tabId && syncScrollPosition(tabId);
208
+ });
206
209
  var onClickTab = useLatest.useLatestCallback(function (tabId, event) {
207
210
  onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(tabId, event);
208
211
  setActiveTabId(tabId);
209
212
  syncScrollPosition(tabId);
210
213
  });
214
+ React.useEffect(function () {
215
+ // activeId 受控模式下改变后，同步更新滚动位置
216
+ initScrollPosition(activeId);
217
+ }, [activeId, initScrollPosition]);
211
218
  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
212
219
  style: style,
213
220
  className: classname.cx(prefixCls + "__list", prefixCls + "__list--placement-" + direction, (_cx = {}, _cx[prefixCls + "__list--" + type] = type, _cx), className),
package/lib/esm/TabList.js CHANGED
@@ -8,7 +8,7 @@
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
10
  import { __rest } from 'tslib';
11
- import React, { forwardRef, useState, useCallback, useRef } from 'react';
11
+ import React, { forwardRef, useState, useCallback, useRef, useEffect } from 'react';
12
12
  import { __DEV__ } from '@hi-ui/env';
13
13
  import { TabItem } from './TabItem.js';
14
14
  import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
@@ -119,7 +119,9 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
119
119
  onResize: function onResize(_, scrollSize) {
120
120
  if (innerElement) {
121
121
  var innerSize = getClientSize(innerElement);
122
- resizeScroll(scrollSize, innerSize);
122
+ resizeScroll(scrollSize, innerSize); // 每次滚动容器大小改变后，需要同步更新滚动位置
123
+
124
+ initScrollPosition(activeId);
123
125
  }
124
126
  }
125
127
  });
@@ -149,8 +151,7 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
149
151
 
150
152
  return targetPos ? targetPos - basePos : 0;
151
153
  }, [data, getTabPos]);
152
-
153
- var syncScrollPosition = function syncScrollPosition(tabId) {
154
+ var syncScrollPosition = useCallback(function (tabId) {
154
155
  if (!innerElement) return;
155
156
  if (!scrollElement) return;
156
157
  var scrollSize = getClientSize(scrollElement);
@@ -172,13 +173,19 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
172
173
  setTranslatePos(translatePos - (nextOffsetValue - _currentOffset));
173
174
  }
174
175
  }
175
- };
176
-
176
+ }, [data, getClientSize, getTabOffset, innerElement, scrollElement, translatePos]);
177
+ var initScrollPosition = useLatestCallback(function (tabId) {
178
+ tabId && syncScrollPosition(tabId);
179
+ });
177
180
  var onClickTab = useLatestCallback(function (tabId, event) {
178
181
  onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(tabId, event);
179
182
  setActiveTabId(tabId);
180
183
  syncScrollPosition(tabId);
181
184
  });
185
+ useEffect(function () {
186
+ // activeId 受控模式下改变后，同步更新滚动位置
187
+ initScrollPosition(activeId);
188
+ }, [activeId, initScrollPosition]);
182
189
  return /*#__PURE__*/React.createElement("div", Object.assign({
183
190
  style: style,
184
191
  className: cx(prefixCls + "__list", prefixCls + "__list--placement-" + direction, (_cx = {}, _cx[prefixCls + "__list--" + type] = type, _cx), className),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/tabs",
3
- "version": "4.0.6",
3
+ "version": "4.0.8",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -46,7 +46,7 @@
46
46
  "@hi-ui/classname": "^4.0.1",
47
47
  "@hi-ui/env": "^4.0.1",
48
48
  "@hi-ui/icon-button": "^4.0.4",
49
- "@hi-ui/icons": "^4.0.4",
49
+ "@hi-ui/icons": "^4.0.6",
50
50
  "@hi-ui/react-utils": "^4.0.1",
51
51
  "@hi-ui/type-assertion": "^4.0.1",
52
52
  "@hi-ui/use-latest": "^4.0.1",
@@ -54,12 +54,12 @@
54
54
  "@hi-ui/use-unmount-effect": "^4.0.1"
55
55
  },
56
56
  "peerDependencies": {
57
- "@hi-ui/core": ">=4.0.0",
57
+ "@hi-ui/core": ">=4.0.5",
58
58
  "react": ">=16.8.6",
59
59
  "react-dom": ">=16.8.6"
60
60
  },
61
61
  "devDependencies": {
62
- "@hi-ui/core": "^4.0.4",
62
+ "@hi-ui/core": "^4.0.5",
63
63
  "@hi-ui/core-css": "^4.0.1",
64
64
  "@hi-ui/hi-build": "^4.0.1",
65
65
  "react": "^17.0.1",