Added flag to enable 1-indexed pagination structure.

README.md

@@ -74,6 +74,7 @@ Open your browser and go to [http://localhost:3000/](http://localhost:3000/)
 | `initialPage`             | `Number`    | The initial page selected.                                                                    |
 | `forcePage`               | `Number`    | To override selected page with parent prop.                                                   |
 | `disableInitialCallback`  | `boolean`   | Disable `onPageChange` callback with initial page. Default: `false`                           |
+| `oneIndexed`              | `boolean`   | Sets pagination selection to start with 1, instead of 0. Default: `false`                     |
 | `containerClassName`      | `String`    | The classname of the pagination container.                                                    |
 | `pageClassName`           | `String`    | The classname on tag `li` of each page element.                                               |
 | `pageLinkClassName`       | `String`    | The classname on tag `a` of each page element.                                                |
@@ -91,10 +92,11 @@ Open your browser and go to [http://localhost:3000/](http://localhost:3000/)
 1. [Submit an issue](https://github.com/AdeleD/react-paginate/issues)
 2. Fork the repository
 3. Create a dedicated branch (never ever work in `master`)
-4. The first time, run command: `webpack` into the directory
-5. Run `npm start`
-6. Fix bugs or implement features
-7. Always write tests
+4. Run `npm install`
+5. The first time, run command: `webpack` into the directory
+6. Run `npm start`
+7. Fix bugs or implement features
+8. Always write tests
 
 Run tests:
 

package.json

@@ -52,6 +52,8 @@
     "demo": "webpack --config demo/webpack.config.js --mode=development && node demo/data.js && node demo/server.js"
   },
   "jest": {
+    "verbose": true,
+    "testURL": "http://localhost/",
     "transform": {
       ".*": "<rootDir>/node_modules/babel-jest"
     },

react_components/PaginationBoxView.js

@@ -28,7 +28,8 @@ export default class PaginationBoxView extends Component {
     previousLinkClassName : PropTypes.string,
     nextLinkClassName     : PropTypes.string,
     disabledClassName     : PropTypes.string,
-    breakClassName        : PropTypes.string
+    breakClassName        : PropTypes.string,
+    oneIndexed           : PropTypes.bool
   };
 
   static defaultProps = {
@@ -42,16 +43,17 @@ export default class PaginationBoxView extends Component {
     nextLabel             : "Next",
     breakLabel            : "...",
     disabledClassName     : "disabled",
-    disableInitialCallback: false
+    disableInitialCallback: false,
+    oneIndexed            : false
   };
 
   constructor(props) {
     super(props);
 
     this.state = {
       selected: props.initialPage ? props.initialPage :
-                props.forcePage   ? props.forcePage :
-                0
+        props.forcePage   ? props.forcePage :
+          0
     };
   }
 
@@ -71,18 +73,19 @@ export default class PaginationBoxView extends Component {
 
   handlePreviousPage = evt => {
     const { selected } = this.state;
+    const { oneIndexed } = this.props;
     evt.preventDefault ? evt.preventDefault() : (evt.returnValue = false);
-    if (selected > 0) {
+    if (selected > (oneIndexed ? 1 : 0)) {
       this.handlePageSelected(selected - 1, evt);
     }
   };
 
   handleNextPage = evt => {
     const { selected } = this.state;
-    const { pageCount } = this.props;
+    const { pageCount, oneIndexed } = this.props;
 
     evt.preventDefault ? evt.preventDefault() : (evt.returnValue = false);
-    if (selected < pageCount - 1) {
+    if (selected < pageCount - (oneIndexed ? 0 : 1)) {
       this.handlePageSelected(selected + 1, evt);
     }
   };
@@ -99,19 +102,23 @@ export default class PaginationBoxView extends Component {
   };
 
   hrefBuilder(pageIndex) {
-    const { hrefBuilder, pageCount } = this.props;
+    const {
+      hrefBuilder,
+      pageCount,
+      oneIndexed
+    } = this.props;
     if (hrefBuilder &&
       pageIndex !== this.state.selected &&
-      pageIndex >= 0 &&
-      pageIndex < pageCount
+      pageIndex >= (oneIndexed ? 1 : 0) &&
+      pageIndex < pageCount + (oneIndexed ? 1 : 0)
     ) {
-      return hrefBuilder(pageIndex + 1);
+      return hrefBuilder(pageIndex + (oneIndexed ? 0 : 1));
     }
   }
 
   callCallback = (selectedItem) => {
     if (typeof(this.props.onPageChange) !== "undefined" &&
-        typeof(this.props.onPageChange) === "function") {
+      typeof(this.props.onPageChange) === "function") {
       this.props.onPageChange({selected: selectedItem});
     }
   };
@@ -122,7 +129,8 @@ export default class PaginationBoxView extends Component {
       pageClassName,
       pageLinkClassName,
       activeClassName,
-      extraAriaContext
+      extraAriaContext,
+      oneIndexed
     } = this.props;
 
     return <PageView
@@ -134,7 +142,7 @@ export default class PaginationBoxView extends Component {
       activeClassName={activeClassName}
       extraAriaContext={extraAriaContext}
       href={this.hrefBuilder(index)}
-      page={index + 1} />
+      page={oneIndexed ? index : index + 1} />
   }
 
   pagination = () => {
@@ -144,7 +152,8 @@ export default class PaginationBoxView extends Component {
       pageCount,
       marginPagesDisplayed,
       breakLabel,
-      breakClassName
+      breakClassName,
+      oneIndexed
     } = this.props;
 
     const { selected } = this.state;
@@ -172,7 +181,7 @@ export default class PaginationBoxView extends Component {
       let index;
       let page;
       let breakView;
-      let createPageView = (index) => this.getPageElement(index);
+      let createPageView = (index) => this.getPageElement(oneIndexed ? index + 1 : index);
 
       for (index = 0; index < pageCount; index++) {
 
@@ -196,7 +205,7 @@ export default class PaginationBoxView extends Component {
         if (breakLabel && items[items.length - 1] !== breakView) {
           breakView = (
             <BreakView
-              key={index}
+              key={oneIndexed ? index + 1 : index}
               breakLabel={breakLabel}
               breakClassName={breakClassName}
             />
@@ -219,13 +228,14 @@ export default class PaginationBoxView extends Component {
       previousLinkClassName,
       previousLabel,
       nextLinkClassName,
-      nextLabel
+      nextLabel,
+      oneIndexed
     } = this.props;
 
     const { selected } = this.state;
 
-    const previousClasses = previousClassName + (selected === 0 ? ` ${disabledClassName}` : '');
-    const nextClasses = nextClassName + (selected === pageCount - 1 ? ` ${disabledClassName}` : '');
+    const previousClasses = previousClassName + (selected === (oneIndexed ? 1 : 0) ? ` ${disabledClassName}` : '');
+    const nextClasses = nextClassName + (selected === pageCount - (oneIndexed ? 0 : 1) ? ` ${disabledClassName}` : '');
 
     return (
       <ul className={containerClassName}>