2015-06-05 11:06:36 +02:00
|
|
|
'use strict';
|
|
|
|
|
2015-05-29 16:28:05 +02:00
|
|
|
import React from 'react';
|
2016-01-12 12:34:55 +01:00
|
|
|
import { Link } from 'react-router';
|
|
|
|
|
2015-07-03 19:08:56 +02:00
|
|
|
import { getLangText } from '../../utils/lang_utils';
|
|
|
|
|
2015-05-29 16:28:05 +02:00
|
|
|
|
|
|
|
let AccordionList = React.createClass({
|
|
|
|
propTypes: {
|
2015-06-16 09:57:14 +02:00
|
|
|
children: React.PropTypes.arrayOf(React.PropTypes.element).isRequired,
|
2016-02-05 10:38:59 +01:00
|
|
|
loadingElement: React.PropTypes.element.isRequired,
|
|
|
|
|
|
|
|
className: React.PropTypes.string,
|
2015-10-13 17:28:10 +02:00
|
|
|
count: React.PropTypes.number,
|
|
|
|
itemList: React.PropTypes.arrayOf(React.PropTypes.object),
|
|
|
|
search: React.PropTypes.string,
|
|
|
|
searchFor: React.PropTypes.func
|
2015-05-29 16:28:05 +02:00
|
|
|
},
|
2015-10-13 17:28:10 +02:00
|
|
|
|
|
|
|
clearSearch() {
|
|
|
|
this.props.searchFor('');
|
|
|
|
},
|
|
|
|
|
2015-05-29 16:28:05 +02:00
|
|
|
render() {
|
2015-10-13 17:28:10 +02:00
|
|
|
const { search } = this.props;
|
|
|
|
|
2016-02-05 10:38:59 +01:00
|
|
|
if (this.props.itemList && this.props.itemList.length > 0) {
|
2015-05-29 16:28:05 +02:00
|
|
|
return (
|
|
|
|
<div className={this.props.className}>
|
|
|
|
{this.props.children}
|
|
|
|
</div>
|
|
|
|
);
|
2015-10-13 17:28:10 +02:00
|
|
|
} 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">
|
2015-10-21 09:57:40 +02:00
|
|
|
{getLangText('To register one, click')}
|
2016-01-12 12:34:55 +01:00
|
|
|
<Link to="/register_piece">{getLangText('here')}</Link>!
|
2015-10-13 17:28:10 +02:00
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
} else if(this.props.count === 0 && search) {
|
2015-06-30 13:32:41 +02:00
|
|
|
return (
|
2015-09-16 21:21:30 +02:00
|
|
|
<div className="ascribe-accordion-list-placeholder">
|
2015-10-13 17:28:10 +02:00
|
|
|
<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>
|
2015-06-30 16:58:26 +02:00
|
|
|
</div>
|
2015-06-30 13:32:41 +02:00
|
|
|
);
|
2015-05-29 16:28:05 +02:00
|
|
|
} else {
|
|
|
|
return (
|
2015-08-19 15:30:48 +02:00
|
|
|
<div className={this.props.className + ' ascribe-loading-position'}>
|
2015-06-16 09:57:14 +02:00
|
|
|
{this.props.loadingElement}
|
|
|
|
</div>
|
2015-05-29 16:28:05 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2015-07-03 19:08:56 +02:00
|
|
|
export default AccordionList;
|