feat(pagination): implement <Pagination> component

Author: assisrafael

README.md

@@ -7,8 +7,8 @@ A React implementation of Boostrap v4 components.
 ## Roadmap
 
 - [] Dialogs
-- [] Tabs
-- [] Pagination
+- [] UrlLinkedTabs
+- [] UrlLinkedPagination
 - [] Smartable
 - [] Form validations (dependent field validation)
 - [] Form Autocomplete

demo/demo.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { StatefulTabs } from '../src/';
+import { StatefulTabs, Pagination } from '../src/';
 import { FormExamples } from './FormExamples';
 import { TableExamples } from './TableExamples';
 import { TabsExamples } from './TabsExamples';
@@ -10,6 +10,7 @@ ReactDOM.render(
   <div className="mt-3">
     <StatefulTabs
       vertical={true}
+      initialTab={3}
       tabs={[
         {
           title: 'Forms',
@@ -20,6 +21,7 @@ ReactDOM.render(
           content: <TableExamples />,
         },
         { title: 'Tabs', content: <TabsExamples /> },
+        { title: 'Pagination', content: <PaginationExamples /> },
       ]}
     />
   </div>,
@@ -28,3 +30,7 @@ ReactDOM.render(
 
 // eslint-disable-next-line no-undef
 module.hot.accept();
+
+function PaginationExamples() {
+  return <Pagination lastPage={10} actualPage={4} onSelect={console.log} />;
+}

src/index.js

@@ -1,3 +1,4 @@
 export * from './forms';
 export * from './table';
 export * from './tabs';
+export * from './mixed';

src/mixed/Pagination.jsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export function Pagination({
+  actualPage,
+  ariaLabel,
+  firstLabel,
+  lastLabel,
+  lastPage,
+  maxPageWindow,
+  nextLabel,
+  onSelect,
+  previousLabel,
+}) {
+  const pageWindow = Math.min(maxPageWindow, lastPage);
+  const centerOfPageWindow = Math.max(Math.floor(pageWindow / 2), 2);
+  const lastStartPage = Math.max(lastPage - pageWindow + 1, 1);
+  const startPage = Math.max(Math.min(actualPage - centerOfPageWindow, lastStartPage), 1);
+  const showPreviousNavigation = startPage > 1;
+
+  const pages = Array.from(
+    {
+      length: pageWindow,
+    },
+    (v, i) => startPage + i
+  );
+
+  const select = (page) => (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onSelect(page);
+  };
+
+  return (
+    <nav aria-label={ariaLabel}>
+      <ul className="pagination">
+        {showPreviousNavigation && (
+          <React.Fragment>
+            <li className="page-item">
+              <a className="page-link" href="" onClick={select(1)} aria-label={firstLabel}>
+                <span aria-hidden="true">&laquo;</span>
+                <span className="sr-only">{firstLabel}</span>
+              </a>
+            </li>
+
+            <li className="page-item">
+              <a className="page-link" href="" onClick={select(actualPage - 1)} aria-label={previousLabel}>
+                <span aria-hidden="true">&lsaquo;</span>
+                <span className="sr-only">{previousLabel}</span>
+              </a>
+            </li>
+          </React.Fragment>
+        )}
+
+        {pages.map((page) => (
+          <li key={`pages-${page}`} className={`page-item${actualPage === page ? ' active' : ''}`}>
+            <a className="page-link" href="" onClick={select(page)}>
+              {page}
+            </a>
+          </li>
+        ))}
+
+        {startPage < lastStartPage && (
+          <React.Fragment>
+            <li className="page-item">
+              <a className="page-link" href="" onClick={select(actualPage + 1)} aria-label={nextLabel}>
+                <span aria-hidden="true">&rsaquo;</span>
+                <span className="sr-only">{nextLabel}</span>
+              </a>
+            </li>
+
+            <li className="page-item">
+              <a className="page-link" href="" onClick={select(lastPage)} aria-label={lastLabel}>
+                <span aria-hidden="true">&raquo;</span>
+                <span className="sr-only">{lastLabel}</span>
+              </a>
+            </li>
+          </React.Fragment>
+        )}
+      </ul>
+    </nav>
+  );
+}
+
+Pagination.defaultProps = {
+  actualPage: 1,
+  ariaLabel: 'Page navigation',
+  firstLabel: 'First',
+  lastLabel: 'Last',
+  maxPageWindow: 5,
+  nextLabel: 'Next',
+  previousLabel: 'Previous',
+};
+
+Pagination.propTypes = {
+  actualPage: PropTypes.number,
+  ariaLabel: PropTypes.string,
+  firstLabel: PropTypes.string,
+  lastLabel: PropTypes.string,
+  lastPage: PropTypes.number,
+  maxPageWindow: PropTypes.number,
+  nextLabel: PropTypes.string,
+  onSelect: PropTypes.func.isRequired,
+  previousLabel: PropTypes.string,
+};

src/mixed/index.js

@@ -0,0 +1 @@
+export * from './Pagination';