@hi-ui/tabs 4.1.5 → 4.2.0

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 (9) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/lib/cjs/TabInk.js +8 -4
  3. package/lib/cjs/TabList.js +9 -3
  4. package/lib/cjs/TabPane.js +7 -3
  5. package/lib/esm/TabInk.js +8 -4
  6. package/lib/esm/TabList.js +9 -3
  7. package/lib/esm/TabPane.js +7 -3
  8. package/lib/types/TabPane.d.ts +5 -0
  9. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @hi-ui/tabs
2
2
 
3
+ ## 4.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#3211](https://github.com/XiaoMi/hiui/pull/3211) [`7e21457`](https://github.com/XiaoMi/hiui/commit/7e2145754dcc7a94d0f8219ee720657a0693acc3) Thanks [@zyprepare](https://github.com/zyprepare)! - feat(tabs): 增加 TabPane 组件的 preload 属性以支持内容预加载 (#3210)
8
+
9
+ ## 4.1.6
10
+
11
+ ### Patch Changes
12
+
13
+ - [#2940](https://github.com/XiaoMi/hiui/pull/2940) [`516e30c25`](https://github.com/XiaoMi/hiui/commit/516e30c25e1c24a992a7efdd04d5de9897c53fe9) Thanks [@xiamiao1121](https://github.com/xiamiao1121)! - fix: 修复 activeId 为一个不存在的值或空值，下划线显示不对的问题
14
+
15
+ - [#2938](https://github.com/XiaoMi/hiui/pull/2938) [`3d070cda4`](https://github.com/XiaoMi/hiui/commit/3d070cda4317f5705ae34271a35390f4c43468fc) Thanks [@xiamiao1121](https://github.com/xiamiao1121)! - fix: 修复设置缩放后下划线显示不正常问题
16
+
3
17
  ## 4.1.5
4
18
 
5
19
  ### Patch Changes
package/lib/cjs/TabInk.js CHANGED
@@ -35,31 +35,35 @@ var TabInk = function TabInk(_ref) {
35
35
  if (!inkRef.current) return;
36
36
  if (!activeItemElement) return;
37
37
  var computedStyle = getComputedStyle(activeItemElement);
38
- var itemRect = activeItemElement.getBoundingClientRect();
38
+ // issue: https://github.com/XiaoMi/hiui/issues/2937
39
+ // 当设置transform缩放后，getBoundingClientRect 获取的值不准确，所以这里使用offset
40
+ // const itemRect = activeItemElement.getBoundingClientRect()
39
41
  var offset = getTabOffset(activeTabId);
40
42
  var _style;
41
43
  if (!showHorizontal) {
42
44
  var paddingTop = parseFloat(computedStyle.getPropertyValue('padding-top'));
43
45
  var paddingBottom = parseFloat(computedStyle.getPropertyValue('padding-bottom'));
46
+ var height = activeItemElement.offsetHeight;
44
47
  _style = {
45
48
  // 2px 保证尽量和文字顶部对齐，减少文本行高的影响
46
49
  top: offset + paddingTop + 2 + 'px',
47
- height: itemRect.height - paddingTop - paddingBottom - 4 + "px",
50
+ height: height - paddingTop - paddingBottom - 4 + "px",
48
51
  left: '',
49
52
  width: ''
50
53
  };
51
54
  } else {
52
55
  var paddingLeft = parseFloat(computedStyle.getPropertyValue('padding-left'));
53
56
  var paddingRight = parseFloat(computedStyle.getPropertyValue('padding-right'));
57
+ var width = activeItemElement.offsetWidth;
54
58
  _style = {
55
59
  left: offset + paddingLeft + 'px',
56
- width: itemRect.width - paddingRight - paddingLeft + "px",
60
+ width: width - paddingRight - paddingLeft + "px",
57
61
  top: '',
58
62
  height: ''
59
63
  };
60
64
  }
61
65
  Object.assign(inkRef.current.style, _style);
62
- }, [activeItemElement, activeTabId, getTabOffset, showHorizontal]);
66
+ }, [activeItemElement, getTabOffset, activeTabId, showHorizontal]);
63
67
  React.useEffect(function () {
64
68
  setTabLnkPositionStyle();
65
69
  }, [setTabLnkPositionStyle]);
package/lib/cjs/TabList.js CHANGED
@@ -125,8 +125,12 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
125
125
  // 获取目标元素的位置
126
126
  var targetElement = itemsRef.current[tabId];
