// it has style inside index.scss ---> // Start ReactTable4 && end ReactTable4 import React, { useRef, useState } from "react"; import BasicTable from "./BasicTable"; import TitleSubtitle from "../TitleSubtitle"; import MultiRangeInput from "./MultiRangeInput"; import grayLeftArrow from "./gray-arrow-left.svg"; import { BreadCrumb } from "../BreadCrumb"; 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 (
{/* breadCrumb */}
{breadCrumbs.map((breadCrumb, index) => (
{breadCrumb.name} {Number(index) !== breadCrumbs.length - 1 && (
)}
))}
); }; export default ReactTable4; ReactTable4.defaultProps = { breadCrumbs: [ { name: "صفحه اصلی", active: false, }, { name: "آمار و گزارشات", active: false, }, { name: "فروش محصولات", active: false, }, { name: "سال 1400", active: true, }, ], title: "میزان فروش محصولات", subTitle: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر", };