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() {
- such as first
, last
, previous
, next
and ellipsis
.
+ such as first
, last
, previous
, next
, boundaryLinks
and ellipsis
.
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(