127
127
  if (targetElement) {
128
- var rect = targetElement.getBoundingClientRect();
129
- target = showHorizontal ? rect.left : rect.top;
128
+ // issue: https://github.com/XiaoMi/hiui/issues/2937
129
+ // 当设置transform缩放后，getBoundingClientRect 获取的值不准确，所以这里使用offsetLeft和offsetTop
130
+ // const rect = targetElement!.getBoundingClientRect()
131
+ var rectLeft = targetElement.offsetLeft;
132
+ var rectTop = targetElement.offsetTop;
133
+ target = showHorizontal ? rectLeft : rectTop;
130
134
  }
131
135
  return target;
132
136
  }, [showHorizontal]);
@@ -225,7 +229,9 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
225
229
  onDragEnd: onDragEnd,
226
230
  direction: direction
227
231
  }));
228
- }), type === 'line' ? ( /*#__PURE__*/React__default["default"].createElement(TabInk.TabInk, {
232
+ }), type === 'line' && data.some(function (item) {
233
+ return item.tabId === activeTabId;
234
+ }) ? ( /*#__PURE__*/React__default["default"].createElement(TabInk.TabInk, {
229
235
  prefixCls: prefixCls,
230
236
  showHorizontal: showHorizontal,
231
237
  activeItemElement: itemsRef.current[activeTabId],
package/lib/cjs/TabPane.js CHANGED
@@ -33,12 +33,16 @@ var TabPane = function TabPane(_a) {
33
33
  active = _a.active,
34
34
  _a$unmountOnInactive = _a.unmountOnInactive,
35
35
  unmountOnInactive = _a$unmountOnInactive === void 0 ? true : _a$unmountOnInactive,
36
- rest = tslib.__rest(_a, ["children", "className", "style", "active", "unmountOnInactive"]);
36
+ preload = _a.preload,
37
+ rest = tslib.__rest(_a, ["children", "className", "style", "active", "unmountOnInactive", "preload"]);
37
38
  var htmlProps = reactUtils.filterProps(rest, omitProps);
38
39
  var _React$useState = React__default["default"].useState(false),
39
40
  isLoaded = _React$useState[0],
40
41
  setIsLoaded = _React$useState[1];
41
42
  var childrenContentMemo = React__default["default"].useMemo(function () {
43
+ if (preload && !active && !isLoaded) {
44
+ return children;
45
+ }
42
46
  if (!unmountOnInactive) {
43
47
  if (active && !isLoaded) {
44
48
  setIsLoaded(true);
@@ -50,10 +54,10 @@ var TabPane = function TabPane(_a) {
50
54
  return children;
51
55
  }
52
56
  return null;
53
- }, [active, children, isLoaded, unmountOnInactive]);
57
+ }, [active, children, isLoaded, unmountOnInactive, preload]);
54
58
  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
55
59
  style: style,
56
- className: classname.cx(className, !unmountOnInactive && !active && _prefix + "--hide")
60
+ className: classname.cx(className, !active && (preload || !unmountOnInactive) && _prefix + "--hide")
57
61
  }, htmlProps), childrenContentMemo);
58
62
  };
59
63
  exports.TabPane = TabPane;
package/lib/esm/TabInk.js CHANGED
@@ -23,31 +23,35 @@ var TabInk = function TabInk(_ref) {
23
23
  if (!inkRef.current) return;
24
24
  if (!activeItemElement) return;
25
25
  var computedStyle = getComputedStyle(activeItemElement);
26
- var itemRect = activeItemElement.getBoundingClientRect();
26
+ // issue: https://github.com/XiaoMi/hiui/issues/2937
27
+ // 当设置transform缩放后，getBoundingClientRect 获取的值不准确，所以这里使用offset
28
+ // const itemRect = activeItemElement.getBoundingClientRect()
27
29
  var offset = getTabOffset(activeTabId);
28
30
  var _style;
29
31
  if (!showHorizontal) {
30
32
  var paddingTop = parseFloat(computedStyle.getPropertyValue('padding-top'));
31
33
  var paddingBottom = parseFloat(computedStyle.getPropertyValue('padding-bottom'));
34
+ var height = activeItemElement.offsetHeight;
32
35
  _style = {
33
36
  // 2px 保证尽量和文字顶部对齐，减少文本行高的影响
34
37
  top: offset + paddingTop + 2 + 'px',
35
- height: itemRect.height - paddingTop - paddingBottom - 4 + "px",
38
+ height: height - paddingTop - paddingBottom - 4 + "px",
36
39
  left: '',
37
40
  width: ''
38
41
  };
39
42
  } else {
40
43
  var paddingLeft = parseFloat(computedStyle.getPropertyValue('padding-left'));
41
44
  var paddingRight = parseFloat(computedStyle.getPropertyValue('padding-right'));
45
+ var width = activeItemElement.offsetWidth;
42
46
  _style = {
43
47
  left: offset + paddingLeft + 'px',
44
- width: itemRect.width - paddingRight - paddingLeft + "px",
48
+ width: width - paddingRight - paddingLeft + "px",
45
49
  top: '',
46
50
  height: ''
47
51
  };
48
52
  }
49
53
  Object.assign(inkRef.current.style, _style);
50
- }, [activeItemElement, activeTabId, getTabOffset, showHorizontal]);
54
+ }, [activeItemElement, getTabOffset, activeTabId, showHorizontal]);
51
55
  useEffect(function () {
52
56
  setTabLnkPositionStyle();
53
57
  }, [setTabLnkPositionStyle]);
