[added] pagination boundaryLinks

fix(pagination) add test coverage fix(pagination) combined if statement
react-bootstrap · Jan 19, 2016 · f4c1525 · f4c1525
1 parent 79dc1ec
commit f4c1525
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