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 ?
: '' }