package/lib/esm/TabList.js CHANGED
@@ -113,8 +113,12 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
113
113
  // 获取目标元素的位置
114
114
  var targetElement = itemsRef.current[tabId];
115
115
  if (targetElement) {
116
- var rect = targetElement.getBoundingClientRect();
117
- target = showHorizontal ? rect.left : rect.top;
116
+ // issue: https://github.com/XiaoMi/hiui/issues/2937
117
+ // 当设置transform缩放后，getBoundingClientRect 获取的值不准确，所以这里使用offsetLeft和offsetTop
118
+ // const rect = targetElement!.getBoundingClientRect()
119
+ var rectLeft = targetElement.offsetLeft;
120
+ var rectTop = targetElement.offsetTop;
121
+ target = showHorizontal ? rectLeft : rectTop;
118
122
  }
119
123
  return target;
120
124
  }, [showHorizontal]);
@@ -213,7 +217,9 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
213
217
  onDragEnd: onDragEnd,
214
218
  direction: direction
215
219
  }));
216
- }), type === 'line' ? ( /*#__PURE__*/React.createElement(TabInk, {
220
+ }), type === 'line' && data.some(function (item) {
221
+ return item.tabId === activeTabId;
222
+ }) ? ( /*#__PURE__*/React.createElement(TabInk, {
217
223
  prefixCls: prefixCls,
218
224
  showHorizontal: showHorizontal,
219
225
  activeItemElement: itemsRef.current[activeTabId],
package/lib/esm/TabPane.js CHANGED
@@ -21,12 +21,16 @@ var TabPane = function TabPane(_a) {
21
21
  active = _a.active,
22
22
  _a$unmountOnInactive = _a.unmountOnInactive,
23
23
  unmountOnInactive = _a$unmountOnInactive === void 0 ? true : _a$unmountOnInactive,
24
- rest = __rest(_a, ["children", "className", "style", "active", "unmountOnInactive"]);
24
+ preload = _a.preload,
25
+ rest = __rest(_a, ["children", "className", "style", "active", "unmountOnInactive", "preload"]);
25
26
  var htmlProps = filterProps(rest, omitProps);
26
27
  var _React$useState = React.useState(false),
27
28
  isLoaded = _React$useState[0],
28
29
  setIsLoaded = _React$useState[1];
29
30
  var childrenContentMemo = React.useMemo(function () {
31
+ if (preload && !active && !isLoaded) {
32
+ return children;
33
+ }
30
34
  if (!unmountOnInactive) {
31
35
  if (active && !isLoaded) {
32
36
  setIsLoaded(true);
@@ -38,10 +42,10 @@ var TabPane = function TabPane(_a) {
38
42
  return children;
39
43
  }
40
44
  return null;
41
- }, [active, children, isLoaded, unmountOnInactive]);
45
+ }, [active, children, isLoaded, unmountOnInactive, preload]);
42
46
  return /*#__PURE__*/React.createElement("div", Object.assign({
43
47
  style: style,
44
- className: cx(className, !unmountOnInactive && !active && _prefix + "--hide")
48
+ className: cx(className, !active && (preload || !unmountOnInactive) && _prefix + "--hide")
45
49
  }, htmlProps), childrenContentMemo);
46
50
  };
47
51
  export { TabPane };
package/lib/types/TabPane.d.ts CHANGED
@@ -30,4 +30,9 @@ export interface TabPaneProps extends HiBaseHTMLProps<'div'> {
30
30
  * 标签内容不活跃时是否卸载
31
31
  */
32
32
  unmountOnInactive?: boolean;
33
+ /**
34
+ * 标签内容是否预加载
35
+ * @private
36
+ */
37
+ preload?: boolean;
33
38
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/tabs",
3
- "version": "4.1.5",
3
+ "version": "4.2.0",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",