From c911bb9c895211aeb3b95ccd191ee3d608ac6de8 Mon Sep 17 00:00:00 2001
From: Janusz Mordarski <janusz.m@gmail.com>
Date: Mon, 12 Mar 2018 11:10:33 +0100
Subject: [PATCH 1/2] Compatibility with React v15.5+

---
 Pagination.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/Pagination.js b/Pagination.js
index 1495b36..dd3ca2a 100644
--- a/Pagination.js
+++ b/Pagination.js
@@ -1,4 +1,5 @@
-import React, { findDOMNode, Component, PropTypes } from 'react';
+import React, { findDOMNode, Component } from 'react';
+import PropTypes from "prop-types";
 
 export default class Pagination extends Component {
   render() {

From a1e5a5c7ebffa2a2051be301eefac872c6336689 Mon Sep 17 00:00:00 2001
From: Janusz Mordarski <janusz.m@gmail.com>
Date: Mon, 12 Mar 2018 11:11:12 +0100
Subject: [PATCH 2/2] Compatibility with the Foundation framework

---
 Pagination.js | 56 ++++++++++++++++++++++-----------------------------
 1 file changed, 24 insertions(+), 32 deletions(-)

diff --git a/Pagination.js b/Pagination.js
index dd3ca2a..585bba2 100644
--- a/Pagination.js
+++ b/Pagination.js
@@ -9,9 +9,9 @@ export default class Pagination extends Component {
 
     if (current_page > 1) {
       var firstPage = (
-        <span className="first">
-          <a href='#' rel='first' onClick={() => this.props.onPaginationClick(1)}>&laquo; First</a>
-        </span>
+        <li className="pagination-first">
+          <a href='#' rel='first' onClick={() => this.props.onPaginationClick(1)}>First</a>
+        </li>
       )
     } else {
       var firstPage = '';
@@ -19,9 +19,9 @@ export default class Pagination extends Component {
 
     if (!(current_page - 1) <= 0) {
       var previousPage = (
-        <span className="previous">
-          <a href='#' rel='previous' onClick={() => this.props.onPaginationClick(current_page - 1)}>&lsaquo; Prev</a>
-        </span>
+        <li className="pagination-previous">
+          <a href='#' rel='previous' onClick={() => this.props.onPaginationClick(current_page - 1)}>Prev</a>
+        </li>
       )
     } else {
       var previousPage = '';
@@ -30,7 +30,7 @@ export default class Pagination extends Component {
     var pageWindow = [];
     var i = current_page - windowSize;
 
-    while(i < current_page) {
+    while (i < current_page) {
       if (i >= 1) {
         pageWindow.push(i);
       }
@@ -39,21 +39,21 @@ export default class Pagination extends Component {
 
     pageWindow.push(current_page);
 
-    var i = current_page+1;
-    while((i <= (current_page + windowSize)) && (i <= total_pages)) {
+    var i = current_page + 1;
+    while ((i <= (current_page + windowSize)) && (i <= total_pages)) {
       pageWindow.push(i);
       i++;
     }
 
     if (current_page > windowSize + 1) {
-      var leftEllipsis = <span className="page gap">&hellip;</span>
+      var leftEllipsis = <li className="ellipsis"></li>
     } else {
       var leftEllipsis = ''
     }
 
     var currentWindow = [];
 
-    pageWindow.map(function(page) {
+    pageWindow.map(function (page) {
       if (current_page == page) {
         var link = page;
       } else {
@@ -61,17 +61,17 @@ export default class Pagination extends Component {
       }
 
       currentWindow.push(
-        <span className="page" key={'page-' + page}>
+        <li className={(current_page == page) ? "current" : ""} key={'page-' + page}>
           {link}{' '}
-        </span>
+        </li>
       )
     }, this)
 
     if (current_page + 1 <= total_pages) {
       var nextPage = (
-        <span className="next">
-          <a href='#' rel='next' onClick={() => this.props.onPaginationClick(current_page + 1)}>Next &rsaquo;</a>
-        </span>
+        <li className="pagination-next">
+          <a href='#' rel='next' onClick={() => this.props.onPaginationClick(current_page + 1)}>Next</a>
+        </li>
       )
     } else {
       var nextPage = '';
@@ -79,44 +79,36 @@ export default class Pagination extends Component {
 
     if (current_page != total_pages) {
       var lastPage = (
-        <span className="last">
-          <a href='#' rel='last' onClick={() => this.props.onPaginationClick(total_pages)}>Last &raquo;</a>
-        </span>
+        <li className="pagination-last">
+          <a href='#' rel='last' onClick={() => this.props.onPaginationClick(total_pages)}>Last</a>
+        </li>
       )
     } else {
       var lastPage = '';
     }
 
     if (current_page + windowSize < total_pages) {
-      var rightEllipsis = <span className="page gap">&hellip;</span>
+      var rightEllipsis = <li className="ellipsis"></li>
     } else {
       var rightEllipsis = ''
     }
 
     return (
-      <nav className="pagination">
+      <ul className="pagination">
         {firstPage}
-        {' '}
         {previousPage}
-        {' '}
         {leftEllipsis}
-        {' '}
         {currentWindow}
-        {' '}
         {rightEllipsis}
-        {' '}
         {nextPage}
-        {' '}
         {lastPage}
-      </nav>
-
-
+      </ul>
     );
   }
 }
 
 Pagination.propTypes = {
   current_page: PropTypes.number.isRequired,
-  total_pages:  PropTypes.number.isRequired,
-  total_count:  PropTypes.number.isRequired
+  total_pages: PropTypes.number.isRequired,
+  total_count: PropTypes.number.isRequired
 };