@zengenti/react-toolkit - npm Package Compare versions

Comparing version 1.0.0-beta.2 to 1.0.0-beta.3

lib/index.cjs.js

@@ -36,4 +36,4 @@ 'use strict';
 
-var css_248z = ".breadcrumbs__list {\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n}\n";
-styleInject(css_248z);
+var css_248z$1 = ".breadcrumbs__list {\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n}\n";
+styleInject(css_248z$1);
 
@@ -54,2 +54,123 @@ /**
 
+const PaginationItem = ({ className, isActive = false, updatePageIndex, pageCount, index, isHidden, }) => {
+    const pageIndex = index + 1;
+    const scrollTop = () => {
+        if (typeof window != "undefined") {
+            window.scroll({
+                top: 0,
+                behavior: "smooth",
+            });
+        }
+    };
+    return (jsxRuntime.jsxs("li", Object.assign({ className: [
+            "pagination-item",
+            isActive ? "pagination-item--active" : "pagination-item--not-active",
+            isHidden ? "pagination-item---hidden" : "",
+        ].join(" ") }, { children: [jsxRuntime.jsxs("span", Object.assign({ className: "pagination-item__text" }, { children: ["Page ", pageIndex, " of ", pageCount] })), jsxRuntime.jsxs("a", Object.assign({ href: "#", "aria-current": isActive ? "page" : "step", "aria-label": `Page ${pageIndex} of ${pageCount}`, className: `pagination-item__link`, onClick: () => {
+                    updatePageIndex(index);
+                    scrollTop();
+                } }, { children: [jsxRuntime.jsxs("span", Object.assign({ className: "sr-only" }, { children: ["Page ", pageIndex, " of ", pageCount] })), jsxRuntime.jsx("span", Object.assign({ className: "pagination-item__page-index" }, { children: pageIndex }))] }))] })));
+};
+
+const Dots = () => {
+    return jsxRuntime.jsx("li", Object.assign({ className: "dots" }, { children: "..." }));
+};
+
+var css_248z = "/* Screen Reader *Only* */\n.sr-only {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n/* End */\n/* \n* Pagination Item Default Styling\n */\n.pagination-item__link {\n  cursor: pointer;\n}\n.pagination-item--active > a,\n.pagination-item--active > a:hover {\n  cursor: auto;\n}\n/* End */\n/* \n* Hiding 'Page x of y' on Mobile\n*/\n.pagination-item--not-active {\n  display: none;\n}\n/* End */\n/* \n* Hiding Page Index\n*/\n.pagination-item__page-index {\n  display: none;\n}\n/* End */\n/* \n* Hiding <Dots/> e.g ...\n*/\n.dots {\n  display: none;\n}\n/* End */\n/* Hide Paging Link */\n.pagination-item__link {\n  display: none;\n}\n/* End */\n/*\n*  Screen >= 400px\n*/\n@media only screen and (min-width: 400px) {\n  /* \n  * Hide 'Page x of y on Screens >= 400px and Show Paging Link.\n  */\n  .pagination-item__link {\n    display: block;\n  }\n  .pagination-item__text {\n    display: none;\n  }\n  /* End */\n  /* \n  * Show the Page Index on Screens >= 400px\n  * Only Showing NONE Hidden Items.\n  */\n  .pagination-item--not-active,\n  .pagination-item__page-index {\n    display: list-item;\n  }\n  .pagination-item---hidden {\n    display: none;\n  }\n  /* End */\n  /* \n  * Show Dots on Screens >= 400px \n  */\n  .dots {\n    display: list-item;\n  }\n  /* End */\n}\n";
+styleInject(css_248z);
+
+// Hook
+function useWindowSize() {
+    // Initialize state with undefined width/height so server and client renders match
+    // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+    const [windowSize, setWindowSize] = react.useState({
+        width: 0,
+        height: 0,
+    });
+    react.useEffect(() => {
+        // Handler to call on window resize
+        function handleResize() {
+            // Set window width/height to state
+            setWindowSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        }
+        // Add event listener
+        window.addEventListener("resize", handleResize);
+        // Call handler right away so state gets updated with initial window size
+        handleResize();
+        // Remove event listener on cleanup
+        return () => window.removeEventListener("resize", handleResize);
+    }, []); // Empty array ensures that effect is only run on mount
+    return windowSize;
+}
+
+const Pagination = ({ className, pageIndex, pageCount, totalCount, pageSize, updatePageIndex, hideNext = false, hidePrevious = false, NextPageComponent, PreviousPageComponent, }) => {
+    const { width } = useWindowSize();
+    const getPaging = (width) => {
+        const minPages = width > 768 && pageCount >= 5 ? 5 : 2;
+        let Pages = [];
+        for (let i = 0; i < Math.ceil(totalCount / pageSize); i++) {
+            const isActive = i === pageIndex ? true : false;
+            const PaginationItemProps = {
+                index: i,
+                pageCount,
+                isActive,
+                updatePageIndex,
+                key: i,
+            };
+            if (minPages + 2 > pageCount) {
+                Pages.push(jsxRuntime.jsx(PaginationItem, Object.assign({}, PaginationItemProps)));
+            }
+            else if (pageIndex < minPages - 1) {
+                /* Start */
+                let isHidden = false;
+                if (i >= minPages && i < pageCount - 1)
+                    isHidden = true;
+                if (i === minPages)
+                    Pages.push(jsxRuntime.jsx(Dots, {}));
+                Pages.push(jsxRuntime.jsx(PaginationItem, Object.assign({}, PaginationItemProps, { isHidden: isHidden })));
+            }
+            else if (pageIndex < pageCount - 2 && pageIndex >= minPages - 1) {
+                /* Mid */
+                let isHidden = false;
+                if (minPages === 5) {
+                    if (i !== pageIndex &&
+                        i !== pageIndex + 1 &&
+                        i !== pageIndex + 2 &&
+                        i !== pageIndex - 1 &&
+                        i !== pageIndex - 2 &&
+                        i !== pageCount - 1 &&
+                        i !== 0)
+                        isHidden = true;
+                    if (i === pageIndex - 3 || i === pageIndex + 3)
+                        Pages.push(jsxRuntime.jsx(Dots, {}));
+                }
+                else {
+                    if (i !== pageIndex && i !== 0 && i !== pageCount - 1)
+                        isHidden = true;
+                    if (i === minPages || i === pageIndex + 1)
+                        Pages.push(jsxRuntime.jsx(Dots, {}));
+                }
+                Pages.push(jsxRuntime.jsx(PaginationItem, Object.assign({}, PaginationItemProps, { isHidden: isHidden })));
+            }
+            else {
+                /* End */
+                let isHidden = false;
+                if (i < pageCount - minPages && i !== 0)
+                    isHidden = true;
+                if (i === minPages)
+                    Pages.push(jsxRuntime.jsx(Dots, {}));
+                Pages.push(jsxRuntime.jsx(PaginationItem, Object.assign({}, PaginationItemProps, { isHidden: isHidden })));
+            }
+        }
+        return Pages;
+    };
+    const hasNext = pageIndex + 1 < pageCount && !hideNext;
+    const hasPrevious = pageIndex > 0 && !hidePrevious;
+    const Pages = getPaging(width);
+    return (jsxRuntime.jsx("div", Object.assign({ className: className, "aira-label": "Pagination" }, { children: jsxRuntime.jsxs("ul", Object.assign({ className: "pagination" }, { children: [hasPrevious && (jsxRuntime.jsx("li", Object.assign({ className: "pagination__item--previous" }, { children: jsxRuntime.jsxs("a", Object.assign({ href: "#", "aria-label": "Previous page", onClick: () => updatePageIndex(pageIndex - 1), className: "pagination__item--prev" }, { children: [PreviousPageComponent && PreviousPageComponent, !PreviousPageComponent && jsxRuntime.jsx("span", { children: "Previous page" })] })) }))), Pages, hasNext && (jsxRuntime.jsx("li", Object.assign({ className: "pagination__item--next" }, { children: jsxRuntime.jsxs("a", Object.assign({ href: "#", "aria-label": "Next page", onClick: () => updatePageIndex(pageIndex + 1), className: "pagination__item--next" }, { children: [NextPageComponent && NextPageComponent, !NextPageComponent && jsxRuntime.jsx("span", { children: "Next page" })] })) })))] })) })));
+};
+
 /** Shorten a string to a specified length, with the option to add additional string to the end. For example ellipsis '...' */
