@brightsoftware/date-np
Version:
Simple & minimal Nepali date picker that just works.
150 lines (149 loc) • 6.17 kB
JavaScript
import { jsx as t, jsxs as A } from "react/jsx-runtime";
import { MIN_AD_YEAR as ee, MIN_BS_YEAR as te, MAX_AD_YEAR as ae, MAX_BS_YEAR as ne } from "../../data/constants.js";
import { CALENDAR as j } from "../../data/locale.js";
import { cn as N } from "../../utils/clsx.js";
import { getTotalDaysInMonth as I, getStartingDayOfMonth as oe } from "../../utils/helpers.js";
import { areDatesEqual as S } from "../../utils/validators.js";
import { usePicker as C } from "../hooks/usePicker.js";
import R from "./day.js";
import re from "./month.js";
import { WeekRow as se } from "./week-row.js";
import { NepaliDate as b } from "../NepaliDate.js";
const Ne = ({
onSelect: Y,
todayStyle: T,
selected: F,
dateHover: O
}) => {
const { pickerState: d, updatePickerMonth: L, updatePickerMode: _, updatePickerYear: X, isDateInRange: P, resetToOriginalState: q } = C(), { today: U, selectedDate: M, activeYear: a, activeMonth: g, locale: l, minDate: ie, maxDate: ce } = d, V = l === "en" && a === ee || l === "ne" && a === te || l === "en" && a === ae || l === "ne" && a === ne, W = () => {
q();
};
if (V)
return /* @__PURE__ */ t("div", { className: "flex items-center justify-center w-full h-72 text-center", children: /* @__PURE__ */ A("div", { className: "text-gray-600", children: [
/* @__PURE__ */ t("div", { className: "text-lg font-medium mb-2", children: "Date not supported" }),
/* @__PURE__ */ t("div", { className: "text-sm text-gray-500 mb-4", children: l === "en" ? "Dates before 1945 are not supported" : "Dates before 2001 are not supported" }),
/* @__PURE__ */ t(
"button",
{
onClick: W,
className: "px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors",
children: "Pick another"
}
)
] }) });
const h = (c, n, e) => l === "ne" ? new b(c, n, e || 1) : new Date(c, n, e || 1), B = h(a, g, 1), E = I({ date: B, locale: l }), z = oe({ date: B, locale: l }), G = h(a, g - 1, 1), H = I({ date: G, locale: l }), k = z, J = () => [...Array(k)].map((c, n) => {
const e = H - (k - (n + 1)), r = h(a, g - 1, e), s = !M || !S(r, M), i = !P(r);
return /* @__PURE__ */ t(
R,
{
onRangeSelect: Y,
date: r,
disabled: i,
className: N(s && "bg-gray-50 opacity-50")
},
n
);
}), K = () => [...Array(E)].map((c, n) => {
const e = h(a, g, n + 1), r = !P(e);
return /* @__PURE__ */ t(
R,
{
dateHover: O,
selected: F,
todayStyle: T,
onRangeSelect: Y,
date: e,
disabled: r
},
n
);
}), Q = () => {
let e = 42 - (k + E);
return e >= 7 && (e = e - 7), [...Array(e)].map((r, s) => {
const i = h(a, g + 1, s + 1), u = !M || !S(i, M), m = l === "en" && s + 1 === U.getDate(), o = !P(i);
return /* @__PURE__ */ t(
R,
{
onRangeSelect: Y,
date: i,
isToday: m,
disabled: o,
className: N(u && "bg-gray-50 opacity-50")
},
s
);
});
};
return /* @__PURE__ */ A("div", { className: "flex items-center justify-between w-full min-h-72 overflow-auto", onClick: (c) => c.stopPropagation(), children: [
/* @__PURE__ */ t(() => d.mode !== "date" ? null : /* @__PURE__ */ A(re, { children: [
/* @__PURE__ */ t(se, {}),
/* @__PURE__ */ t(J, {}),
/* @__PURE__ */ t(K, {}),
/* @__PURE__ */ t(Q, {})
] }), {}),
/* @__PURE__ */ t(() => {
if (d.mode !== "month")
return null;
const { getEffectiveMinDate: c, getEffectiveMaxDate: n } = C(), e = c(), r = n();
let s, i;
d.locale === "ne" ? (s = new b(e), i = new b(r)) : (s = e, i = r);
const u = s.getFullYear(), m = i.getFullYear(), o = s.getMonth(), v = i.getMonth();
let f = [], p = 0, y = 11;
a === u && a === m ? (p = o, y = v) : a === u ? (p = o, y = 11) : a === m ? (p = 0, y = v) : (a < u || a > m) && (p = 0, y = -1), d.locale === "en" ? f = Object.values(j.AD.months) : f = Object.values(j.BS.months);
const Z = (w) => {
L(w), _("date");
};
return /* @__PURE__ */ t("div", { className: "grid grid-cols-2 grid-rows-6 gap-1 items-center w-full h-72 text-sm font-light", children: f.map((w, D) => {
const x = D < p || D > y;
return /* @__PURE__ */ t(
"button",
{
tabIndex: 0,
disabled: x,
className: N(
"flex items-center justify-center text-sm rounded-sm px-2 bg-gray-50 h-full cursor-pointer",
"hover:bg-gray-100",
D === g && !x && "bg-gray-900 text-white hover:bg-gray-800",
x && "opacity-50 cursor-not-allowed bg-gray-50 hover:bg-gray-50"
),
onClick: ($) => {
x || ($.stopPropagation(), Z(D));
},
children: w
},
D
);
}) });
}, {}),
/* @__PURE__ */ t(() => {
if (d.mode !== "year")
return null;
const { getEffectiveMinDate: c, getEffectiveMaxDate: n } = C(), e = c(), r = n(), s = d.locale === "ne" ? new b(e).getFullYear() : e.getFullYear(), i = d.locale === "ne" ? new b(r).getFullYear() : r.getFullYear(), u = (o) => {
X(o), _("month");
}, m = [];
for (let o = s; o <= i; o++) {
const v = /* @__PURE__ */ t(
"button",
{
tabIndex: 0,
className: N(
"flex items-center justify-center text-sm rounded-sm px-2 bg-gray-50 h-10 cursor-pointer",
"hover:bg-gray-100",
o === a && "bg-gray-900 text-white hover:bg-gray-800"
),
onClick: (f) => {
f.stopPropagation(), u(o);
},
children: o
},
o
);
m.push(v);
}
return /* @__PURE__ */ t("div", { className: "grid grid-cols-3 gap-1 items-center w-full h-72 text-sm font-light", children: m });
}, {})
] });
};
export {
Ne as default
};