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