84 lines
2.0 KiB
JavaScript
84 lines
2.0 KiB
JavaScript
import React, {Component} from "react";
|
|
|
|
export default class PartialMatchFilter extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
text: ''
|
|
};
|
|
|
|
this.valueGetter = this.props.valueGetter;
|
|
}
|
|
|
|
isFilterActive() {
|
|
return this.state.text !== null && this.state.text !== undefined && this.state.text !== '';
|
|
}
|
|
|
|
doesFilterPass(params) {
|
|
return this.state.text.toLowerCase()
|
|
.split(" ")
|
|
.every((filterWord) => {
|
|
return this.valueGetter(params.node).toString().toLowerCase().indexOf(filterWord) >= 0;
|
|
});
|
|
}
|
|
|
|
getModel() {
|
|
return {value: this.state.text};
|
|
}
|
|
|
|
setModel(model) {
|
|
this.state.text = model ? model.value : '';
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.focus();
|
|
}
|
|
|
|
focus() {
|
|
setTimeout(() => {
|
|
if (this.refs.input) {
|
|
this.refs.input.focus();
|
|
}
|
|
})
|
|
}
|
|
|
|
componentMethod(message) {
|
|
alert(`Alert from PartialMatchFilterComponent ${message}`);
|
|
}
|
|
|
|
onChange = (event) => {
|
|
let newValue = event.target.value;
|
|
if (this.state.text !== newValue) {
|
|
this.setState({
|
|
text: newValue
|
|
}, () => {
|
|
// wait for the state to be applied, then let the grid know about the change
|
|
this.props.filterChangedCallback();
|
|
});
|
|
|
|
}
|
|
};
|
|
|
|
render() {
|
|
console.log("render");
|
|
let style = {
|
|
border: "2px solid #22ff22",
|
|
borderRadius: "5px",
|
|
backgroundColor: "#bbffbb",
|
|
width: "200px",
|
|
height: "50px"
|
|
};
|
|
|
|
return (
|
|
<div style={style}>
|
|
Filter: <input style={{height: "20px"}}
|
|
ref="input"
|
|
value={this.state.text}
|
|
onChange={this.onChange}
|
|
className="form-control"/>
|
|
</div>
|
|
);
|
|
}
|
|
};
|