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