Marc Mintel
5397309103
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 20s
Build & Deploy / 🧪 QA (push) Failing after 34s
Build & Deploy / 🏗️ Build (push) Has started running
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🧪 Smoke Test (push) Has been cancelled
Build & Deploy / ⚡ Lighthouse (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled
1 line
4.9 KiB
Plaintext
1 line
4.9 KiB
Plaintext
{"version":3,"file":"index.js","names":["c","_c","React","useEffect","useRef","useRouteTransition","transitionDuration","baseClass","initialDelay","ProgressBar","$","isTransitioning","transitionProgress","progressToShow","setProgressToShow","useState","shouldDelayProgress","t0","t1","clearTimerID","delayTimerID","current","clearTimeout","t2","t3","filter","Boolean","t4","join","t5","_jsx","className","style","children","width"],"sources":["../../../../src/providers/RouteTransition/ProgressBar/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect, useRef } from 'react'\n\nimport { useRouteTransition } from '../index.js'\nimport './index.scss'\n\nconst transitionDuration = 200\nconst baseClass = 'progress-bar'\nconst initialDelay = 150\n\n/**\n * Renders a progress bar that shows the progress of a route transition.\n * Place this at the root of your application, inside of the `RouteTransitionProvider`.\n * When a transition is triggered, the progress bar will show the progress of that transition and exit when the transition is complete.\n * @returns A progress bar that shows the progress of a route transition\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 */\nexport const ProgressBar = () => {\n const { isTransitioning, transitionProgress } = useRouteTransition()\n const [progressToShow, setProgressToShow] = React.useState<null | number>(null)\n const shouldDelayProgress = useRef(true)\n\n useEffect(() => {\n let clearTimerID: NodeJS.Timeout\n let delayTimerID: NodeJS.Timeout\n\n if (isTransitioning) {\n if (shouldDelayProgress.current) {\n delayTimerID = setTimeout(() => {\n setProgressToShow(transitionProgress)\n shouldDelayProgress.current = false\n }, initialDelay)\n } else {\n setProgressToShow(transitionProgress)\n }\n } else {\n shouldDelayProgress.current = true\n\n // Fast forward to 100% when the transition is complete\n // Then fade out the progress bar directly after\n setProgressToShow(1)\n\n // Wait for CSS transition to finish before hiding the progress bar\n // This includes both the fast-forward to 100% and the subsequent fade-out\n clearTimerID = setTimeout(() => {\n setProgressToShow(null)\n }, transitionDuration * 2)\n }\n\n return () => {\n clearTimeout(clearTimerID)\n clearTimeout(delayTimerID)\n }\n }, [isTransitioning, transitionProgress])\n\n if (typeof progressToShow === 'number') {\n return (\n <div\n className={[baseClass, progressToShow === 1 && `${baseClass}--fade-out`]\n .filter(Boolean)\n .join(' ')}\n style={{\n // @ts-expect-error - TS doesn't like custom CSS properties\n '--transition-duration': `${transitionDuration}ms`,\n }}\n >\n <div\n className={`${baseClass}__progress`}\n style={{\n width: `${(progressToShow || 0) * 100}%`,\n }}\n />\n </div>\n )\n }\n\n return null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,SAAS,EAAEC,MAAM,QAAQ;AAEzC,SAASC,kBAAkB,QAAQ;AACnC,OAAO;AAEP,MAAMC,kBAAA,GAAqB;AAC3B,MAAMC,SAAA,GAAY;AAClB,MAAMC,YAAA,GAAe;AAErB;;;;;;;;;;;;;AAaA,OAAO,MAAMC,WAAA,GAAcA,CAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EACzB;IAAAU,eAAA;IAAAC;EAAA,IAAgDP,kBAAA;EAChD,OAAAQ,cAAA,EAAAC,iBAAA,IAA4CZ,KAAA,CAAAa,QAAA,KAA8B;EAC1E,MAAAC,mBAAA,GAA4BZ,MAAA,KAAO;EAAA,IAAAa,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAR,CAAA,QAAAC,eAAA,IAAAD,CAAA,QAAAE,kBAAA;IAEzBK,EAAA,GAAAA,CAAA;MACJE,GAAA,CAAAA,YAAA;MACAC,GAAA,CAAAA,YAAA;MAAA,IAEAT,eAAA;QAAA,IACEK,mBAAA,CAAAK,OAAA;UACFD,YAAA,CAAAA,CAAA,CAAeA,aAAA,CAAAA,EAAA,CAAAA;YACbN,iBAAA,CAAkBF,kBAAA;YAClBI,mBAAA,CAAAK,OAAA;UAAA,GAAAb,YACC;QAHH;UAKAM,iBAAA,CAAkBF,kBAAA;QAAA;MAAA;QAGpBI,mBAAA,CAAAK,OAAA;QAIAP,iBAAA,EAAkB;QAIlBK,YAAA,CAAAA,CAAA,CAAeA,aAAA,CAAAA,EAAA,CAAAA;UACbL,iBAAA,KAAkB;QAAA,GACjBR,kBAAA,IAAqB;MAFxB;MAAA;QAMAgB,YAAA,CAAaH,YAAA;QACbG,YAAA,CAAaF,YAAA;MAAA;IAAA;IAEdF,EAAA,IAACP,eAAA,EAAiBC,kBAAA;IAAmBF,CAAA,MAAAC,eAAA;IAAAD,CAAA,MAAAE,kBAAA;IAAAF,CAAA,MAAAO,EAAA;IAAAP,CAAA,MAAAQ,EAAA;EAAA;IAAAD,EAAA,GAAAP,CAAA;IAAAQ,EAAA,GAAAR,CAAA;EAAA;EA/BxCP,SAAA,CAAUc,EA+BV,EAAGC,EAAqC;EAAA,IAEpC,OAAOL,cAAA,KAAmB;IAGD,MAAAU,EAAA,GAAAV,cAAA,MAAmB,IAAK,GAAAN,SAAA,YAAwB;IAAA,IAAAiB,EAAA;IAAA,IAAAd,CAAA,QAAAa,EAAA;MAA5DC,EAAA,IAAAjB,SAAA,EAAYgB,EAAgD,EAAAE,MAAA,CAAAC,OAC7D;MAAAhB,CAAA,MAAAa,EAAA;MAAAb,CAAA,MAAAc,EAAA;IAAA;MAAAA,EAAA,GAAAd,CAAA;IAAA;IADC,MAAAiB,EAAA,GAAAH,EACD,CAAAI,IAAA,CACF;IAAA,IAAAC,EAAA;IAAA,IAAAnB,CAAA,QAAAG,cAAA,IAAAH,CAAA,QAAAiB,EAAA;MAHVE,EAAA,GAAAC,IAAA,CAAC;QAAAC,SAAA,EACYJ,EAEH;QAAAK,KAAA;UAAA,yBAGmB,GAAA1B,kBAAA;QAAyB;QAAA2B,QAAA,EAGpDH,IAAA,CAAC;UAAAC,SAAA,EACY,GAAAxB,SAAA,YAAwB;UAAAyB,KAAA;YAAAE,KAAA,EAE1B,GAAG,CAACrB,cAAA,KAAkB,OAAK;UAAM;QAAA,C;;;;;;;;WAZ9CgB,E;;;CAoBN","ignoreList":[]} |