AllenFang / AllenFang/react-bootstrap-table
Remote CustomFilter with Boolean field or more than one field doesn't pass filter value to onFilterChange properly
- Lingua principale
- JavaScript
- Stelle
- 2.2k
- Fork
- 761
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Descrizione
I am trying to put together a custom regex filter that contains the fields:
```javascript
interface CustomRegexValue {
invertFilter: boolean;
regex: string;
}
```
The code in src/Filter.js (quoted below) checks whether the boolean field is "not negative" and that the string field is not empty, and if it is does NOT send the custom filter value through to the remote onFilterChange function.
```javascript
if (value !== null && typeof value === 'object') {
// value of the filter is an object
let hasValue = true;
for (const prop in value) {
if (!value[prop] || value[prop] === '') {
hasValue = false;
break;
}
}
// if one of the object properties is undefined or empty, we remove the filter
if (hasValue) {
this.currentFilter[dataField] = { value: value, type: filterType, props };
} else {
delete this.currentFilter[dataField];
}
} else if (!value || value.trim() === '') {
delete this.currentFilter[dataField];
} else {
this.currentFilter[dataField] = { value: value.trim(), type: filterType, props };
}
this.emit('onFilterChange', this.currentFilter);
```
For a custom filter, the table should not be making any assumptions about the values within the filter when it comes to passing them on to onFilterChange.
This could be fixed by changing the test for 'hasValue' to test for either hasValue OR type is a custom filter:
```javascript
if (value !== null && typeof value === 'object') {
// value of the filter is an object
let hasValue = true;
for (const prop in value) {
if (!value[prop] || value[prop] === '') {
hasValue = false;
break;
}
}
// if one of the object properties is (undefined or empty) and the filter is not a custom filter,
// we remove the filter
if (hasValue || filterType === Const.FILTER_TYPE.CUSTOM) {
this.currentFilter[dataField] = { value: value, type: filterType, props };
} else {
delete this.currentFilter[dataField];
}
} else if (!value || value.trim() === '') {
delete this.currentFilter[dataField];
} else {
this.currentFilter[dataField] = { value: value.trim(), type: filterType, props };
}
this.emit('onFilterChange', this.currentFilter);
}
```
By not sending the values through, I cannot properly re-supply them on the next render either. This means that whatever is set for either invertFilter or regex gets reset by the table sending an empty filter item to onFilterChange due to the checks for 'hasValue' above.
Guida per i contributori
Apri la guida per i contributori
Valutazione
Questa issue non è ancora stata valutata.