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

@ -108,6 +108,15 @@ class UserEntity extends Entity {
module.exports = { module.exports = {
newEntity: function(jsx, matchFn) {
var entity = new Entity();
entity.getJsx = function() {
return jsx;
};
entity.matches = matchFn;
return entity;
},
/** /**
* @param {RoomMember[]} members * @param {RoomMember[]} members
* @return {Entity[]} * @return {Entity[]}

View file

@ -311,6 +311,17 @@ module.exports = React.createClass({
}, },
onSearchQueryChanged: function(input) { onSearchQueryChanged: function(input) {
var EntityTile = sdk.getComponent("rooms.EntityTile");
this._emailEntity = new Entities.newEntity(
<EntityTile key="inv_email" suppressOnHover={true} showInviteButton={true}
presenceState="online" onClick={this.onInvite.bind(this, input)} name={
`Email: ${input}`
} />,
function(query) {
return true; // always show this
}
);
this.setState({ this.setState({
searchQuery: input searchQuery: input
}); });
@ -369,12 +380,19 @@ module.exports = React.createClass({
); );
} else { } else {
var SearchableEntityList = sdk.getComponent("rooms.SearchableEntityList"); var SearchableEntityList = sdk.getComponent("rooms.SearchableEntityList");
var entities = Entities.fromUsers(this.userList || [], true, this.onInvite);
// Add an "Email: foo@bar.com" tile as the first tile
if (this._emailEntity) {
entities.unshift(this._emailEntity);
}
return ( return (
<SearchableEntityList searchPlaceholderText={"Invite / Search"} <SearchableEntityList searchPlaceholderText={"Invite / Search"}
onSubmit={this.onInvite} onSubmit={this.onInvite}
onQueryChanged={this.onSearchQueryChanged} onQueryChanged={this.onSearchQueryChanged}
entities={Entities.fromUsers(this.userList || [], true, this.onInvite)} /> entities={entities} />
); );
} }
}, },

View file

@ -46,10 +46,17 @@ var SearchableEntityList = React.createClass({
getInitialState: function() { getInitialState: function() {
return { return {
query: "", 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() { componentWillUnmount: function() {
// pretend the query box was blanked out else filters could still be // pretend the query box was blanked out else filters could still be
// applied to other components which rely on onQueryChanged. // applied to other components which rely on onQueryChanged.
@ -63,7 +70,7 @@ var SearchableEntityList = React.createClass({
setQuery: function(input) { setQuery: function(input) {
this.setState({ this.setState({
query: input, 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; var q = ev.target.value;
this.setState({ this.setState({
query: q, 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) { onQuerySubmit: function(ev) {
@ -81,11 +94,11 @@ var SearchableEntityList = React.createClass({
this.props.onSubmit(this.state.query); this.props.onSubmit(this.state.query);
}, },
getSearchResults: function(query) { getSearchResults: function(query, entities) {
if (!query || query.length === 0) { 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); return e.matches(query);
}); });
}, },