parent
6b7e36b906
commit
e6b9e02adf
7 changed files with 113 additions and 4 deletions
@ -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; |
Loading…
Reference in new issue