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;