@brightsoftware/date-np
Version:
Simple & minimal Nepali date picker that just works.
179 lines (178 loc) • 6.49 kB
JavaScript
import { jsxs as d, jsx as c, Fragment as z } from "react/jsx-runtime";
import { forwardRef as H, useState as O, useRef as R, useCallback as u, useEffect as X } from "react";
import { cn as l } from "../../../utils/clsx.js";
import { useRangePicker as q } from "../hooks/useRangePicker.js";
import { useEditableDateInput as G } from "../hooks/useEditableDateInput.js";
import { formatISO as E, format as J } from "../../format.js";
import { MIN_AD_YEAR as L, MAX_AD_YEAR as Q } from "../../../data/constants.js";
const U = H(
({ className: D, placeholder: Y = "Select Date..", dateFormat: v, editable: r = !1, onRegisterClearErrors: h }, C) => {
const {
rangePickerState: F,
updateRangePickerVisibility: P,
getDisplayDateRange: T,
updateRangePickerDay: b
} = q(), { isVisible: A, minDate: k, maxDate: I } = F, { startDate: e, endDate: n } = T(), [y, g] = O(
null
), f = R(null), p = R(null), B = G({
onStartDateChange: (t) => {
t && b(t, "start");
},
onEndDateChange: (t) => {
t && b(t, "end");
},
minDate: k || new Date(L + 1, 0, 1),
maxDate: I || new Date(Q - 1, 11, 31),
currentStartDate: e,
currentEndDate: n
}), { handleInputChange: m, errors: a, clearErrors: w } = r ? B : {
handleInputChange: () => {
},
errors: { start: null, end: null },
clearErrors: () => {
}
}, i = u(() => {
r && w();
}, [r, w]);
X(() => {
h && r && h(i);
}, [h, r, i]);
const o = (t) => v ? J(t, v) : E(t), S = (t) => {
if (r && y) {
t.stopPropagation();
return;
}
P(!A);
}, _ = u(
(t) => {
if (!r) return;
const s = t.currentTarget.textContent || "";
m(s, "start");
},
[m, r]
), K = u(
(t) => {
if (!r) return;
const s = t.currentTarget.textContent || "";
m(s, "end");
},
[m, r]
), $ = u(() => {
r && (g("start"), f.current && e && (f.current.textContent = E(e)));
}, [e, r]), j = u(() => {
r && (g("end"), p.current && n && (p.current.textContent = E(n)));
}, [n, r]), V = u(() => {
r && (g(null), f.current && e && (f.current.textContent = o(e)), i());
}, [e, o, r, i]), W = u(() => {
r && (g(null), p.current && n && (p.current.textContent = o(n)), i());
}, [n, o, r, i]), M = u(
(t, x) => {
if (r) {
if (t.key === "Enter")
t.preventDefault(), t.currentTarget.blur();
else if (t.key === "Escape") {
t.preventDefault();
const s = t.currentTarget;
x === "start" && e ? s.textContent = o(e) : x === "end" && n && (s.textContent = o(n)), s.blur();
}
}
},
[e, n, o, r]
), N = () => !e && !n ? "" : e && !n ? `From: ${o(e)}` : e && n ? `From: ${o(e)} To: ${o(n)}` : "";
return r ? /* @__PURE__ */ d(
"div",
{
ref: C,
className: l(
"relative",
l(
"w-full px-3 py-2 border border-gray-300 rounded-md",
"focus:outline-none cursor-pointer text-gray-400 font-[450]",
"bg-gray-100/40 text-sm hover:border-gray-400 transition-colors"
),
D
),
onClick: S,
children: [
/* @__PURE__ */ d("div", { className: "flex items-center gap-1", children: [
/* @__PURE__ */ c("span", { className: "text-gray-700", children: "From:" }),
/* @__PURE__ */ c(
"div",
{
ref: f,
className: l(
"inline-block min-w-[100px] px-1 rounded border-0 outline-none focus:bg-blue-50 cursor-text",
!e && "text-gray-500",
a.start && "bg-red-50 text-red-600"
),
contentEditable: !0,
suppressContentEditableWarning: !0,
onInput: _,
onFocus: $,
onBlur: V,
onKeyDown: (t) => M(t, "start"),
role: "textbox",
"aria-label": "Start date",
"data-placeholder": e ? void 0 : "YYYY-MM-DD",
children: e ? o(e) : "YYYY-MM-DD"
}
),
/* @__PURE__ */ d(z, { children: [
/* @__PURE__ */ c("span", { className: "text-gray-700 ml-2", children: "To:" }),
/* @__PURE__ */ c(
"div",
{
ref: p,
className: l(
"inline-block min-w-[100px] px-1 rounded border-0 outline-none focus:bg-blue-50 cursor-text",
!n && "text-gray-500",
a.end && "bg-red-50 text-red-600"
),
contentEditable: !0,
suppressContentEditableWarning: !0,
onInput: K,
onFocus: j,
onBlur: W,
onKeyDown: (t) => M(t, "end"),
role: "textbox",
"aria-label": "End date",
"data-placeholder": n ? void 0 : "YYYY-MM-DD",
children: n ? o(n) : "YYYY-MM-DD"
}
)
] }),
!e && !n && y !== "start" && y !== "end" && /* @__PURE__ */ c("span", { className: "text-gray-500", children: r ? "" : Y })
] }),
(a.start || a.end) && /* @__PURE__ */ d("div", { className: "absolute top-full left-0 mt-1 text-xs text-red-600 bg-white border border-red-200 rounded px-2 py-1 shadow-sm z-10", children: [
a.start && /* @__PURE__ */ d("div", { children: [
"Start: ",
a.start
] }),
a.end && /* @__PURE__ */ d("div", { children: [
"End: ",
a.end
] })
] })
]
}
) : /* @__PURE__ */ c(
"div",
{
ref: C,
className: l(
D || l(
"w-full px-3 py-2 border border-gray-300 rounded-md",
"focus:outline-none cursor-pointer text-gray-400 font-[450]",
"bg-gray-100/40 text-sm hover:border-gray-400 transition-colors"
)
),
onClick: S,
children: /* @__PURE__ */ c("span", { className: l(!e && !n && "text-gray-500"), children: N().length < 1 ? Y : N() })
}
);
}
);
U.displayName = "RangePickerInput";
export {
U as default
};