@brightsoftware/date-np
Version:
Simple & minimal Nepali date picker that just works.
113 lines (112 loc) • 4.6 kB
JavaScript
import { jsxs as f, jsx as n } from "react/jsx-runtime";
import { useMemo as S } from "react";
import { MIN_AD_YEAR as k, MIN_BS_YEAR as N, MAX_AD_YEAR as x, MAX_BS_YEAR as M } from "../../data/constants.js";
import { CALENDAR as C } from "../../data/locale.js";
import { cn as a } from "../../utils/clsx.js";
import { NepaliDate as _ } from "../NepaliDate.js";
import { usePicker as Y } from "../hooks/usePicker.js";
const U = () => {
const { pickerState: h, togglePickerMode: c } = Y(), { activeMonth: t, selectedDate: i, activeYear: e, locale: r } = h, o = r === "en" && e === k || r === "ne" && e === N || r === "en" && e === x || r === "ne" && e === M, l = S(() => r === "ne" ? new _(e, t, 15) : new Date(e, t, 15), [e, t, r]), s = r === "en" ? C.AD.months[l.getMonth()] : C.BS.months[l.getMonth()], w = l.getFullYear(), d = () => {
o || c("month", "date");
}, m = () => {
o || c("year", "date");
};
return /* @__PURE__ */ f("div", { className: "flex items-center justify-between w-full", children: [
b().previous,
/* @__PURE__ */ f("div", { className: a(
"wrapper space-x-2",
o ? "cursor-not-allowed opacity-50" : "cursor-pointer"
), children: [
/* @__PURE__ */ n("span", { onClick: d, className: a(
!o && "hover:underline"
), children: s }),
/* @__PURE__ */ n("span", { onClick: m, className: a(
!o && "hover:underline"
), children: w })
] }),
b().next,
/* @__PURE__ */ n(P, {})
] });
}, b = () => {
const {
pickerState: h,
updatePickerMonth: c,
updatePickerYear: t,
canNavigateToPreviousMonth: i,
canNavigateToNextMonth: e,
canNavigateToPreviousYear: r,
canNavigateToNextYear: o
} = Y(), { activeMonth: l, activeYear: s, mode: w, locale: d } = h, m = d === "en" && s === k || d === "ne" && s === N || d === "en" && s === x || d === "ne" && s === M, y = w === "year";
let p, u;
m ? (p = !1, u = !1) : y ? (p = r(), u = o()) : (p = i(), u = e());
const A = (v) => {
if (!m && !(v === "previous" && !p || v === "next" && !u))
if (y) {
const g = v === "next" ? s + 1 : s - 1;
t(g);
} else {
const g = v === "next" ? l + 1 : l - 1;
c(g);
}
};
return {
previous: /* @__PURE__ */ n(
"div",
{
className: a(
"left h-8 w-8 rounded-sm cursor-pointer hover:bg-gray-200 flex items-center justify-center",
!p && "opacity-50 cursor-not-allowed hover:bg-transparent"
),
onClick: () => A("previous"),
children: /* @__PURE__ */ n("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ n("path", { d: "m15 18-6-6 6-6" }) })
}
),
next: /* @__PURE__ */ n(
"div",
{
className: a(
"right h-8 w-8 rounded-sm cursor-pointer hover:bg-gray-200 flex items-center justify-center",
!u && "opacity-50 cursor-not-allowed hover:bg-transparent"
),
onClick: () => A("next"),
children: /* @__PURE__ */ n("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-chevron-right", children: /* @__PURE__ */ n("path", { d: "m9 18 6-6-6-6" }) })
}
)
};
}, P = () => {
const { pickerState: h, changePickerLocale: c } = Y(), { locale: t, activeYear: i } = h, e = t === "en" && i === k || t === "ne" && i === N || t === "en" && i === x || t === "ne" && i === M, r = (o) => {
e || c(o);
};
return /* @__PURE__ */ f("div", { className: a(
"flex items-center bg-gray-100 rounded-md h-6 w-16 text-sm",
e && "opacity-50 cursor-not-allowed"
), children: [
/* @__PURE__ */ n(
"span",
{
onClick: () => r("en"),
className: a(
"h-8 w-8 grid place-items-center rounded-md",
!e && "cursor-pointer",
t === "en" ? "bg-white drop-shadow-sm" : "bg-transparent opacity-60"
),
children: "AD"
}
),
/* @__PURE__ */ n(
"span",
{
onClick: () => r("ne"),
className: a(
"h-8 w-8 grid place-items-center rounded-md",
!e && "cursor-pointer",
t === "ne" ? "bg-white drop-shadow-sm" : "bg-transparent opacity-60"
),
children: "BS"
}
)
] });
};
export {
U as default
};