AllenFang / AllenFang/react-bootstrap-table

Remote CustomFilter with Boolean field or more than one field doesn't pass filter value to onFilterChange properly

Aperta
#1,804 4 commenti 0 reazioni 0 assegnatari Vedi su GitHub
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.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.