Merge branch 'master' of https://github.com/codenaz/react-paginator

codenaz · Aug 28, 2019 · 2a0dcc1 · 2a0dcc1
2 parents f0a8e01 + 04868eb
commit 2a0dcc1
Show file tree

Hide file tree

Showing 7 changed files with 2,420 additions and 173 deletions.
diff --git a/README.md b/README.md
@@ -26,7 +26,7 @@ function App() {
 
   return (
     <div>
-      <Pagination
+      <Paginator
         totalRecords={data.length}
         pageLimit={4}
         pageNeighbours={1}
@@ -43,20 +43,20 @@ export default App;
 
 ## Props
 
-| Property           | Type                | Default      | Description                                                    |
-| ------------------ | ------------------- | ------------ | -------------------------------------------------------------- |
-| totalRecords       | Number (required)   |              | The length of the data we are tabulating                       |
-| pageLimit          | Number (required)   |              | Minimum number of records per page                             |
-| pageNeighbours     | Number (required)   |              | Number of page blocks by the left and right of the middle page |
-| setOffset          | function (required) |              | function that updates the offset state                         |
-| setCurrentPage     | function (required) |              | function that updates the current page state                   |
-| currentPage        | Number (required)   |              | The current page state                                         |
-| pageContainerClass | String              | `pagination` | Paginator container classname                                  |
-| pageActiveClass    | String              | `active`     | Active page item classname                                     |
-| pageItemClass      | String              | `page-item`  | Page item classname                                            |
-| pageLinkClass      | String              | `page-link`  | Page link classname                                            |
-| pagePrevText       | String or Node      | `Next »`     | Prev page item text                                            |
-| pageNextText       | String or Node      | `« Prev`     | Next page item text                                            |
+| Property           | Type                | Default                 | Description                                                    |
+| ------------------ | ------------------- | ----------------------- | -------------------------------------------------------------- |
+| totalRecords       | Number (required)   |                         | The length of the data we are tabulating                       |
+| pageLimit          | Number (required)   |                         | Minimum number of records per page                             |
+| pageNeighbours     | Number (required)   |                         | Number of page blocks by the left and right of the middle page |
+| setOffset          | function (required) |                         | function that updates the offset state                         |
+| setCurrentPage     | function (required) |                         | function that updates the current page state                   |
+| currentPage        | Number (required)   |                         | The current page state                                         |
+| pageContainerClass | String              | `react-hooks-paginator` | Paginator container classname                                  |
+| pageActiveClass    | String              | `active`                | Active page item classname                                     |
+| pageItemClass      | String              | `page-item`             | Page item classname                                            |
+| pageLinkClass      | String              | `page-link`             | Page link classname                                            |
+| pagePrevText       | String or Node      | `Next »`                | Prev page item text                                            |
+| pageNextText       | String or Node      | `« Prev`                | Next page item text                                            |
 
 ## Example
 
@@ -89,7 +89,7 @@ function App() {
           <li>{data}</li>
         ))}
       </ul>
-      <Pagination
+      <Paginator
         totalRecords={data.length}
         pageLimit={pageLimit}
         pageNeighbours={2}

diff --git a/dist/index.js b/dist/index.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,10 +24,6 @@
     "email": "[email protected]"
   },
   "license": "MIT",
-  "dependencies": {
-    "bootstrap": "^4.3.1",
-    "reactstrap": "^7.1.0"
-  },
   "scripts": {
     "start": "react-scripts start",
     "build": "webpack",

diff --git a/src/lib/paginator.js b/src/lib/paginator.js
@@ -174,7 +174,6 @@ function Paginator(props) {
             className={`${props.pageItemClass} ${
               currentPage === page ? props.pageActiveClass : null
             }`}
-            active={currentPage === page}
             key={index}
           >
             <a
@@ -192,7 +191,7 @@ function Paginator(props) {
 }
 
 Paginator.defaultProps = {
-  pageContainerClass: 'pagination',
+  pageContainerClass: 'react-hooks-paginator',
   pageActiveClass: 'active',
   pageItemClass: 'page-item',
   pageLinkClass: 'page-link',

diff --git a/src/lib/style/main.scss b/src/lib/style/main.scss
@@ -1,5 +1,43 @@
-@import '~bootstrap/scss/functions';
-@import '~bootstrap/scss/variables';
-@import '~bootstrap/scss/mixins';
-@import '~bootstrap/scss/reboot';
-@import '~bootstrap/scss/pagination';
+.react-hooks-paginator {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  margin: 1rem 0;
+
+  .page-item {
+    list-style: none;
+    &:first-child {
+      .page-link {
+        margin-left: 0;
+        border-top-left-radius: 3px;
+        border-bottom-left-radius: 3px;
+      }
+    }
+
+    &:last-child {
+      .page-link {
+        border-top-right-radius: 3px;
+        border-bottom-right-radius: 3px;
+      }
+    }
+
+    &:hover,
+    &.active {
+      .page-link {
+        background-color: #3895d3;
+        border-color: #3895d3;
+        color: #fff;
+      }
+    }
+  }
+
+  .page-link {
+    border: 1px solid #dee2e6;
+    color: #4a4a4a;
+    margin-left: -1px;
+    outline: none;
+    padding: 0.5rem 0.75rem;
+    text-decoration: none;
+    transition: all 0.2s;
+  }
+}