Merge pull request react-bootstrap#1611 from Spotinux/master

[added] pagination boundaryLinks
tomlelouch · Jan 19, 2016 · e95a59c · e95a59c
2 parents 79dc1ec + f4c1525
commit e95a59c
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 3 deletions.
diff --git 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
@@ -16,7 +16,7 @@ export default function PaginationSection() {
       <ReactPlayground codeText={Samples.PaginationBasic} />
 
       <h4><Anchor id="pagination-more">More options</Anchor></h4>
-      <p>such as <code>first</code>, <code>last</code>, <code>previous</code>, <code>next</code> and <code>ellipsis</code>.</p>
+      <p>such as <code>first</code>, <code>last</code>, <code>previous</code>, <code>next</code>, <code>boundaryLinks</code> and <code>ellipsis</code>.</p>
       <ReactPlayground codeText={Samples.PaginationAdvanced} />
 
       <h3><Anchor id="pagination-props">Props</Anchor></h3>

diff --git 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(
+        <PaginationButton
+          key="ellipsisFirst"
+          disabled
+          buttonComponentClass={buttonComponentClass}>
+          <span aria-label="More">
+            {this.props.ellipsis === true ? '...' : this.props.ellipsis}
+          </span>
+        </PaginationButton>
+      );
+
+      pageButtons.unshift(
+        <PaginationButton
+          key={1}
+          eventKey={1}
+          active={false}
+          onSelect={onSelect}
+          buttonComponentClass={buttonComponentClass}>
+          1
+        </PaginationButton>
+      );
+    }
+
     if (maxButtons && hasHiddenPagesAfter && ellipsis) {
       pageButtons.push(
         <PaginationButton
@@ -128,6 +158,19 @@ const Pagination = React.createClass({
           </span>
         </PaginationButton>
       );
+
+      if (boundaryLinks && endPage !== items) {
+        pageButtons.push(
+          <PaginationButton
+              key={items}
+              eventKey={items}
+              active={false}
+              onSelect={onSelect}
+              buttonComponentClass={buttonComponentClass}>
+              {items}
+          </PaginationButton>
+        );
+      }
     }
 
     return pageButtons;

diff --git 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(
       <Pagination
         first={true}
@@ -77,6 +77,27 @@ describe('Pagination', () => {
 
   });
 
+  it('Should show the boundaryLinks, first, last, prev and next button', () => {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Pagination
+        first={true}
+        last={true}
+        prev={true}
+        next={true}
+        ellipsis={true}
+        boundaryLinks={true}
+        maxButtons={3}
+        activePage={10}
+        items={20} />
+    );
+    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(
       <Pagination