@mantine/nprogress 9.1.1 → 9.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationProgress.cjs","names":["nprogressStore","useNprogress","resetNavigationProgressAction","OptionalPortal","Progress","classes"],"sources":["../src/NavigationProgress.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport {\n BasePortalProps,\n ElementProps,\n getDefaultZIndex,\n MantineColor,\n OptionalPortal,\n Progress,\n} from '@mantine/core';\nimport {\n NprogressStore,\n nprogressStore,\n resetNavigationProgressAction,\n useNprogress,\n} from './nprogress.store';\nimport classes from './NavigationProgress.module.css';\n\nexport interface NavigationProgressProps extends ElementProps<'div'> {\n /** Component store, controls state */\n store?: NprogressStore;\n\n /** Initial progress value @default 0 */\n initialProgress?: number;\n\n /** Key of `theme.colors` of any other valid CSS color @default theme.primaryColor */\n color?: MantineColor;\n\n /** Controls height of the progress bar */\n size?: number;\n\n /** Step interval in ms @default 500 */\n stepInterval?: number;\n\n /** Determines whether the progress bar should be rendered within `Portal` @default true */\n withinPortal?: boolean;\n\n /** Props to pass down to the `Portal` when `withinPortal` is `true` */\n portalProps?: Omit<BasePortalProps, 'withinPortal'>;\n\n /** Progressbar z-index @default 9999 */\n zIndex?: React.CSSProperties['zIndex'];\n}\n\nexport function NavigationProgress({\n initialProgress = 0,\n color,\n size = 3,\n stepInterval = 500,\n withinPortal = true,\n portalProps,\n zIndex = getDefaultZIndex('max'),\n store = nprogressStore,\n ...others\n}: NavigationProgressProps) {\n store.initialize({\n mounted: false,\n progress: initialProgress,\n interval: -1,\n step: 1,\n stepInterval,\n timeouts: [],\n });\n\n const state = useNprogress(store);\n\n useEffect(() => () => resetNavigationProgressAction(store), [store]);\n\n return (\n <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n <Progress\n radius={0}\n value={state.progress}\n size={size}\n color={color}\n classNames={classes}\n data-mounted={state.mounted || undefined}\n __vars={{ '--nprogress-z-index': zIndex?.toString() }}\n {...others}\n />\n </OptionalPortal>\n );\n}\n\nNavigationProgress.displayName = '@mantine/nprogress/NavigationProgress';\n"],"mappings":";;;;;;;AA2CA,SAAgB,mBAAmB,EACjC,kBAAkB,GAClB,OACA,OAAO,GACP,eAAe,KACf,eAAe,MACf,aACA,UAAA,GAAA,cAAA,kBAA0B,
|
|
1
|
+
{"version":3,"file":"NavigationProgress.cjs","names":["nprogressStore","useNprogress","resetNavigationProgressAction","OptionalPortal","Progress","classes"],"sources":["../src/NavigationProgress.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport {\n BasePortalProps,\n ElementProps,\n getDefaultZIndex,\n MantineColor,\n OptionalPortal,\n Progress,\n} from '@mantine/core';\nimport {\n NprogressStore,\n nprogressStore,\n resetNavigationProgressAction,\n useNprogress,\n} from './nprogress.store';\nimport classes from './NavigationProgress.module.css';\n\nexport interface NavigationProgressProps extends ElementProps<'div'> {\n /** Component store, controls state */\n store?: NprogressStore;\n\n /** Initial progress value @default 0 */\n initialProgress?: number;\n\n /** Key of `theme.colors` of any other valid CSS color @default theme.primaryColor */\n color?: MantineColor;\n\n /** Controls height of the progress bar */\n size?: number;\n\n /** Step interval in ms @default 500 */\n stepInterval?: number;\n\n /** Determines whether the progress bar should be rendered within `Portal` @default true */\n withinPortal?: boolean;\n\n /** Props to pass down to the `Portal` when `withinPortal` is `true` */\n portalProps?: Omit<BasePortalProps, 'withinPortal'>;\n\n /** Progressbar z-index @default 9999 */\n zIndex?: React.CSSProperties['zIndex'];\n}\n\nexport function NavigationProgress({\n initialProgress = 0,\n color,\n size = 3,\n stepInterval = 500,\n withinPortal = true,\n portalProps,\n zIndex = getDefaultZIndex('max'),\n store = nprogressStore,\n ...others\n}: NavigationProgressProps) {\n store.initialize({\n mounted: false,\n progress: initialProgress,\n interval: -1,\n step: 1,\n stepInterval,\n timeouts: [],\n });\n\n const state = useNprogress(store);\n\n useEffect(() => () => resetNavigationProgressAction(store), [store]);\n\n return (\n <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n <Progress\n radius={0}\n value={state.progress}\n size={size}\n color={color}\n classNames={classes}\n data-mounted={state.mounted || undefined}\n __vars={{ '--nprogress-z-index': zIndex?.toString() }}\n {...others}\n />\n </OptionalPortal>\n );\n}\n\nNavigationProgress.displayName = '@mantine/nprogress/NavigationProgress';\n"],"mappings":";;;;;;;AA2CA,SAAgB,mBAAmB,EACjC,kBAAkB,GAClB,OACA,OAAO,GACP,eAAe,KACf,eAAe,MACf,aACA,UAAA,GAAA,cAAA,kBAA0B,KAAK,GAC/B,QAAQA,wBAAAA,gBACR,GAAG,UACuB;CAC1B,MAAM,WAAW;EACf,SAAS;EACT,UAAU;EACV,UAAU;EACV,MAAM;EACN;EACA,UAAU,CAAC;CACb,CAAC;CAED,MAAM,QAAQC,wBAAAA,aAAa,KAAK;CAEhC,CAAA,GAAA,MAAA,uBAAsBC,wBAAAA,8BAA8B,KAAK,GAAG,CAAC,KAAK,CAAC;CAEnE,OACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,gBAAD;EAAgB,GAAI;EAA2B;YAC7C,iBAAA,GAAA,kBAAA,KAACC,cAAAA,UAAD;GACE,QAAQ;GACR,OAAO,MAAM;GACP;GACC;GACP,YAAYC,kCAAAA;GACZ,gBAAc,MAAM,WAAW,KAAA;GAC/B,QAAQ,EAAE,uBAAuB,QAAQ,SAAS,EAAE;GACpD,GAAI;EACL,CAAA;CACa,CAAA;AAEpB;AAEA,mBAAmB,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nprogress.store.cjs","names":[],"sources":["../src/nprogress.store.ts"],"sourcesContent":["import { clamp } from '@mantine/hooks';\nimport { createStore, MantineStore, useStore } from '@mantine/store';\n\nfunction getIntervalProgressValue(currentProgress: number) {\n let next = 0.5;\n\n if (currentProgress >= 0 && currentProgress <= 20) {\n next = 10;\n } else if (currentProgress >= 20 && currentProgress <= 50) {\n next = 4;\n } else if (currentProgress >= 50 && currentProgress <= 80) {\n next = 2;\n } else if (currentProgress >= 80 && currentProgress <= 99) {\n next = 1;\n } else if (currentProgress >= 99 && currentProgress <= 100) {\n next = 0;\n }\n\n return currentProgress + next;\n}\n\nexport interface NprogressState {\n mounted: boolean;\n progress: number;\n interval: number;\n step: number;\n stepInterval: number;\n timeouts: number[];\n}\n\nexport type NprogressStore = MantineStore<NprogressState>;\n\nexport const createNprogressStore = () =>\n createStore<NprogressState>({\n mounted: false,\n progress: 0,\n interval: 0,\n step: 1,\n stepInterval: 100,\n timeouts: [],\n });\n\nexport const useNprogress = (store: NprogressStore) => useStore(store);\n\nexport function updateNavigationProgressStateAction(\n update: (state: NprogressState) => Partial<NprogressState>,\n store: NprogressStore\n) {\n const state = store.getState();\n store.setState({ ...state, ...update(store.getState()) });\n}\n\nexport function decrementNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction(\n (state) => ({ progress: Math.max(state.progress - state.step, 0) }),\n store\n );\n}\n\nexport function setNavigationProgressAction(value: number, store: NprogressStore) {\n updateNavigationProgressStateAction(\n () => ({ progress: clamp(value, 0, 100), mounted: true }),\n store\n );\n}\n\nexport function cleanupNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction((state) => {\n window.clearInterval(state.interval);\n state.timeouts.forEach((timeout) => window.clearTimeout(timeout));\n return { timeouts: [] };\n }, store);\n}\n\nexport function completeNavigationProgressAction(store: NprogressStore) {\n cleanupNavigationProgressAction(store);\n\n updateNavigationProgressStateAction((state) => {\n const mountedTimeout = window.setTimeout(() => {\n updateNavigationProgressStateAction(() => ({ mounted: false }), store);\n }, 50);\n\n const resetTimeout = window.setTimeout(() => {\n updateNavigationProgressStateAction(() => ({ progress: 0 }), store);\n }, state.stepInterval + 50);\n\n return { progress: 100, timeouts: [mountedTimeout, resetTimeout] };\n }, store);\n}\n\nexport function startNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction(\n (s) => ({ progress: getIntervalProgressValue(s.progress), mounted: true }),\n store\n );\n\n updateNavigationProgressStateAction((state) => {\n window.clearInterval(state.interval);\n\n const interval = window.setInterval(() => {\n updateNavigationProgressStateAction(\n (s) => ({ progress: getIntervalProgressValue(s.progress), mounted: true }),\n store\n );\n }, state.stepInterval);\n\n return { interval, mounted: true };\n }, store);\n}\n\nexport function stopNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction((state) => {\n window.clearInterval(state.interval);\n return { interval: -1 };\n }, store);\n}\n\nexport function resetNavigationProgressAction(store: NprogressStore) {\n cleanupNavigationProgressAction(store);\n stopNavigationProgressAction(store);\n updateNavigationProgressStateAction(() => ({ progress: 0, mounted: false }), store);\n}\n\nexport function incrementNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction((state) => {\n const nextValue = Math.min(state.progress + state.step, 100);\n const nextMounted = nextValue !== 100 && nextValue !== 0;\n\n if (!nextMounted) {\n const timeout = window.setTimeout(\n () => resetNavigationProgressAction(store),\n state.stepInterval + 50\n );\n\n return {\n progress: nextValue,\n mounted: nextMounted,\n timeouts: [...state.timeouts, timeout],\n };\n }\n\n return {\n progress: nextValue,\n mounted: nextMounted,\n };\n }, store);\n}\n\nexport function createNprogress() {\n const store = createNprogressStore();\n const actions = {\n start: () => startNavigationProgressAction(store),\n stop: () => stopNavigationProgressAction(store),\n reset: () => resetNavigationProgressAction(store),\n set: (value: number) => setNavigationProgressAction(value, store),\n increment: () => incrementNavigationProgressAction(store),\n decrement: () => decrementNavigationProgressAction(store),\n complete: () => completeNavigationProgressAction(store),\n cleanup: () => cleanupNavigationProgressAction(store),\n };\n\n return [store, actions] as const;\n}\n\nexport const [nprogressStore, nprogress] = createNprogress();\nexport const {\n start: startNavigationProgress,\n stop: stopNavigationProgress,\n reset: resetNavigationProgress,\n set: setNavigationProgress,\n increment: incrementNavigationProgress,\n decrement: decrementNavigationProgress,\n complete: completeNavigationProgress,\n cleanup: cleanupNavigationProgress,\n} = nprogress;\n"],"mappings":";;;;AAGA,SAAS,yBAAyB,iBAAyB;CACzD,IAAI,OAAO;
|
|
1
|
+
{"version":3,"file":"nprogress.store.cjs","names":[],"sources":["../src/nprogress.store.ts"],"sourcesContent":["import { clamp } from '@mantine/hooks';\nimport { createStore, MantineStore, useStore } from '@mantine/store';\n\nfunction getIntervalProgressValue(currentProgress: number) {\n let next = 0.5;\n\n if (currentProgress >= 0 && currentProgress <= 20) {\n next = 10;\n } else if (currentProgress >= 20 && currentProgress <= 50) {\n next = 4;\n } else if (currentProgress >= 50 && currentProgress <= 80) {\n next = 2;\n } else if (currentProgress >= 80 && currentProgress <= 99) {\n next = 1;\n } else if (currentProgress >= 99 && currentProgress <= 100) {\n next = 0;\n }\n\n return currentProgress + next;\n}\n\nexport interface NprogressState {\n mounted: boolean;\n progress: number;\n interval: number;\n step: number;\n stepInterval: number;\n timeouts: number[];\n}\n\nexport type NprogressStore = MantineStore<NprogressState>;\n\nexport const createNprogressStore = () =>\n createStore<NprogressState>({\n mounted: false,\n progress: 0,\n interval: 0,\n step: 1,\n stepInterval: 100,\n timeouts: [],\n });\n\nexport const useNprogress = (store: NprogressStore) => useStore(store);\n\nexport function updateNavigationProgressStateAction(\n update: (state: NprogressState) => Partial<NprogressState>,\n store: NprogressStore\n) {\n const state = store.getState();\n store.setState({ ...state, ...update(store.getState()) });\n}\n\nexport function decrementNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction(\n (state) => ({ progress: Math.max(state.progress - state.step, 0) }),\n store\n );\n}\n\nexport function setNavigationProgressAction(value: number, store: NprogressStore) {\n updateNavigationProgressStateAction(\n () => ({ progress: clamp(value, 0, 100), mounted: true }),\n store\n );\n}\n\nexport function cleanupNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction((state) => {\n window.clearInterval(state.interval);\n state.timeouts.forEach((timeout) => window.clearTimeout(timeout));\n return { timeouts: [] };\n }, store);\n}\n\nexport function completeNavigationProgressAction(store: NprogressStore) {\n cleanupNavigationProgressAction(store);\n\n updateNavigationProgressStateAction((state) => {\n const mountedTimeout = window.setTimeout(() => {\n updateNavigationProgressStateAction(() => ({ mounted: false }), store);\n }, 50);\n\n const resetTimeout = window.setTimeout(() => {\n updateNavigationProgressStateAction(() => ({ progress: 0 }), store);\n }, state.stepInterval + 50);\n\n return { progress: 100, timeouts: [mountedTimeout, resetTimeout] };\n }, store);\n}\n\nexport function startNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction(\n (s) => ({ progress: getIntervalProgressValue(s.progress), mounted: true }),\n store\n );\n\n updateNavigationProgressStateAction((state) => {\n window.clearInterval(state.interval);\n\n const interval = window.setInterval(() => {\n updateNavigationProgressStateAction(\n (s) => ({ progress: getIntervalProgressValue(s.progress), mounted: true }),\n store\n );\n }, state.stepInterval);\n\n return { interval, mounted: true };\n }, store);\n}\n\nexport function stopNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction((state) => {\n window.clearInterval(state.interval);\n return { interval: -1 };\n }, store);\n}\n\nexport function resetNavigationProgressAction(store: NprogressStore) {\n cleanupNavigationProgressAction(store);\n stopNavigationProgressAction(store);\n updateNavigationProgressStateAction(() => ({ progress: 0, mounted: false }), store);\n}\n\nexport function incrementNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction((state) => {\n const nextValue = Math.min(state.progress + state.step, 100);\n const nextMounted = nextValue !== 100 && nextValue !== 0;\n\n if (!nextMounted) {\n const timeout = window.setTimeout(\n () => resetNavigationProgressAction(store),\n state.stepInterval + 50\n );\n\n return {\n progress: nextValue,\n mounted: nextMounted,\n timeouts: [...state.timeouts, timeout],\n };\n }\n\n return {\n progress: nextValue,\n mounted: nextMounted,\n };\n }, store);\n}\n\nexport function createNprogress() {\n const store = createNprogressStore();\n const actions = {\n start: () => startNavigationProgressAction(store),\n stop: () => stopNavigationProgressAction(store),\n reset: () => resetNavigationProgressAction(store),\n set: (value: number) => setNavigationProgressAction(value, store),\n increment: () => incrementNavigationProgressAction(store),\n decrement: () => decrementNavigationProgressAction(store),\n complete: () => completeNavigationProgressAction(store),\n cleanup: () => cleanupNavigationProgressAction(store),\n };\n\n return [store, actions] as const;\n}\n\nexport const [nprogressStore, nprogress] = createNprogress();\nexport const {\n start: startNavigationProgress,\n stop: stopNavigationProgress,\n reset: resetNavigationProgress,\n set: setNavigationProgress,\n increment: incrementNavigationProgress,\n decrement: decrementNavigationProgress,\n complete: completeNavigationProgress,\n cleanup: cleanupNavigationProgress,\n} = nprogress;\n"],"mappings":";;;;AAGA,SAAS,yBAAyB,iBAAyB;CACzD,IAAI,OAAO;CAEX,IAAI,mBAAmB,KAAK,mBAAmB,IAC7C,OAAO;MACF,IAAI,mBAAmB,MAAM,mBAAmB,IACrD,OAAO;MACF,IAAI,mBAAmB,MAAM,mBAAmB,IACrD,OAAO;MACF,IAAI,mBAAmB,MAAM,mBAAmB,IACrD,OAAO;MACF,IAAI,mBAAmB,MAAM,mBAAmB,KACrD,OAAO;CAGT,OAAO,kBAAkB;AAC3B;AAaA,MAAa,8BAAA,GAAA,eAAA,aACiB;CAC1B,SAAS;CACT,UAAU;CACV,UAAU;CACV,MAAM;CACN,cAAc;CACd,UAAU,CAAC;AACb,CAAC;AAEH,MAAa,gBAAgB,WAAA,GAAA,eAAA,UAAmC,KAAK;AAErE,SAAgB,oCACd,QACA,OACA;CACA,MAAM,QAAQ,MAAM,SAAS;CAC7B,MAAM,SAAS;EAAE,GAAG;EAAO,GAAG,OAAO,MAAM,SAAS,CAAC;CAAE,CAAC;AAC1D;AAEA,SAAgB,kCAAkC,OAAuB;CACvE,qCACG,WAAW,EAAE,UAAU,KAAK,IAAI,MAAM,WAAW,MAAM,MAAM,CAAC,EAAE,IACjE,KACF;AACF;AAEA,SAAgB,4BAA4B,OAAe,OAAuB;CAChF,2CACS;EAAE,WAAA,GAAA,eAAA,OAAgB,OAAO,GAAG,GAAG;EAAG,SAAS;CAAK,IACvD,KACF;AACF;AAEA,SAAgB,gCAAgC,OAAuB;CACrE,qCAAqC,UAAU;EAC7C,OAAO,cAAc,MAAM,QAAQ;EACnC,MAAM,SAAS,SAAS,YAAY,OAAO,aAAa,OAAO,CAAC;EAChE,OAAO,EAAE,UAAU,CAAC,EAAE;CACxB,GAAG,KAAK;AACV;AAEA,SAAgB,iCAAiC,OAAuB;CACtE,gCAAgC,KAAK;CAErC,qCAAqC,UAAU;EAS7C,OAAO;GAAE,UAAU;GAAK,UAAU,CARX,OAAO,iBAAiB;IAC7C,2CAA2C,EAAE,SAAS,MAAM,IAAI,KAAK;GACvE,GAAG,EAM6C,GAJ3B,OAAO,iBAAiB;IAC3C,2CAA2C,EAAE,UAAU,EAAE,IAAI,KAAK;GACpE,GAAG,MAAM,eAAe,EAEsC,CAAC;EAAE;CACnE,GAAG,KAAK;AACV;AAEA,SAAgB,8BAA8B,OAAuB;CACnE,qCACG,OAAO;EAAE,UAAU,yBAAyB,EAAE,QAAQ;EAAG,SAAS;CAAK,IACxE,KACF;CAEA,qCAAqC,UAAU;EAC7C,OAAO,cAAc,MAAM,QAAQ;EASnC,OAAO;GAAE,UAPQ,OAAO,kBAAkB;IACxC,qCACG,OAAO;KAAE,UAAU,yBAAyB,EAAE,QAAQ;KAAG,SAAS;IAAK,IACxE,KACF;GACF,GAAG,MAAM,YAEO;GAAG,SAAS;EAAK;CACnC,GAAG,KAAK;AACV;AAEA,SAAgB,6BAA6B,OAAuB;CAClE,qCAAqC,UAAU;EAC7C,OAAO,cAAc,MAAM,QAAQ;EACnC,OAAO,EAAE,UAAU,GAAG;CACxB,GAAG,KAAK;AACV;AAEA,SAAgB,8BAA8B,OAAuB;CACnE,gCAAgC,KAAK;CACrC,6BAA6B,KAAK;CAClC,2CAA2C;EAAE,UAAU;EAAG,SAAS;CAAM,IAAI,KAAK;AACpF;AAEA,SAAgB,kCAAkC,OAAuB;CACvE,qCAAqC,UAAU;EAC7C,MAAM,YAAY,KAAK,IAAI,MAAM,WAAW,MAAM,MAAM,GAAG;EAC3D,MAAM,cAAc,cAAc,OAAO,cAAc;EAEvD,IAAI,CAAC,aAAa;GAChB,MAAM,UAAU,OAAO,iBACf,8BAA8B,KAAK,GACzC,MAAM,eAAe,EACvB;GAEA,OAAO;IACL,UAAU;IACV,SAAS;IACT,UAAU,CAAC,GAAG,MAAM,UAAU,OAAO;GACvC;EACF;EAEA,OAAO;GACL,UAAU;GACV,SAAS;EACX;CACF,GAAG,KAAK;AACV;AAEA,SAAgB,kBAAkB;CAChC,MAAM,QAAQ,qBAAqB;CAYnC,OAAO,CAAC,OAAO;EAVb,aAAa,8BAA8B,KAAK;EAChD,YAAY,6BAA6B,KAAK;EAC9C,aAAa,8BAA8B,KAAK;EAChD,MAAM,UAAkB,4BAA4B,OAAO,KAAK;EAChE,iBAAiB,kCAAkC,KAAK;EACxD,iBAAiB,kCAAkC,KAAK;EACxD,gBAAgB,iCAAiC,KAAK;EACtD,eAAe,gCAAgC,KAAK;CAGjC,CAAC;AACxB;AAEA,MAAa,CAAC,gBAAgB,aAAa,gBAAgB;AAC3D,MAAa,EACX,OAAO,yBACP,MAAM,wBACN,OAAO,yBACP,KAAK,uBACL,WAAW,6BACX,WAAW,6BACX,UAAU,4BACV,SAAS,8BACP"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationProgress.mjs","names":["classes"],"sources":["../src/NavigationProgress.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport {\n BasePortalProps,\n ElementProps,\n getDefaultZIndex,\n MantineColor,\n OptionalPortal,\n Progress,\n} from '@mantine/core';\nimport {\n NprogressStore,\n nprogressStore,\n resetNavigationProgressAction,\n useNprogress,\n} from './nprogress.store';\nimport classes from './NavigationProgress.module.css';\n\nexport interface NavigationProgressProps extends ElementProps<'div'> {\n /** Component store, controls state */\n store?: NprogressStore;\n\n /** Initial progress value @default 0 */\n initialProgress?: number;\n\n /** Key of `theme.colors` of any other valid CSS color @default theme.primaryColor */\n color?: MantineColor;\n\n /** Controls height of the progress bar */\n size?: number;\n\n /** Step interval in ms @default 500 */\n stepInterval?: number;\n\n /** Determines whether the progress bar should be rendered within `Portal` @default true */\n withinPortal?: boolean;\n\n /** Props to pass down to the `Portal` when `withinPortal` is `true` */\n portalProps?: Omit<BasePortalProps, 'withinPortal'>;\n\n /** Progressbar z-index @default 9999 */\n zIndex?: React.CSSProperties['zIndex'];\n}\n\nexport function NavigationProgress({\n initialProgress = 0,\n color,\n size = 3,\n stepInterval = 500,\n withinPortal = true,\n portalProps,\n zIndex = getDefaultZIndex('max'),\n store = nprogressStore,\n ...others\n}: NavigationProgressProps) {\n store.initialize({\n mounted: false,\n progress: initialProgress,\n interval: -1,\n step: 1,\n stepInterval,\n timeouts: [],\n });\n\n const state = useNprogress(store);\n\n useEffect(() => () => resetNavigationProgressAction(store), [store]);\n\n return (\n <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n <Progress\n radius={0}\n value={state.progress}\n size={size}\n color={color}\n classNames={classes}\n data-mounted={state.mounted || undefined}\n __vars={{ '--nprogress-z-index': zIndex?.toString() }}\n {...others}\n />\n </OptionalPortal>\n );\n}\n\nNavigationProgress.displayName = '@mantine/nprogress/NavigationProgress';\n"],"mappings":";;;;;;;AA2CA,SAAgB,mBAAmB,EACjC,kBAAkB,GAClB,OACA,OAAO,GACP,eAAe,KACf,eAAe,MACf,aACA,SAAS,iBAAiB,
|
|
1
|
+
{"version":3,"file":"NavigationProgress.mjs","names":["classes"],"sources":["../src/NavigationProgress.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport {\n BasePortalProps,\n ElementProps,\n getDefaultZIndex,\n MantineColor,\n OptionalPortal,\n Progress,\n} from '@mantine/core';\nimport {\n NprogressStore,\n nprogressStore,\n resetNavigationProgressAction,\n useNprogress,\n} from './nprogress.store';\nimport classes from './NavigationProgress.module.css';\n\nexport interface NavigationProgressProps extends ElementProps<'div'> {\n /** Component store, controls state */\n store?: NprogressStore;\n\n /** Initial progress value @default 0 */\n initialProgress?: number;\n\n /** Key of `theme.colors` of any other valid CSS color @default theme.primaryColor */\n color?: MantineColor;\n\n /** Controls height of the progress bar */\n size?: number;\n\n /** Step interval in ms @default 500 */\n stepInterval?: number;\n\n /** Determines whether the progress bar should be rendered within `Portal` @default true */\n withinPortal?: boolean;\n\n /** Props to pass down to the `Portal` when `withinPortal` is `true` */\n portalProps?: Omit<BasePortalProps, 'withinPortal'>;\n\n /** Progressbar z-index @default 9999 */\n zIndex?: React.CSSProperties['zIndex'];\n}\n\nexport function NavigationProgress({\n initialProgress = 0,\n color,\n size = 3,\n stepInterval = 500,\n withinPortal = true,\n portalProps,\n zIndex = getDefaultZIndex('max'),\n store = nprogressStore,\n ...others\n}: NavigationProgressProps) {\n store.initialize({\n mounted: false,\n progress: initialProgress,\n interval: -1,\n step: 1,\n stepInterval,\n timeouts: [],\n });\n\n const state = useNprogress(store);\n\n useEffect(() => () => resetNavigationProgressAction(store), [store]);\n\n return (\n <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n <Progress\n radius={0}\n value={state.progress}\n size={size}\n color={color}\n classNames={classes}\n data-mounted={state.mounted || undefined}\n __vars={{ '--nprogress-z-index': zIndex?.toString() }}\n {...others}\n />\n </OptionalPortal>\n );\n}\n\nNavigationProgress.displayName = '@mantine/nprogress/NavigationProgress';\n"],"mappings":";;;;;;;AA2CA,SAAgB,mBAAmB,EACjC,kBAAkB,GAClB,OACA,OAAO,GACP,eAAe,KACf,eAAe,MACf,aACA,SAAS,iBAAiB,KAAK,GAC/B,QAAQ,gBACR,GAAG,UACuB;CAC1B,MAAM,WAAW;EACf,SAAS;EACT,UAAU;EACV,UAAU;EACV,MAAM;EACN;EACA,UAAU,CAAC;CACb,CAAC;CAED,MAAM,QAAQ,aAAa,KAAK;CAEhC,sBAAsB,8BAA8B,KAAK,GAAG,CAAC,KAAK,CAAC;CAEnE,OACE,oBAAC,gBAAD;EAAgB,GAAI;EAA2B;YAC7C,oBAAC,UAAD;GACE,QAAQ;GACR,OAAO,MAAM;GACP;GACC;GACP,YAAYA;GACZ,gBAAc,MAAM,WAAW,KAAA;GAC/B,QAAQ,EAAE,uBAAuB,QAAQ,SAAS,EAAE;GACpD,GAAI;EACL,CAAA;CACa,CAAA;AAEpB;AAEA,mBAAmB,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nprogress.store.mjs","names":[],"sources":["../src/nprogress.store.ts"],"sourcesContent":["import { clamp } from '@mantine/hooks';\nimport { createStore, MantineStore, useStore } from '@mantine/store';\n\nfunction getIntervalProgressValue(currentProgress: number) {\n let next = 0.5;\n\n if (currentProgress >= 0 && currentProgress <= 20) {\n next = 10;\n } else if (currentProgress >= 20 && currentProgress <= 50) {\n next = 4;\n } else if (currentProgress >= 50 && currentProgress <= 80) {\n next = 2;\n } else if (currentProgress >= 80 && currentProgress <= 99) {\n next = 1;\n } else if (currentProgress >= 99 && currentProgress <= 100) {\n next = 0;\n }\n\n return currentProgress + next;\n}\n\nexport interface NprogressState {\n mounted: boolean;\n progress: number;\n interval: number;\n step: number;\n stepInterval: number;\n timeouts: number[];\n}\n\nexport type NprogressStore = MantineStore<NprogressState>;\n\nexport const createNprogressStore = () =>\n createStore<NprogressState>({\n mounted: false,\n progress: 0,\n interval: 0,\n step: 1,\n stepInterval: 100,\n timeouts: [],\n });\n\nexport const useNprogress = (store: NprogressStore) => useStore(store);\n\nexport function updateNavigationProgressStateAction(\n update: (state: NprogressState) => Partial<NprogressState>,\n store: NprogressStore\n) {\n const state = store.getState();\n store.setState({ ...state, ...update(store.getState()) });\n}\n\nexport function decrementNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction(\n (state) => ({ progress: Math.max(state.progress - state.step, 0) }),\n store\n );\n}\n\nexport function setNavigationProgressAction(value: number, store: NprogressStore) {\n updateNavigationProgressStateAction(\n () => ({ progress: clamp(value, 0, 100), mounted: true }),\n store\n );\n}\n\nexport function cleanupNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction((state) => {\n window.clearInterval(state.interval);\n state.timeouts.forEach((timeout) => window.clearTimeout(timeout));\n return { timeouts: [] };\n }, store);\n}\n\nexport function completeNavigationProgressAction(store: NprogressStore) {\n cleanupNavigationProgressAction(store);\n\n updateNavigationProgressStateAction((state) => {\n const mountedTimeout = window.setTimeout(() => {\n updateNavigationProgressStateAction(() => ({ mounted: false }), store);\n }, 50);\n\n const resetTimeout = window.setTimeout(() => {\n updateNavigationProgressStateAction(() => ({ progress: 0 }), store);\n }, state.stepInterval + 50);\n\n return { progress: 100, timeouts: [mountedTimeout, resetTimeout] };\n }, store);\n}\n\nexport function startNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction(\n (s) => ({ progress: getIntervalProgressValue(s.progress), mounted: true }),\n store\n );\n\n updateNavigationProgressStateAction((state) => {\n window.clearInterval(state.interval);\n\n const interval = window.setInterval(() => {\n updateNavigationProgressStateAction(\n (s) => ({ progress: getIntervalProgressValue(s.progress), mounted: true }),\n store\n );\n }, state.stepInterval);\n\n return { interval, mounted: true };\n }, store);\n}\n\nexport function stopNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction((state) => {\n window.clearInterval(state.interval);\n return { interval: -1 };\n }, store);\n}\n\nexport function resetNavigationProgressAction(store: NprogressStore) {\n cleanupNavigationProgressAction(store);\n stopNavigationProgressAction(store);\n updateNavigationProgressStateAction(() => ({ progress: 0, mounted: false }), store);\n}\n\nexport function incrementNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction((state) => {\n const nextValue = Math.min(state.progress + state.step, 100);\n const nextMounted = nextValue !== 100 && nextValue !== 0;\n\n if (!nextMounted) {\n const timeout = window.setTimeout(\n () => resetNavigationProgressAction(store),\n state.stepInterval + 50\n );\n\n return {\n progress: nextValue,\n mounted: nextMounted,\n timeouts: [...state.timeouts, timeout],\n };\n }\n\n return {\n progress: nextValue,\n mounted: nextMounted,\n };\n }, store);\n}\n\nexport function createNprogress() {\n const store = createNprogressStore();\n const actions = {\n start: () => startNavigationProgressAction(store),\n stop: () => stopNavigationProgressAction(store),\n reset: () => resetNavigationProgressAction(store),\n set: (value: number) => setNavigationProgressAction(value, store),\n increment: () => incrementNavigationProgressAction(store),\n decrement: () => decrementNavigationProgressAction(store),\n complete: () => completeNavigationProgressAction(store),\n cleanup: () => cleanupNavigationProgressAction(store),\n };\n\n return [store, actions] as const;\n}\n\nexport const [nprogressStore, nprogress] = createNprogress();\nexport const {\n start: startNavigationProgress,\n stop: stopNavigationProgress,\n reset: resetNavigationProgress,\n set: setNavigationProgress,\n increment: incrementNavigationProgress,\n decrement: decrementNavigationProgress,\n complete: completeNavigationProgress,\n cleanup: cleanupNavigationProgress,\n} = nprogress;\n"],"mappings":";;;;AAGA,SAAS,yBAAyB,iBAAyB;CACzD,IAAI,OAAO;
|
|
1
|
+
{"version":3,"file":"nprogress.store.mjs","names":[],"sources":["../src/nprogress.store.ts"],"sourcesContent":["import { clamp } from '@mantine/hooks';\nimport { createStore, MantineStore, useStore } from '@mantine/store';\n\nfunction getIntervalProgressValue(currentProgress: number) {\n let next = 0.5;\n\n if (currentProgress >= 0 && currentProgress <= 20) {\n next = 10;\n } else if (currentProgress >= 20 && currentProgress <= 50) {\n next = 4;\n } else if (currentProgress >= 50 && currentProgress <= 80) {\n next = 2;\n } else if (currentProgress >= 80 && currentProgress <= 99) {\n next = 1;\n } else if (currentProgress >= 99 && currentProgress <= 100) {\n next = 0;\n }\n\n return currentProgress + next;\n}\n\nexport interface NprogressState {\n mounted: boolean;\n progress: number;\n interval: number;\n step: number;\n stepInterval: number;\n timeouts: number[];\n}\n\nexport type NprogressStore = MantineStore<NprogressState>;\n\nexport const createNprogressStore = () =>\n createStore<NprogressState>({\n mounted: false,\n progress: 0,\n interval: 0,\n step: 1,\n stepInterval: 100,\n timeouts: [],\n });\n\nexport const useNprogress = (store: NprogressStore) => useStore(store);\n\nexport function updateNavigationProgressStateAction(\n update: (state: NprogressState) => Partial<NprogressState>,\n store: NprogressStore\n) {\n const state = store.getState();\n store.setState({ ...state, ...update(store.getState()) });\n}\n\nexport function decrementNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction(\n (state) => ({ progress: Math.max(state.progress - state.step, 0) }),\n store\n );\n}\n\nexport function setNavigationProgressAction(value: number, store: NprogressStore) {\n updateNavigationProgressStateAction(\n () => ({ progress: clamp(value, 0, 100), mounted: true }),\n store\n );\n}\n\nexport function cleanupNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction((state) => {\n window.clearInterval(state.interval);\n state.timeouts.forEach((timeout) => window.clearTimeout(timeout));\n return { timeouts: [] };\n }, store);\n}\n\nexport function completeNavigationProgressAction(store: NprogressStore) {\n cleanupNavigationProgressAction(store);\n\n updateNavigationProgressStateAction((state) => {\n const mountedTimeout = window.setTimeout(() => {\n updateNavigationProgressStateAction(() => ({ mounted: false }), store);\n }, 50);\n\n const resetTimeout = window.setTimeout(() => {\n updateNavigationProgressStateAction(() => ({ progress: 0 }), store);\n }, state.stepInterval + 50);\n\n return { progress: 100, timeouts: [mountedTimeout, resetTimeout] };\n }, store);\n}\n\nexport function startNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction(\n (s) => ({ progress: getIntervalProgressValue(s.progress), mounted: true }),\n store\n );\n\n updateNavigationProgressStateAction((state) => {\n window.clearInterval(state.interval);\n\n const interval = window.setInterval(() => {\n updateNavigationProgressStateAction(\n (s) => ({ progress: getIntervalProgressValue(s.progress), mounted: true }),\n store\n );\n }, state.stepInterval);\n\n return { interval, mounted: true };\n }, store);\n}\n\nexport function stopNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction((state) => {\n window.clearInterval(state.interval);\n return { interval: -1 };\n }, store);\n}\n\nexport function resetNavigationProgressAction(store: NprogressStore) {\n cleanupNavigationProgressAction(store);\n stopNavigationProgressAction(store);\n updateNavigationProgressStateAction(() => ({ progress: 0, mounted: false }), store);\n}\n\nexport function incrementNavigationProgressAction(store: NprogressStore) {\n updateNavigationProgressStateAction((state) => {\n const nextValue = Math.min(state.progress + state.step, 100);\n const nextMounted = nextValue !== 100 && nextValue !== 0;\n\n if (!nextMounted) {\n const timeout = window.setTimeout(\n () => resetNavigationProgressAction(store),\n state.stepInterval + 50\n );\n\n return {\n progress: nextValue,\n mounted: nextMounted,\n timeouts: [...state.timeouts, timeout],\n };\n }\n\n return {\n progress: nextValue,\n mounted: nextMounted,\n };\n }, store);\n}\n\nexport function createNprogress() {\n const store = createNprogressStore();\n const actions = {\n start: () => startNavigationProgressAction(store),\n stop: () => stopNavigationProgressAction(store),\n reset: () => resetNavigationProgressAction(store),\n set: (value: number) => setNavigationProgressAction(value, store),\n increment: () => incrementNavigationProgressAction(store),\n decrement: () => decrementNavigationProgressAction(store),\n complete: () => completeNavigationProgressAction(store),\n cleanup: () => cleanupNavigationProgressAction(store),\n };\n\n return [store, actions] as const;\n}\n\nexport const [nprogressStore, nprogress] = createNprogress();\nexport const {\n start: startNavigationProgress,\n stop: stopNavigationProgress,\n reset: resetNavigationProgress,\n set: setNavigationProgress,\n increment: incrementNavigationProgress,\n decrement: decrementNavigationProgress,\n complete: completeNavigationProgress,\n cleanup: cleanupNavigationProgress,\n} = nprogress;\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mantine/nprogress",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.2.1",
|
|
4
4
|
"description": "Navigation progress bar",
|
|
5
5
|
"homepage": "https://mantine.dev/x/nprogress/",
|
|
6
6
|
"license": "MIT",
|
|
@@ -43,19 +43,19 @@
|
|
|
43
43
|
"directory": "packages/@mantine/nprogress"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|
|
46
|
-
"@mantine/core": "9.
|
|
47
|
-
"@mantine/hooks": "9.
|
|
46
|
+
"@mantine/core": "9.2.1",
|
|
47
|
+
"@mantine/hooks": "9.2.1",
|
|
48
48
|
"react": "^19.2.0",
|
|
49
49
|
"react-dom": "^19.2.0"
|
|
50
50
|
},
|
|
51
51
|
"dependencies": {
|
|
52
|
-
"@mantine/store": "9.
|
|
52
|
+
"@mantine/store": "9.2.1"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@mantine-tests/core": "workspace:*",
|
|
56
56
|
"@mantine/core": "workspace:*",
|
|
57
57
|
"@mantine/hooks": "workspace:*",
|
|
58
|
-
"react": "19.2.
|
|
59
|
-
"react-dom": "19.2.
|
|
58
|
+
"react": "19.2.6",
|
|
59
|
+
"react-dom": "19.2.6"
|
|
60
60
|
}
|
|
61
61
|
}
|