@twreporter/react-components 8.26.0 → 8.27.0-rc.1

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.27.0-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.27.0-rc.0...@twreporter/react-components@8.27.0-rc.1) (2024-03-27)
+
+
+### Bug Fixes
+
+* pagination number position center ([6d933f1](https://github.com/twreporter/twreporter-npm-packages/commit/6d933f11695b3aa5ad02190be943dfd51e2a11af))
+
+
+
+
+
+# [8.27.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.26.0...@twreporter/react-components@8.27.0-rc.0) (2024-03-25)
+
+
+### Features
+
+* add className prop ([f2d85fa](https://github.com/twreporter/twreporter-npm-packages/commit/f2d85fa1fcfc4afa4feddb6a001946580fe0d6cb))
+* add mobile pagination ([d128cba](https://github.com/twreporter/twreporter-npm-packages/commit/d128cbafea8459eb03cdac22614e8ec067a89bad))
+* adjust mobile pagination logic ([708f41b](https://github.com/twreporter/twreporter-npm-packages/commit/708f41bb9df638f1b41a15528c73aec7b24639f3))
+
+
+
+
+
 # [8.26.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.26.0-rc.4...@twreporter/react-components@8.26.0) (2024-03-13)
 
 **Note:** Version bump only for package @twreporter/react-components

package/lib/pagination/index.js

@@ -21,11 +21,13 @@ var _css = require("@twreporter/core/lib/utils/css");
 
 var _color = require("@twreporter/core/lib/constants/color");
 
+var _rwd = require("@twreporter/react-components/lib/rwd");
+
 var _concat = _interopRequireDefault(require("lodash/concat"));
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -111,7 +113,7 @@ var PaginationContainer = /*#__PURE__*/_styledComponents["default"].div.withConf
 var Boxes = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "pagination__Boxes",
   componentId: "sc-17bqftr-1"
-})(["display:inline-block;user-select:none;"]);
+})(["display:flex;justify-content:center;"]);
 
 var Box = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "pagination__Box",
@@ -121,21 +123,21 @@ var Box = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var PageNumberBox = /*#__PURE__*/(0, _styledComponents["default"])(Box).withConfig({
   displayName: "pagination__PageNumberBox",
   componentId: "sc-17bqftr-3"
-})(["border:solid 1px ", ";border-radius:50%;line-height:", "px;background-color:", ";> span{color:", ";}", ""], _color.colorSupportive.heavy, styles.btnBoxSize.desktop, function (props) {
+})(["border:solid 1px ", ";border-radius:50%;line-height:", "px;background-color:", ";> span{color:", ";}"], _color.colorSupportive.heavy, styles.btnBoxSize.desktop, function (props) {
   return props.isCurrent ? _color.colorSupportive.heavy : 'transparent';
 }, function (props) {
   return props.isCurrent ? _color.colorGrayscale.white : _color.colorSupportive.heavy;
-}, _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: ", ";\n  "])), function (props) {
-  return props.isCurrent ? '' : 'none';
-}));
+});
 var EllipsisBox = /*#__PURE__*/(0, _styledComponents["default"])(Box).withConfig({
   displayName: "pagination__EllipsisBox",
   componentId: "sc-17bqftr-4"
-})(["cursor:default;padding:", ";", ""], (0, _css.arrayToCssShorthand)(styles.ellipsisBoxPadding), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
+})(["cursor:default;padding:", ";", ""], (0, _css.arrayToCssShorthand)(styles.ellipsisBoxPadding), _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
 var PrevNextBtn = /*#__PURE__*/(0, _styledComponents["default"])(Box).withConfig({
   displayName: "pagination__PrevNextBtn",
   componentId: "sc-17bqftr-5"
-})(["padding:", ";cursor:pointer;path{stroke:", ";}"], (0, _css.arrayToCssShorthand)(styles.prevNextBtnPadding), _color.colorSupportive.heavy);
+})(["visibility:", ";padding:", ";cursor:pointer;path{stroke:", ";}"], function (props) {
+  return props.isHidden ? 'hidden' : 'visible';
+}, (0, _css.arrayToCssShorthand)(styles.prevNextBtnPadding), _color.colorSupportive.heavy);
 /*
 Pages Array:
 
@@ -269,6 +271,30 @@ var Pagination = /*#__PURE__*/function (_React$PureComponent) {
       var length = nOfCenterPages;
       return _.concat(leftMarginJSX, leftEllipsisJSX, this._buildCenterJSX(startAt, length, currentPage), rightEllipsisJSX, rightMarginJSX);
     }
