feat: fix resize (react-component#620)

* feat: fix resize * feat: update test case * feat: update tabsSize * fate: update * feat: update tabsSize * feat: update tabsSize for reviewer
rickwargo · Dec 7, 2022 · 0814c1a · 0814c1a
1 parent b2ed47a
commit 0814c1a
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 18 deletions.
diff --git a/src/TabNavList/index.tsx b/src/TabNavList/index.tsx
@@ -310,6 +310,28 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
     );
   });
 
+  // Update buttons records
+  const updateTabSizes = () =>
+    setTabSizes(() => {
+      const newSizes: TabSizeMap = new Map();
+      tabs.forEach(({ key }) => {
+        const btnNode = getBtnRef(key).current;
+        if (btnNode) {
+          newSizes.set(key, {
+            width: btnNode.offsetWidth,
+            height: btnNode.offsetHeight,
+            left: btnNode.offsetLeft,
+            top: btnNode.offsetTop,
+          });
+        }
+      });
+      return newSizes;
+    });
+
+  useEffect(() => {
+    updateTabSizes();
+  }, [tabs.map(tab => tab.key).join('_')]);
+
   const onListHolderResize = useRaf(() => {
     // Update wrapper records
     const containerSize = getSize(containerRef);
@@ -332,23 +354,6 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
       tabContentFullSize[0] - newAddSize[0],
       tabContentFullSize[1] - newAddSize[1],
     ]);
-
-    // Update buttons records
-    setTabSizes(() => {
-      const newSizes: TabSizeMap = new Map();
-      tabs.forEach(({ key }) => {
-        const btnNode = getBtnRef(key).current;
-        if (btnNode) {
-          newSizes.set(key, {
-            width: btnNode.offsetWidth,
-            height: btnNode.offsetHeight,
-            left: btnNode.offsetLeft,
-            top: btnNode.offsetTop,
-          });
-        }
-      });
-      return newSizes;
-    });
   });
 
   // ======================== Dropdown =======================

diff --git a/tests/common/util.tsx b/tests/common/util.tsx
@@ -47,6 +47,10 @@ export function getOffsetSizeFunc(info: HackInfo = {}) {
       return more;
     }
 
+    if (this.classList.contains('rc-tabs-ink-bar')) {
+      return container;
+    }
+
     if (this.classList.contains('rc-tabs-nav-operations')) {
       return this.querySelector('.rc-tabs-nav-add') ? more + add : more;
     }

diff --git a/tests/index.test.tsx b/tests/index.test.tsx
@@ -1,12 +1,44 @@
 import React from 'react';
 import type { ReactWrapper } from 'enzyme';
-import { render } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/dom';
 import { mount } from 'enzyme';
+import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 import KeyCode from 'rc-util/lib/KeyCode';
 import Tabs from '../src';
 import type { TabsProps } from '../src/Tabs';
+import type { HackInfo } from './common/util';
+import { getOffsetSizeFunc } from './common/util';
 
 describe('Tabs.Basic', () => {
+  let domSpy: ReturnType<typeof spyElementPrototypes>;
+  let holder: HTMLDivElement;
+
+  const hackOffsetInfo: HackInfo = {};
+
+  beforeEach(() => {
+    Object.keys(hackOffsetInfo).forEach(key => {
+      delete hackOffsetInfo[key];
+    });
+  });
+
+  beforeAll(() => {
+    holder = document.createElement('div');
+    document.body.appendChild(holder);
+
+    domSpy = spyElementPrototypes(HTMLElement, {
+      scrollIntoView: () => {},
+      offsetWidth: {
+        get: getOffsetSizeFunc(hackOffsetInfo),
+      },
+    });
+  });
+
+  afterAll(() => {
+    domSpy.mockRestore();
+    document.body.removeChild(holder);
+  });
+
   function getTabs(props: TabsProps = null) {
     const mergedProps = {
       items: [
@@ -86,6 +118,60 @@ describe('Tabs.Basic', () => {
     mount(getTabs({ items: null }));
   });
 
+  it('same width in windows call resize', async () => {
+    const App = () => {
+      const [list, setList] = React.useState([
+        {
+          label: `Tab 1`,
+          key: '1',
+          children: `Content of Tab Pane 1`,
+        },
+        {
+          label: `Tab 2`,
+          key: '2',
+          children: `Content of Tab Pane 2`,
+        },
+        {
+          label: `Tab 3`,
+          key: '3',
+          children: `Content of Tab Pane 3`,
+        },
+      ]);
+      const changeItems = () => {
+        const listCp = [
+          {
+            label: `Tab 4`,
+            key: '4',
+            children: `Content of Tab Pane 4`,
+          },
+          {
+            label: `Tab 5`,
+            key: '5',
+            children: `Content of Tab Pane 5`,
+          },
+          {
+            label: `Tab 6`,
+            key: '6',
+            children: `Content of Tab Pane 6`,
+          },
+        ];
+        setList(listCp);
+      };
+      return (
+        <div className="App">
+          <button id="changeItems" onClick={changeItems}>
+            change
+          </button>
+          <Tabs items={list} />
+        </div>
+      );
+    };
+
+    const { container } = render(<App />);
+    fireEvent.click(screen.getByRole('button', { name: 'change' }));
+    expect(container.querySelector<HTMLElement>('.rc-tabs-ink-bar').offsetWidth).toBe(50);
+  });
+
   describe('onChange and onTabClick should work', () => {
     const list: { name: string; trigger: (wrapper: ReactWrapper) => void }[] = [
       {