From c094a27c979b59e4298a9599c29322b310b246b8 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 9 Mar 2019 13:20:43 +0100
Subject: [PATCH] Created PaginationDropdown component

---
 src/index.scss                  |  4 ++++
 src/utils/PaginationDropdown.js | 33 +++++++++++++++++++++++++++++++++
 src/utils/SortingDropdown.js    |  2 +-
 src/utils/SortingDropdown.scss  |  4 ----
 4 files changed, 38 insertions(+), 5 deletions(-)
 create mode 100644 src/utils/PaginationDropdown.js

diff --git a/src/index.scss b/src/index.scss
index 1d07ba5d..1f4cda05 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -55,3 +55,7 @@ body,
 .pagination .page-link {
   cursor: pointer;
 }
+
+.paddingless {
+  padding: 0;
+}
diff --git a/src/utils/PaginationDropdown.js b/src/utils/PaginationDropdown.js
new file mode 100644
index 00000000..0789e9bf
--- /dev/null
+++ b/src/utils/PaginationDropdown.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
+import * as PropTypes from 'prop-types';
+
+const propTypes = {
+  toggleClassName: PropTypes.string,
+  ranges: PropTypes.arrayOf(PropTypes.number).isRequired,
+  value: PropTypes.number.isRequired,
+  setValue: PropTypes.func.isRequired,
+};
+
+const PaginationDropdown = ({ toggleClassName, ranges, value, setValue }) => (
+  <UncontrolledDropdown>
+    <DropdownToggle caret color="link" className={toggleClassName}>
+      Paginate
+    </DropdownToggle>
+    <DropdownMenu right>
+      {ranges.map((itemsPerPage) => (
+        <DropdownItem key={itemsPerPage} active={itemsPerPage === value} onClick={() => setValue(itemsPerPage)}>
+          <b>{itemsPerPage}</b> items per page
+        </DropdownItem>
+      ))}
+      <DropdownItem divider />
+      <DropdownItem disabled={value === Infinity} onClick={() => setValue(Infinity)}>
+        <i>Clear pagination</i>
+      </DropdownItem>
+    </DropdownMenu>
+  </UncontrolledDropdown>
+);
+
+PaginationDropdown.propTypes = propTypes;
+
+export default PaginationDropdown;
diff --git a/src/utils/SortingDropdown.js b/src/utils/SortingDropdown.js
index 5cc5ecf1..e4018ddd 100644
--- a/src/utils/SortingDropdown.js
+++ b/src/utils/SortingDropdown.js
@@ -33,7 +33,7 @@ const SortingDropdown = ({ items, orderField, orderDir, onChange, isButton, righ
       <DropdownToggle
         caret
         color={isButton ? 'secondary' : 'link'}
-        className={classNames({ 'btn-block': isButton, 'btn-sm sorting-dropdown__paddingless': !isButton })}
+        className={classNames({ 'btn-block': isButton, 'btn-sm paddingless': !isButton })}
       >
         Order by
       </DropdownToggle>
diff --git a/src/utils/SortingDropdown.scss b/src/utils/SortingDropdown.scss
index 5f9c624e..3d2ae507 100644
--- a/src/utils/SortingDropdown.scss
+++ b/src/utils/SortingDropdown.scss
@@ -10,7 +10,3 @@
   margin: 3.5px 0 0;
   float: right;
 }
-
-.sorting-dropdown__paddingless.sorting-dropdown__paddingless {
-  padding: 0;
-}