@zenithui/time-picker/dist/components/hook.js

A ZenithUi Time Picker is React component enables users to select a time from a predefined list of options.

import { useEffect, useMemo, useState } from "react";
import { convertTo24Hour, generateTimeOptions, getInitialHour, getInitialPeriod } from "./utils.js";
const useTimePicker = ({ initialTime, format = "12-hours", onTimeChange })=>{
    const is12HourFormat = useMemo(()=>"12-hours" === format, [
        format
    ]);
    const [hour, setHour] = useState(()=>is12HourFormat ? getInitialHour(initialTime) : initialTime?.split(":")?.[0] || "00");
    const [minute, setMinute] = useState(initialTime?.split(":")?.[1] || "00");
    const [period, setPeriod] = useState(is12HourFormat ? getInitialPeriod(initialTime) : "");
    const hours = useMemo(()=>generateTimeOptions(is12HourFormat ? 1 : 0, is12HourFormat ? 12 : 23), [
        is12HourFormat
    ]);
    const minutes = useMemo(()=>generateTimeOptions(0, 59), []);
    const periods = is12HourFormat ? [
        "AM",
        "PM"
    ] : [];
    useEffect(()=>{
        let newTime = "";
        newTime = is12HourFormat ? `${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 };