diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js index c2431e78ac..adfc4c66c2 100644 --- a/src/components/views/rooms/MemberList.js +++ b/src/components/views/rooms/MemberList.js @@ -24,6 +24,7 @@ var sdk = require('../../../index'); var GeminiScrollbar = require('react-gemini-scrollbar'); var rate_limited_func = require('../../../ratelimitedfunc'); +var INITIAL_SEARCH_RESULTS_COUNT = 10; var INITIAL_LOAD_NUM_MEMBERS = 30; var SHARE_HISTORY_WARNING = "Newly invited users will see the history of this room. "+ "If you'd prefer invited users not to see messages that were sent before they joined, "+ @@ -420,12 +421,12 @@ module.exports = React.createClass({ entities.unshift(this._emailEntity); } - return ( + entities={entities} + truncateAt={INITIAL_SEARCH_RESULTS_COUNT}/> ); } }, diff --git a/src/components/views/rooms/SearchableEntityList.js b/src/components/views/rooms/SearchableEntityList.js index b2e20f23db..acd20f3984 100644 --- a/src/components/views/rooms/SearchableEntityList.js +++ b/src/components/views/rooms/SearchableEntityList.js @@ -16,6 +16,7 @@ limitations under the License. var React = require('react'); 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 @@ -29,7 +30,8 @@ var SearchableEntityList = React.createClass({ showInputBox: React.PropTypes.bool, onQueryChanged: React.PropTypes.func, // fn(inputText) onSubmit: React.PropTypes.func, // fn(inputText) - entities: React.PropTypes.array + entities: React.PropTypes.array, + truncateAt: React.PropTypes.number }, getDefaultProps: function() { @@ -46,6 +48,7 @@ var SearchableEntityList = React.createClass({ getInitialState: function() { return { query: "", + truncateAt: this.props.truncateAt, results: this.getSearchResults("", this.props.entities) }; }, @@ -103,6 +106,24 @@ var SearchableEntityList = React.createClass({ }); }, + _showAll: function() { + this.setState({ + truncateAt: -1 + }); + }, + + _createOverflowEntity: function(overflowCount, totalCount) { + var EntityTile = sdk.getComponent("rooms.EntityTile"); + var BaseAvatar = sdk.getComponent("avatars.BaseAvatar"); + var text = "and " + overflowCount + " other" + (overflowCount > 1 ? "s" : "") + "..."; + return ( + + } name={text} presenceState="online" suppressOnHover={true} + onClick={this._showAll} /> + ); + }, + render: function() { var inputBox; @@ -116,15 +137,34 @@ var SearchableEntityList = React.createClass({ ); } + var list; + if (this.props.truncateAt) { // caller wants list truncated + var TruncatedList = sdk.getComponent("elements.TruncatedList"); + list = ( + + {this.state.results.map((entity) => { + return entity.getJsx(); + })} + + ); + } + else { + list = ( +
+ {this.state.results.map((entity) => { + return entity.getJsx(); + })} +
+ ); + } + return (
{inputBox} -
- {this.state.results.map((entity) => { - return entity.getJsx(); - })} -
+ { list }
{ this.state.query.length ?

: '' }