@brightsoftware/date-np
Version:
Simple & minimal Nepali date picker that just works.
140 lines (139 loc) • 4.12 kB
JavaScript
import { jsx as a, jsxs as K } from "react/jsx-runtime";
import V, { useState as q, useRef as z, useCallback as i, useEffect as H } from "react";
import { cn as l } from "../../utils/clsx.js";
import { usePicker as O } from "../hooks/usePicker.js";
import { useEditableDateInput as W } from "../hooks/useEditableDateInput.js";
import { formatISO as g, format as A } from "../format.js";
import "../../data/constants.js";
const re = V.forwardRef((u, b) => {
const {
required: G = !1,
className: x,
label: J,
name: L,
editable: t = !1,
onRegisterClearError: d,
...p
} = u, {
updatePickerVisiblity: v,
pickerState: E,
getDisplayDate: I,
updatePickerDay: w
} = O(), { isVisible: N, minDate: Y, maxDate: P, locale: h } = E, e = I(), [f, y] = q(!1), o = z(null), R = W({
onDateChange: (r) => {
r && w(r, !0);
},
minDate: Y,
maxDate: P,
currentDate: e
}), { handleInputChange: D, error: m, clearError: C } = t ? R : {
handleInputChange: () => {
},
error: null,
clearError: () => {
}
}, s = i(() => {
t && C();
}, [t, C]);
H(() => {
d && t && d(s);
}, [d, t, s]);
const n = (r) => u.dateFormat ? A(r, u.dateFormat) : g(r), k = (r) => {
if (t && f) {
r.stopPropagation();
return;
}
v(!N);
}, T = i(
(r) => {
if (!t) return;
const B = r.currentTarget.textContent || "";
D(B, h === "ne" ? "nepali" : "date");
},
[D, t, h]
), F = i(() => {
t && (y(!0), o.current && e && (o.current.textContent = g(e)));
}, [e, t]), M = i(() => {
t && (y(!1), o.current && e && (o.current.textContent = n(e)), s());
}, [e, n, t, s]), S = i(
(r) => {
if (t) {
if (r.key === "Enter")
r.preventDefault(), r.currentTarget.blur();
else if (r.key === "Escape") {
r.preventDefault();
const c = r.currentTarget;
e && (c.textContent = n(e)), c.blur();
}
}
},
[e, n, t]
), j = () => e ? t && f ? g(e) : n(e) : p.placeholder || "Select a date";
return t ? /* @__PURE__ */ a("div", { className: "inputContainer", children: /* @__PURE__ */ K(
"div",
{
ref: b,
className: l(
"relative flex h-[37px] items-center",
l(
"w-full rounded-md border border-gray-300 px-3 py-2",
"cursor-pointer font-[450] text-gray-400 focus:outline-none",
"bg-gray-100/40 text-sm transition-color"
),
x
),
onClick: k,
children: [
/* @__PURE__ */ a("div", { className: "flex items-center", children: /* @__PURE__ */ a(
"div",
{
ref: o,
className: l(
"min-w-[80px] p-1 cursor-text",
!e && "text-gray-500",
f && "bg-blue-50 rounded-md text-gray-500",
m && "bg-red-50 text-red-600 border-red-300"
),
style: { outline: "none" },
contentEditable: !0,
suppressContentEditableWarning: !0,
onInput: T,
onFocus: F,
onBlur: M,
onKeyDown: S,
"aria-label": "Date input",
"data-placeholder": e ? void 0 : "YYYY-MM-DD",
children: e ? n(e) : p.placeholder || "YYYY-MM-DD"
}
) }),
m && /* @__PURE__ */ a("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: m })
]
}
) }) : /* @__PURE__ */ a(
"div",
{
className: "inputContainer",
...p,
children: /* @__PURE__ */ a(
"div",
{
onClick: k,
ref: b,
className: l(
"appearance-none",
l(
"w-full rounded-md border border-gray-300 px-3 py-2",
"cursor-pointer font-[450] text-gray-400 focus:outline-none",
"bg-gray-100/40 text-sm transition-color"
),
x
),
children: j()
}
)
}
);
});
export {
re as default
};