Merge pull request #27 from amandeeptherockstar/fix-zIndex-via-props

Added the provision to configure z index via props
TheSGJ · Oct 16, 2023 · 0f90d94 · 0f90d94
2 parents 5854c1f + c2d04a2
commit 0f90d94
Showing 1 changed file with 20 additions and 24 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -60,7 +60,13 @@ export type NextTopLoaderProps = {
    * @ you can disable it by setting it to `false`
    */
   shadow?: string | false;
-}
+  /**
+   * Defines zIndex for the TopLoader.
+   * @default 1600
+   *
+   */
+  zIndex?: number;
+};
 
 const NextTopLoader = ({
   color: propColor,
@@ -72,6 +78,7 @@ const NextTopLoader = ({
   easing,
   speed,
   shadow,
+  zIndex = 1600,
 }: NextTopLoaderProps) => {
   const defaultColor = '#29d';
   const defaultHeight = 3;
@@ -80,25 +87,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>
   );
 
@@ -146,15 +144,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 || isBlob) {
             NProgress.start();
             NProgress.done();
             [].forEach.call(npgclass, function (el: Element) {
-              el.classList.remove("nprogress-busy");
+              el.classList.remove('nprogress-busy');
             });
           } else {
             NProgress.start();
@@ -163,7 +161,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);
@@ -180,11 +178,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);
     };
   }, []);
 
@@ -201,8 +199,6 @@ NextTopLoader.propTypes = {
   initialPosition: PropTypes.number,
   easing: PropTypes.string,
   speed: PropTypes.number,
-  shadow: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.bool,
-  ]),
+  shadow: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  zIndex: PropTypes.number,
 };