Merge branch 'master' of https://git.sitenevis.com/mahdi/danovinTasks
commit
8222cee481
11 changed files with 540 additions and 42 deletions
@ -0,0 +1,306 @@ |
||||
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; |
||||
@ -0,0 +1,90 @@ |
||||
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; |
||||
@ -0,0 +1,35 @@ |
||||
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> |
||||
) |
||||
} |
||||
|
||||
@ -0,0 +1,17 @@ |
||||
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> |
||||
) |
||||
} |
||||
@ -0,0 +1,3 @@ |
||||
export function classNames(...classes) { |
||||
return classes.filter(Boolean).join(" "); |
||||
} |
||||
Loading…
Reference in new issue