diff --git a/README.md b/README.md
index fd3a140..365040a 100644
--- a/README.md
+++ b/README.md
@@ -93,3 +93,5 @@ Name | Type | Default | Description
`linkClassPrev` | String | | Class of the previous `` tag
`linkClassNext` | String | | Class of the next `` tag
`linkClassLast` | String | | Class of the last `` tag
+`ellipsis` | Boolean | `false` | Put links to the first/last page along with an ellipsis if they are out of the page range
+`ellipsisText` | String / ReactElement | `…` | Text of ellipsis element
diff --git a/build.js b/build.js
index a477efe..2c4c559 100644
--- a/build.js
+++ b/build.js
@@ -13,4 +13,9 @@ mkdirp("dist", function(err) {
"./dist/Page.js",
UglifyJS.minify(babel.transformFileSync("src/components/Page.js", {}).code).code
);
+
+ fs.writeFileSync(
+ "./dist/Ellipsis.js",
+ UglifyJS.minify(babel.transformFileSync("src/components/Ellipsis.js", {}).code).code
+ );
});
diff --git a/dist/Ellipsis.js b/dist/Ellipsis.js
new file mode 100644
index 0000000..79e5a8c
--- /dev/null
+++ b/dist/Ellipsis.js
@@ -0,0 +1 @@
+"use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(exports,"__esModule",{value:!0});var _createClass=function(){function e(e,t){for(var r=0;r1&&(e.push(_react2.default.createElement(_Page2.default,{isActive:1===i,key:1,href:x(1),pageNumber:1,pageText:"1",onClick:o,itemClass:g,linkClass:m,activeClass:_,activeLinkClass:h})),3===N.first_page?e.push(_react2.default.createElement(_Page2.default,{isActive:2===i,key:2,href:x(2),pageNumber:2,pageText:"2",onClick:o,itemClass:g,linkClass:m,activeClass:_,activeLinkClass:h})):N.first_page>3&&e.push(_react2.default.createElement(_Ellipsis2.default,{key:"startEllipsis",itemClass:g,linkClass:m,disabledClass:v,ellipsisText:E})));for(var D=N.first_page;D<=N.last_page;D++)e.push(_react2.default.createElement(_Page2.default,{isActive:D===i,key:D,href:x(D),pageNumber:D,pageText:D+"",onClick:o,itemClass:g,linkClass:m,activeClass:_,activeLinkClass:h}));return T&&N.last_page
+ event.preventDefault()}>
+ {ellipsisText}
+
+
+ );
+ }
+}
diff --git a/src/components/Page.js b/src/components/Page.js
index 86d9e09..5597f91 100644
--- a/src/components/Page.js
+++ b/src/components/Page.js
@@ -22,7 +22,7 @@ export default class Page extends Component {
disabledClass: "disabled",
itemClass: undefined,
linkClass: undefined,
- activeLinkCLass: undefined,
+ activeLinkClass: undefined,
isActive: false,
isDisabled: false,
href: "#"
diff --git a/src/components/Pagination.js b/src/components/Pagination.js
index cd59685..477edb3 100644
--- a/src/components/Pagination.js
+++ b/src/components/Pagination.js
@@ -2,6 +2,7 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import paginator from "paginator";
import Page from "./Page";
+import Ellipsis from "./Ellipsis";
import cx from "classnames";
export default class Pagination extends React.Component {
@@ -32,7 +33,9 @@ export default class Pagination extends React.Component {
linkClassNext: PropTypes.string,
linkClassLast: PropTypes.string,
hideFirstLastPages: PropTypes.bool,
- getPageUrl: PropTypes.func
+ getPageUrl: PropTypes.func,
+ ellipsis: PropTypes.bool,
+ ellipsisText: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
};
static defaultProps = {
@@ -48,7 +51,8 @@ export default class Pagination extends React.Component {
linkClass: undefined,
activeLinkClass: undefined,
hideFirstLastPages: false,
- getPageUrl: (i) => "#"
+ getPageUrl: (i) => "#",
+ ellipsisText: "…"
};
isFirstPageVisible(has_previous_page) {
@@ -103,7 +107,9 @@ export default class Pagination extends React.Component {
linkClassNext,
linkClassLast,
hideFirstLastPages,
- getPageUrl
+ getPageUrl,
+ ellipsis,
+ ellipsisText
} = this.props;
const paginationInfo = new paginator(
@@ -111,6 +117,52 @@ export default class Pagination extends React.Component {
pageRangeDisplayed
).build(totalItemsCount, activePage);
+ if (ellipsis && paginationInfo.first_page > 1) {
+ pages.push(
+
+ );
+
+ if (paginationInfo.first_page === 3) {
+ // we might as well show a real link to page 2 since it takes up the same
+ // space as an ellipsis
+ pages.push(
+
+ );
+ } else if (paginationInfo.first_page > 3) {
+ pages.push(
+
+ );
+ }
+ }
+
for (
let i = paginationInfo.first_page;
i <= paginationInfo.last_page;
@@ -132,7 +184,53 @@ export default class Pagination extends React.Component {
);
}
- this.isPrevPageVisible(paginationInfo.has_previous_page) &&
+ if (ellipsis && paginationInfo.last_page < paginationInfo.total_pages) {
+ if (paginationInfo.last_page === paginationInfo.total_pages - 2) {
+ // we might as well show a real link to page total - 1 since it takes up the same
+ // space as an ellipsis
+ pages.push(
+
+ );
+ } else if (paginationInfo.last_page < paginationInfo.total_pages - 1) {
+ pages.push(
+
+ );
+ }
+
+ pages.push(
+
+ );
+ }
+
+ this.isPrevPageVisible(paginationInfo.has_previous_page) &&
pages.unshift(
);
- this.isFirstPageVisible(paginationInfo.has_previous_page) &&
+ this.isFirstPageVisible(paginationInfo.has_previous_page) &&
pages.unshift(
+ );
+}`;
+
const overrideText = `render() {
return (
+
+
);
}