merge upstream changes

package.json

@@ -1,18 +1,19 @@
 {
-  "name": "@ez/react-pagination",
-  "version": "0.0.9",
+  "name": "@thetaone/react-pagination",
+  "version": "0.1.1",
   "private": false,
   "author": {
     "name": "Ujjwal Sana"
   },
   "contributors": [
+    "Tamal Sen",
     "Debajyoti Bhaumik"
   ],
   "main": "lib/Pagination.js",
   "dependencies": {
-    "lodash": ">=4.0.0",
-    "react": ">=15.15.0",
-    "styled-components": ">=2.2.1"
+    "lodash": "^4.17.15",
+    "react": "*",
+    "styled-components": "*"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -24,9 +25,10 @@
     "prepublish": "npm-run-all clean lib"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.8.4",
     "npm-run-all": "^4.1.1",
-    "react-dom": "^16.0.0",
-    "react-scripts": "1.0.14"
+    "react-dom": "*",
+    "react-scripts": "*"
   }
 }

src/App.js

@@ -1,22 +1,28 @@
-import React, { Component } from 'react'
-import Pagination from './Pagination'
+import React, { Component } from "react";
+import Pagination from "./Pagination";
 
 class App extends Component {
   constructor(props) {
     super(props);
-    this.state = {
-    }
-    this._onPagination = this._onPagination.bind(this)
+    this.state = {};
+    this._onPagination = this._onPagination.bind(this);
   }
   _onPagination(pageNo) {
-    console.log("pageNo=", pageNo)
+    console.log("pageNo=", pageNo);
   }
   render() {
     return (
       <div className="Page">
-        <Pagination selectedPage={1} count={7} totalPages={15} onPagination={this._onPagination} />
+        <Pagination
+          selectedPage={1}
+          count={7}
+          //totalPages={15}
+          recordsPerPage={15}
+          totalRecords={200}
+          onPagination={this._onPagination}
+        />
       </div>
-    )
+    );
   }
 }
 export default App;

src/Pagination.js

@@ -1,57 +1,93 @@
-import React, { Component } from 'react'
-import PaginationBody from './PaginationBody'
-
+import React, { Component } from "react";
+import PaginationBody from "./PaginationBody";
 
 class Pagination extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      selectedPage: this.props.selectedPage || 1,
-      paginationCount: this.props.count || 6,
+      selectedPage: 1,
+      paginationCount: 6,
       paginationStart: 1,
-      paginationEnd: this.props.totalPages || 21
-
-    }
-    this.handlePageChange = this.handlePageChange.bind(this)
+      paginationEnd: 21
+    };
+    this.handlePageChange = this.handlePageChange.bind(this);
+  }
+  componentDidMount() {
+    const paginationEnd = Math.ceil(
+      this.props.totalRecords / this.props.recordsPerPage
+    );
+    this.setState({
+      paginationEnd,
+      paginationCount: this.props.count,
+      selectedPage: this.props.selectedPage
+    });
   }
   componentWillReceiveProps(nextProps) {
+    const paginationEnd = Math.ceil(
+      nextProps.totalRecords / nextProps.recordsPerPage
+    );
     this.setState({
-      selectedPage: nextProps.selectedPage,
+      paginationEnd,
       paginationCount: nextProps.count,
-      paginationEnd: nextProps.totalPages
-    })
+      selectedPage: nextProps.selectedPage
+    });
   }
   handlePageChange(pageInd) {
-    this.setState({ selectedPage: pageInd })
+    this.setState({ selectedPage: pageInd });
     var divitionPoint = Math.floor(this.state.paginationCount / 2);
-    var pageStartPoint = pageInd - divitionPoint
+    var pageStartPoint = pageInd - divitionPoint;
     if (pageStartPoint < 1) {
       pageStartPoint = 1;
     }
-    if (pageStartPoint + this.state.paginationCount > this.state.paginationEnd + 1) {
-      pageStartPoint = Math.abs((this.state.paginationEnd + 1) - this.state.paginationCount)
+    if (
+      pageStartPoint + this.state.paginationCount >
+      this.state.paginationEnd + 1
+    ) {
+      pageStartPoint = Math.abs(
+        this.state.paginationEnd + 1 - this.state.paginationCount
+      );
     }
 
     if (this.state.paginationEnd > pageInd) {
-      this.setState({ paginationStart: pageStartPoint })
+      this.setState({ paginationStart: pageStartPoint });
     }
     // console.log("divitionPoint==", divitionPoint,
     // "-------pageStartPoint==", pageStartPoint, "=====pageInd=", pageInd, "--===****paginationEnd=", this.state.paginationEnd)
-    this.props.onPagination(pageInd)
+    this.props.onPagination(pageInd);
   }
 
   render() {
+    const { totalRecords, recordsPerPage } = this.props;
+    const remainderRecordsAtLastPage =
+      totalRecords % recordsPerPage || recordsPerPage;
+    const recordStartThisPage =
+      (this.state.selectedPage - 1) * recordsPerPage + 1;
+    const recordEndThisPage =
+      this.state.paginationEnd == this.state.selectedPage
+        ? recordStartThisPage + remainderRecordsAtLastPage - 1
+        : recordStartThisPage + recordsPerPage - 1;
+    console.log(
+      recordsPerPage,
+      remainderRecordsAtLastPage,
+      recordStartThisPage,
+      recordEndThisPage
+    );
     return (
       <div className="Pagination">
         {
-          <PaginationBody count={this.state.paginationCount} pageNo={this.state.selectedPage}
-            pageStart={this.state.paginationStart} pageEnd={this.state.paginationEnd}
-            onPageChange={this.handlePageChange} />
+          <PaginationBody
+            count={this.state.paginationCount}
+            pageNo={this.state.selectedPage}
+            pageStart={this.state.paginationStart}
+            pageEnd={this.state.paginationEnd}
+            onPageChange={this.handlePageChange}
+            recordStartThisPage={recordStartThisPage}
+            recordEndThisPage={recordEndThisPage}
+          />
         }
-
-      </div >
-    )
+      </div>
+    );
   }
 }
 
