fix: Overflow of add button should also show the dropdown (#299)

* refactor

* remove overflow add size

* fix scroll logic

* format number

* add test case

Author: zombieJ

examples/mix.tsx

@@ -160,7 +160,7 @@ export default () => {
             tabBarExtraContent="extra"
             defaultActiveKey="30"
             moreIcon="..."
-            moreTransitionName="233"
+            // moreTransitionName="233"
             style={{ height: fixHeight ? 300 : null }}
           >
             {tabPanes}

src/TabNavList/index.tsx

@@ -84,8 +84,12 @@ 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);
+  const [addHeight, setAddHeight] = useState<number>(0);
 
   const [tabSizes, setTabSizes] = useRafState<TabSizeMap>(new Map());
   const tabOffsets = useOffsets(tabs, tabSizes, wrapperScrollWidth);
@@ -226,19 +230,17 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
       left: transformLeft,
       top: transformTop,
     },
+    {
+      width: wrapperContentWidth,
+      height: wrapperContentHeight,
+    },
+    {
+      width: addWidth,
+      height: addHeight,
+    },
     { ...props, tabs },
   );
 
-  function getAdditionalSpaceSize(type: 'offsetWidth' | 'offsetHeight') {
-    const addBtnSize = innerAddButtonRef.current?.[type] || 0;
-    let optionsSize = 0;
-    if (operationsRef.current?.className.includes(operationsHiddenClassName)) {
-      optionsSize = operationsRef.current[type];
-    }
-
-    return addBtnSize + optionsSize;
-  }
-
   const tabNodes: React.ReactElement[] = tabs.map(tab => {
     const { key } = tab;
     return (
@@ -280,14 +282,25 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
     // Update wrapper records
     const offsetWidth = tabsWrapperRef.current?.offsetWidth || 0;
     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);
-    setWrapperScrollWidth(
-      (tabListRef.current?.offsetWidth || 0) - getAdditionalSpaceSize('offsetWidth'),
-    );
-    setWrapperScrollHeight(
-      (tabListRef.current?.offsetHeight || 0) - getAdditionalSpaceSize('offsetHeight'),
-    );
+    setAddWidth(newAddWidth);
+    setAddHeight(newAddHeight);
+
+    const newWrapperScrollWidth = (tabListRef.current?.offsetWidth || 0) - newAddWidth;
+    const newWrapperScrollHeight = (tabListRef.current?.offsetHeight || 0) - newAddHeight;
+
+    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(() => {
@@ -355,7 +368,7 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
   // Should recalculate when rtl changed
   useEffect(() => {
     onListHolderResize();
-  }, [rtl, tabBarGutter, activeKey, tabs.map((tab) => tab.key).join('_')]);
+  }, [rtl, tabBarGutter, activeKey, tabs.map(tab => tab.key).join('_')]);
 
   // ========================= Render ========================
   const hasDropdown = !!hiddenTabs.length;
@@ -410,14 +423,13 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
               }}
             >
               {tabNodes}
