react-page-loading-bar 1.0.5 → 1.0.6
Sign up to get free protection for your applications and to get access to all the features.
- package/build/components/LoadingBar.d.ts +4 -0
- package/build/components/LoadingBar.js +162 -0
- package/build/components/LoadingBar.js.map +1 -0
- package/build/index.d.ts +1 -3
- package/build/index.js +1 -129
- package/build/index.js.map +1 -1
- package/package.json +14 -13
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
import React, { useEffect, useState, forwardRef, useRef, useImperativeHandle } from "react";
|
|
2
|
+
// Hooks
|
|
3
|
+
import { useInterval } from "../hooks/useInterval";
|
|
4
|
+
// Utils
|
|
5
|
+
import { randomInt } from "../utils/randomUtils";
|
|
6
|
+
import { isGradient, isValidHex } from "../utils/colorUtils";
|
|
7
|
+
// Styles
|
|
8
|
+
import baseStyles from "../styles/styles";
|
|
9
|
+
const LoadingBar = forwardRef(({ progress, color = "purple", background = "transparent", shadow = true, height = 2, onLoaderFinished, transitionTime = 300, waitingTime = 1000, className = "", containerClassName = "", style = {}, containerStyle = {}, shadowStyle = {}, }, ref) => {
|
|
10
|
+
// States
|
|
11
|
+
const [localProgress, setLocalProgress] = useState(0);
|
|
12
|
+
const [usingProps, setUsingProps] = useState(false);
|
|
13
|
+
const [isComplete, setIsComplete] = useState(false);
|
|
14
|
+
// Style states
|
|
15
|
+
const [loaderStyle, setLoaderStyle] = useState({
|
|
16
|
+
...baseStyles.loader,
|
|
17
|
+
height,
|
|
18
|
+
width: `${localProgress}%`,
|
|
19
|
+
transition: `all ${transitionTime}ms ease-out`,
|
|
20
|
+
background: isGradient(color) || (isValidHex(color) ? color : "purple"),
|
|
21
|
+
...style,
|
|
22
|
+
});
|
|
23
|
+
const [containerStyles, setContainerStyles] = useState({
|
|
24
|
+
...baseStyles.container,
|
|
25
|
+
height,
|
|
26
|
+
background,
|
|
27
|
+
...containerStyle,
|
|
28
|
+
});
|
|
29
|
+
// Refs
|
|
30
|
+
const isMounted = useRef(false);
|
|
31
|
+
const continuous = useRef({
|
|
32
|
+
active: false,
|
|
33
|
+
refreshRate: 1000,
|
|
34
|
+
});
|
|
35
|
+
const staticStart = useRef({
|
|
36
|
+
active: false,
|
|
37
|
+
value: 0,
|
|
38
|
+
});
|
|
39
|
+
useImperativeHandle(ref, () => ({
|
|
40
|
+
continuousStart(startingValue = 10, refreshRate = 1000) {
|
|
41
|
+
if (usingProps)
|
|
42
|
+
return;
|
|
43
|
+
continuous.current = { active: true, refreshRate };
|
|
44
|
+
setLocalProgress(startingValue);
|
|
45
|
+
checkIfFull(startingValue);
|
|
46
|
+
setIsComplete(false);
|
|
47
|
+
},
|
|
48
|
+
staticStart(startingValue = 30) {
|
|
49
|
+
if (usingProps)
|
|
50
|
+
return;
|
|
51
|
+
staticStart.current = { active: true, value: startingValue };
|
|
52
|
+
setLocalProgress(startingValue);
|
|
53
|
+
checkIfFull(startingValue);
|
|
54
|
+
setIsComplete(false);
|
|
55
|
+
},
|
|
56
|
+
complete() {
|
|
57
|
+
if (usingProps)
|
|
58
|
+
return;
|
|
59
|
+
setLocalProgress(100);
|
|
60
|
+
checkIfFull(100);
|
|
61
|
+
setIsComplete(true);
|
|
62
|
+
continuous.current.active = false;
|
|
63
|
+
staticStart.current.active = false;
|
|
64
|
+
},
|
|
65
|
+
getProgress() {
|
|
66
|
+
return localProgress;
|
|
67
|
+
},
|
|
68
|
+
}));
|
|
69
|
+
useEffect(() => {
|
|
70
|
+
if (progress !== undefined) {
|
|
71
|
+
setUsingProps(true);
|
|
72
|
+
setLocalProgress(progress);
|
|
73
|
+
}
|
|
74
|
+
}, [progress]);
|
|
75
|
+
useEffect(() => {
|
|
76
|
+
if (isComplete && localProgress >= 100) {
|
|
77
|
+
const timeoutId = setTimeout(() => {
|
|
78
|
+
if (onLoaderFinished)
|
|
79
|
+
onLoaderFinished();
|
|
80
|
+
setLocalProgress(0);
|
|
81
|
+
setIsComplete(false);
|
|
82
|
+
}, waitingTime);
|
|
83
|
+
return () => clearTimeout(timeoutId);
|
|
84
|
+
}
|
|
85
|
+
}, [isComplete, localProgress, waitingTime, onLoaderFinished]);
|
|
86
|
+
useInterval(() => {
|
|
87
|
+
if (continuous.current.active && !isComplete) {
|
|
88
|
+
const increment = randomInt(1, 10);
|
|
89
|
+
setLocalProgress((prev) => Math.min(prev + increment, 100));
|
|
90
|
+
if (localProgress + increment >= 100) {
|
|
91
|
+
continuous.current.active = false;
|
|
92
|
+
setIsComplete(true);
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}, continuous.current.active ? continuous.current.refreshRate : null);
|
|
96
|
+
// Helpers
|
|
97
|
+
const checkIfFull = (progress) => {
|
|
98
|
+
if (progress >= 100) {
|
|
99
|
+
setLoaderStyle({
|
|
100
|
+
...loaderStyle,
|
|
101
|
+
width: "100%"
|
|
102
|
+
});
|
|
103
|
+
setTimeout(() => {
|
|
104
|
+
if (!isMounted)
|
|
105
|
+
return;
|
|
106
|
+
setLoaderStyle({
|
|
107
|
+
...loaderStyle,
|
|
108
|
+
opacity: 0,
|
|
109
|
+
width: "100%",
|
|
110
|
+
transition: `all ${transitionTime}ms ease-out`,
|
|
111
|
+
color: isGradient(color) || (isValidHex(color) ? color : "purple")
|
|
112
|
+
});
|
|
113
|
+
setTimeout(() => {
|
|
114
|
+
if (!isMounted)
|
|
115
|
+
return;
|
|
116
|
+
// Handle continuous start
|
|
117
|
+
if (continuous.current.active) {
|
|
118
|
+
continuous.current = {
|
|
119
|
+
...continuous.current,
|
|
120
|
+
active: false
|
|
121
|
+
};
|
|
122
|
+
setLocalProgress(0);
|
|
123
|
+
checkIfFull(0);
|
|
124
|
+
}
|
|
125
|
+
// Handle static start
|
|
126
|
+
if (staticStart.current.active) {
|
|
127
|
+
staticStart.current = {
|
|
128
|
+
...staticStart.current,
|
|
129
|
+
active: false
|
|
130
|
+
};
|
|
131
|
+
setLocalProgress(0);
|
|
132
|
+
checkIfFull(0);
|
|
133
|
+
}
|
|
134
|
+
if (onLoaderFinished)
|
|
135
|
+
onLoaderFinished();
|
|
136
|
+
setLocalProgress(0);
|
|
137
|
+
checkIfFull(0);
|
|
138
|
+
}, transitionTime);
|
|
139
|
+
}, waitingTime);
|
|
140
|
+
}
|
|
141
|
+
else {
|
|
142
|
+
setLoaderStyle((prev) => ({
|
|
143
|
+
...prev,
|
|
144
|
+
width: `${progress}%`,
|
|
145
|
+
opacity: 1,
|
|
146
|
+
transition: `all ${transitionTime}ms ease-out`,
|
|
147
|
+
}));
|
|
148
|
+
}
|
|
149
|
+
};
|
|
150
|
+
// Handle mount
|
|
151
|
+
useEffect(() => {
|
|
152
|
+
isMounted.current = true;
|
|
153
|
+
return () => {
|
|
154
|
+
isMounted.current = false;
|
|
155
|
+
};
|
|
156
|
+
}, []);
|
|
157
|
+
return (React.createElement("div", { style: containerStyles, className: containerClassName },
|
|
158
|
+
React.createElement("div", { style: loaderStyle, className: className }, " "),
|
|
159
|
+
shadow && React.createElement("div", { style: { ...baseStyles.shadow, ...shadowStyle } })));
|
|
160
|
+
});
|
|
161
|
+
export default LoadingBar;
|
|
162
|
+
//# sourceMappingURL=LoadingBar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LoadingBar.js","sourceRoot":"","sources":["../../src/components/LoadingBar.tsx"],"names":[],"mappings":"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"}
|
package/build/index.d.ts
CHANGED
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import type { LoadingBarRef, LoadingBarProps } from "../types";
|
|
3
|
-
declare const LoadingBar: React.ForwardRefExoticComponent<LoadingBarProps & React.RefAttributes<LoadingBarRef>>;
|
|
1
|
+
import LoadingBar from "./components/LoadingBar";
|
|
4
2
|
export default LoadingBar;
|
package/build/index.js
CHANGED
|
@@ -1,131 +1,3 @@
|
|
|
1
|
-
import
|
|
2
|
-
// Hooks
|
|
3
|
-
import { useInterval } from "./hooks/useInterval";
|
|
4
|
-
// Utils
|
|
5
|
-
import { randomInt } from "./utils/randomUtils";
|
|
6
|
-
import { isGradient, isValidHex } from "./utils/colorUtils";
|
|
7
|
-
// Styles
|
|
8
|
-
import baseStyles from "./styles/styles";
|
|
9
|
-
const LoadingBar = forwardRef(({ progress, color = "purple", background = "transparent", shadow = true, height = 2, onLoaderFinished, transitionTime = 300, waitingTime = 1000, className = "", containerClassName = "", style = {}, containerStyle = {}, shadowStyle = {}, }, ref) => {
|
|
10
|
-
// States
|
|
11
|
-
const [localProgress, setLocalProgress] = useState(0);
|
|
12
|
-
const [usingProps, setUsingProps] = useState(false);
|
|
13
|
-
const [isComplete, setIsComplete] = useState(false);
|
|
14
|
-
// Style states
|
|
15
|
-
const [loaderStyle, setLoaderStyle] = useState(Object.assign(Object.assign(Object.assign({}, baseStyles.loader), { height, width: `${localProgress}%`, transition: `all ${transitionTime}ms ease-out`, background: isGradient(color) || (isValidHex(color) ? color : "purple") }), style));
|
|
16
|
-
const [containerStyles, setContainerStyles] = useState(Object.assign(Object.assign(Object.assign({}, baseStyles.container), { height,
|
|
17
|
-
background }), containerStyle));
|
|
18
|
-
// Refs
|
|
19
|
-
const isMounted = useRef(false);
|
|
20
|
-
const continuous = useRef({
|
|
21
|
-
active: false,
|
|
22
|
-
refreshRate: 1000,
|
|
23
|
-
});
|
|
24
|
-
const staticStart = useRef({
|
|
25
|
-
active: false,
|
|
26
|
-
value: 0,
|
|
27
|
-
});
|
|
28
|
-
useImperativeHandle(ref, () => ({
|
|
29
|
-
continuousStart(startingValue = 10, refreshRate = 1000) {
|
|
30
|
-
if (usingProps)
|
|
31
|
-
return;
|
|
32
|
-
continuous.current = { active: true, refreshRate };
|
|
33
|
-
setLocalProgress(startingValue);
|
|
34
|
-
checkIfFull(startingValue);
|
|
35
|
-
setIsComplete(false);
|
|
36
|
-
},
|
|
37
|
-
staticStart(startingValue = 30) {
|
|
38
|
-
if (usingProps)
|
|
39
|
-
return;
|
|
40
|
-
staticStart.current = { active: true, value: startingValue };
|
|
41
|
-
setLocalProgress(startingValue);
|
|
42
|
-
checkIfFull(startingValue);
|
|
43
|
-
setIsComplete(false);
|
|
44
|
-
},
|
|
45
|
-
complete() {
|
|
46
|
-
if (usingProps)
|
|
47
|
-
return;
|
|
48
|
-
setLocalProgress(100);
|
|
49
|
-
checkIfFull(100);
|
|
50
|
-
setIsComplete(true);
|
|
51
|
-
continuous.current.active = false;
|
|
52
|
-
staticStart.current.active = false;
|
|
53
|
-
},
|
|
54
|
-
getProgress() {
|
|
55
|
-
return localProgress;
|
|
56
|
-
},
|
|
57
|
-
}));
|
|
58
|
-
useEffect(() => {
|
|
59
|
-
if (progress !== undefined) {
|
|
60
|
-
setUsingProps(true);
|
|
61
|
-
setLocalProgress(progress);
|
|
62
|
-
}
|
|
63
|
-
}, [progress]);
|
|
64
|
-
useEffect(() => {
|
|
65
|
-
if (isComplete && localProgress >= 100) {
|
|
66
|
-
const timeoutId = setTimeout(() => {
|
|
67
|
-
if (onLoaderFinished)
|
|
68
|
-
onLoaderFinished();
|
|
69
|
-
setLocalProgress(0);
|
|
70
|
-
setIsComplete(false);
|
|
71
|
-
}, waitingTime);
|
|
72
|
-
return () => clearTimeout(timeoutId);
|
|
73
|
-
}
|
|
74
|
-
}, [isComplete, localProgress, waitingTime, onLoaderFinished]);
|
|
75
|
-
useInterval(() => {
|
|
76
|
-
if (continuous.current.active && !isComplete) {
|
|
77
|
-
const increment = randomInt(1, 10);
|
|
78
|
-
setLocalProgress((prev) => Math.min(prev + increment, 100));
|
|
79
|
-
if (localProgress + increment >= 100) {
|
|
80
|
-
continuous.current.active = false;
|
|
81
|
-
setIsComplete(true);
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
}, continuous.current.active ? continuous.current.refreshRate : null);
|
|
85
|
-
// Helpers
|
|
86
|
-
const checkIfFull = (progress) => {
|
|
87
|
-
if (progress >= 100) {
|
|
88
|
-
setLoaderStyle(Object.assign(Object.assign({}, loaderStyle), { width: "100%" }));
|
|
89
|
-
setTimeout(() => {
|
|
90
|
-
if (!isMounted)
|
|
91
|
-
return;
|
|
92
|
-
setLoaderStyle(Object.assign(Object.assign({}, loaderStyle), { opacity: 0, width: "100%", transition: `all ${transitionTime}ms ease-out`, color: isGradient(color) || (isValidHex(color) ? color : "purple") }));
|
|
93
|
-
setTimeout(() => {
|
|
94
|
-
if (!isMounted)
|
|
95
|
-
return;
|
|
96
|
-
// Handle continuous start
|
|
97
|
-
if (continuous.current.active) {
|
|
98
|
-
continuous.current = Object.assign(Object.assign({}, continuous.current), { active: false });
|
|
99
|
-
setLocalProgress(0);
|
|
100
|
-
checkIfFull(0);
|
|
101
|
-
}
|
|
102
|
-
// Handle static start
|
|
103
|
-
if (staticStart.current.active) {
|
|
104
|
-
staticStart.current = Object.assign(Object.assign({}, staticStart.current), { active: false });
|
|
105
|
-
setLocalProgress(0);
|
|
106
|
-
checkIfFull(0);
|
|
107
|
-
}
|
|
108
|
-
if (onLoaderFinished)
|
|
109
|
-
onLoaderFinished();
|
|
110
|
-
setLocalProgress(0);
|
|
111
|
-
checkIfFull(0);
|
|
112
|
-
}, transitionTime);
|
|
113
|
-
}, waitingTime);
|
|
114
|
-
}
|
|
115
|
-
else {
|
|
116
|
-
setLoaderStyle((prev) => (Object.assign(Object.assign({}, prev), { width: `${progress}%`, opacity: 1, transition: `all ${transitionTime}ms ease-out` })));
|
|
117
|
-
}
|
|
118
|
-
};
|
|
119
|
-
// Handle mount
|
|
120
|
-
useEffect(() => {
|
|
121
|
-
isMounted.current = true;
|
|
122
|
-
return () => {
|
|
123
|
-
isMounted.current = false;
|
|
124
|
-
};
|
|
125
|
-
}, []);
|
|
126
|
-
return (React.createElement("div", { style: containerStyles, className: containerClassName },
|
|
127
|
-
React.createElement("div", { style: loaderStyle, className: className }, " "),
|
|
128
|
-
shadow && React.createElement("div", { style: Object.assign(Object.assign({}, baseStyles.shadow), shadowStyle) })));
|
|
129
|
-
});
|
|
1
|
+
import LoadingBar from "./components/LoadingBar";
|
|
130
2
|
export default LoadingBar;
|
|
131
3
|
//# sourceMappingURL=index.js.map
|
package/build/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,eAAe,UAAU,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,16 +1,23 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-page-loading-bar",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.6",
|
|
4
4
|
"description": "A react top loading bar component for page loads",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "SyntaxisCS",
|
|
7
7
|
"url": "https://syntaxiscs.com"
|
|
8
8
|
},
|
|
9
9
|
"type": "module",
|
|
10
|
-
"
|
|
10
|
+
"source": "src/index.ts",
|
|
11
|
+
"main": "./build/index.com",
|
|
12
|
+
"module": "./build/index.module.js",
|
|
13
|
+
"exports": {
|
|
14
|
+
"require": "./dist/index.cjs",
|
|
15
|
+
"default": "./dist/index.modern.js"
|
|
16
|
+
},
|
|
11
17
|
"types": "build/index.d.ts",
|
|
12
18
|
"scripts": {
|
|
13
|
-
"compile": "tsc"
|
|
19
|
+
"compile": "tsc",
|
|
20
|
+
"build": "microbundle-crl"
|
|
14
21
|
},
|
|
15
22
|
"keywords": [
|
|
16
23
|
"React",
|
|
@@ -32,24 +39,18 @@
|
|
|
32
39
|
"url": "https://gitlab.com/SyntaxisCS/react-page-transition-bar/issues"
|
|
33
40
|
},
|
|
34
41
|
"license": "AGPL-3.0-only",
|
|
35
|
-
"files": [
|
|
36
|
-
"build/**/*"
|
|
37
|
-
],
|
|
38
|
-
"exports": {
|
|
39
|
-
".": {
|
|
40
|
-
"require": "./build/index.js",
|
|
41
|
-
"import": "./build/index.js",
|
|
42
|
-
"types": "./build/index.d.ts"
|
|
43
|
-
}
|
|
44
|
-
},
|
|
45
42
|
"peerDependencies": {
|
|
46
43
|
"react": "^16 || ^17 || ^18"
|
|
47
44
|
},
|
|
48
45
|
"devDependencies": {
|
|
49
46
|
"@types/react": "^18.2.20",
|
|
50
47
|
"@types/react-dom": "^18.2.7",
|
|
48
|
+
"microbundle-crl": "^0.13.11",
|
|
51
49
|
"typescript": "^5.1.6"
|
|
52
50
|
},
|
|
51
|
+
"files": [
|
|
52
|
+
"build/**/*"
|
|
53
|
+
],
|
|
53
54
|
"engines": {
|
|
54
55
|
"node": ">=20.0.0",
|
|
55
56
|
"pnpm": ">=8.0.0"
|