From 5e3d9da21510e1622bcf900a949c8506e4251bce Mon Sep 17 00:00:00 2001
From: Indrajith K L
Date: Thu, 12 Dec 2019 21:02:20 +0530
Subject: :sparkles: Adds Paginator Component

---
 src/shared/paginator.component.js | 50 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 src/shared/paginator.component.js

(limited to 'src/shared/paginator.component.js')

diff --git a/src/shared/paginator.component.js b/src/shared/paginator.component.js
new file mode 100644
index 0000000..9512d4e
--- /dev/null
+++ b/src/shared/paginator.component.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import _ from 'lodash';
+
+const Paginator = (props) => {
+
+    let {totalRecords=0, currentPage=1, pageSize=15} = props;
+    let pages = [1];
+    let previousItemStyle = totalRecords<pageSize ? 'page-item disabled' : 'page-item';
+    let nextItemStyle = totalRecords<pageSize ? 'page-item disabled' : 'page-item';
+
+    if(totalRecords>pageSize){
+        pages = _.times(parseInt(totalRecords/pageSize,10));
+    }
+
+    const onPrevious = ()=>{
+        props.previousPage();
+    }
+
+    const onNext = ()=>{
+        props.nextPage();
+    }
+
+    const onPageClick = (pageNum)=>{
+        props.goToNextPage(pageNum)
+    }
+
+
+    return (
+        <nav>
+            <ul className="pagination">
+                <li className={previousItemStyle}>
+                    <a className="page-link" href="javascript:void(0)" onClick={onPrevious}>Previous</a>
+                </li>
+
+                {pages.map(_page=>{
+                    return(
+                        <li key={_page} className={_page==currentPage ? "page-item active" : "page-item"}>
+                            <a className="page-link" href="javascript:void(0)" onClick={onPageClick.bind(this, _page)}>{_page}</a>
+                        </li>
+                    )
+                })}
+                <li className={nextItemStyle}>
+                    <a className="page-link" href="#" onClick={onNext}>Next</a>
+                </li>
+            </ul>
+        </nav>
+    )
+}
+
+export default Paginator;
-- 
cgit v1.2.3