@brightsoftware/date-np
Version:
Simple & minimal Nepali date picker that just works.
102 lines (101 loc) • 3.83 kB
JavaScript
import { jsxs as p, jsx as r } from "react/jsx-runtime";
import { useRef as N, useEffect as w } from "react";
import { cn as o } from "../../../utils/clsx.js";
const P = ({
label: g,
value: t,
onIncrement: i,
onDecrement: s,
className: u,
format: c = "am/pm",
isHours: f = !1,
labelClassName: m,
currentValueClassName: y,
adjacentValueClassName: h,
arrowButtonClassName: d,
columnContainerClassName: k
}) => {
const x = N(null);
w(() => {
const e = x.current;
if (!e) return;
const a = (l) => {
l.preventDefault(), l.stopPropagation(), l.deltaY > 0 ? i() : s();
};
return e.addEventListener("wheel", a, { passive: !1 }), () => {
e.removeEventListener("wheel", a);
};
}, [i, s]);
const L = (e) => {
e.preventDefault(), e.stopPropagation(), e.deltaY > 0 ? i() : s();
}, n = (e) => typeof e == "string" ? e : e.toString().padStart(2, "0"), b = () => typeof t == "string" ? t === "AM" ? "PM" : "AM" : n(f ? c === "24hr" ? t === 0 ? 23 : t - 1 : t === 1 ? 12 : t - 1 : t === 0 ? 59 : t - 1), M = () => typeof t == "string" ? t === "AM" ? "PM" : "AM" : n(f ? c === "24hr" ? t === 23 ? 0 : t + 1 : t === 12 ? 1 : t + 1 : t === 59 ? 0 : t + 1);
return /* @__PURE__ */ p("div", { className: o("flex flex-col items-center", u), children: [
/* @__PURE__ */ r("div", { className: o("text-sm text-gray-500 mb-2 font-medium", m), children: g }),
/* @__PURE__ */ p(
"div",
{
ref: x,
className: o("flex flex-col items-center select-none", k),
onWheel: L,
children: [
/* @__PURE__ */ r(
"button",
{
onClick: s,
className: o("hover:cursor-pointer w-8 h-8 flex items-center justify-center text-gray-400 hover:text-gray-600 transition-colors", d),
type: "button",
children: /* @__PURE__ */ r("svg", { width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", children: /* @__PURE__ */ r(
"path",
{
d: "M6 1L11 6L1 6L6 1Z",
fill: "currentColor",
stroke: "currentColor",
strokeWidth: "1",
strokeLinejoin: "round"
}
) })
}
),
/* @__PURE__ */ r(
"div",
{
className: o("text-lg text-gray-300 h-8 flex items-center font-mono cursor-pointer hover:text-gray-500 transition-colors", h),
onClick: s,
children: b()
}
),
/* @__PURE__ */ r("div", { className: o("text-2xl font-bold text-black h-12 flex items-center font-mono bg-gray-50 px-3 rounded cursor-pointer", y), children: n(t) }),
/* @__PURE__ */ r(
"div",
{
className: o("text-lg text-gray-300 h-8 flex items-center font-mono cursor-pointer hover:text-gray-500 transition-colors", h),
onClick: i,
children: M()
}
),
/* @__PURE__ */ r(
"button",
{
onClick: i,
className: o("hover:cursor-pointer w-8 h-8 flex items-center justify-center text-gray-400 hover:text-gray-600 transition-colors", d),
type: "button",
children: /* @__PURE__ */ r("svg", { width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", children: /* @__PURE__ */ r(
"path",
{
d: "M6 7L1 2L11 2L6 7Z",
fill: "currentColor",
stroke: "currentColor",
strokeWidth: "1",
strokeLinejoin: "round"
}
) })
}
)
]
}
)
] });
};
export {
P as TimeColumn
};