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