/
progress-circle.tsx
73 lines (61 loc) · 1.61 KB
/
progress-circle.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import type { ProgressCircleProps, ProgressCircleChildren } from './defs';
import { useState, useEffect, useRef } from 'react';
import c from 'classnames';
import { Font } from '../font';
const toPercentage = (value: number, decimals = 1): number =>
parseInt((value * 100).toFixed(decimals));
const defaultChildren: ProgressCircleChildren = (ms) =>
(ms / 1000).toFixed(1) + 's';
const ProgressCircle = ({
className,
interval = 100,
jump = 100,
ms = 5000,
size = 100,
onEnd,
children = defaultChildren,
}: ProgressCircleProps) => {
const time = useRef(ms);
const [, setCounter] = useState(ms);
const intervalRef = useRef<NodeJS.Timer | null>(null);
const handleEnd = () => {
onEnd && onEnd();
};
const clearIntervalRef = () => {
intervalRef.current && clearInterval(intervalRef.current);
};
useEffect(() => {
intervalRef.current = setInterval(() => {
time.current -= jump;
setCounter(time.current);
if (time.current <= 0) {
clearIntervalRef();
handleEnd();
}
}, interval);
return () => {
clearIntervalRef();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<div
className={c('progress-circle', className)}
style={{
width: size,
height: size,
}}
>
<div
className="progress-circle-front"
style={{
transform: `scale(${toPercentage(time.current / ms) / 100})`,
}}
/>
<Font className="progress-circle-text" variant="h6">
{children(time.current)}
</Font>
</div>
);
};
export { ProgressCircle };