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
You can find example in our git repository: https://github.com/bcvsolutions/CzechIdMng/blob/develop/Realization/frontend/czechidm-core/src/components/advanced/Filter/FilterToogleButton.js
See also
- [[tutorial:adm:basic_operations]