@brightsoftware/date-np
Version:
Simple & minimal Nepali date picker that just works.
95 lines (94 loc) • 2.58 kB
JavaScript
import { jsxs as l, jsx as r } from "react/jsx-runtime";
import { cn as x } from "../../../utils/clsx.js";
import { useTimePicker as P } from "../hooks/useTimePicker.js";
import { TimeColumn as o } from "./time-column.js";
import { useRef as D, useEffect as H } from "react";
const w = ({ className: m }) => {
const s = D(null), {
timePickerState: u,
incrementHours: d,
decrementHours: f,
incrementMinutes: p,
decrementMinutes: v,
incrementSeconds: h,
decrementSeconds: g,
togglePeriod: i
} = P(), { selectedTime: n, format: t } = u;
H(() => {
const e = s.current;
if (!e) return;
const a = (c) => {
c.preventDefault(), c.stopPropagation();
};
return e.addEventListener("wheel", a, { passive: !1 }), () => {
e.removeEventListener("wheel", a);
};
}, []);
const b = (e) => {
e.preventDefault(), e.stopPropagation(), e.nativeEvent && (e.nativeEvent.preventDefault(), e.nativeEvent.stopImmediatePropagation());
};
return /* @__PURE__ */ l(
"div",
{
ref: s,
className: x(
"bg-white rounded-lg shadow-lg border border-gray-200 p-6",
"flex flex-col items-center space-y-4",
m
),
onWheel: b,
children: [
/* @__PURE__ */ r("div", { className: "text-lg font-semibold text-gray-900 mb-2", children: "Select Time" }),
/* @__PURE__ */ l("div", { className: "flex items-center space-x-8", children: [
/* @__PURE__ */ r(
o,
{
label: "Hours",
value: n.hours,
onIncrement: d,
onDecrement: f,
format: t,
isHours: !0
}
),
/* @__PURE__ */ r(
o,
{
label: "Minutes",
value: n.minutes,
onIncrement: p,
onDecrement: v,
format: t,
isHours: !1
}
),
/* @__PURE__ */ r(
o,
{
label: "Seconds",
value: n.seconds,
onIncrement: h,
onDecrement: g,
format: t,
isHours: !1
}
),
t === "am/pm" && n.period && /* @__PURE__ */ r(
o,
{
label: "AM/PM",
value: n.period,
onIncrement: i,
onDecrement: i,
format: t,
isHours: !1
}
)
] })
]
}
);
};
export {
w as TimePickerBody
};