@brightsoftware/date-np
Version:
Simple & minimal Nepali date picker that just works.
194 lines (193 loc) • 6.94 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 oe, MAX_BS_YEAR as ae } from "../../data/constants.js";
import { CALENDAR as I } from "../../data/locale.js";
import { cn as Y } from "../../utils/clsx.js";
import { getTotalDaysInMonth as S, getStartingDayOfMonth as ne } from "../../utils/helpers.js";
import { areDatesEqual as j } from "../../utils/validators.js";
import { usePicker as R } from "../hooks/usePicker.js";
import C from "./day.js";
import re from "./month.js";
import { WeekRow as se } from "./week-row.js";
import { NepaliDate as v } from "../NepaliDate.js";
const we = ({
onSelect: N,
todayStyle: F,
selected: O,
dateHover: H
}) => {
const {
pickerState: d,
updatePickerMonth: L,
updatePickerMode: B,
updatePickerYear: X,
isDateInRange: P,
resetToOriginalState: q
} = R(), {
today: U,
selectedDate: x,
activeYear: o,
activeMonth: f,
locale: l,
minDate: ie,
maxDate: ce
} = d, V = l === "en" && o === ee || l === "ne" && o === te || l === "en" && o === oe || l === "ne" && o === ae, 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 D = (c, n, e) => l === "ne" ? new v(c, n, e || 1) : new Date(c, n, e || 1), _ = D(o, f, 1), E = S({
date: _,
locale: l
}), z = ne({
date: _,
locale: l
}), G = D(o, f - 1, 1), J = S({
date: G,
locale: l
}), k = z, K = () => [...Array(k)].map((c, n) => {
const e = J - (k - (n + 1)), s = D(o, f - 1, e), r = !x || !j(s, x), i = !P(s);
return /* @__PURE__ */ t(
C,
{
onRangeSelect: N,
date: s,
disabled: i,
className: Y(r && "bg-gray-50 opacity-50")
},
n
);
}), Q = () => [...Array(E)].map((c, n) => {
const e = D(o, f, n + 1), s = !P(e);
return /* @__PURE__ */ t(
C,
{
dateHover: H,
selected: O,
todayStyle: F,
onRangeSelect: N,
date: e,
disabled: s
},
n
);
}), Z = () => {
let e = 42 - (k + E);
return e >= 7 && (e = e - 7), [...Array(e)].map((s, r) => {
const i = D(o, f + 1, r + 1), u = !x || !j(i, x), m = l === "en" && r + 1 === U.getDate(), a = !P(i);
return /* @__PURE__ */ t(
C,
{
onRangeSelect: N,
date: i,
isToday: m,
disabled: a,
className: Y(u && "bg-gray-50 opacity-50")
},
r
);
});
};
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(K, {}),
/* @__PURE__ */ t(Q, {}),
/* @__PURE__ */ t(Z, {})
] }), {}),
/* @__PURE__ */ t(() => {
if (d.mode !== "month") return null;
const { getEffectiveMinDate: c, getEffectiveMaxDate: n } = R(), e = c(), s = n();
let r, i;
d.locale === "ne" ? (r = new v(e), i = new v(s)) : (r = e, i = s);
const u = r.getFullYear(), m = i.getFullYear(), a = r.getMonth(), p = i.getMonth();
let h = [], g = 0, y = 11;
o === u && o === m ? (g = a, y = p) : o === u ? (g = a, y = 11) : o === m ? (g = 0, y = p) : (o < u || o > m) && (g = 0, y = -1), d.locale === "en" ? h = Object.values(I.AD.months) : h = Object.values(I.BS.months);
const T = (b) => {
L(b), B("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: h.map((b, M) => {
const w = M < g || M > y;
return /* @__PURE__ */ t(
"button",
{
tabIndex: 0,
disabled: w,
className: Y(
"flex items-center justify-center text-sm rounded-sm px-2 bg-gray-50 h-full cursor-pointer",
"hover:bg-gray-100",
M === f && !w && "bg-gray-900 text-white hover:bg-gray-800",
w && "opacity-50 cursor-not-allowed bg-gray-50 hover:bg-gray-50"
),
onClick: ($) => {
w || ($.stopPropagation(), T(M));
},
children: b
},
M
);
}) });
}, {}),
/* @__PURE__ */ t(() => {
if (d.mode !== "year") return null;
const { getEffectiveMinDate: c, getEffectiveMaxDate: n } = R(), e = c(), s = n(), r = d.locale === "ne" ? new v(e).getFullYear() : e.getFullYear(), i = d.locale === "ne" ? new v(s).getFullYear() : s.getFullYear(), u = (a) => {
X(a), B("month");
}, m = [];
for (let a = r; a <= i; a++) {
const p = /* @__PURE__ */ t(
"button",
{
tabIndex: 0,
className: Y(
"flex items-center justify-center text-sm rounded-sm px-2 bg-gray-50 h-10 cursor-pointer",
"hover:bg-gray-100",
a === o && "bg-gray-900 text-white hover:bg-gray-800"
),
onClick: (h) => {
h.stopPropagation(), u(a);
},
children: a
},
a
);
m.push(p);
}
return /* @__PURE__ */ t(
"div",
{
className: "grid grid-cols-3 gap-1 items-center w-full h-72 text-sm font-light overflow-auto",
style: {
scrollBehavior: "smooth"
},
ref: (a) => {
if (a) {
const p = o - r, h = 3, g = 44, b = Math.floor(p / h) * g - 288 / 2 + g / 2;
a.scrollTop = Math.max(0, b);
}
},
children: m
}
);
}, {})
]
}
);
};
export {
we as default
};