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());