@twreporter/react-components 8.26.0-rc.4 → 8.27.0-rc.0

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 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.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
+
+
+
+
+
 # [8.26.0-rc.4](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.26.0-rc.3...@twreporter/react-components@8.26.0-rc.4) (2024-03-12)
 
 

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 }; }
 
@@ -121,17 +123,15 @@ 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"
@@ -269,6 +269,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,20 +300,33 @@ 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(_rwd.TabletAndAbove, null, /*#__PURE__*/_react["default"].createElement(Boxes, null, belowFirstPage ? 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, {
         key: "next-btn",
         onClick: handleClickNext
-      }, /*#__PURE__*/_react["default"].createElement(PageDownIcon, null))));
+      }, /*#__PURE__*/_react["default"].createElement(PageDownIcon, null)))), /*#__PURE__*/_react["default"].createElement(_rwd.MobileOnly, null, /*#__PURE__*/_react["default"].createElement(Boxes, null, belowFirstPage ? null : /*#__PURE__*/_react["default"].createElement(PrevNextBtn, {
+        key: "prev-btn",
+        onClick: handleClickPrev
+      }, /*#__PURE__*/_react["default"].createElement(PageUpIcon, null)), mobilePagesArrayJSX, aboveFinalPage ? null : /*#__PURE__*/_react["default"].createElement(PrevNextBtn, {
+        key: "next-btn",
+        onClick: handleClickNext
+      }, /*#__PURE__*/_react["default"].createElement(PageDownIcon, null)))));
     }
   }]);
 
@@ -304,14 +341,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-rc.4",
+  "version": "8.27.0-rc.0",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <developer@twreporter.org>",
@@ -15,8 +15,8 @@
     "chromatic": "npx chromatic --exit-zero-on-changes"
   },
   "dependencies": {
-    "@twreporter/core": "^1.19.0-rc.0",
-    "@twreporter/redux": "^7.11.2-rc.2",
+    "@twreporter/core": "^1.19.0",
+    "@twreporter/redux": "^7.11.2",
     "fontfaceobserver-es": "^3.3.3",
     "hoist-non-react-statics": "^2.3.1",
     "lodash": "^4.0.0",
@@ -51,5 +51,5 @@
     "react-dom": "^16.0.0",
     "storybook": "^7.5.2"
   },
-  "gitHead": "dfe858a4e32c5ad5d928d9b0a60b8d5352ca6e96"
+  "gitHead": "1a9c3f4ba2a3e44721879710fa268791bd961a1a"
 }