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

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;