@mantine/nprogress 5.0.0-alpha.2 → 5.0.0-alpha.20
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.
- package/README.md +2 -2
- package/cjs/{NProgress.js → NavigationProgress.js} +51 -60
- package/cjs/NavigationProgress.js.map +1 -0
- package/cjs/events.js +15 -58
- package/cjs/events.js.map +1 -1
- package/cjs/index.js +8 -8
- package/esm/NavigationProgress.js +117 -0
- package/esm/NavigationProgress.js.map +1 -0
- package/esm/events.js +9 -51
- package/esm/events.js.map +1 -1
- package/esm/index.js +2 -2
- package/lib/NavigationProgress.d.ts +28 -0
- package/lib/NavigationProgress.d.ts.map +1 -0
- package/lib/events.d.ts +14 -26
- package/lib/events.d.ts.map +1 -1
- package/lib/index.d.ts +3 -3
- package/lib/index.d.ts.map +1 -1
- package/package.json +7 -6
- package/cjs/NProgress.js.map +0 -1
- package/esm/NProgress.js +0 -126
- package/esm/NProgress.js.map +0 -1
- package/lib/NProgress.d.ts +0 -32
- package/lib/NProgress.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var core = require('@mantine/core');
|
|
6
6
|
var hooks = require('@mantine/hooks');
|
|
7
|
-
var styles = require('@mantine/styles');
|
|
8
7
|
var React = require('react');
|
|
9
8
|
var events = require('./events.js');
|
|
10
9
|
|
|
@@ -12,27 +11,27 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
12
11
|
|
|
13
12
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
14
13
|
|
|
15
|
-
function
|
|
16
|
-
|
|
17
|
-
color
|
|
18
|
-
size =
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
exitTransitionDuration = 600,
|
|
24
|
-
exitTransition = "ease",
|
|
14
|
+
function NavigationProgress({
|
|
15
|
+
initialProgress = 0,
|
|
16
|
+
color,
|
|
17
|
+
size = 3,
|
|
18
|
+
stepInterval = 500,
|
|
19
|
+
transitionDuration = 300,
|
|
20
|
+
exitTimeout = 500,
|
|
21
|
+
exitTransitionDuration = 400,
|
|
25
22
|
onFinish,
|
|
26
23
|
autoReset = false,
|
|
27
24
|
withinPortal = true,
|
|
28
|
-
zIndex =
|
|
25
|
+
zIndex = core.getDefaultZIndex("max")
|
|
29
26
|
}) {
|
|
30
|
-
const
|
|
31
|
-
const
|
|
27
|
+
const theme = core.useMantineTheme();
|
|
28
|
+
const shouldReduceMotion = hooks.useReducedMotion();
|
|
29
|
+
const reducedMotion = theme.respectReducedMotion ? shouldReduceMotion : false;
|
|
30
|
+
const [_progress, setProgress] = React.useState(initialProgress);
|
|
32
31
|
const [mounted, setMounted] = React.useState(true);
|
|
32
|
+
const [unmountProgress, setUnmountProgress] = React.useState(false);
|
|
33
33
|
const resetRef = React.useRef();
|
|
34
34
|
const unmountRef = React.useRef();
|
|
35
|
-
const unmountProgressRef = React.useRef(false);
|
|
36
35
|
const interval = hooks.useInterval(() => {
|
|
37
36
|
setProgress((amount) => {
|
|
38
37
|
let next = 0;
|
|
@@ -47,88 +46,80 @@ function NProgress({
|
|
|
47
46
|
}
|
|
48
47
|
return amount + next;
|
|
49
48
|
});
|
|
50
|
-
},
|
|
51
|
-
const cancelUnmount = () => {
|
|
52
|
-
if (unmountRef.current) {
|
|
53
|
-
window.clearTimeout(unmountRef.current);
|
|
54
|
-
unmountRef.current = null;
|
|
55
|
-
}
|
|
56
|
-
if (resetRef.current) {
|
|
57
|
-
window.clearTimeout(resetRef.current);
|
|
58
|
-
resetRef.current = null;
|
|
59
|
-
}
|
|
60
|
-
setMounted(true);
|
|
61
|
-
};
|
|
49
|
+
}, stepInterval);
|
|
62
50
|
const set = (value) => setProgress(value);
|
|
63
|
-
const
|
|
64
|
-
const
|
|
51
|
+
const increment = (value) => setProgress((c) => Math.min(c + value, 100));
|
|
52
|
+
const decrement = (value) => setProgress((c) => Math.max(c - value, 0));
|
|
65
53
|
const start = () => {
|
|
66
54
|
interval.stop();
|
|
67
55
|
interval.start();
|
|
68
56
|
};
|
|
69
57
|
const stop = () => interval.stop();
|
|
70
58
|
const reset = () => {
|
|
71
|
-
|
|
59
|
+
setUnmountProgress(true);
|
|
72
60
|
stop();
|
|
73
61
|
setProgress(0);
|
|
74
|
-
|
|
75
|
-
};
|
|
76
|
-
const ctx = {
|
|
77
|
-
set,
|
|
78
|
-
add,
|
|
79
|
-
decrease,
|
|
80
|
-
start,
|
|
81
|
-
stop,
|
|
82
|
-
reset
|
|
62
|
+
window.setTimeout(() => setUnmountProgress(false), 0);
|
|
83
63
|
};
|
|
84
|
-
const
|
|
85
|
-
unmountRef.current
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
resetRef.current = window.setTimeout(() => {
|
|
89
|
-
resetRef.current = null;
|
|
90
|
-
reset();
|
|
91
|
-
}, exitTransitionDuration);
|
|
64
|
+
const cancelUnmount = () => {
|
|
65
|
+
if (unmountRef.current) {
|
|
66
|
+
window.clearTimeout(unmountRef.current);
|
|
67
|
+
unmountRef.current = null;
|
|
92
68
|
}
|
|
69
|
+
if (resetRef.current) {
|
|
70
|
+
window.clearTimeout(resetRef.current);
|
|
71
|
+
resetRef.current = null;
|
|
72
|
+
}
|
|
73
|
+
setMounted(true);
|
|
93
74
|
};
|
|
94
75
|
hooks.useDidUpdate(() => {
|
|
95
76
|
if (_progress >= 100) {
|
|
96
77
|
stop();
|
|
97
|
-
onFinish
|
|
98
|
-
unmountRef.current = window.setTimeout(
|
|
78
|
+
onFinish == null ? void 0 : onFinish();
|
|
79
|
+
unmountRef.current = window.setTimeout(() => {
|
|
80
|
+
unmountRef.current = null;
|
|
81
|
+
setMounted(false);
|
|
82
|
+
if (autoReset) {
|
|
83
|
+
resetRef.current = window.setTimeout(() => {
|
|
84
|
+
resetRef.current = null;
|
|
85
|
+
reset();
|
|
86
|
+
}, reducedMotion ? 0 : exitTransitionDuration);
|
|
87
|
+
}
|
|
88
|
+
}, exitTimeout);
|
|
99
89
|
} else if (!mounted) {
|
|
100
90
|
cancelUnmount();
|
|
101
91
|
}
|
|
102
92
|
}, [_progress]);
|
|
103
|
-
events.
|
|
93
|
+
events.useNavigationProgressEvents({ start, stop, set, increment, decrement, reset });
|
|
104
94
|
return /* @__PURE__ */ React__default.createElement(core.OptionalPortal, {
|
|
105
|
-
withinPortal
|
|
106
|
-
|
|
107
|
-
}, !unmountProgressRef.current && /* @__PURE__ */ React__default.createElement(core.Progress, {
|
|
95
|
+
withinPortal
|
|
96
|
+
}, !unmountProgress && /* @__PURE__ */ React__default.createElement(core.Progress, {
|
|
108
97
|
radius: 0,
|
|
109
98
|
value: _progress,
|
|
110
99
|
size,
|
|
111
100
|
color,
|
|
112
101
|
styles: {
|
|
113
102
|
root: {
|
|
103
|
+
position: "fixed",
|
|
114
104
|
top: 0,
|
|
115
105
|
left: 0,
|
|
116
|
-
|
|
117
|
-
|
|
106
|
+
right: 0,
|
|
107
|
+
zIndex,
|
|
118
108
|
backgroundColor: "transparent",
|
|
119
109
|
transitionProperty: "opacity",
|
|
120
|
-
transitionTimingFunction:
|
|
110
|
+
transitionTimingFunction: theme.transitionTimingFunction,
|
|
121
111
|
transitionDuration: `${reducedMotion || _progress !== 100 ? 0 : exitTransitionDuration}ms`,
|
|
122
112
|
opacity: mounted ? 1 : 0
|
|
123
113
|
},
|
|
124
114
|
bar: {
|
|
115
|
+
position: "relative",
|
|
125
116
|
transitionProperty: "width",
|
|
126
|
-
transitionTimingFunction:
|
|
127
|
-
transitionDuration: `${reducedMotion || !mounted ? 0 :
|
|
117
|
+
transitionTimingFunction: theme.transitionTimingFunction,
|
|
118
|
+
transitionDuration: `${reducedMotion || !mounted ? 0 : transitionDuration}ms`
|
|
128
119
|
}
|
|
129
120
|
}
|
|
130
121
|
}));
|
|
131
122
|
}
|
|
132
123
|
|
|
133
|
-
exports.
|
|
134
|
-
//# sourceMappingURL=
|
|
124
|
+
exports.NavigationProgress = NavigationProgress;
|
|
125
|
+
//# sourceMappingURL=NavigationProgress.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NavigationProgress.js","sources":["../src/NavigationProgress.tsx"],"sourcesContent":["import {\n OptionalPortal,\n Progress,\n useMantineTheme,\n getDefaultZIndex,\n MantineColor,\n} from '@mantine/core';\nimport { useDidUpdate, useInterval, useReducedMotion } from '@mantine/hooks';\nimport React, { useRef, useState } from 'react';\nimport { useNavigationProgressEvents } from './events';\n\nexport interface NavigationProgressProps {\n /** The default progress */\n initialProgress?: number;\n\n /** Key of theme.colors of any other valid CSS color */\n color?: MantineColor;\n\n /** The height of the progressbar in px */\n size?: number;\n\n /** Called when the progressbar reaches 100% */\n onFinish?(): void;\n\n /** Determines whether progress should be automatically reset when 100% is reached */\n autoReset?: boolean;\n\n /** Step interval in ms */\n stepInterval?: number;\n\n /** Transition duration in ms */\n transitionDuration?: number;\n\n /** Number of ms that should elapse before progressbar is hidden after reaching 100% */\n exitTimeout?: number;\n\n /** Exit transition duration in ms */\n exitTransitionDuration?: number;\n\n /** Determines whether progressbar should be rendered within Portal, defaults to true */\n withinPortal?: boolean;\n\n /** Progressbar z-index */\n zIndex?: React.CSSProperties['zIndex'];\n}\n\nexport function NavigationProgress({\n initialProgress = 0,\n color,\n size = 3,\n stepInterval = 500,\n transitionDuration = 300,\n exitTimeout = 500,\n exitTransitionDuration = 400,\n onFinish,\n autoReset = false,\n withinPortal = true,\n zIndex = getDefaultZIndex('max'),\n}: NavigationProgressProps) {\n const theme = useMantineTheme();\n const shouldReduceMotion = useReducedMotion();\n const reducedMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n const [_progress, setProgress] = useState(initialProgress);\n const [mounted, setMounted] = useState(true);\n const [unmountProgress, setUnmountProgress] = useState(false);\n const resetRef = useRef<number>();\n const unmountRef = useRef<number>();\n\n const interval = useInterval(() => {\n setProgress((amount) => {\n let next = 0;\n if (amount >= 0 && amount <= 20) {\n next = 10;\n } else if (amount >= 20 && amount <= 50) {\n next = 4;\n } else if (amount >= 50 && amount <= 80) {\n next = 2;\n } else if (amount >= 80 && amount <= 99) {\n next = 0.5;\n }\n\n return amount + next;\n });\n }, stepInterval);\n\n const set = (value: React.SetStateAction<number>) => setProgress(value);\n const increment = (value: number) => setProgress((c) => Math.min(c + value, 100));\n const decrement = (value: number) => setProgress((c) => Math.max(c - value, 0));\n const start = () => {\n interval.stop();\n interval.start();\n };\n const stop = () => interval.stop();\n const reset = () => {\n setUnmountProgress(true);\n stop();\n setProgress(0);\n window.setTimeout(() => setUnmountProgress(false), 0);\n };\n\n const cancelUnmount = () => {\n if (unmountRef.current) {\n window.clearTimeout(unmountRef.current);\n unmountRef.current = null;\n }\n if (resetRef.current) {\n window.clearTimeout(resetRef.current);\n resetRef.current = null;\n }\n\n setMounted(true);\n };\n\n useDidUpdate(() => {\n if (_progress >= 100) {\n stop();\n onFinish?.();\n\n unmountRef.current = window.setTimeout(() => {\n unmountRef.current = null;\n setMounted(false);\n\n if (autoReset) {\n resetRef.current = window.setTimeout(\n () => {\n resetRef.current = null;\n reset();\n },\n reducedMotion ? 0 : exitTransitionDuration\n );\n }\n }, exitTimeout);\n } else if (!mounted) {\n cancelUnmount();\n }\n }, [_progress]);\n\n useNavigationProgressEvents({ start, stop, set, increment, decrement, reset });\n\n return (\n <OptionalPortal withinPortal={withinPortal}>\n {!unmountProgress && (\n <Progress\n radius={0}\n value={_progress}\n size={size}\n color={color}\n styles={{\n root: {\n position: 'fixed',\n top: 0,\n left: 0,\n right: 0,\n zIndex,\n backgroundColor: 'transparent',\n transitionProperty: 'opacity',\n transitionTimingFunction: theme.transitionTimingFunction,\n transitionDuration: `${\n reducedMotion || _progress !== 100 ? 0 : exitTransitionDuration\n }ms`,\n opacity: mounted ? 1 : 0,\n },\n bar: {\n position: 'relative',\n transitionProperty: 'width',\n transitionTimingFunction: theme.transitionTimingFunction,\n transitionDuration: `${reducedMotion || !mounted ? 0 : transitionDuration}ms`,\n },\n }}\n />\n )}\n </OptionalPortal>\n );\n}\n"],"names":["getDefaultZIndex","useMantineTheme","useReducedMotion","useState","useRef","useInterval","useDidUpdate","useNavigationProgressEvents","React","OptionalPortal","Progress"],"mappings":"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"}
|
package/cjs/events.js
CHANGED
|
@@ -2,65 +2,22 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var utils = require('@mantine/utils');
|
|
6
6
|
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
};
|
|
15
|
-
function createEvent(type, detail) {
|
|
16
|
-
return new CustomEvent(type, { detail });
|
|
17
|
-
}
|
|
18
|
-
function addNProgress(progress) {
|
|
19
|
-
window.dispatchEvent(createEvent(NPROGRESS_EVENTS.add, progress));
|
|
20
|
-
}
|
|
21
|
-
function decreaseNProgress(progress) {
|
|
22
|
-
window.dispatchEvent(createEvent(NPROGRESS_EVENTS.decrease, progress));
|
|
23
|
-
}
|
|
24
|
-
function setNProgress(progress) {
|
|
25
|
-
window.dispatchEvent(createEvent(NPROGRESS_EVENTS.set, progress));
|
|
26
|
-
}
|
|
27
|
-
function startNProgress() {
|
|
28
|
-
window.dispatchEvent(createEvent(NPROGRESS_EVENTS.start));
|
|
29
|
-
}
|
|
30
|
-
function stopNProgress() {
|
|
31
|
-
window.dispatchEvent(createEvent(NPROGRESS_EVENTS.stop));
|
|
32
|
-
}
|
|
33
|
-
function resetNProgress() {
|
|
34
|
-
window.dispatchEvent(createEvent(NPROGRESS_EVENTS.reset));
|
|
35
|
-
}
|
|
36
|
-
function useNProgressEvents(ctx) {
|
|
37
|
-
const events = {
|
|
38
|
-
add: (event) => ctx.add(event.detail),
|
|
39
|
-
decrease: (event) => ctx.decrease(event.detail),
|
|
40
|
-
set: (event) => ctx.set(event.detail),
|
|
41
|
-
start: ctx.start,
|
|
42
|
-
stop: ctx.stop,
|
|
43
|
-
reset: ctx.reset
|
|
44
|
-
};
|
|
45
|
-
React.useEffect(() => {
|
|
46
|
-
Object.keys(events).forEach((event) => {
|
|
47
|
-
window.addEventListener(NPROGRESS_EVENTS[event], events[event]);
|
|
48
|
-
});
|
|
49
|
-
return () => {
|
|
50
|
-
Object.keys(events).forEach((event) => {
|
|
51
|
-
window.removeEventListener(NPROGRESS_EVENTS[event], events[event]);
|
|
52
|
-
});
|
|
53
|
-
};
|
|
54
|
-
}, []);
|
|
55
|
-
}
|
|
7
|
+
const [useNavigationProgressEvents, createEvent] = utils.createUseExternalEvents("mantine-nprogress");
|
|
8
|
+
const startNavigationProgress = createEvent("start");
|
|
9
|
+
const stopNavigationProgress = createEvent("stop");
|
|
10
|
+
const resetNavigationProgress = createEvent("reset");
|
|
11
|
+
const setNavigationProgress = createEvent("set");
|
|
12
|
+
const incrementNavigationProgress = createEvent("increment");
|
|
13
|
+
const decrementNavigationProgress = createEvent("decrement");
|
|
56
14
|
|
|
57
|
-
exports.NPROGRESS_EVENTS = NPROGRESS_EVENTS;
|
|
58
|
-
exports.addNProgress = addNProgress;
|
|
59
15
|
exports.createEvent = createEvent;
|
|
60
|
-
exports.
|
|
61
|
-
exports.
|
|
62
|
-
exports.
|
|
63
|
-
exports.
|
|
64
|
-
exports.
|
|
65
|
-
exports.
|
|
16
|
+
exports.decrementNavigationProgress = decrementNavigationProgress;
|
|
17
|
+
exports.incrementNavigationProgress = incrementNavigationProgress;
|
|
18
|
+
exports.resetNavigationProgress = resetNavigationProgress;
|
|
19
|
+
exports.setNavigationProgress = setNavigationProgress;
|
|
20
|
+
exports.startNavigationProgress = startNavigationProgress;
|
|
21
|
+
exports.stopNavigationProgress = stopNavigationProgress;
|
|
22
|
+
exports.useNavigationProgressEvents = useNavigationProgressEvents;
|
|
66
23
|
//# sourceMappingURL=events.js.map
|
package/cjs/events.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"events.js","sources":["../src/events.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"events.js","sources":["../src/events.ts"],"sourcesContent":["import { createUseExternalEvents } from '@mantine/utils';\n\nexport type NavigationProgressEvents = {\n start(): void;\n stop(): void;\n set(progress: number): void;\n increment(progress: number): void;\n decrement(progress: number): void;\n reset(): void;\n};\n\nexport const [useNavigationProgressEvents, createEvent] =\n createUseExternalEvents<NavigationProgressEvents>('mantine-nprogress');\n\nexport const startNavigationProgress = createEvent('start');\nexport const stopNavigationProgress = createEvent('stop');\nexport const resetNavigationProgress = createEvent('reset');\nexport const setNavigationProgress = createEvent('set');\nexport const incrementNavigationProgress = createEvent('increment');\nexport const decrementNavigationProgress = createEvent('decrement');\n"],"names":["createUseExternalEvents"],"mappings":";;;;;;AACY,MAAC,CAAC,2BAA2B,EAAE,WAAW,CAAC,GAAGA,6BAAuB,CAAC,mBAAmB,EAAE;AAC3F,MAAC,uBAAuB,GAAG,WAAW,CAAC,OAAO,EAAE;AAChD,MAAC,sBAAsB,GAAG,WAAW,CAAC,MAAM,EAAE;AAC9C,MAAC,uBAAuB,GAAG,WAAW,CAAC,OAAO,EAAE;AAChD,MAAC,qBAAqB,GAAG,WAAW,CAAC,KAAK,EAAE;AAC5C,MAAC,2BAA2B,GAAG,WAAW,CAAC,WAAW,EAAE;AACxD,MAAC,2BAA2B,GAAG,WAAW,CAAC,WAAW;;;;;;;;;;;"}
|
package/cjs/index.js
CHANGED
|
@@ -2,16 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var NavigationProgress = require('./NavigationProgress.js');
|
|
6
6
|
var events = require('./events.js');
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
|
|
10
|
-
exports.
|
|
11
|
-
exports.
|
|
12
|
-
exports.
|
|
13
|
-
exports.
|
|
14
|
-
exports.
|
|
15
|
-
exports.
|
|
16
|
-
exports.
|
|
10
|
+
exports.NavigationProgress = NavigationProgress.NavigationProgress;
|
|
11
|
+
exports.decrementNavigationProgress = events.decrementNavigationProgress;
|
|
12
|
+
exports.incrementNavigationProgress = events.incrementNavigationProgress;
|
|
13
|
+
exports.resetNavigationProgress = events.resetNavigationProgress;
|
|
14
|
+
exports.setNavigationProgress = events.setNavigationProgress;
|
|
15
|
+
exports.startNavigationProgress = events.startNavigationProgress;
|
|
16
|
+
exports.stopNavigationProgress = events.stopNavigationProgress;
|
|
17
17
|
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import { getDefaultZIndex, useMantineTheme, OptionalPortal, Progress } from '@mantine/core';
|
|
2
|
+
import { useReducedMotion, useInterval, useDidUpdate } from '@mantine/hooks';
|
|
3
|
+
import React, { useState, useRef } from 'react';
|
|
4
|
+
import { useNavigationProgressEvents } from './events.js';
|
|
5
|
+
|
|
6
|
+
function NavigationProgress({
|
|
7
|
+
initialProgress = 0,
|
|
8
|
+
color,
|
|
9
|
+
size = 3,
|
|
10
|
+
stepInterval = 500,
|
|
11
|
+
transitionDuration = 300,
|
|
12
|
+
exitTimeout = 500,
|
|
13
|
+
exitTransitionDuration = 400,
|
|
14
|
+
onFinish,
|
|
15
|
+
autoReset = false,
|
|
16
|
+
withinPortal = true,
|
|
17
|
+
zIndex = getDefaultZIndex("max")
|
|
18
|
+
}) {
|
|
19
|
+
const theme = useMantineTheme();
|
|
20
|
+
const shouldReduceMotion = useReducedMotion();
|
|
21
|
+
const reducedMotion = theme.respectReducedMotion ? shouldReduceMotion : false;
|
|
22
|
+
const [_progress, setProgress] = useState(initialProgress);
|
|
23
|
+
const [mounted, setMounted] = useState(true);
|
|
24
|
+
const [unmountProgress, setUnmountProgress] = useState(false);
|
|
25
|
+
const resetRef = useRef();
|
|
26
|
+
const unmountRef = useRef();
|
|
27
|
+
const interval = useInterval(() => {
|
|
28
|
+
setProgress((amount) => {
|
|
29
|
+
let next = 0;
|
|
30
|
+
if (amount >= 0 && amount <= 20) {
|
|
31
|
+
next = 10;
|
|
32
|
+
} else if (amount >= 20 && amount <= 50) {
|
|
33
|
+
next = 4;
|
|
34
|
+
} else if (amount >= 50 && amount <= 80) {
|
|
35
|
+
next = 2;
|
|
36
|
+
} else if (amount >= 80 && amount <= 99) {
|
|
37
|
+
next = 0.5;
|
|
38
|
+
}
|
|
39
|
+
return amount + next;
|
|
40
|
+
});
|
|
41
|
+
}, stepInterval);
|
|
42
|
+
const set = (value) => setProgress(value);
|
|
43
|
+
const increment = (value) => setProgress((c) => Math.min(c + value, 100));
|
|
44
|
+
const decrement = (value) => setProgress((c) => Math.max(c - value, 0));
|
|
45
|
+
const start = () => {
|
|
46
|
+
interval.stop();
|
|
47
|
+
interval.start();
|
|
48
|
+
};
|
|
49
|
+
const stop = () => interval.stop();
|
|
50
|
+
const reset = () => {
|
|
51
|
+
setUnmountProgress(true);
|
|
52
|
+
stop();
|
|
53
|
+
setProgress(0);
|
|
54
|
+
window.setTimeout(() => setUnmountProgress(false), 0);
|
|
55
|
+
};
|
|
56
|
+
const cancelUnmount = () => {
|
|
57
|
+
if (unmountRef.current) {
|
|
58
|
+
window.clearTimeout(unmountRef.current);
|
|
59
|
+
unmountRef.current = null;
|
|
60
|
+
}
|
|
61
|
+
if (resetRef.current) {
|
|
62
|
+
window.clearTimeout(resetRef.current);
|
|
63
|
+
resetRef.current = null;
|
|
64
|
+
}
|
|
65
|
+
setMounted(true);
|
|
66
|
+
};
|
|
67
|
+
useDidUpdate(() => {
|
|
68
|
+
if (_progress >= 100) {
|
|
69
|
+
stop();
|
|
70
|
+
onFinish == null ? void 0 : onFinish();
|
|
71
|
+
unmountRef.current = window.setTimeout(() => {
|
|
72
|
+
unmountRef.current = null;
|
|
73
|
+
setMounted(false);
|
|
74
|
+
if (autoReset) {
|
|
75
|
+
resetRef.current = window.setTimeout(() => {
|
|
76
|
+
resetRef.current = null;
|
|
77
|
+
reset();
|
|
78
|
+
}, reducedMotion ? 0 : exitTransitionDuration);
|
|
79
|
+
}
|
|
80
|
+
}, exitTimeout);
|
|
81
|
+
} else if (!mounted) {
|
|
82
|
+
cancelUnmount();
|
|
83
|
+
}
|
|
84
|
+
}, [_progress]);
|
|
85
|
+
useNavigationProgressEvents({ start, stop, set, increment, decrement, reset });
|
|
86
|
+
return /* @__PURE__ */ React.createElement(OptionalPortal, {
|
|
87
|
+
withinPortal
|
|
88
|
+
}, !unmountProgress && /* @__PURE__ */ React.createElement(Progress, {
|
|
89
|
+
radius: 0,
|
|
90
|
+
value: _progress,
|
|
91
|
+
size,
|
|
92
|
+
color,
|
|
93
|
+
styles: {
|
|
94
|
+
root: {
|
|
95
|
+
position: "fixed",
|
|
96
|
+
top: 0,
|
|
97
|
+
left: 0,
|
|
98
|
+
right: 0,
|
|
99
|
+
zIndex,
|
|
100
|
+
backgroundColor: "transparent",
|
|
101
|
+
transitionProperty: "opacity",
|
|
102
|
+
transitionTimingFunction: theme.transitionTimingFunction,
|
|
103
|
+
transitionDuration: `${reducedMotion || _progress !== 100 ? 0 : exitTransitionDuration}ms`,
|
|
104
|
+
opacity: mounted ? 1 : 0
|
|
105
|
+
},
|
|
106
|
+
bar: {
|
|
107
|
+
position: "relative",
|
|
108
|
+
transitionProperty: "width",
|
|
109
|
+
transitionTimingFunction: theme.transitionTimingFunction,
|
|
110
|
+
transitionDuration: `${reducedMotion || !mounted ? 0 : transitionDuration}ms`
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
}));
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
export { NavigationProgress };
|
|
117
|
+
//# sourceMappingURL=NavigationProgress.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NavigationProgress.js","sources":["../src/NavigationProgress.tsx"],"sourcesContent":["import {\n OptionalPortal,\n Progress,\n useMantineTheme,\n getDefaultZIndex,\n MantineColor,\n} from '@mantine/core';\nimport { useDidUpdate, useInterval, useReducedMotion } from '@mantine/hooks';\nimport React, { useRef, useState } from 'react';\nimport { useNavigationProgressEvents } from './events';\n\nexport interface NavigationProgressProps {\n /** The default progress */\n initialProgress?: number;\n\n /** Key of theme.colors of any other valid CSS color */\n color?: MantineColor;\n\n /** The height of the progressbar in px */\n size?: number;\n\n /** Called when the progressbar reaches 100% */\n onFinish?(): void;\n\n /** Determines whether progress should be automatically reset when 100% is reached */\n autoReset?: boolean;\n\n /** Step interval in ms */\n stepInterval?: number;\n\n /** Transition duration in ms */\n transitionDuration?: number;\n\n /** Number of ms that should elapse before progressbar is hidden after reaching 100% */\n exitTimeout?: number;\n\n /** Exit transition duration in ms */\n exitTransitionDuration?: number;\n\n /** Determines whether progressbar should be rendered within Portal, defaults to true */\n withinPortal?: boolean;\n\n /** Progressbar z-index */\n zIndex?: React.CSSProperties['zIndex'];\n}\n\nexport function NavigationProgress({\n initialProgress = 0,\n color,\n size = 3,\n stepInterval = 500,\n transitionDuration = 300,\n exitTimeout = 500,\n exitTransitionDuration = 400,\n onFinish,\n autoReset = false,\n withinPortal = true,\n zIndex = getDefaultZIndex('max'),\n}: NavigationProgressProps) {\n const theme = useMantineTheme();\n const shouldReduceMotion = useReducedMotion();\n const reducedMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n const [_progress, setProgress] = useState(initialProgress);\n const [mounted, setMounted] = useState(true);\n const [unmountProgress, setUnmountProgress] = useState(false);\n const resetRef = useRef<number>();\n const unmountRef = useRef<number>();\n\n const interval = useInterval(() => {\n setProgress((amount) => {\n let next = 0;\n if (amount >= 0 && amount <= 20) {\n next = 10;\n } else if (amount >= 20 && amount <= 50) {\n next = 4;\n } else if (amount >= 50 && amount <= 80) {\n next = 2;\n } else if (amount >= 80 && amount <= 99) {\n next = 0.5;\n }\n\n return amount + next;\n });\n }, stepInterval);\n\n const set = (value: React.SetStateAction<number>) => setProgress(value);\n const increment = (value: number) => setProgress((c) => Math.min(c + value, 100));\n const decrement = (value: number) => setProgress((c) => Math.max(c - value, 0));\n const start = () => {\n interval.stop();\n interval.start();\n };\n const stop = () => interval.stop();\n const reset = () => {\n setUnmountProgress(true);\n stop();\n setProgress(0);\n window.setTimeout(() => setUnmountProgress(false), 0);\n };\n\n const cancelUnmount = () => {\n if (unmountRef.current) {\n window.clearTimeout(unmountRef.current);\n unmountRef.current = null;\n }\n if (resetRef.current) {\n window.clearTimeout(resetRef.current);\n resetRef.current = null;\n }\n\n setMounted(true);\n };\n\n useDidUpdate(() => {\n if (_progress >= 100) {\n stop();\n onFinish?.();\n\n unmountRef.current = window.setTimeout(() => {\n unmountRef.current = null;\n setMounted(false);\n\n if (autoReset) {\n resetRef.current = window.setTimeout(\n () => {\n resetRef.current = null;\n reset();\n },\n reducedMotion ? 0 : exitTransitionDuration\n );\n }\n }, exitTimeout);\n } else if (!mounted) {\n cancelUnmount();\n }\n }, [_progress]);\n\n useNavigationProgressEvents({ start, stop, set, increment, decrement, reset });\n\n return (\n <OptionalPortal withinPortal={withinPortal}>\n {!unmountProgress && (\n <Progress\n radius={0}\n value={_progress}\n size={size}\n color={color}\n styles={{\n root: {\n position: 'fixed',\n top: 0,\n left: 0,\n right: 0,\n zIndex,\n backgroundColor: 'transparent',\n transitionProperty: 'opacity',\n transitionTimingFunction: theme.transitionTimingFunction,\n transitionDuration: `${\n reducedMotion || _progress !== 100 ? 0 : exitTransitionDuration\n }ms`,\n opacity: mounted ? 1 : 0,\n },\n bar: {\n position: 'relative',\n transitionProperty: 'width',\n transitionTimingFunction: theme.transitionTimingFunction,\n transitionDuration: `${reducedMotion || !mounted ? 0 : transitionDuration}ms`,\n },\n }}\n />\n )}\n </OptionalPortal>\n );\n}\n"],"names":[],"mappings":"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"}
|
package/esm/events.js
CHANGED
|
@@ -1,54 +1,12 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { createUseExternalEvents } from '@mantine/utils';
|
|
2
2
|
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
};
|
|
11
|
-
function createEvent(type, detail) {
|
|
12
|
-
return new CustomEvent(type, { detail });
|
|
13
|
-
}
|
|
14
|
-
function addNProgress(progress) {
|
|
15
|
-
window.dispatchEvent(createEvent(NPROGRESS_EVENTS.add, progress));
|
|
16
|
-
}
|
|
17
|
-
function decreaseNProgress(progress) {
|
|
18
|
-
window.dispatchEvent(createEvent(NPROGRESS_EVENTS.decrease, progress));
|
|
19
|
-
}
|
|
20
|
-
function setNProgress(progress) {
|
|
21
|
-
window.dispatchEvent(createEvent(NPROGRESS_EVENTS.set, progress));
|
|
22
|
-
}
|
|
23
|
-
function startNProgress() {
|
|
24
|
-
window.dispatchEvent(createEvent(NPROGRESS_EVENTS.start));
|
|
25
|
-
}
|
|
26
|
-
function stopNProgress() {
|
|
27
|
-
window.dispatchEvent(createEvent(NPROGRESS_EVENTS.stop));
|
|
28
|
-
}
|
|
29
|
-
function resetNProgress() {
|
|
30
|
-
window.dispatchEvent(createEvent(NPROGRESS_EVENTS.reset));
|
|
31
|
-
}
|
|
32
|
-
function useNProgressEvents(ctx) {
|
|
33
|
-
const events = {
|
|
34
|
-
add: (event) => ctx.add(event.detail),
|
|
35
|
-
decrease: (event) => ctx.decrease(event.detail),
|
|
36
|
-
set: (event) => ctx.set(event.detail),
|
|
37
|
-
start: ctx.start,
|
|
38
|
-
stop: ctx.stop,
|
|
39
|
-
reset: ctx.reset
|
|
40
|
-
};
|
|
41
|
-
useEffect(() => {
|
|
42
|
-
Object.keys(events).forEach((event) => {
|
|
43
|
-
window.addEventListener(NPROGRESS_EVENTS[event], events[event]);
|
|
44
|
-
});
|
|
45
|
-
return () => {
|
|
46
|
-
Object.keys(events).forEach((event) => {
|
|
47
|
-
window.removeEventListener(NPROGRESS_EVENTS[event], events[event]);
|
|
48
|
-
});
|
|
49
|
-
};
|
|
50
|
-
}, []);
|
|
51
|
-
}
|
|
3
|
+
const [useNavigationProgressEvents, createEvent] = createUseExternalEvents("mantine-nprogress");
|
|
4
|
+
const startNavigationProgress = createEvent("start");
|
|
5
|
+
const stopNavigationProgress = createEvent("stop");
|
|
6
|
+
const resetNavigationProgress = createEvent("reset");
|
|
7
|
+
const setNavigationProgress = createEvent("set");
|
|
8
|
+
const incrementNavigationProgress = createEvent("increment");
|
|
9
|
+
const decrementNavigationProgress = createEvent("decrement");
|
|
52
10
|
|
|
53
|
-
export {
|
|
11
|
+
export { createEvent, decrementNavigationProgress, incrementNavigationProgress, resetNavigationProgress, setNavigationProgress, startNavigationProgress, stopNavigationProgress, useNavigationProgressEvents };
|
|
54
12
|
//# sourceMappingURL=events.js.map
|
package/esm/events.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"events.js","sources":["../src/events.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"events.js","sources":["../src/events.ts"],"sourcesContent":["import { createUseExternalEvents } from '@mantine/utils';\n\nexport type NavigationProgressEvents = {\n start(): void;\n stop(): void;\n set(progress: number): void;\n increment(progress: number): void;\n decrement(progress: number): void;\n reset(): void;\n};\n\nexport const [useNavigationProgressEvents, createEvent] =\n createUseExternalEvents<NavigationProgressEvents>('mantine-nprogress');\n\nexport const startNavigationProgress = createEvent('start');\nexport const stopNavigationProgress = createEvent('stop');\nexport const resetNavigationProgress = createEvent('reset');\nexport const setNavigationProgress = createEvent('set');\nexport const incrementNavigationProgress = createEvent('increment');\nexport const decrementNavigationProgress = createEvent('decrement');\n"],"names":[],"mappings":";;AACY,MAAC,CAAC,2BAA2B,EAAE,WAAW,CAAC,GAAG,uBAAuB,CAAC,mBAAmB,EAAE;AAC3F,MAAC,uBAAuB,GAAG,WAAW,CAAC,OAAO,EAAE;AAChD,MAAC,sBAAsB,GAAG,WAAW,CAAC,MAAM,EAAE;AAC9C,MAAC,uBAAuB,GAAG,WAAW,CAAC,OAAO,EAAE;AAChD,MAAC,qBAAqB,GAAG,WAAW,CAAC,KAAK,EAAE;AAC5C,MAAC,2BAA2B,GAAG,WAAW,CAAC,WAAW,EAAE;AACxD,MAAC,2BAA2B,GAAG,WAAW,CAAC,WAAW;;;;"}
|
package/esm/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export {
|
|
1
|
+
export { NavigationProgress } from './NavigationProgress.js';
|
|
2
|
+
export { decrementNavigationProgress, incrementNavigationProgress, resetNavigationProgress, setNavigationProgress, startNavigationProgress, stopNavigationProgress } from './events.js';
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { MantineColor } from '@mantine/core';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export interface NavigationProgressProps {
|
|
4
|
+
/** The default progress */
|
|
5
|
+
initialProgress?: number;
|
|
6
|
+
/** Key of theme.colors of any other valid CSS color */
|
|
7
|
+
color?: MantineColor;
|
|
8
|
+
/** The height of the progressbar in px */
|
|
9
|
+
size?: number;
|
|
10
|
+
/** Called when the progressbar reaches 100% */
|
|
11
|
+
onFinish?(): void;
|
|
12
|
+
/** Determines whether progress should be automatically reset when 100% is reached */
|
|
13
|
+
autoReset?: boolean;
|
|
14
|
+
/** Step interval in ms */
|
|
15
|
+
stepInterval?: number;
|
|
16
|
+
/** Transition duration in ms */
|
|
17
|
+
transitionDuration?: number;
|
|
18
|
+
/** Number of ms that should elapse before progressbar is hidden after reaching 100% */
|
|
19
|
+
exitTimeout?: number;
|
|
20
|
+
/** Exit transition duration in ms */
|
|
21
|
+
exitTransitionDuration?: number;
|
|
22
|
+
/** Determines whether progressbar should be rendered within Portal, defaults to true */
|
|
23
|
+
withinPortal?: boolean;
|
|
24
|
+
/** Progressbar z-index */
|
|
25
|
+
zIndex?: React.CSSProperties['zIndex'];
|
|
26
|
+
}
|
|
27
|
+
export declare function NavigationProgress({ initialProgress, color, size, stepInterval, transitionDuration, exitTimeout, exitTransitionDuration, onFinish, autoReset, withinPortal, zIndex, }: NavigationProgressProps): JSX.Element;
|
|
28
|
+
//# sourceMappingURL=NavigationProgress.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NavigationProgress.d.ts","sourceRoot":"","sources":["../src/NavigationProgress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,YAAY,EACb,MAAM,eAAe,CAAC;AAEvB,OAAO,KAA2B,MAAM,OAAO,CAAC;AAGhD,MAAM,WAAW,uBAAuB;IACtC,2BAA2B;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,uDAAuD;IACvD,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,+CAA+C;IAC/C,QAAQ,CAAC,IAAI,IAAI,CAAC;IAElB,qFAAqF;IACrF,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,gCAAgC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B,uFAAuF;IACvF,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,qCAAqC;IACrC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC,wFAAwF;IACxF,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;CACxC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,eAAmB,EACnB,KAAK,EACL,IAAQ,EACR,YAAkB,EAClB,kBAAwB,EACxB,WAAiB,EACjB,sBAA4B,EAC5B,QAAQ,EACR,SAAiB,EACjB,YAAmB,EACnB,MAAgC,GACjC,EAAE,uBAAuB,eAmHzB"}
|
package/lib/events.d.ts
CHANGED
|
@@ -1,28 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
decrease: (progress: number) => void;
|
|
9
|
-
reset: () => void;
|
|
10
|
-
}
|
|
11
|
-
export declare const NPROGRESS_EVENTS: {
|
|
12
|
-
readonly add: "mantine:add-nprogress";
|
|
13
|
-
readonly decrease: "mantine:decrease-nprogress";
|
|
14
|
-
readonly set: "mantine:set-nprogress";
|
|
15
|
-
readonly start: "mantine:start-nprogress";
|
|
16
|
-
readonly stop: "mantine:stop-nprogress";
|
|
17
|
-
readonly reset: "mantine:reset-nprogress";
|
|
1
|
+
export declare type NavigationProgressEvents = {
|
|
2
|
+
start(): void;
|
|
3
|
+
stop(): void;
|
|
4
|
+
set(progress: number): void;
|
|
5
|
+
increment(progress: number): void;
|
|
6
|
+
decrement(progress: number): void;
|
|
7
|
+
reset(): void;
|
|
18
8
|
};
|
|
19
|
-
export declare
|
|
20
|
-
export declare
|
|
21
|
-
export declare
|
|
22
|
-
export declare
|
|
23
|
-
export declare
|
|
24
|
-
export declare
|
|
25
|
-
export declare
|
|
26
|
-
export declare function useNProgressEvents(ctx: NProgressProps): void;
|
|
27
|
-
export {};
|
|
9
|
+
export declare const useNavigationProgressEvents: (events: NavigationProgressEvents) => void, createEvent: <EventKey extends keyof NavigationProgressEvents>(event: EventKey) => (...payload: Parameters<NavigationProgressEvents[EventKey]>[0] extends undefined ? [undefined?] : [Parameters<NavigationProgressEvents[EventKey]>[0]]) => void;
|
|
10
|
+
export declare const startNavigationProgress: (payload_0?: undefined) => void;
|
|
11
|
+
export declare const stopNavigationProgress: (payload_0?: undefined) => void;
|
|
12
|
+
export declare const resetNavigationProgress: (payload_0?: undefined) => void;
|
|
13
|
+
export declare const setNavigationProgress: (payload_0: number) => void;
|
|
14
|
+
export declare const incrementNavigationProgress: (payload_0: number) => void;
|
|
15
|
+
export declare const decrementNavigationProgress: (payload_0: number) => void;
|
|
28
16
|
//# sourceMappingURL=events.d.ts.map
|
package/lib/events.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../src/events.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../src/events.ts"],"names":[],"mappings":"AAEA,oBAAY,wBAAwB,GAAG;IACrC,KAAK,IAAI,IAAI,CAAC;IACd,IAAI,IAAI,IAAI,CAAC;IACb,GAAG,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,SAAS,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,SAAS,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,KAAK,IAAI,IAAI,CAAC;CACf,CAAC;AAEF,eAAO,MAAO,2BAA2B,8CAAE,WAAW,sOACkB,CAAC;AAEzE,eAAO,MAAM,uBAAuB,iCAAuB,CAAC;AAC5D,eAAO,MAAM,sBAAsB,iCAAsB,CAAC;AAC1D,eAAO,MAAM,uBAAuB,iCAAuB,CAAC;AAC5D,eAAO,MAAM,qBAAqB,6BAAqB,CAAC;AACxD,eAAO,MAAM,2BAA2B,6BAA2B,CAAC;AACpE,eAAO,MAAM,2BAA2B,6BAA2B,CAAC"}
|
package/lib/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export {
|
|
3
|
-
export type {
|
|
1
|
+
export { NavigationProgress } from './NavigationProgress';
|
|
2
|
+
export { startNavigationProgress, stopNavigationProgress, resetNavigationProgress, setNavigationProgress, incrementNavigationProgress, decrementNavigationProgress, } from './events';
|
|
3
|
+
export type { NavigationProgressProps } from './NavigationProgress';
|
|
4
4
|
//# sourceMappingURL=index.d.ts.map
|
package/lib/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EACL,uBAAuB,EACvB,sBAAsB,EACtB,uBAAuB,EACvB,qBAAqB,EACrB,2BAA2B,EAC3B,2BAA2B,GAC5B,MAAM,UAAU,CAAC;AAElB,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mantine/nprogress",
|
|
3
|
-
"description": "
|
|
4
|
-
"version": "5.0.0-alpha.
|
|
3
|
+
"description": "Navigation progress bar",
|
|
4
|
+
"version": "5.0.0-alpha.20",
|
|
5
5
|
"main": "cjs/index.js",
|
|
6
6
|
"module": "esm/index.js",
|
|
7
7
|
"types": "lib/index.d.ts",
|
|
@@ -15,12 +15,13 @@
|
|
|
15
15
|
"directory": "src/mantine-nprogress"
|
|
16
16
|
},
|
|
17
17
|
"peerDependencies": {
|
|
18
|
-
"@mantine/core": "5.0.0-alpha.
|
|
19
|
-
"@mantine/hooks": "5.0.0-alpha.
|
|
20
|
-
"@mantine/styles": "5.0.0-alpha.2",
|
|
18
|
+
"@mantine/core": "5.0.0-alpha.20",
|
|
19
|
+
"@mantine/hooks": "5.0.0-alpha.20",
|
|
21
20
|
"react": ">=16.8.0",
|
|
22
21
|
"react-dom": ">=16.8.0"
|
|
23
22
|
},
|
|
24
|
-
"dependencies": {
|
|
23
|
+
"dependencies": {
|
|
24
|
+
"@mantine/utils": "5.0.0-alpha.20"
|
|
25
|
+
},
|
|
25
26
|
"devDependencies": {}
|
|
26
27
|
}
|
package/cjs/NProgress.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"NProgress.js","sources":["../src/NProgress.tsx"],"sourcesContent":["import { OptionalPortal, Progress } from '@mantine/core';\nimport { useDidUpdate, useInterval, useReducedMotion } from '@mantine/hooks';\nimport { getDefaultZIndex, MantineColor } from '@mantine/styles';\nimport React, { useRef, useState } from 'react';\nimport { useNProgressEvents } from './events';\n\nexport interface NProgressProps {\n /** The default progress */\n defaultProgress?: number;\n\n /** The color of the progressbar */\n color?: MantineColor;\n\n /** The height of the progressbar */\n size?: number;\n\n /** Called when the progress is 100% */\n onFinish?: () => void;\n\n /** Automatically resets the progress when 100% is reached */\n autoReset?: boolean;\n\n /** Step delay in ms */\n stepIntervalTime?: number;\n\n /** Transition function (transition-timing-function) */\n progressTransition?: string;\n\n /** Transition duration in ms */\n progressTransitionDuration?: number;\n\n /** The time when the component should be unmounted after progress is 100% */\n exitTimeout?: number;\n\n /** Exit transition duration in ms */\n exitTransitionDuration?: number;\n\n /** Exit transition function (transition-timing-function)*/\n exitTransition?: string;\n\n /** Determines whether NProgress should be rendered within Portal, defaults to true */\n withinPortal?: boolean;\n\n /** NProgress container z-index */\n zIndex?: number;\n}\n\nexport function NProgress({\n defaultProgress = 0,\n color = 'blue',\n size = 2,\n stepIntervalTime = 500,\n progressTransition = 'ease',\n progressTransitionDuration = 600,\n exitTimeout = 700,\n exitTransitionDuration = 600,\n exitTransition = 'ease',\n onFinish,\n autoReset = false,\n withinPortal = true,\n zIndex = getDefaultZIndex('nprogress'),\n}: NProgressProps) {\n const reducedMotion = useReducedMotion();\n const [_progress, setProgress] = useState(defaultProgress);\n const [mounted, setMounted] = useState(true);\n const resetRef = useRef<number>();\n const unmountRef = useRef<number>();\n const unmountProgressRef = useRef(false);\n\n const interval = useInterval(() => {\n setProgress((amount) => {\n let next = 0;\n if (amount >= 0 && amount <= 20) {\n next = 10;\n } else if (amount >= 20 && amount <= 50) {\n next = 4;\n } else if (amount >= 50 && amount <= 80) {\n next = 2;\n } else if (amount >= 80 && amount <= 99) {\n next = 0.5;\n }\n\n return amount + next;\n });\n }, stepIntervalTime);\n\n const cancelUnmount = () => {\n if (unmountRef.current) {\n window.clearTimeout(unmountRef.current);\n unmountRef.current = null;\n }\n if (resetRef.current) {\n window.clearTimeout(resetRef.current);\n resetRef.current = null;\n }\n\n setMounted(true);\n };\n\n const set = (value: React.SetStateAction<number>) => setProgress(value);\n const add = (value: number) => setProgress((c) => Math.min(c + value, 100));\n const decrease = (value: number) => setProgress((c) => Math.max(c - value, 0));\n const start = () => {\n interval.stop();\n interval.start();\n };\n const stop = () => interval.stop();\n const reset = () => {\n unmountProgressRef.current = true;\n stop();\n setProgress(0);\n unmountProgressRef.current = false;\n };\n\n const ctx = {\n set,\n add,\n decrease,\n start,\n stop,\n reset,\n };\n\n const unmountProgress = () => {\n unmountRef.current = null;\n setMounted(false);\n\n if (autoReset) {\n resetRef.current = window.setTimeout(() => {\n resetRef.current = null;\n reset();\n }, exitTransitionDuration);\n }\n };\n\n useDidUpdate(() => {\n if (_progress >= 100) {\n stop();\n onFinish && onFinish();\n unmountRef.current = window.setTimeout(unmountProgress, exitTimeout);\n } else if (!mounted) {\n cancelUnmount();\n }\n }, [_progress]);\n\n useNProgressEvents(ctx);\n\n return (\n <OptionalPortal withinPortal={withinPortal} zIndex={zIndex}>\n {!unmountProgressRef.current && (\n <Progress\n radius={0}\n value={_progress}\n size={size}\n color={color}\n styles={{\n root: {\n top: 0,\n left: 0,\n position: 'fixed',\n width: '100vw',\n backgroundColor: 'transparent',\n transitionProperty: 'opacity',\n transitionTimingFunction: exitTransition,\n transitionDuration: `${\n reducedMotion || _progress !== 100 ? 0 : exitTransitionDuration\n }ms`,\n opacity: mounted ? 1 : 0,\n },\n bar: {\n transitionProperty: 'width',\n transitionTimingFunction: progressTransition,\n transitionDuration: `${reducedMotion || !mounted ? 0 : progressTransitionDuration}ms`,\n },\n }}\n />\n )}\n </OptionalPortal>\n );\n}\n"],"names":["getDefaultZIndex","useReducedMotion","useState","useRef","useInterval","useDidUpdate","useNProgressEvents","React","OptionalPortal","Progress"],"mappings":"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"}
|
package/esm/NProgress.js
DELETED
|
@@ -1,126 +0,0 @@
|
|
|
1
|
-
import { OptionalPortal, Progress } from '@mantine/core';
|
|
2
|
-
import { useReducedMotion, useInterval, useDidUpdate } from '@mantine/hooks';
|
|
3
|
-
import { getDefaultZIndex } from '@mantine/styles';
|
|
4
|
-
import React, { useState, useRef } from 'react';
|
|
5
|
-
import { useNProgressEvents } from './events.js';
|
|
6
|
-
|
|
7
|
-
function NProgress({
|
|
8
|
-
defaultProgress = 0,
|
|
9
|
-
color = "blue",
|
|
10
|
-
size = 2,
|
|
11
|
-
stepIntervalTime = 500,
|
|
12
|
-
progressTransition = "ease",
|
|
13
|
-
progressTransitionDuration = 600,
|
|
14
|
-
exitTimeout = 700,
|
|
15
|
-
exitTransitionDuration = 600,
|
|
16
|
-
exitTransition = "ease",
|
|
17
|
-
onFinish,
|
|
18
|
-
autoReset = false,
|
|
19
|
-
withinPortal = true,
|
|
20
|
-
zIndex = getDefaultZIndex("nprogress")
|
|
21
|
-
}) {
|
|
22
|
-
const reducedMotion = useReducedMotion();
|
|
23
|
-
const [_progress, setProgress] = useState(defaultProgress);
|
|
24
|
-
const [mounted, setMounted] = useState(true);
|
|
25
|
-
const resetRef = useRef();
|
|
26
|
-
const unmountRef = useRef();
|
|
27
|
-
const unmountProgressRef = useRef(false);
|
|
28
|
-
const interval = useInterval(() => {
|
|
29
|
-
setProgress((amount) => {
|
|
30
|
-
let next = 0;
|
|
31
|
-
if (amount >= 0 && amount <= 20) {
|
|
32
|
-
next = 10;
|
|
33
|
-
} else if (amount >= 20 && amount <= 50) {
|
|
34
|
-
next = 4;
|
|
35
|
-
} else if (amount >= 50 && amount <= 80) {
|
|
36
|
-
next = 2;
|
|
37
|
-
} else if (amount >= 80 && amount <= 99) {
|
|
38
|
-
next = 0.5;
|
|
39
|
-
}
|
|
40
|
-
return amount + next;
|
|
41
|
-
});
|
|
42
|
-
}, stepIntervalTime);
|
|
43
|
-
const cancelUnmount = () => {
|
|
44
|
-
if (unmountRef.current) {
|
|
45
|
-
window.clearTimeout(unmountRef.current);
|
|
46
|
-
unmountRef.current = null;
|
|
47
|
-
}
|
|
48
|
-
if (resetRef.current) {
|
|
49
|
-
window.clearTimeout(resetRef.current);
|
|
50
|
-
resetRef.current = null;
|
|
51
|
-
}
|
|
52
|
-
setMounted(true);
|
|
53
|
-
};
|
|
54
|
-
const set = (value) => setProgress(value);
|
|
55
|
-
const add = (value) => setProgress((c) => Math.min(c + value, 100));
|
|
56
|
-
const decrease = (value) => setProgress((c) => Math.max(c - value, 0));
|
|
57
|
-
const start = () => {
|
|
58
|
-
interval.stop();
|
|
59
|
-
interval.start();
|
|
60
|
-
};
|
|
61
|
-
const stop = () => interval.stop();
|
|
62
|
-
const reset = () => {
|
|
63
|
-
unmountProgressRef.current = true;
|
|
64
|
-
stop();
|
|
65
|
-
setProgress(0);
|
|
66
|
-
unmountProgressRef.current = false;
|
|
67
|
-
};
|
|
68
|
-
const ctx = {
|
|
69
|
-
set,
|
|
70
|
-
add,
|
|
71
|
-
decrease,
|
|
72
|
-
start,
|
|
73
|
-
stop,
|
|
74
|
-
reset
|
|
75
|
-
};
|
|
76
|
-
const unmountProgress = () => {
|
|
77
|
-
unmountRef.current = null;
|
|
78
|
-
setMounted(false);
|
|
79
|
-
if (autoReset) {
|
|
80
|
-
resetRef.current = window.setTimeout(() => {
|
|
81
|
-
resetRef.current = null;
|
|
82
|
-
reset();
|
|
83
|
-
}, exitTransitionDuration);
|
|
84
|
-
}
|
|
85
|
-
};
|
|
86
|
-
useDidUpdate(() => {
|
|
87
|
-
if (_progress >= 100) {
|
|
88
|
-
stop();
|
|
89
|
-
onFinish && onFinish();
|
|
90
|
-
unmountRef.current = window.setTimeout(unmountProgress, exitTimeout);
|
|
91
|
-
} else if (!mounted) {
|
|
92
|
-
cancelUnmount();
|
|
93
|
-
}
|
|
94
|
-
}, [_progress]);
|
|
95
|
-
useNProgressEvents(ctx);
|
|
96
|
-
return /* @__PURE__ */ React.createElement(OptionalPortal, {
|
|
97
|
-
withinPortal,
|
|
98
|
-
zIndex
|
|
99
|
-
}, !unmountProgressRef.current && /* @__PURE__ */ React.createElement(Progress, {
|
|
100
|
-
radius: 0,
|
|
101
|
-
value: _progress,
|
|
102
|
-
size,
|
|
103
|
-
color,
|
|
104
|
-
styles: {
|
|
105
|
-
root: {
|
|
106
|
-
top: 0,
|
|
107
|
-
left: 0,
|
|
108
|
-
position: "fixed",
|
|
109
|
-
width: "100vw",
|
|
110
|
-
backgroundColor: "transparent",
|
|
111
|
-
transitionProperty: "opacity",
|
|
112
|
-
transitionTimingFunction: exitTransition,
|
|
113
|
-
transitionDuration: `${reducedMotion || _progress !== 100 ? 0 : exitTransitionDuration}ms`,
|
|
114
|
-
opacity: mounted ? 1 : 0
|
|
115
|
-
},
|
|
116
|
-
bar: {
|
|
117
|
-
transitionProperty: "width",
|
|
118
|
-
transitionTimingFunction: progressTransition,
|
|
119
|
-
transitionDuration: `${reducedMotion || !mounted ? 0 : progressTransitionDuration}ms`
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
}));
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
export { NProgress };
|
|
126
|
-
//# sourceMappingURL=NProgress.js.map
|
package/esm/NProgress.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"NProgress.js","sources":["../src/NProgress.tsx"],"sourcesContent":["import { OptionalPortal, Progress } from '@mantine/core';\nimport { useDidUpdate, useInterval, useReducedMotion } from '@mantine/hooks';\nimport { getDefaultZIndex, MantineColor } from '@mantine/styles';\nimport React, { useRef, useState } from 'react';\nimport { useNProgressEvents } from './events';\n\nexport interface NProgressProps {\n /** The default progress */\n defaultProgress?: number;\n\n /** The color of the progressbar */\n color?: MantineColor;\n\n /** The height of the progressbar */\n size?: number;\n\n /** Called when the progress is 100% */\n onFinish?: () => void;\n\n /** Automatically resets the progress when 100% is reached */\n autoReset?: boolean;\n\n /** Step delay in ms */\n stepIntervalTime?: number;\n\n /** Transition function (transition-timing-function) */\n progressTransition?: string;\n\n /** Transition duration in ms */\n progressTransitionDuration?: number;\n\n /** The time when the component should be unmounted after progress is 100% */\n exitTimeout?: number;\n\n /** Exit transition duration in ms */\n exitTransitionDuration?: number;\n\n /** Exit transition function (transition-timing-function)*/\n exitTransition?: string;\n\n /** Determines whether NProgress should be rendered within Portal, defaults to true */\n withinPortal?: boolean;\n\n /** NProgress container z-index */\n zIndex?: number;\n}\n\nexport function NProgress({\n defaultProgress = 0,\n color = 'blue',\n size = 2,\n stepIntervalTime = 500,\n progressTransition = 'ease',\n progressTransitionDuration = 600,\n exitTimeout = 700,\n exitTransitionDuration = 600,\n exitTransition = 'ease',\n onFinish,\n autoReset = false,\n withinPortal = true,\n zIndex = getDefaultZIndex('nprogress'),\n}: NProgressProps) {\n const reducedMotion = useReducedMotion();\n const [_progress, setProgress] = useState(defaultProgress);\n const [mounted, setMounted] = useState(true);\n const resetRef = useRef<number>();\n const unmountRef = useRef<number>();\n const unmountProgressRef = useRef(false);\n\n const interval = useInterval(() => {\n setProgress((amount) => {\n let next = 0;\n if (amount >= 0 && amount <= 20) {\n next = 10;\n } else if (amount >= 20 && amount <= 50) {\n next = 4;\n } else if (amount >= 50 && amount <= 80) {\n next = 2;\n } else if (amount >= 80 && amount <= 99) {\n next = 0.5;\n }\n\n return amount + next;\n });\n }, stepIntervalTime);\n\n const cancelUnmount = () => {\n if (unmountRef.current) {\n window.clearTimeout(unmountRef.current);\n unmountRef.current = null;\n }\n if (resetRef.current) {\n window.clearTimeout(resetRef.current);\n resetRef.current = null;\n }\n\n setMounted(true);\n };\n\n const set = (value: React.SetStateAction<number>) => setProgress(value);\n const add = (value: number) => setProgress((c) => Math.min(c + value, 100));\n const decrease = (value: number) => setProgress((c) => Math.max(c - value, 0));\n const start = () => {\n interval.stop();\n interval.start();\n };\n const stop = () => interval.stop();\n const reset = () => {\n unmountProgressRef.current = true;\n stop();\n setProgress(0);\n unmountProgressRef.current = false;\n };\n\n const ctx = {\n set,\n add,\n decrease,\n start,\n stop,\n reset,\n };\n\n const unmountProgress = () => {\n unmountRef.current = null;\n setMounted(false);\n\n if (autoReset) {\n resetRef.current = window.setTimeout(() => {\n resetRef.current = null;\n reset();\n }, exitTransitionDuration);\n }\n };\n\n useDidUpdate(() => {\n if (_progress >= 100) {\n stop();\n onFinish && onFinish();\n unmountRef.current = window.setTimeout(unmountProgress, exitTimeout);\n } else if (!mounted) {\n cancelUnmount();\n }\n }, [_progress]);\n\n useNProgressEvents(ctx);\n\n return (\n <OptionalPortal withinPortal={withinPortal} zIndex={zIndex}>\n {!unmountProgressRef.current && (\n <Progress\n radius={0}\n value={_progress}\n size={size}\n color={color}\n styles={{\n root: {\n top: 0,\n left: 0,\n position: 'fixed',\n width: '100vw',\n backgroundColor: 'transparent',\n transitionProperty: 'opacity',\n transitionTimingFunction: exitTransition,\n transitionDuration: `${\n reducedMotion || _progress !== 100 ? 0 : exitTransitionDuration\n }ms`,\n opacity: mounted ? 1 : 0,\n },\n bar: {\n transitionProperty: 'width',\n transitionTimingFunction: progressTransition,\n transitionDuration: `${reducedMotion || !mounted ? 0 : progressTransitionDuration}ms`,\n },\n }}\n />\n )}\n </OptionalPortal>\n );\n}\n"],"names":[],"mappings":"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"}
|
package/lib/NProgress.d.ts
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { MantineColor } from '@mantine/styles';
|
|
3
|
-
export interface NProgressProps {
|
|
4
|
-
/** The default progress */
|
|
5
|
-
defaultProgress?: number;
|
|
6
|
-
/** The color of the progressbar */
|
|
7
|
-
color?: MantineColor;
|
|
8
|
-
/** The height of the progressbar */
|
|
9
|
-
size?: number;
|
|
10
|
-
/** Called when the progress is 100% */
|
|
11
|
-
onFinish?: () => void;
|
|
12
|
-
/** Automatically resets the progress when 100% is reached */
|
|
13
|
-
autoReset?: boolean;
|
|
14
|
-
/** Step delay in ms */
|
|
15
|
-
stepIntervalTime?: number;
|
|
16
|
-
/** Transition function (transition-timing-function) */
|
|
17
|
-
progressTransition?: string;
|
|
18
|
-
/** Transition duration in ms */
|
|
19
|
-
progressTransitionDuration?: number;
|
|
20
|
-
/** The time when the component should be unmounted after progress is 100% */
|
|
21
|
-
exitTimeout?: number;
|
|
22
|
-
/** Exit transition duration in ms */
|
|
23
|
-
exitTransitionDuration?: number;
|
|
24
|
-
/** Exit transition function (transition-timing-function)*/
|
|
25
|
-
exitTransition?: string;
|
|
26
|
-
/** Determines whether NProgress should be rendered within Portal, defaults to true */
|
|
27
|
-
withinPortal?: boolean;
|
|
28
|
-
/** NProgress container z-index */
|
|
29
|
-
zIndex?: number;
|
|
30
|
-
}
|
|
31
|
-
export declare function NProgress({ defaultProgress, color, size, stepIntervalTime, progressTransition, progressTransitionDuration, exitTimeout, exitTransitionDuration, exitTransition, onFinish, autoReset, withinPortal, zIndex, }: NProgressProps): JSX.Element;
|
|
32
|
-
//# sourceMappingURL=NProgress.d.ts.map
|
package/lib/NProgress.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"NProgress.d.ts","sourceRoot":"","sources":["../src/NProgress.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAoB,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAIjE,MAAM,WAAW,cAAc;IAC7B,2BAA2B;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,mCAAmC;IACnC,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,uBAAuB;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,uDAAuD;IACvD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B,gCAAgC;IAChC,0BAA0B,CAAC,EAAE,MAAM,CAAC;IAEpC,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,qCAAqC;IACrC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC,2DAA2D;IAC3D,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,sFAAsF;IACtF,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,SAAS,CAAC,EACxB,eAAmB,EACnB,KAAc,EACd,IAAQ,EACR,gBAAsB,EACtB,kBAA2B,EAC3B,0BAAgC,EAChC,WAAiB,EACjB,sBAA4B,EAC5B,cAAuB,EACvB,QAAQ,EACR,SAAiB,EACjB,YAAmB,EACnB,MAAsC,GACvC,EAAE,cAAc,eAsHhB"}
|