Merge branch 'master' into add-template

TheSGJ · Oct 16, 2023 · 5a240e0 · 5a240e0
2 parents 382c749 + 0f90d94
commit 5a240e0
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nextjs-toploader",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "A Next.js Top Loading Bar component made using nprogress, works with Next.js 13.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/index.tsx b/src/index.tsx
@@ -66,6 +66,12 @@ export type NextTopLoaderProps = {
    * <div class="spinner" role="spinner"><div class="spinner-icon"></div></div>"
    */
   template?: string;
+   /**
+   * Defines zIndex for the TopLoader.
+   * @default 1600
+   *
+   */
+  zIndex?: number;
 };
 
 const NextTopLoader = ({
@@ -79,6 +85,7 @@ const NextTopLoader = ({
   speed,
   shadow,
   template,
+  zIndex = 1600,
 }: NextTopLoaderProps) => {
   const defaultColor = '#29d';
   const defaultHeight = 3;
@@ -87,25 +94,16 @@ const NextTopLoader = ({
   const height = propHeight ?? defaultHeight;
 
   // Any falsy (except undefined) will disable the shadow
-  const boxShadow = !shadow && shadow !== undefined
-    ? ''
-    : shadow
+  const boxShadow =
+    !shadow && shadow !== undefined
+      ? ''
+      : shadow
       ? `box-shadow:${shadow}`
       : `box-shadow:0 0 10px ${color},0 0 5px ${color}`;
 
   const styles = (
     <style>
-      {`#nprogress{pointer-events:none}#nprogress .bar{background:${
-        color
-      };position:fixed;z-index:1031;top:0;left:0;width:100%;height:${
-        height
-      }px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;${
-        boxShadow
-      };opacity:1;-webkit-transform:rotate(3deg) translate(0px,-4px);-ms-transform:rotate(3deg) translate(0px,-4px);transform:rotate(3deg) translate(0px,-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:2px solid transparent;border-top-color:${
-        color
-      };border-left-color:${
-        color
-      };border-radius:50%;-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}`}
+      {`#nprogress{pointer-events:none}#nprogress .bar{background:${color};position:fixed;z-index:${zIndex};top:0;left:0;width:100%;height:${height}px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;${boxShadow};opacity:1;-webkit-transform:rotate(3deg) translate(0px,-4px);-ms-transform:rotate(3deg) translate(0px,-4px);transform:rotate(3deg) translate(0px,-4px)}#nprogress .spinner{display:block;position:fixed;z-index:${zIndex};top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:2px solid transparent;border-top-color:${color};border-left-color:${color};border-radius:50%;-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}`}
     </style>
   );
 
@@ -156,13 +154,15 @@ const NextTopLoader = ({
         if (anchor) {
           const currentUrl = window.location.href;
           const newUrl = (anchor as HTMLAnchorElement).href;
-          const isExternalLink = (anchor as HTMLAnchorElement).target === "_blank";
+          const isExternalLink = (anchor as HTMLAnchorElement).target === '_blank';
+          const isBlob = newUrl.startsWith('blob:');
           const isAnchor = isAnchorOfCurrentUrl(currentUrl, newUrl);
-          if (newUrl === currentUrl || isAnchor || isExternalLink) {
+
+          if (newUrl === currentUrl || isAnchor || isExternalLink || isBlob) {
             NProgress.start();
             NProgress.done();
             [].forEach.call(npgclass, function (el: Element) {
-              el.classList.remove("nprogress-busy");
+              el.classList.remove('nprogress-busy');
             });
           } else {
             NProgress.start();
@@ -171,7 +171,7 @@ const NextTopLoader = ({
               history.pushState = function () {
                 NProgress.done();
                 [].forEach.call(npgclass, function (el: Element) {
-                  el.classList.remove("nprogress-busy");
+                  el.classList.remove('nprogress-busy');
                 });
                 // eslint-disable-next-line prefer-rest-params, @typescript-eslint/no-explicit-any
                 return pushState.apply(history, arguments as any);
@@ -188,11 +188,11 @@ const NextTopLoader = ({
     }
 
     // Add the global click event listener
-    document.addEventListener("click", handleClick);
+    document.addEventListener('click', handleClick);
 
     // Clean up the global click event listener when the component is unmounted
     return () => {
-      document.removeEventListener("click", handleClick);
+      document.removeEventListener('click', handleClick);
     };
   }, []);
 
@@ -209,9 +209,7 @@ NextTopLoader.propTypes = {
   initialPosition: PropTypes.number,
   easing: PropTypes.string,
   speed: PropTypes.number,
-  shadow: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.bool,
-  ]),
   template: PropTypes.string,
+  shadow: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  zIndex: PropTypes.number,
 };
diff --git a/tsup.config.ts b/tsup.config.ts
@@ -1,6 +1,6 @@
 import { Options } from 'tsup';
 export const tsup: Options = {
-  target: 'esnext',
+  target: 'es6',
   clean: true,
   dts: true,
   entry: ['src/index.tsx'],