react-page-loading-bar 1.0.8 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-page-loading-bar",
-    "version": "1.0.8",
+    "version": "1.0.9",
     "description": "A react top loading bar component for page loads",
     "author": {
         "name": "SyntaxisCS",
@@ -9,11 +9,8 @@
     "type": "module",
     "source": "src/index.ts",
     "main": "./build/index.js",
-    "module": "./build/index.module.js",
-    "exports": {
-        "require": "./dist/index.cjs",
-        "default": "./dist/index.modern.js"
-    },
+    "module": "./build/index.modern.js",
+    "unpkg": "./build/index.umd.js",
     "types": "build/index.d.ts",
     "scripts": {
         "compile": "tsc",

package/build/index.module.js

@@ -1,2 +0,0 @@
-import t,{useRef as e,useEffect as n,forwardRef as r,useState as i,useImperativeHandle as o}from"react";function a(){return(a=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)({}).hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t}).apply(null,arguments)}var c=function(t){return!!(Array.isArray(t)&&t.length>1)&&"linear-gradient(to right, "+t.join(", ")+")"},u=function(t){return/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(t)},s={top:0,left:0,width:"100%",zIndex:9800,height:"100%",position:"fixed",overflow:"hidden"},l={width:"0%",height:"100%",transition:"all 0.3s ease"},v={left:"-10rem",height:"100%",position:"absolute",transition:"all 0.3s ease",transform:"rotate(3deg) translate(0, -4px)",boxShadow:"0 0 10px var(--color), 0 0 5px var(--color)"},f=r(function(r,f){var d,h,m,p=r.progress,g=r.color,w=void 0===g?"purple":g,y=r.background,b=void 0===y?"transparent":y,x=r.shadow,T=void 0===x||x,S=r.height,A=void 0===S?2:S,N=r.onLoaderFinished,j=r.transitionTime,k=void 0===j?300:j,E=r.waitingTime,F=void 0===E?1e3:E,I=r.className,M=void 0===I?"":I,O=r.containerClassName,R=void 0===O?"":O,P=r.style,z=void 0===P?{}:P,C=r.containerStyle,L=void 0===C?{}:C,$=r.shadowStyle,q=void 0===$?{}:$,B=i(0),D=B[0],G=B[1],H=i(!1),J=H[0],K=H[1],Q=i(!1),U=Q[0],V=Q[1],W=i(a({},l,{height:A,width:D+"%",transition:"all "+k+"ms ease-out",background:c(w)||(u(w)?w:"purple")},z)),X=W[0],Y=W[1],Z=i(a({},s,{height:A,background:b},L))[0],_=e(!1),tt=e({active:!1,refreshRate:1e3}),et=e({active:!1,value:0});o(f,function(){return{continuousStart:function(t,e){void 0===t&&(t=10),void 0===e&&(e=1e3),J||(tt.current={active:!0,refreshRate:e},G(t),nt(t),V(!1))},staticStart:function(t){void 0===t&&(t=30),J||(et.current={active:!0,value:t},G(t),nt(t),V(!1))},complete:function(){J||(G(100),nt(100),V(!0),tt.current.active=!1,et.current.active=!1)},getProgress:function(){return D}}}),n(function(){void 0!==p&&(K(!0),G(p))},[p]),n(function(){if(U&&D>=100){var t=setTimeout(function(){N&&N(),G(0),V(!1)},F);return function(){return clearTimeout(t)}}},[U,D,F,N]),d=function(){if(tt.current.active&&!U){var t=Math.floor(10*Math.random()+1);G(function(e){return Math.min(e+t,100)}),D+t>=100&&(tt.current.active=!1,V(!0))}},h=tt.current.active?tt.current.refreshRate:null,m=e(function(){}),n(function(){m.current=d}),n(function(){},[void 0,h]),n(function(){if(null!==h){var t=setInterval(m.current,h);return function(){return clearInterval(t)}}},[h]);var nt=function(t){t>=100?(Y(a({},X,{width:"100%"})),setTimeout(function(){_&&(Y(a({},X,{opacity:0,width:"100%",transition:"all "+k+"ms ease-out",color:c(w)||(u(w)?w:"purple")})),setTimeout(function(){_&&(tt.current.active&&(tt.current=a({},tt.current,{active:!1}),G(0),nt(0)),et.current.active&&(et.current=a({},et.current,{active:!1}),G(0),nt(0)),N&&N(),G(0),nt(0))},k))},F)):Y(function(e){return a({},e,{width:t+"%",opacity:1,transition:"all "+k+"ms ease-out"})})};return n(function(){return _.current=!0,function(){_.current=!1}},[]),t.createElement("div",{style:Z,className:R},t.createElement("div",{style:X,className:M}," "),T&&t.createElement("div",{style:a({},v,q)}))});export default f;
-//# sourceMappingURL=index.module.js.map

