@brightsoftware/date-np
Version:
Simple & minimal Nepali date picker that just works.
97 lines (96 loc) • 3.63 kB
JavaScript
import { jsxs as a, jsx as r } from "react/jsx-runtime";
import { useRef as u, useEffect as y } from "react";
import { cn as k } from "../../../utils/clsx.js";
const b = ({
label: d,
value: t,
onIncrement: n,
onDecrement: i,
className: x,
format: l = "am/pm",
isHours: c = !1
}) => {
const f = u(null);
y(() => {
const e = f.current;
if (!e) return;
const h = (s) => {
s.preventDefault(), s.stopPropagation(), s.deltaY > 0 ? n() : i();
};
return e.addEventListener("wheel", h, { passive: !1 }), () => {
e.removeEventListener("wheel", h);
};
}, [n, i]);
const g = (e) => {
e.preventDefault(), e.stopPropagation(), e.deltaY > 0 ? n() : i();
}, o = (e) => typeof e == "string" ? e : e.toString().padStart(2, "0"), m = () => typeof t == "string" ? t === "AM" ? "PM" : "AM" : o(c ? l === "24hr" ? t === 0 ? 23 : t - 1 : t === 1 ? 12 : t - 1 : t === 0 ? 59 : t - 1), p = () => typeof t == "string" ? t === "AM" ? "PM" : "AM" : o(c ? l === "24hr" ? t === 23 ? 0 : t + 1 : t === 12 ? 1 : t + 1 : t === 59 ? 0 : t + 1);
return /* @__PURE__ */ a("div", { className: k("flex flex-col items-center", x), children: [
/* @__PURE__ */ r("div", { className: "text-sm text-gray-500 mb-2 font-medium", children: d }),
/* @__PURE__ */ a(
"div",
{
ref: f,
className: "flex flex-col items-center select-none",
onWheel: g,
children: [
/* @__PURE__ */ r(
"button",
{
onClick: i,
className: "hover:cursor-pointer w-8 h-8 flex items-center justify-center text-gray-400 hover:text-gray-600 transition-colors",
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: "text-lg text-gray-300 h-8 flex items-center font-mono cursor-pointer hover:text-gray-500 transition-colors",
onClick: i,
children: m()
}
),
/* @__PURE__ */ r("div", { className: "text-2xl font-bold text-black h-12 flex items-center font-mono bg-gray-50 px-3 rounded", children: o(t) }),
/* @__PURE__ */ r(
"div",
{
className: "text-lg text-gray-300 h-8 flex items-center font-mono cursor-pointer hover:text-gray-500 transition-colors",
onClick: n,
children: p()
}
),
/* @__PURE__ */ r(
"button",
{
onClick: n,
className: "hover:cursor-pointer w-8 h-8 flex items-center justify-center text-gray-400 hover:text-gray-600 transition-colors",
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 {
b as TimeColumn
};