From 6f6f8213feb029ae46cc4ee5527b08449a661ff7 Mon Sep 17 00:00:00 2001
From: yexu <huangyongxi.hyx@digital-engine.com>
Date: Fri, 7 Jul 2023 14:28:42 +0800
Subject: [PATCH 1/3] =?UTF-8?q?fix:=20offset=E5=9B=9B=E8=88=8D=E4=BA=94?=
 =?UTF-8?q?=E5=85=A5=E5=AF=BC=E8=87=B4hiddenTabs=E8=AE=A1=E7=AE=97?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/TabNavList/index.tsx | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/TabNavList/index.tsx b/src/TabNavList/index.tsx
index 4fe1a7ee..c7007fc3 100644
--- a/src/TabNavList/index.tsx
+++ b/src/TabNavList/index.tsx
@@ -52,8 +52,8 @@ export interface TabNavListProps {
 }
 
 const getSize = (refObj: React.RefObject<HTMLElement>): SizeInfo => {
-  const { offsetWidth = 0, offsetHeight = 0 } = refObj.current || {};
-  return [offsetWidth, offsetHeight];
+  const { width = 0, height = 0 } = refObj?.current?.getBoundingClientRect() || {};
+  return [width, height];
 };
 
 /**
@@ -311,19 +311,28 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
     setTabSizes(() => {
       const newSizes: TabSizeMap = new Map();
       tabs.forEach(({ key }) => {
-        const btnNode = tabListRef.current?.querySelector<HTMLElement>(`[data-node-key="${genDataNodeKey(key)}"]`);
+        const btnNode = tabListRef.current?.querySelector<HTMLElement>(
+          `[data-node-key="${genDataNodeKey(key)}"]`,
+        );
         if (btnNode) {
+          const {
+            width = 0,
+            height = 0,
+            left = 0,
+            top = 0,
+          } = btnNode.getBoundingClientRect() || {};
+          const { left: parentLeft = 0, top: parentTop = 0 } =
+            tabListRef?.current?.getBoundingClientRect() || {};
           newSizes.set(key, {
-            width: btnNode.offsetWidth,
-            height: btnNode.offsetHeight,
-            left: btnNode.offsetLeft,
-            top: btnNode.offsetTop,
+            width,
+            height,
+            left: left - parentLeft,
+            top: top - parentTop,
           });
         }
       });
       return newSizes;
     });
-
   useEffect(() => {
     updateTabSizes();
   }, [tabs.map(tab => tab.key).join('_')]);
@@ -350,7 +359,6 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
       tabContentFullSize[0] - newAddSize[0],
       tabContentFullSize[1] - newAddSize[1],
     ]);
-
     // Update buttons records
     updateTabSizes();
   });

From e6f5ad85413dff2eda6638dfebf174bbcbdb1edc Mon Sep 17 00:00:00 2001
From: yexu <huangyongxi.hyx@digital-engine.com>
Date: Wed, 26 Jul 2023 16:28:05 +0800
Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E8=AE=A1=E7=AE=97?=
 =?UTF-8?q?=E8=A7=84=E5=88=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useVisibleRange.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useVisibleRange.ts b/src/hooks/useVisibleRange.ts
index 5dafe8e5..1e8fa3f9 100644
--- a/src/hooks/useVisibleRange.ts
+++ b/src/hooks/useVisibleRange.ts
@@ -38,7 +38,7 @@ export default function useVisibleRange(
     let endIndex = len;
     for (let i = 0; i < len; i += 1) {
       const offset = tabOffsets.get(tabs[i].key) || DEFAULT_SIZE;
-      if (offset[position] + offset[charUnit] > transformSize + visibleTabContentValue) {
+      if (offset[position] + offset[charUnit] - 2 > transformSize + visibleTabContentValue) {
         endIndex = i - 1;
         break;
       }

From 72bc9036f35f4336699df41407897b7250cdb4b2 Mon Sep 17 00:00:00 2001
From: yexu <huangyongxi.hyx@digital-engine.com>
Date: Wed, 26 Jul 2023 16:31:48 +0800
Subject: [PATCH 3/3] fix: reset offset excute

---
 src/TabNavList/index.tsx | 22 ++++++++--------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/src/TabNavList/index.tsx b/src/TabNavList/index.tsx
index c7007fc3..f2899fa7 100644
--- a/src/TabNavList/index.tsx
+++ b/src/TabNavList/index.tsx
@@ -52,8 +52,8 @@ export interface TabNavListProps {
 }
 
 const getSize = (refObj: React.RefObject<HTMLElement>): SizeInfo => {
-  const { width = 0, height = 0 } = refObj?.current?.getBoundingClientRect() || {};
-  return [width, height];
+  const { offsetWidth = 0, offsetHeight = 0 } = refObj.current || {};
+  return [offsetWidth, offsetHeight];
 };
 
 /**
@@ -315,24 +315,17 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
           `[data-node-key="${genDataNodeKey(key)}"]`,
         );
         if (btnNode) {
-          const {
-            width = 0,
-            height = 0,
-            left = 0,
-            top = 0,
-          } = btnNode.getBoundingClientRect() || {};
-          const { left: parentLeft = 0, top: parentTop = 0 } =
-            tabListRef?.current?.getBoundingClientRect() || {};
           newSizes.set(key, {
-            width,
-            height,
-            left: left - parentLeft,
-            top: top - parentTop,
+            width: btnNode.offsetWidth,
+            height: btnNode.offsetHeight,
+            left: btnNode.offsetLeft,
+            top: btnNode.offsetTop,
           });
         }
       });
       return newSizes;
     });
+
   useEffect(() => {
     updateTabSizes();
   }, [tabs.map(tab => tab.key).join('_')]);
@@ -359,6 +352,7 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
       tabContentFullSize[0] - newAddSize[0],
       tabContentFullSize[1] - newAddSize[1],
     ]);
+
     // Update buttons records
     updateTabSizes();
   });