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