fix: more dropdown should not contain last tab if scrolled (#481)

react-component · Mar 2, 2022 · 729383f · 729383f · vercel · Mar 2, 2022
1 parent 3aeba5a
commit 729383f
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 28 deletions.
diff --git a/src/TabNavList/index.tsx b/src/TabNavList/index.tsx
@@ -117,8 +117,6 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
 
   const [wrapperScrollWidth, setWrapperScrollWidth] = useState<number>(0);
   const [wrapperScrollHeight, setWrapperScrollHeight] = useState<number>(0);
-  const [wrapperContentWidth, setWrapperContentWidth] = useState<number>(0);
-  const [wrapperContentHeight, setWrapperContentHeight] = useState<number>(0);
   const [wrapperWidth, setWrapperWidth] = useState<number>(null);
   const [wrapperHeight, setWrapperHeight] = useState<number>(null);
   const [addWidth, setAddWidth] = useState<number>(0);
@@ -265,8 +263,8 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
       top: transformTop,
     },
     {
-      width: wrapperContentWidth,
-      height: wrapperContentHeight,
+      width: wrapperScrollWidth,
+      height: wrapperScrollHeight,
     },
     {
       width: addWidth,
@@ -326,8 +324,6 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
     const offsetHeight = tabsWrapperRef.current?.offsetHeight || 0;
     const newAddWidth = innerAddButtonRef.current?.offsetWidth || 0;
     const newAddHeight = innerAddButtonRef.current?.offsetHeight || 0;
-    const newOperationWidth = operationsRef.current?.offsetWidth || 0;
-    const newOperationHeight = operationsRef.current?.offsetHeight || 0;
 
     setWrapperWidth(offsetWidth);
     setWrapperHeight(offsetHeight);
@@ -340,10 +336,6 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
     setWrapperScrollWidth(newWrapperScrollWidth);
     setWrapperScrollHeight(newWrapperScrollHeight);
 
-    const isOperationHidden = operationsRef.current?.className.includes(operationsHiddenClassName);
-    setWrapperContentWidth(newWrapperScrollWidth - (isOperationHidden ? 0 : newOperationWidth));
-    setWrapperContentHeight(newWrapperScrollHeight - (isOperationHidden ? 0 : newOperationHeight));
-
     // Update buttons records
     setTabSizes(() => {
       const newSizes: TabSizeMap = new Map();

diff --git a/src/hooks/useVisibleRange.ts b/src/hooks/useVisibleRange.ts
@@ -30,7 +30,7 @@ export default function useVisibleRange(
   const addSize = addNodeSize[unit];
 
   let mergedBasicSize = basicSize;
-  if (tabContentSize + addSize > basicSize) {
+  if (tabContentSize + addSize > basicSize && tabContentSize < basicSize) {
     mergedBasicSize = basicSize - addSize;
   }
 

diff --git a/tests/common/util.tsx b/tests/common/util.tsx
@@ -1,7 +1,8 @@
+/* eslint-disable @typescript-eslint/no-invalid-this */
 import React from 'react';
-import { ReactWrapper } from 'enzyme';
+import type { ReactWrapper } from 'enzyme';
 import Tabs, { TabPane } from '../../src';
-import { TabsProps } from '../../src/Tabs';
+import type { TabsProps } from '../../src/Tabs';
 
 export function getOffsetSizeFunc(
   info: {
@@ -18,7 +19,7 @@ export function getOffsetSizeFunc(
       return 20;
     }
     if (this.className.includes('rc-tabs-nav-list')) {
-      return info.list || 5 * 20;
+      return info.list || 5 * 20 + 10;
     }
     if (this.className.includes('rc-tabs-nav-wrap')) {
       return info.wrapper || 40;
@@ -85,9 +86,5 @@ export function getTabs(props: TabsProps = null) {
 }
 
 export function triggerResize(wrapper: ReactWrapper) {
-  (wrapper
-    .find('.rc-tabs-nav')
-    .find('ResizeObserver')
-    .first()
-    .props() as any).onResize();
+  (wrapper.find('.rc-tabs-nav').find('ResizeObserver').first().props() as any).onResize();
 }
diff --git a/tests/overflow.test.tsx b/tests/overflow.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { mount, ReactWrapper } from 'enzyme';
+import type { ReactWrapper } from 'enzyme';
+import { mount } from 'enzyme';
 import KeyCode from 'rc-util/lib/KeyCode';
 import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 import { act } from 'react-dom/test-utils';
@@ -25,7 +26,7 @@ describe('Tabs.Overflow', () => {
     function btnOffsetPosition() {
       // eslint-disable-next-line @typescript-eslint/no-invalid-this
       const btn = this as HTMLButtonElement;
-      const btnList = Array.from(btn.parentNode.childNodes).filter((ele) =>
+      const btnList = Array.from(btn.parentNode.childNodes).filter(ele =>
         (ele as HTMLElement).className.includes('rc-tabs-tab'),
       );
       const index = btnList.indexOf(btn);
@@ -81,7 +82,7 @@ describe('Tabs.Overflow', () => {
     jest.useRealTimers();
   });
 
-  [KeyCode.SPACE, KeyCode.ENTER].forEach((code) => {
+  [KeyCode.SPACE, KeyCode.ENTER].forEach(code => {
     it(`keyboard with select keycode: ${code}`, () => {
       jest.useFakeTimers();
       const onChange = jest.fn();
@@ -171,7 +172,7 @@ describe('Tabs.Overflow', () => {
           });
 
           // Wheel to move
-          const node = (wrapper.find('.rc-tabs-nav-wrap').instance() as unknown) as HTMLElement;
+          const node = wrapper.find('.rc-tabs-nav-wrap').instance() as unknown as HTMLElement;
 
           act(() => {
             const touchStart = new WheelEvent('wheel', {
@@ -218,7 +219,7 @@ describe('Tabs.Overflow', () => {
         });
 
         // Wheel to move
-        const node = (wrapper.find('.rc-tabs-nav-wrap').instance() as unknown) as HTMLElement;
+        const node = wrapper.find('.rc-tabs-nav-wrap').instance() as unknown as HTMLElement;
         const touchStart = new WheelEvent('wheel', {
           deltaX: 20,
           deltaY: 20,
@@ -322,7 +323,7 @@ describe('Tabs.Overflow', () => {
 
     list.forEach(({ name, trigger }) => {
       it(`remove by ${name} in dropdown menu`, () => {
-        console.log('run here')
+        console.log('run here');
         jest.useFakeTimers();
         const onEdit = jest.fn();
         const wrapper = mount(getTabs({ editable: { onEdit } }));
@@ -343,15 +344,34 @@ describe('Tabs.Overflow', () => {
 
         // Should be button to enable press SPACE key to trigger
         expect(first.instance() instanceof HTMLButtonElement).toBeTruthy();
-        
+
         expect(onEdit).toHaveBeenCalledWith('remove', {
-          key: 'bamboo',
+          key: 'cute',
           event: expect.anything(),
         });
 
         wrapper.unmount();
         jest.useRealTimers();
       });
     });
-  })
+  });
+
+  it('should calculate hidden tabs correctly', () => {
+    jest.useFakeTimers();
+    const onEdit = jest.fn();
+    const wrapper = mount(getTabs({ editable: { onEdit }, activeKey: 'miu' }));
+
+    triggerResize(wrapper);
+    act(() => {
+      jest.runAllTimers();
+      wrapper.update();
+    });
+
+    wrapper.find('.rc-tabs-nav-more').simulate('mouseenter');
+    act(() => {
+      jest.runAllTimers();
+      wrapper.update();
+    });
+    expect(wrapper.find('.rc-tabs-dropdown-menu').first().text()).not.toContain('miu');
+  });
 });