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.

165 lines
4.8 KiB

3 years ago
import React, { useRef, useState } from "react";
3 years ago
3 years ago
import BasicTable from "./BasicTable";
import grayLeftArrow from "./gray-arrow-left.svg";
import blackLeftArrow from "./black-arrow-left.svg";
const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
3 years ago
const [tabs, setTabs] = useState([
{ name: "جدول " + breadCrumbs[breadCrumbs.length - 1].name, id: 0 },
]);
3 years ago
3 years ago
let [activeTab, setActivateTab] = useState(0);
3 years ago
3 years ago
const stateRef = useRef();
const stateActiveRef = useRef();
3 years ago
3 years ago
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]);
};
3 years ago
3 years ago
const delTab = (id) => {
setTabs(stateRef.current.filter((e) => e.id != id));
if (stateActiveRef.current == id) setActivateTab(0);
};
3 years ago
return (
3 years ago
<div className="my-10 w-11/12 mx-auto">
3 years ago
{/* breadCrumb */}
<div className="flex flex-row items-center">
{breadCrumbs.map((breadCrumb, index) => (
3 years ago
<div className="flex flex-row items-center" key={index}>
3 years ago
<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"
}`}
>
<img src={grayLeftArrow} />
3 years ago
</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>
3 years ago
{/* page subTitle */}
3 years ago
<div className="flex flex-row items-center mt-4">
<div className="w-1 h-5 bg-gray-400 rounded ml-1"></div>
3 years ago
<h2 className="text-xs">{subTitle}</h2>
3 years ago
</div>
</div>
3 years ago
<BasicTable
addTab={addTab}
tabs={tabs}
delTab={delTab}
setActivateTab={setActivateTab}
activeTab={activeTab}
/>
3 years ago
</div>
);
};
3 years ago
3 years ago
export default ReactTable4;
3 years ago
3 years ago
// export function Tabbar({ tabs, delTab, setActivateTab, activeTab }) {
// // const { onMouseDown } = useDraggableScroll(ref);
3 years ago
3 years ago
// 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={cancleIcon}
// className="w-2 mr-3"
// alt=""
// onClick={(e) => {
// e.preventDefault();
// delTab(el.id);
// }}
// />
// ) : null}
// </li>
// ))}
// </ul>
// );
// }
3 years ago
3 years ago
ReactTable4.defaultProps = {
3 years ago
breadCrumbs: [
{
name: "صفحه اصلی",
active: false,
},
{
name: "آمار و گزارشات",
active: false,
},
{
name: "فروش محصولات",
active: false,
},
{
name: "سال 1400",
active: true,
},
],
title: "میزان فروش محصولات",
subTitle: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر",
};