UNPKG

@duongnqse02934/react-router-loading

Version:

Wrapper for react-router that allows you to load data before switching the screen

11 lines (10 loc) 5.23 kB
(function(o,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("react"),require("topbar"),require("react-router")):typeof define=="function"&&define.amd?define(["exports","react","topbar","react-router"],t):(o=typeof globalThis!="undefined"?globalThis:o||self,t(o["react-router-loading"]={},o.React,o.topbar,o.ReactRouter))})(this,function(o,t,a,u){"use strict";var nt=Object.defineProperty,it=Object.defineProperties;var rt=Object.getOwnPropertyDescriptors;var E=Object.getOwnPropertySymbols;var q=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable;var D=(o,t,a)=>t in o?nt(o,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):o[t]=a,g=(o,t)=>{for(var a in t||(t={}))q.call(t,a)&&D(o,a,t[a]);if(E)for(var a of E(t))A.call(t,a)&&D(o,a,t[a]);return o},G=(o,t)=>it(o,rt(t));var I=(o,t)=>{var a={};for(var u in o)q.call(o,u)&&t.indexOf(u)<0&&(a[u]=o[u]);if(o!=null&&E)for(var u of E(o))t.indexOf(u)<0&&A.call(o,u)&&(a[u]=o[u]);return a};function F(n){return n&&typeof n=="object"&&"default"in n?n:{default:n}}var x=F(t),U=F(a);const v=t.createContext({start:()=>{},done:()=>{},restart:()=>{}});v.displayName="LoadingContext";const C=t.createContext(!1);C.displayName="LoadingGetterContext";var b={exports:{}},L={};/** * @license React * react-jsx-runtime.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */var W=x.default,$=Symbol.for("react.element"),B=Symbol.for("react.fragment"),H=Object.prototype.hasOwnProperty,J=W.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,V={key:!0,ref:!0,__self:!0,__source:!0};function M(n,e,i){var r,s={},d=null,f=null;i!==void 0&&(d=""+i),e.key!==void 0&&(d=""+e.key),e.ref!==void 0&&(f=e.ref);for(r in e)H.call(e,r)&&!V.hasOwnProperty(r)&&(s[r]=e[r]);if(n&&n.defaultProps)for(r in e=n.defaultProps,e)s[r]===void 0&&(s[r]=e[r]);return{$$typeof:$,type:n,key:d,ref:f,props:s,_owner:J.current}}L.Fragment=B,L.jsx=M,L.jsxs=M,b.exports=L;const c=b.exports.jsx,Y=b.exports.jsxs,z=b.exports.Fragment,K=i=>{var r=i,{loading:n}=r,e=I(r,["loading"]);return c(u.Route,g({},e))},N=()=>c("div",{style:{position:"fixed",top:0,bottom:0,left:0,right:0,backgroundColor:"white"}});function P(n){const e=[];return x.default.Children.forEach(n,i=>{if(!x.default.isValidElement(i))return;if(i.type===x.default.Fragment){e.push.apply(e,P(i.props.children));return}const r={caseSensitive:i.props.caseSensitive,element:i.props.element,index:i.props.index,path:i.props.path,loading:i.props.loading};i.props.children&&(r.children=P(i.props.children)),e.push(r)}),e}const y=(n,e)=>n.pathname!==e.pathname,Q=(n,e)=>n.pathname===e.pathname,X=(n,e)=>n.search!==e.search,O=(n,e)=>{const i=u.matchRoutes(e,n);return!i||i.length===0?!1:i[i.length-1].route.loading},S=({routes:n,location:e,navigationType:i,hidden:r})=>{const s=u.useRoutes(n,e);return c("div",{style:r?{display:"none"}:void 0,children:t.useMemo(()=>c(u.UNSAFE_LocationContext.Provider,{value:{location:e,navigationType:i},children:s}),[e])})},k="__loading",Z=({children:n,loadingScreen:e,maxLoadingTime:i=0,enableLoadingScreenForAll:r=!1})=>{const s=u.useLocation(),d=u.useNavigationType(),f=t.useContext(v),_=t.useContext(C),h=t.useMemo(()=>P(n),[n]),[l,j]=t.useState(()=>({location:O(s,h)?G(g({},s),{pathname:k}):s,navigationType:d})),[p,ot]=t.useState(l),T=t.useRef();return t.useEffect(()=>{if(y(s,p.location)){const w=O(s,h);ot({location:g({},s),navigationType:d}),w?_?f.restart():f.start():(f.done(),j({location:g({},s),navigationType:d}))}Q(s,l.location)&&(f.done(),X(s,l.location)&&j({location:g({},s),navigationType:d}))},[s]),t.useEffect(()=>{!_&&y(l.location,p.location)&&j(p)},[_]),t.useEffect(()=>{i>0&&(T.current&&(clearTimeout(T.current),T.current=void 0),y(l.location,p.location)&&(T.current=setTimeout(()=>{f.done()},i)))},[l,p]),t.useMemo(()=>Y(z,{children:[r?y(l.location,p.location)?e?c(e,{}):c(N,{}):c(S,{routes:h,location:l.location,navigationType:l.navigationType},l.location.pathname):l.location.pathname!==k?c(S,{routes:h,location:l.location,navigationType:l.navigationType},l.location.pathname):e?c(e,{}):c(N,{}),y(l.location,p.location)&&c(S,{routes:h,location:p.location,navigationType:p.navigationType,hidden:!0},p.location.pathname)]}),[l,p])},R=({children:n,isLoading:e=!1})=>{const[i,r]=t.useState(e),s=t.useRef(!0),d=t.useCallback(()=>{m.show(),r(!0)},[]),f=t.useCallback(()=>{m.hide(),r(!1)},[]),_=t.useCallback(()=>{m.hide(),m.show()},[]);t.useEffect(()=>{s.current?s.current=!1:e&&!i?d():i&&f()},[e]);const h=t.useMemo(()=>c(v.Provider,{value:{start:d,done:f,restart:_},children:n}),[]);return c(C.Provider,{value:i,children:h})},tt=({children:n,loadingScreen:e,maxLoadingTime:i,isLoading:r,enableLoadingScreenForAll:s})=>c(R,{isLoading:r,children:c(Z,{loadingScreen:e,maxLoadingTime:i,enableLoadingScreenForAll:s,children:n})}),m=U.default,et=()=>t.useContext(v);o.LoadingContext=v,o.LoadingGetterContext=C,o.Route=K,o.Routes=tt,o.topbar=m,o.useLoadingContext=et,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}); //# sourceMappingURL=react-router-loading.umd.js.map