|
|
|
import React, { useRef } from "react";
|
|
|
|
import BasicTable from "./BasicTable";
|
|
|
|
// import useDraggableScroll from "use-draggable-scroll";
|
|
|
|
|
|
|
|
const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {
|
|
|
|
return (
|
|
|
|
<div className="my-10 w-11/12 mx-auto">
|
|
|
|
{/* breadCrumb */}
|
|
|
|
|
|
|
|
<div className="flex flex-row items-center">
|
|
|
|
{breadCrumbs.map((breadCrumb, index) => (
|
|
|
|
<div className="flex flex-row items-center">
|
|
|
|
<span
|
|
|
|
className={`cursor-pointer text-xs hover:text-blue-900 ${
|
|
|
|
breadCrumb.active ? "text-blue-900" : "text-blue-400"
|
|
|
|
}`}
|
|
|
|
>
|
|
|
|
{breadCrumb.name}
|
|
|
|
</span>
|
|
|
|
{Number(index) !== breadCrumbs.length - 1 && (
|
|
|
|
<div
|
|
|
|
className={`mx-2 ${
|
|
|
|
breadCrumb.active ? "text-blue-900" : "text-blue-400"
|
|
|
|
}`}
|
|
|
|
>
|
|
|
|
{" > "}
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className="my-7">
|
|
|
|
{/* page Title */}
|
|
|
|
<div className="flex flex-row items-center">
|
|
|
|
<div className="w-1 h-5 bg-blue-500 rounded ml-1"></div>
|
|
|
|
<h2 className="text-base text-blue-900">{title}</h2>
|
|
|
|
</div>
|
|
|
|
{/* page Title */}
|
|
|
|
<div className="flex flex-row items-center mt-4">
|
|
|
|
<div className="w-1 h-5 bg-gray-400 rounded ml-1"></div>
|
|
|
|
<h2 className="text-sm">{subTitle}</h2>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* <Tabbar /> */}
|
|
|
|
<BasicTable />
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
window.isDown = false;
|
|
|
|
export default ReactTable3;
|
|
|
|
function Tabbar({}) {
|
|
|
|
const ref = useRef(null);
|
|
|
|
|
|
|
|
// const { onMouseDown } = useDraggableScroll(ref);
|
|
|
|
const tabs = [
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
"تست۱",
|
|
|
|
];
|
|
|
|
return (
|
|
|
|
<ul
|
|
|
|
className="tabbar flex no-scrollbar border-b border-gray-200 dark:border-gray-700 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) => (
|
|
|
|
<li className="mr-2 ">
|
|
|
|
<span
|
|
|
|
onClick={(e) => {
|
|
|
|
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"
|
|
|
|
>
|
|
|
|
<span className="p-2">
|
|
|
|
{el} <span className="p-2">x</span>
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
|
</li>
|
|
|
|
))}
|
|
|
|
</ul>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
ReactTable3.defaultProps = {
|
|
|
|
breadCrumbs: [
|
|
|
|
{
|
|
|
|
name: "صفحه اصلی",
|
|
|
|
active: false,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "آمار و گزارشات",
|
|
|
|
active: false,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "فروش محصولات",
|
|
|
|
active: false,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "سال 1400",
|
|
|
|
active: true,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
|
|
|
|
title: "میزان فروش محصولات",
|
|
|
|
subTitle: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر",
|
|
|
|
};
|