Merge pull request #185 from insekkei/feature/tabs

fix(component): 修复多层 menu 父菜单切换后子菜单定位失败的问题

Author: honkinglin

src/menu/HeadMenu.tsx

@@ -28,6 +28,8 @@ const HeadMenu: FC<HeadMenuProps> = (props) => {
     return activeMenu.props.children;
   }, [children, value.expandType, value.active]);
 
+  const currentChildsValues = childs?.length > 0 ? childs.map((item) => item.props.value) : [];
+
   return (
     <MenuContext.Provider value={value}>
       <div
@@ -41,7 +43,10 @@ const HeadMenu: FC<HeadMenuProps> = (props) => {
         </div>
         {childs?.length > 0 && (
           <ul className={`${classPrefix}-head-menu__submenu ${classPrefix}-submenu`}>
-            <Tabs value={value.active} onChange={value.onChange}>
+            <Tabs
+              value={currentChildsValues.includes(value.active) ? value.active : currentChildsValues[0]}
+              onChange={value.onChange}
+            >
               {childs.map(({ props }) => (
                 <TabPanel value={props.value} key={props.value} label={props.children}></TabPanel>
               ))}

src/tabs/TabNav.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { AddIcon, ChevronLeftIcon, ChevronRightIcon } from 'tdesign-icons-react';
 import { TdTabsProps, TdTabPanelProps, TabValue } from './type';
@@ -36,17 +36,23 @@ const TabNav: React.FC<TabNavProps> = (props) => {
 
   // :todo 兼容老版本 TabBar 的实现
   const navContainerRef = useRef<HTMLDivElement>(null);
-  const getIndex = (value = activeValue) => {
-    let index = 0;
-    itemList.forEach((v, i) => {
-      if (v.value === value) {
-        index = i;
-      }
-    });
-    return index;
-  };
+  const getIndex = useCallback(
+    (value) => {
+      let index = 0;
+      itemList.forEach((v, i) => {
+        if (v.value === value) {
+          index = i;
+        }
+      });
+      return index;
+    },
+    [itemList],
+  );
 
-  const [activeIndex, setActiveIndex] = useState(getIndex());
+  const [activeIndex, setActiveIndex] = useState(getIndex(activeValue));
+  useEffect(() => {
+    setActiveIndex(getIndex(activeValue));
+  }, [activeValue, getIndex]);
 
   // 判断滚动条是否需要展示
   const [isScrollVisible, setIsScrollVisible] = useState(false);

src/tabs/TabNavItem.tsx

@@ -38,7 +38,6 @@ const TabNavItem: React.FC<TabNavItemProps> = (props) => {
 
   // 样式变量和常量定义
   const { tdTabsClassGenerator, tdClassGenerator, tdSizeClassGenerator } = useTabClass();
-
   const rippleRef = useRef();
   useRipple(rippleRef);
 

src/tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import classNames from 'classnames';
 import { TabValue, TdTabsProps } from './type';
 import forwardRefWithStatics from '../_util/forwardRefWithStatics';
@@ -12,7 +12,7 @@ export interface TabsProps extends TdTabsProps {
 
 const Tabs = forwardRefWithStatics(
   (props: TabsProps, ref) => {
-    const { children, placement, onRemove } = props;
+    const { children, placement, onRemove, value: tabValue } = props;
     let { defaultValue } = props;
 
     // 样式工具引入
@@ -32,6 +32,10 @@ const Tabs = forwardRefWithStatics(
 
     const [value, setValue] = useState<TabValue>(defaultValue);
 
+    useEffect(() => {
+      tabValue !== undefined && setValue(tabValue);
+    }, [tabValue]);
+
     const renderTabNav = () => (
       <TabNav {...props} activeValue={value} onRemove={onRemove} itemList={itemList} tabClick={setValue} />
     );