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

Hide PieceListToolbarFilterWidget when no filters are applicable

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-12-08 16:49:06 +01:00
parent b8c58aa900
commit d035f1e41c
1 changed files with 58 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
View File

@ -81,62 +81,66 @@ let PieceListToolbarFilterWidget = React.createClass({
</span> </span>
); );
return ( if(this.props.filterParams.length) {
<DropdownButton return (
pullRight={true} <DropdownButton
title={filterIcon} pullRight={true}
className="ascribe-piece-list-toolbar-filter-widget"> title={filterIcon}
{/* We iterate over filterParams, to receive the label and then for each className="ascribe-piece-list-toolbar-filter-widget">
label also iterate over its items, to get all filterable options */} {/* We iterate over filterParams, to receive the label and then for each
{this.props.filterParams.map(({ label, items }, i) => { label also iterate over its items, to get all filterable options */}
return ( {this.props.filterParams.map(({ label, items }, i) => {
<div> return (
<li <div>
style={{'textAlign': 'center'}} <li
key={i}> style={{'textAlign': 'center'}}
<em>{label}:</em> key={i}>
</li> <em>{label}:</em>
{items.map((param, j) => { </li>
{items.map((param, j) => {
// As can be seen in the PropTypes, a param can either // As can be seen in the PropTypes, a param can either
// be a string or an object of the shape: // be a string or an object of the shape:
// //
// { // {
// key: <String>, // key: <String>,
// label: <String> // label: <String>
// } // }
// //
// This is why we need to distinguish between both here. // This is why we need to distinguish between both here.
if(typeof param !== 'string') { if(typeof param !== 'string') {
label = param.label; label = param.label;
param = param.key; param = param.key;
} else { } else {
param = param; param = param;
label = param.split('acl_')[1].replace(/_/g, ' '); label = param.split('acl_')[1].replace(/_/g, ' ');
} }
return ( return (
<li <li
key={j} key={j}
onClick={this.filterBy(param)} onClick={this.filterBy(param)}
className="filter-widget-item"> className="filter-widget-item">
<div className="checkbox-line"> <div className="checkbox-line">
<span> <span>
{getLangText(label)} {getLangText(label)}
</span> </span>
<input <input
readOnly readOnly
type="checkbox" type="checkbox"
checked={this.props.filterBy[param]} /> checked={this.props.filterBy[param]} />
</div> </div>
</li> </li>
); );
})} })}
</div> </div>
); );
})} })}
</DropdownButton> </DropdownButton>
); );
} else {
return null;
}
} }
}); });