2015-06-05 11:06:36 +02:00
|
|
|
'use strict';
|
|
|
|
|
2015-06-02 10:10:09 +02:00
|
|
|
import React from 'react';
|
|
|
|
|
2015-08-04 10:06:02 +02:00
|
|
|
import PieceListToolbarFilterWidget from './piece_list_toolbar_filter_widget';
|
2015-08-14 14:58:23 +02:00
|
|
|
import PieceListToolbarOrderWidget from './piece_list_toolbar_order_widget';
|
2015-10-12 13:57:37 +02:00
|
|
|
import SearchBar from '../search_bar';
|
2015-08-04 10:06:02 +02:00
|
|
|
|
2015-06-02 11:40:55 +02:00
|
|
|
|
2015-06-02 10:10:09 +02:00
|
|
|
let PieceListToolbar = React.createClass({
|
2015-06-05 11:06:36 +02:00
|
|
|
propTypes: {
|
2015-06-16 09:27:04 +02:00
|
|
|
className: React.PropTypes.string,
|
2015-07-14 21:13:15 +02:00
|
|
|
searchFor: React.PropTypes.func,
|
2015-10-12 16:38:00 +02:00
|
|
|
searchQuery: React.PropTypes.string,
|
2015-09-16 23:36:21 +02:00
|
|
|
filterParams: React.PropTypes.arrayOf(
|
|
|
|
React.PropTypes.shape({
|
|
|
|
label: React.PropTypes.string,
|
2015-09-17 10:20:35 +02:00
|
|
|
items: React.PropTypes.arrayOf(
|
|
|
|
React.PropTypes.oneOfType([
|
|
|
|
React.PropTypes.string,
|
|
|
|
React.PropTypes.shape({
|
|
|
|
key: React.PropTypes.string,
|
|
|
|
label: React.PropTypes.string
|
|
|
|
})
|
|
|
|
])
|
|
|
|
)
|
2015-09-16 23:36:21 +02:00
|
|
|
})
|
|
|
|
),
|
2015-08-06 13:15:52 +02:00
|
|
|
filterBy: React.PropTypes.object,
|
|
|
|
applyFilterBy: React.PropTypes.func,
|
2015-08-14 14:58:23 +02:00
|
|
|
orderParams: React.PropTypes.array,
|
|
|
|
orderBy: React.PropTypes.string,
|
|
|
|
applyOrderBy: React.PropTypes.func,
|
2015-07-14 21:13:15 +02:00
|
|
|
children: React.PropTypes.oneOfType([
|
|
|
|
React.PropTypes.arrayOf(React.PropTypes.element),
|
|
|
|
React.PropTypes.element
|
|
|
|
])
|
2015-06-05 11:06:36 +02:00
|
|
|
},
|
|
|
|
|
2015-08-14 15:38:30 +02:00
|
|
|
getFilterWidget(){
|
|
|
|
if (this.props.filterParams){
|
|
|
|
return (
|
|
|
|
<PieceListToolbarFilterWidget
|
|
|
|
filterParams={this.props.filterParams}
|
|
|
|
filterBy={this.props.filterBy}
|
|
|
|
applyFilterBy={this.props.applyFilterBy} />
|
|
|
|
);
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
},
|
2015-10-12 13:57:37 +02:00
|
|
|
|
2015-08-14 15:38:30 +02:00
|
|
|
getOrderWidget(){
|
|
|
|
if (this.props.orderParams){
|
|
|
|
return (
|
|
|
|
<PieceListToolbarOrderWidget
|
|
|
|
orderParams={this.props.orderParams}
|
|
|
|
orderBy={this.props.orderBy}
|
|
|
|
applyOrderBy={this.props.applyOrderBy}/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
},
|
|
|
|
|
2015-06-02 10:10:09 +02:00
|
|
|
render() {
|
2015-10-12 16:38:00 +02:00
|
|
|
const { className, children, searchFor, searchQuery } = this.props;
|
2015-06-02 10:10:09 +02:00
|
|
|
|
|
|
|
return (
|
2015-10-12 13:57:37 +02:00
|
|
|
<div className={className}>
|
2015-06-02 10:10:09 +02:00
|
|
|
<div className="row">
|
2015-07-07 10:28:39 +02:00
|
|
|
<div className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2">
|
2015-06-02 10:10:09 +02:00
|
|
|
<div className="row">
|
2015-07-14 21:13:15 +02:00
|
|
|
<span className="pull-left">
|
2015-10-12 13:57:37 +02:00
|
|
|
{children}
|
2015-07-07 10:28:39 +02:00
|
|
|
</span>
|
2015-10-12 13:57:37 +02:00
|
|
|
<SearchBar
|
|
|
|
className="pull-right search-bar ascribe-input-glyph"
|
|
|
|
searchFor={searchFor}
|
2015-10-12 16:38:00 +02:00
|
|
|
searchQuery={searchQuery}
|
|
|
|
threshold={500}/>
|
2015-08-14 14:58:23 +02:00
|
|
|
<span className="pull-right">
|
2015-08-14 15:38:30 +02:00
|
|
|
{this.getOrderWidget()}
|
|
|
|
{this.getFilterWidget()}
|
2015-08-04 10:06:02 +02:00
|
|
|
</span>
|
2015-06-02 10:10:09 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2015-07-03 19:08:56 +02:00
|
|
|
export default PieceListToolbar;
|