react-router-loading
Version:
Wrapper for react-router that allows you to load data before switching the screen
11 lines (10 loc) • 5.01 kB
JavaScript
(function(n,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("react"),require("topbar"),require("react-router")):typeof define=="function"&&define.amd?define(["exports","react","topbar","react-router"],e):(n=typeof globalThis!="undefined"?globalThis:n||self,e(n["react-router-loading"]={},n.React,n.topbar,n.ReactRouter))})(this,function(n,e,i,a){"use strict";var oe=Object.defineProperty,ne=Object.defineProperties;var re=Object.getOwnPropertyDescriptors;var E=Object.getOwnPropertySymbols;var w=Object.prototype.hasOwnProperty,D=Object.prototype.propertyIsEnumerable;var k=(n,e,i)=>e in n?oe(n,e,{enumerable:!0,configurable:!0,writable:!0,value:i}):n[e]=i,g=(n,e)=>{for(var i in e||(e={}))w.call(e,i)&&k(n,i,e[i]);if(E)for(var i of E(e))D.call(e,i)&&k(n,i,e[i]);return n},q=(n,e)=>ne(n,re(e));var A=(n,e)=>{var i={};for(var a in n)w.call(n,a)&&e.indexOf(a)<0&&(i[a]=n[a]);if(n!=null&&E)for(var a of E(n))e.indexOf(a)<0&&D.call(n,a)&&(i[a]=n[a]);return i};function T(r){return r&&typeof r=="object"&&"default"in r?r:{default:r}}var _=T(e),G=T(i);const v=e.createContext({start:()=>{},done:()=>{},restart:()=>{}});v.displayName="LoadingContext";const m=e.createContext(!1);m.displayName="LoadingGetterContext";var x={exports:{}},C={};/**
* @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 I=_.default,U=Symbol.for("react.element"),W=Symbol.for("react.fragment"),$=Object.prototype.hasOwnProperty,B=I.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,H={key:!0,ref:!0,__self:!0,__source:!0};function j(r,t,s){var o,u={},d=null,p=null;s!==void 0&&(d=""+s),t.key!==void 0&&(d=""+t.key),t.ref!==void 0&&(p=t.ref);for(o in t)$.call(t,o)&&!H.hasOwnProperty(o)&&(u[o]=t[o]);if(r&&r.defaultProps)for(o in t=r.defaultProps,t)u[o]===void 0&&(u[o]=t[o]);return{$$typeof:U,type:r,key:d,ref:p,props:u,_owner:B.current}}C.Fragment=W,C.jsx=j,C.jsxs=j,x.exports=C;const l=x.exports.jsx,J=x.exports.jsxs,V=x.exports.Fragment,Y=s=>{var o=s,{loading:r}=o,t=A(o,["loading"]);return l(a.Route,g({},t))},z=()=>l("div",{style:{position:"fixed",top:0,bottom:0,left:0,right:0,backgroundColor:"white"}});function P(r){const t=[];return _.default.Children.forEach(r,s=>{if(!_.default.isValidElement(s))return;if(s.type===_.default.Fragment){t.push.apply(t,P(s.props.children));return}const o={caseSensitive:s.props.caseSensitive,element:s.props.element,index:s.props.index,path:s.props.path,loading:s.props.loading};s.props.children&&(o.children=P(s.props.children)),t.push(o)}),t}const L=(r,t)=>r.pathname!==t.pathname,K=(r,t)=>r.pathname===t.pathname,Q=(r,t)=>r.search!==t.search,F=(r,t)=>{const s=a.matchRoutes(t,r);return!s||s.length===0?!1:s[s.length-1].route.loading},M=({routes:r,location:t,navigationType:s,hidden:o})=>{const u=a.useRoutes(r,t);return l("div",{style:o?{display:"none"}:void 0,children:e.useMemo(()=>l(a.UNSAFE_LocationContext.Provider,{value:{location:t,navigationType:s},children:u}),[t])})},N="__loading",X=({children:r,loadingScreen:t,maxLoadingTime:s=0})=>{const o=a.useLocation(),u=a.useNavigationType(),d=e.useContext(v),p=e.useContext(m),h=e.useMemo(()=>P(r),[r]),[c,S]=e.useState(()=>({location:F(o,h)?q(g({},o),{pathname:N}):o,navigationType:u})),[f,te]=e.useState(c),b=e.useRef();return e.useEffect(()=>{if(L(o,f.location)){const O=F(o,h);te({location:g({},o),navigationType:u}),O?p?d.restart():d.start():(d.done(),S({location:g({},o),navigationType:u}))}K(o,c.location)&&(d.done(),Q(o,c.location)&&S({location:g({},o),navigationType:u}))},[o]),e.useEffect(()=>{!p&&L(c.location,f.location)&&S(f)},[p]),e.useEffect(()=>{s>0&&(b.current&&(clearTimeout(b.current),b.current=void 0),L(c.location,f.location)&&(b.current=setTimeout(()=>{d.done()},s)))},[c,f]),e.useMemo(()=>J(V,{children:[c.location.pathname!==N?l(M,{routes:h,location:c.location,navigationType:c.navigationType},c.location.pathname):t?l(t,{}):l(z,{}),L(c.location,f.location)&&l(M,{routes:h,location:f.location,navigationType:f.navigationType,hidden:!0},f.location.pathname)]}),[c,f])},Z=({children:r,isLoading:t=!1})=>{const[s,o]=e.useState(t),u=e.useRef(!0),d=e.useCallback(()=>{y.show(),o(!0)},[]),p=e.useCallback(()=>{y.hide(),o(!1)},[]),h=e.useCallback(()=>{y.hide(),y.show()},[]);e.useEffect(()=>{u.current?u.current=!1:t&&!s?d():s&&p()},[t]);const c=e.useMemo(()=>l(v.Provider,{value:{start:d,done:p,restart:h},children:r}),[]);return l(m.Provider,{value:s,children:c})},R=({children:r,loadingScreen:t,maxLoadingTime:s,isLoading:o})=>l(Z,{isLoading:o,children:l(X,{loadingScreen:t,maxLoadingTime:s,children:r})}),y=G.default,ee=()=>e.useContext(v);n.LoadingContext=v,n.LoadingGetterContext=m,n.Route=Y,n.Routes=R,n.topbar=y,n.useLoadingContext=ee,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
//# sourceMappingURL=react-router-loading.umd.js.map