diff --git a/src/component-index.js b/src/component-index.js
index 7ae15ba12c..cbecbf7d2e 100644
--- a/src/component-index.js
+++ b/src/component-index.js
@@ -70,6 +70,7 @@ module.exports.components['views.rooms.RoomList'] = require('./components/views/
module.exports.components['views.rooms.RoomPreviewBar'] = require('./components/views/rooms/RoomPreviewBar');
module.exports.components['views.rooms.RoomSettings'] = require('./components/views/rooms/RoomSettings');
module.exports.components['views.rooms.RoomTile'] = require('./components/views/rooms/RoomTile');
+module.exports.components['views.rooms.SearchableEntityList'] = require('./components/views/rooms/SearchableEntityList');
module.exports.components['views.rooms.SearchResultTile'] = require('./components/views/rooms/SearchResultTile');
module.exports.components['views.rooms.TabCompleteBar'] = require('./components/views/rooms/TabCompleteBar');
module.exports.components['views.settings.ChangeAvatar'] = require('./components/views/settings/ChangeAvatar');
diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js
index eac5466e88..c768144cdc 100644
--- a/src/components/views/rooms/MemberList.js
+++ b/src/components/views/rooms/MemberList.js
@@ -267,11 +267,6 @@ module.exports = React.createClass({
return memberList;
},
- onPopulateInvite: function(e) {
- this.onInvite(this.refs.invite.value);
- e.preventDefault();
- },
-
inviteTile: function() {
if (this.state.inviting) {
var Loader = sdk.getComponent("elements.Spinner");
@@ -279,10 +274,16 @@ module.exports = React.createClass({
);
} else {
+ var SearchableEntityList = sdk.getComponent("rooms.SearchableEntityList");
+ var room = MatrixClientPeg.get().getRoom(this.props.roomId);
return (
-
+
);
}
},
diff --git a/src/components/views/rooms/SearchableEntityList.js b/src/components/views/rooms/SearchableEntityList.js
new file mode 100644
index 0000000000..53ed93a81f
--- /dev/null
+++ b/src/components/views/rooms/SearchableEntityList.js
@@ -0,0 +1,126 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+var React = require('react');
+var classNames = require('classnames');
+var MatrixClientPeg = require("../../../MatrixClientPeg");
+var Modal = require("../../../Modal");
+var sdk = require('../../../index');
+var GeminiScrollbar = require('react-gemini-scrollbar');
+
+// A list capable of displaying entities which conform to the SearchableEntity
+// interface which is an object containing getJsx(): Jsx and matches(query: string): boolean
+var SearchableEntityList = React.createClass({
+ displayName: 'SearchableEntityList',
+
+ propTypes: {
+ searchPlaceholderText: React.PropTypes.string,
+ emptyQueryShowsAll: React.PropTypes.bool,
+ onSubmit: React.PropTypes.func, // fn(inputText)
+ entities: React.PropTypes.array,
+ },
+
+ getDefaultProps: function() {
+ return {
+ searchPlaceholderText: "Search",
+ entities: [],
+ emptyQueryShowsAll: false,
+ onSubmit: function() {}
+ };
+ },
+
+ getInitialState: function() {
+ return {
+ query: "",
+ results: this.getSearchResults("")
+ };
+ },
+
+ onQueryChanged: function(ev) {
+ var q = ev.target.value;
+ this.setState({
+ query: q,
+ results: this.getSearchResults(q)
+ });
+ },
+
+ onQuerySubmit: function(ev) {
+ ev.preventDefault();
+ this.props.onSubmit(this.state.query);
+ },
+
+ getSearchResults: function(query) {
+ if (!query || query.length === 0) {
+ return this.props.emptyQueryShowsAll ? this.props.entities : []
+ }
+ return this.props.entities.filter(function(e) {
+ return e.matches(query);
+ });
+ },
+
+ render: function() {
+ return (
+
+
+
+ {this.state.results.map(function(entity) {
+ return entity.getJsx();
+ })}
+
+
+ );
+ }
+});
+
+SearchableEntityList.fromRoomMembers = function(members) {
+ var MemberTile = sdk.getComponent("rooms.MemberTile");
+ return members.map(function(m) {
+ return {
+ matches: function(query) {
+ return m.name.toLowerCase().indexOf(query.toLowerCase()) === 0;
+ },
+
+ getJsx: function() {
+ return (
+
+ );
+ }
+ };
+ });
+};
+
+SearchableEntityList.fromUsers = function(users) {
+ var UserTile = sdk.getComponent("rooms.UserTile");
+ return users.map(function(u) {
+ return {
+ matches: function(query) {
+ return u.displayName.toLowerCase().indexOf(query.toLowerCase()) === 0;
+ },
+
+ getJsx: function() {
+ return (
+
+ );
+ }
+ };
+ });
+};
+
+
+ module.exports = SearchableEntityList;