-              {!hasDropdown && (
-                <AddButton
-                  ref={innerAddButtonRef}
-                  prefixCls={prefixCls}
-                  locale={locale}
-                  editable={editable}
-                />
-              )}
+              <AddButton
+                ref={innerAddButtonRef}
+                prefixCls={prefixCls}
+                locale={locale}
+                editable={editable}
+                style={{ visibility: hasDropdown ? 'hidden' : null }}
+              />
 
               <div
                 className={classNames(`${prefixCls}-ink-bar`, {

src/hooks/useVisibleRange.ts

@@ -7,6 +7,8 @@ const DEFAULT_SIZE = { width: 0, height: 0, left: 0, top: 0, right: 0 };
 export default function useVisibleRange(
   tabOffsets: TabOffsetMap,
   containerSize: { width: number; height: number; left: number; top: number },
+  tabContentNodeSize: { width: number; height: number },
+  addNodeSize: { width: number; height: number },
   { tabs, tabPosition, rtl }: { tabs: Tab[] } & TabNavListProps,
 ): [number, number] {
   let unit: 'width' | 'height';
@@ -24,6 +26,13 @@ export default function useVisibleRange(
   }
 
   const basicSize = containerSize[unit];
+  const tabContentSize = tabContentNodeSize[unit];
+  const addSize = addNodeSize[unit];
+
+  let mergedBasicSize = basicSize;
+  if (tabContentSize + addSize > basicSize) {
+    mergedBasicSize = basicSize - addSize;
+  }
 
   return useMemo(() => {
     if (!tabs.length) {
@@ -34,7 +43,7 @@ export default function useVisibleRange(
     let endIndex = len;
     for (let i = 0; i < len; i += 1) {
       const offset = tabOffsets.get(tabs[i].key) || DEFAULT_SIZE;
-      if (offset[position] + offset[unit] > transformSize + basicSize) {
+      if (offset[position] + offset[unit] > transformSize + mergedBasicSize) {
         endIndex = i - 1;
         break;
       }
@@ -50,5 +59,12 @@ export default function useVisibleRange(
     }
 
     return [startIndex, endIndex];
-  }, [tabOffsets, transformSize, basicSize, tabPosition, tabs.map(tab => tab.key).join('_'), rtl]);
+  }, [
+    tabOffsets,
+    transformSize,
+    mergedBasicSize,
+    tabPosition,
+    tabs.map(tab => tab.key).join('_'),
+    rtl,
+  ]);
 }

tests/common/util.tsx

@@ -3,7 +3,9 @@ import { ReactWrapper } from 'enzyme';
 import Tabs, { TabPane } from '../../src';
 import { TabsProps } from '../../src/Tabs';
 
-export function getOffsetSizeFunc(info: any = {}) {
+export function getOffsetSizeFunc(
+  info: { list?: number; wrapper?: number; add?: number; operation?: number } = {},
+) {
   return function getOffsetSize() {
     if (this.className.includes('rc-tabs-tab')) {
       return 20;
@@ -12,10 +14,13 @@ export function getOffsetSizeFunc(info: any = {}) {
       return info.list || 5 * 20;
     }
     if (this.className.includes('rc-tabs-nav-wrap')) {
-      return 40;
+      return info.wrapper || 40;
+    }
+    if (this.className.includes('rc-tabs-nav-add')) {
+      return info.add || 10;
     }
     if (this.className.includes('rc-tabs-nav-operations')) {
-      return 10;
+      return info.operation || 10;
     }
 
     throw new Error(`className not match ${this.className}`);

tests/operation-overflow.test.tsx

@@ -0,0 +1,65 @@
+import { mount } from 'enzyme';
+import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import { act } from 'react-dom/test-utils';
+import { getOffsetSizeFunc, getTabs, triggerResize } from './common/util';
+
+describe('Tabs.Operation-Overflow', () => {
+  let domSpy: ReturnType<typeof spyElementPrototypes>;
+  let holder: HTMLDivElement;
+
+  const hackOffsetInfo = { wrapper: 105, list: 110, add: 10, operation: 20 };
+
+  beforeAll(() => {
+    holder = document.createElement('div');
+    document.body.appendChild(holder);
+
+    function btnOffsetPosition() {
+      const btn = this as HTMLButtonElement;
+      const btnList = [...btn.parentNode.childNodes].filter(ele =>
+        (ele as HTMLElement).className.includes('rc-tabs-tab'),
+      );
+      const index = btnList.indexOf(btn);
+      return 20 * index;
+    }
+
+    domSpy = spyElementPrototypes(HTMLElement, {
+      scrollIntoView: () => {},
+      offsetWidth: {
+        get: getOffsetSizeFunc(hackOffsetInfo),
+      },
+      offsetHeight: {
+        get: getOffsetSizeFunc(hackOffsetInfo),
+      },
+      offsetLeft: {
+        get: btnOffsetPosition,
+      },
+      offsetTop: {
+        get: btnOffsetPosition,
+      },
+    });
+  });
+
+  afterAll(() => {
+    domSpy.mockRestore();
+    document.body.removeChild(holder);
+  });
+
+  it('should collapse', () => {
+    jest.useFakeTimers();
+    const onEdit = jest.fn();
+    const wrapper = mount(getTabs({ editable: { onEdit } }));
+
+    triggerResize(wrapper);
+    act(() => {
+      jest.runAllTimers();
+      wrapper.update();
+    });
+    expect(
+      wrapper.find('.rc-tabs-nav-operations').hasClass('rc-tabs-nav-operations-hidden'),
+    ).toBeFalsy();
+
+    wrapper.unmount();
+
+    jest.useRealTimers();
+  });
+});