99 lines
2.4 KiB
TypeScript
99 lines
2.4 KiB
TypeScript
import { Component, createSignal, onMount, onCleanup } from "solid-js";
|
|
|
|
interface CountdownCircleTimerProps {
|
|
duration: number;
|
|
initialRemainingTime?: number;
|
|
size: number;
|
|
strokeWidth: number;
|
|
colors: string;
|
|
children: (props: { remainingTime: number }) => any;
|
|
onComplete?: () => void;
|
|
isPlaying?: boolean;
|
|
}
|
|
|
|
const CountdownCircleTimer: Component<CountdownCircleTimerProps> = (props) => {
|
|
const radius = (props.size - props.strokeWidth) / 2;
|
|
const circumference = radius * 2 * Math.PI;
|
|
|
|
const [remainingTime, setRemainingTime] = createSignal(
|
|
props.initialRemainingTime ?? props.duration
|
|
);
|
|
|
|
const progress = () => remainingTime() / props.duration;
|
|
const strokeDashoffset = () => circumference * (1 - progress());
|
|
|
|
onMount(() => {
|
|
const startTime = Date.now();
|
|
const initialTime = remainingTime();
|
|
let animationFrameId: number;
|
|
|
|
const animate = () => {
|
|
const elapsed = (Date.now() - startTime) / 1000;
|
|
const newTime = Math.max(0, initialTime - elapsed);
|
|
|
|
setRemainingTime(newTime);
|
|
|
|
if (newTime <= 0) {
|
|
props.onComplete?.();
|
|
return;
|
|
}
|
|
|
|
animationFrameId = requestAnimationFrame(animate);
|
|
};
|
|
|
|
animationFrameId = requestAnimationFrame(animate);
|
|
|
|
onCleanup(() => {
|
|
cancelAnimationFrame(animationFrameId);
|
|
});
|
|
});
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
position: "relative",
|
|
width: `${props.size}px`,
|
|
height: `${props.size}px`
|
|
}}
|
|
>
|
|
<svg
|
|
width={props.size}
|
|
height={props.size}
|
|
style={{ transform: "rotate(-90deg)" }}
|
|
>
|
|
<circle
|
|
cx={props.size / 2}
|
|
cy={props.size / 2}
|
|
r={radius}
|
|
fill="none"
|
|
stroke="#e5e7eb"
|
|
stroke-width={props.strokeWidth}
|
|
/>
|
|
<circle
|
|
cx={props.size / 2}
|
|
cy={props.size / 2}
|
|
r={radius}
|
|
fill="none"
|
|
stroke={props.colors}
|
|
stroke-width={props.strokeWidth}
|
|
stroke-dasharray={`${circumference}`}
|
|
stroke-dashoffset={`${strokeDashoffset()}`}
|
|
stroke-linecap="round"
|
|
/>
|
|
</svg>
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
top: "50%",
|
|
left: "50%",
|
|
transform: "translate(-50%, -50%)"
|
|
}}
|
|
>
|
|
{props.children({ remainingTime: remainingTime() })}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CountdownCircleTimer;
|