@zenithui/time-picker/dist/components/time-picker/scroll-list.js

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

import { jsx } from "react/jsx-runtime";
import { cn } from "@zenithui/utils";
import { useEffect, useRef } from "react";
import { ToggleGroupItem, ToggleGroupRoot } from "../toggle-group/index.js";
const TimeScrollList = ({ options, value, classNames, onChange })=>{
    const listRef = useRef(null);
    useEffect(()=>{
        const index = options.findIndex((option)=>option === value);
        if (listRef.current && index >= 0) {
            const item = listRef.current.children[index];
            item?.scrollIntoView({
                behavior: "smooth",
                block: "center"
            });
        }
    }, [
        value,
        options
    ]);
    return /*#__PURE__*/ jsx("div", {
        className: "zenithui-time-custom-scroll",
        children: /*#__PURE__*/ jsx(ToggleGroupRoot, {
            ref: listRef,
            type: "single",
            className: cn("zenithui-time-scroll-container", classNames?.timeScrollList),
            value: value,
            onValueChange: (selectedValue)=>{
                if ("string" == typeof selectedValue) onChange(selectedValue);
            },
            children: options.map((option)=>/*#__PURE__*/ jsx(ToggleGroupItem, {
                    value: option,
                    "aria-label": option,
                    className: cn("zenithui-time-item", classNames?.timeScrollListItem, value === option ? "zenithui-selected" : "", value === option ? classNames?.Selected : ""),
                    children: option
                }, option))
        })
    });
};
const scroll_list = TimeScrollList;
export { scroll_list as default };