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