@payloadcms/ui 3.23.0 → 3.24.0-canary.05013b2

package/dist/providers/RouteTransition/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","startTransition","useCallback","useEffect","useOptimistic","useRef","RouteTransitionProvider","t0","$","children","isTransitioning","setIsTransitioning","transitionProgress","setTransitionProgress","useState","transitionProgressRef","timerID","t1","Symbol","for","current","setInterval","newProgress","Math","random","pow","log","initiateProgress","t2","t3","clearInterval","t4","callback","startRouteTransition","t5","_jsx","RouteTransitionContext","Provider","value","createContext","undefined","useRouteTransition","useContext"],"sources":["../../../src/providers/RouteTransition/index.tsx"],"sourcesContent":["'use client'\nimport React, { startTransition, useCallback, useEffect, useOptimistic, useRef } from 'react'\n\n/**\n * Route transitions are useful in showing immediate visual feedback to the user when navigating between pages. This is especially useful on slow networks when navigating to data heavy or process intensive pages.\n * To use route transitions, place the `RouteTransitionProvider` at the root of your application, outside of the `ProgressBar` component.\n * To trigger a route transition, use the `Link` component from `@payloadcms/ui`,\n * or wrap a callback function with the `startRouteTransition` method.\n * To gain access to the `RouteTransitionContext`, call the `useRouteTransition` hook in your component.\n * @returns A context provider with methods and state for transitioning between routes, including `isTransitioning`, `startRouteTransition`, and `transitionProgress`.\n * @example\n * import { RouteTransitionProvider, ProgressBar, Link } from '@payloadcms/ui'\n * const App = () => (\n *  <RouteTransitionProvider>\n *   <ProgressBar />\n *   <Link href=\"/somewhere\">Go Somewhere</Link>\n *  </RouteTransitionProvider>\n * )\n */\nexport const RouteTransitionProvider: React.FC<RouteTransitionProps> = ({ children }) => {\n  const [isTransitioning, setIsTransitioning] = useOptimistic(false)\n  const [transitionProgress, setTransitionProgress] = React.useState<number>(0)\n\n  const transitionProgressRef = useRef(transitionProgress)\n\n  const timerID = useRef(null)\n\n  const initiateProgress = useCallback(() => {\n    timerID.current = setInterval(() => {\n      // randomly update progress using an exponential curve\n      // cap the progress to ensure it never fully reaches completion\n      // accelerate quickly then decelerate slowly\n      const maxProgress = 0.93\n      const jumpFactor = 0.2 // lower to reduce jumps in progress\n      const growthFactor = 0.75 // adjust to control acceleration\n      const slowdownFactor = 0.75 // adjust to control deceleration\n\n      const newProgress =\n        transitionProgressRef.current +\n        (maxProgress - transitionProgressRef.current) *\n          Math.random() *\n          jumpFactor *\n          Math.pow(Math.log(1 + (1 - transitionProgressRef.current) * growthFactor), slowdownFactor)\n\n      setTransitionProgress(newProgress)\n      transitionProgressRef.current = newProgress\n    }, 250) // every n ms, update progress\n  }, [])\n\n  useEffect(() => {\n    setTransitionProgress(0)\n    transitionProgressRef.current = 0\n\n    if (isTransitioning) {\n      initiateProgress()\n    } else {\n      if (timerID.current) {\n        clearInterval(timerID.current)\n      }\n    }\n  }, [isTransitioning, initiateProgress])\n\n  const startRouteTransition: StartRouteTransition = useCallback(\n    (callback?: () => void) => {\n      startTransition(() => {\n        setIsTransitioning(true)\n\n        if (typeof callback === 'function') {\n          callback()\n        }\n      })\n    },\n    [setIsTransitioning],\n  )\n\n  return (\n    <RouteTransitionContext.Provider\n      value={{ isTransitioning, startRouteTransition, transitionProgress }}\n    >\n      {children}\n    </RouteTransitionContext.Provider>\n  )\n}\n\ntype RouteTransitionProps = {\n  children: React.ReactNode\n}\n\ntype StartRouteTransition = (callback?: () => void) => void\n\ntype RouteTransitionContextValue = {\n  isTransitioning: boolean\n  startRouteTransition: StartRouteTransition\n  transitionProgress: number\n}\n\nconst RouteTransitionContext = React.createContext<RouteTransitionContextValue>({\n  isTransitioning: false,\n  startRouteTransition: () => undefined,\n  transitionProgress: 0,\n})\n\n/**\n * Use this hook to access the `RouteTransitionContext` provided by the `RouteTransitionProvider`.\n * To start a transition, fire the `startRouteTransition` method with a provided callback to run while the transition takes place.\n * @returns The `RouteTransitionContext` needed for transitioning between routes, including `isTransitioning`, `startRouteTransition`, and `transitionProgress`.\n * @example\n * 'use client'\n * import React, { useCallback } from 'react'\n * import { useTransition } from '@payloadcms/ui'\n * import { useRouter } from 'next/navigation'\n *\n * const MyComponent: React.FC = () => {\n *   const router = useRouter()\n *   const { startRouteTransition } = useRouteTransition()\n *\n *   const redirectSomewhere = useCallback(() => {\n *     startRouteTransition(() => router.push('/somewhere'))\n *   }, [startRouteTransition, router])\n *\n *   // ...\n * }\n */\nexport const useRouteTransition = () => React.useContext(RouteTransitionContext)\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,eAAe,EAAEC,WAAW,EAAEC,SAAS,EAAEC,aAAa,EAAEC,MAAM,QAAQ;AAEtF;;;;;;;;;;;;;;;;AAgBA,OAAO,MAAMC,uBAAA,GAA0DC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU;EAAA,IAAAF,EAAY;EAClF,OAAAG,eAAA,EAAAC,kBAAA,IAA8CP,aAAA,MAAc;EAC5D,OAAAQ,kBAAA,EAAAC,qBAAA,IAAoDb,KAAA,CAAAc,QAAA,EAAuB;EAE3E,MAAAC,qBAAA,GAA8BV,MAAA,CAAOO,kBAAA;EAErC,MAAAI,OAAA,GAAgBX,MAAA,KAAO;EAAA,IAAAY,EAAA;EAAA,IAAAT,CAAA,QAAAU,MAAA,CAAAC,GAAA;IAEcF,EAAA,GAAAA,CAAA;MACnCD,OAAA,CAAAI,OAAA,GAAkBC,WAAA;QAShB,MAAAC,WAAA,GACEP,qBAAA,CAAAK,OAAA,GACA,CAAC,OAAcL,qBAAA,CAAAK,OAA6B,IAC1CG,IAAA,CAAAC,MAAA,CAAW,OACX,GACAD,IAAA,CAAAE,GAAA,CAASF,IAAA,CAAAG,GAAA,CAAS,IAAI,CAAC,IAAIX,qBAAA,CAAAK,OAA6B,QAAI,OAAe;QAE/EP,qBAAA,CAAsBS,WAAA;QACtBP,qBAAA,CAAAK,OAAA,GAAgCE,WAAA;MAAA,MAC/B;IAAA;IACLd,CAAA,MAAAS,EAAA;EAAA;IAAAA,EAAA,GAAAT,CAAA;EAAA;EApBA,MAAAmB,gBAAA,GAAyBV,EAoBpB;EAAA,IAAAW,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAArB,CAAA,QAAAE,eAAA;IAEKkB,EAAA,GAAAA,CAAA;MACRf,qBAAA,EAAsB;MACtBE,qBAAA,CAAAK,OAAA;MAAA,IAEIV,eAAA;QACFiB,gBAAA;MAAA;QAAA,IAEIX,OAAA,CAAAI,OAAA;UACFU,aAAA,CAAcd,OAAA,CAAAI,OAAe;QAAA;MAAA;IAAA;IAGhCS,EAAA,IAACnB,eAAA,EAAiBiB,gBAAA;IAAiBnB,CAAA,MAAAE,eAAA;IAAAF,CAAA,MAAAoB,EAAA;IAAApB,CAAA,MAAAqB,EAAA;EAAA;IAAAD,EAAA,GAAApB,CAAA;IAAAqB,EAAA,GAAArB,CAAA;EAAA;EAXtCL,SAAA,CAAUyB,EAWV,EAAGC,EAAmC;EAAA,IAAAE,EAAA;EAAA,IAAAvB,CAAA,QAAAG,kBAAA;IAGpCoB,EAAA,GAAAC,QAAA;MACE/B,eAAA;QACEU,kBAAA,KAAmB;QAAA,IAEf,OAAOqB,QAAA,KAAa;UACtBA,QAAA;QAAA;MAAA,CAEJ;IAAA;IACFxB,CAAA,MAAAG,kBAAA;IAAAH,CAAA,MAAAuB,EAAA;EAAA;IAAAA,EAAA,GAAAvB,CAAA;EAAA;EATF,MAAAyB,oBAAA,GAAmDF,EAU7B;EAAA,IAAAG,EAAA;EAAA,IAAA1B,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAE,eAAA,IAAAF,CAAA,QAAAyB,oBAAA,IAAAzB,CAAA,QAAAI,kBAAA;IAIpBsB,EAAA,GAAAC,IAAA,CAAAC,sBAAA,CAAAC,QAAA;MAAAC,KAAA;QAAA5B,eAAA;QAAAuB,oBAAA;QAAArB;MAAA;MAAAH;IAAA,C;;;;;;;;;SAAAyB,E;CAMJ;AAcA,MAAME,sBAAA,gBAAyBpC,KAAA,CAAMuC,aAAa,CAA8B;EAC9E7B,eAAA,EAAiB;EACjBuB,oBAAA,EAAsBA,CAAA,KAAMO,SAAA;EAC5B5B,kBAAA,EAAoB;AACtB;AAEA;;;;;;;;;;;;;;;;;;;;;AAqBA,OAAO,MAAM6B,kBAAA,GAAqBA,CAAA;EAAA,OAAMzC,KAAA,CAAA0C,UAAA,CAAAN,sBAAiB;AAAA","ignoreList":[]}