diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js
index ff76e64c56..275aec212e 100644
--- a/src/components/views/rooms/MemberList.js
+++ b/src/components/views/rooms/MemberList.js
@@ -264,13 +264,23 @@ module.exports = React.createClass({
return latB - latA;
},
- makeMemberTiles: function(membership) {
+ onSearchQueryChanged: function(input) {
+ this.setState({
+ searchQuery: input
+ });
+ },
+
+ makeMemberTiles: function(membership, query) {
var MemberTile = sdk.getComponent("rooms.MemberTile");
+ query = (query || "").toLowerCase();
var self = this;
var memberList = self.state.members.filter(function(userId) {
var m = self.memberDict[userId];
+ if (query && m.name.toLowerCase().indexOf(query) !== 0) {
+ return false;
+ }
return m.membership == membership;
}).map(function(userId) {
var m = self.memberDict[userId];
@@ -329,20 +339,15 @@ module.exports = React.createClass({
return (
+ onQueryChanged={this.onSearchQueryChanged}
+ entities={Entities.fromUsers(allUsers, true, this.onInvite)} />
);
}
},
render: function() {
var invitedSection = null;
- var invitedMemberTiles = this.makeMemberTiles('invite');
+ var invitedMemberTiles = this.makeMemberTiles('invite', this.state.searchQuery);
if (invitedMemberTiles.length > 0) {
invitedSection = (
@@ -359,7 +364,7 @@ module.exports = React.createClass({
{this.inviteTile()}
- {this.makeMemberTiles('join')}
+ {this.makeMemberTiles('join', this.state.searchQuery)}
{invitedSection}
diff --git a/src/components/views/rooms/SearchableEntityList.js b/src/components/views/rooms/SearchableEntityList.js
index 52f3307bcd..8657293478 100644
--- a/src/components/views/rooms/SearchableEntityList.js
+++ b/src/components/views/rooms/SearchableEntityList.js
@@ -26,16 +26,20 @@ var SearchableEntityList = React.createClass({
propTypes: {
searchPlaceholderText: React.PropTypes.string,
emptyQueryShowsAll: React.PropTypes.bool,
+ showInputBox: React.PropTypes.bool,
+ onQueryChanged: React.PropTypes.func, // fn(inputText)
onSubmit: React.PropTypes.func, // fn(inputText)
entities: React.PropTypes.array
},
getDefaultProps: function() {
return {
+ showInputBox: true,
searchPlaceholderText: "Search",
entities: [],
emptyQueryShowsAll: false,
- onSubmit: function() {}
+ onSubmit: function() {},
+ onQueryChanged: function(input) {}
};
},
@@ -46,12 +50,24 @@ var SearchableEntityList = React.createClass({
};
},
+ /**
+ * Public-facing method to set the input query text to the given input.
+ * @param {string} input
+ */
+ setQuery: function(input) {
+ this.setState({
+ query: input,
+ results: this.getSearchResults(input)
+ });
+ },
+
onQueryChanged: function(ev) {
var q = ev.target.value;
this.setState({
query: q,
results: this.getSearchResults(q)
});
+ this.props.onQueryChanged(q);
},
onQuerySubmit: function(ev) {
@@ -69,13 +85,21 @@ var SearchableEntityList = React.createClass({
},
render: function() {
- return (
-
+ var inputBox;
+
+ if (this.props.showInputBox) {
+ inputBox = (
+ );
+ }
+
+ return (
+
+ {inputBox}
{this.state.results.map((entity) => {
return entity.getJsx();