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.
159 lines
4.1 KiB
159 lines
4.1 KiB
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: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر", |
|
};
|
|
|