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(