diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
index 60370431..bcc15603 100644
--- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
+++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
@@ -39,30 +39,6 @@ let PieceListToolbar = React.createClass({
])
},
- getFilterWidget(){
- if (this.props.filterParams){
- return (
-
- );
- }
- return null;
- },
-
- getOrderWidget(){
- if (this.props.orderParams){
- return (
-
- );
- }
- return null;
- },
-
render() {
const { className, children, searchFor, searchQuery } = this.props;
@@ -75,8 +51,14 @@ let PieceListToolbar = React.createClass({
{children}
- {this.getOrderWidget()}
- {this.getFilterWidget()}
+
+ 0) {
+ if (trueValuesOnly.length) {
return { visibility: 'visible'};
} else {
return { visibility: 'hidden' };
@@ -81,62 +81,66 @@ let PieceListToolbarFilterWidget = React.createClass({
);
- return (
-
- {/* We iterate over filterParams, to receive the label and then for each
- label also iterate over its items, to get all filterable options */}
- {this.props.filterParams.map(({ label, items }, i) => {
- return (
-
-
- {label}:
-
- {items.map((param, j) => {
+ if (this.props.filterParams && this.props.filterParams.length) {
+ return (
+
+ {/* We iterate over filterParams, to receive the label and then for each
+ label also iterate over its items, to get all filterable options */}
+ {this.props.filterParams.map(({ label, items }, i) => {
+ return (
+
+
+ {label}:
+
+ {items.map((param, j) => {
- // As can be seen in the PropTypes, a param can either
- // be a string or an object of the shape:
- //
- // {
- // key: ,
- // label:
- // }
- //
- // This is why we need to distinguish between both here.
- if(typeof param !== 'string') {
- label = param.label;
- param = param.key;
- } else {
- param = param;
- label = param.split('acl_')[1].replace(/_/g, ' ');
- }
+ // As can be seen in the PropTypes, a param can either
+ // be a string or an object of the shape:
+ //
+ // {
+ // key: ,
+ // label:
+ // }
+ //
+ // This is why we need to distinguish between both here.
+ if (typeof param !== 'string') {
+ label = param.label;
+ param = param.key;
+ } else {
+ param = param;
+ label = param.split('acl_')[1].replace(/_/g, ' ');
+ }
- return (
-
-
-
- {getLangText(label)}
-
-
-
-
- );
- })}
-
- );
- })}
-
- );
+ return (
+
+
+
+ {getLangText(label)}
+
+
+
+
+ );
+ })}
+
+ );
+ })}
+
+ );
+ } else {
+ return null;
+ }
}
});
diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js
index c38144b0..23c0d355 100644
--- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js
+++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js
@@ -37,7 +37,7 @@ let PieceListToolbarOrderWidget = React.createClass({
isOrderActive() {
// We're hiding the star in that complicated matter so that,
// the surrounding button is not resized up on appearance
- if(this.props.orderBy.length > 0) {
+ if (this.props.orderBy && this.props.orderBy.length) {
return { visibility: 'visible'};
} else {
return { visibility: 'hidden' };
@@ -51,37 +51,41 @@ let PieceListToolbarOrderWidget = React.createClass({
·
);
- return (
-
-