package/build/index.module.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.module.js","sources":["../src/utils/colorUtils.ts","../src/styles/styles.ts","../src/components/LoadingBar.tsx","../src/hooks/useInterval.ts","../src/utils/randomUtils.ts"],"sourcesContent":["export const isGradient = (color: string | string[]): string | false => {\n    if (Array.isArray(color) && color.length > 1) {\n        return `linear-gradient(to right, ${color.join(\", \")})`;\n    }\n    return false;\n};\n\nexport const isValidHex = (color: string): boolean => (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color));","const baseStyles: Record<string, React.CSSProperties> = {\n    container: {\n        top: 0,\n        left: 0,\n        width: \"100%\",\n        zIndex: 9800,\n        height: \"100%\",\n        position: \"fixed\",\n        overflow: \"hidden\",\n    },\n    loader: {\n        width: \"0%\",\n        height: \"100%\",\n        transition: \"all 0.3s ease\",\n    },\n    shadow: {\n        left: \"-10rem\",\n        height: \"100%\",\n        position: \"absolute\",\n        transition: \"all 0.3s ease\",\n        transform: \"rotate(3deg) translate(0, -4px)\",\n        boxShadow: \"0 0 10px var(--color), 0 0 5px var(--color)\",\n    }\n};\n\nexport default baseStyles;","import React, { useEffect, useState, forwardRef, useRef, useImperativeHandle } from \"react\";\n\n// Hooks\nimport { useInterval } from \"../hooks/useInterval\";\n\n// Utils\nimport { randomInt } from \"../utils/randomUtils\";\nimport { isGradient, isValidHex } from \"../utils/colorUtils\";\n\n// Styles\nimport baseStyles from \"../styles/styles\";\n\n// Types\nimport type { LoadingBarRef, LoadingBarProps } from \"../../types\";\n\nconst LoadingBar = forwardRef<LoadingBarRef, LoadingBarProps>(\n    (\n        {\n            progress,\n            color = \"purple\",\n            background = \"transparent\",\n            shadow = true,\n            height = 2,\n            onLoaderFinished,\n            transitionTime = 300,\n            waitingTime = 1000,\n            className = \"\",\n            containerClassName = \"\",\n            style = {},\n            containerStyle = {},\n            shadowStyle = {},\n        },\n        ref\n    ) => {\n        // States\n        const [localProgress, setLocalProgress] = useState<number>(0);\n        const [usingProps, setUsingProps] = useState<boolean>(false);\n        const [isComplete, setIsComplete] = useState<boolean>(false);\n\n        // Style states\n        const [loaderStyle, setLoaderStyle] = useState<React.CSSProperties>({\n            ...baseStyles.loader,\n            height,\n            width: `${localProgress}%`,\n            transition: `all ${transitionTime}ms ease-out`,\n            background: isGradient(color) || (isValidHex(color as string) ? (color as string) : \"purple\"),\n            ...style,\n        });\n\n        const [containerStyles, setContainerStyles] = useState<React.CSSProperties>({\n            ...baseStyles.container,\n            height,\n            background,\n            ...containerStyle,\n        })\n\n        // Refs\n        const isMounted = useRef<boolean>(false);\n\n        const continuous = useRef<{ active: boolean; refreshRate: number }>({\n            active: false,\n            refreshRate: 1000,\n        });\n        const staticStart = useRef<{ active: boolean; value: number }>({\n            active: false,\n            value: 0,\n        });\n\n        useImperativeHandle(ref, () => ({\n            continuousStart(startingValue = 10, refreshRate = 1000) {\n                if (usingProps) return;\n                continuous.current = { active: true, refreshRate };\n                setLocalProgress(startingValue);\n                checkIfFull(startingValue);\n                setIsComplete(false);\n            },\n            staticStart(startingValue = 30) {\n                if (usingProps) return;\n                staticStart.current = { active: true, value: startingValue };\n                setLocalProgress(startingValue);\n                checkIfFull(startingValue);\n                setIsComplete(false);\n            },\n            complete() {\n                if (usingProps) return;\n                setLocalProgress(100);\n                checkIfFull(100);\n                setIsComplete(true);\n                continuous.current.active = false;\n                staticStart.current.active = false;\n            },\n            getProgress() {\n                return localProgress;\n            },\n        }));\n\n        useEffect(() => {\n            if (progress !== undefined) {\n                setUsingProps(true);\n                setLocalProgress(progress);\n            }\n        }, [progress]);\n\n        useEffect(() => {\n            if (isComplete && localProgress >= 100) {\n                const timeoutId = setTimeout(() => {\n                    if (onLoaderFinished) onLoaderFinished();\n                    setLocalProgress(0);\n                    setIsComplete(false);\n                }, waitingTime);\n\n                return () => clearTimeout(timeoutId);\n            }\n        }, [isComplete, localProgress, waitingTime, onLoaderFinished]);\n\n        useInterval(() => {\n            if (continuous.current.active && !isComplete) {\n                const increment = randomInt(1, 10);\n                setLocalProgress((prev) => Math.min(prev + increment, 100));\n                if (localProgress + increment >= 100) {\n                    continuous.current.active = false;\n                    setIsComplete(true);\n                }\n            }\n        }, continuous.current.active ? continuous.current.refreshRate : null);\n\n        // Helpers\n        const checkIfFull = (progress: number) => {\n            if (progress >= 100) {\n                setLoaderStyle({\n                    ...loaderStyle,\n                    width: \"100%\"\n                });\n\n                setTimeout(() => {\n                    if (!isMounted) return;\n\n                    setLoaderStyle({\n                        ...loaderStyle,\n                        opacity: 0,\n                        width: \"100%\",\n                        transition: `all ${transitionTime}ms ease-out`,\n                        color: isGradient(color) || (isValidHex(color as string) ? (color as string) : \"purple\")\n                    });\n\n                    setTimeout(() => {\n                        if (!isMounted) return;\n\n                        // Handle continuous start\n                        if (continuous.current.active) {\n\n                            continuous.current = {\n                                ...continuous.current,\n                                active: false\n                            };\n\n                            setLocalProgress(0);\n                            checkIfFull(0);\n                        }\n\n                        // Handle static start\n                        if (staticStart.current.active) {\n\n                            staticStart.current = {\n                                ...staticStart.current,\n                                active: false\n                            };\n\n                            setLocalProgress(0);\n                            checkIfFull(0);\n                        }\n\n                        if (onLoaderFinished) onLoaderFinished();\n                        setLocalProgress(0);\n                        checkIfFull(0);\n                    }, transitionTime);\n                }, waitingTime);\n            } else {\n                setLoaderStyle((prev) => (\n                    {\n                        ...prev,\n                        width: `${progress}%`,\n                        opacity: 1,\n                        transition: `all ${transitionTime}ms ease-out`,\n                    }\n                ));\n            }\n        };\n\n        // Handle mount\n        useEffect(() => {\n            isMounted.current = true;\n            return () => {\n                isMounted.current = false;\n            }\n        }, []);\n\n        return (\n            <div style={containerStyles} className={containerClassName} >\n                <div style={loaderStyle} className={className} > </div>\n                {shadow && <div style={{ ...baseStyles.shadow, ...shadowStyle }} />}\n            </div>\n        );\n    }\n);\n\nexport default LoadingBar;","import { useEffect, useRef } from \"react\";\n\nexport const useInterval = (\n    callback: () => void,\n    delay: number | null,\n    immediate?: boolean\n) => {\n    const savedCallback = useRef(() => { });\n\n    useEffect(() => {\n        savedCallback.current = callback;\n    });\n\n    useEffect(() => {\n        if (immediate && delay !== null) {\n            savedCallback.current();\n        }\n    }, [immediate, delay]);\n\n    useEffect(() => {\n        if (delay === null) return;\n        const id = setInterval(savedCallback.current, delay);\n        return () => clearInterval(id);\n    }, [delay]);\n};","const randomValue = (min: number, max: number): number => (Math.random() * (max - min + 1) + min);\n\nexport const randomInt = (min: number, max: number): number => Math.floor(randomValue(min, max));"],"names":["isGradient","color","Array","isArray","length","join","isValidHex","test","baseStyles","top","left","width","zIndex","height","position","overflow","transition","transform","boxShadow","LoadingBar","forwardRef","_ref","ref","callback","delay","savedCallback","progress","_ref$color","_ref$background","background","_ref$shadow","shadow","_ref$height","onLoaderFinished","_ref$transitionTime","transitionTime","_ref$waitingTime","waitingTime","_ref$className","className","_ref$containerClassNa","containerClassName","_ref$style","style","_ref$containerStyle","containerStyle","_ref$shadowStyle","shadowStyle","_useState","useState","localProgress","setLocalProgress","_useState2","usingProps","setUsingProps","_useState3","isComplete","setIsComplete","_useState4","_extends","loaderStyle","setLoaderStyle","containerStyles","isMounted","useRef","continuous","active","refreshRate","staticStart","value","useImperativeHandle","continuousStart","startingValue","current","checkIfFull","complete","getProgress","useEffect","undefined","timeoutId","setTimeout","clearTimeout","increment","Math","floor","random","prev","min","immediate","id","setInterval","clearInterval","opacity","React"],"mappings":"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"}