@hi-ui/tabs 4.0.0-beta.20 → 4.0.0-beta.23

package/lib/cjs/TabInk.js

@@ -19,6 +19,8 @@ var React = require('react');
 
 var classname = require('@hi-ui/classname');
 
+var index = require('./hooks/index.js');
+
 function _interopDefaultLegacy(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
@@ -33,11 +35,11 @@ var TabInk = function TabInk(_ref) {
   var disabled = _ref.disabled,
       prefixCls = _ref.prefixCls,
       activeItemElement = _ref.activeItemElement,
-      direction = _ref.direction,
       activeTabId = _ref.activeTabId,
-      getTabOffset = _ref.getTabOffset;
+      getTabOffset = _ref.getTabOffset,
+      showHorizontal = _ref.showHorizontal;
   var inkRef = React.useRef(null);
-  React.useEffect(function () {
+  var setTabLnkPositionStyle = React.useCallback(function () {
     if (!inkRef.current) return;
     if (!activeItemElement) return;
     var computedStyle = getComputedStyle(activeItemElement);
@@ -46,7 +48,7 @@ var TabInk = function TabInk(_ref) {
 
     var _style;
 
-    if (direction === 'vertical') {
+    if (!showHorizontal) {
       var paddingTop = parseFloat(computedStyle.getPropertyValue('padding-top'));
       var paddingBottom = parseFloat(computedStyle.getPropertyValue('padding-bottom'));
       _style = {
@@ -68,7 +70,18 @@ var TabInk = function TabInk(_ref) {
     }
 
     Object.assign(inkRef.current.style, _style);
-  }, [activeItemElement, direction, activeTabId, getTabOffset]);
+  }, [activeItemElement, activeTabId, getTabOffset, showHorizontal]);
+  React.useEffect(function () {
+    setTabLnkPositionStyle();
+  }, [setTabLnkPositionStyle]);
+  index.useResizeObserver({
+    element: activeItemElement,
+    getSize: function getSize(element) {
+      var itemRect = element.getBoundingClientRect();
+      return showHorizontal ? itemRect.width : itemRect.height;
+    },
+    onResize: setTabLnkPositionStyle
+  });
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classname.cx(prefixCls + "__ink", (_cx = {}, _cx[prefixCls + "__ink--disabled"] = disabled, _cx)),
     ref: inkRef

package/lib/cjs/TabList.js

@@ -256,7 +256,7 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }));
   }), type === 'line' ? /*#__PURE__*/React__default["default"].createElement(TabInk.TabInk, {
     prefixCls: prefixCls,
-    direction: direction,
+    showHorizontal: true,
     activeItemElement: itemsRef.current[activeTabId],
     activeTabId: activeTabId,
     getTabOffset: getTabOffset

package/lib/esm/TabInk.js

@@ -7,8 +7,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useCallback, useEffect } from 'react';
 import { cx } from '@hi-ui/classname';
+import { useResizeObserver } from './hooks/index.js';
 
 var TabInk = function TabInk(_ref) {
   var _cx;
@@ -16,11 +17,11 @@ var TabInk = function TabInk(_ref) {
   var disabled = _ref.disabled,
       prefixCls = _ref.prefixCls,
       activeItemElement = _ref.activeItemElement,
-      direction = _ref.direction,
       activeTabId = _ref.activeTabId,
-      getTabOffset = _ref.getTabOffset;
+      getTabOffset = _ref.getTabOffset,
+      showHorizontal = _ref.showHorizontal;
   var inkRef = useRef(null);
-  useEffect(function () {
+  var setTabLnkPositionStyle = useCallback(function () {
     if (!inkRef.current) return;
     if (!activeItemElement) return;
     var computedStyle = getComputedStyle(activeItemElement);
@@ -29,7 +30,7 @@ var TabInk = function TabInk(_ref) {
 
     var _style;
 
-    if (direction === 'vertical') {
+    if (!showHorizontal) {
       var paddingTop = parseFloat(computedStyle.getPropertyValue('padding-top'));
       var paddingBottom = parseFloat(computedStyle.getPropertyValue('padding-bottom'));
       _style = {
@@ -51,7 +52,18 @@ var TabInk = function TabInk(_ref) {
     }
 
     Object.assign(inkRef.current.style, _style);
-  }, [activeItemElement, direction, activeTabId, getTabOffset]);
+  }, [activeItemElement, activeTabId, getTabOffset, showHorizontal]);
+  useEffect(function () {
+    setTabLnkPositionStyle();
+  }, [setTabLnkPositionStyle]);
+  useResizeObserver({
+    element: activeItemElement,
+    getSize: function getSize(element) {
+      var itemRect = element.getBoundingClientRect();
+      return showHorizontal ? itemRect.width : itemRect.height;
+    },
+    onResize: setTabLnkPositionStyle
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: cx(prefixCls + "__ink", (_cx = {}, _cx[prefixCls + "__ink--disabled"] = disabled, _cx)),
     ref: inkRef

package/lib/esm/TabList.js

@@ -227,7 +227,7 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
     }));
   }), type === 'line' ? /*#__PURE__*/React.createElement(TabInk, {
     prefixCls: prefixCls,
-    direction: direction,
+    showHorizontal: true,
     activeItemElement: itemsRef.current[activeTabId],
     activeTabId: activeTabId,
     getTabOffset: getTabOffset

package/lib/types/TabInk.d.ts

@@ -4,8 +4,8 @@ interface TabInkProps {
     prefixCls?: string;
     disabled?: boolean;
     activeItemElement: HTMLElement | null;
-    direction: 'vertical' | 'horizontal';
     activeTabId: React.ReactText;
     getTabOffset: (tabId: React.ReactText) => number;
+    showHorizontal: boolean;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/tabs",
-  "version": "4.0.0-beta.20",
+  "version": "4.0.0-beta.23",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -53,7 +53,7 @@
     "@hi-ui/type-assertion": "^4.0.0-beta.5",
     "@hi-ui/use-latest": "^4.0.0-beta.5",
     "@hi-ui/use-uncontrolled-state": "^4.0.0-beta.5",
-    "@hi-ui/use-unmount-effect": "^4.0.0-beta.6"
+    "@hi-ui/use-unmount-effect": "^4.0.0-beta.8"
   },
   "peerDependencies": {
     "react": ">=16.8.6",
@@ -64,5 +64,5 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
-  "gitHead": "a2d7267f383300bb5b96f8c156f54da4924b79dc"
+  "gitHead": "29f4d9450879b9bffe83ea928fc2491b70d1bcce"
 }