react-headless-pagination - npm Package Compare versions

Comparing version 0.3.0 to 1.0.0

dist/Pagination/Pagination.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from "react";
 import { IPaginationProps, ButtonProps, PageButtonProps } from "./Pagination.d";
@@ -7,3 +7,16 @@ export declare const PrevButton: ({ className, children, dataTestId, ...buttonProps }: ButtonProps) => JSX.Element;
 export declare const Pagination: {
-    (paginationProps: IPaginationProps): JSX.Element;
+    ({ dataTestId, ...paginationProps }: {
+        currentPage: number;
+        setCurrentPage: (page: number) => void;
+        truncableText?: string | undefined;
+        truncableClassName?: string | undefined;
+    } & {
+        totalPages: number;
+        edgePageCount: number;
+        middlePagesSiblingCount: number;
+        className?: string | undefined;
+        children?: React.ReactNode;
+    } & {
+        dataTestId?: string | undefined;
+    }): JSX.Element;
     PrevButton: ({ className, children, dataTestId, ...buttonProps }: ButtonProps) => JSX.Element;
@@ -10,0 +23,0 @@ NextButton: ({ className, children, dataTestId, ...buttonProps }: ButtonProps) => JSX.Element;

dist/react-headless-pagination.cjs.development.js

@@ -165,3 +165,3 @@ 'use strict';
       truncableClassName = pagination.truncableClassName;
-  return isPreviousTruncable && prev === true || isNextTruncable && !prev ? React.createElement("span", {
+  return isPreviousTruncable && prev === true || isNextTruncable && !prev ? React.createElement("li", {
     className: truncableClassName || undefined
@@ -173,3 +173,3 @@ }, truncableText) : null;
   var _ref4$as = _ref4.as,
-      as = _ref4$as === void 0 ? React.createElement("button", null) : _ref4$as,
+      as = _ref4$as === void 0 ? React.createElement("a", null) : _ref4$as,
       className = _ref4.className,
@@ -185,10 +185,11 @@ dataTestIdActive = _ref4.dataTestIdActive,
 
-    return React.createElement(as.type, Object.assign({
-      key: page,
-      "data-testid": classNames((_classNames = {}, _classNames[dataTestIdActive + "-page-button"] = dataTestIdActive && pagination.currentPage + 1 === page, _classNames[dataTestIdInactive + "-page-button-" + page] = dataTestIdActive && pagination.currentPage + 1 !== page, _classNames)) || undefined,
+    return React.createElement("li", {
+      key: page
+    }, React.createElement(as.type, Object.assign({
+      "data-testid": classNames((_classNames = {}, _classNames["" + dataTestIdActive] = dataTestIdActive && pagination.currentPage + 1 === page, _classNames[dataTestIdInactive + "-" + page] = dataTestIdActive && pagination.currentPage + 1 !== page, _classNames)) || undefined,
       onClick: function onClick() {
         return pagination.setCurrentPage(page - 1);
       },
-      className: classNames(className, pagination.currentPage + 1 === page ? activeClassName : inactiveClassName) || undefined
-    }, as.props), page);
+      className: classNames(className, pagination.currentPage + 1 === page ? activeClassName : inactiveClassName)
+    }, as.props), page));
   };
@@ -215,3 +216,6 @@
 var PaginationContext = /*#__PURE__*/React.createContext(defaultState);
-var Pagination = function Pagination(paginationProps) {
+var Pagination = function Pagination(_ref5) {
+  var dataTestId = _ref5.dataTestId,
+      paginationProps = _objectWithoutPropertiesLoose(_ref5, ["dataTestId"]);
+
   var pagination = usePagination(paginationProps);
@@ -221,3 +225,4 @@ return React.createElement(PaginationContext.Provider, {
   }, React.createElement("div", {
-    className: paginationProps.className
+    className: paginationProps.className,
+    "data-testid": dataTestId
   }, paginationProps.children));
@@ -224,0 +229,0 @@ };

dist/react-headless-pagination.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")),n=e(require("classnames"));function a(e,t){if(null==e)return{};var n,a,r={},s=Object.keys(e);for(a=0;a<s.length;a++)t.indexOf(n=s[a])>=0||(r[n]=e[n]);return r}var r=function(e){var n=e.className,r=e.children,s=e.dataTestId,u=a(e,["className","children","dataTestId"]),c=t.useContext(l);return t.createElement("button",Object.assign({className:n},u,{onClick:function(){c.currentPage+1>1&&c.setCurrentPage(c.currentPage-1)},disabled:0===c.currentPage,"data-testid":s}),r)},s=function(e){var n=e.className,r=e.children,s=e.dataTestId,u=a(e,["className","children","dataTestId"]),c=t.useContext(l);return t.createElement("button",Object.assign({className:n},u,{onClick:function(){c.currentPage+1<c.pages.length&&c.setCurrentPage(c.currentPage+1)},disabled:c.currentPage===c.pages.length-1,"data-testid":s}),r)},u=function(e){var n=e.prev,a=t.useContext(l);return a.isPreviousTruncable&&!0===n||a.isNextTruncable&&!n?t.createElement("span",{className:a.truncableClassName||void 0},a.truncableText):null},c=function(e){var a=e.as,r=void 0===a?t.createElement("button",null):a,s=e.className,c=e.dataTestIdActive,i=e.dataTestIdInactive,o=e.activeClassName,g=e.inactiveClassName,d=t.useContext(l),P=function(e){var a;return t.createElement(r.type,Object.assign({key:e,"data-testid":n((a={},a[c+"-page-button"]=c&&d.currentPage+1===e,a[i+"-page-button-"+e]=c&&d.currentPage+1!==e,a))||void 0,onClick:function(){return d.setCurrentPage(e-1)},className:n(s,d.currentPage+1===e?o:g)||void 0},r.props),e)};return t.createElement(t.Fragment,null,d.previousPages.map(P),t.createElement(u,{prev:!0}),d.middlePages.map(P),t.createElement(u,null),d.nextPages.map(P))},l=t.createContext({currentPage:0,setCurrentPage:function(){},truncableText:"...",truncableClassName:"",pages:[],hasPreviousPage:!1,hasNextPage:!1,previousPages:[],isPreviousTruncable:!1,middlePages:[],isNextTruncable:!1,nextPages:[]}),i=function(e){var n,a,r,s,u,c,i,o,g,d,P,m,v,f,b,p,x,N,C,h,T,E=(a=(n=e).currentPage,r=n.setCurrentPage,u=void 0===(s=n.truncableText)?"...":s,i=void 0===(c=n.truncableClassName)?"":c,o=n.totalPages,g=n.edgePageCount,d=n.middlePagesSiblingCount,P=Array(o).fill(0).map((function(e,t){return t+1})),m=a>1,v=a<o,f=a<=d,b=a+d>=o,p=t.useMemo((function(){var e=2*d+1;return f?P.slice(0,e):b?P.slice(-e):P.slice(a-d,a+d+1)}),[a,P]),x=t.useMemo((function(){return f||P.slice(0,p[0]-1).length<1?[]:P.slice(0,g).filter((function(e){return!p.includes(e)}))}),[a,P]),N=t.useMemo((function(){return P.slice(p[p.length-1],P[P.length])}),[P,p]),C=t.useMemo((function(){return b||N.length<1?[]:P.slice(P.length-g,P.length).filter((function(e){return!p.includes(e)}))}),[p,P]),h=t.useMemo((function(){return p[0]>x[x.length-1]+1}),[x,p]),T=t.useMemo((function(){return p[p.length-1]+1<C[0]}),[C,p]),{currentPage:a,setCurrentPage:r,truncableText:u,truncableClassName:i,pages:P,hasPreviousPage:m,hasNextPage:v,previousPages:x,isPreviousTruncable:h,middlePages:p,isNextTruncable:T,nextPages:C});return t.createElement(l.Provider,{value:E},t.createElement("div",{className:e.className},e.children))};i.PrevButton=r,i.NextButton=s,i.PageButton=c,exports.NextButton=s,exports.PageButton=c,exports.Pagination=i,exports.PrevButton=r;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")),a=e(require("classnames"));function n(e,t){if(null==e)return{};var a,n,r={},s=Object.keys(e);for(n=0;n<s.length;n++)t.indexOf(a=s[n])>=0||(r[a]=e[a]);return r}var r=function(e){var a=e.className,r=e.children,s=e.dataTestId,u=n(e,["className","children","dataTestId"]),c=t.useContext(l);return t.createElement("button",Object.assign({className:a},u,{onClick:function(){c.currentPage+1>1&&c.setCurrentPage(c.currentPage-1)},disabled:0===c.currentPage,"data-testid":s}),r)},s=function(e){var a=e.className,r=e.children,s=e.dataTestId,u=n(e,["className","children","dataTestId"]),c=t.useContext(l);return t.createElement("button",Object.assign({className:a},u,{onClick:function(){c.currentPage+1<c.pages.length&&c.setCurrentPage(c.currentPage+1)},disabled:c.currentPage===c.pages.length-1,"data-testid":s}),r)},u=function(e){var a=e.prev,n=t.useContext(l);return n.isPreviousTruncable&&!0===a||n.isNextTruncable&&!a?t.createElement("li",{className:n.truncableClassName||void 0},n.truncableText):null},c=function(e){var n=e.as,r=void 0===n?t.createElement("a",null):n,s=e.className,c=e.dataTestIdActive,i=e.dataTestIdInactive,o=e.activeClassName,g=e.inactiveClassName,d=t.useContext(l),P=function(e){var n;return t.createElement("li",{key:e},t.createElement(r.type,Object.assign({"data-testid":a((n={},n[""+c]=c&&d.currentPage+1===e,n[i+"-"+e]=c&&d.currentPage+1!==e,n))||void 0,onClick:function(){return d.setCurrentPage(e-1)},className:a(s,d.currentPage+1===e?o:g)},r.props),e))};return t.createElement(t.Fragment,null,d.previousPages.map(P),t.createElement(u,{prev:!0}),d.middlePages.map(P),t.createElement(u,null),d.nextPages.map(P))},l=t.createContext({currentPage:0,setCurrentPage:function(){},truncableText:"...",truncableClassName:"",pages:[],hasPreviousPage:!1,hasNextPage:!1,previousPages:[],isPreviousTruncable:!1,middlePages:[],isNextTruncable:!1,nextPages:[]}),i=function(e){var a,r,s,u,c,i,o,g,d,P,m,v,f,b,x,N,p,C,h,T,E,I=e.dataTestId,M=n(e,["dataTestId"]),j=(r=(a=M).currentPage,s=a.setCurrentPage,c=void 0===(u=a.truncableText)?"...":u,o=void 0===(i=a.truncableClassName)?"":i,g=a.totalPages,d=a.edgePageCount,P=a.middlePagesSiblingCount,m=Array(g).fill(0).map((function(e,t){return t+1})),v=r>1,f=r<g,b=r<=P,x=r+P>=g,N=t.useMemo((function(){var e=2*P+1;return b?m.slice(0,e):x?m.slice(-e):m.slice(r-P,r+P+1)}),[r,m]),p=t.useMemo((function(){return b||m.slice(0,N[0]-1).length<1?[]:m.slice(0,d).filter((function(e){return!N.includes(e)}))}),[r,m]),C=t.useMemo((function(){return m.slice(N[N.length-1],m[m.length])}),[m,N]),h=t.useMemo((function(){return x||C.length<1?[]:m.slice(m.length-d,m.length).filter((function(e){return!N.includes(e)}))}),[N,m]),T=t.useMemo((function(){return N[0]>p[p.length-1]+1}),[p,N]),E=t.useMemo((function(){return N[N.length-1]+1<h[0]}),[h,N]),{currentPage:r,setCurrentPage:s,truncableText:c,truncableClassName:o,pages:m,hasPreviousPage:v,hasNextPage:f,previousPages:p,isPreviousTruncable:T,middlePages:N,isNextTruncable:E,nextPages:h});return t.createElement(l.Provider,{value:j},t.createElement("div",{className:M.className,"data-testid":I},M.children))};i.PrevButton=r,i.NextButton=s,i.PageButton=c,exports.NextButton=s,exports.PageButton=c,exports.Pagination=i,exports.PrevButton=r;
 //# sourceMappingURL=react-headless-pagination.cjs.production.min.js.map

dist/react-headless-pagination.esm.js

@@ -159,3 +159,3 @@ import React from 'react';
       truncableClassName = pagination.truncableClassName;
-  return isPreviousTruncable && prev === true || isNextTruncable && !prev ? React.createElement("span", {
+  return isPreviousTruncable && prev === true || isNextTruncable && !prev ? React.createElement("li", {
     className: truncableClassName || undefined
@@ -167,3 +167,3 @@ }, truncableText) : null;
   var _ref4$as = _ref4.as,
-      as = _ref4$as === void 0 ? React.createElement("button", null) : _ref4$as,
+      as = _ref4$as === void 0 ? React.createElement("a", null) : _ref4$as,
       className = _ref4.className,
@@ -179,10 +179,11 @@ dataTestIdActive = _ref4.dataTestIdActive,
 
-    return React.createElement(as.type, Object.assign({
-      key: page,
-      "data-testid": classNames((_classNames = {}, _classNames[dataTestIdActive + "-page-button"] = dataTestIdActive && pagination.currentPage + 1 === page, _classNames[dataTestIdInactive + "-page-button-" + page] = dataTestIdActive && pagination.currentPage + 1 !== page, _classNames)) || undefined,
+    return React.createElement("li", {
+      key: page
+    }, React.createElement(as.type, Object.assign({
+      "data-testid": classNames((_classNames = {}, _classNames["" + dataTestIdActive] = dataTestIdActive && pagination.currentPage + 1 === page, _classNames[dataTestIdInactive + "-" + page] = dataTestIdActive && pagination.currentPage + 1 !== page, _classNames)) || undefined,
       onClick: function onClick() {
         return pagination.setCurrentPage(page - 1);
       },
-      className: classNames(className, pagination.currentPage + 1 === page ? activeClassName : inactiveClassName) || undefined
-    }, as.props), page);
+      className: classNames(className, pagination.currentPage + 1 === page ? activeClassName : inactiveClassName)
+    }, as.props), page));
   };
@@ -209,3 +210,6 @@
 var PaginationContext = /*#__PURE__*/React.createContext(defaultState);
-var Pagination = function Pagination(paginationProps) {
+var Pagination = function Pagination(_ref5) {
+  var dataTestId = _ref5.dataTestId,
+      paginationProps = _objectWithoutPropertiesLoose(_ref5, ["dataTestId"]);
+
   var pagination = usePagination(paginationProps);
@@ -215,3 +219,4 @@ return React.createElement(PaginationContext.Provider, {
   }, React.createElement("div", {
-    className: paginationProps.className
+    className: paginationProps.className,
+    "data-testid": dataTestId
   }, paginationProps.children));
@@ -218,0 +223,0 @@ };

package.json

 {
   "name": "react-headless-pagination",
   "author": "Thijs Smudde",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "license": "MIT",
@@ -6,0 +6,0 @@ "main": "dist/index.js",

README.md

@@ -40,9 +40,7 @@ # React Headless Pagination
   <>
-    Current page: {page}
+    Current page: {page + 1}
     <Pagination
+      {...args}
       currentPage={page}
       setCurrentPage={handlePageChange}
-      totalPages={10}
-      edgePageCount={2}
-      middlePagesSiblingCount={2}
       className=""
@@ -54,9 +52,11 @@ truncableText="..."
 
-      <div className="flex items-center justify-center flex-grow">
-        <Pagination.PageButton
-          activeClassName=""
-          inactiveClassName=""
-          className=""
-        />
-      </div>
+      <nav className="flex justify-center flex-grow">
+        <ul className="flex items-center">
+          <Pagination.PageButton
+            activeClassName=""
+            inactiveClassName=""
+            className=""
+          />
+        </ul>
+      </nav>
 
@@ -151,2 +151,9 @@ <Pagination.NextButton className="">Next</Pagination.NextButton>
 
+### `as`
+
+Type: `React.ReactElement`
+Default: <a />
+
+Provide a custom React Element, such as a `next/link` component.
+
 ### `className`
@@ -156,5 +163,17 @@
 
+### `dataTestIdActive`
+
+Type: `string`
+
+data-testid in case the page button is active.
+
+### `dataTestIdInactive`
+
+Type: `string`
+
+data-testid in case the page button is active.
+
 ### `activeClassName`
 
-Type: `boolean`
+Type: `string`
 
@@ -165,3 +184,3 @@ Styles in case the page button is active.
 
-Type: `boolean`
+Type: `string`
 
@@ -172,4 +191,4 @@ Styles in case the page button is inactive.
 
-- [fullhdpixel](https://github.com/fullhdpixel)
+- [Thijs Smudde](https://github.com/thijssmudde)
 
 Taken inspiration from [@makotot/paginated](https://github.com/makotot/GhostUI).

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Total package byte prevSize

69433

increased by1.88%

Lines of code

495

increased by4.21%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

189

increased by11.18%

No dependency changes