diff --git a/package.json b/package.json
index a1940ff..a788278 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
+ "react-input-range": "^1.3.0",
"react-redux": "^7.2.6",
"react-scripts": "5.0.0",
"react-table": "^7.7.0",
diff --git a/src/components/ReactTable4/BasicTable.js b/src/components/ReactTable4/BasicTable.js
index fa3624b..1cb6306 100644
--- a/src/components/ReactTable4/BasicTable.js
+++ b/src/components/ReactTable4/BasicTable.js
@@ -8,7 +8,6 @@ import MOCK_DATA from "./MOCK_DATA.json";
import { ColumnSearch } from "./ColumnSearch";
import { GlobalFilter } from "./GlobalFilter";
-import { ToggleColumns } from "./ToggleColumns";
import { COLUMNS } from "./COLUMNS";
import { Pagination } from "./Pagination";
import { GoToPage } from "./GoToPage";
diff --git a/src/components/ReactTable4/MultiRangeInput.js b/src/components/ReactTable4/MultiRangeInput.js
new file mode 100644
index 0000000..08a0d5f
--- /dev/null
+++ b/src/components/ReactTable4/MultiRangeInput.js
@@ -0,0 +1,24 @@
+import React, { Component } from "react";
+import InputRange from "react-input-range";
+
+export default class MultiRangeInput extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ value: { min: 2, max: 10 },
+ };
+ }
+ render() {
+ return (
+
+ this.setState({ value })}
+ />
+
+ );
+ }
+}
diff --git a/src/components/ReactTable4/NumberRangeColumnFilter.js b/src/components/ReactTable4/NumberRangeColumnFilter.js
new file mode 100644
index 0000000..591cdb1
--- /dev/null
+++ b/src/components/ReactTable4/NumberRangeColumnFilter.js
@@ -0,0 +1,59 @@
+import React from "react";
+
+const NumberRangeColumnFilter = ({
+ column: { filterValue = [], preFilteredRows, setFilter, id },
+}) => {
+ const [min, max] = React.useMemo(() => {
+ let min = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
+ let max = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
+ preFilteredRows.forEach((row) => {
+ min = Math.min(row.values[id], min);
+ max = Math.max(row.values[id], max);
+ });
+ return [min, max];
+ }, [id, preFilteredRows]);
+
+ return (
+
+ {
+ const val = e.target.value;
+ setFilter((old = []) => [
+ val ? parseInt(val, 10) : undefined,
+ old[1],
+ ]);
+ }}
+ placeholder={`Min (${min})`}
+ style={{
+ width: "70px",
+ marginRight: "0.5rem",
+ }}
+ />
+ to
+ {
+ const val = e.target.value;
+ setFilter((old = []) => [
+ old[0],
+ val ? parseInt(val, 10) : undefined,
+ ]);
+ }}
+ placeholder={`Max (${max})`}
+ style={{
+ width: "70px",
+ marginLeft: "0.5rem",
+ }}
+ />
+
+ );
+};
+
+export default NumberRangeColumnFilter;
diff --git a/src/components/ReactTable4/columns.js b/src/components/ReactTable4/columns.js
index 2e534e2..aa5189b 100644
--- a/src/components/ReactTable4/columns.js
+++ b/src/components/ReactTable4/columns.js
@@ -7,6 +7,7 @@ import { EditButtons } from "./EditButtons";
import { SelectColumnFilter } from "./SelectColumnFilter.js";
import { SelectColumnFilter2 } from "./SelectColumnFilter2.js";
import { SliderColumnFilter } from "./SliderColumnFilter.js";
+import NumberRangeColumnFilter from "./NumberRangeColumnFilter";
export const COLUMNS = ({ setFiltering, filtering, addTab }) => [
{
@@ -19,7 +20,8 @@ export const COLUMNS = ({ setFiltering, filtering, addTab }) => [
Header: "تاریخ سفارش",
Footer: "ستون تاریخ سفارش",
accessor: "order_date",
- Filter: SliderColumnFilter,
+ // Filter: SliderColumnFilter,
+ Filter: NumberRangeColumnFilter,
Cell: ({ value }) => {
return format(new Date(value), "dd/MM/yyyy");
},
@@ -28,7 +30,7 @@ export const COLUMNS = ({ setFiltering, filtering, addTab }) => [
Header: "مبلغ سفارش",
Footer: "ستون مبلغ سفارش",
accessor: "order_price",
- Filter: SliderColumnFilter,
+ Filter: NumberRangeColumnFilter,
},
{
Header: "شماره سفارش",
diff --git a/src/components/ReactTable4/index.js b/src/components/ReactTable4/index.js
index c6121bd..435b4c0 100644
--- a/src/components/ReactTable4/index.js
+++ b/src/components/ReactTable4/index.js
@@ -1,6 +1,7 @@
import React, { useRef, useState } from "react";
import BasicTable from "./BasicTable";
+import MultiRangeInput from "./MultiRangeInput";
import grayLeftArrow from "./gray-arrow-left.svg";
import blackLeftArrow from "./black-arrow-left.svg";
@@ -31,6 +32,7 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
return (
+
{/* breadCrumb */}
{breadCrumbs.map((breadCrumb, index) => (
diff --git a/yarn.lock b/yarn.lock
index bc39f99..ec9c876 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2517,6 +2517,11 @@ atob@^2.1.2:
resolved "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz"
integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
+autobind-decorator@^1.3.4:
+ version "1.4.3"
+ resolved "https://registry.yarnpkg.com/autobind-decorator/-/autobind-decorator-1.4.3.tgz#4c96ffa77b10622ede24f110f5dbbf56691417d1"
+ integrity sha1-TJb/p3sQYi7eJPEQ9du/VmkUF9E=
+
autoprefixer@^10.4.0:
version "10.4.0"
resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.0.tgz"
@@ -7219,6 +7224,15 @@ prompts@^2.0.1, prompts@^2.4.2:
kleur "^3.0.3"
sisteransi "^1.0.5"
+prop-types@^15.5.8:
+ version "15.8.1"
+ resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+ integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+ dependencies:
+ loose-envify "^1.4.0"
+ object-assign "^4.1.1"
+ react-is "^16.13.1"
+
prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz"
@@ -7366,7 +7380,15 @@ react-icons@^4.3.1:
resolved "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz"
integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==
-react-is@^16.10.2, react-is@^16.7.0, react-is@^16.8.1:
+react-input-range@^1.3.0:
+ version "1.3.0"
+ resolved "https://registry.yarnpkg.com/react-input-range/-/react-input-range-1.3.0.tgz#f96d001631ab817417f1e26d8f9f9684b4827f59"
+ integrity sha1-+W0AFjGrgXQX8eJtj5+WhLSCf1k=
+ dependencies:
+ autobind-decorator "^1.3.4"
+ prop-types "^15.5.8"
+
+react-is@^16.10.2, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
version "16.13.1"
resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==