@zenithui/time-picker
Version:
A ZenithUi Time Picker is React component enables users to select a time from a predefined list of options.
43 lines (42 loc) • 1.95 kB
JavaScript
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE__utils_js_d88b7fe1__ from "./utils.js";
const useTimePicker = ({ initialTime, format = "12-hours", onTimeChange })=>{
const is12HourFormat = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>"12-hours" === format, [
format
]);
const [hour, setHour] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(()=>is12HourFormat ? (0, __WEBPACK_EXTERNAL_MODULE__utils_js_d88b7fe1__.getInitialHour)(initialTime) : initialTime?.split(":")?.[0] || "00");
const [minute, setMinute] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(initialTime?.split(":")?.[1] || "00");
const [period, setPeriod] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(is12HourFormat ? (0, __WEBPACK_EXTERNAL_MODULE__utils_js_d88b7fe1__.getInitialPeriod)(initialTime) : "");
const hours = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE__utils_js_d88b7fe1__.generateTimeOptions)(is12HourFormat ? 1 : 0, is12HourFormat ? 12 : 23), [
is12HourFormat
]);
const minutes = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE__utils_js_d88b7fe1__.generateTimeOptions)(0, 59), []);
const periods = is12HourFormat ? [
"AM",
"PM"
] : [];
(0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
let newTime = "";
newTime = is12HourFormat ? `${(0, __WEBPACK_EXTERNAL_MODULE__utils_js_d88b7fe1__.convertTo24Hour)(hour, period)}:${minute}` : `${hour}:${minute}`;
if (newTime !== initialTime) onTimeChange?.(newTime);
}, [
hour,
minute,
period,
initialTime,
is12HourFormat,
onTimeChange
]);
return {
hour,
minute,
period,
setHour,
setMinute,
setPeriod,
hours,
minutes,
periods
};
};
export { useTimePicker };