@brightsoftware/date-np
Version:
Simple & minimal Nepali date picker that just works.
182 lines (181 loc) • 5.76 kB
JavaScript
import { jsxs as w, jsx as t } from "react/jsx-runtime";
import { useMemo as b } from "react";
import { MIN_AD_YEAR as M, MIN_BS_YEAR as Y, MAX_AD_YEAR as y, MAX_BS_YEAR as A } from "../../data/constants.js";
import { CALENDAR as S } from "../../data/locale.js";
import { cn as c } from "../../utils/clsx.js";
import { NepaliDate as L } from "../NepaliDate.js";
import { usePicker as C } from "../hooks/usePicker.js";
const W = ({
monthLabel: l,
yearLabel: d,
arrowIcon: e,
lockLocale: s = !1
}) => {
const { pickerState: i, togglePickerMode: h } = C(), { activeMonth: p, activeYear: r, locale: o } = i, a = o === "en" && r === M || o === "ne" && r === Y || o === "en" && r === y || o === "ne" && r === A, n = b(() => o === "ne" ? new L(r, p, 15) : new Date(r, p, 15), [r, p, o]), N = o === "en" ? S.AD.months[n.getMonth()] : S.BS.months[n.getMonth()], m = n.getFullYear(), v = () => {
a || h("month", "date");
}, f = () => {
a || h("year", "date");
};
return /* @__PURE__ */ w("div", { className: "flex items-center justify-between w-full", onClick: (u) => u.stopPropagation(), children: [
_({
arrowIconLeft: e == null ? void 0 : e.arrowIconLeft,
arrowIconRight: e == null ? void 0 : e.arrowIconRight
}).previous,
/* @__PURE__ */ w(
"div",
{
className: c(
"wrapper space-x-2",
a ? "cursor-not-allowed opacity-50" : "cursor-pointer"
),
children: [
/* @__PURE__ */ t(
"span",
{
onClick: v,
className: c(
a ? "" : l || "hover:underline"
),
children: N
}
),
/* @__PURE__ */ t(
"span",
{
onClick: f,
className: c(
a ? "" : d || "hover:underline"
),
children: m
}
)
]
}
),
_({
arrowIconLeft: e == null ? void 0 : e.arrowIconLeft,
arrowIconRight: e == null ? void 0 : e.arrowIconRight
}).next,
!s && /* @__PURE__ */ t(R, {})
] });
}, _ = ({
arrowIconLeft: l,
arrowIconRight: d
}) => {
const {
pickerState: e,
updatePickerMonth: s,
updatePickerYear: i,
canNavigateToPreviousMonth: h,
canNavigateToNextMonth: p,
canNavigateToPreviousYear: r,
canNavigateToNextYear: o
} = C(), { activeMonth: a, activeYear: n, mode: N, locale: m } = e, v = m === "en" && n === M || m === "ne" && n === Y || m === "en" && n === y || m === "ne" && n === A, f = N === "year";
let u, g;
v ? (u = !1, g = !1) : f ? (u = r(), g = o()) : (u = h(), g = p());
const P = (k) => {
if (!v && !(k === "previous" && !u || k === "next" && !g))
if (f) {
const x = k === "next" ? n + 1 : n - 1;
i(x);
} else {
const x = k === "next" ? a + 1 : a - 1;
s(x);
}
};
return {
previous: /* @__PURE__ */ t(
"div",
{
className: c(
"left 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: () => P("previous"),
children: l || /* @__PURE__ */ t(
"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__ */ t("path", { d: "m15 18-6-6 6-6" })
}
)
}
),
next: /* @__PURE__ */ t(
"div",
{
className: c(
"right h-8 w-8 rounded-sm cursor-pointer hover:bg-gray-200 flex items-center justify-center",
!g && "opacity-50 cursor-not-allowed hover:bg-transparent"
),
onClick: () => P("next"),
children: d || /* @__PURE__ */ t(
"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__ */ t("path", { d: "m9 18 6-6-6-6" })
}
)
}
)
};
}, R = () => {
const { pickerState: l, changePickerLocale: d } = C(), { locale: e, activeYear: s } = l, i = e === "en" && s === M || e === "ne" && s === Y || e === "en" && s === y || e === "ne" && s === A, h = (p) => {
i || d(p);
};
return /* @__PURE__ */ w(
"div",
{
className: c(
"flex items-center bg-gray-100 rounded-md h-6 w-16 text-sm",
i && "opacity-50 cursor-not-allowed"
),
children: [
/* @__PURE__ */ t(
"span",
{
onClick: () => h("en"),
className: c(
"h-8 w-8 grid place-items-center rounded-md",
!i && "cursor-pointer",
e === "en" ? "bg-white drop-shadow-sm" : "bg-transparent opacity-60"
),
children: "AD"
}
),
/* @__PURE__ */ t(
"span",
{
onClick: () => h("ne"),
className: c(
"h-8 w-8 grid place-items-center rounded-md",
!i && "cursor-pointer",
e === "ne" ? "bg-white drop-shadow-sm" : "bg-transparent opacity-60"
),
children: "BS"
}
)
]
}
);
};
export {
W as default
};