master
mahdi andalib 3 years ago
parent 6b7e36b906
commit e6b9e02adf
  1. 1
      package.json
  2. 1
      src/components/ReactTable4/BasicTable.js
  3. 24
      src/components/ReactTable4/MultiRangeInput.js
  4. 59
      src/components/ReactTable4/NumberRangeColumnFilter.js
  5. 6
      src/components/ReactTable4/columns.js
  6. 2
      src/components/ReactTable4/index.js
  7. 24
      yarn.lock

@ -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",

@ -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";

@ -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 (
<div className="bg-red-400">
<InputRange
maxValue={20}
minValue={0}
value={this.state.value}
onChange={(value) => this.setState({ value })}
/>
</div>
);
}
}

@ -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 (
<div
style={{
display: "flex",
}}
>
<input
value={filterValue[0] || ""}
type="number"
onChange={(e) => {
const val = e.target.value;
setFilter((old = []) => [
val ? parseInt(val, 10) : undefined,
old[1],
]);
}}
placeholder={`Min (${min})`}
style={{
width: "70px",
marginRight: "0.5rem",
}}
/>
to
<input
value={filterValue[1] || ""}
type="number"
onChange={(e) => {
const val = e.target.value;
setFilter((old = []) => [
old[0],
val ? parseInt(val, 10) : undefined,
]);
}}
placeholder={`Max (${max})`}
style={{
width: "70px",
marginLeft: "0.5rem",
}}
/>
</div>
);
};
export default NumberRangeColumnFilter;

@ -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: "شماره سفارش",

@ -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 (
<div className="my-10 w-11/12 mx-auto">
<MultiRangeInput />
{/* breadCrumb */}
<div className="flex flex-row items-center">
{breadCrumbs.map((breadCrumb, index) => (

@ -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==

Loading…
Cancel
Save