Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: dynamically calculate the sum of all tab widths
Browse files Browse the repository at this point in the history
Sam Ho committed Jan 6, 2025

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 9a79e28 commit e52c7fc
Showing 1 changed file with 11 additions and 2 deletions.
13 changes: 11 additions & 2 deletions packages/bruno-app/src/components/RequestTabs/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useRef } from 'react';
import React, { useState, useRef, useEffect } from 'react';
import find from 'lodash/find';
import filter from 'lodash/filter';
import classnames from 'classnames';
@@ -13,13 +13,22 @@ import StyledWrapper from './StyledWrapper';
const RequestTabs = () => {
const dispatch = useDispatch();
const tabsRef = useRef();
const tabElementsRef = useRef([]);
const [tabsWidth, setTabsWidth] = useState(0);
const [newRequestModalOpen, setNewRequestModalOpen] = useState(false);
const tabs = useSelector((state) => state.tabs.tabs);
const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
const collections = useSelector((state) => state.collections.collections);
const leftSidebarWidth = useSelector((state) => state.app.leftSidebarWidth);
const screenWidth = useSelector((state) => state.app.screenWidth);

useEffect(() => {
if (tabElementsRef.current.length > 0) {
const totalWidth = tabElementsRef.current.reduce((acc, el) => acc + el?.offsetWidth || 0, 0);
setTabsWidth(totalWidth + 34); // Add 34 for the (+) icon
}
}, [tabs]);

const getTabClassname = (tab, index) => {
return classnames('request-tab select-none', {
active: tab.uid === activeTabUid,
@@ -50,7 +59,6 @@ const RequestTabs = () => {
const collectionRequestTabs = filter(tabs, (t) => t.collectionUid === activeTab.collectionUid);

const maxTablistWidth = screenWidth - leftSidebarWidth - 150;
const tabsWidth = collectionRequestTabs.length * 150 + 34; // 34: (+)icon
const showChevrons = maxTablistWidth < tabsWidth;

const leftSlide = () => {
@@ -109,6 +117,7 @@ const RequestTabs = () => {
className={getTabClassname(tab, index)}
role="tab"
onClick={() => handleClick(tab)}
ref={(el) => (tabElementsRef.current[index] = el)}
>
<RequestTab
collectionRequestTabs={collectionRequestTabs}

0 comments on commit e52c7fc

Please sign in to comment.