2016-01-14 20:27:06 +03:00
|
|
|
/*
|
|
|
|
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 MatrixClientPeg = require("../../../MatrixClientPeg");
|
|
|
|
var Modal = require("../../../Modal");
|
2016-02-05 18:24:51 +03:00
|
|
|
var sdk = require("../../../index");
|
2016-01-14 20:27:06 +03:00
|
|
|
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,
|
2016-01-19 17:51:26 +03:00
|
|
|
showInputBox: React.PropTypes.bool,
|
|
|
|
onQueryChanged: React.PropTypes.func, // fn(inputText)
|
2016-01-14 20:27:06 +03:00
|
|
|
onSubmit: React.PropTypes.func, // fn(inputText)
|
2016-02-05 18:24:51 +03:00
|
|
|
entities: React.PropTypes.array,
|
|
|
|
truncateAt: React.PropTypes.number
|
2016-01-14 20:27:06 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
getDefaultProps: function() {
|
|
|
|
return {
|
2016-01-19 17:51:26 +03:00
|
|
|
showInputBox: true,
|
2016-01-14 20:27:06 +03:00
|
|
|
searchPlaceholderText: "Search",
|
|
|
|
entities: [],
|
|
|
|
emptyQueryShowsAll: false,
|
2016-01-19 17:51:26 +03:00
|
|
|
onSubmit: function() {},
|
|
|
|
onQueryChanged: function(input) {}
|
2016-01-14 20:27:06 +03:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
|
|
|
query: "",
|
2016-06-02 01:42:34 +03:00
|
|
|
focused: false,
|
2016-02-05 18:24:51 +03:00
|
|
|
truncateAt: this.props.truncateAt,
|
2016-01-22 20:20:52 +03:00
|
|
|
results: this.getSearchResults("", this.props.entities)
|
2016-01-14 20:27:06 +03:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
2016-01-22 20:20:52 +03:00
|
|
|
componentWillReceiveProps: function(newProps) {
|
|
|
|
// recalculate the search results in case we got new entities
|
|
|
|
this.setState({
|
|
|
|
results: this.getSearchResults(this.state.query, newProps.entities)
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2016-01-20 17:14:04 +03:00
|
|
|
componentWillUnmount: function() {
|
|
|
|
// pretend the query box was blanked out else filters could still be
|
|
|
|
// applied to other components which rely on onQueryChanged.
|
|
|
|
this.props.onQueryChanged("");
|
|
|
|
},
|
|
|
|
|
2016-01-19 17:51:26 +03:00
|
|
|
/**
|
|
|
|
* Public-facing method to set the input query text to the given input.
|
|
|
|
* @param {string} input
|
|
|
|
*/
|
|
|
|
setQuery: function(input) {
|
|
|
|
this.setState({
|
|
|
|
query: input,
|
2016-01-22 20:20:52 +03:00
|
|
|
results: this.getSearchResults(input, this.props.entities)
|
2016-01-19 17:51:26 +03:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2016-01-14 20:27:06 +03:00
|
|
|
onQueryChanged: function(ev) {
|
|
|
|
var q = ev.target.value;
|
|
|
|
this.setState({
|
|
|
|
query: q,
|
2016-02-05 19:58:37 +03:00
|
|
|
// reset truncation if they back out the entire text
|
|
|
|
truncateAt: (q.length === 0 ? this.props.truncateAt : this.state.truncateAt),
|
2016-01-22 20:20:52 +03:00
|
|
|
results: this.getSearchResults(q, this.props.entities)
|
|
|
|
}, () => {
|
|
|
|
// invoke the callback AFTER we've flushed the new state. We need to
|
|
|
|
// do this because onQueryChanged can result in new props being passed
|
|
|
|
// to this component, which will then try to recalculate the search
|
|
|
|
// list. If we do this without flushing, we'll recalc with the last
|
|
|
|
// search term and not the current one!
|
|
|
|
this.props.onQueryChanged(q);
|
2016-01-14 20:27:06 +03:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
onQuerySubmit: function(ev) {
|
|
|
|
ev.preventDefault();
|
|
|
|
this.props.onSubmit(this.state.query);
|
|
|
|
},
|
|
|
|
|
2016-01-22 20:20:52 +03:00
|
|
|
getSearchResults: function(query, entities) {
|
2016-01-14 20:27:06 +03:00
|
|
|
if (!query || query.length === 0) {
|
2016-09-14 20:01:07 +03:00
|
|
|
return this.props.emptyQueryShowsAll ? entities : [];
|
2016-01-14 20:27:06 +03:00
|
|
|
}
|
2016-01-22 20:20:52 +03:00
|
|
|
return entities.filter(function(e) {
|
2016-01-14 20:27:06 +03:00
|
|
|
return e.matches(query);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2016-02-05 18:24:51 +03:00
|
|
|
_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 (
|
|
|
|
<EntityTile className="mx_EntityTile_ellipsis" avatarJsx={
|
|
|
|
<BaseAvatar url="img/ellipsis.svg" name="..." width={36} height={36} />
|
|
|
|
} name={text} presenceState="online" suppressOnHover={true}
|
|
|
|
onClick={this._showAll} />
|
|
|
|
);
|
|
|
|
},
|
|
|
|
|
2016-01-14 20:27:06 +03:00
|
|
|
render: function() {
|
2016-01-19 17:51:26 +03:00
|
|
|
var inputBox;
|
2016-06-02 18:59:38 +03:00
|
|
|
|
2016-01-19 17:51:26 +03:00
|
|
|
if (this.props.showInputBox) {
|
|
|
|
inputBox = (
|
2016-01-22 20:32:43 +03:00
|
|
|
<form onSubmit={this.onQuerySubmit} autoComplete="off">
|
2016-01-21 03:16:10 +03:00
|
|
|
<input className="mx_SearchableEntityList_query" id="mx_SearchableEntityList_query" type="text"
|
2016-01-14 20:27:06 +03:00
|
|
|
onChange={this.onQueryChanged} value={this.state.query}
|
2016-09-14 20:01:07 +03:00
|
|
|
onFocus= {() => { this.setState({ focused: true }) }}
|
|
|
|
onBlur= {() => { this.setState({ focused: false }) }}
|
2016-01-14 20:27:06 +03:00
|
|
|
placeholder={this.props.searchPlaceholderText} />
|
|
|
|
</form>
|
2016-01-19 17:51:26 +03:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2016-02-05 18:24:51 +03:00
|
|
|
var list;
|
2016-06-02 01:42:34 +03:00
|
|
|
if (this.state.results.length > 1 || this.state.focused) {
|
2016-02-15 10:52:57 +03:00
|
|
|
if (this.props.truncateAt) { // caller wants list truncated
|
|
|
|
var TruncatedList = sdk.getComponent("elements.TruncatedList");
|
|
|
|
list = (
|
|
|
|
<TruncatedList className="mx_SearchableEntityList_list"
|
|
|
|
truncateAt={this.state.truncateAt} // use state truncation as it may be expanded
|
|
|
|
createOverflowElement={this._createOverflowEntity}>
|
|
|
|
{this.state.results.map((entity) => {
|
|
|
|
return entity.getJsx();
|
|
|
|
})}
|
|
|
|
</TruncatedList>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
list = (
|
|
|
|
<div className="mx_SearchableEntityList_list">
|
|
|
|
{this.state.results.map((entity) => {
|
|
|
|
return entity.getJsx();
|
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2016-04-20 14:25:19 +03:00
|
|
|
list = (
|
|
|
|
<GeminiScrollbar autoshow={true}
|
|
|
|
className="mx_SearchableEntityList_listWrapper">
|
|
|
|
{ list }
|
|
|
|
</GeminiScrollbar>
|
|
|
|
);
|
2016-02-05 18:24:51 +03:00
|
|
|
}
|
|
|
|
|
2016-01-19 17:51:26 +03:00
|
|
|
return (
|
2016-06-02 01:42:34 +03:00
|
|
|
<div className={ "mx_SearchableEntityList " + (list ? "mx_SearchableEntityList_expanded" : "") }>
|
2016-02-15 10:52:57 +03:00
|
|
|
{ inputBox }
|
|
|
|
{ list }
|
2016-06-02 01:42:34 +03:00
|
|
|
{ list ? <div className="mx_SearchableEntityList_hrWrapper"><hr/></div> : '' }
|
2016-01-14 20:27:06 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
module.exports = SearchableEntityList;
|