From 440412ac408ec367882d85575b0941f3ddc85e0a Mon Sep 17 00:00:00 2001 From: Artem Panchuk Date: Wed, 23 Oct 2024 13:44:41 +0300 Subject: [PATCH 1/2] fix(AdaptiveTabs): fix calc of tabs width when chosen tab is after first hidden tab --- src/components/AdaptiveTabs/AdaptiveTabs.tsx | 26 ++++++++++++++------ 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/src/components/AdaptiveTabs/AdaptiveTabs.tsx b/src/components/AdaptiveTabs/AdaptiveTabs.tsx index 1d26661e..76c1193b 100644 --- a/src/components/AdaptiveTabs/AdaptiveTabs.tsx +++ b/src/components/AdaptiveTabs/AdaptiveTabs.tsx @@ -353,7 +353,9 @@ export class AdaptiveTabs extends React.Component, Adapt this.tabsWidth[i] = width; } - this.switcherWidth = this.selectSwitcherNode.current?.getBoundingClientRect().width || 0; + this.switcherWidth = + (this.selectSwitcherNode.current?.getBoundingClientRect().width || 0) + + this.tabItemPaddingRight; this.setState({dimensionsWereCollected: true}); @@ -389,6 +391,7 @@ export class AdaptiveTabs extends React.Component, Adapt /* Recalculating the Layout - Phases 1 and 2 */ + // eslint-disable-next-line complexity recalculateTabs = () => { if (!this.tabsRootNode.current) { return; @@ -436,8 +439,10 @@ export class AdaptiveTabs extends React.Component, Adapt of the switcher width will not exceed the width of the container */ for (let i = 0; i < this.tabsWidth.length; i++) { renderedTabsSumWidth = renderedTabsSumWidth + this.tabsWidth[i]; - const switcherWidthCorrection = i >= items.length - 1 ? 0 : this.switcherWidth; - const isOverflown = renderedTabsSumWidth + switcherWidthCorrection > tabsRootNodeWidth; + const switcherWidthCorrection = i === items.length - 1 ? 0 : this.switcherWidth; + const isOverflown = + renderedTabsSumWidth + switcherWidthCorrection + this.tabItemPaddingRight > + tabsRootNodeWidth; if (firstHiddenTabIndexForSequentialCase === null && isOverflown) { firstHiddenTabIndexForSequentialCase = i; @@ -456,6 +461,10 @@ export class AdaptiveTabs extends React.Component, Adapt } } + if (tabChosenFromSelectIndex > -1) { + maxHiddenTabWidth = this.tabsWidth[tabChosenFromSelectIndex]; + } + if (maxHiddenTabWidth && typeof firstHiddenTabIndexForSequentialCase === 'number') { let rightSpace = maxHiddenTabWidth - emptySpace; @@ -465,10 +474,7 @@ export class AdaptiveTabs extends React.Component, Adapt firstHiddenTabIndex = firstHiddenTabIndexForSequentialCase; for (let j = firstHiddenTabIndexForSequentialCase - 1; j >= 0; j--) { - // We need to use maxHiddenTabWidth instead of tabWidth[i], - // beacause the tab, that we are going to render at index j - // may be active tab, which can be wider than real tab at index j - rightSpace = rightSpace - maxHiddenTabWidth; + rightSpace = rightSpace - this.tabsWidth[j]; if (rightSpace < 0) { firstHiddenTabIndex = j + (tabChosenFromSelectIndex > j ? 0 : 1); @@ -507,6 +513,10 @@ export class AdaptiveTabs extends React.Component, Adapt this.setState({firstHiddenTabIndex}); + if (firstHiddenTabIndex > tabChosenFromSelectIndex) { + this.setState({tabChosenFromSelectId: null}); + } + /*phase 1 is complete, call the method of adjusting the width of the overflowing tabs to fill the entire width of the container*/ this.setUpOverflownTabs(firstHiddenTabIndex, activeTabIndex, tabsRootNodeWidth); @@ -845,7 +855,7 @@ export class AdaptiveTabs extends React.Component, Adapt const maxWidth = dimensionsWereCollected && typeof this.overflownTabsCurrentWidth[tabIndex] === 'number' - ? this.overflownTabsCurrentWidth[tabIndex] - this.tabItemPaddingRight + ? this.overflownTabsCurrentWidth[tabIndex] + this.tabItemPaddingRight : `${this.tabMaxWidthInPercentsForScreenSize[currentContainerWidthName!]}%`; const tabNode = ; From 3e639573000f8f5da9edfc1ce113278e70446f2f Mon Sep 17 00:00:00 2001 From: Artem Panchuk Date: Wed, 23 Oct 2024 15:33:34 +0300 Subject: [PATCH 2/2] fix(AdaptiveTabs): adjust paddings --- src/components/AdaptiveTabs/AdaptiveTabs.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/AdaptiveTabs/AdaptiveTabs.tsx b/src/components/AdaptiveTabs/AdaptiveTabs.tsx index 76c1193b..29cb70ef 100644 --- a/src/components/AdaptiveTabs/AdaptiveTabs.tsx +++ b/src/components/AdaptiveTabs/AdaptiveTabs.tsx @@ -353,9 +353,7 @@ export class AdaptiveTabs extends React.Component, Adapt this.tabsWidth[i] = width; } - this.switcherWidth = - (this.selectSwitcherNode.current?.getBoundingClientRect().width || 0) + - this.tabItemPaddingRight; + this.switcherWidth = this.selectSwitcherNode.current?.getBoundingClientRect().width || 0; this.setState({dimensionsWereCollected: true}); @@ -440,9 +438,7 @@ export class AdaptiveTabs extends React.Component, Adapt for (let i = 0; i < this.tabsWidth.length; i++) { renderedTabsSumWidth = renderedTabsSumWidth + this.tabsWidth[i]; const switcherWidthCorrection = i === items.length - 1 ? 0 : this.switcherWidth; - const isOverflown = - renderedTabsSumWidth + switcherWidthCorrection + this.tabItemPaddingRight > - tabsRootNodeWidth; + const isOverflown = renderedTabsSumWidth + switcherWidthCorrection > tabsRootNodeWidth; if (firstHiddenTabIndexForSequentialCase === null && isOverflown) { firstHiddenTabIndexForSequentialCase = i;