fix(tabs): fix tabs tabPanel label change tabbar not update (#3134)

Tencent · Oct 14, 2024 · 097a9fb · 097a9fb
1 parent 6a6eacd
commit 097a9fb
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/tabs/TabBar.tsx b/src/tabs/TabBar.tsx
@@ -2,15 +2,17 @@ import React, { useEffect, useState, CSSProperties, useRef } from 'react';
 import classNames from 'classnames';
 import useConfig from '../hooks/useConfig';
 import useMutationObserver from '../hooks/useMutationObserver';
+import useResizeObserver from '../hooks/useResizeObserver';
 
 interface TabBarProps {
   tabPosition: string;
   activeId: string | number;
   containerRef: React.MutableRefObject<HTMLDivElement>;
+  navsWrapRef: React.MutableRefObject<HTMLDivElement>;
 }
 
 const TabBar: React.FC<TabBarProps> = (props) => {
-  const { tabPosition, activeId, containerRef } = props;
+  const { tabPosition, activeId, containerRef, navsWrapRef } = props;
   const { classPrefix } = useConfig();
   const [barStyle, setBarStyle] = useState<CSSProperties>({});
   const tabsClassPrefix = `${classPrefix}-tabs`;
@@ -66,6 +68,8 @@ const TabBar: React.FC<TabBarProps> = (props) => {
 
   useMutationObserver(containerRef.current, handleMutationObserver);
 
+  useResizeObserver(navsWrapRef.current, computeStyle);
+
   return (
     <div
       className={classNames({

diff --git a/src/tabs/TabNav.tsx b/src/tabs/TabNav.tsx
@@ -190,7 +190,7 @@ const TabNav: React.FC<TabNavProps> = (props) => {
 
   // TabBar 组件逻辑层抽象，卡片类型时无需展示，故将逻辑整合到此处
   const TabBarCom = isCard ? null : (
-    <TabBar tabPosition={placement} activeId={activeIndex} containerRef={navsWrapRef} />
+    <TabBar tabPosition={placement} activeId={activeIndex} containerRef={navsWrapRef} navsWrapRef={navsWrapRef} />
   );
 
   const handleTabItemRemove = (removeItem) => {