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 eefd780..1997d37 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,28 +3,70 @@ import React from 'react'; import BootstrapTable from 'react-bootstrap-table-next'; import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator'; -import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; +import filterFactory, { textFilter, selectFilter } from 'react-bootstrap-table2-filter'; import Code from 'components/common/code-block'; -import { productsGenerator } from 'utils/common'; +import { productsQualityGenerator } from 'utils/common'; -const products = productsGenerator(21); +const products = productsQualityGenerator(21); + +const selectOptions = { + 0: 'good', + 1: 'Bad', + 2: 'unknown' +}; const columns = [{ dataField: 'id', - text: 'Product ID', - filter: textFilter({}) + text: 'Product ID' }, { dataField: 'name', text: 'Product Name', filter: textFilter() +}, { + dataField: 'quality', + text: 'Product Quailty', + formatter: cell => selectOptions[cell], + filter: selectFilter({ + options: selectOptions, + defaultValue: 0 + }) }]; 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'; +import filterFactory, { textFilter, selectFilter } from 'react-bootstrap-table2-filter'; + +const selectOptions = { + 0: 'good', + 1: 'Bad', + 2: 'unknown' +}; + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name', + filter: textFilter() +}, { + dataField: 'quality', + text: 'Product Quailty', + formatter: cell => selectOptions[cell], + filter: selectFilter({ + options: selectOptions, + defaultValue: 0 + }) +}]; class Table extends React.Component { + state = { products } + + loadData = () => { + this.setState({ products: productsQualityGenerator(40, 7) }); + } + render() { const options = { custom: true, @@ -39,10 +81,11 @@ class Table extends React.Component { firstPageTitle: 'Next page', lastPageTitle: 'Last page', showTotal: true, - totalSize: products.length + totalSize: this.state.products.length }; const contentTable = ({ paginationProps, paginationTableProps }) => (
+
@@ -50,10 +93,9 @@ class Table extends React.Component { striped hover keyField="id" - data={ products } + data={ this.state.products } columns={ columns } filter={ filterFactory() } - cellEdit={ cellEditFactory() } { ...paginationTableProps } />
@@ -72,7 +114,6 @@ class Table extends React.Component { > { contentTable } - { sourceCode }
); } @@ -80,6 +121,12 @@ class Table extends React.Component { `; export default class Table extends React.Component { + state = { products } + + loadData = () => { + this.setState({ products: productsQualityGenerator(40, 7) }); + } + render() { const options = { custom: true, @@ -94,10 +141,11 @@ export default class Table extends React.Component { firstPageTitle: 'Next page', lastPageTitle: 'Last page', showTotal: true, - totalSize: products.length + totalSize: this.state.products.length }; const contentTable = ({ paginationProps, paginationTableProps }) => (
+
@@ -105,7 +153,7 @@ export default class Table extends React.Component { striped hover keyField="id" - data={ products } + data={ this.state.products } columns={ columns } filter={ filterFactory() } { ...paginationTableProps } diff --git a/packages/react-bootstrap-table2-example/src/utils/common.js b/packages/react-bootstrap-table2-example/src/utils/common.js index 67b2f69..beea31b 100644 --- a/packages/react-bootstrap-table2-example/src/utils/common.js +++ b/packages/react-bootstrap-table2-example/src/utils/common.js @@ -29,10 +29,10 @@ export const withOnSale = rows => rows.map((row) => { return row; }); -export const productsQualityGenerator = (quantity = 5) => +export const productsQualityGenerator = (quantity = 5, factor = 0) => Array.from({ length: quantity }, (value, index) => ({ - id: index, - name: `Item name ${index}`, + id: index + factor, + name: `Item name ${index + factor}`, quality: index % 3 })); diff --git a/packages/react-bootstrap-table2-filter/src/context.js b/packages/react-bootstrap-table2-filter/src/context.js index f54e327..e35711f 100644 --- a/packages/react-bootstrap-table2-filter/src/context.js +++ b/packages/react-bootstrap-table2-filter/src/context.js @@ -27,9 +27,8 @@ export default ( this.onFilter = this.onFilter.bind(this); this.doFilter = this.doFilter.bind(this); this.onExternalFilter = this.onExternalFilter.bind(this); - this.state = { - data: props.data - }; + this.data = props.data; + this.isEmitDataChange = false; } componentDidMount() { @@ -39,13 +38,10 @@ export default ( } componentWillReceiveProps(nextProps) { - let nextData = nextProps.data; - if (!isRemoteFiltering() && !_.isEqual(nextProps.data, this.state.data)) { - nextData = this.doFilter(nextProps); + // let nextData = nextProps.data; + if (!isRemoteFiltering() && !_.isEqual(nextProps.data, this.data)) { + this.doFilter(nextProps, undefined, this.isEmitDataChange); } - this.setState({ - data: nextData - }); } onFilter(column, filterType, initialize = false) { @@ -83,9 +79,7 @@ export default ( if (filter.props.onFilter) { result = filter.props.onFilter(filterVal); } - - result = this.doFilter(this.props, result); - this.setState({ data: result }); + this.doFilter(this.props, result); }; } @@ -95,21 +89,25 @@ export default ( }; } - doFilter(props, customResult) { + doFilter(props, customResult, ignoreEmitDataChange = false) { let result = customResult; const { dataChangeListener, data, columns } = props; result = result || filters(data, columns, _)(this.currFilters); - if (dataChangeListener) { + this.data = result; + if (dataChangeListener && !ignoreEmitDataChange) { + this.isEmitDataChange = true; dataChangeListener.emit('filterChanged', result.length); + } else { + this.isEmitDataChange = false; + this.forceUpdate(); } - return result; } render() { return ( { expect(onFilter).toHaveBeenCalledWith(filterVal); }); - it('should set state.data correctly', () => { + it('should set data correctly', () => { instance.onFilter(customColumns[1], FILTER_TYPE.TEXT)(filterVal); - expect(instance.state.data).toEqual(mockReturn); + expect(instance.data).toEqual(mockReturn); }); }); diff --git a/packages/react-bootstrap-table2-paginator/src/state-context.js b/packages/react-bootstrap-table2-paginator/src/state-context.js index 83fb4da..3f616cb 100644 --- a/packages/react-bootstrap-table2-paginator/src/state-context.js +++ b/packages/react-bootstrap-table2-paginator/src/state-context.js @@ -50,9 +50,15 @@ class StateProvider extends React.Component { // user should align the page when the page is not fit to the data size when remote enable if (this.isRemotePagination() || custom) { - this.currPage = nextProps.pagination.options.page; - this.currSizePerPage = nextProps.pagination.options.sizePerPage; - this.dataSize = nextProps.pagination.options.totalSize; + if (typeof nextProps.pagination.options.page !== 'undefined') { + this.currPage = nextProps.pagination.options.page; + } + if (typeof nextProps.pagination.options.sizePerPage !== 'undefined') { + this.currSizePerPage = nextProps.pagination.options.sizePerPage; + } + if (typeof nextProps.pagination.options.totalSize !== 'undefined') { + this.dataSize = nextProps.pagination.options.totalSize; + } } }