You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
1.8 KiB
63 lines
1.8 KiB
import React from "react"; |
|
|
|
const Tabbar = ({ tabs, delTab, setActivateTab, activeTab }) => { |
|
return ( |
|
<ul |
|
className="tabbar flex no-scrollbar overflow-x-scroll scrolling-touch" |
|
onMouseDown={(e) => { |
|
const slider = window.document.querySelector(".tabbar"); |
|
window.isDown = true; |
|
window.startX = e.pageX - slider.offsetLeft; |
|
window.scrollLeft = slider.scrollLeft; |
|
}} |
|
onMouseLeave={(e) => { |
|
window.isDown = false; |
|
}} |
|
onMouseUp={(e) => { |
|
window.isDown = false; |
|
}} |
|
onMouseMove={(e) => { |
|
const slider = window.document.querySelector(".tabbar"); |
|
if (!window.isDown) return; |
|
e.preventDefault(); |
|
const x = e.pageX - slider.offsetLeft; |
|
const walk = (x - window.startX) * 1; |
|
slider.scrollLeft = window.scrollLeft - walk; |
|
}} |
|
> |
|
{tabs.map((el, index) => ( |
|
<li |
|
key={index} |
|
onClick={(e) => { |
|
if (window.isDown) return e.preventDefault(); |
|
}} |
|
aria-current="page" |
|
className="flex flex-row items-center text-sm text-center active rounded-sm px-4" |
|
style={{ |
|
backgroundColor: activeTab === el.id ? "#92c1fc" : "#F1F6FF", |
|
color: activeTab === el.id ? "#fff" : "#000", |
|
}} |
|
> |
|
<div className="h-full py-2" onClick={(e) => setActivateTab(el.id)}> |
|
{el.name} |
|
</div> |
|
{el.id ? ( |
|
<img |
|
src="images/ReactTable5zarbedar-icon.svg" |
|
className="w-2 mr-3" |
|
alt="" |
|
onClick={(e) => { |
|
e.preventDefault(); |
|
delTab(el.id); |
|
}} |
|
/> |
|
) : null} |
|
</li> |
|
))} |
|
</ul> |
|
); |
|
}; |
|
|
|
window.isDown = false; |
|
|
|
export default Tabbar;
|
|
|