@zenithui/time-picker
Version:
A ZenithUi Time Picker is React component enables users to select a time from a predefined list of options.
41 lines (40 loc) • 2.29 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__toggle_group_index_js_24dabcd5__ from "../toggle-group/index.js";
import * as __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__ from "@zenithui/utils";
const TimeScrollList = ({ options, value, classNames, onChange })=>{
const listRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
(0, __WEBPACK_EXTERNAL_MODULE_react__.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__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
className: "zenithui-time-custom-scroll",
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__toggle_group_index_js_24dabcd5__.ToggleGroupRoot, {
ref: listRef,
type: "single",
className: (0, __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__.cn)("zenithui-time-scroll-container", classNames?.timeScrollList),
value: value,
onValueChange: (selectedValue)=>{
if ("string" == typeof selectedValue) onChange(selectedValue);
},
children: options.map((option)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__toggle_group_index_js_24dabcd5__.ToggleGroupItem, {
value: option,
"aria-label": option,
className: (0, __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__.cn)("zenithui-time-item", classNames?.timeScrollListItem, value === option ? "zenithui-selected" : "", value === option ? classNames?.Selected : ""),
children: option
}, option))
})
});
};
const scroll_list_rslib_entry_ = TimeScrollList;
export { scroll_list_rslib_entry_ as default };