diff --git a/HISTORY.md b/HISTORY.md index d69314b2..f74ec276 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -1,6 +1,11 @@ +# 2.1.0 + +- When `total` is greater then 100, will show size changer defaultly. +- Update default page size options from `10,20,30,40` to `10,25,50,100`. + # 2.0.0 -- Remove prop-types and react-lifecycles-compat +- Remove `prop-types` and `react-lifecycles-compat` # 1.20.0 diff --git a/README.md b/README.md index 962bcce3..46f5368a 100644 --- a/README.md +++ b/README.md @@ -61,7 +61,7 @@ React.render(, container); | defaultPageSize | default items per page | Number | 10 | | pageSize | items per page | Number | 10 | | onChange | page change callback | Function(current, pageSize) | - | -| showSizeChanger | show pageSize changer | Bool | false | +| showSizeChanger | show pageSize changer | Bool | `false` when total less then 100, `true` when otherwise | | pageSizeOptions | specify the sizeChanger selections | Array | ['10', '20', '30', '40'] | | onShowSizeChange | pageSize change callback | Function(current, size) | - | | hideOnSinglePage | hide on single page | Bool | false | diff --git a/examples/sizer.js b/examples/sizer.js index 080b1a54..092cae54 100644 --- a/examples/sizer.js +++ b/examples/sizer.js @@ -28,7 +28,14 @@ class App extends React.Component { /> + this.state.current < calculatePage(undefined, this.state, this.props); + getShowSizeChanger() { + const { showSizeChanger, total } = this.props; + if (typeof showSizeChanger !== 'undefined') { + return showSizeChanger; + } + return total >= 100; + } + runIfEnter = (event, callback, ...restParams) => { if (event.key === 'Enter' || event.charCode === 13) { callback(...restParams); @@ -337,7 +344,6 @@ class Pagination extends React.Component { showLessItems, showTitle, showTotal, - showSizeChanger, simple, itemRender, showPrevNextJumpers, @@ -669,7 +675,7 @@ class Pagination extends React.Component { rootPrefixCls={prefixCls} selectComponentClass={selectComponentClass} selectPrefixCls={selectPrefixCls} - changeSize={showSizeChanger ? this.changePageSize : null} + changeSize={this.getShowSizeChanger() ? this.changePageSize : null} current={current} pageSize={pageSize} pageSizeOptions={pageSizeOptions} diff --git a/tests/index.test.js b/tests/index.test.js index 1999ec26..3966bd91 100644 --- a/tests/index.test.js +++ b/tests/index.test.js @@ -323,7 +323,7 @@ describe('current value on onShowSizeChange when total is 0', () => { input.simulate('keyDown', { key: 'Enter', keyCode: 13, which: 13 }); expect(onShowSizeChange).toHaveBeenLastCalledWith( wrapper.state().current, - 20, + 25, ); }); @@ -336,4 +336,37 @@ describe('current value on onShowSizeChange when total is 0', () => { const totalText = wrapper.find('.rc-pagination-total-text'); expect(totalText.text()).toBe('0 - 0 of 0 items'); }); + + it('size changer show logic', () => { + const wrapper1 = mount( + , + ); + expect(wrapper1.exists('.rc-pagination-options-size-changer')).toBe(false); + const wrapper2 = mount( + , + ); + expect(wrapper2.exists('.rc-pagination-options-size-changer')).toBe(true); + const wrapper3 = mount( + , + ); + expect(wrapper3.exists('.rc-pagination-options-size-changer')).toBe(false); + const wrapper4 = mount( + , + ); + expect(wrapper4.exists('.rc-pagination-options-size-changer')).toBe(true); + }); });