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");
|
|
|
|
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-01-18 19:47:31 +03:00
|
|
|
entities: React.PropTypes.array
|
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: "",
|
|
|
|
results: this.getSearchResults("")
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
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,
|
|
|
|
results: this.getSearchResults(input)
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2016-01-14 20:27:06 +03:00
|
|
|
onQueryChanged: function(ev) {
|
|
|
|
var q = ev.target.value;
|
|
|
|
this.setState({
|
|
|
|
query: q,
|
|
|
|
results: this.getSearchResults(q)
|
|
|
|
});
|
2016-01-19 17:51:26 +03:00
|
|
|
this.props.onQueryChanged(q);
|
2016-01-14 20:27:06 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
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() {
|
2016-01-19 17:51:26 +03:00
|
|
|
var inputBox;
|
|
|
|
|
|
|
|
if (this.props.showInputBox) {
|
|
|
|
inputBox = (
|
2016-01-14 20:27:06 +03:00
|
|
|
<form onSubmit={this.onQuerySubmit}>
|
|
|
|
<input className="mx_SearchableEntityList_query" type="text"
|
|
|
|
onChange={this.onQueryChanged} value={this.state.query}
|
|
|
|
placeholder={this.props.searchPlaceholderText} />
|
|
|
|
</form>
|
2016-01-19 17:51:26 +03:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
{inputBox}
|
2016-01-14 20:27:06 +03:00
|
|
|
<div className="mx_SearchableEntityList_list">
|
2016-01-18 18:19:49 +03:00
|
|
|
{this.state.results.map((entity) => {
|
2016-01-18 19:47:31 +03:00
|
|
|
return entity.getJsx();
|
2016-01-14 20:27:06 +03:00
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
module.exports = SearchableEntityList;
|