diff --git a/src/TabNavList/index.tsx b/src/TabNavList/index.tsx index 20a3d926..6e1f82e7 100644 --- a/src/TabNavList/index.tsx +++ b/src/TabNavList/index.tsx @@ -117,8 +117,6 @@ function TabNavList(props: TabNavListProps, ref: React.Ref) { const [wrapperScrollWidth, setWrapperScrollWidth] = useState(0); const [wrapperScrollHeight, setWrapperScrollHeight] = useState(0); - const [wrapperContentWidth, setWrapperContentWidth] = useState(0); - const [wrapperContentHeight, setWrapperContentHeight] = useState(0); const [wrapperWidth, setWrapperWidth] = useState(null); const [wrapperHeight, setWrapperHeight] = useState(null); const [addWidth, setAddWidth] = useState(0); @@ -265,8 +263,8 @@ function TabNavList(props: TabNavListProps, ref: React.Ref) { top: transformTop, }, { - width: wrapperContentWidth, - height: wrapperContentHeight, + width: wrapperScrollWidth, + height: wrapperScrollHeight, }, { width: addWidth, @@ -326,8 +324,6 @@ function TabNavList(props: TabNavListProps, ref: React.Ref) { 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) { 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 index 7f665479..0b8ed209 100644 --- 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 index e8138cd0..104158fa 100644 --- 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 index 0784f6f9..7ea64feb 100644 --- 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,9 +344,9 @@ 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(), }); @@ -353,5 +354,24 @@ describe('Tabs.Overflow', () => { 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'); + }); });