diff --git a/build.zip b/build.zip index 5883942..69a0ee2 100644 Binary files a/build.zip and b/build.zip differ diff --git a/package-lock.json b/package-lock.json index 5693942..ad52b11 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@fortawesome/free-brands-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/react-fontawesome": "^0.1.16", + "@heroicons/react": "^1.0.5", "@reduxjs/toolkit": "^1.7.1", "@testing-library/jest-dom": "^5.16.1", "@testing-library/react": "^12.1.2", @@ -21,6 +22,7 @@ "react-icons": "^4.3.1", "react-redux": "^7.2.6", "react-scripts": "5.0.0", + "react-table": "^7.7.0", "react-tooltip": "^4.2.21", "recharts": "^2.1.8", "redux": "^4.1.2", @@ -2147,6 +2149,14 @@ "react": ">=16.x" } }, + "node_modules/@heroicons/react": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-1.0.5.tgz", + "integrity": "sha512-UDMyLM2KavIu2vlWfMspapw9yii7aoLwzI2Hudx4fyoPwfKfxU8r3cL8dEBXOjcLG0/oOONZzbT14M1HoNtEcg==", + "peerDependencies": { + "react": ">= 16" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.9.2", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.2.tgz", @@ -13892,6 +13902,18 @@ "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0" } }, + "node_modules/react-table": { + "version": "7.7.0", + "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.7.0.tgz", + "integrity": "sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^16.8.3 || ^17.0.0-0" + } + }, "node_modules/react-tooltip": { "version": "4.2.21", "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.21.tgz", @@ -18314,6 +18336,12 @@ "prop-types": "^15.7.2" } }, + "@heroicons/react": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-1.0.5.tgz", + "integrity": "sha512-UDMyLM2KavIu2vlWfMspapw9yii7aoLwzI2Hudx4fyoPwfKfxU8r3cL8dEBXOjcLG0/oOONZzbT14M1HoNtEcg==", + "requires": {} + }, "@humanwhocodes/config-array": { "version": "0.9.2", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.2.tgz", @@ -26768,6 +26796,12 @@ "react-transition-group": "2.9.0" } }, + "react-table": { + "version": "7.7.0", + "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.7.0.tgz", + "integrity": "sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA==", + "requires": {} + }, "react-tooltip": { "version": "4.2.21", "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.21.tgz", diff --git a/package.json b/package.json index bdbde7c..a2057b3 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "@fortawesome/free-brands-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/react-fontawesome": "^0.1.16", + "@heroicons/react": "^1.0.5", "@reduxjs/toolkit": "^1.7.1", "@testing-library/jest-dom": "^5.16.1", "@testing-library/react": "^12.1.2", @@ -16,6 +17,7 @@ "react-icons": "^4.3.1", "react-redux": "^7.2.6", "react-scripts": "5.0.0", + "react-table": "^7.7.0", "react-tooltip": "^4.2.21", "recharts": "^2.1.8", "redux": "^4.1.2", diff --git a/src/App.js b/src/App.js index 8b55ede..878ce9e 100644 --- a/src/App.js +++ b/src/App.js @@ -42,6 +42,7 @@ import SpecifiedDomainRadarChart from "./components/Chart/SpecifiedDomainRadarCh import Design1 from "./components/ProductSalesAmount/Design1"; import Design2 from "./components/ProductSalesAmount/Design2"; import TableDesign1 from "./components/Table/Design1"; +import ReactTable2 from "./components/ReactTable2"; import Switch from "./components/Switch"; @@ -49,45 +50,45 @@ function App() { return (
- {/* */} - {/* */} + + {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
); diff --git a/src/components/ReactTable2/Table.js b/src/components/ReactTable2/Table.js new file mode 100644 index 0000000..2b683fd --- /dev/null +++ b/src/components/ReactTable2/Table.js @@ -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 ( + + ); +} + +export function StatusPill({ value }) { + // const status = value ? value.toLowerCase() : "unknown"; + + return ( + + {value ? "فعال" : "غیر فعال"} + + ); +} + +// export function AvatarCell({ value, column, row }) { +// return ( +//
+// {/* برای عکس */} +// {/*
+// +//
*/} +// {/* اگر بخواهیم در کنار عنوان یک محتوا دیگه ای بنویسیم */} +// {/*
+//
{value}
+//
+// {row.original[column.emailAccessor]} +//
+//
*/} +//
+// ); +// } + +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 ( + <> +
+ + {headerGroups.map((headerGroup) => + headerGroup.headers.map((column) => + column.Filter ? ( +
+ {column.render("Filter")} +
+ ) : null + ) + )} +
+ {/* table */} +
+
+
+
+ + + {headerGroups.map((headerGroup) => ( + + {headerGroup.headers.map((column) => ( + // Add the sorting props to control sorting. For this example + // we can add them into the header props + + ))} + + ))} + + + {page.map((row, i) => { + // new + prepareRow(row); + return ( + + {row.cells.map((cell) => { + return ( + + ); + })} + + ); + })} + +
+
+ {column.render("Header")} + {/* Add a sort direction indicator */} + + {column.isSorted ? ( + column.isSortedDesc ? ( + + ) : ( + + ) + ) : ( + + )} + +
+
+ {cell.column.Cell.name === "defaultRenderer" ? ( +
+ {cell.render("Cell")} +
+ ) : ( + cell.render("Cell") + )} +
+
+
+
+
+ {/* Pagination */} +
+
+ + +
+
+ {/* numbers */} +
+ + صفحه {state.pageIndex + 1} + از + {pageOptions.length} + + +
+ {/* arrows */} +
+ +
+
+
+ + ); +} + +export default Table; diff --git a/src/components/ReactTable2/index.js b/src/components/ReactTable2/index.js new file mode 100644 index 0000000..b451d3d --- /dev/null +++ b/src/components/ReactTable2/index.js @@ -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 ( +
+
+
+ + + + + ); +}; + +export default ReactTable2; diff --git a/src/components/ReactTable2/shared/Button.js b/src/components/ReactTable2/shared/Button.js new file mode 100644 index 0000000..0eb5e88 --- /dev/null +++ b/src/components/ReactTable2/shared/Button.js @@ -0,0 +1,35 @@ +import React from 'react' +import { classNames } from './Utils' + +export function Button({ children, className, ...rest }) { + return ( + + ) +} + +export function PageButton({ children, className, ...rest }) { + return ( + + ) +} + diff --git a/src/components/ReactTable2/shared/Icons.js b/src/components/ReactTable2/shared/Icons.js new file mode 100644 index 0000000..8751e5e --- /dev/null +++ b/src/components/ReactTable2/shared/Icons.js @@ -0,0 +1,17 @@ +export function SortIcon({ className }) { + return ( + + ) +} + +export function SortUpIcon({ className }) { + return ( + + ) +} + +export function SortDownIcon({ className }) { + return ( + + ) +} \ No newline at end of file diff --git a/src/components/ReactTable2/shared/Utils.js b/src/components/ReactTable2/shared/Utils.js new file mode 100644 index 0000000..91dcb3e --- /dev/null +++ b/src/components/ReactTable2/shared/Utils.js @@ -0,0 +1,3 @@ +export function classNames(...classes) { + return classes.filter(Boolean).join(" "); +} \ No newline at end of file diff --git a/src/components/testtttt/Testttt.js b/src/components/testtttt/Testttt.js index 39a4a31..999f0c5 100644 --- a/src/components/testtttt/Testttt.js +++ b/src/components/testtttt/Testttt.js @@ -19,12 +19,12 @@ export const Testttt = ({ bookBackCoverBg }) => { // maxHeight: "300px", }} > - -
+ /> */} +
diff --git a/yarn.lock b/yarn.lock index fa49394..b7237fc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1258,6 +1258,11 @@ dependencies: "prop-types" "^15.7.2" +"@heroicons/react@^1.0.5": + "integrity" "sha512-UDMyLM2KavIu2vlWfMspapw9yii7aoLwzI2Hudx4fyoPwfKfxU8r3cL8dEBXOjcLG0/oOONZzbT14M1HoNtEcg==" + "resolved" "https://registry.npmjs.org/@heroicons/react/-/react-1.0.5.tgz" + "version" "1.0.5" + "@humanwhocodes/config-array@^0.9.2": "integrity" "sha512-UXOuFCGcwciWckOpmfKDq/GyhlTf9pN/BzG//x8p8zTOFEcGuA68ANXheFS0AGvy3qgZqLBUkMs7hqzqCKOVwA==" "resolved" "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.2.tgz" @@ -7615,6 +7620,11 @@ "raf" "^3.4.0" "react-transition-group" "2.9.0" +"react-table@^7.7.0": + "integrity" "sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA==" + "resolved" "https://registry.npmjs.org/react-table/-/react-table-7.7.0.tgz" + "version" "7.7.0" + "react-tooltip@^4.2.21": "integrity" "sha512-zSLprMymBDowknr0KVDiJ05IjZn9mQhhg4PRsqln0OZtURAJ1snt1xi5daZfagsh6vfsziZrc9pErPTDY1ACig==" "resolved" "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.21.tgz" @@ -7633,7 +7643,7 @@ "prop-types" "^15.6.2" "react-lifecycles-compat" "^3.0.4" -"react@*", "react@^15.0.0 || ^16.0.0 || ^17.0.0", "react@^16.0.0 || ^17.0.0", "react@^16.8.3 || ^17", "react@^16.9.0 || ^17.0.0 || 18.0.0-beta", "react@^17.0.2", "react@>= 16", "react@>= 16.8.0 < 18.0.0", "react@>=15.0.0", "react@>=16.0.0", "react@>=16.x", "react@17.0.2": +"react@*", "react@^15.0.0 || ^16.0.0 || ^17.0.0", "react@^16.0.0 || ^17.0.0", "react@^16.8.3 || ^17", "react@^16.8.3 || ^17.0.0-0", "react@^16.9.0 || ^17.0.0 || 18.0.0-beta", "react@^17.0.2", "react@>= 16", "react@>= 16.8.0 < 18.0.0", "react@>=15.0.0", "react@>=16.0.0", "react@>=16.x", "react@17.0.2": "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==" "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz" "version" "17.0.2"