Ellipsis support

README.md

@@ -93,3 +93,5 @@ Name | Type | Default | Description
 `linkClassPrev` | String | | Class of the previous `<a>` tag
 `linkClassNext` | String | | Class of the next `<a>` tag
 `linkClassLast` | String | | Class of the last `<a>` 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

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
+  );
 });

src/components/Ellipsis.js

@@ -0,0 +1,39 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import cx from "classnames";
+
+export default class Ellipsis extends Component {
+    static propTypes = {
+        ellipsisText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+        disabledClass: PropTypes.string,
+        itemClass: PropTypes.string,
+        linkClass: PropTypes.string
+    };
+
+    static defaultProps = {
+        ellipsisText: "…",
+        disabledClass: "disabled",
+        itemClass: undefined,
+        linkClass: undefined
+    };
+
+    render() {
+        let {
+            ellipsisText,
+            itemClass,
+            disabledClass,
+            linkClass
+        } = this.props;
+
+        const css = cx(itemClass, disabledClass);
+        const linkCss = cx(linkClass);
+
+        return (
+            <li className={css}>
+                <a className={linkCss} href="#" onClick={(event) => event.preventDefault()}>
+                    {ellipsisText}
+                </a>
+            </li>
+        );
+    }
+}

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: "#"