parent
a89c1dda05
commit
2583a1eb84
29 changed files with 9 additions and 1993 deletions
@ -1,306 +0,0 @@ |
||||
import React from "react"; |
||||
import { |
||||
useTable, |
||||
useFilters, |
||||
useGlobalFilter, |
||||
useAsyncDebounce, |
||||
useSortBy, |
||||
usePagination, |
||||
} from "react-table"; |
||||
import { |
||||
ChevronDoubleLeftIcon, |
||||
ChevronLeftIcon, |
||||
ChevronRightIcon, |
||||
ChevronDoubleRightIcon, |
||||
} from "@heroicons/react/solid"; |
||||
import { Button, PageButton } from "./shared/Button"; |
||||
import { classNames } from "./shared/Utils"; |
||||
import { SortIcon, SortUpIcon, SortDownIcon } from "./shared/Icons"; |
||||
|
||||
// Define a default UI for filtering
|
||||
function GlobalFilter({ |
||||
preGlobalFilteredRows, |
||||
globalFilter, |
||||
setGlobalFilter, |
||||
}) { |
||||
const count = preGlobalFilteredRows.length; |
||||
const [value, setValue] = React.useState(globalFilter); |
||||
const onChange = useAsyncDebounce((value) => { |
||||
setGlobalFilter(value || undefined); |
||||
}, 200); |
||||
|
||||
return ( |
||||
<label className="flex gap-x-2 items-baseline"> |
||||
<span className="text-gray-700">Search: </span> |
||||
<input |
||||
type="text" |
||||
className="rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" |
||||
value={value || ""} |
||||
onChange={(e) => { |
||||
setValue(e.target.value); |
||||
onChange(e.target.value); |
||||
}} |
||||
placeholder={`${count} records...`} |
||||
/> |
||||
</label> |
||||
); |
||||
} |
||||
|
||||
export function StatusPill({ value }) { |
||||
// const status = value ? value.toLowerCase() : "unknown";
|
||||
|
||||
return ( |
||||
<span |
||||
className={`p-4 whitespace-nowrap text-base font-light
|
||||
${value ? "text-green-400" : "text-red-400"}`}
|
||||
> |
||||
{value ? "فعال" : "غیر فعال"} |
||||
</span> |
||||
); |
||||
} |
||||
|
||||
// export function AvatarCell({ value, column, row }) {
|
||||
// return (
|
||||
// <div className="flex items-center">
|
||||
// {/* برای عکس */}
|
||||
// {/* <div className="flex-shrink-0 h-10 w-10">
|
||||
// <img
|
||||
// className="h-10 w-10 rounded-full"
|
||||
// src={row.original[column.imgAccessor]}
|
||||
// alt=""
|
||||
// />
|
||||
// </div> */}
|
||||
// {/* اگر بخواهیم در کنار عنوان یک محتوا دیگه ای بنویسیم */}
|
||||
// {/* <div className="ml-4">
|
||||
// <div className="text-sm font-medium text-gray-900">{value}</div>
|
||||
// <div className="text-sm text-gray-500">
|
||||
// {row.original[column.emailAccessor]}
|
||||
// </div>
|
||||
// </div> */}
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
function Table({ columns, data }) { |
||||
// Use the state and functions returned from useTable to build your UI
|
||||
const { |
||||
getTableProps, |
||||
getTableBodyProps, |
||||
headerGroups, |
||||
prepareRow, |
||||
page, // Instead of using 'rows', we'll use page,
|
||||
// which has only the rows for the active page
|
||||
|
||||
// The rest of these things are super handy, too ;)
|
||||
canPreviousPage, |
||||
canNextPage, |
||||
pageOptions, |
||||
pageCount, |
||||
gotoPage, |
||||
nextPage, |
||||
previousPage, |
||||
setPageSize, |
||||
|
||||
state, |
||||
preGlobalFilteredRows, |
||||
setGlobalFilter, |
||||
} = useTable( |
||||
{ |
||||
columns, |
||||
data, |
||||
}, |
||||
useFilters, // useFilters!
|
||||
useGlobalFilter, |
||||
useSortBy, |
||||
usePagination // new
|
||||
); |
||||
|
||||
// Render the UI for your table
|
||||
return ( |
||||
<> |
||||
<div className="sm:flex sm:gap-x-2"> |
||||
<GlobalFilter |
||||
preGlobalFilteredRows={preGlobalFilteredRows} |
||||
globalFilter={state.globalFilter} |
||||
setGlobalFilter={setGlobalFilter} |
||||
/> |
||||
{headerGroups.map((headerGroup) => |
||||
headerGroup.headers.map((column) => |
||||
column.Filter ? ( |
||||
<div className="mt-2 sm:mt-0" key={column.id}> |
||||
{column.render("Filter")} |
||||
</div> |
||||
) : null |
||||
) |
||||
)} |
||||
</div> |
||||
{/* table */} |
||||
<div className="mt-4 flex flex-col"> |
||||
<div className="-my-2 overflow-x-auto -mx-4 sm:-mx-6 lg:-mx-8"> |
||||
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8"> |
||||
<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg"> |
||||
<table |
||||
{...getTableProps()} |
||||
className="min-w-full divide-y divide-gray-200" |
||||
> |
||||
<thead className="bg-gray-50"> |
||||
{headerGroups.map((headerGroup) => ( |
||||
<tr {...headerGroup.getHeaderGroupProps()}> |
||||
{headerGroup.headers.map((column) => ( |
||||
// Add the sorting props to control sorting. For this example
|
||||
// we can add them into the header props
|
||||
<th |
||||
scope="col" |
||||
className="px-6 py-3 text-xs text-blue-600 bg-gray-200" |
||||
{...column.getHeaderProps( |
||||
column.getSortByToggleProps() |
||||
)} |
||||
> |
||||
<div className="flex items-center"> |
||||
{column.render("Header")} |
||||
{/* Add a sort direction indicator */} |
||||
<span> |
||||
{column.isSorted ? ( |
||||
column.isSortedDesc ? ( |
||||
<SortUpIcon className="w-4 h-4 text-gray-400 mr-1" /> |
||||
) : ( |
||||
<SortDownIcon className="w-4 h-4 text-gray-400 mr-1" /> |
||||
) |
||||
) : ( |
||||
<SortIcon className="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100 mr-1" /> |
||||
)} |
||||
</span> |
||||
</div> |
||||
</th> |
||||
))} |
||||
</tr> |
||||
))} |
||||
</thead> |
||||
<tbody |
||||
{...getTableBodyProps()} |
||||
className="bg-white divide-y divide-gray-200" |
||||
> |
||||
{page.map((row, i) => { |
||||
// new
|
||||
prepareRow(row); |
||||
return ( |
||||
<tr {...row.getRowProps()}> |
||||
{row.cells.map((cell) => { |
||||
return ( |
||||
<td |
||||
{...cell.getCellProps()} |
||||
className="px-6 py-4 whitespace-nowrap" |
||||
role="cell" |
||||
> |
||||
{cell.column.Cell.name === "defaultRenderer" ? ( |
||||
<div className="text-sm text-gray-500"> |
||||
{cell.render("Cell")} |
||||
</div> |
||||
) : ( |
||||
cell.render("Cell") |
||||
)} |
||||
</td> |
||||
); |
||||
})} |
||||
</tr> |
||||
); |
||||
})} |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
{/* Pagination */} |
||||
<div className="py-3 flex items-center justify-between"> |
||||
<div className="flex-1 flex justify-between sm:hidden"> |
||||
<Button onClick={() => previousPage()} disabled={!canPreviousPage}> |
||||
Previous |
||||
</Button> |
||||
<Button onClick={() => nextPage()} disabled={!canNextPage}> |
||||
Next |
||||
</Button> |
||||
</div> |
||||
<div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> |
||||
{/* numbers */} |
||||
<div className="flex gap-x-2 items-baseline"> |
||||
<span className="text-sm text-gray-700"> |
||||
صفحه <span className="font-medium"> {state.pageIndex + 1} </span> |
||||
از |
||||
<span className="font-medium"> {pageOptions.length} </span> |
||||
</span> |
||||
<label> |
||||
<span className="sr-only">ایتم های موجود در هر صفحه</span> |
||||
<select |
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" |
||||
value={state.pageSize} |
||||
onChange={(e) => { |
||||
setPageSize(Number(e.target.value)); |
||||
}} |
||||
> |
||||
{[5, 10, 20].map((pageSize) => ( |
||||
<option key={pageSize} value={pageSize}> |
||||
نمایش {pageSize} |
||||
</option> |
||||
))} |
||||
</select> |
||||
</label> |
||||
</div> |
||||
{/* arrows */} |
||||
<div> |
||||
<nav |
||||
className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" |
||||
aria-label="Pagination" |
||||
> |
||||
<PageButton |
||||
className="rounded-l-md" |
||||
onClick={() => gotoPage(0)} |
||||
disabled={!canPreviousPage} |
||||
> |
||||
<span className="sr-only">First</span> |
||||
<ChevronDoubleRightIcon |
||||
className="h-5 w-5 text-gray-400" |
||||
aria-hidden="true" |
||||
/> |
||||
</PageButton> |
||||
|
||||
<PageButton |
||||
onClick={() => previousPage()} |
||||
disabled={!canPreviousPage} |
||||
> |
||||
<span className="sr-only">Previous</span> |
||||
<ChevronRightIcon |
||||
ChevronLeftIcon |
||||
className="h-5 w-5 text-gray-400" |
||||
aria-hidden="true" |
||||
/> |
||||
</PageButton> |
||||
|
||||
<PageButton onClick={() => nextPage()} disabled={!canNextPage}> |
||||
<span className="sr-only"> Next</span> |
||||
<ChevronLeftIcon |
||||
className="h-5 w-5 text-gray-400" |
||||
aria-hidden="true" |
||||
/> |
||||
</PageButton> |
||||
|
||||
<PageButton |
||||
className="rounded-r-md" |
||||
onClick={() => gotoPage(pageCount - 1)} |
||||
disabled={!canNextPage} |
||||
> |
||||
<span className="sr-only">Last</span> |
||||
<ChevronDoubleLeftIcon |
||||
className="h-5 w-5 text-gray-400" |
||||
aria-hidden="true" |
||||
/> |
||||
</PageButton> |
||||
</nav> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</> |
||||
); |
||||
} |
||||
|
||||
export default Table; |
||||
@ -1,90 +0,0 @@ |
||||
import React from "react"; |
||||
import Table, { AvatarCell, SelectColumnFilter, StatusPill } from "./Table"; // new
|
||||
|
||||
const getData = () => { |
||||
const data = [ |
||||
{ |
||||
name: "مایکروویر سامسونگ مدل ", |
||||
// email: "jane.cooper@example.com",
|
||||
status: true, |
||||
date: "1399/09/21", |
||||
price: 20000, |
||||
// imgUrl:
|
||||
// "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60",
|
||||
}, |
||||
{ |
||||
name: "آزمون آنلاین درس علوم تجربی ", |
||||
status: false, |
||||
date: "1399/09/23", |
||||
price: 18000, |
||||
}, |
||||
{ |
||||
name: "مایکروویر سامسونگ مدل ", |
||||
status: true, |
||||
date: "1392/09/21", |
||||
price: 20000, |
||||
}, |
||||
{ |
||||
name: "آزمون آنلاین درس علوم تجربی ", |
||||
status: false, |
||||
date: "1375/09/21", |
||||
price: 18000, |
||||
}, |
||||
{ |
||||
name: "مایکروویر سامسونگ مدل ", |
||||
status: true, |
||||
date: "1360/09/21", |
||||
price: 27000000, |
||||
}, |
||||
{ |
||||
name: "آزمون آنلاین درس علوم تجربی ", |
||||
status: false, |
||||
date: "1404/09/21", |
||||
price: 1000, |
||||
}, |
||||
]; |
||||
return [...data, ...data, ...data]; |
||||
}; |
||||
|
||||
const ReactTable2 = () => { |
||||
const columns = React.useMemo( |
||||
() => [ |
||||
{ |
||||
Header: "عنوان", |
||||
accessor: "name", |
||||
// اگر بخواهیم عکسی در جدول نشان بدیم یا یک محتوایی در کنار عنوان داشته باشیم اول باید اواتار سل رو در فایل تیبل جی اس ان کامنت کنیم و بعد ...
|
||||
// Cell: AvatarCell,
|
||||
// imgAccessor: "imgUrl",
|
||||
// emailAccessor: "email",
|
||||
}, |
||||
{ |
||||
Header: "وضعیت", |
||||
accessor: "status", |
||||
Cell: StatusPill, |
||||
}, |
||||
{ |
||||
Header: "تاریخ", |
||||
accessor: "date", |
||||
}, |
||||
{ |
||||
Header: "مبلغ پرداختی", |
||||
accessor: "price", |
||||
}, |
||||
], |
||||
[] |
||||
); |
||||
|
||||
const data = React.useMemo(() => getData(), []); |
||||
|
||||
return ( |
||||
<div className="min-h-screen bg-gray-100 text-gray-900"> |
||||
<main className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 pt-4"> |
||||
<div className="my-6"> |
||||
<Table columns={columns} data={data} /> |
||||
</div> |
||||
</main> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default ReactTable2; |
||||
@ -1,35 +0,0 @@ |
||||
import React from 'react' |
||||
import { classNames } from './Utils' |
||||
|
||||
export function Button({ children, className, ...rest }) { |
||||
return ( |
||||
<button |
||||
type="button" |
||||
className={ |
||||
classNames( |
||||
"relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50", |
||||
className |
||||
)} |
||||
{...rest} |
||||
> |
||||
{children} |
||||
</button> |
||||
) |
||||
} |
||||
|
||||
export function PageButton({ children, className, ...rest }) { |
||||
return ( |
||||
<button |
||||
type="button" |
||||
className={ |
||||
classNames( |
||||
"relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50", |
||||
className |
||||
)} |
||||
{...rest} |
||||
> |
||||
{children} |
||||
</button> |
||||
) |
||||
} |
||||
|
||||
@ -1,17 +0,0 @@ |
||||
export function SortIcon({ className }) { |
||||
return ( |
||||
<svg className={className} stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 320 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z"></path></svg> |
||||
) |
||||
} |
||||
|
||||
export function SortUpIcon({ className }) { |
||||
return ( |
||||
<svg className={className} stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 320 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M279 224H41c-21.4 0-32.1-25.9-17-41L143 64c9.4-9.4 24.6-9.4 33.9 0l119 119c15.2 15.1 4.5 41-16.9 41z"></path></svg> |
||||
) |
||||
} |
||||
|
||||
export function SortDownIcon({ className }) { |
||||
return ( |
||||
<svg className={className} stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 320 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z"></path></svg> |
||||
) |
||||
} |
||||
@ -1,3 +0,0 @@ |
||||
export function classNames(...classes) { |
||||
return classes.filter(Boolean).join(" "); |
||||
} |
||||
@ -1,31 +0,0 @@ |
||||
import arrowIcon from "./arrow-icon.svg"; |
||||
import more from "./more.svg"; |
||||
import edit from "./edit.svg"; |
||||
|
||||
import { useState } from "react"; |
||||
|
||||
export function Buttons({ row }) { |
||||
const [activeDetails, setActiveDetails] = useState(null); |
||||
return ( |
||||
<div className="flex flex-row items-center justify-end"> |
||||
<button |
||||
className="flex flex-row items-center justify-around p-2 rounded border border-gray-300 mx-1" |
||||
onClick={() => setActiveDetails(!activeDetails)} |
||||
{...row.getToggleRowExpandedProps()} |
||||
> |
||||
جزیات |
||||
<img |
||||
src={arrowIcon} |
||||
alt="" |
||||
className={`w-3 cursor-pointer mr-2 ${ |
||||
activeDetails ? "rotate-60" : "rotate-90" |
||||
}`}
|
||||
/> |
||||
</button> |
||||
<div className="p-2 rounded border border-gray-300 cursor-pointer mx-1"> |
||||
<img src={edit} alt="" className="w-4" /> |
||||
</div> |
||||
<img src={more} alt="" className="w-5 cursor-pointer rotate-90 mx-1" /> |
||||
</div> |
||||
); |
||||
} |
||||
@ -1,16 +0,0 @@ |
||||
import React from "react"; |
||||
|
||||
export const Checkbox = React.forwardRef(({ indeterminate, ...rest }, ref) => { |
||||
const defaultRef = React.useRef(); |
||||
const resolvedRef = ref || defaultRef; |
||||
|
||||
React.useEffect(() => { |
||||
resolvedRef.current.indeterminate = indeterminate; |
||||
}, [resolvedRef, indeterminate]); |
||||
|
||||
return ( |
||||
<> |
||||
<input type="checkbox" ref={resolvedRef} {...rest} /> |
||||
</> |
||||
); |
||||
}); |
||||
@ -1,19 +0,0 @@ |
||||
import React from 'react'; |
||||
|
||||
export const ColumnFilter = ({ column }) => { |
||||
|
||||
const { filterValue, setFilter } = column
|
||||
|
||||
return ( |
||||
|
||||
<span> |
||||
|
||||
Search: {''} |
||||
|
||||
<input value={filterValue || '' } |
||||
onChange={(e) => setFilter(e.target.value)} /> |
||||
|
||||
</span> |
||||
|
||||
); |
||||
}; |
||||
@ -1,82 +0,0 @@ |
||||
import React, {useState} from 'react'; |
||||
|
||||
import search from './search-normal.svg'; |
||||
import filter from './filter.svg'; |
||||
import settings from './settings.svg'; |
||||
import arrow from './blue-arrow.svg'; |
||||
import plus from './plus.svg'; |
||||
import { GlobalFilter } from './GlobalFilter'; |
||||
|
||||
export function EditButtons({buttons }) { |
||||
const [selectedButton, setSelectedButton] = useState(null); |
||||
|
||||
return ( |
||||
<div className="flex flex-row items-center justify-end"> |
||||
{buttons.map((button,index) =>( |
||||
<div className={`border border-blue-400 flex flex-row items-center justify-around p-1 rounded-sm bg-opacity-30 mx-1`} |
||||
style={{backgroundColor: button.backgroundColor}} |
||||
// onClick={() => setOpenModal(true)}
|
||||
onClick={() => setSelectedButton(selectedButton === button ? null : button)} |
||||
> |
||||
<p className={`text-sm ${button.textColor}`}>{button.title}</p> |
||||
<img src={button.logo} alt="" className={`cursor-pointer ${button.width} ${button.height} ${button.title === null ? "mr-0": "mx-2"}`} /> |
||||
</div> |
||||
))} |
||||
<div |
||||
>
|
||||
{selectedButton?.components} |
||||
|
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
EditButtons.defaultProps = { |
||||
buttons : [ |
||||
{ |
||||
logo: search, |
||||
width: "w-5", |
||||
height: "h-5", |
||||
title: null, |
||||
textColor: null, |
||||
backgroundColor: "#F3F8FF", |
||||
components: <GlobalFilter />, |
||||
|
||||
}, |
||||
{ |
||||
logo: filter, |
||||
width: "w-5", |
||||
height: "h-5", |
||||
title: null, |
||||
textColor: null, |
||||
backgroundColor: "#F3F8FF", |
||||
components: "a", }, |
||||
{ |
||||
logo: settings, |
||||
width: "w-5", |
||||
height: "h-5", |
||||
title: null, |
||||
textColor: null, |
||||
backgroundColor: "#F3F8FF", |
||||
components: "b", |
||||
}, |
||||
{ |
||||
logo: arrow, |
||||
width: "w-3", |
||||
height: "h-3", |
||||
title: 'عملیات', |
||||
textColor: "text-blue-400", |
||||
backgroundColor: "#F3F8FF", |
||||
components: "c", |
||||
}, |
||||
{ |
||||
logo: plus, |
||||
width: "w-3", |
||||
height: "h-3", |
||||
title: 'ثبت جدید', |
||||
textColor: "text-white", |
||||
backgroundColor: "#65A9FF", |
||||
components: "d", |
||||
}, |
||||
] |
||||
} |
||||
@ -1,42 +0,0 @@ |
||||
import React, {useState} from 'react'; |
||||
import { useAsyncDebounce } from 'react-table'; |
||||
|
||||
import search from "./search-normal.svg"; |
||||
|
||||
export const GlobalFilter = ({ filter, setFilter }) => { |
||||
const [openModal, setOpenModal] = useState(true); |
||||
|
||||
const [value, setValue] = useState(filter); |
||||
|
||||
const onChange = useAsyncDebounce(value => { |
||||
setFilter(value || undefined) |
||||
}, 1000) |
||||
|
||||
return ( |
||||
<div onClick={() => setOpenModal(false)}
|
||||
className={`cursor-pointer w-screen h-screen backdrop-filter backdrop-blur-lg flex items-center justify-center bg-gray-900 fixed left-0 top-0 duration-1000 transition-all
|
||||
${openModal ? "opacity-90" : "opacity-0 pointer-events-none"}`}>
|
||||
<div className="absolute " style={{top: "10%"}} onClick={(e) => e.stopPropagation()}> |
||||
<div className="flex flex-row-reverse items-center relative w-96"> |
||||
<img |
||||
src={search} |
||||
alt="" |
||||
className="w-6 h-6 absolute left-3" |
||||
/> |
||||
<input |
||||
value={value || ''} |
||||
onChange={(e) => { |
||||
setValue(e.target.value) |
||||
onChange(e.target.value) |
||||
}} |
||||
type="text" |
||||
placeholder="نام کالا را جستجو کنید..." |
||||
className="text-xs rounded-sm pr-4 pl-10 py-2 w-full border border-gray-400 font-light text-lightGrayTextColor placeholder-gray-400 focus:outline-none" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
|
||||
@ -1,182 +0,0 @@ |
||||
[ |
||||
{ |
||||
"name": "مایکروویر سامسونگ مدل 1", |
||||
"order-date": "1399/09/27", |
||||
"order-price": 27, |
||||
"order-number": "09120023100", |
||||
"user-job": "مهندس ساختمان", |
||||
"order-status": 1, |
||||
"order-level": 1 |
||||
}, |
||||
{ |
||||
"name": "مایکروویر سامسونگ مدل 2", |
||||
"order-date": "1399/09/25", |
||||
"order-price": 26, |
||||
"order-number": "09120023100", |
||||
"user-job": "مهندس ساختمان", |
||||
"order-status": 2, |
||||
"order-level": 2 |
||||
}, |
||||
{ |
||||
"name": "مایکروویر سامسونگ مدل 3", |
||||
"order-date": "1399/09/22", |
||||
"order-price": 44, |
||||
"order-number": "09120023100", |
||||
"user-job": "مهندس ساختمان", |
||||
"order-status": 3, |
||||
"order-level": 3 |
||||
}, |
||||
{ |
||||
"name": "لپ تاپ مک بوک اپل", |
||||
"order-date": "1410/09/27", |
||||
"order-price": 73, |
||||
"order-number": "09120023100", |
||||
"user-job": "مهندس ساختمان", |
||||
"order-status": 4, |
||||
"order-level": 4 |
||||
}, |
||||
{ |
||||
"name": "تبلت اپل", |
||||
"order-date": "1375/09/25", |
||||
"order-price": 96, |
||||
"order-number": "09120023100", |
||||
"user-job": "مهندس ساختمان", |
||||
"order-status": 5, |
||||
"order-level": 5 |
||||
}, |
||||
{ |
||||
"name": "مایکروویر سامسونگ مدل 1", |
||||
"order-date": "1399/09/27", |
||||
"order-price": 27, |
||||
"order-number": "09120023100", |
||||
"user-job": "مهندس ساختمان", |
||||
"order-status": 1, |
||||
"order-level": 1 |
||||
}, |
||||
{ |
||||
"name": "مایکروویر سامسونگ مدل 2", |
||||
"order-date": "1399/09/25", |
||||
"order-price": 26, |
||||
"order-number": "09120023100", |
||||
"user-job": "مهندس ساختمان", |
||||
"order-status": 2, |
||||
"order-level": 2 |
||||
}, |
||||
{ |
||||
"name": "مایکروویر سامسونگ مدل 3", |
||||
"order-date": "1399/09/22", |
||||
"order-price": 44, |
||||
"order-number": "09120023100", |
||||
"user-job": "مهندس ساختمان", |
||||
"order-status": 3, |
||||
"order-level": 3 |
||||
}, |
||||
{ |
||||
"name": "لپ تاپ مک بوک اپل", |
||||
"order-date": "1410/09/27", |
||||
"order-price": 73, |
||||
"order-number": "09120023100", |
||||
"user-job": "مهندس ساختمان", |
||||
"order-status": 4, |
||||
"order-level": 4 |
||||
}, |
||||
{ |
||||
"name": "تبلت اپل", |
||||
"order-date": "1375/09/25", |
||||
"order-price": 96, |
||||
"order-number": "09120023100", |
||||
"user-job": "مهندس ساختمان", |
||||
"order-status": 5, |
||||
"order-level": 5 |
||||
}, |
||||
{ |
||||
"name": "مایکروویر سامسونگ مدل 1", |
||||
"order-date": "1399/09/27", |
||||
"order-price": 27, |
||||
"order-number": "09120023100", |
||||
"user-job": "مهندس ساختمان", |
||||
"order-status": 1, |
||||
"order-level": 1 |
||||
}, |
||||
{ |
||||
"name": "مایکروویر سامسونگ مدل 2", |
||||
"order-date": "1399/09/25", |
||||
"order-price": 26, |
||||
"order-number": "09120023100", |
||||
"user-job": "مهندس ساختمان", |
||||
"order-status": 2, |
||||
"order-level": 2 |
||||
}, |
||||
{ |
||||
"name": "مایکروویر سامسونگ مدل 3", |
||||
"order-date": "1399/09/22", |
||||
"order-price": 44, |
||||
"order-number": "09120023100", |
||||
"user-job": "مهندس ساختمان", |
||||
"order-status": 3, |
||||
"order-level": 3 |
||||
}, |
||||
{ |
||||
"name": "لپ تاپ مک بوک اپل", |
||||
"order-date": "1410/09/27", |
||||
"order-price": 73, |
||||
"order-number": "09120023100", |
||||
"user-job": "مهندس ساختمان", |
||||
"order-status": 4, |
||||
"order-level": 4 |
||||
}, |
||||
{ |
||||
"name": "تبلت اپل", |
||||
"order-date": "1375/09/25", |
||||
"order-price": 96, |
||||
"order-number": "09120023100", |
||||
"user-job": "مهندس ساختمان", |
||||
"order-status": 5, |
||||
"order-level": 5 |
||||
}, |
||||
{ |
||||
"name": "مایکروویر سامسونگ مدل 1", |
||||
"order-date": "1399/09/27", |
||||
"order-price": 27, |
||||
"order-number": "09120023100", |
||||
"user-job": "مهندس ساختمان", |
||||
"order-status": 1, |
||||
"order-level": 1 |
||||
}, |
||||
{ |
||||
"name": "مایکروویر سامسونگ مدل 2", |
||||
"order-date": "1399/09/25", |
||||
"order-price": 26, |
||||
"order-number": "09120023100", |
||||
"user-job": "مهندس ساختمان", |
||||
"order-status": 2, |
||||
"order-level": 2 |
||||
}, |
||||
{ |
||||
"name": "مایکروویر سامسونگ مدل 3", |
||||
"order-date": "1399/09/22", |
||||
"order-price": 44, |
||||
"order-number": "09120023100", |
||||
"user-job": "مهندس ساختمان", |
||||
"order-status": 3, |
||||
"order-level": 3 |
||||
}, |
||||
{ |
||||
"name": "لپ تاپ مک بوک اپل", |
||||
"order-date": "1410/09/27", |
||||
"order-price": 73, |
||||
"order-number": "09120023100", |
||||
"user-job": "مهندس ساختمان", |
||||
"order-status": 4, |
||||
"order-level": 4 |
||||
}, |
||||
{ |
||||
"name": "تبلت اپل", |
||||
"order-date": "1375/09/25", |
||||
"order-price": 96, |
||||
"order-number": "09120023100", |
||||
"user-job": "مهندس ساختمان", |
||||
"order-status": 5, |
||||
"order-level": 5 |
||||
} |
||||
] |
||||
@ -1,302 +0,0 @@ |
||||
import React, { useMemo } from "react"; |
||||
|
||||
import { |
||||
useTable, |
||||
useSortBy, |
||||
useGlobalFilter, |
||||
useFilters, |
||||
usePagination, |
||||
useRowSelect, |
||||
useColumnOrder, |
||||
} from "react-table"; |
||||
|
||||
import { COLUMNS } from "./columns"; |
||||
|
||||
import { GlobalFilter } from "./GlobalFilter"; |
||||
|
||||
import { Checkbox } from "./Checkbox"; |
||||
|
||||
import MOCK_DATA from "./MOCK_DATA.json"; |
||||
|
||||
const BasicTable = () => { |
||||
const columns = React.useMemo(() => COLUMNS, []); |
||||
const data = useMemo(() => MOCK_DATA, []); |
||||
|
||||
const { |
||||
getTableProps, |
||||
getTableBodyProps, |
||||
headerGroups, |
||||
footerGroups, |
||||
rows, |
||||
page, |
||||
nextPage, |
||||
previousPage, |
||||
canNextPage, |
||||
canPreviousPage, |
||||
pageOptions, |
||||
gotoPage, |
||||
pageCount, |
||||
setPageSize, |
||||
prepareRow, |
||||
allColumns, |
||||
getToggleHideAllColumnsProps, |
||||
setColumnOrder, |
||||
selectedFlatRows, |
||||
state, |
||||
setGlobalFilter, |
||||
} = useTable( |
||||
{ |
||||
columns, |
||||
data, |
||||
// initialState: { pageIndex: 2 }
|
||||
}, |
||||
useColumnOrder, |
||||
useFilters, |
||||
useGlobalFilter, |
||||
useSortBy, |
||||
usePagination, |
||||
useRowSelect, |
||||
(hooks) => { |
||||
hooks.visibleColumns.push((columns) => { |
||||
return [ |
||||
{ |
||||
id: "selection", |
||||
Header: ({ getToggleAllRowsSelectedProps }) => ( |
||||
<Checkbox {...getToggleAllRowsSelectedProps()} /> |
||||
), |
||||
Cell: ({ row }) => ( |
||||
<Checkbox {...row.getToggleRowSelectedProps()} /> |
||||
), |
||||
}, |
||||
...columns, |
||||
]; |
||||
}); |
||||
} |
||||
); |
||||
|
||||
const changeOrder = () => { |
||||
setColumnOrder([ |
||||
"name", |
||||
"order-number", |
||||
"user-job", |
||||
"order-level", |
||||
"order-status", |
||||
"order-price", |
||||
]); |
||||
}; |
||||
|
||||
const { globalFilter, pageIndex, pageSize } = state; |
||||
// const firstPageRows = rows.slice(0, 10);
|
||||
|
||||
return ( |
||||
<> |
||||
<div className="bg-yellow-500"> |
||||
{/* search box */} |
||||
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> |
||||
{/* pagination */} |
||||
</div> |
||||
{/* toggle columns */} |
||||
{/* <div> |
||||
<div> |
||||
<Checkbox {...getToggleHideAllColumnsProps()} /> Toggle All |
||||
</div> |
||||
{allColumns.map((column) => ( |
||||
<div key={column.id}> |
||||
<label> |
||||
<input type="checkbox" {...column.getToggleHiddenProps()} /> |
||||
{column.Header} |
||||
</label> |
||||
</div> |
||||
))} |
||||
</div> */} |
||||
|
||||
{/* Change Column Order */} |
||||
{/* <button onClick={changeOrder}> Change Column Order </button> */} |
||||
|
||||
<table |
||||
{...getTableProps()} |
||||
className="min-w-full divide-y divide-gray-200" |
||||
> |
||||
<thead className="bg-gray-300"> |
||||
{headerGroups.map((headerGroup) => ( |
||||
<tr {...headerGroup.getHeaderGroupProps()}> |
||||
{headerGroup.headers.map((column) => ( |
||||
<th |
||||
{...column.getHeaderProps(column.getSortByToggleProps())} |
||||
scope="col" |
||||
className="cursor-pointer px-4 py-2 text-right text-xs" |
||||
style={{ color: "#3287B9" }} |
||||
> |
||||
{column.render("Header")} |
||||
<span> |
||||
{column.isSorted |
||||
? column.isSortedDesc |
||||
? " 🔽" |
||||
: " 🔼" |
||||
: ""} |
||||
</span> |
||||
{/* not using */} |
||||
{/* <div> |
||||
{column.canFilter ? column.render('Filter') : null } |
||||
</div> */} |
||||
</th> |
||||
))} |
||||
</tr> |
||||
))} |
||||
</thead> |
||||
|
||||
<tbody |
||||
{...getTableBodyProps()} |
||||
className="bg-white divide-y divide-gray-200" |
||||
> |
||||
{/* not using */} |
||||
{/* {rows.map((row) => { |
||||
prepareRow(row) |
||||
return( |
||||
<tr {...row.getRowProps()}> |
||||
{row.cells.map((cell) => { |
||||
return <td {...cell.getCellProps()} className="px-4 py-4 whitespace-nowrap text-sm" role="cell" style={{color:'#00253A'}}> |
||||
{cell.render('Cell')} |
||||
</td> |
||||
})} |
||||
</tr> |
||||
) |
||||
})} */} |
||||
{page.map((row) => { |
||||
prepareRow(row); |
||||
return ( |
||||
<tr {...row.getRowProps()}> |
||||
{row.cells.map((cell) => { |
||||
return ( |
||||
<td |
||||
{...cell.getCellProps()} |
||||
className="px-4 py-4 whitespace-nowrap text-sm" |
||||
role="cell" |
||||
style={{ color: "#00253A" }} |
||||
> |
||||
{cell.render("Cell")} |
||||
</td> |
||||
); |
||||
})} |
||||
</tr> |
||||
); |
||||
})} |
||||
|
||||
{/* not using */} |
||||
{/* {firstPageRows.map((row) => { |
||||
prepareRow(row); |
||||
return ( |
||||
<tr {...row.getRowProps()}> |
||||
{row.cells.map((cell) => { |
||||
return ( |
||||
<td |
||||
{...cell.getCellProps()} |
||||
className="px-4 py-4 whitespace-nowrap text-sm" |
||||
role="cell" |
||||
style={{ color: "#00253A" }} |
||||
> |
||||
{cell.render("Cell")} |
||||
</td> |
||||
); |
||||
})} |
||||
</tr> |
||||
); |
||||
})} */} |
||||
</tbody> |
||||
|
||||
<tfoot |
||||
className={`bg-gray-300 ${rows.length > 10 ? "w-full" : "hidden"}`} |
||||
> |
||||
{footerGroups.map((footerGroup) => ( |
||||
<tr {...footerGroup.getFooterGroupProps()}> |
||||
{footerGroup.headers.map((column) => ( |
||||
<td |
||||
{...column.getFooterProps} |
||||
className="px-4 py-2 text-right text-xs" |
||||
style={{ color: "#3287B9" }} |
||||
> |
||||
{column.render("Footer")} |
||||
</td> |
||||
))} |
||||
</tr> |
||||
))} |
||||
</tfoot> |
||||
</table> |
||||
|
||||
<pre> |
||||
<code> |
||||
{JSON.stringify( |
||||
{ |
||||
selectedFlatRows: selectedFlatRows.map((row) => row.original), |
||||
}, |
||||
null, |
||||
2 |
||||
)} |
||||
</code> |
||||
</pre> |
||||
|
||||
<div> |
||||
<span> |
||||
Page{" "} |
||||
<strong> |
||||
{pageIndex + 1} of {pageOptions.length} |
||||
</strong> |
||||
{""} |
||||
</span> |
||||
|
||||
<span> |
||||
| Go to Page:{" "} |
||||
<input |
||||
type="number" |
||||
defaultValue={pageIndex + 1} |
||||
onChange={(e) => { |
||||
const pageNumber = e.target.value |
||||
? Number(e.target.value) - 1 |
||||
: 0; |
||||
gotoPage(pageNumber); |
||||
}} |
||||
style={{ width: "50px" }} |
||||
/> |
||||
</span> |
||||
|
||||
<select |
||||
value={pageSize} |
||||
onChange={(e) => setPageSize(Number(e.target.value))} |
||||
> |
||||
{[7, 10, 25, 50].map((pageSize) => ( |
||||
<option key={pageSize} value={pageSize}> |
||||
Show {pageSize} |
||||
</option> |
||||
))} |
||||
</select> |
||||
|
||||
<button onClick={() => gotoPage(0)} disabled={!canPreviousPage}> |
||||
{" "} |
||||
{"<<"}{" "} |
||||
</button> |
||||
|
||||
<button |
||||
className="bg-blue-400 m-2 rounded text-white p-2" |
||||
onClick={() => previousPage()} |
||||
disabled={!canPreviousPage} |
||||
> |
||||
Previous |
||||
</button> |
||||
<button |
||||
className="bg-blue-400 m-2 rounded text-white p-2" |
||||
onClick={() => nextPage()} |
||||
disabled={!canNextPage} |
||||
> |
||||
Next |
||||
</button> |
||||
|
||||
<button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}> |
||||
{" "} |
||||
{">>"}{" "} |
||||
</button> |
||||
</div> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default BasicTable; |
||||
@ -1,35 +0,0 @@ |
||||
export function OrderLevel({ value }) { |
||||
return ( |
||||
<div className="p-2 rounded-3xl border border-gray-300 w-fit"> |
||||
{(() => { |
||||
switch(value) { |
||||
case 1: |
||||
return <div className="flex flex-row items-center justify-center "> |
||||
<span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#65FFAD" }}></span> |
||||
<span style={{ color: "#00253A" }} className="">وضعیت عادی</span> |
||||
</div>; |
||||
case 2: |
||||
return <div className="flex flex-row items-center justify-center "> |
||||
<span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#FF6565" }}></span> |
||||
<span style={{ color: "#00253A" }} className="">اعلان سطح هشدار</span> |
||||
</div>; |
||||
case 3: |
||||
return <div className="flex flex-row items-center justify-center "> |
||||
<span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#65DAFF" }}></span> |
||||
<span style={{ color: "#00253A" }} className="">بررسی و پیگیری</span> |
||||
</div>; |
||||
case 4: |
||||
return <div className="flex flex-row items-center justify-center "> |
||||
<span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#FFEA65" }}></span> |
||||
<span style={{ color: "#00253A" }} className="">وضعیت بحرانی</span> |
||||
</div>; |
||||
default: |
||||
return <div className="flex flex-row items-center justify-center "> |
||||
<span className="w-2 h-2 rounded-full ml-2" style={{ backgroundColor: "#CCFF65" }}></span> |
||||
<span style={{ color: "#00253A" }} className="">وضعیت پایدار</span> |
||||
</div>; |
||||
} |
||||
})()} |
||||
</div> |
||||
); |
||||
} |
||||
@ -1,55 +0,0 @@ |
||||
export function OrderStatus({ value }) { |
||||
return ( |
||||
<div className=""> |
||||
{(() => { |
||||
if (value === 1) { |
||||
return ( |
||||
<span |
||||
style={{ backgroundColor: "#E2FFE377", color: "#00613D" }} |
||||
className="p-2 rounded" |
||||
> |
||||
ارسال شده |
||||
</span> |
||||
); |
||||
} else if (value === 2) { |
||||
return ( |
||||
<span |
||||
style={{ backgroundColor: "#FFF78733", color: "#ECF150" }} |
||||
className="p-2 rounded" |
||||
> |
||||
رسیدگی |
||||
</span> |
||||
); |
||||
} else if (value === 3) { |
||||
return ( |
||||
<span |
||||
style={{ backgroundColor: "#FFD8CC33", color: "#611100" }} |
||||
className="p-2 rounded" |
||||
> |
||||
لغو شده |
||||
</span> |
||||
); |
||||
} else if (value === 4) { |
||||
return ( |
||||
<span |
||||
style={{ backgroundColor: "#E2FFFD33", color: "#00614A" }} |
||||
className="p-2 rounded" |
||||
> |
||||
پیگیری |
||||
</span> |
||||
); |
||||
} else { |
||||
return ( |
||||
<span |
||||
style={{ backgroundColor: "#DBCCFF33", color: "#440061" }} |
||||
className="p-2 rounded" |
||||
> |
||||
خطری |
||||
</span> |
||||
); |
||||
} |
||||
})()}{" "} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
@ -1,84 +0,0 @@ |
||||
import React from "react"; |
||||
|
||||
const TabBar = () => { |
||||
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> |
||||
); |
||||
}; |
||||
|
||||
export default TabBar; |
||||
|
Before Width: | Height: | Size: 489 B |
|
Before Width: | Height: | Size: 472 B |
@ -1,64 +0,0 @@ |
||||
import { format } from "date-fns"; |
||||
|
||||
import Table, { SelectColumnFilter } from "./BasicTable"; // new
|
||||
|
||||
import { ColumnFilter } from "./ColumnFilter"; |
||||
|
||||
import { OrderStatus } from "./OrderStatus"; |
||||
import { OrderLevel } from "./OrderLevel"; |
||||
import { Buttons } from "./Buttons"; |
||||
import { EditButtons } from "./EditButtons"; |
||||
|
||||
export const COLUMNS = [ |
||||
{ |
||||
Header: "نام و نام خانوادگی", |
||||
Footer: "نام و نام خانوادگی", |
||||
accessor: "name", |
||||
disableSortBy: true, |
||||
}, |
||||
{ |
||||
Header: "تاریخ سفارش", |
||||
Footer: "تاریخ سفارش", |
||||
accessor: "order-date", |
||||
Cell: ({ value }) => { |
||||
return format(new Date(value), "dd/MM/yyyy"); |
||||
}, |
||||
}, |
||||
{ |
||||
Header: "مبلغ سفارش", |
||||
Footer: "مبلغ سفارش", |
||||
accessor: "order-price", |
||||
Filter: ColumnFilter, |
||||
}, |
||||
{ |
||||
Header: "شماره سفارش", |
||||
Footer: "شماره سفارش", |
||||
accessor: "order-number", |
||||
}, |
||||
{ |
||||
Header: "شغل کاربر", |
||||
Footer: "شغل کاربر", |
||||
accessor: "user-job", |
||||
}, |
||||
{ |
||||
Header: "وضعیت سفارش", |
||||
Footer: "وضعیت سفارش", |
||||
accessor: "order-status", |
||||
Cell: OrderStatus, |
||||
}, |
||||
{ |
||||
Header: "سطح اهمیت", |
||||
Footer: "سطح اهمیت", |
||||
accessor: "order-level", |
||||
Cell: OrderLevel, |
||||
// Filter: SelectColumnFilter,
|
||||
// new
|
||||
}, |
||||
{ |
||||
Header: EditButtons, |
||||
Footer: "ویرایش", |
||||
accessor: "edit", |
||||
Cell: Buttons, |
||||
disableSortBy: true, |
||||
}, |
||||
]; |
||||
|
Before Width: | Height: | Size: 725 B |
|
Before Width: | Height: | Size: 570 B |
@ -1,154 +0,0 @@ |
||||
import React 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 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: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر", |
||||
}; |
||||
@ -1,16 +0,0 @@ |
||||
.customeClass1 .customeClass2 input { |
||||
display: none !important; |
||||
} |
||||
.customeClass1 .customeClass2 span { |
||||
display: none !important; |
||||
} |
||||
.no-scrollbar { |
||||
-ms-overflow-style: none; /* IE and Edge */ |
||||
scrollbar-width: none; /* Firefox */ |
||||
} |
||||
.tabbar{ |
||||
cursor: pointer; |
||||
} |
||||
.active2 ,.active2 li a{ |
||||
cursor: move !important; |
||||
} |
||||
|
Before Width: | Height: | Size: 658 B |
|
Before Width: | Height: | Size: 543 B |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 7.7 KiB |
Loading…
Reference in new issue