@brightsoftware/date-np
Version:
Simple & minimal Nepali date picker that just works.
198 lines (197 loc) • 6.34 kB
JavaScript
import { jsx as l, jsxs as I } from "react/jsx-runtime";
import O, { useState as P, useRef as A, useCallback as f, useEffect as G } from "react";
import { cn as m } from "../../utils/clsx.js";
import { usePicker as J } from "../hooks/usePicker.js";
import { useEditableDateInput as Q } from "../hooks/useEditableDateInput.js";
import { formatISO as y, format as U } from "../format.js";
import "../../data/constants.js";
const se = O.forwardRef((b, v) => {
const {
required: X = !1,
className: w,
label: Z,
name: _,
editable: t = !0,
onRegisterClearError: x,
disabled: o,
dateFormat: $,
...g
} = b, {
updatePickerVisiblity: k,
pickerState: M,
getDisplayDate: j,
updatePickerDay: F
} = J(), { isVisible: L, minDate: R, maxDate: B, locale: s } = M, r = j(), [c, C] = P(!1), [u, d] = P(""), S = A(null), T = (e) => {
const i = e.replace(/\D/g, "");
let n = "";
for (let a = 0; a < i.length; a++)
n += i[a], (a === 3 || a === 5) && (n += "-");
return n.slice(0, 10);
}, Y = Q({
onDateChange: (e) => {
e && F(e, !0);
},
minDate: R,
maxDate: B,
currentDate: r
}), { handleInputChange: p, error: D, clearError: V } = t ? Y : {
handleInputChange: () => {
},
error: null,
clearError: () => {
}
}, h = f(() => {
t && V();
}, [t, V]);
G(() => {
x && t && x(h);
}, [x, t, h]);
const E = (e) => b.dateFormat ? U(e, b.dateFormat) : y(e), N = (e) => {
if (!o) {
if (t && c) {
e.stopPropagation();
return;
}
k(!L);
}
}, z = f(
(e) => {
if (!t || o) return;
let n = e.target.value;
n.length < u.length && u.endsWith("-") && n === u.slice(0, -1) && (n = n.slice(0, -1));
const a = T(n);
d(a), a.length >= 10 && p(a, s === "ne" ? "nepali" : "date");
},
[p, t, s, u]
), H = f(() => {
!t || o || (C(!0), d(r ? y(r) : ""));
}, [r, t]), W = f(() => {
!t || o || (C(!1), h());
}, [t, h]), K = f(
(e) => {
if (!(!t || o)) {
if (e.key === "Enter")
e.preventDefault(), e.currentTarget.blur();
else if (e.key === "Escape") {
if (e.preventDefault(), r) {
const i = y(r);
d(i), p(i, s === "ne" ? "nepali" : "date");
} else
d(""), p("", s === "ne" ? "nepali" : "date");
e.currentTarget.blur();
}
}
},
[r, t, p, s]
), q = () => r ? t && c ? y(r) : E(r) : g.placeholder || "Select a date";
if (t) {
const { defaultLocale: e, defaultDate: i, ...n } = g;
return /* @__PURE__ */ l("div", { className: "inputContainer", ...n, children: /* @__PURE__ */ I(
"div",
{
ref: v,
className: m(
"relative flex h-9.25 items-center justify-between",
m(
"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",
o && "border-outline-neutral bg-neutral-100 text-gray-400/80 cursor-not-allowed"
),
w
),
onClick: N,
children: [
/* @__PURE__ */ l("div", { className: "flex items-center", children: /* @__PURE__ */ l(
"input",
{
ref: S,
type: "text",
className: m(
"min-w-20 max-w-28 p-1 cursor-text bg-transparent",
!r && !c && "text-gray-500",
c && "bg-blue-50 rounded-md text-gray-500",
D && "bg-red-50 text-red-600 border-red-300"
),
style: { outline: "none" },
value: c ? u : r ? E(r) : "",
onChange: z,
onFocus: H,
onBlur: W,
onKeyDown: K,
"aria-label": "Date input",
placeholder: g.placeholder || "YYYY-MM-DD",
disabled: o
}
) }),
/* @__PURE__ */ l(
"svg",
{
className: "w-4 h-4 text-gray-400 cursor-pointer hover:text-gray-600 transition-colors",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
onClick: (a) => {
a.stopPropagation(), o || k(!0);
},
children: /* @__PURE__ */ l(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
}
)
}
),
D && /* @__PURE__ */ l("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: D })
]
}
) });
}
return /* @__PURE__ */ l("div", { className: "inputContainer", ...g, children: /* @__PURE__ */ I(
"div",
{
onClick: N,
ref: v,
className: m(
"appearance-none flex items-center justify-between",
m(
o && "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"
),
w
),
children: [
/* @__PURE__ */ l("span", { children: q() }),
/* @__PURE__ */ l(
"svg",
{
className: "w-4 h-4 text-gray-400 cursor-pointer hover:text-gray-600 transition-colors",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
onClick: (e) => {
e.stopPropagation(), o || k(!0);
},
children: /* @__PURE__ */ l(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
}
)
}
)
]
}
) });
});
export {
se as default
};