@zenithui/time-picker
Version:
A ZenithUi Time Picker is React component enables users to select a time from a predefined list of options.
93 lines (92 loc) • 6.31 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__utils_js_db66b9f7__ from "../utils.js";
import * as __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__ from "@zenithui/utils";
import * as __WEBPACK_EXTERNAL_MODULE__popover_index_js_aa2b4e51__ from "../popover/index.js";
import * as __WEBPACK_EXTERNAL_MODULE__scroll_list_js_47786e74__ from "./scroll-list.js";
const TimePicker = ({ time, align = "center", side = "bottom", theme = "auto", alignOffset = 10, sideOffset = 10, classNames, onTimeChange, formatter = __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.formatTime24To12 })=>{
const device = (0, __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__.useDeviceType)();
const hookTheme = (0, __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__.useTheme)();
const [hour, setHour] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)((0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.getInitialHour)(time));
const [minute, setMinute] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(time?.split(":")?.[1]);
const [period, setPeriod] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)((0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.getInitialPeriod)(time));
const hours = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.generateTimeOptions)(1, 12), []);
const minutes = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.generateTimeOptions)(0, 59), []);
const themeClass = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>"auto" === theme ? hookTheme : "dark" === theme ? "dark" : "", [
theme
]);
(0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
const newTime = `${(0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.convertTo24Hour)(hour, period)}:${minute}`;
if (newTime !== time) onTimeChange(newTime);
}, [
hour,
minute,
period,
time,
onTimeChange
]);
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__popover_index_js_aa2b4e51__.Popover, {
children: [
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__popover_index_js_aa2b4e51__.PopoverTrigger, {
asChild: true,
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("button", {
className: (0, __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__.cn)(themeClass, "zenithui-time-trigger", classNames?.button),
children: [
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
children: formatter(time)
}),
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ClockIcon, {})
]
})
}),
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__popover_index_js_aa2b4e51__.PopoverContent, {
align: align,
side: device.includes("Mobile") ? "top" : side,
alignOffset: alignOffset,
sideOffset: sideOffset,
openAnimate: "slide",
closeAnimate: "slide",
className: (0, __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__.cn)(themeClass, "zenithui-time-container", classNames?.popoverContent),
onWheel: (e)=>e.stopPropagation(),
children: [
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__scroll_list_js_47786e74__["default"], {
options: hours,
value: hour,
classNames: classNames,
onChange: setHour
}),
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__scroll_list_js_47786e74__["default"], {
options: minutes,
value: minute,
classNames: classNames,
onChange: setMinute
}),
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__scroll_list_js_47786e74__["default"], {
options: [
"AM",
"PM"
],
value: period,
classNames: classNames,
onChange: setPeriod
})
]
})
]
});
};
const ClockIcon = ()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("svg", {
width: "15",
height: "15",
viewBox: "0 0 15 15",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("path", {
d: "M7.50009 0.877014C3.84241 0.877014 0.877258 3.84216 0.877258 7.49984C0.877258 11.1575 3.8424 14.1227 7.50009 14.1227C11.1578 14.1227 14.1229 11.1575 14.1229 7.49984C14.1229 3.84216 11.1577 0.877014 7.50009 0.877014ZM1.82726 7.49984C1.82726 4.36683 4.36708 1.82701 7.50009 1.82701C10.6331 1.82701 13.1729 4.36683 13.1729 7.49984C13.1729 10.6328 10.6331 13.1727 7.50009 13.1727C4.36708 13.1727 1.82726 10.6328 1.82726 7.49984ZM8 4.50001C8 4.22387 7.77614 4.00001 7.5 4.00001C7.22386 4.00001 7 4.22387 7 4.50001V7.50001C7 7.63262 7.05268 7.7598 7.14645 7.85357L9.14645 9.85357C9.34171 10.0488 9.65829 10.0488 9.85355 9.85357C10.0488 9.65831 10.0488 9.34172 9.85355 9.14646L8 7.29291V4.50001Z",
fill: "currentColor",
fillRule: "evenodd",
clipRule: "evenodd"
})
});
const time_picker_rslib_entry_ = TimePicker;
export { time_picker_rslib_entry_ as default };