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 ( - -
  • - {getLangText('Sort by')}: -
  • - {this.props.orderParams.map((param) => { - return ( -
    -
  • -
    - - {getLangText(param.replace('_', ' '))} - - -1} /> -
    -
  • -
    - ); - })} -
    - ); + if (this.props.orderParams && this.props.orderParams.length) { + return ( + +
  • + {getLangText('Sort by')}: +
  • + {this.props.orderParams.map((param) => { + return ( +
    +
  • +
    + + {getLangText(param.replace('_', ' '))} + + -1} /> +
    +
  • +
    + ); + })} +
    + ); + } else { + return null; + } } });