diff --git a/src/Pagination.js b/src/Pagination.js index 8157914115..293c2cda69 100644 --- 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}> - ... + {this.props.ellipsisLabel} ); } @@ -109,7 +119,7 @@ const Pagination = React.createClass({ disabled={this.props.activePage === 1} onSelect={this.props.onSelect} buttonComponentClass={this.props.buttonComponentClass}> - + {this.props.prevLabel} ); }, @@ -126,7 +136,7 @@ const Pagination = React.createClass({ disabled={this.props.activePage >= this.props.items} onSelect={this.props.onSelect} buttonComponentClass={this.props.buttonComponentClass}> - + {this.props.nextLabel} ); }, @@ -143,7 +153,7 @@ const Pagination = React.createClass({ disabled={this.props.activePage === 1 } onSelect={this.props.onSelect} buttonComponentClass={this.props.buttonComponentClass}> - « + {this.props.firstLabel} ); }, @@ -160,7 +170,7 @@ const Pagination = React.createClass({ disabled={this.props.activePage >= this.props.items} onSelect={this.props.onSelect} buttonComponentClass={this.props.buttonComponentClass}> - » + {this.props.lastLabel} ); }, diff --git a/test/PaginationSpec.js b/test/PaginationSpec.js index 6b88fd1b20..e08f4e3142 100644 --- 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( { }); + it('Should show the ellipsis, first, last, prev and next button with custom labels', () => { + let instance = ReactTestUtils.renderIntoDocument( + + ); + 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(