fix: 根据activeKey显示额外内容导致最后一个tab点击失效 (#662)

* fix: 根据activeKey显示额外内容导致最后一个tab点击失效 * fix: 添加动态extra demo * chore: back of origin resize --------- Co-authored-by: Bill <[email protected]> Co-authored-by: 二货机器人 <[email protected]>
react-component · Sep 6, 2023 · b0febf1 · b0febf1 · vercel · Sep 6, 2023
1 parent 0bce955
commit b0febf1
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 12 deletions.
diff --git a/docs/demo/dynamic-extra.md b/docs/demo/dynamic-extra.md
@@ -0,0 +1,8 @@
+---
+title: dynamic-extra
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/dynamic-extra.tsx"></code>
diff --git a/docs/examples/dynamic-extra.tsx b/docs/examples/dynamic-extra.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import Tabs from '../../src';
+import type { TabsProps } from '../../src';
+import '../../assets/index.less';
+
+const items: TabsProps['items'] = [];
+for (let i = 0; i < 50; i += 1) {
+  items.push({
+    key: String(i),
+    label: `Tab ${i}`,
+    children: `Content of ${i}`,
+  });
+}
+export default () => {
+  const [key, setKey] = React.useState('0');
+
+  const extra = React.useMemo(() => {
+    if (key === '0') {
+      return (
+        <div>额外内容</div>
+      )
+    } 
+    return null
+  }, [key])
+
+  return (
+    <div style={{ maxWidth: 550 }}>
+      <Tabs 
+        activeKey={key}
+        onChange={(curKey) => setKey(curKey)}
+        tabBarExtraContent={extra} 
+        defaultActiveKey="8" 
+        moreIcon="..." 
+        items={items} 
+      />
+    </div>
+  );
+};
diff --git a/src/TabNavList/index.tsx b/src/TabNavList/index.tsx
@@ -426,16 +426,17 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
       >
         <ExtraContent ref={extraLeftRef} position="left" extra={extra} prefixCls={prefixCls} />
 
-        <div
-          className={classNames(wrapPrefix, {
-            [`${wrapPrefix}-ping-left`]: pingLeft,
-            [`${wrapPrefix}-ping-right`]: pingRight,
-            [`${wrapPrefix}-ping-top`]: pingTop,
-            [`${wrapPrefix}-ping-bottom`]: pingBottom,
-          })}
-          ref={tabsWrapperRef}
-        >
-          <ResizeObserver onResize={onListHolderResize}>
+        <ResizeObserver onResize={onListHolderResize}>
+          <div
+            className={classNames(wrapPrefix, {
+              [`${wrapPrefix}-ping-left`]: pingLeft,
+              [`${wrapPrefix}-ping-right`]: pingRight,
+              [`${wrapPrefix}-ping-top`]: pingTop,
+              [`${wrapPrefix}-ping-bottom`]: pingBottom,
+            })}
+            ref={tabsWrapperRef}
+          >
+            <ResizeObserver onResize={onListHolderResize}>
             <div
               ref={tabListRef}
               className={`${prefixCls}-nav-list`}
@@ -463,8 +464,9 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
                 style={indicatorStyle}
               />
             </div>
-          </ResizeObserver>
-        </div>
+            </ResizeObserver>
+          </div>
+        </ResizeObserver>
 
         <OperationNode
           {...props}