@brightsoftware/date-np
Version:
Simple & minimal Nepali date picker that just works.
66 lines (65 loc) • 2.12 kB
JavaScript
import { jsx as P } from "react/jsx-runtime";
import { useRef as S, useMemo as s, useCallback as w } from "react";
import { cn as C } from "../../../utils/clsx.js";
import { areDatesEqual as i, compareDates as u } from "../../../utils/validators.js";
import { useRangePicker as M } from "../hooks/useRangePicker.js";
import { NepaliDate as g } from "../../NepaliDate.js";
const H = ({ date: r, className: b, panel: p }) => {
const {
rangePickerState: D,
updateRangePickerDay: y,
updateHoverDate: l,
isDateInRange: m
} = M(), { startDate: e, endDate: n, hoverDate: o, today: c } = D, h = S(null), k = s(() => {
if (r instanceof g) {
const a = g.fromADDate(c);
return i(r, a);
}
return i(r, c);
}, [r, c]), f = s(() => !e && !n ? !1 : !!(e && i(r, e) || n && i(r, n)), [r, e, n]), x = s(() => {
if (!e || !n) {
if (e && o && !n) {
const a = u(e, o) <= 0 ? e : o, E = u(e, o) <= 0 ? o : e;
return u(r, a) > 0 && u(r, E) < 0;
}
return !1;
}
return u(r, e) > 0 && u(r, n) < 0;
}, [r, e, n, o]);
s(() => e ? i(r, e) : !1, [r, e]), s(() => n ? i(r, n) : !1, [r, n]);
const t = s(() => !m(r), [r, m]), R = () => {
t || y(r, p);
}, v = w(() => {
!t && e && !n && l(r);
}, [e, n, r, l, t]);
return /* @__PURE__ */ P(
"button",
{
ref: h,
disabled: t,
onClick: (a) => {
a.stopPropagation(), R();
},
onMouseEnter: v,
className: C(
"w-8 h-8 flex items-center justify-center text-sm rounded-md",
"hover:cursor-pointer",
!f && !t && "hover:bg-gray-300 transition-colors",
"focus:outline-none focus:ring-2 focus:ring-blue-500",
// Disabled styling
t && "text-gray-300 cursor-not-allowed",
// Today styling
k && !f && !t && "bg-blue-50 text-blue-600 font-semibold",
// Range styling
x && !t && "bg-gray-200",
// Selected dates (start and end)
f && !t && "bg-black text-white font-semibold",
b
),
children: r.getDate()
}
);
};
export {
H as default
};