@brightsoftware/date-np
Version:
Simple & minimal Nepali date picker that just works.
91 lines (90 loc) • 3.86 kB
JavaScript
import { jsxs as P, jsx as n } from "react/jsx-runtime";
import { useMemo as m } from "react";
import { MIN_AD_YEAR as _, MAX_AD_YEAR as b, MIN_BS_YEAR as B, MAX_BS_YEAR as L } from "../../../data/constants.js";
import { CALENDAR as Y } from "../../../data/locale.js";
import { cn as d } from "../../../utils/clsx.js";
import { useRangePicker as E } from "../hooks/useRangePicker.js";
import { NepaliDate as I } from "../../NepaliDate.js";
const z = ({ panel: r }) => {
const {
rangePickerState: l,
togglePanelMode: v,
incrementPanelMonth: g,
canNavigateToPreviousMonth: M,
canNavigateToNextMonth: p,
shouldShowSinglePanel: w
} = E(), { locale: u } = l, A = r === "left" ? l.leftPanel : l.rightPanel, o = r === "left" ? l.rightPanel : l.leftPanel, { activeMonth: a, activeYear: e } = A, i = () => u === "en" && e === _ || e === b || u === "ne" && e === B || e === L, f = m(() => u === "ne" ? new I(e, a, 15) : new Date(e, a, 15), [e, a, u]), y = u === "en" ? Y.AD.months[f.getMonth()] : Y.BS.months[f.getMonth()], C = f.getFullYear(), h = w(), x = m(() => {
if (i() || h || !p(r)) return !0;
if (r === "left") {
const t = a + 1, s = t > 11 ? e + 1 : e, c = t > 11 ? 0 : t;
if (s === o.activeYear && c >= o.activeMonth || s > o.activeYear)
return !0;
}
return !1;
}, [r, a, e, o.activeMonth, o.activeYear, h, p]), N = m(() => {
if (i() || h || !M(r)) return !0;
if (r === "right") {
const t = a - 1, s = t < 0 ? e - 1 : e, c = t < 0 ? 11 : t;
if (s === o.activeYear && c <= o.activeMonth || s < o.activeYear)
return !0;
}
return !1;
}, [r, a, e, o.activeMonth, o.activeYear, h, M]), D = () => {
i() || v(r, "month", "date");
}, S = () => {
i() || v(r, "year", "date");
}, j = () => {
i() || N || g(r, -1);
}, R = () => {
i() || x || g(r, 1);
}, k = ({ direction: t, onClick: s, disabled: c }) => /* @__PURE__ */ n(
"button",
{
onClick: s,
disabled: c,
className: d(
"p-1 rounded transition-colors",
c ? "text-gray-300" : "text-gray-600 hover:text-gray-900 hover:bg-gray-100 hover:cursor-pointer"
),
children: t === "left" ? /* @__PURE__ */ n("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ n("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) : /* @__PURE__ */ n("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ n("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
}
);
return /* @__PURE__ */ P("div", { className: "flex items-center justify-between w-full mb-2", children: [
/* @__PURE__ */ n("div", { className: "w-8", children: /* @__PURE__ */ n(k, { direction: "left", onClick: (t) => {
t.stopPropagation(), j();
}, disabled: N }) }),
/* @__PURE__ */ P("div", { className: d(
"flex items-center space-x-2",
i() ? "cursor-not-allowed opacity-50" : "cursor-pointer"
), children: [
/* @__PURE__ */ n(
"span",
{
onClick: D,
className: d(
"font-medium text-gray-700",
!i() && "hover:underline"
),
children: y
}
),
/* @__PURE__ */ n(
"span",
{
onClick: S,
className: d(
"font-medium text-gray-700",
!i() && "hover:underline"
),
children: C
}
)
] }),
/* @__PURE__ */ n("div", { className: "flex justify-end items-center gap-1", children: /* @__PURE__ */ n(k, { direction: "right", onClick: (t) => {
t.stopPropagation(), R();
}, disabled: x }) })
] });
};
export {
z as default
};