[added] Custom labels for Pagination's special element

(ellipsis, first, last, prev & next)
kyletsang · Oct 3, 2015 · 0b0ac36 · 0b0ac36
1 parent 1403cd3
commit 0b0ac36
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 6 deletions.
diff --git a/src/Pagination.js b/src/Pagination.js
@@ -17,6 +17,11 @@ const Pagination = React.createClass({
     last: React.PropTypes.bool,
     prev: React.PropTypes.bool,
     next: React.PropTypes.bool,
+    firstLabel: React.PropTypes.node,
+    lastLabel: React.PropTypes.node,
+    prevLabel: React.PropTypes.node,
+    nextLabel: React.PropTypes.node,
+    ellipsisLabel: React.PropTypes.node,
     onSelect: React.PropTypes.func,
     /**
      * You can use a custom element for the buttons
@@ -34,6 +39,11 @@ const Pagination = React.createClass({
       prev: false,
       next: false,
       ellipsis: true,
+      firstLabel: '\u00ab',
+      lastLabel: '\u00bb',
+      prevLabel: '\u2039',
+      nextLabel: '\u203a',
+      ellipsisLabel: '...',
       buttonComponentClass: SafeAnchor,
       bsClass: 'pagination'
     };
@@ -89,7 +99,7 @@ const Pagination = React.createClass({
           key="ellipsis"
           disabled
           buttonComponentClass={buttonComponentClass}>
-          <span aria-label="More">...</span>
+          <span aria-label="More">{this.props.ellipsisLabel}</span>
         </PaginationButton>
       );
     }
@@ -109,7 +119,7 @@ const Pagination = React.createClass({
         disabled={this.props.activePage === 1}
         onSelect={this.props.onSelect}
         buttonComponentClass={this.props.buttonComponentClass}>
-        <span aria-label="Previous">&lsaquo;</span>
+        <span aria-label="Previous">{this.props.prevLabel}</span>
       </PaginationButton>
     );
   },
@@ -126,7 +136,7 @@ const Pagination = React.createClass({
         disabled={this.props.activePage >= this.props.items}
         onSelect={this.props.onSelect}
         buttonComponentClass={this.props.buttonComponentClass}>
-        <span aria-label="Next">&rsaquo;</span>
+        <span aria-label="Next">{this.props.nextLabel}</span>
       </PaginationButton>
     );
   },
@@ -143,7 +153,7 @@ const Pagination = React.createClass({
         disabled={this.props.activePage === 1 }
         onSelect={this.props.onSelect}
         buttonComponentClass={this.props.buttonComponentClass}>
-        <span aria-label="First">&laquo;</span>
+        <span aria-label="First">{this.props.firstLabel}</span>
       </PaginationButton>
     );
   },
@@ -160,7 +170,7 @@ const Pagination = React.createClass({
         disabled={this.props.activePage >= this.props.items}
         onSelect={this.props.onSelect}
         buttonComponentClass={this.props.buttonComponentClass}>
-        <span aria-label="Last">&raquo;</span>
+        <span aria-label="Last">{this.props.lastLabel}</span>
       </PaginationButton>
     );
   },

diff --git a/test/PaginationSpec.js b/test/PaginationSpec.js
@@ -52,7 +52,7 @@ describe('Pagination', () => {
     React.findDOMNode(pageButtons[4]).className.should.match(/\bactive\b/);
   });
 
-  it('Should show the ellipsis, first, last, prev and next button', () => {
+  it('Should show the ellipsis, first, last, prev and next button with default labels', () => {
     let instance = ReactTestUtils.renderIntoDocument(
       <Pagination
         first={true}
@@ -75,6 +75,34 @@ describe('Pagination', () => {
 
   });
 
+  it('Should show the ellipsis, first, last, prev and next button with custom labels', () => {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Pagination
+        first={true}
+        last={true}
+        prev={true}
+        next={true}
+        firstLabel='first'
+        lastLabel='last'
+        prevLabel='prev'
+        nextLabel='next'
+        ellipsisLabel='more'
+        maxButtons={3}
+        activePage={10}
+        items={20} />
+    );
+    let pageButtons = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'li');
+    // add first, last, prev, next and ellipsis button
+    assert.equal(pageButtons.length, 8);
+
+    assert.equal(React.findDOMNode(pageButtons[0]).innerText, 'first');
+    assert.equal(React.findDOMNode(pageButtons[1]).innerText, 'prev');
+    assert.equal(React.findDOMNode(pageButtons[5]).innerText, 'more');
+    assert.equal(React.findDOMNode(pageButtons[6]).innerText, 'next');
+    assert.equal(React.findDOMNode(pageButtons[7]).innerText, 'last');
+
+  });
+
   it('Should enumerate pagenums correctly when ellipsis=true', () => {
     const instance = ReactTestUtils.renderIntoDocument(
       <Pagination