-export default Pagination
+export default Pagination;

src/PaginationBody.js

@@ -1,32 +1,87 @@
-import React, { Component } from 'react';
-import times from 'lodash/times';
-import './index.css';
-import { EzFrame, EzCenter, EzInput, EzButton, EzLabelStyle } from './utility.js'
+import React, { Component } from "react";
+import times from "lodash/times";
+import "./index.css";
+import {
+  EzFrame,
+  EzCenter,
+  EzInput,
+  EzButton,
+  EzLabelStyle
+} from "./utility.js";
 
 class PaginationBody extends Component {
-
   render() {
     return (
       <div className="Pagination">
         <EzFrame big={true}>
           <EzCenter>
             <div className="pagination">
-              {this.props.pageNo > 1 ?
-                <span className="previous-btn" onClick={(evt) => this.props.onPageChange(this.props.pageNo - 1)}>Previous</span> : ''}
-              {times(this.props.count, (ind) =>
+              {
+                <span
+                  className="previous-btn"
+                  onClick={
+                    this.props.pageNo > 1
+                      ? evt => this.props.onPageChange(this.props.pageNo - 1)
+                      : () => {}
+                  }
+                  style={{ opacity: this.props.pageNo > 1 ? 0.7 : 0.5 }}
+                >
+                  Previous
+                </span>
+              }
+              {times(this.props.count, ind => (
                 // ind start from 0
-                <EzInput key={ind + 'i'} type="radio" name="nav" id={`input-${ind + this.props.pageStart}`} className="input"
+                <EzInput
+                  key={ind + "i"}
+                  type="radio"
+                  name="nav"
+                  id={`input-${ind + this.props.pageStart}`}
+                  className="input"
                   checked={this.props.pageNo === ind + this.props.pageStart}
-                  onChange={(evt) => this.props.onPageChange(ind + this.props.pageStart)} />
-              )}
-              {times(this.props.count, (ind) =>
+                  onChange={evt =>
+                    this.props.onPageChange(ind + this.props.pageStart)
+                  }
+                />
+              ))}
+              {times(this.props.count, ind => (
                 // ind start from 0
-                <EzButton key={ind + 'l'}
+                <EzButton
+                  key={ind + "l"}
                   htmlFor={`input-${ind + this.props.pageStart}`}
                   className={`button`}
-                  forChecked={this.props.pageNo === ind + this.props.pageStart} >{ind + this.props.pageStart}</EzButton>)}
-              {this.props.pageEnd > this.props.pageNo ?
-                <span className="next-btn" onClick={(evt) => this.props.onPageChange(this.props.pageNo + 1)}>Next</span> : ''}
+                  forChecked={this.props.pageNo === ind + this.props.pageStart}
+                >
+                  {ind + this.props.pageStart}
+                </EzButton>
+              ))}
+              {
+                <span
+                  className="next-btn"
+                  onClick={
+                    this.props.pageEnd > this.props.pageNo
+                      ? evt => this.props.onPageChange(this.props.pageNo + 1)
+                      : () => {}
+                  }
+                  style={{
+                    opacity: this.props.pageEnd > this.props.pageNo ? 0.7 : 0.5
+                  }}
+                >
+                  Next
+                </span>
+              }
+            </div>
+            <div
+              style={{
+                textAlign: "center",
+                marginTop: 10,
+                fontSize: 12,
+                fontWeight: 600,
+                opacity: 0.7
+              }}
+            >
+              {" "}
+              [ Showing {this.props.recordStartThisPage} -{" "}
+              {this.props.recordEndThisPage} ]
             </div>
           </EzCenter>
         </EzFrame>

src/index.css

@@ -1,15 +1,19 @@
-.pagination{
-    display: flex;
+.pagination {
+  display: flex;
 }
-.previous-btn{
-    display: flex;
-    align-items: center;
-    margin-right: 20px;
-    cursor: pointer;
+.previous-btn {
+  display: flex;
+  align-items: center;
+  margin-right: 20px;
+  font-weight: 600;
+  cursor: pointer;
+  opacity: 0.7;
+}
+.next-btn {
+  display: flex;
+  align-items: center;
+  margin-left: 20px;
+  font-weight: 600;
+  cursor: pointer;
+  opacity: 0.7;
 }
-.next-btn{
-    display: flex;
-    align-items: center;
-    margin-left: 20px;
-    cursor: pointer;
-}