|
|
|
import React, { useRef, useState } from "react";
|
|
|
|
import BasicTable from "./BasicTable";
|
|
|
|
// import useDraggableScroll from "use-draggable-scroll";
|
|
|
|
|
|
|
|
import cancleIcon from "./zarbedar-icon.svg";
|
|
|
|
|
|
|
|
const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
|
|
|
|
const [tabs, setTabs] = useState([
|
|
|
|
{ name: "جدول " + breadCrumbs[breadCrumbs.length - 1].name, id: 0 },
|
|
|
|
]);
|
|
|
|
let [activeTab, setActivateTab] = useState(0);
|
|
|
|
const stateRef = useRef();
|
|
|
|
const stateActiveRef = useRef();
|
|
|
|
stateRef.current = tabs;
|
|
|
|
stateActiveRef.current = activeTab;
|
|
|
|
|
|
|
|
const addTab = (newTab) => {
|
|
|
|
setActivateTab(newTab.id);
|
|
|
|
if (stateRef.current.find((e) => e.id === newTab.id)) return;
|
|
|
|
setTabs([...stateRef.current, newTab]);
|
|
|
|
};
|
|
|
|
const delTab = (id) => {
|
|
|
|
setTabs(stateRef.current.filter((e) => e.id != id));
|
|
|
|
if (stateActiveRef.current == id) setActivateTab(0);
|
|
|
|
};
|
|
|
|
|
|
|
|
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" key={index}>
|
|
|
|
<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-xs">{subTitle}</h2>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* <Tabbar tabs={tabs} /> */}
|
|
|
|
<BasicTable
|
|
|
|
addTab={addTab}
|
|
|
|
tabs={tabs}
|
|
|
|
delTab={delTab}
|
|
|
|
setActivateTab={setActivateTab}
|
|
|
|
activeTab={activeTab}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
window.isDown = false;
|
|
|
|
export default ReactTable4;
|
|
|
|
|
|
|
|
export function Tabbar({ tabs, delTab, setActivateTab, activeTab }) {
|
|
|
|
// const { onMouseDown } = useDraggableScroll(ref);
|
|
|
|
|
|
|
|
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 px-4 rounded-sm mx-1"
|
|
|
|
style={{
|
|
|
|
backgroundColor: activeTab === el.id ? "#92c1fc" : "#F1F6FF",
|
|
|
|
|
|
|
|
color: activeTab === el.id ? "#fff" : "#000",
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<div className="h-full py-4" onClick={(e) => setActivateTab(el.id)}>
|
|
|
|
{el.name}
|
|
|
|
</div>
|
|
|
|
{el.id ? (
|
|
|
|
<img
|
|
|
|
src={cancleIcon}
|
|
|
|
className="w-2 h-2 mr-2"
|
|
|
|
alt=""
|
|
|
|
onClick={(e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
delTab(el.id);
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
) : null}
|
|
|
|
</li>
|
|
|
|
))}
|
|
|
|
</ul>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
ReactTable4.defaultProps = {
|
|
|
|
breadCrumbs: [
|
|
|
|
{
|
|
|
|
name: "صفحه اصلی",
|
|
|
|
active: false,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "آمار و گزارشات",
|
|
|
|
active: false,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "فروش محصولات",
|
|
|
|
active: false,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "سال 1400",
|
|
|
|
active: true,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
|
|
|
|
title: "میزان فروش محصولات",
|
|
|
|
subTitle: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر",
|
|
|
|
};
|