+  }, {
+    key: "_buildMobilePagesArray",
+    value: function _buildMobilePagesArray(currentPage, totalPages) {
+      var pagesArrayMaxLength = 5;
+
+      if (totalPages <= pagesArrayMaxLength) {
+        return this._buildCenterJSX(1, totalPages, currentPage);
+      }
+
+      var startPage; // Check if currentPage is within the first two pages or the last two pages
+
+      if (currentPage <= 2) {
+        // If in the first two pages, start from page 1
+        startPage = 1;
+      } else if (currentPage >= totalPages - 1) {
+        // If in the last two pages, adjust startPage to ensure the array is fully populated
+        startPage = totalPages - pagesArrayMaxLength + 1;
+      } else {
+        // Otherwise, center currentPage by adjusting startPage accordingly
+        startPage = currentPage - 2;
+      }
+
+      return this._buildCenterJSX(startPage, pagesArrayMaxLength, currentPage);
+    }
   }, {
     key: "render",
     value: function render() {
@@ -276,19 +302,28 @@ var Pagination = /*#__PURE__*/function (_React$PureComponent) {
           currentPage = _this$props2.currentPage,
           totalPages = _this$props2.totalPages,
           handleClickPrev = _this$props2.handleClickPrev,
-          handleClickNext = _this$props2.handleClickNext;
-      if (!totalPages || !currentPage) return /*#__PURE__*/_react["default"].createElement(PaginationContainer, null, /*#__PURE__*/_react["default"].createElement(Boxes, null));
+          handleClickNext = _this$props2.handleClickNext,
+          className = _this$props2.className;
+      if (!totalPages || !currentPage) return /*#__PURE__*/_react["default"].createElement(PaginationContainer, {
+        className: className
+      }, /*#__PURE__*/_react["default"].createElement(Boxes, null));
 
       var pagesArrayJSX = this._buildPagesArray(currentPage, totalPages);
 
+      var mobilePagesArrayJSX = this._buildMobilePagesArray(currentPage, totalPages);
+
       var belowFirstPage = currentPage <= 1;
       var aboveFinalPage = currentPage >= totalPages;
-      return /*#__PURE__*/_react["default"].createElement(PaginationContainer, null, /*#__PURE__*/_react["default"].createElement(Boxes, null, belowFirstPage ? null : /*#__PURE__*/_react["default"].createElement(PrevNextBtn, {
+      return /*#__PURE__*/_react["default"].createElement(PaginationContainer, {
+        className: className
+      }, /*#__PURE__*/_react["default"].createElement(Boxes, null, /*#__PURE__*/_react["default"].createElement(PrevNextBtn, {
         key: "prev-btn",
-        onClick: handleClickPrev
-      }, /*#__PURE__*/_react["default"].createElement(PageUpIcon, null)), pagesArrayJSX, aboveFinalPage ? null : /*#__PURE__*/_react["default"].createElement(PrevNextBtn, {
+        onClick: handleClickPrev,
+        isHidden: belowFirstPage
+      }, /*#__PURE__*/_react["default"].createElement(PageUpIcon, null)), /*#__PURE__*/_react["default"].createElement(_rwd.TabletAndAbove, null, pagesArrayJSX), /*#__PURE__*/_react["default"].createElement(_rwd.MobileOnly, null, mobilePagesArrayJSX), /*#__PURE__*/_react["default"].createElement(PrevNextBtn, {
         key: "next-btn",
-        onClick: handleClickNext
+        onClick: handleClickNext,
+        isHidden: aboveFinalPage
       }, /*#__PURE__*/_react["default"].createElement(PageDownIcon, null))));
     }
   }]);
@@ -304,14 +339,16 @@ Pagination.propTypes = {
   handleClickPrev: _propTypes["default"].func.isRequired,
   nOfCenterPages: _propTypes["default"].number.isRequired,
   nOfMarginPages: _propTypes["default"].number.isRequired,
-  totalPages: _propTypes["default"].number.isRequired
+  totalPages: _propTypes["default"].number.isRequired,
+  className: _propTypes["default"].string
 };
 Pagination.defaultProps = {
   currentPage: 1,
   totalPages: 1,
   ellipsis: '…',
   nOfCenterPages: 4,
-  nOfMarginPages: 1
+  nOfMarginPages: 1,
+  className: ''
 };
 var _default = Pagination;
 exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.26.0",
+  "version": "8.27.0-rc.1",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <developer@twreporter.org>",
@@ -51,5 +51,5 @@
     "react-dom": "^16.0.0",
     "storybook": "^7.5.2"
   },
-  "gitHead": "a0d096d6ffbcf637bc28cef98476c68daace7a04"
+  "gitHead": "64b430dd7114c25dfff361fadb2906c47891087d"
 }