Add a tile to the invitee list which represents an email tile

This commit is contained in:
Kegan Dougal 2016-01-22 17:20:52 +00:00
parent ed3a112e5c
commit c3f786cc5e
3 changed files with 49 additions and 9 deletions

View file

@ -46,10 +46,17 @@ var SearchableEntityList = React.createClass({
getInitialState: function() {
return {
query: "",
results: this.getSearchResults("")
results: this.getSearchResults("", this.props.entities)
};
},
componentWillReceiveProps: function(newProps) {
// recalculate the search results in case we got new entities
this.setState({
results: this.getSearchResults(this.state.query, newProps.entities)
});
},
componentWillUnmount: function() {
// pretend the query box was blanked out else filters could still be
// applied to other components which rely on onQueryChanged.
@ -63,7 +70,7 @@ var SearchableEntityList = React.createClass({
setQuery: function(input) {
this.setState({
query: input,
results: this.getSearchResults(input)
results: this.getSearchResults(input, this.props.entities)
});
},
@ -71,9 +78,15 @@ var SearchableEntityList = React.createClass({
var q = ev.target.value;
this.setState({
query: q,
results: this.getSearchResults(q)
results: this.getSearchResults(q, this.props.entities)
}, () => {
// invoke the callback AFTER we've flushed the new state. We need to
// do this because onQueryChanged can result in new props being passed
// to this component, which will then try to recalculate the search
// list. If we do this without flushing, we'll recalc with the last
// search term and not the current one!
this.props.onQueryChanged(q);
});
this.props.onQueryChanged(q);
},
onQuerySubmit: function(ev) {
@ -81,11 +94,11 @@ var SearchableEntityList = React.createClass({
this.props.onSubmit(this.state.query);
},
getSearchResults: function(query) {
getSearchResults: function(query, entities) {
if (!query || query.length === 0) {
return this.props.emptyQueryShowsAll ? this.props.entities : []
return this.props.emptyQueryShowsAll ? entities : []
}
return this.props.entities.filter(function(e) {
return entities.filter(function(e) {
return e.matches(query);
});
},