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(