From 8bef7eb34861ca6ef0bc37c5774239f237a922fc Mon Sep 17 00:00:00 2001 From: AllenFang Date: Wed, 6 Feb 2019 15:15:26 +0800 Subject: [PATCH 01/10] fix #672 --- packages/react-bootstrap-table2/src/body.js | 42 +++++++++++++++------ 1 file changed, 30 insertions(+), 12 deletions(-) diff --git a/packages/react-bootstrap-table2/src/body.js b/packages/react-bootstrap-table2/src/body.js index a32a82e..2d445fc 100644 --- a/packages/react-bootstrap-table2/src/body.js +++ b/packages/react-bootstrap-table2/src/body.js @@ -15,9 +15,36 @@ import withRowExpansion from './row-expand/row-consumer'; class Body extends React.Component { constructor(props) { super(props); - if (props.cellEdit.createContext) { - this.EditingCell = props.cellEdit.createEditingCell(_, props.cellEdit.options.onStartEdit); + const { + keyField, + visibleColumnSize, + cellEdit, + selectRow, + expandRow + } = props; + + // Construct Editing Cell Component + if (cellEdit.createContext) { + this.EditingCell = cellEdit.createEditingCell(_, cellEdit.options.onStartEdit); } + + // Construct Row Component + let RowComponent = SimpleRow; + const selectRowEnabled = selectRow.mode !== Const.ROW_SELECT_DISABLED; + const expandRowEnabled = !!expandRow.renderer; + + if (expandRowEnabled) { + RowComponent = withRowExpansion(RowAggregator, visibleColumnSize); + } + + if (selectRowEnabled) { + RowComponent = withRowSelection(expandRowEnabled ? RowComponent : RowAggregator); + } + + if (cellEdit.createContext) { + RowComponent = cellEdit.withRowLevelCellEdit(RowComponent, selectRowEnabled, keyField, _); + } + this.RowComponent = RowComponent; } render() { @@ -46,21 +73,12 @@ class Body extends React.Component { } content = ; } else { - let RowComponent = SimpleRow; const selectRowEnabled = selectRow.mode !== Const.ROW_SELECT_DISABLED; const expandRowEnabled = !!expandRow.renderer; const additionalRowProps = {}; - if (expandRowEnabled) { - RowComponent = withRowExpansion(RowAggregator, visibleColumnSize); - } - - if (selectRowEnabled) { - RowComponent = withRowSelection(expandRowEnabled ? RowComponent : RowAggregator); - } if (cellEdit.createContext) { - RowComponent = cellEdit.withRowLevelCellEdit(RowComponent, selectRowEnabled, keyField, _); additionalRowProps.EditingCellComponent = this.EditingCell; } @@ -88,7 +106,7 @@ class Body extends React.Component { baseRowProps.style = _.isFunction(rowStyle) ? rowStyle(row, index) : rowStyle; baseRowProps.className = (_.isFunction(rowClasses) ? rowClasses(row, index) : rowClasses); - return ; + return ; }); } From ecea3efdaa1757d85596cdde64d6827fbcf043c6 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Wed, 6 Feb 2019 18:05:53 +0800 Subject: [PATCH 02/10] fix #778 --- .../src/context.js | 19 ++-- .../test/context.test.js | 21 ++++- .../src/state-context.js | 27 +++++- .../test/state-context.test.js | 89 ++++++++++++++----- .../src/contexts/index.js | 1 + 5 files changed, 126 insertions(+), 31 deletions(-) diff --git a/packages/react-bootstrap-table2-filter/src/context.js b/packages/react-bootstrap-table2-filter/src/context.js index e82e53e..8d375ca 100644 --- a/packages/react-bootstrap-table2-filter/src/context.js +++ b/packages/react-bootstrap-table2-filter/src/context.js @@ -17,7 +17,8 @@ export default ( class FilterProvider extends React.Component { static propTypes = { data: PropTypes.array.isRequired, - columns: PropTypes.array.isRequired + columns: PropTypes.array.isRequired, + listenerForPagination: PropTypes.object } constructor(props) { @@ -25,6 +26,9 @@ export default ( this.currFilters = {}; this.onFilter = this.onFilter.bind(this); this.onExternalFilter = this.onExternalFilter.bind(this); + this.state = { + data: props.data + }; } componentDidMount() { @@ -68,7 +72,12 @@ export default ( filter.props.onFilter(filterVal); } - this.forceUpdate(); + const { listenerForPagination, data } = this.props; + const result = filters(data, this.props.columns, _)(this.currFilters); + if (listenerForPagination) { + listenerForPagination.emit('filterChanged', result.length); + } + this.setState({ data: result }); }; } @@ -79,13 +88,9 @@ export default ( } render() { - let { data } = this.props; - if (!isRemoteFiltering()) { - data = filters(data, this.props.columns, _)(this.currFilters); - } return ( { function shallowContext( enableRemote = false, - tableColumns = columns + tableColumns = columns, + listenerForPagination, ) { mockBase.mockReset(); handleFilterChange.mockReset(); @@ -59,6 +60,7 @@ describe('FilterContext', () => { { @@ -252,6 +254,23 @@ describe('FilterContext', () => { }); }); + describe('when props.listenerForPagination is defined', () => { + const filterVal = '3'; + const newDataLength = 0; + const listenerForPagination = { emit: jest.fn() }; + + beforeEach(() => { + wrapper = shallow(shallowContext(false, columns, listenerForPagination)); + wrapper.render(); + instance = wrapper.instance(); + }); + + it('should call listenerForPagination.emit correctly', () => { + instance.onFilter(columns[1], FILTER_TYPE.TEXT)(filterVal); + expect(listenerForPagination.emit).toHaveBeenCalledWith('filterChanged', newDataLength); + }); + }); + describe('combination', () => { beforeEach(() => { wrapper = shallow(shallowContext()); diff --git a/packages/react-bootstrap-table2-paginator/src/state-context.js b/packages/react-bootstrap-table2-paginator/src/state-context.js index 758dd95..ae5f26a 100644 --- a/packages/react-bootstrap-table2-paginator/src/state-context.js +++ b/packages/react-bootstrap-table2-paginator/src/state-context.js @@ -2,7 +2,9 @@ /* eslint react/require-default-props: 0 */ /* eslint no-lonely-if: 0 */ import React from 'react'; +import EventEmitter from 'events'; import Const from './const'; +import { alignPage } from './page'; const StateContext = React.createContext(); @@ -10,6 +12,7 @@ class StateProvider extends React.Component { constructor(props) { super(props); this.handleChangePage = this.handleChangePage.bind(this); + this.handleDataSizeChange = this.handleDataSizeChange.bind(this); this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this); let currPage; @@ -36,7 +39,10 @@ class StateProvider extends React.Component { } this.currPage = currPage; + this.dataSize = options.totalSize; this.currSizePerPage = currSizePerPage; + this.filterListener = new EventEmitter(); + this.filterListener.on('filterChanged', this.handleDataSizeChange); } componentWillReceiveProps(nextProps) { @@ -51,7 +57,7 @@ class StateProvider extends React.Component { getPaginationProps = () => { const { pagination: { options }, bootstrap4 } = this.props; - const { currPage, currSizePerPage } = this; + const { currPage, currSizePerPage, dataSize } = this; const withFirstAndLast = typeof options.withFirstAndLast === 'undefined' ? Const.With_FIRST_AND_LAST : options.withFirstAndLast; const alwaysShowAllBtns = typeof options.alwaysShowAllBtns === 'undefined' ? @@ -72,7 +78,7 @@ class StateProvider extends React.Component { hideSizePerPage, alwaysShowAllBtns, withFirstAndLast, - dataSize: options.totalSize, + dataSize, sizePerPageList: options.sizePerPageList || Const.SIZE_PER_PAGE_LIST, paginationSize: options.paginationSize || Const.PAGINATION_SIZE, showTotal: options.showTotal, @@ -106,6 +112,20 @@ class StateProvider extends React.Component { return e.result; }; + handleDataSizeChange(newDataSize) { + const { pagination: { options } } = this.props; + const pageStartIndex = typeof options.pageStartIndex === 'undefined' ? + Const.PAGE_START_INDEX : options.pageStartIndex; + this.dataSize = newDataSize; + this.currPage = alignPage( + newDataSize, + this.currPage, + this.currSizePerPage, + pageStartIndex + ); + this.forceUpdate(); + } + handleChangePage(currPage) { const { currSizePerPage } = this; const { pagination: { options } } = this.props; @@ -153,7 +173,8 @@ class StateProvider extends React.Component { paginationProps, paginationTableProps: { pagination, - setPaginationRemoteEmitter: this.setPaginationRemoteEmitter + setPaginationRemoteEmitter: this.setPaginationRemoteEmitter, + listenerForPagination: this.filterListener } } } > diff --git a/packages/react-bootstrap-table2-paginator/test/state-context.test.js b/packages/react-bootstrap-table2-paginator/test/state-context.test.js index 828c667..956b4ba 100644 --- a/packages/react-bootstrap-table2-paginator/test/state-context.test.js +++ b/packages/react-bootstrap-table2-paginator/test/state-context.test.js @@ -91,6 +91,10 @@ describe('PaginationStateContext', () => { expect(wrapper.instance().currSizePerPage).toEqual(Const.SIZE_PER_PAGE_LIST[0]); }); + it('should have correct dataSize', () => { + expect(wrapper.instance().dataSize).toEqual(options.totalSize); + }); + it('should get correct pagination props', () => { const instance = wrapper.instance(); expect(wrapper.length).toBe(1); @@ -102,7 +106,8 @@ describe('PaginationStateContext', () => { createContext: expect.any(Function), options: instance.getPaginationProps() }, - setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, + listenerForPagination: instance.filterListener } }); }); @@ -182,6 +187,31 @@ describe('PaginationStateContext', () => { }); }); + describe('handleDataSizeChange', () => { + let instance; + const newTotalSize = 8; + beforeEach(() => { + wrapper = shallow(shallowContext({ + ...defaultPagination, + page: 3 + })); + instance = wrapper.instance(); + setRemotePaginationEmitter(instance); + jest.spyOn(instance, 'forceUpdate'); + instance.handleDataSizeChange(newTotalSize); + }); + + it('should update dataSize correctly', () => { + expect(instance.dataSize).toEqual(newTotalSize); + expect(instance.forceUpdate).toHaveBeenCalledTimes(1); + }); + + it('should update currPage correctly if page list shrink', () => { + expect(instance.currPage).toEqual(Const.PAGE_START_INDEX); + expect(instance.forceUpdate).toHaveBeenCalledTimes(1); + }); + }); + describe('handleChangePage', () => { let instance; const newPage = 3; @@ -343,7 +373,8 @@ describe('PaginationStateContext', () => { createContext: expect.any(Function), options: instance.getPaginationProps() }, - setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, + listenerForPagination: instance.filterListener } }); }); @@ -374,7 +405,8 @@ describe('PaginationStateContext', () => { createContext: expect.any(Function), options: instance.getPaginationProps() }, - setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, + listenerForPagination: instance.filterListener } }); }); @@ -401,7 +433,8 @@ describe('PaginationStateContext', () => { createContext: expect.any(Function), options: instance.getPaginationProps() }, - setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, + listenerForPagination: instance.filterListener } }); }); @@ -428,7 +461,8 @@ describe('PaginationStateContext', () => { createContext: expect.any(Function), options: instance.getPaginationProps() }, - setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, + listenerForPagination: instance.filterListener } }); }); @@ -455,7 +489,8 @@ describe('PaginationStateContext', () => { createContext: expect.any(Function), options: instance.getPaginationProps() }, - setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, + listenerForPagination: instance.filterListener } }); }); @@ -482,7 +517,8 @@ describe('PaginationStateContext', () => { createContext: expect.any(Function), options: instance.getPaginationProps() }, - setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, + listenerForPagination: instance.filterListener } }); }); @@ -509,7 +545,8 @@ describe('PaginationStateContext', () => { createContext: expect.any(Function), options: instance.getPaginationProps() }, - setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, + listenerForPagination: instance.filterListener } }); }); @@ -536,7 +573,8 @@ describe('PaginationStateContext', () => { createContext: expect.any(Function), options: instance.getPaginationProps() }, - setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, + listenerForPagination: instance.filterListener } }); }); @@ -563,7 +601,8 @@ describe('PaginationStateContext', () => { createContext: expect.any(Function), options: instance.getPaginationProps() }, - setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, + listenerForPagination: instance.filterListener } }); }); @@ -590,7 +629,8 @@ describe('PaginationStateContext', () => { createContext: expect.any(Function), options: instance.getPaginationProps() }, - setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, + listenerForPagination: instance.filterListener } }); }); @@ -617,7 +657,8 @@ describe('PaginationStateContext', () => { createContext: expect.any(Function), options: instance.getPaginationProps() }, - setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, + listenerForPagination: instance.filterListener } }); }); @@ -644,7 +685,8 @@ describe('PaginationStateContext', () => { createContext: expect.any(Function), options: instance.getPaginationProps() }, - setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, + listenerForPagination: instance.filterListener } }); }); @@ -671,7 +713,8 @@ describe('PaginationStateContext', () => { createContext: expect.any(Function), options: instance.getPaginationProps() }, - setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, + listenerForPagination: instance.filterListener } }); }); @@ -698,7 +741,8 @@ describe('PaginationStateContext', () => { createContext: expect.any(Function), options: instance.getPaginationProps() }, - setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, + listenerForPagination: instance.filterListener } }); }); @@ -725,7 +769,8 @@ describe('PaginationStateContext', () => { createContext: expect.any(Function), options: instance.getPaginationProps() }, - setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, + listenerForPagination: instance.filterListener } }); }); @@ -752,7 +797,8 @@ describe('PaginationStateContext', () => { createContext: expect.any(Function), options: instance.getPaginationProps() }, - setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, + listenerForPagination: instance.filterListener } }); }); @@ -779,7 +825,8 @@ describe('PaginationStateContext', () => { createContext: expect.any(Function), options: instance.getPaginationProps() }, - setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, + listenerForPagination: instance.filterListener } }); }); @@ -806,7 +853,8 @@ describe('PaginationStateContext', () => { createContext: expect.any(Function), options: instance.getPaginationProps() }, - setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, + listenerForPagination: instance.filterListener } }); }); @@ -833,7 +881,8 @@ describe('PaginationStateContext', () => { createContext: expect.any(Function), options: instance.getPaginationProps() }, - setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter + setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, + listenerForPagination: instance.filterListener } }); }); diff --git a/packages/react-bootstrap-table2/src/contexts/index.js b/packages/react-bootstrap-table2/src/contexts/index.js index 7caf60c..6a32589 100644 --- a/packages/react-bootstrap-table2/src/contexts/index.js +++ b/packages/react-bootstrap-table2/src/contexts/index.js @@ -237,6 +237,7 @@ const withContext = Base => { ...baseProps } ref={ n => this.filterContext = n } data={ rootProps.getData() } + listenerForPagination={ this.props.listenerForPagination } > { From 4506a3dea26941e18f0b254933ad4225649b19b9 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Wed, 6 Feb 2019 18:06:08 +0800 Subject: [PATCH 03/10] add story for #778 --- .../custome-page-list-with-filter.js | 92 +++++++++++++++++++ .../stories/index.js | 4 +- 2 files changed, 95 insertions(+), 1 deletion(-) create mode 100644 packages/react-bootstrap-table2-example/examples/pagination/custome-page-list-with-filter.js diff --git a/packages/react-bootstrap-table2-example/examples/pagination/custome-page-list-with-filter.js b/packages/react-bootstrap-table2-example/examples/pagination/custome-page-list-with-filter.js new file mode 100644 index 0000000..9c7279d --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/pagination/custome-page-list-with-filter.js @@ -0,0 +1,92 @@ +/* eslint react/prefer-stateless-function: 0 */ +import React from 'react'; + +import BootstrapTable from 'react-bootstrap-table-next'; +import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator'; +import cellEditFactory from 'react-bootstrap-table2-editor'; +import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; +import Code from 'components/common/code-block'; +import { productsGenerator } from 'utils/common'; + +const products = productsGenerator(21); + +const columns = [{ + dataField: 'id', + text: 'Product ID', + filter: textFilter({}) +}, { + dataField: 'name', + text: 'Product Name', + filter: textFilter() +}]; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; +import paginationFactory from 'react-bootstrap-table2-paginator'; + +const columns = [{ + dataField: 'id', + text: 'Product ID', + filter: textFilter({}) +}, { + dataField: 'name', + text: 'Product Name', + filter: textFilter() +}]; + + +`; + +export default class Table extends React.Component { + render() { + const options = { + custom: true, + paginationSize: 4, + pageStartIndex: 1, + firstPageText: 'First', + prePageText: 'Back', + nextPageText: 'Next', + lastPageText: 'Last', + nextPageTitle: 'First page', + prePageTitle: 'Pre page', + firstPageTitle: 'Next page', + lastPageTitle: 'Last page', + showTotal: true, + totalSize: products.length + }; + const contentTable = ({ paginationProps, paginationTableProps }) => ( +
+ +
+
+ +
+
+ +
+ ); + + return ( +
+

PaginationProvider will care the data size change. You dont do anything

+ + { contentTable } + + { sourceCode } +
+ ); + } +} diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index 09ac547..9f8fd5d 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -169,6 +169,7 @@ import StandalonePaginationList from 'examples/pagination/standalone-pagination- import StandaloneSizePerPage from 'examples/pagination/standalone-size-per-page'; import FullyCustomPaginationTable from 'examples/pagination/fully-custom-pagination'; import RemoteStandalonePaginationTable from 'examples/pagination/remote-standalone-pagination'; +import CustomePaginationWithFilter from 'examples/pagination/custome-page-list-with-filter'; // search import SearchTable from 'examples/search'; @@ -390,7 +391,8 @@ storiesOf('Pagination', module) .add('Standalone Pagination List', () => ) .add('Standalone SizePerPage Dropdown', () => ) .add('Fully Custom Pagination', () => ) - .add('Remote Fully Custom Pagination', () => ); + .add('Remote Fully Custom Pagination', () => ) + .add('Custom Pagination with Filter', () => ); storiesOf('Table Search', module) .addDecorator(bootstrapStyle()) From 8b89b3de0e1e8554db7b1c3d9d115af0daafbc7e Mon Sep 17 00:00:00 2001 From: AllenFang Date: Wed, 6 Feb 2019 22:56:31 +0800 Subject: [PATCH 04/10] fix #445 --- .../src/context.js | 5 +-- .../test/context.test.js | 35 +++++++++++++++++++ 2 files changed, 38 insertions(+), 2 deletions(-) diff --git a/packages/react-bootstrap-table2-filter/src/context.js b/packages/react-bootstrap-table2-filter/src/context.js index 8d375ca..a430d94 100644 --- a/packages/react-bootstrap-table2-filter/src/context.js +++ b/packages/react-bootstrap-table2-filter/src/context.js @@ -68,12 +68,13 @@ export default ( return; } + let result; if (filter.props.onFilter) { - filter.props.onFilter(filterVal); + result = filter.props.onFilter(filterVal); } const { listenerForPagination, data } = this.props; - const result = filters(data, this.props.columns, _)(this.currFilters); + result = result || filters(data, this.props.columns, _)(this.currFilters); if (listenerForPagination) { listenerForPagination.emit('filterChanged', result.length); } diff --git a/packages/react-bootstrap-table2-filter/test/context.test.js b/packages/react-bootstrap-table2-filter/test/context.test.js index 7382f4b..b94ea00 100644 --- a/packages/react-bootstrap-table2-filter/test/context.test.js +++ b/packages/react-bootstrap-table2-filter/test/context.test.js @@ -254,6 +254,41 @@ describe('FilterContext', () => { }); }); + describe('if filter.props.onFilter is defined and return an undefined data', () => { + const mockReturn = [{ + id: 1, + name: 'A' + }]; + const filterVal = 'A'; + const onFilter = jest.fn().mockReturnValue(mockReturn); + 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); + }); + + it('should set state.data correctly', () => { + instance.onFilter(customColumns[1], FILTER_TYPE.TEXT)(filterVal); + expect(instance.state.data).toEqual(mockReturn); + }); + }); + describe('when props.listenerForPagination is defined', () => { const filterVal = '3'; const newDataLength = 0; From 8fb5364cc2f3221f3d7b44d81a0d567e6b1889f7 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Wed, 6 Feb 2019 22:56:53 +0800 Subject: [PATCH 05/10] add story for #445 --- .../column-filter/custom-filter-logic.js | 81 +++++++++++++++++++ .../stories/index.js | 4 +- 2 files changed, 84 insertions(+), 1 deletion(-) create mode 100644 packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js b/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js new file mode 100644 index 0000000..906d9d0 --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js @@ -0,0 +1,81 @@ +/* eslint eqeqeq: 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 sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; +import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; + +class Table extends React.Component { + filterByPrice = filterVal => + products.filter(product => product.price == filterVal); + + render() { + const columns = [{ + dataField: 'id', + text: 'Product ID' + }, { + dataField: 'name', + text: 'Product Name', + filter: textFilter() + }, { + dataField: 'price', + text: 'Product Price', + filter: textFilter({ + onFilter: this.filterByPrice + }) + }]; + + return ( +
+ +
+ ); + } +} +`; + +export default class Table extends React.Component { + filterByPrice = filterVal => + products.filter(product => product.price == filterVal); + + render() { + const columns = [{ + dataField: 'id', + text: 'Product ID' + }, { + dataField: 'name', + text: 'Product Name', + filter: textFilter() + }, { + dataField: 'price', + text: 'Product Price', + filter: textFilter({ + onFilter: this.filterByPrice + }) + }]; + + return ( +
+

Implement a eq filter on product price column

+ + { sourceCode } +
+ ); + } +} diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index 9f8fd5d..5061f63 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -87,6 +87,7 @@ 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'; +import CustomFilterLogic from 'examples/column-filter/custom-filter-logic'; // work on rows import RowStyleTable from 'examples/rows/row-style'; @@ -290,7 +291,8 @@ storiesOf('Column Filter', module) .add('Advance Custom Filter', () => ) .add('Preserved Option Order on Select Filter', () => ) .add('Clear All Filters', () => ) - .add('Filter Hooks', () => ); + .add('Filter Hooks', () => ) + .add('Implement custom filter logic', () => ); storiesOf('Work on Rows', module) .addDecorator(bootstrapStyle()) From 964faa53e363a4b54431c0786fc7c31eddc7d799 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Thu, 7 Feb 2019 13:56:42 +0800 Subject: [PATCH 06/10] fix wrong storyb code --- .../custome-page-list-with-filter.js | 73 +++++++++++++++---- 1 file changed, 57 insertions(+), 16 deletions(-) diff --git a/packages/react-bootstrap-table2-example/examples/pagination/custome-page-list-with-filter.js b/packages/react-bootstrap-table2-example/examples/pagination/custome-page-list-with-filter.js index 9c7279d..eefd780 100644 --- a/packages/react-bootstrap-table2-example/examples/pagination/custome-page-list-with-filter.js +++ b/packages/react-bootstrap-table2-example/examples/pagination/custome-page-list-with-filter.js @@ -3,7 +3,6 @@ import React from 'react'; import BootstrapTable from 'react-bootstrap-table-next'; import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator'; -import cellEditFactory from 'react-bootstrap-table2-editor'; import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; import Code from 'components/common/code-block'; import { productsGenerator } from 'utils/common'; @@ -22,22 +21,10 @@ const columns = [{ const sourceCode = `\ import BootstrapTable from 'react-bootstrap-table-next'; -import paginationFactory from 'react-bootstrap-table2-paginator'; +import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator'; +import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; -const columns = [{ - dataField: 'id', - text: 'Product ID', - filter: textFilter({}) -}, { - dataField: 'name', - text: 'Product Name', - filter: textFilter() -}]; - - -`; - -export default class Table extends React.Component { +class Table extends React.Component { render() { const options = { custom: true, @@ -90,3 +77,57 @@ export default class Table extends React.Component { ); } } +`; + +export default class Table extends React.Component { + render() { + const options = { + custom: true, + paginationSize: 4, + pageStartIndex: 1, + firstPageText: 'First', + prePageText: 'Back', + nextPageText: 'Next', + lastPageText: 'Last', + nextPageTitle: 'First page', + prePageTitle: 'Pre page', + firstPageTitle: 'Next page', + lastPageTitle: 'Last page', + showTotal: true, + totalSize: products.length + }; + const contentTable = ({ paginationProps, paginationTableProps }) => ( +
+ +
+
+ +
+
+ +
+ ); + + return ( +
+

PaginationProvider will care the data size change. You dont do anything

+ + { contentTable } + + { sourceCode } +
+ ); + } +} From 903dd2e5c82f7d15d44a9421b4c2da88c51b1cae Mon Sep 17 00:00:00 2001 From: AllenFang Date: Thu, 7 Feb 2019 15:34:03 +0800 Subject: [PATCH 07/10] rename listenerForPagination -> dataChangeListener --- .../src/context.js | 8 ++-- .../test/context.test.js | 14 +++---- .../src/state-context.js | 6 +-- .../test/state-context.test.js | 40 +++++++++---------- 4 files changed, 34 insertions(+), 34 deletions(-) diff --git a/packages/react-bootstrap-table2-filter/src/context.js b/packages/react-bootstrap-table2-filter/src/context.js index a430d94..0fcfa88 100644 --- a/packages/react-bootstrap-table2-filter/src/context.js +++ b/packages/react-bootstrap-table2-filter/src/context.js @@ -18,7 +18,7 @@ export default ( static propTypes = { data: PropTypes.array.isRequired, columns: PropTypes.array.isRequired, - listenerForPagination: PropTypes.object + dataChangeListener: PropTypes.object } constructor(props) { @@ -73,10 +73,10 @@ export default ( result = filter.props.onFilter(filterVal); } - const { listenerForPagination, data } = this.props; + const { dataChangeListener, data } = this.props; result = result || filters(data, this.props.columns, _)(this.currFilters); - if (listenerForPagination) { - listenerForPagination.emit('filterChanged', result.length); + if (dataChangeListener) { + dataChangeListener.emit('filterChanged', result.length); } this.setState({ data: result }); }; diff --git a/packages/react-bootstrap-table2-filter/test/context.test.js b/packages/react-bootstrap-table2-filter/test/context.test.js index b94ea00..20bba40 100644 --- a/packages/react-bootstrap-table2-filter/test/context.test.js +++ b/packages/react-bootstrap-table2-filter/test/context.test.js @@ -46,7 +46,7 @@ describe('FilterContext', () => { function shallowContext( enableRemote = false, tableColumns = columns, - listenerForPagination, + dataChangeListener, ) { mockBase.mockReset(); handleFilterChange.mockReset(); @@ -60,7 +60,7 @@ describe('FilterContext', () => { { @@ -289,20 +289,20 @@ describe('FilterContext', () => { }); }); - describe('when props.listenerForPagination is defined', () => { + describe('when props.dataChangeListener is defined', () => { const filterVal = '3'; const newDataLength = 0; - const listenerForPagination = { emit: jest.fn() }; + const dataChangeListener = { emit: jest.fn() }; beforeEach(() => { - wrapper = shallow(shallowContext(false, columns, listenerForPagination)); + wrapper = shallow(shallowContext(false, columns, dataChangeListener)); wrapper.render(); instance = wrapper.instance(); }); - it('should call listenerForPagination.emit correctly', () => { + it('should call dataChangeListener.emit correctly', () => { instance.onFilter(columns[1], FILTER_TYPE.TEXT)(filterVal); - expect(listenerForPagination.emit).toHaveBeenCalledWith('filterChanged', newDataLength); + expect(dataChangeListener.emit).toHaveBeenCalledWith('filterChanged', newDataLength); }); }); diff --git a/packages/react-bootstrap-table2-paginator/src/state-context.js b/packages/react-bootstrap-table2-paginator/src/state-context.js index ae5f26a..3b9e7a3 100644 --- a/packages/react-bootstrap-table2-paginator/src/state-context.js +++ b/packages/react-bootstrap-table2-paginator/src/state-context.js @@ -41,8 +41,8 @@ class StateProvider extends React.Component { this.currPage = currPage; this.dataSize = options.totalSize; this.currSizePerPage = currSizePerPage; - this.filterListener = new EventEmitter(); - this.filterListener.on('filterChanged', this.handleDataSizeChange); + this.dataChangeListener = new EventEmitter(); + this.dataChangeListener.on('filterChanged', this.handleDataSizeChange); } componentWillReceiveProps(nextProps) { @@ -174,7 +174,7 @@ class StateProvider extends React.Component { paginationTableProps: { pagination, setPaginationRemoteEmitter: this.setPaginationRemoteEmitter, - listenerForPagination: this.filterListener + dataChangeListener: this.dataChangeListener } } } > diff --git a/packages/react-bootstrap-table2-paginator/test/state-context.test.js b/packages/react-bootstrap-table2-paginator/test/state-context.test.js index 956b4ba..d6cbc09 100644 --- a/packages/react-bootstrap-table2-paginator/test/state-context.test.js +++ b/packages/react-bootstrap-table2-paginator/test/state-context.test.js @@ -107,7 +107,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - listenerForPagination: instance.filterListener + dataChangeListener: instance.filterListener } }); }); @@ -374,7 +374,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - listenerForPagination: instance.filterListener + dataChangeListener: instance.filterListener } }); }); @@ -406,7 +406,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - listenerForPagination: instance.filterListener + dataChangeListener: instance.filterListener } }); }); @@ -434,7 +434,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - listenerForPagination: instance.filterListener + dataChangeListener: instance.filterListener } }); }); @@ -462,7 +462,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - listenerForPagination: instance.filterListener + dataChangeListener: instance.filterListener } }); }); @@ -490,7 +490,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - listenerForPagination: instance.filterListener + dataChangeListener: instance.filterListener } }); }); @@ -518,7 +518,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - listenerForPagination: instance.filterListener + dataChangeListener: instance.filterListener } }); }); @@ -546,7 +546,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - listenerForPagination: instance.filterListener + dataChangeListener: instance.filterListener } }); }); @@ -574,7 +574,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - listenerForPagination: instance.filterListener + dataChangeListener: instance.filterListener } }); }); @@ -602,7 +602,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - listenerForPagination: instance.filterListener + dataChangeListener: instance.filterListener } }); }); @@ -630,7 +630,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - listenerForPagination: instance.filterListener + dataChangeListener: instance.filterListener } }); }); @@ -658,7 +658,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - listenerForPagination: instance.filterListener + dataChangeListener: instance.filterListener } }); }); @@ -686,7 +686,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - listenerForPagination: instance.filterListener + dataChangeListener: instance.filterListener } }); }); @@ -714,7 +714,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - listenerForPagination: instance.filterListener + dataChangeListener: instance.filterListener } }); }); @@ -742,7 +742,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - listenerForPagination: instance.filterListener + dataChangeListener: instance.filterListener } }); }); @@ -770,7 +770,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - listenerForPagination: instance.filterListener + dataChangeListener: instance.filterListener } }); }); @@ -798,7 +798,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - listenerForPagination: instance.filterListener + dataChangeListener: instance.filterListener } }); }); @@ -826,7 +826,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - listenerForPagination: instance.filterListener + dataChangeListener: instance.filterListener } }); }); @@ -854,7 +854,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - listenerForPagination: instance.filterListener + dataChangeListener: instance.filterListener } }); }); @@ -882,7 +882,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - listenerForPagination: instance.filterListener + dataChangeListener: instance.filterListener } }); }); From 63c2630f46959df7d867ad8d9f62331aa52e4fb4 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Thu, 7 Feb 2019 15:44:15 +0800 Subject: [PATCH 08/10] fix same issue #778, but for search --- .../custom-page-list-with-search.js | 139 ++++++++++++++++++ .../stories/index.js | 4 +- .../src/search/context.js | 43 +++--- .../src/contexts/index.js | 3 +- 4 files changed, 169 insertions(+), 20 deletions(-) create mode 100644 packages/react-bootstrap-table2-example/examples/pagination/custom-page-list-with-search.js diff --git a/packages/react-bootstrap-table2-example/examples/pagination/custom-page-list-with-search.js b/packages/react-bootstrap-table2-example/examples/pagination/custom-page-list-with-search.js new file mode 100644 index 0000000..87d5d74 --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/pagination/custom-page-list-with-search.js @@ -0,0 +1,139 @@ +/* eslint react/prefer-stateless-function: 0 */ +import React from 'react'; + +import BootstrapTable from 'react-bootstrap-table-next'; +import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator'; +import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; +import Code from 'components/common/code-block'; +import { productsGenerator } from 'utils/common'; + +const products = productsGenerator(21); +const { SearchBar } = Search; + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}]; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; +import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator'; +import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; + +class Table extends React.Component { + render() { + const options = { + custom: true, + paginationSize: 4, + pageStartIndex: 1, + firstPageText: 'First', + prePageText: 'Back', + nextPageText: 'Next', + lastPageText: 'Last', + nextPageTitle: 'First page', + prePageTitle: 'Pre page', + firstPageTitle: 'Next page', + lastPageTitle: 'Last page', + showTotal: true, + totalSize: products.length + }; + const contentTable = ({ paginationProps, paginationTableProps }) => ( +
+ +
+
+ +
+
+ +
+ ); + + return ( +
+

PaginationProvider will care the data size change. You dont do anything

+ + { contentTable } + + { sourceCode } +
+ ); + } +} +`; + +export default class Table extends React.Component { + render() { + const options = { + custom: true, + paginationSize: 4, + pageStartIndex: 1, + firstPageText: 'First', + prePageText: 'Back', + nextPageText: 'Next', + lastPageText: 'Last', + nextPageTitle: 'First page', + prePageTitle: 'Pre page', + firstPageTitle: 'Next page', + lastPageTitle: 'Last page', + showTotal: true, + totalSize: products.length + }; + const contentTable = ({ paginationProps, paginationTableProps }) => ( +
+ + + { + toolkitprops => ( +
+ + +
+ ) + } + + +
+ ); + + return ( +
+

PaginationProvider will care the data size change. You dont do anything

+ + { contentTable } + + { sourceCode } +
+ ); + } +} diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index 5061f63..a7ed50f 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -171,6 +171,7 @@ import StandaloneSizePerPage from 'examples/pagination/standalone-size-per-page' import FullyCustomPaginationTable from 'examples/pagination/fully-custom-pagination'; import RemoteStandalonePaginationTable from 'examples/pagination/remote-standalone-pagination'; import CustomePaginationWithFilter from 'examples/pagination/custome-page-list-with-filter'; +import CustomePaginationWithSearch from 'examples/pagination/custom-page-list-with-search'; // search import SearchTable from 'examples/search'; @@ -394,7 +395,8 @@ storiesOf('Pagination', module) .add('Standalone SizePerPage Dropdown', () => ) .add('Fully Custom Pagination', () => ) .add('Remote Fully Custom Pagination', () => ) - .add('Custom Pagination with Filter', () => ); + .add('Custom Pagination with Filter', () => ) + .add('Custom Pagination with Search', () => ); storiesOf('Table Search', module) .addDecorator(bootstrapStyle()) diff --git a/packages/react-bootstrap-table2-toolkit/src/search/context.js b/packages/react-bootstrap-table2-toolkit/src/search/context.js index 90484bf..11f3b7a 100644 --- a/packages/react-bootstrap-table2-toolkit/src/search/context.js +++ b/packages/react-bootstrap-table2-toolkit/src/search/context.js @@ -17,36 +17,44 @@ export default (options = { static propTypes = { data: PropTypes.array.isRequired, columns: PropTypes.array.isRequired, - searchText: PropTypes.string + searchText: PropTypes.string, + dataChangeListener: PropTypes.object } constructor(props) { super(props); - this.performRemoteSearch = props.searchText !== ''; + let initialData = props.data; + if (isRemoteSearch() && this.props.searchText !== '') { + handleRemoteSearchChange(this.props.searchText); + } else { + initialData = this.search(props.searchText.toLowerCase()); + this.triggerListener(initialData); + } + this.state = { data: initialData }; } componentWillReceiveProps(nextProps) { - if (isRemoteSearch()) { - if (nextProps.searchText !== this.props.searchText) { - this.performRemoteSearch = true; + if (nextProps.searchText !== this.props.searchText) { + if (isRemoteSearch()) { + handleRemoteSearchChange(nextProps.searchText); } else { - this.performRemoteSearch = false; + const result = this.search(nextProps.searchText.toLowerCase()); + this.triggerListener(result); + this.setState({ + data: result + }); } } } - search() { - const { data, columns } = this.props; - let { searchText } = this.props; - - if (isRemoteSearch()) { - if (this.performRemoteSearch) { - handleRemoteSearchChange(searchText); - } - return data; + triggerListener(result) { + if (this.props.dataChangeListener) { + this.props.dataChangeListener.emit('filterChanged', result.length); } + } - searchText = searchText.toLowerCase(); + search(searchText) { + const { data, columns } = this.props; return data.filter((row, ridx) => { for (let cidx = 0; cidx < columns.length; cidx += 1) { const column = columns[cidx]; @@ -69,9 +77,8 @@ export default (options = { } render() { - const data = this.search(); return ( - + { this.props.children } ); diff --git a/packages/react-bootstrap-table2/src/contexts/index.js b/packages/react-bootstrap-table2/src/contexts/index.js index 6a32589..4367ae1 100644 --- a/packages/react-bootstrap-table2/src/contexts/index.js +++ b/packages/react-bootstrap-table2/src/contexts/index.js @@ -217,6 +217,7 @@ const withContext = Base => ref={ n => this.searchContext = n } data={ rootProps.getData(filterProps) } searchText={ this.props.search.searchText } + dataChangeListener={ this.props.dataChangeListener } > { @@ -237,7 +238,7 @@ const withContext = Base => { ...baseProps } ref={ n => this.filterContext = n } data={ rootProps.getData() } - listenerForPagination={ this.props.listenerForPagination } + dataChangeListener={ this.props.dataChangeListener } > { From d7f84a9da5aa3d6aa4ca47aa27a214427d013d77 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 9 Feb 2019 18:01:53 +0800 Subject: [PATCH 09/10] fix remote filter/search broken when pagination enabled --- packages/react-bootstrap-table2-filter/src/context.js | 8 ++++++++ .../react-bootstrap-table2-paginator/src/state-context.js | 1 + .../react-bootstrap-table2-toolkit/src/search/context.js | 5 +++++ 3 files changed, 14 insertions(+) diff --git a/packages/react-bootstrap-table2-filter/src/context.js b/packages/react-bootstrap-table2-filter/src/context.js index 0fcfa88..f3edd1f 100644 --- a/packages/react-bootstrap-table2-filter/src/context.js +++ b/packages/react-bootstrap-table2-filter/src/context.js @@ -37,6 +37,14 @@ export default ( } } + componentWillReceiveProps(nextProps) { + if (isRemoteFiltering()) { + this.setState({ + data: nextProps.data + }); + } + } + onFilter(column, filterType, initialize = false) { return (filterVal) => { // watch out here if migration to context API, #334 diff --git a/packages/react-bootstrap-table2-paginator/src/state-context.js b/packages/react-bootstrap-table2-paginator/src/state-context.js index 3b9e7a3..91159f6 100644 --- a/packages/react-bootstrap-table2-paginator/src/state-context.js +++ b/packages/react-bootstrap-table2-paginator/src/state-context.js @@ -52,6 +52,7 @@ class StateProvider extends React.Component { if (this.isRemotePagination() || custom) { this.currPage = nextProps.pagination.options.page; this.currSizePerPage = nextProps.pagination.options.sizePerPage; + this.dataSize = nextProps.pagination.options.totalSize; } } diff --git a/packages/react-bootstrap-table2-toolkit/src/search/context.js b/packages/react-bootstrap-table2-toolkit/src/search/context.js index 11f3b7a..270a15d 100644 --- a/packages/react-bootstrap-table2-toolkit/src/search/context.js +++ b/packages/react-bootstrap-table2-toolkit/src/search/context.js @@ -1,6 +1,7 @@ /* eslint react/prop-types: 0 */ /* eslint react/require-default-props: 0 */ /* eslint no-continue: 0 */ +/* eslint no-lonely-if: 0 */ import React from 'react'; import PropTypes from 'prop-types'; @@ -44,6 +45,10 @@ export default (options = { data: result }); } + } else { + if (isRemoteSearch()) { + this.setState({ data: nextProps.data }); + } } } From cacc28e1bc6c8e96dfaf38c40874278fba5abf21 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 9 Feb 2019 20:28:28 +0800 Subject: [PATCH 10/10] fix test cases --- .../test/state-context.test.js | 49 ++++++++++--------- 1 file changed, 27 insertions(+), 22 deletions(-) diff --git a/packages/react-bootstrap-table2-paginator/test/state-context.test.js b/packages/react-bootstrap-table2-paginator/test/state-context.test.js index d6cbc09..bc4a91c 100644 --- a/packages/react-bootstrap-table2-paginator/test/state-context.test.js +++ b/packages/react-bootstrap-table2-paginator/test/state-context.test.js @@ -107,7 +107,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - dataChangeListener: instance.filterListener + dataChangeListener: expect.any(Object) } }); }); @@ -154,7 +154,7 @@ describe('PaginationStateContext', () => { setRemotePaginationEmitter(instance, true); nextProps = { data, - pagination: { ...defaultPagination, options: { page: 3, sizePerPage: 5 } } + pagination: { ...defaultPagination, options: { page: 3, sizePerPage: 5, totalSize: 50 } } }; instance.componentWillReceiveProps(nextProps); }); @@ -162,6 +162,7 @@ describe('PaginationStateContext', () => { it('should always reset currPage and currSizePerPage', () => { expect(instance.currPage).toEqual(nextProps.pagination.options.page); expect(instance.currSizePerPage).toEqual(nextProps.pagination.options.sizePerPage); + expect(instance.dataSize).toEqual(nextProps.pagination.options.totalSize); }); }); @@ -175,7 +176,10 @@ describe('PaginationStateContext', () => { setRemotePaginationEmitter(instance, true); nextProps = { data, - pagination: { ...defaultPagination, options: { page: 3, sizePerPage: 5, custom: true } } + pagination: { + ...defaultPagination, + options: { page: 3, sizePerPage: 5, custom: true, totalSize: 50 } + } }; instance.componentWillReceiveProps(nextProps); }); @@ -183,6 +187,7 @@ describe('PaginationStateContext', () => { it('should always reset currPage and currSizePerPage', () => { expect(instance.currPage).toEqual(nextProps.pagination.options.page); expect(instance.currSizePerPage).toEqual(nextProps.pagination.options.sizePerPage); + expect(instance.dataSize).toEqual(nextProps.pagination.options.totalSize); }); }); }); @@ -374,7 +379,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - dataChangeListener: instance.filterListener + dataChangeListener: expect.any(Object) } }); }); @@ -406,7 +411,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - dataChangeListener: instance.filterListener + dataChangeListener: expect.any(Object) } }); }); @@ -434,7 +439,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - dataChangeListener: instance.filterListener + dataChangeListener: expect.any(Object) } }); }); @@ -462,7 +467,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - dataChangeListener: instance.filterListener + dataChangeListener: expect.any(Object) } }); }); @@ -490,7 +495,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - dataChangeListener: instance.filterListener + dataChangeListener: expect.any(Object) } }); }); @@ -518,7 +523,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - dataChangeListener: instance.filterListener + dataChangeListener: expect.any(Object) } }); }); @@ -546,7 +551,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - dataChangeListener: instance.filterListener + dataChangeListener: expect.any(Object) } }); }); @@ -574,7 +579,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - dataChangeListener: instance.filterListener + dataChangeListener: expect.any(Object) } }); }); @@ -602,7 +607,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - dataChangeListener: instance.filterListener + dataChangeListener: expect.any(Object) } }); }); @@ -630,7 +635,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - dataChangeListener: instance.filterListener + dataChangeListener: expect.any(Object) } }); }); @@ -658,7 +663,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - dataChangeListener: instance.filterListener + dataChangeListener: expect.any(Object) } }); }); @@ -686,7 +691,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - dataChangeListener: instance.filterListener + dataChangeListener: expect.any(Object) } }); }); @@ -714,7 +719,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - dataChangeListener: instance.filterListener + dataChangeListener: expect.any(Object) } }); }); @@ -742,7 +747,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - dataChangeListener: instance.filterListener + dataChangeListener: expect.any(Object) } }); }); @@ -770,7 +775,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - dataChangeListener: instance.filterListener + dataChangeListener: expect.any(Object) } }); }); @@ -798,7 +803,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - dataChangeListener: instance.filterListener + dataChangeListener: expect.any(Object) } }); }); @@ -826,7 +831,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - dataChangeListener: instance.filterListener + dataChangeListener: expect.any(Object) } }); }); @@ -854,7 +859,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - dataChangeListener: instance.filterListener + dataChangeListener: expect.any(Object) } }); }); @@ -882,7 +887,7 @@ describe('PaginationStateContext', () => { options: instance.getPaginationProps() }, setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter, - dataChangeListener: instance.filterListener + dataChangeListener: expect.any(Object) } }); });