bruno/renderer/components/RequestTabs/index.js

145 lines
5.4 KiB
JavaScript
Raw Normal View History

2022-03-22 13:48:20 +01:00
import React, { useState, useRef } from 'react';
2022-03-11 17:49:11 +01:00
import find from 'lodash/find';
import filter from 'lodash/filter';
2021-12-03 21:33:46 +01:00
import classnames from 'classnames';
2022-03-22 13:48:20 +01:00
import { IconHome2, IconChevronRight, IconChevronLeft } from '@tabler/icons';
import { useSelector, useDispatch } from 'react-redux';
2022-03-22 13:48:20 +01:00
import { focusTab } from 'providers/ReduxStore/slices/tabs';
import NewRequest from 'components/Sidebar/NewRequest';
2022-03-13 08:48:15 +01:00
import CollectionToolBar from './CollectionToolBar';
2022-03-22 13:48:20 +01:00
import RequestTab from './RequestTab';
2021-12-03 21:33:46 +01:00
import StyledWrapper from './StyledWrapper';
2022-03-11 17:49:11 +01:00
const RequestTabs = () => {
2022-03-22 13:48:20 +01:00
const dispatch = useDispatch();
const tabsRef = useRef();
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);
2022-03-22 13:48:20 +01:00
const leftSidebarWidth = useSelector((state) => state.app.leftSidebarWidth);
const screenWidth = useSelector((state) => state.app.screenWidth);
2022-03-11 17:49:11 +01:00
const getTabClassname = (tab, index) => {
2021-12-03 21:33:46 +01:00
return classnames("request-tab select-none", {
'active': tab.uid === activeTabUid,
'last-tab': tabs && tabs.length && (index === tabs.length - 1)
2021-12-03 21:33:46 +01:00
});
};
const handleClick = (tab) => {
dispatch(focusTab({
uid: tab.uid
}));
2021-12-03 21:33:46 +01:00
};
2022-03-22 13:48:20 +01:00
const createNewTab = () => setNewRequestModalOpen(true);
if(!activeTabUid) {
2022-03-11 17:49:11 +01:00
return null;
}
const activeTab = find(tabs, (t) => t.uid === activeTabUid);
if(!activeTab) {
return (
<StyledWrapper>
Something went wrong!
</StyledWrapper>
);
}
const activeCollection = find(collections, (c) => c.uid === activeTab.collectionUid);
const collectionRequestTabs = filter(tabs, (t) => t.collectionUid === activeTab.collectionUid);
2022-03-22 13:48:20 +01:00
const maxTablistWidth = screenWidth - leftSidebarWidth - 150;
const tabsWidth = (collectionRequestTabs.length * 150) + 34; // 34: (+)icon
const showChevrons = maxTablistWidth < tabsWidth;
2022-03-18 20:35:43 +01:00
2022-03-22 13:48:20 +01:00
const leftSlide = () => {
tabsRef.current.scrollBy({
left: -120,
behavior: 'smooth'
});
};
2022-03-22 13:48:20 +01:00
// todo: bring new tab to focus if its not in focus
// tabsRef.current.scrollLeft
const rightSlide = () => {
tabsRef.current.scrollBy({
left: 120,
behavior: 'smooth'
});
};
const getRootClassname = () => {
return classnames({
'has-chevrons': showChevrons
});
};
2022-03-11 17:49:11 +01:00
2021-12-03 21:33:46 +01:00
return (
2022-03-22 13:48:20 +01:00
<StyledWrapper className={getRootClassname()}>
{newRequestModalOpen && <NewRequest isEphermal={true} collection={activeCollection} onClose={() => setNewRequestModalOpen(false)}/>}
2022-03-11 17:49:11 +01:00
{collectionRequestTabs && collectionRequestTabs.length ? (
<>
2022-03-13 08:48:15 +01:00
<CollectionToolBar collection={activeCollection}/>
2022-03-22 13:48:20 +01:00
<div className="flex items-center pl-4">
2022-03-11 17:49:11 +01:00
<ul role="tablist">
2022-03-22 13:48:20 +01:00
{showChevrons ? (
<li className="select-none short-tab" onClick={leftSlide}>
<div className="flex items-center">
<IconChevronLeft size={18} strokeWidth={1.5}/>
</div>
</li>
) : null}
{/* Moved to post mvp */}
{/* <li className="select-none new-tab mr-1" onClick={createNewTab}>
2022-03-11 17:49:11 +01:00
<div className="flex items-center home-icon-container">
<IconHome2 size={18} strokeWidth={1.5}/>
</div>
2022-03-22 13:48:20 +01:00
</li> */}
</ul>
<ul role="tablist" style={{maxWidth: maxTablistWidth}} ref={tabsRef}>
{collectionRequestTabs && collectionRequestTabs.length ? collectionRequestTabs.map((tab, index) => {
2022-03-22 13:48:20 +01:00
return (
<li key={tab.uid} className={getTabClassname(tab, index)} role="tab" onClick={() => handleClick(tab)}>
<RequestTab key={tab.uid} tab={tab} collection={activeCollection} activeTab={activeTab}/>
</li>
)
}) : null}
</ul>
<ul role="tablist">
{showChevrons ? (
<li className="select-none short-tab" onClick={rightSlide}>
<div className="flex items-center">
<IconChevronRight size={18} strokeWidth={1.5}/>
2022-03-11 17:49:11 +01:00
</div>
</li>
2022-03-22 13:48:20 +01:00
) : null}
<li className={`select-none short-tab ${showChevrons ? '' : 'ml-1'}`} onClick={createNewTab}>
2022-03-11 17:49:11 +01:00
<div className="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</svg>
2021-12-03 21:33:46 +01:00
</div>
2022-03-11 17:49:11 +01:00
</li>
2022-03-22 13:48:20 +01:00
{/* Moved to post mvp */}
{/* <li className="select-none new-tab choose-request">
2022-03-11 17:49:11 +01:00
<div className="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
</svg>
</div>
2022-03-22 13:48:20 +01:00
</li> */}
2022-03-11 17:49:11 +01:00
</ul>
</div>
</>
2022-01-06 19:37:32 +01:00
) : null}
2021-12-03 21:33:46 +01:00
</StyledWrapper>
);
};
export default RequestTabs;