react-top-loading-bar/dist/index.js

A very simple, highly customisable react top loader component.

'use strict';Object.defineProperty(exports,'__esModule',{value:true});var l=require('react');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var l__namespace=/*#__PURE__*/_interopNamespace(l);var G=()=>{};function Y(e,t,m){let a=l.useRef(G);l.useEffect(()=>{a.current=e;}),l.useEffect(()=>{},[m]),l.useEffect(()=>{if(t===null||t===!1)return;let b=setInterval(()=>a.current(),t);return ()=>clearInterval(b)},[t]);}function k(e,t){return Math.random()*(t-e+1)+e}function h(e,t){return Math.floor(k(e,t))}var Q=l.forwardRef(({progress:e,height:t=2,className:m="",color:a="red",background:d="transparent",onLoaderFinished:b,transitionTime:n=300,loaderSpeed:i=500,waitingTime:N=1e3,shadow:y=!0,containerStyle:T={},style:E={},shadowStyle:O={},containerClassName:z=""},C)=>{let S=l.useRef(!1),[p,c]=l.useState(0),f=l.useRef({active:!1,refreshRate:1e3}),[R,I]=l.useState({active:!1,value:60}),F={height:"100%",background:a,transition:`all ${i}ms ease`,width:"0%"},H={position:"fixed",top:0,left:0,height:t,background:d,zIndex:99999999999,width:"100%"},j={boxShadow:`0 0 10px ${a}, 0 0 10px ${a}`,width:"5%",opacity:1,position:"absolute",height:"100%",transition:`all ${i}ms ease`,transform:"rotate(2deg) translate(0px, -2px)",left:"-10rem"},[g,P]=l.useState(F),[w,L]=l.useState(j);l.useEffect(()=>(S.current=!0,()=>{S.current=!1;}),[]),l.useImperativeHandle(C,()=>({continuousStart(r,o=1e3){if(R.active)return;if(e!==void 0){console.warn("react-top-loading-bar: You can't use both controlling by props and ref methods to control the bar!");return}let s=r||h(10,20);f.current={active:!0,refreshRate:o},c(s),u(s);},staticStart(r){if(f.current.active)return;if(e!==void 0){console.warn("react-top-loading-bar: You can't use both controlling by props and ref methods to control the bar!");return}let o=r||h(30,60);I({active:!0,value:o}),c(o),u(o);},start(r="continuous",o,s){if(e!==void 0){console.warn("react-top-loading-bar: You can't use both controlling by props and ref methods to control the bar!");return}r==="continuous"?f.current={active:!0,refreshRate:s||1e3}:I({active:!0,value:o||20});let q=h(10,20),A=h(30,70),V=o||(r==="continuous"?q:A);c(V),u(V);},complete(){if(e!==void 0){console.warn("react-top-loading-bar: You can't use both controlling by props and ref methods to control the bar!");return}c(100),u(100);},increase(r){if(e!==void 0){console.warn("react-top-loading-bar: You can't use both controlling by props and ref methods to control the bar!");return}c(o=>{let s=o+r;return u(s),s});},decrease(r){if(e!==void 0){console.warn("react-top-loading-bar: You can't use both controlling by props and ref methods to control the bar!");return}c(o=>{let s=o-r;return u(s),s});},getProgress(){return p}})),l.useEffect(()=>{P({...g,background:a}),L({...w,boxShadow:`0 0 10px ${a}, 0 0 5px ${a}`});},[a]),l.useEffect(()=>{if(C){if(C&&e!==void 0){console.warn(`react-top-loading-bar: You can't use both controlling by props and ref methods to control the bar! Please use only props or only ref methods! Ref methods will override props if "ref" property is available.`);return}u(p);}else e&&u(e);},[e]);let u=r=>{r>=100?(P({...g,width:"100%"}),y&&L({...w,left:r-10+"%"}),setTimeout(()=>{S.current&&(P({...g,opacity:0,width:"100%",transition:`all ${n}ms ease-out`,color:a}),setTimeout(()=>{S.current&&(f.current.active&&(f.current={...f.current,active:!1},c(0),u(0)),R.active&&(I({...R,active:!1}),c(0),u(0)),b&&b(),c(0),u(0));},n));},N)):(P(o=>({...o,width:r+"%",opacity:1,transition:r>0?`all ${i}ms ease`:""})),y&&L({...w,left:r-5.5+"%",transition:r>0?`all ${i}ms ease`:""}));};return Y(()=>{let r=Math.min(10,(100-p)/5),o=Math.min(20,(100-p)/3),s=k(r,o);p+s<95&&(c(p+s),u(p+s));},f.current.active?f.current.refreshRate:null),l__namespace.createElement("div",{className:z,style:{...H,...T}},l__namespace.createElement("div",{className:m,style:{...g,...E}},y?l__namespace.createElement("div",{style:{...w,...O}}):null))}),M=l__namespace.createContext(void 0),re=({children:e,props:t})=>{let[m,a]=l.useState(t||{}),d=l.useRef(null),b=(n="continuous")=>{var i;return (i=d.current)==null?void 0:i.start(n)};return l__namespace.createElement(M.Provider,{value:{start:b,complete:()=>{var n;return (n=d.current)==null?void 0:n.complete()},getProgress:()=>{var n;return ((n=d.current)==null?void 0:n.getProgress())||0},increase:n=>{var i;return (i=d.current)==null?void 0:i.increase(n)},decrease:n=>{var i;return (i=d.current)==null?void 0:i.decrease(n)},setProps:n=>a({...n,...m})}},l__namespace.createElement(Q,{ref:d,...m}),e)},ne=e=>{let t=l__namespace.useContext(M);if(!t)throw new Error("[react-top-loading-bar] useLoadingBar hook must be used within a LoadingBarContainer. Try wrapping parent component in <LoadingBarContainer>.");return l.useEffect(()=>{e&&t.setProps(e);},[]),{start:t.start,complete:t.complete,increase:t.increase,decrease:t.decrease,getProgress:t.getProgress}};exports.LoadingBarContainer=re;exports.default=Q;exports.useLoadingBar=ne;//# sourceMappingURL=index.js.map
//# sourceMappingURL=index.js.map