@quintoandar-tokko/paginator 1.0.166

package/lib/index.js

@@ -0,0 +1,173 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Paginator = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _box = require("@quintoandar-tokko/box");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _icons = require("@quintoandar-tokko/icons");
+var _excluded = ["currentPage", "total", "perPage", "changePageNumber", "sx", "selectedPageStyle"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+var Paginator = exports.Paginator = function Paginator(_ref) {
+  var currentPage = _ref.currentPage,
+    total = _ref.total,
+    perPage = _ref.perPage,
+    changePageNumber = _ref.changePageNumber,
+    sx = _ref.sx,
+    selectedPageStyle = _ref.selectedPageStyle,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var lastPage = function lastPage() {
+    return Math.max(Math.ceil(total / perPage), 1);
+  };
+  var makeUrlWindow = function makeUrlWindow() {
+    // small slider
+    if (lastPage() < 12) {
+      return {
+        first: _lodash["default"].range(1, lastPage() + 1),
+        slider: null,
+        last: null
+      };
+    }
+
+    // url slider
+    var onBothSide = 6;
+
+    // if slider too close to beginning
+    if (currentPage <= onBothSide) {
+      return {
+        first: _lodash["default"].range(1, onBothSide + 3),
+        slider: null,
+        last: _lodash["default"].range(lastPage() - 1, lastPage() + 1)
+      };
+    }
+
+    // if slider too close to ending
+    if (currentPage > lastPage() - onBothSide) {
+      return {
+        first: _lodash["default"].range(1, 3),
+        slider: null,
+        last: _lodash["default"].range(lastPage() - (onBothSide + 2), lastPage() + 1)
+      };
+    }
+
+    // get full slider
+    return {
+      first: _lodash["default"].range(1, 3),
+      slider: _lodash["default"].range(currentPage - 3, currentPage + 4),
+      last: _lodash["default"].range(lastPage() - 1, lastPage() + 1)
+    };
+  };
+  var elements = function elements() {
+    var urlWindow = makeUrlWindow();
+    return _lodash["default"].compact([urlWindow.first, Array.isArray(urlWindow.slider) ? '...' : null, urlWindow.slider, Array.isArray(urlWindow.last) ? '...' : null, urlWindow.last]);
+  };
+  var onFirstPage = function onFirstPage() {
+    return currentPage <= 1;
+  };
+  var hasMorePages = function hasMorePages() {
+    return currentPage < lastPage();
+  };
+  var changePage = function changePage(page, e) {
+    e.preventDefault();
+    changePageNumber(page);
+  };
+  if (total < 0 || perPage < 1 || currentPage < 1 || total < perPage && currentPage > 1 || total > perPage && total % perPage === 0 && currentPage > total / perPage || total > perPage && total % perPage !== 0 && currentPage > 1 + total / perPage) {
+    return /*#__PURE__*/_react["default"].createElement(_box.Box, null, '<', " ", '>', ' ');
+  }
+  return /*#__PURE__*/_react["default"].createElement(_box.Box, _extends({
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      fontFamily: 'Nunito Sans',
+      fontSize: '11.11px',
+      cursor: 'pointer',
+      color: '#2E393F',
+      fontWeight: '600',
+      gap: '4px'
+    }
+  }, sx), !onFirstPage() && /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    sx: {
+      padding: '8px',
+      borderRadius: '6px',
+      '&:hover': {
+        background: '#F3F6F8'
+      }
+    },
+    onClick: function onClick(e) {
+      return changePage(currentPage - 1, e);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+    icon: "icon-atras",
+    fontSize: "16px"
+  })), elements().map(function (element, index) {
+    var Element = function Element() {
+      if (typeof element === 'string') {
+        return /*#__PURE__*/_react["default"].createElement(_box.Box, {
+          sx: {
+            padding: '8px'
+          }
+        }, element);
+      }
+      if (Array.isArray(element)) {
+        return element.map(function (page) {
+          if (page === currentPage) {
+            return /*#__PURE__*/_react["default"].createElement(_box.Box, {
+              sx: {
+                width: '32px',
+                height: '32px',
+                borderRadius: '6px',
+                display: 'grid',
+                placeItems: 'center',
+                color: '#FFF',
+                background: '#586A74',
+                userSelect: 'none'
+              },
+              style: selectedPageStyle,
+              key: page
+            }, /*#__PURE__*/_react["default"].createElement("span", null, page));
+          }
+          return /*#__PURE__*/_react["default"].createElement(_box.Box, {
+            sx: {
+              width: '32px',
+              height: '32px',
+              borderRadius: '6px',
+              display: 'grid',
+              placeItems: 'center',
+              userSelect: 'none',
+              '&:hover': {
+                background: '#F3F6F8'
+              }
+            },
+            key: page,
+            onClick: function onClick(e) {
+              return changePage(page, e);
+            }
+          }, /*#__PURE__*/_react["default"].createElement("span", null, page));
+        });
+      }
+      return null;
+    };
+    return /*#__PURE__*/_react["default"].createElement(Element, {
+      key: index
+    });
+  }), hasMorePages() && /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    sx: {
+      padding: '8px',
+      borderRadius: '6px',
+      '&:hover': {
+        background: '#F3F6F8'
+      }
+    },
+    onClick: function onClick(e) {
+      return changePage(currentPage + 1, e);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+    icon: "icon-siguiente",
+    fontSize: "16px"
+  })));
+};

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@quintoandar-tokko/paginator",
+  "version": "1.0.166",
+  "main": "lib/index.js",
+  "module": "src/index.js",
+  "files": [
+    "lib"
+  ],
+  "dependencies": {
+    "@quintoandar-tokko/box": "^1.2.286",
+    "@quintoandar-tokko/text": "^1.2.287"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "3c5995a3482c9cd1b428a69e135c934c37bce2ae"
+}