diff --git a/src/Pagination.js b/src/Pagination.js index 57e5648ec9..f2990bf505 100644 --- a/src/Pagination.js +++ b/src/Pagination.js @@ -12,11 +12,46 @@ const Pagination = React.createClass({ activePage: React.PropTypes.number, items: React.PropTypes.number, maxButtons: React.PropTypes.number, - ellipsis: React.PropTypes.bool, - first: React.PropTypes.bool, - last: React.PropTypes.bool, - prev: React.PropTypes.bool, - next: React.PropTypes.bool, + /** + * When `true`, will display the default node value ('...'). + * Otherwise, will display provided node (when specified). + */ + ellipsis: React.PropTypes.oneOfType([ + React.PropTypes.bool, + React.PropTypes.node + ]), + /** + * When `true`, will display the default node value ('«'). + * Otherwise, will display provided node (when specified). + */ + first: React.PropTypes.oneOfType([ + React.PropTypes.bool, + React.PropTypes.node + ]), + /** + * When `true`, will display the default node value ('»'). + * Otherwise, will display provided node (when specified). + */ + last: React.PropTypes.oneOfType([ + React.PropTypes.bool, + React.PropTypes.node + ]), + /** + * When `true`, will display the default node value ('‹'). + * Otherwise, will display provided node (when specified). + */ + prev: React.PropTypes.oneOfType([ + React.PropTypes.bool, + React.PropTypes.node + ]), + /** + * When `true`, will display the default node value ('›'). + * Otherwise, will display provided node (when specified). + */ + next: React.PropTypes.oneOfType([ + React.PropTypes.bool, + React.PropTypes.node + ]), onSelect: React.PropTypes.func, /** * You can use a custom element for the buttons @@ -89,7 +124,9 @@ const Pagination = React.createClass({ key="ellipsis" disabled buttonComponentClass={buttonComponentClass}> - ... + + {this.props.ellipsis === true ? '...' : this.props.ellipsis} + ); } @@ -109,7 +146,9 @@ const Pagination = React.createClass({ disabled={this.props.activePage === 1} onSelect={this.props.onSelect} buttonComponentClass={this.props.buttonComponentClass}> - + + {this.props.prev === true ? '\u2039' : this.props.prev} + ); }, @@ -126,7 +165,9 @@ const Pagination = React.createClass({ disabled={this.props.activePage >= this.props.items} onSelect={this.props.onSelect} buttonComponentClass={this.props.buttonComponentClass}> - + + {this.props.next === true ? '\u203a' : this.props.next} + ); }, @@ -143,7 +184,9 @@ const Pagination = React.createClass({ disabled={this.props.activePage === 1 } onSelect={this.props.onSelect} buttonComponentClass={this.props.buttonComponentClass}> - « + + {this.props.first === true ? '\u00ab' : this.props.first} + ); }, @@ -160,7 +203,9 @@ const Pagination = React.createClass({ disabled={this.props.activePage >= this.props.items} onSelect={this.props.onSelect} buttonComponentClass={this.props.buttonComponentClass}> - » + + {this.props.last === true ? '\u00bb' : this.props.last} + ); }, diff --git a/test/PaginationSpec.js b/test/PaginationSpec.js index a8b124485c..b6a6aeb767 100644 --- a/test/PaginationSpec.js +++ b/test/PaginationSpec.js @@ -53,13 +53,14 @@ describe('Pagination', () => { 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( @@ -76,6 +77,30 @@ describe('Pagination', () => { }); + 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(