38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import { useCallback, useEffect, useState } from "react";
|
|
|
|
export function useTimer(timeoutMs: number): [number, () => void, () => void] {
|
|
const Interval = 100;
|
|
const [startDate, setStartDate] = useState(undefined as Date | undefined);
|
|
const [percent, setPercent] = useState(0);
|
|
|
|
const trigger = useCallback(() => {
|
|
setPercent(0);
|
|
setStartDate(new Date());
|
|
}, [setStartDate, setPercent]);
|
|
|
|
const clear = useCallback(() => {
|
|
setPercent(0);
|
|
setStartDate(undefined);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!startDate) {
|
|
return;
|
|
}
|
|
|
|
const intervalNode = setInterval(() => {
|
|
const elapsedMs = startDate ? new Date().getTime() - startDate.getTime() : 0;
|
|
let p = (elapsedMs / timeoutMs) * 100.0;
|
|
if (p >= 100) {
|
|
p = 100;
|
|
setStartDate(undefined);
|
|
}
|
|
setPercent(p);
|
|
}, Interval);
|
|
|
|
return () => clearInterval(intervalNode);
|
|
}, [startDate, setPercent, setStartDate, timeoutMs]);
|
|
|
|
return [percent, trigger, clear];
|
|
}
|