53 lines
1.3 KiB
JavaScript
53 lines
1.3 KiB
JavaScript
import React, {Component} from "react";
|
|
|
|
export default class SlidingFloatingFilter extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
maxValue: props.maxValue,
|
|
currentValue: 0
|
|
}
|
|
}
|
|
|
|
valueChanged = (event) => {
|
|
this.setState({
|
|
currentValue: event.target.value
|
|
},
|
|
() => {
|
|
this.props.onFloatingFilterChanged({model: this.buildModel()});
|
|
})
|
|
|
|
};
|
|
|
|
onParentModelChanged(parentModel) {
|
|
// note that the filter could be anything here, but our purposes we're assuming a greater than filter only,
|
|
// so just read off the value and use that
|
|
this.setState({
|
|
currentValue: !parentModel ? 0 : parentModel.filter
|
|
});
|
|
}
|
|
|
|
buildModel() {
|
|
if (this.state.currentValue === 0) {
|
|
return null;
|
|
}
|
|
return {
|
|
filterType: 'number',
|
|
type: 'greaterThan',
|
|
filter: this.state.currentValue,
|
|
filterTo: null
|
|
};
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<input type="range"
|
|
value={this.state.currentValue}
|
|
min={0}
|
|
max={this.state.maxValue}
|
|
step={1}
|
|
onChange={this.valueChanged}/>
|
|
)
|
|
}
|
|
} |