diff --git a/docs/examples/PaginationAdvanced.js b/docs/examples/PaginationAdvanced.js index beee03c080..80dd05fc0b 100644 --- a/docs/examples/PaginationAdvanced.js +++ b/docs/examples/PaginationAdvanced.js @@ -19,6 +19,7 @@ const PaginationAdvanced = React.createClass({ first last ellipsis + boundaryLinks items={20} maxButtons={5} activePage={this.state.activePage} diff --git a/docs/src/sections/PaginationSection.js b/docs/src/sections/PaginationSection.js index ae6375f403..64e5f9e3b3 100644 --- a/docs/src/sections/PaginationSection.js +++ b/docs/src/sections/PaginationSection.js @@ -16,7 +16,7 @@ export default function PaginationSection() {

More options

-

such as first, last, previous, next and ellipsis.

+

such as first, last, previous, next, boundaryLinks and ellipsis.

Props

diff --git a/src/Pagination.js b/src/Pagination.js index 9b9b9fd04c..6d22a3f777 100644 --- a/src/Pagination.js +++ b/src/Pagination.js @@ -11,6 +11,10 @@ const Pagination = React.createClass({ activePage: React.PropTypes.number, items: React.PropTypes.number, maxButtons: React.PropTypes.number, + /** + * When `true`, will display the first and the last button page + */ + boundaryLinks: React.PropTypes.bool, /** * When `true`, will display the default node value ('...'). * Otherwise, will display provided node (when specified). @@ -68,6 +72,7 @@ const Pagination = React.createClass({ prev: false, next: false, ellipsis: true, + boundaryLinks: false, buttonComponentClass: SafeAnchor, bsClass: 'pagination' }; @@ -82,7 +87,8 @@ const Pagination = React.createClass({ items, onSelect, ellipsis, - buttonComponentClass + buttonComponentClass, + boundaryLinks } = this.props; if (maxButtons) { @@ -117,6 +123,30 @@ const Pagination = React.createClass({ ); } + if (boundaryLinks && ellipsis && startPage !== 1) { + pageButtons.unshift( + + + {this.props.ellipsis === true ? '...' : this.props.ellipsis} + + + ); + + pageButtons.unshift( + + 1 + + ); + } + if (maxButtons && hasHiddenPagesAfter && ellipsis) { pageButtons.push( ); + + if (boundaryLinks && endPage !== items) { + pageButtons.push( + + {items} + + ); + } } return pageButtons; diff --git a/test/PaginationSpec.js b/test/PaginationSpec.js index 755c98e66a..4374c2d988 100644 --- a/test/PaginationSpec.js +++ b/test/PaginationSpec.js @@ -53,7 +53,7 @@ describe('Pagination', () => { pageButtons[4].className.should.match(/\bactive\b/); }); - it('Should show the ellipsis, first, last, prev and next button with default labels', () => { + it('Should show the ellipsis, boundaryLinks, first, last, prev and next button with default labels', () => { let instance = ReactTestUtils.renderIntoDocument( { }); + it('Should show the boundaryLinks, first, last, prev and next button', () => { + let instance = ReactTestUtils.renderIntoDocument( + + ); + let pageButtons = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'li'); + // add first, last, prev, next and ellipsis button + assert.equal(pageButtons[2].innerText, '1'); + assert.equal(pageButtons[3].innerText, '...'); + assert.equal(pageButtons[7].innerText, '...'); + assert.equal(pageButtons[8].innerText, '20'); + }); + it('Should show the ellipsis, first, last, prev and next button with custom labels', () => { let instance = ReactTestUtils.renderIntoDocument(