From e6b9e02adf2095435683b4277c1ed5a794c95c45 Mon Sep 17 00:00:00 2001 From: mahdi andalib Date: Tue, 22 Feb 2022 16:42:57 +0330 Subject: [PATCH] update --- package.json | 1 + src/components/ReactTable4/BasicTable.js | 1 - src/components/ReactTable4/MultiRangeInput.js | 24 ++++++++ .../ReactTable4/NumberRangeColumnFilter.js | 59 +++++++++++++++++++ src/components/ReactTable4/columns.js | 6 +- src/components/ReactTable4/index.js | 2 + yarn.lock | 24 +++++++- 7 files changed, 113 insertions(+), 4 deletions(-) create mode 100644 src/components/ReactTable4/MultiRangeInput.js create mode 100644 src/components/ReactTable4/NumberRangeColumnFilter.js 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==