vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2025-10-16 11:55:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

allow user to filter column without inputField

Browse Source 
* wrap onFilter to HOF to allow filter dynamically
This commit is contained in:
Chun-MingChen 2018-03-26 23:49:27 +08:00
parent 88e1a0774b
commit f34cb4bf63
1 changed files with 33 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
packages/react-bootstrap-table2-filter/src/wrapper.js vendored
View File

@ -40,33 +40,42 @@ export default (Base, {
}
}
onFilter(column, filterVal, filterType) {
const { store, columns } = this.props;
const currFilters = Object.assign({}, this.state.currFilters);
const { dataField, filter } = column;
/**
* filter the table like below:
* onFilter(column, filterType)(filterVal)
* @param {Object} column
* @param {String} filterType
* @param {String} filterVal - user input for filtering.
*/
onFilter(column, filterType) {
return (filterVal) => {
const { store, columns } = this.props;
const currFilters = Object.assign({}, this.state.currFilters);
const { dataField, filter } = column;
if (!_.isDefined(filterVal) || filterVal === '') {
delete currFilters[dataField];
} else {
// select default comparator is EQ, others are LIKE
const {
comparator = (filterType === FILTER_TYPE.SELECT ? EQ : LIKE),
caseSensitive = false
} = filter.props;
currFilters[dataField] = { filterVal, filterType, comparator, caseSensitive };
}
store.filters = currFilters;
if (!_.isDefined(filterVal) || filterVal === '') {
delete currFilters[dataField];
} else {
// select default comparator is EQ, others are LIKE
const {
comparator = (filterType === FILTER_TYPE.SELECT ? EQ : LIKE),
caseSensitive = false
} = filter.props;
currFilters[dataField] = { filterVal, filterType, comparator, caseSensitive };
}
store.filters = currFilters;
if (this.isRemoteFiltering() || this.isRemotePagination()) {
this.handleRemoteFilterChange();
// when remote filtering is enable, dont set currFilters state
// in the componentWillReceiveProps,
// it's the key point that we can know the filter is changed
return;
}
if (this.isRemoteFiltering() || this.isRemotePagination()) {
this.handleRemoteFilterChange();
// when remote filtering is enable, dont set currFilters state
// in the componentWillReceiveProps,
// it's the key point that we can know the filter is changed
return;
}
store.filteredData = filters(store, columns, _)(currFilters);
this.setState(() => ({ currFilters, isDataChanged: true }));
store.filteredData = filters(store, columns, _)(currFilters);
this.setState(() => ({ currFilters, isDataChanged: true }));
};
}
render() {