@zenithui/time-picker
Version:
A ZenithUi Time Picker is React component enables users to select a time from a predefined list of options.
57 lines (56 loc) • 2.51 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { cn, useTheme } from "@zenithui/utils";
import { useEffect, useMemo, useState } from "react";
const CountDownTimer = ({ startTime, className = "", description = "", type = "seconds", duration = 5, format = "without-names", descriptionClassName = "", theme = "auto", onExpired })=>{
const [timeLeft, setTimeLeft] = useState("");
const hookTheme = useTheme();
const themeClass = useMemo(()=>"auto" === theme ? hookTheme : "dark" === theme ? "dark" : "", [
theme,
hookTheme
]);
useEffect(()=>{
const startDate = new Date(startTime);
const durationMs = "seconds" === type ? 1000 * duration : "minutes" === type ? 60 * duration * 1000 : 60 * duration * 60000;
const endDate = new Date(startDate.getTime() + durationMs);
const interval = setInterval(()=>{
const now = new Date();
const diff = endDate.getTime() - now.getTime();
if (diff <= 0) {
clearInterval(interval);
if ("with-names" === format) setTimeLeft("00 hours 00 minutes 00 seconds");
else {
if (onExpired) onExpired(true);
setTimeLeft("00 : 00 : 00");
}
return;
}
const hours = Math.floor(diff / 3600000);
const minutes = Math.floor(diff % 3600000 / 60000);
const seconds = Math.floor(diff % 60000 / 1000);
"with-names" === format ? setTimeLeft(`${String(hours).padStart(2, "0")} hours ${String(minutes).padStart(2, "0")} minutes ${String(seconds).padStart(2, "0")} seconds`) : setTimeLeft(`${String(hours).padStart(2, "0")} : ${String(minutes).padStart(2, "0")} : ${String(seconds).padStart(2, "0")}`);
}, 1000);
return ()=>clearInterval(interval);
}, [
startTime,
type,
duration,
format,
onExpired
]);
return description ? /*#__PURE__*/ jsxs("span", {
className: cn(themeClass, "count-down-text", className),
children: [
timeLeft,
" ",
/*#__PURE__*/ jsx("span", {
className: cn(descriptionClassName),
children: description
})
]
}) : /*#__PURE__*/ jsx("span", {
className: cn(themeClass, "count-down-text", className),
children: `${timeLeft}`
});
};
const count_down = CountDownTimer;
export { count_down as default };