@uncinc/uncinc-react-kitchen-sink 2.20.2 → 2.20.3

package/dist/components/Pagination/index.d.ts

@@ -1,7 +1,8 @@
-export function Pagination({ currentPage, totalPages, pageRangeDisplayed, marginPagesDisplayed, setCurrentPage, previousLabel, nextLabel, containerClassName, disabledClassName, activeClassName, breakClassName, showWhenOnePage, controlled, scrollToTop, scrollToTopOffset, scrollToTopBehavior, }: {
+export function Pagination({ currentPage, totalPages, pageRangeDisplayed, pageRangeDisplayedPerViewPort, marginPagesDisplayed, setCurrentPage, previousLabel, nextLabel, containerClassName, disabledClassName, activeClassName, breakClassName, showWhenOnePage, controlled, scrollToTop, scrollToTopOffset, scrollToTopBehavior, }: {
     currentPage: any;
     totalPages: any;
     pageRangeDisplayed: any;
+    pageRangeDisplayedPerViewPort: any;
     marginPagesDisplayed: any;
     setCurrentPage: any;
     previousLabel: any;
@@ -21,6 +22,13 @@ export namespace Pagination {
         let currentPage: PropTypes.Validator<number>;
         let totalPages: PropTypes.Validator<number>;
         let pageRangeDisplayed: PropTypes.Requireable<number>;
+        let pageRangeDisplayedPerViewPort: PropTypes.Requireable<Required<PropTypes.InferProps<{
+            xs: PropTypes.Requireable<number>;
+            sm: PropTypes.Requireable<number>;
+            md: PropTypes.Requireable<number>;
+            lg: PropTypes.Requireable<number>;
+            xl: PropTypes.Requireable<number>;
+        }>>>;
         let marginPagesDisplayed: PropTypes.Requireable<number>;
         let setCurrentPage: PropTypes.Requireable<(...args: any[]) => any>;
         let previousLabel: PropTypes.Requireable<string>;
@@ -35,6 +43,18 @@ export namespace Pagination {
         let scrollToTopBehavior: PropTypes.Requireable<string>;
     }
     namespace defaultProps {
+        let pageRangeDisplayed_1: number;
+        export { pageRangeDisplayed_1 as pageRangeDisplayed };
+        export namespace pageRangeDisplayedPerViewPort_1 {
+            let xs: number;
+            let sm: number;
+            let md: number;
+            let lg: number;
+            let xl: number;
+        }
+        export { pageRangeDisplayedPerViewPort_1 as pageRangeDisplayedPerViewPort };
+        let marginPagesDisplayed_1: number;
+        export { marginPagesDisplayed_1 as marginPagesDisplayed };
         let setCurrentPage_1: null;
         export { setCurrentPage_1 as setCurrentPage };
         let previousLabel_1: null;
@@ -47,10 +67,6 @@ export namespace Pagination {
         export { disabledClassName_1 as disabledClassName };
         let activeClassName_1: null;
         export { activeClassName_1 as activeClassName };
-        let pageRangeDisplayed_1: number;
-        export { pageRangeDisplayed_1 as pageRangeDisplayed };
-        let marginPagesDisplayed_1: number;
-        export { marginPagesDisplayed_1 as marginPagesDisplayed };
         let showWhenOnePage_1: boolean;
         export { showWhenOnePage_1 as showWhenOnePage };
         let controlled_1: boolean;

package/dist/components/Pagination/index.js

@@ -1,13 +1,21 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import React, { useEffect } from 'react';
-import ReactPaginate from 'react-paginate';
 import c from 'classnames';
-import './style.scss';
 import PropTypes from 'prop-types';
+import ReactPaginate from 'react-paginate';
 import withMapping from '../../Context/withMapping';
+import useValueForCurrentViewPort from '../../helpers/useValueForCurrentViewPort';
+import './style.scss';
 export var Pagination = function Pagination(_ref) {
   var currentPage = _ref.currentPage,
     totalPages = _ref.totalPages,
     pageRangeDisplayed = _ref.pageRangeDisplayed,
+    pageRangeDisplayedPerViewPort = _ref.pageRangeDisplayedPerViewPort,
     marginPagesDisplayed = _ref.marginPagesDisplayed,
     setCurrentPage = _ref.setCurrentPage,
     previousLabel = _ref.previousLabel,
@@ -21,6 +29,8 @@ export var Pagination = function Pagination(_ref) {
     scrollToTop = _ref.scrollToTop,
     scrollToTopOffset = _ref.scrollToTopOffset,
     scrollToTopBehavior = _ref.scrollToTopBehavior;
+  // Calculate dynamic pageRangeDisplayed based on window width.
+  var pageRange = useValueForCurrentViewPort.apply(void 0, _toConsumableArray(pageRangeDisplayedPerViewPort ? Object.values(pageRangeDisplayedPerViewPort) : Array(5).fill(pageRangeDisplayed)));
   useEffect(function () {
     if (scrollToTop) {
       window.scrollTo({
@@ -63,7 +73,7 @@ export var Pagination = function Pagination(_ref) {
     breakLabel: "...",
     breakClassName: breakClasses,
     pageCount: totalPages,
-    pageRangeDisplayed: pageRangeDisplayed,
+    pageRangeDisplayed: pageRange,
     marginPagesDisplayed: marginPagesDisplayed,
     disabledClassName: disabledClasses,
     initialPage: !controlled && currentPage - 1,
@@ -77,6 +87,13 @@ Pagination.propTypes = {
   currentPage: PropTypes.number.isRequired,
   totalPages: PropTypes.number.isRequired,
   pageRangeDisplayed: PropTypes.number,
+  pageRangeDisplayedPerViewPort: PropTypes.exact({
+    xs: PropTypes.number,
+    sm: PropTypes.number,
+    md: PropTypes.number,
+    lg: PropTypes.number,
+    xl: PropTypes.number
+  }),
   marginPagesDisplayed: PropTypes.number,
   setCurrentPage: PropTypes.func,
   previousLabel: PropTypes.string,
@@ -91,14 +108,21 @@ Pagination.propTypes = {
   scrollToTopBehavior: PropTypes.oneOf(['smooth', 'instant', 'auto'])
 };
 Pagination.defaultProps = {
+  pageRangeDisplayed: 5,
+  pageRangeDisplayedPerViewPort: {
+    xs: 5,
+    sm: 5,
+    md: 5,
+    lg: 5,
+    xl: 5
+  },
+  marginPagesDisplayed: 1,
   setCurrentPage: null,
   previousLabel: null,
   nextLabel: null,
   containerClassName: null,
   disabledClassName: null,
   activeClassName: null,
-  pageRangeDisplayed: 5,
-  marginPagesDisplayed: 1,
   showWhenOnePage: false,
   controlled: false,
   scrollToTop: false,

package/dist/components/Pagination/style.scss

@@ -46,6 +46,7 @@
   &__previous__icon:after {
     content: "‹";
   }
+
   &__next__icon:after {
     content: "›";
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.20.2",
+  "version": "2.20.3",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",