|
|
|
@ -62,15 +62,24 @@ export const TabsUI = (props: TabsUIProps) => { |
|
|
|
|
}, []) |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className="remix-ui-tabs border-0 header nav-tabs"> |
|
|
|
|
<div className="d-flex flex-row justify-content-center align-items-center m-1 mt-2"> |
|
|
|
|
<span data-id="tabProxyZoomOut" className="btn btn-sm px-2 fas fa-search-minus text-dark" title="Zoom out" onClick={() => props.onZoomOut()}></span> |
|
|
|
|
<span data-id="tabProxyZoomIn" className="btn btn-sm px-2 fas fa-search-plus text-dark" title="Zoom in" onClick={() => props.onZoomIn()}></span> |
|
|
|
|
<div className="remix-ui-tabs d-flex justify-content-between border-0 header nav-tabs"> |
|
|
|
|
<div className="d-flex flex-row" style={ { maxWidth: 'fit-content', width: '97%' } }> |
|
|
|
|
<div className="d-flex flex-row justify-content-center align-items-center m-1 mt-2"> |
|
|
|
|
<span data-id="tabProxyZoomOut" className="btn btn-sm px-2 fas fa-search-minus text-dark" title="Zoom out" onClick={() => props.onZoomOut()}></span> |
|
|
|
|
<span data-id="tabProxyZoomIn" className="btn btn-sm px-2 fas fa-search-plus text-dark" title="Zoom in" onClick={() => props.onZoomIn()}></span> |
|
|
|
|
</div> |
|
|
|
|
<Tabs |
|
|
|
|
className="tab-scroll" |
|
|
|
|
selectedIndex={selectedIndex} |
|
|
|
|
onSelect={index => { props.onSelect(index); currentIndexRef.current = index; setSelectedIndex(index) }} |
|
|
|
|
> |
|
|
|
|
<TabList className="d-flex flex-row justify-content-center align-items-center"> |
|
|
|
|
{props.tabs.map((tab, i) => <Tab className="py-1" key={tab.name}>{renderTab(tab, i)}</Tab>)} |
|
|
|
|
</TabList> |
|
|
|
|
{props.tabs.map((tab) => <TabPanel key={tab.name} ></TabPanel>)} |
|
|
|
|
</Tabs> |
|
|
|
|
</div> |
|
|
|
|
<Tabs className="tab-scroll" selectedIndex={selectedIndex} onSelect={index => { props.onSelect(index); currentIndexRef.current = index; setSelectedIndex(index) }} > |
|
|
|
|
<TabList className="d-flex flex-row justify-content-center align-items-center">{props.tabs.map((tab, i) => <Tab className="py-1" key={tab.name}>{renderTab(tab, i)}</Tab>)}</TabList> |
|
|
|
|
{props.tabs.map((tab) => <TabPanel key={tab.name} ></TabPanel>)} |
|
|
|
|
</Tabs> |
|
|
|
|
<i className="mt-2 mr-2 fas fa-arrows-alt-h" title="Scroll to see all tabs"></i> |
|
|
|
|
</div> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|