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.
79 lines
1.8 KiB
79 lines
1.8 KiB
// 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 BreadCrumb from "../BreadCrumb"; |
|
|
|
const ReactTable4 = ({ breadCrumbs }) => { |
|
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"> |
|
<BreadCrumb /> |
|
{console.log("mahdi")} |
|
{console.log(BreadCrumb)} |
|
</div> |
|
<div className="my-7"> |
|
<TitleSubtitle titleBorderClassName={"ml-1 w-1 h-6 bg-red-400"} /> |
|
</div> |
|
<BasicTable |
|
addTab={addTab} |
|
tabs={tabs} |
|
delTab={delTab} |
|
setActivateTab={setActivateTab} |
|
activeTab={activeTab} |
|
/> |
|
</div> |
|
); |
|
}; |
|
|
|
export default ReactTable4; |
|
|
|
ReactTable4.defaultProps = { |
|
breadCrumbs: [ |
|
{ |
|
name: "صفحه اصلی", |
|
active: false, |
|
}, |
|
{ |
|
name: "آمار و گزارشات", |
|
active: false, |
|
}, |
|
{ |
|
name: "فروش محصولات", |
|
active: false, |
|
}, |
|
{ |
|
name: "سال 1400", |
|
active: true, |
|
}, |
|
], |
|
};
|
|
|