import React, { useRef } from "react";
import BasicTable from "./BasicTable";
// import useDraggableScroll from "use-draggable-scroll";
const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {
return (
{/* breadCrumb */}
{breadCrumbs.map((breadCrumb, index) => (
{breadCrumb.name}
{Number(index) !== breadCrumbs.length - 1 && (
{" > "}
)}
))}
{/* page Title */}
{/* page Title */}
{/*
*/}
);
};
window.isDown = false;
export default ReactTable3;
function Tabbar({}) {
const ref = useRef(null);
// const { onMouseDown } = useDraggableScroll(ref);
const tabs = [
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
];
return (
{
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) => (
-
{
if (window.isDown) return e.preventDefault();
///do here
}}
aria-current="page"
className="inline-block py-4 px-4 text-sm font-medium text-center text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500"
>
{el} x
))}
);
}
ReactTable3.defaultProps = {
breadCrumbs: [
{
name: "صفحه اصلی",
active: false,
},
{
name: "آمار و گزارشات",
active: false,
},
{
name: "فروش محصولات",
active: false,
},
{
name: "سال 1400",
active: true,
},
],
title: "میزان فروش محصولات",
subTitle: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر",
};