@@ -79,2 +200,3 @@ function truncateString({ string, length, endsWith = "", }) {
 exports.Breadcrumbs = Breadcrumbs;
+exports.Pagination = Pagination;
 exports.truncateString = truncateString;

lib/index.d.ts

 export * from "./components/breadcrumbs";
+export * from "./components/pagination";
 export * from "./utilities/truncateString";

lib/index.esm.js

 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Fragment } from 'react';
+import { Fragment, useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
@@ -32,4 +32,4 @@
 
-var css_248z = ".breadcrumbs__list {\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n}\n";
-styleInject(css_248z);
+var css_248z$1 = ".breadcrumbs__list {\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n}\n";
+styleInject(css_248z$1);
 
@@ -50,2 +50,123 @@ /**
 
+const PaginationItem = ({ className, isActive = false, updatePageIndex, pageCount, index, isHidden, }) => {
+    const pageIndex = index + 1;
+    const scrollTop = () => {
+        if (typeof window != "undefined") {
+            window.scroll({
+                top: 0,
+                behavior: "smooth",
+            });
+        }
+    };
+    return (jsxs("li", Object.assign({ className: [
+            "pagination-item",
+            isActive ? "pagination-item--active" : "pagination-item--not-active",
+            isHidden ? "pagination-item---hidden" : "",
+        ].join(" ") }, { children: [jsxs("span", Object.assign({ className: "pagination-item__text" }, { children: ["Page ", pageIndex, " of ", pageCount] })), jsxs("a", Object.assign({ href: "#", "aria-current": isActive ? "page" : "step", "aria-label": `Page ${pageIndex} of ${pageCount}`, className: `pagination-item__link`, onClick: () => {
+                    updatePageIndex(index);
+                    scrollTop();
+                } }, { children: [jsxs("span", Object.assign({ className: "sr-only" }, { children: ["Page ", pageIndex, " of ", pageCount] })), jsx("span", Object.assign({ className: "pagination-item__page-index" }, { children: pageIndex }))] }))] })));
+};
+
+const Dots = () => {
+    return jsx("li", Object.assign({ className: "dots" }, { children: "..." }));
+};
+
+var css_248z = "/* Screen Reader *Only* */\n.sr-only {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n/* End */\n/* \n* Pagination Item Default Styling\n */\n.pagination-item__link {\n  cursor: pointer;\n}\n.pagination-item--active > a,\n.pagination-item--active > a:hover {\n  cursor: auto;\n}\n/* End */\n/* \n* Hiding 'Page x of y' on Mobile\n*/\n.pagination-item--not-active {\n  display: none;\n}\n/* End */\n/* \n* Hiding Page Index\n*/\n.pagination-item__page-index {\n  display: none;\n}\n/* End */\n/* \n* Hiding <Dots/> e.g ...\n*/\n.dots {\n  display: none;\n}\n/* End */\n/* Hide Paging Link */\n.pagination-item__link {\n  display: none;\n}\n/* End */\n/*\n*  Screen >= 400px\n*/\n@media only screen and (min-width: 400px) {\n  /* \n  * Hide 'Page x of y on Screens >= 400px and Show Paging Link.\n  */\n  .pagination-item__link {\n    display: block;\n  }\n  .pagination-item__text {\n    display: none;\n  }\n  /* End */\n  /* \n  * Show the Page Index on Screens >= 400px\n  * Only Showing NONE Hidden Items.\n  */\n  .pagination-item--not-active,\n  .pagination-item__page-index {\n    display: list-item;\n  }\n  .pagination-item---hidden {\n    display: none;\n  }\n  /* End */\n  /* \n  * Show Dots on Screens >= 400px \n  */\n  .dots {\n    display: list-item;\n  }\n  /* End */\n}\n";
+styleInject(css_248z);
+
+// Hook
+function useWindowSize() {
+    // Initialize state with undefined width/height so server and client renders match
+    // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+    const [windowSize, setWindowSize] = useState({
+        width: 0,
+        height: 0,
+    });
+    useEffect(() => {
+        // Handler to call on window resize
+        function handleResize() {
+            // Set window width/height to state
+            setWindowSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        }
+        // Add event listener
+        window.addEventListener("resize", handleResize);
+        // Call handler right away so state gets updated with initial window size
+        handleResize();
+        // Remove event listener on cleanup
+        return () => window.removeEventListener("resize", handleResize);
+    }, []); // Empty array ensures that effect is only run on mount
+    return windowSize;
+}
+
+const Pagination = ({ className, pageIndex, pageCount, totalCount, pageSize, updatePageIndex, hideNext = false, hidePrevious = false, NextPageComponent, PreviousPageComponent, }) => {
+    const { width } = useWindowSize();
+    const getPaging = (width) => {
+        const minPages = width > 768 && pageCount >= 5 ? 5 : 2;
+        let Pages = [];
+        for (let i = 0; i < Math.ceil(totalCount / pageSize); i++) {
+            const isActive = i === pageIndex ? true : false;
+            const PaginationItemProps = {
+                index: i,
+                pageCount,
+                isActive,
+                updatePageIndex,
+                key: i,
+            };
+            if (minPages + 2 > pageCount) {
+                Pages.push(jsx(PaginationItem, Object.assign({}, PaginationItemProps)));
+            }
+            else if (pageIndex < minPages - 1) {
+                /* Start */
+                let isHidden = false;
+                if (i >= minPages && i < pageCount - 1)
+                    isHidden = true;
+                if (i === minPages)
+                    Pages.push(jsx(Dots, {}));
+                Pages.push(jsx(PaginationItem, Object.assign({}, PaginationItemProps, { isHidden: isHidden })));
+            }
+            else if (pageIndex < pageCount - 2 && pageIndex >= minPages - 1) {
+                /* Mid */
+                let isHidden = false;
+                if (minPages === 5) {
+                    if (i !== pageIndex &&
+                        i !== pageIndex + 1 &&
+                        i !== pageIndex + 2 &&
+                        i !== pageIndex - 1 &&
+                        i !== pageIndex - 2 &&
+                        i !== pageCount - 1 &&
+                        i !== 0)
+                        isHidden = true;
+                    if (i === pageIndex - 3 || i === pageIndex + 3)
+                        Pages.push(jsx(Dots, {}));
+                }
+                else {
+                    if (i !== pageIndex && i !== 0 && i !== pageCount - 1)
+                        isHidden = true;
+                    if (i === minPages || i === pageIndex + 1)
+                        Pages.push(jsx(Dots, {}));
+                }
+                Pages.push(jsx(PaginationItem, Object.assign({}, PaginationItemProps, { isHidden: isHidden })));
+            }
+            else {
+                /* End */
+                let isHidden = false;
+                if (i < pageCount - minPages && i !== 0)
+                    isHidden = true;
+                if (i === minPages)
+                    Pages.push(jsx(Dots, {}));
+                Pages.push(jsx(PaginationItem, Object.assign({}, PaginationItemProps, { isHidden: isHidden })));
+            }
+        }
+        return Pages;
+    };
+    const hasNext = pageIndex + 1 < pageCount && !hideNext;
+    const hasPrevious = pageIndex > 0 && !hidePrevious;
+    const Pages = getPaging(width);
+    return (jsx("div", Object.assign({ className: className, "aira-label": "Pagination" }, { children: jsxs("ul", Object.assign({ className: "pagination" }, { children: [hasPrevious && (jsx("li", Object.assign({ className: "pagination__item--previous" }, { children: jsxs("a", Object.assign({ href: "#", "aria-label": "Previous page", onClick: () => updatePageIndex(pageIndex - 1), className: "pagination__item--prev" }, { children: [PreviousPageComponent && PreviousPageComponent, !PreviousPageComponent && jsx("span", { children: "Previous page" })] })) }))), Pages, hasNext && (jsx("li", Object.assign({ className: "pagination__item--next" }, { children: jsxs("a", Object.assign({ href: "#", "aria-label": "Next page", onClick: () => updatePageIndex(pageIndex + 1), className: "pagination__item--next" }, { children: [NextPageComponent && NextPageComponent, !NextPageComponent && jsx("span", { children: "Next page" })] })) })))] })) })));
+};
+
 /** Shorten a string to a specified length, with the option to add additional string to the end. For example ellipsis '...' */
@@ -74,2 +195,2 @@ function truncateString({ string, length, endsWith = "", }) {
 
-export { Breadcrumbs, truncateString };
+export { Breadcrumbs, Pagination, truncateString };

package.json

 {
   "name": "@zengenti/react-toolkit",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "description": "Common components and utilites used on React projects",
@@ -59,2 +59,3 @@ "main": "lib/index.cjs.js",
     "rollup-plugin-postcss": "^4.0.1",
+    "storybook-addon-state": "^1.0.3",
     "ts-jest": "^27.1.4",
@@ -61,0 +62,0 @@ "tslib": "^2.3.1",

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

Improved metrics

Total package byte prevSize

26812

increased by167.91%

Number of package files

15

increased by50%

Lines of code

449

increased by170.48%

Worsened metrics

Dev dependency count

34

increased by3.03%

Number of low supply chain risk alerts

2

increased byInfinity%

No dependency changes