@brightsoftware/date-np
Version:
Simple & minimal Nepali date picker that just works.
142 lines (141 loc) • 6.04 kB
JavaScript
import { jsx as t, jsxs as A } from "react/jsx-runtime";
import { MIN_AD_YEAR as Z, MIN_BS_YEAR as $, MAX_AD_YEAR as ee, MAX_BS_YEAR as te } from "../../data/constants.js";
import { CALENDAR as R } from "../../data/locale.js";
import { cn as N } from "../../utils/clsx.js";
import { getTotalDaysInMonth as j, getStartingDayOfMonth as ne, getEndingDayOfMonth as ae } from "../../utils/helpers.js";
import { areDatesEqual as I } from "../../utils/validators.js";
import { usePicker as C } from "../hooks/usePicker.js";
import E from "./day.js";
import oe from "./month.js";
import { WeekRow as re } from "./week-row.js";
import { NepaliDate as b } from "../NepaliDate.js";
const xe = ({ onSelect: S }) => {
const { pickerState: d, updatePickerMonth: T, updatePickerMode: _, updatePickerYear: F, isDateInRange: Y, resetToOriginalState: O } = C(), { today: L, selectedDate: M, activeYear: n, activeMonth: u, locale: c, minDate: se, maxDate: ie } = d, X = c === "en" && n === Z || c === "ne" && n === $ || c === "en" && n === ee || c === "ne" && n === te, q = () => {
O();
};
if (X)
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: c === "en" ? "Dates before 1945 are not supported" : "Dates before 2001 are not supported" }),
/* @__PURE__ */ t(
"button",
{
onClick: q,
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 = (l, a, e) => c === "ne" ? new b(l, a, e || 1) : new Date(l, a, e || 1), B = h(n, u, 1), w = j({ date: B, locale: c }), U = ne({ date: B, locale: c }), V = h(n, u, w);
ae({ date: V, locale: c });
const W = h(n, u - 1, 1), z = j({ date: W, locale: c }), P = U, G = () => [...Array(P)].map((l, a) => {
const e = z - (P - (a + 1)), r = h(n, u - 1, e), s = !M || !I(r, M), i = !Y(r);
return /* @__PURE__ */ t(
E,
{
date: r,
disabled: i,
className: N(s && "bg-gray-50 opacity-50")
},
a
);
}), H = () => [...Array(w)].map((l, a) => {
const e = h(n, u, a + 1), r = !Y(e);
return /* @__PURE__ */ t(
E,
{
onRangeSelect: S,
date: e,
disabled: r
},
a
);
}), J = () => {
let e = 42 - (P + w);
return e >= 7 && (e = e - 7), [...Array(e)].map((r, s) => {
const i = h(n, u + 1, s + 1), g = !M || !I(i, M), m = c === "en" && s + 1 === L.getDate(), o = !Y(i);
return /* @__PURE__ */ t(
E,
{
date: i,
isToday: m,
disabled: o,
className: N(g && "bg-gray-50 opacity-50")
},
s
);
});
};
return /* @__PURE__ */ A("div", { className: "flex items-center justify-between w-full min-h-72 overflow-auto", children: [
/* @__PURE__ */ t(() => d.mode !== "date" ? null : /* @__PURE__ */ A(oe, { children: [
/* @__PURE__ */ t(re, {}),
/* @__PURE__ */ t(G, {}),
/* @__PURE__ */ t(H, {}),
/* @__PURE__ */ t(J, {})
] }), {}),
/* @__PURE__ */ t(() => {
if (d.mode !== "month")
return null;
const { getEffectiveMinDate: l, getEffectiveMaxDate: a } = C(), e = l(), r = a();
let s, i;
d.locale === "ne" ? (s = new b(e), i = new b(r)) : (s = e, i = r);
const g = s.getFullYear(), m = i.getFullYear(), o = s.getMonth(), v = i.getMonth();
let f = [], D = 0, y = 11;
n === g && n === m ? (D = o, y = v) : n === g ? (D = o, y = 11) : n === m ? (D = 0, y = v) : (n < g || n > m) && (D = 0, y = -1), d.locale === "en" ? f = Object.values(R.AD.months) : f = Object.values(R.BS.months);
const K = (k) => {
T(k), _("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((k, p) => {
const x = p < D || p > 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",
p === u && !x && "bg-gray-900 text-white hover:bg-gray-800",
x && "opacity-50 cursor-not-allowed bg-gray-50 hover:bg-gray-50"
),
onClick: (Q) => {
x || (Q.stopPropagation(), K(p));
},
children: k
},
p
);
}) });
}, {}),
/* @__PURE__ */ t(() => {
if (d.mode !== "year")
return null;
const { getEffectiveMinDate: l, getEffectiveMaxDate: a } = C(), e = l(), r = a(), s = d.locale === "ne" ? new b(e).getFullYear() : e.getFullYear(), i = d.locale === "ne" ? new b(r).getFullYear() : r.getFullYear(), g = (o) => {
F(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 === n && "bg-gray-900 text-white hover:bg-gray-800"
),
onClick: (f) => {
f.stopPropagation(), g(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 {
xe as default
};