ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-01-03 18:35:09 +01:00
Code Issues Releases Wiki Activity

add 'clear search' dialog to AccordionList and implement functionality in SearchBar

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-10-13 17:28:10 +02:00
parent f57125184d
commit ea40181805
3 changed files with 48 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
js/components/ascribe_accordion_list/accordion_list.js
View File

@ -9,21 +9,49 @@ let AccordionList = React.createClass({
className: React.PropTypes.string,
children: React.PropTypes.arrayOf(React.PropTypes.element).isRequired,
loadingElement: React.PropTypes.element,
count: React.PropTypes.number
count: React.PropTypes.number,
itemList: React.PropTypes.arrayOf(React.PropTypes.object),
search: React.PropTypes.string,
searchFor: React.PropTypes.func
},
clearSearch() {
this.props.searchFor('');
},
render() {
const { search } = this.props;
if(this.props.itemList && this.props.itemList.length > 0) {
return (
<div className={this.props.className}>
{this.props.children}
</div>
);
} else if(this.props.count === 0) {
} else if(this.props.count === 0 && !search) {
return (
<div className="ascribe-accordion-list-placeholder">
<p className="text-center">{getLangText('We could not find any works related to you...')}</p>
<p className="text-center">{getLangText('To register one, click')} <a href="register_piece">{getLangText('here')}</a>!</p>
<p className="text-center">
{getLangText('We could not find any works related to you...')}
</p>
<p className="text-center">
{getLangText('To register one, click')}
<a href="register_piece">{getLangText('here')}</a>!
</p>
</div>
);
} else if(this.props.count === 0 && search) {
return (
<div className="ascribe-accordion-list-placeholder">
<p className="text-center">
{getLangText('We could not find any works related to you...')}
</p>
<p className="text-center">
{getLangText('You\'re filtering by the search keyword: \'%s\' ', search)}
</p>
<p className="text-center">
<button className="btn btn-sm btn-default" onClick={this.clearSearch}>{getLangText('Clear search')}</button>
</p>
</div>
);
} else {

1
js/components/piece_list.js
View File

@ -178,6 +178,7 @@ let PieceList = React.createClass({
orderBy={this.state.orderBy}
orderAsc={this.state.orderAsc}
search={this.state.search}
searchFor={this.searchFor}
page={this.state.page}
pageSize={this.state.pageSize}
loadingElement={loadingElement}>

14
js/components/search_bar.js
View File

@ -68,6 +68,19 @@ const SearchBar = React.createClass({
}
},
componentWillReceiveProps(nextProps) {
/**
* This enables the `PieceListStore` to override the state
* of that component in case someone is changing the `searchQuery` on
* another component.
*
* Like how it's being done in the 'Clear search' dialog.
*/
if(this.props.searchQuery !== nextProps.searchQuery) {
this.setState({ searchQuery: nextProps.searchQuery });
}
},
startTimer(searchQuery) {
const { timer } = this.state;
const { threshold } = this.props;
@ -114,6 +127,7 @@ const SearchBar = React.createClass({
<span className={className}>
<Input
type='text'
value={this.state.searchQuery}
placeholder={getLangText('Search%s', '...')}
onChange={this.handleChange}
addonAfter={searchIcon} />