Button - Implementing responsive filter button

Description

When we have filled some information in filter table than button with label “Filter” in top right corner changes its color to light blue instead of gray. It will help us recognize if the table below have all data we need and no filter is set.

How to do it

If filter is set search parameters won’t be blank. So we find out size of searchParameters.

_isFilterEmpty() {
    const { searchParameters, forceSearchParameters } = this.props;
    if (!searchParameters) {
      // search paramters are empty
      return false;
    }
    if (!forceSearchParameters || forceSearchParameters.getFilters().size === 0) {
      return searchParameters.getFilters().size === 0;
    }
    return searchParameters.getFilters().reduce((result, filter, key) => {
      return result && forceSearchParameters.getFilters().has(key);
    }, true);
 }

then we depend level of the button on this boolean function.

<Basic.Button
            className="btn-xs"
            level={level}
            onClick={this._filterOpen.bind(this, !filterOpened)}
            showLoading={showLoading}
            icon="filter"
            {...others}>
            { this.i18n('button.filter.toogle') }
            {' '}
     <Basic.Icon icon={!filterOpened ? 'triangle-bottom' : 'triangle-top'} style={{ fontSize: '0.85em'}}/>
 </Basic.Button>

And then it will automatically appear with every usage of FilterToggleButton.

Examples

See also