diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/filter-hooks.js b/packages/react-bootstrap-table2-example/examples/column-filter/filter-hooks.js
new file mode 100644
index 0000000..db3b2bf
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/filter-hooks.js
@@ -0,0 +1,57 @@
+/* eslint no-console: 0 */
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter()
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter({
+ onFilter: filterVal => console.log(`Filter Value: ${filterVal}`)
+ })
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter()
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter({
+ onFilter: filterVal => console.log(\`Filter Value: $\{filterVal}\`)
+ })
+}];
+
+
+`;
+
+export default () => (
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 169a235..56735cb 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -74,6 +74,7 @@ import ProgrammaticallyMultiSelectFilter from 'examples/column-filter/programmat
import CustomFilter from 'examples/column-filter/custom-filter';
import AdvanceCustomFilter from 'examples/column-filter/advance-custom-filter';
import ClearAllFilters from 'examples/column-filter/clear-all-filters';
+import FilterHooks from 'examples/column-filter/filter-hooks';
// work on rows
import RowStyleTable from 'examples/rows/row-style';
@@ -274,7 +275,8 @@ storiesOf('Column Filter', module)
.add('Custom Filter', () => )
.add('Advance Custom Filter', () => )
.add('Preserved Option Order on Select Filter', () => )
- .add('Clear All Filters', () => );
+ .add('Clear All Filters', () => )
+ .add('Filter Hooks', () => );
storiesOf('Work on Rows', module)
.addDecorator(bootstrapStyle())
diff --git a/packages/react-bootstrap-table2-filter/src/context.js b/packages/react-bootstrap-table2-filter/src/context.js
index 790ce00..e82e53e 100644
--- a/packages/react-bootstrap-table2-filter/src/context.js
+++ b/packages/react-bootstrap-table2-filter/src/context.js
@@ -64,6 +64,10 @@ export default (
return;
}
+ if (filter.props.onFilter) {
+ filter.props.onFilter(filterVal);
+ }
+
this.forceUpdate();
};
}
diff --git a/packages/react-bootstrap-table2-filter/test/context.test.js b/packages/react-bootstrap-table2-filter/test/context.test.js
index f4b97ca..b80d0c5 100644
--- a/packages/react-bootstrap-table2-filter/test/context.test.js
+++ b/packages/react-bootstrap-table2-filter/test/context.test.js
@@ -44,7 +44,8 @@ describe('FilterContext', () => {
const handleFilterChange = jest.fn();
function shallowContext(
- enableRemote = false
+ enableRemote = false,
+ tableColumns = columns
) {
mockBase.mockReset();
handleFilterChange.mockReset();
@@ -56,7 +57,7 @@ describe('FilterContext', () => {
return (
@@ -225,6 +226,32 @@ describe('FilterContext', () => {
});
});
+ describe('if filter.props.onFilter is defined', () => {
+ const filterVal = '3';
+ const onFilter = jest.fn();
+ const customColumns = columns.map((column, i) => {
+ if (i === 1) {
+ return {
+ ...column,
+ filter: textFilter({ onFilter })
+ };
+ }
+ return column;
+ });
+
+ beforeEach(() => {
+ wrapper = shallow(shallowContext(false, customColumns));
+ wrapper.render();
+ instance = wrapper.instance();
+ });
+
+ it('should call filter.props.onFilter correctly', () => {
+ instance.onFilter(customColumns[1], FILTER_TYPE.TEXT)(filterVal);
+ expect(onFilter).toHaveBeenCalledTimes(1);
+ expect(onFilter).toHaveBeenCalledWith(filterVal);
+ });
+ });
+
describe('combination', () => {
beforeEach(() => {
wrapper = shallow(shallowContext());