fix: change bootstrap styles to custom styles

codenaz · Aug 28, 2019 · 031fc70 · 031fc70
1 parent 0c8b5eb
commit 031fc70
Show file tree

Hide file tree

Showing 7 changed files with 2,406 additions and 159 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}
@@ -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;
+  }
+}