@micromag/core 0.3.420 → 0.3.423

package/es/components.js

@@ -15,6 +15,7 @@ import { useForm, useDocumentEvent, useIntersectionObserver, useDimensionObserve
 import { useFieldsManager, useFieldComponent, FieldContextProvider, withModals, useModals, useUppy, withPanels, usePanels, ScreenSizeProvider, useScreenComponent, ScreenProvider, useScreenRenderContext, useScreenSize } from '@micromag/core/contexts';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import get from 'lodash/get';
+import queryString from 'query-string';
 import ReactDOM from 'react-dom';
 import isArray from 'lodash/isArray';
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown';
@@ -1554,8 +1555,12 @@ var messages = defineMessages({
 });
 var propTypes$x = {
   page: PropTypes$1.number,
+  lastPage: PropTypes$1.number,
+  maxPages: PropTypes$1.number,
   total: PropTypes$1.number,
   url: PropTypes$1.string,
+  query: PropTypes$1.object,
+  // eslint-disable-line react/forbid-prop-types
   withPreviousNext: PropTypes$1.bool,
   className: PropTypes$1.string,
   paginationClassName: PropTypes$1.string,
@@ -1565,8 +1570,11 @@ var propTypes$x = {
 };
 var defaultProps$x = {
   page: 1,
+  lastPage: 1,
+  maxPages: 10,
   total: 1,
   url: null,
+  query: null,
   withPreviousNext: false,
   className: null,
   paginationClassName: null,
@@ -1575,9 +1583,12 @@ var defaultProps$x = {
   onClickPage: null
 };
 var PaginationMenu = function PaginationMenu(_ref) {
-  var page = _ref.page,
-    total = _ref.total,
+  var parentPage = _ref.page,
+    parentLastPage = _ref.lastPage,
+    parentMaxPages = _ref.maxPages,
+    parentTotal = _ref.total,
     url = _ref.url,
+    query = _ref.query,
     withPreviousNext = _ref.withPreviousNext,
     className = _ref.className,
     paginationClassName = _ref.paginationClassName,
@@ -1585,11 +1596,38 @@ var PaginationMenu = function PaginationMenu(_ref) {
     linkClassName = _ref.linkClassName,
     onClickPage = _ref.onClickPage;
   var getUrl = useCallback(function (currentPage) {
-    return url !== null ? "".concat(url).concat(url.indexOf('?') !== -1 ? "&page=".concat(currentPage) : "?page=".concat(currentPage)) : null;
-  }, [url]);
-  var pages = _toConsumableArray(Array(total).keys()).map(function (it) {
-    return it + 1;
+    return url !== null ? "".concat(url, "?").concat(queryString.stringify(_objectSpread(_objectSpread({}, query), {}, {
+      page: currentPage
+    }), {
+      arrayFormat: 'bracket'
+    })) : null;
+  }, [url, query]);
+
+  // TODO: test this
+  // const pages = [...Array(total).keys()].map((it) => it + 1);
+
+  var page = parseInt(parentPage, 10);
+  var total = parseInt(parentTotal, 10);
+  var maxPages = parseInt(parentMaxPages, 10);
+  var lastPage = parseInt(parentLastPage, 10);
+  var pageNumbers = Array.from({
+    length: parseInt(lastPage, 10)
+  }, function (_, i) {
+    return i + 1;
   });
+  var stripPages = maxPages !== null && lastPage > maxPages;
+  var startPage = stripPages ? Math.min(Math.max(page - maxPages / 2, 1), lastPage - maxPages) : null;
+  var endPage = stripPages ? startPage + maxPages : null;
+  var strippedPages = stripPages ? pageNumbers.reduce(function (selectedPages, pageNumber) {
+    if (pageNumber === 1 && startPage - 1 > 1) {
+      return [pageNumber, '...'];
+    }
+    if (pageNumber === lastPage && endPage + 1 < lastPage) {
+      return [].concat(_toConsumableArray(selectedPages), ['...', pageNumber]);
+    }
+    return pageNumber >= startPage && pageNumber <= endPage ? [].concat(_toConsumableArray(selectedPages), [pageNumber]) : selectedPages;
+  }, []) : pageNumbers;
+  var pages = strippedPages.length > 0 ? strippedPages : [1];
   return /*#__PURE__*/React.createElement("nav", {
     className: classNames([styles$p.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("ul", {

package/lib/components.js

@@ -19,6 +19,7 @@ var hooks = require('@micromag/core/hooks');
 var contexts = require('@micromag/core/contexts');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var get = require('lodash/get');
+var queryString = require('query-string');
 var ReactDOM = require('react-dom');
 var isArray = require('lodash/isArray');
 var faAngleDown = require('@fortawesome/free-solid-svg-icons/faAngleDown');
@@ -76,6 +77,7 @@ var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumab
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
 var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
+var queryString__default = /*#__PURE__*/_interopDefaultLegacy(queryString);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
 var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
@@ -1595,8 +1597,12 @@ var messages = reactIntl.defineMessages({
 });
 var propTypes$x = {
   page: PropTypes__default["default"].number,
+  lastPage: PropTypes__default["default"].number,
+  maxPages: PropTypes__default["default"].number,
   total: PropTypes__default["default"].number,
   url: PropTypes__default["default"].string,
+  query: PropTypes__default["default"].object,
+  // eslint-disable-line react/forbid-prop-types
   withPreviousNext: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
   paginationClassName: PropTypes__default["default"].string,
@@ -1606,8 +1612,11 @@ var propTypes$x = {
 };
 var defaultProps$x = {
   page: 1,
+  lastPage: 1,
+  maxPages: 10,
   total: 1,
   url: null,
+  query: null,
   withPreviousNext: false,
   className: null,
   paginationClassName: null,
@@ -1616,9 +1625,12 @@ var defaultProps$x = {
   onClickPage: null
 };
 var PaginationMenu = function PaginationMenu(_ref) {
-  var page = _ref.page,
-    total = _ref.total,
+  var parentPage = _ref.page,
+    parentLastPage = _ref.lastPage,
+    parentMaxPages = _ref.maxPages,
+    parentTotal = _ref.total,
     url = _ref.url,
+    query = _ref.query,
     withPreviousNext = _ref.withPreviousNext,
     className = _ref.className,
     paginationClassName = _ref.paginationClassName,
@@ -1626,11 +1638,38 @@ var PaginationMenu = function PaginationMenu(_ref) {
     linkClassName = _ref.linkClassName,
     onClickPage = _ref.onClickPage;
   var getUrl = React.useCallback(function (currentPage) {
-    return url !== null ? "".concat(url).concat(url.indexOf('?') !== -1 ? "&page=".concat(currentPage) : "?page=".concat(currentPage)) : null;
-  }, [url]);
-  var pages = _toConsumableArray__default["default"](Array(total).keys()).map(function (it) {
-    return it + 1;
+    return url !== null ? "".concat(url, "?").concat(queryString__default["default"].stringify(_objectSpread__default["default"](_objectSpread__default["default"]({}, query), {}, {
+      page: currentPage
+    }), {
+      arrayFormat: 'bracket'
+    })) : null;
+  }, [url, query]);
+
+  // TODO: test this
+  // const pages = [...Array(total).keys()].map((it) => it + 1);
+
+  var page = parseInt(parentPage, 10);
+  var total = parseInt(parentTotal, 10);
+  var maxPages = parseInt(parentMaxPages, 10);
+  var lastPage = parseInt(parentLastPage, 10);
+  var pageNumbers = Array.from({
+    length: parseInt(lastPage, 10)
+  }, function (_, i) {
+    return i + 1;
   });
+  var stripPages = maxPages !== null && lastPage > maxPages;
+  var startPage = stripPages ? Math.min(Math.max(page - maxPages / 2, 1), lastPage - maxPages) : null;
+  var endPage = stripPages ? startPage + maxPages : null;
+  var strippedPages = stripPages ? pageNumbers.reduce(function (selectedPages, pageNumber) {
+    if (pageNumber === 1 && startPage - 1 > 1) {
+      return [pageNumber, '...'];
+    }
+    if (pageNumber === lastPage && endPage + 1 < lastPage) {
+      return [].concat(_toConsumableArray__default["default"](selectedPages), ['...', pageNumber]);
+    }
+    return pageNumber >= startPage && pageNumber <= endPage ? [].concat(_toConsumableArray__default["default"](selectedPages), [pageNumber]) : selectedPages;
+  }, []) : pageNumbers;
+  var pages = strippedPages.length > 0 ? strippedPages : [1];
   return /*#__PURE__*/React__default["default"].createElement("nav", {
     className: classNames__default["default"]([styles$p.container, _defineProperty__default["default"]({}, className, className !== null)])
   }, /*#__PURE__*/React__default["default"].createElement("ul", {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.420",
+    "version": "0.3.423",
     "private": false,
     "description": "",
     "keywords": [
@@ -119,6 +119,7 @@
         "lodash": "^4.17.21",
         "param-case": "^3.0.4",
         "prop-types": "^15.7.2",
+        "query-string": "^6.13.7",
         "raf": "^3.4.1",
         "react-helmet": "^6.1.0",
         "react-intl": "^5.12.1",
@@ -136,5 +137,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "5b0f037a41c3bca07a5bce8f0dce205242f7ad17"
+    "gitHead": "c02e69c23fd099d5684bc0b69e02f19825cecfd2"
 }