@welcome-ui/pagination - npm Package Compare versions

Comparing version 4.2.0 to 5.0.0-alpha.0

dist/pagination.cjs.js

@@ -7,4 +7,3 @@ 'use strict';
 var Rover = require('reakit/Rover');
-var icons_left = require('@welcome-ui/icons.left');
-var icons_right = require('@welcome-ui/icons.right');
+var icons = require('@welcome-ui/icons');
 var system = require('@welcome-ui/system');
@@ -19,3 +18,4 @@ var styled = require('@xstyled/styled-components');
 
-var RANGE = 4;
+var RANGE = 5;
+var CENTER_RANGE = 3;
 
@@ -40,2 +40,8 @@ function fill(length, transform) {
 
+function getPosition(page, pageCount) {
+  if (page < RANGE) return 'before';
+  if (page >= RANGE && page <= pageCount - RANGE + 1) return 'center';
+  if (page > pageCount - RANGE + 1) return 'after';
+}
+
 function usePages(_ref) {
@@ -46,3 +52,3 @@ var page = _ref.page,
   return React.useMemo(function () {
-    if (pageCount <= rangeDisplay) {
+    if (pageCount <= rangeDisplay || pageCount <= RANGE + 1) {
       return fill(pageCount, function (i) {
@@ -53,10 +59,11 @@ return i + 1;
 
-    var before = page < RANGE ? fill(Math.min(pageCount, page + 1), function (i) {
+    var position = getPosition(page, pageCount);
+    var before = position === 'before' ? fill(RANGE, function (i) {
       return i + 1;
     }) : [1];
-    var center = page >= RANGE && page <= pageCount - RANGE + 1 ? fill(RANGE - 1, function (i) {
+    var center = position === 'center' ? fill(CENTER_RANGE, function (i) {
       return i + page - 1;
     }) : [];
-    var after = page > pageCount - RANGE + 1 ? fill(Math.min(RANGE, pageCount - page + RANGE / 2), function (i) {
-      return i + page - 1;
+    var after = position === 'after' ? fill(RANGE, function (i) {
+      return i + pageCount - RANGE + 1;
     }) : [pageCount];
@@ -67,3 +74,3 @@ return joinArrays([before, center, after], '-');
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
@@ -73,10 +80,11 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 var List = /*#__PURE__*/styled__default["default"].ul(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n"])));
-var Item = /*#__PURE__*/styled__default["default"].li(function (_ref) {
-  var hidden = _ref.hidden;
-  return styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    display: inline-block;\n    vertical-align: bottom;\n    padding: 0;\n    margin-right: xxs;\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    ", "\n  "])), hidden && styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      display: none;\n    "]))));
+var Item = /*#__PURE__*/styled__default["default"].li(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-block;\n  vertical-align: bottom;\n  padding: 0;\n  margin-right: sm;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])));
+var Dots = /*#__PURE__*/styled__default["default"].span(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])), /*#__PURE__*/styled.th('paginations.default'));
+var AbstractLink = /*#__PURE__*/styled__default["default"].a(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n  ", ";\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  text-decoration: none;\n\n  &:focus {\n    outline: none !important; /* important for firefox */\n    transition: none;\n  }\n\n  [", "] &:focus {\n    box-shadow: none;\n  }\n"])), /*#__PURE__*/styled.th('paginations.default'), /*#__PURE__*/styled.th('paginations.item'), utils.hideFocusRingsDataAttribute);
+var ArrowLink = /*#__PURE__*/styled__default["default"](AbstractLink)(function (_ref) {
+  var isDisabled = _ref.isDisabled;
+  return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n    ", "\n  "])), isDisabled && styled.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      color: nude-700;\n      background-color: nude-400;\n    "]))));
 });
-var Dots = /*#__PURE__*/styled__default["default"].span(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n  ", "\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])), /*#__PURE__*/styled.th('paginations.default'), /*#__PURE__*/styled.th('paginations.dots'));
-var AbstractLink = /*#__PURE__*/styled__default["default"].a(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n  ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: medium;\n  text-decoration: none;\n\n  &:focus {\n    outline: none !important; /* important for firefox */\n    transition: none;\n  }\n"])), /*#__PURE__*/styled.th('paginations.default'), /*#__PURE__*/styled.th('paginations.item'));
 var PageLink = /*#__PURE__*/styled__default["default"](AbstractLink)(function (props) {
-  return styled.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    ", "\n\n    [", "] &:focus {\n      box-shadow: none;\n    }\n\n    ", "\n  "])), styled.th('paginations.number'), utils.hideFocusRingsDataAttribute, props['aria-current'] && styled.th('paginations.active'));
+  return styled.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n    ", "\n  "])), props['aria-current'] && styled.th('paginations.active'));
 });
@@ -127,12 +135,11 @@
     role: "navigation"
-  }, /*#__PURE__*/React__default["default"].createElement(List, null, /*#__PURE__*/React__default["default"].createElement(Item, {
-    hidden: page === 1
-  }, /*#__PURE__*/React__default["default"].createElement(Rover.Rover, _extends({
+  }, /*#__PURE__*/React__default["default"].createElement(List, null, /*#__PURE__*/React__default["default"].createElement(Item, null, /*#__PURE__*/React__default["default"].createElement(Rover.Rover, _extends({
     as: undefined,
     disabled: page === 1
   }, rover), function (roverProps) {
-    return /*#__PURE__*/React__default["default"].createElement(AbstractLink, _extends({}, roverProps, {
+    return /*#__PURE__*/React__default["default"].createElement(ArrowLink, _extends({}, roverProps, {
       href: getHref && getHref(page - 1),
+      isDisabled: page === 1,
       onClick: handlePrevious
-    }), leftArrow || /*#__PURE__*/React__default["default"].createElement(icons_left.LeftIcon, {
+    }), leftArrow || /*#__PURE__*/React__default["default"].createElement(icons.LeftIcon, {
       size: "xs"
@@ -161,12 +168,11 @@ }));
     }));
-  }), /*#__PURE__*/React__default["default"].createElement(Item, {
-    hidden: page === pageCount
-  }, /*#__PURE__*/React__default["default"].createElement(Rover.Rover, _extends({
+  }), /*#__PURE__*/React__default["default"].createElement(Item, null, /*#__PURE__*/React__default["default"].createElement(Rover.Rover, _extends({
     as: undefined,
     disabled: page === pageCount
   }, rover), function (roverProps) {
-    return /*#__PURE__*/React__default["default"].createElement(AbstractLink, _extends({}, roverProps, {
+    return /*#__PURE__*/React__default["default"].createElement(ArrowLink, _extends({}, roverProps, {
       href: getHref && getHref(page + 1),
+      isDisabled: page === pageCount,
       onClick: handleNext
-    }), rightArrow || /*#__PURE__*/React__default["default"].createElement(icons_right.RightIcon, {
+    }), rightArrow || /*#__PURE__*/React__default["default"].createElement(icons.RightIcon, {
       size: "xs"
@@ -173,0 +179,0 @@ }));

dist/pagination.es.js

 import React, { useMemo, useRef, useCallback } from 'react';
 import { useRoverState, Rover } from 'reakit/Rover';
-import { LeftIcon } from '@welcome-ui/icons.left';
-import { RightIcon } from '@welcome-ui/icons.right';
+import { LeftIcon, RightIcon } from '@welcome-ui/icons';
 import { forwardRef } from '@welcome-ui/system';
-import styled, { system, css, th } from '@xstyled/styled-components';
+import styled, { system, th, css } from '@xstyled/styled-components';
 import { hideFocusRingsDataAttribute } from '@welcome-ui/utils';
 
-var RANGE = 4;
+var RANGE = 5;
+var CENTER_RANGE = 3;
 
@@ -29,2 +29,8 @@ function fill(length, transform) {
 
+function getPosition(page, pageCount) {
+  if (page < RANGE) return 'before';
+  if (page >= RANGE && page <= pageCount - RANGE + 1) return 'center';
+  if (page > pageCount - RANGE + 1) return 'after';
+}
+
 function usePages(_ref) {
@@ -35,3 +41,3 @@ var page = _ref.page,
   return useMemo(function () {
-    if (pageCount <= rangeDisplay) {
+    if (pageCount <= rangeDisplay || pageCount <= RANGE + 1) {
       return fill(pageCount, function (i) {
@@ -42,10 +48,11 @@ return i + 1;
 
-    var before = page < RANGE ? fill(Math.min(pageCount, page + 1), function (i) {
+    var position = getPosition(page, pageCount);
+    var before = position === 'before' ? fill(RANGE, function (i) {
       return i + 1;
     }) : [1];
-    var center = page >= RANGE && page <= pageCount - RANGE + 1 ? fill(RANGE - 1, function (i) {
+    var center = position === 'center' ? fill(CENTER_RANGE, function (i) {
       return i + page - 1;
     }) : [];
-    var after = page > pageCount - RANGE + 1 ? fill(Math.min(RANGE, pageCount - page + RANGE / 2), function (i) {
-      return i + page - 1;
+    var after = position === 'after' ? fill(RANGE, function (i) {
+      return i + pageCount - RANGE + 1;
     }) : [pageCount];
@@ -56,3 +63,3 @@ return joinArrays([before, center, after], '-');
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
@@ -62,10 +69,11 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 var List = /*#__PURE__*/styled.ul(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n"])));
-var Item = /*#__PURE__*/styled.li(function (_ref) {
-  var hidden = _ref.hidden;
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    display: inline-block;\n    vertical-align: bottom;\n    padding: 0;\n    margin-right: xxs;\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    ", "\n  "])), hidden && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      display: none;\n    "]))));
+var Item = /*#__PURE__*/styled.li(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-block;\n  vertical-align: bottom;\n  padding: 0;\n  margin-right: sm;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])));
+var Dots = /*#__PURE__*/styled.span(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])), /*#__PURE__*/th('paginations.default'));
+var AbstractLink = /*#__PURE__*/styled.a(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n  ", ";\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  text-decoration: none;\n\n  &:focus {\n    outline: none !important; /* important for firefox */\n    transition: none;\n  }\n\n  [", "] &:focus {\n    box-shadow: none;\n  }\n"])), /*#__PURE__*/th('paginations.default'), /*#__PURE__*/th('paginations.item'), hideFocusRingsDataAttribute);
+var ArrowLink = /*#__PURE__*/styled(AbstractLink)(function (_ref) {
+  var isDisabled = _ref.isDisabled;
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n    ", "\n  "])), isDisabled && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      color: nude-700;\n      background-color: nude-400;\n    "]))));
 });
-var Dots = /*#__PURE__*/styled.span(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n  ", "\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])), /*#__PURE__*/th('paginations.default'), /*#__PURE__*/th('paginations.dots'));
-var AbstractLink = /*#__PURE__*/styled.a(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n  ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: medium;\n  text-decoration: none;\n\n  &:focus {\n    outline: none !important; /* important for firefox */\n    transition: none;\n  }\n"])), /*#__PURE__*/th('paginations.default'), /*#__PURE__*/th('paginations.item'));
 var PageLink = /*#__PURE__*/styled(AbstractLink)(function (props) {
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    ", "\n\n    [", "] &:focus {\n      box-shadow: none;\n    }\n\n    ", "\n  "])), th('paginations.number'), hideFocusRingsDataAttribute, props['aria-current'] && th('paginations.active'));
+  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n    ", "\n  "])), props['aria-current'] && th('paginations.active'));
 });
@@ -116,10 +124,9 @@
     role: "navigation"
-  }, /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(Item, {
-    hidden: page === 1
-  }, /*#__PURE__*/React.createElement(Rover, _extends({
+  }, /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(Rover, _extends({
     as: undefined,
     disabled: page === 1
   }, rover), function (roverProps) {
-    return /*#__PURE__*/React.createElement(AbstractLink, _extends({}, roverProps, {
+    return /*#__PURE__*/React.createElement(ArrowLink, _extends({}, roverProps, {
       href: getHref && getHref(page - 1),
+      isDisabled: page === 1,
       onClick: handlePrevious
@@ -150,10 +157,9 @@ }), leftArrow || /*#__PURE__*/React.createElement(LeftIcon, {
     }));
-  }), /*#__PURE__*/React.createElement(Item, {
-    hidden: page === pageCount
-  }, /*#__PURE__*/React.createElement(Rover, _extends({
+  }), /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(Rover, _extends({
     as: undefined,
     disabled: page === pageCount
   }, rover), function (roverProps) {
-    return /*#__PURE__*/React.createElement(AbstractLink, _extends({}, roverProps, {
+    return /*#__PURE__*/React.createElement(ArrowLink, _extends({}, roverProps, {
       href: getHref && getHref(page + 1),
+      isDisabled: page === pageCount,
       onClick: handleNext
@@ -160,0 +166,0 @@ }), rightArrow || /*#__PURE__*/React.createElement(RightIcon, {

dist/types/styles.d.ts

@@ -6,2 +6,5 @@ export declare const Pagination: import("styled-components").StyledComponent<"nav", import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
 export declare const AbstractLink: import("styled-components").StyledComponent<"a", import("@xstyled/system").Theme, {}, never>;
+export declare const ArrowLink: import("styled-components").StyledComponent<"a", import("@xstyled/system").Theme, {
+    isDisabled: boolean;
+}, never>;
 export declare const PageLink: import("styled-components").StyledComponent<"a", import("@xstyled/system").Theme, {}, never>;

package.json

 {
   "name": "@welcome-ui/pagination",
-  "version": "4.2.0",
+  "version": "5.0.0-alpha.0",
   "description": "Customizable design system with react • styled-components • styled-system and reakit.",
@@ -41,6 +41,5 @@ "main": "dist/pagination.cjs.js",
   "dependencies": {
-    "@welcome-ui/icons.left": "^4.2.0",
-    "@welcome-ui/icons.right": "^4.2.0",
-    "@welcome-ui/system": "^4.2.0",
-    "@welcome-ui/utils": "^4.2.0",
+    "@welcome-ui/icons": "^5.0.0-alpha.0",
+    "@welcome-ui/system": "^5.0.0-alpha.0",
+    "@welcome-ui/utils": "^5.0.0-alpha.0",
     "reakit": "^1.3.11"
@@ -53,3 +52,3 @@ },
   },
-  "gitHead": "5210dd77ab2473d45fd9267429748768437b350d",
+  "gitHead": "860bef68a1e5c291bb94d37f3fa5fccc583a509d",
   "sideEffects": false,
@@ -56,0 +55,0 @@ "component": "Pagination",

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dependency count

7

decreased by-12.5%

Worsened metrics

Total package byte prevSize

29096

decreased by-8.54%

Number of package files

10

decreased by-23.08%

Lines of code

501

decreased by-4.75%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@welcome-ui/icons@^5.0.0-alpha.0

• + Added@welcome-ui/icon@5.22.1(transitive)

• + Added@welcome-ui/icons@5.22.1(transitive)

• + Added@welcome-ui/system@5.17.1(transitive)

• + Added@welcome-ui/utils@5.22.1(transitive)

• + Addedreact-dom@18.3.1(transitive)

• + Addedscheduler@0.23.2(transitive)

• - Removed@welcome-ui/icons.left@^4.2.0

• - Removed@welcome-ui/icons.right@^4.2.0

• - Removed@welcome-ui/icon@4.2.0(transitive)

• - Removed@welcome-ui/icons.left@4.2.0(transitive)

• - Removed@welcome-ui/icons.right@4.2.0(transitive)

• - Removed@welcome-ui/system@4.2.0(transitive)

• - Removed@welcome-ui/utils@4.2.0(transitive)

• Updated@welcome-ui/system@^5.0.0-alpha.0

• Updated@welcome-ui/utils@^5.0.0-alpha.0