@brightsoftware/date-np
Version:
Simple & minimal Nepali date picker that just works.
109 lines (108 loc) • 3.61 kB
JavaScript
import { jsxs as d, jsx as n } from "react/jsx-runtime";
import { useState as V, useRef as T, useEffect as C } from "react";
import { cn as f } from "../../../utils/clsx.js";
import { useTimePicker as D } from "../hooks/useTimePicker.js";
const K = ({
placeholder: m = "Select Time",
className: p,
inputClassName: g
}) => {
const {
timePickerState: i,
setVisibility: h,
getFormattedTime: a,
handleKeyInput: b,
setCurrentInputPosition: s,
getFormattedTimeWithHighlight: y
} = D(), t = i.shouldInclude, [k, u] = V(""), x = T(null);
C(() => {
i.selectedTime && u(a());
}, [i.selectedTime, i.format, a]);
const v = () => {
i.isVisible || (h(!0), t.hours ? s("hours") : t.minutes ? s("minutes") : t.seconds && s("seconds")), i.isVisible && h(!1);
}, w = (e) => {
u(e.target.value);
}, I = (e) => {
if (e.key === "Tab") {
e.preventDefault();
const { currentInputPosition: o } = i;
o === "hours" ? t.minutes ? s("minutes") : t.seconds && s("seconds") : o === "minutes" ? t.seconds ? s("seconds") : t.hours && s("hours") : o === "seconds" && (t.hours ? s("hours") : t.minutes && s("minutes"));
return;
}
e.key >= "0" && e.key <= "9" && (e.preventDefault(), b(e.key) && u(a()));
}, N = () => {
i.isVisible && (t.hours ? s("hours") : t.minutes ? s("minutes") : t.seconds && s("seconds"));
}, c = (() => {
const { display: e } = y(), { currentInputPosition: o } = i;
if (!i.isVisible)
return e;
let r = 0, l = 0;
switch (o) {
case "hours":
r = 0, l = 2;
break;
case "minutes":
r = 3, l = 5;
break;
case "seconds":
r = 6, l = 8;
break;
}
return {
before: e.slice(0, r),
highlighted: e.slice(r, l),
after: e.slice(l)
};
})();
return /* @__PURE__ */ d("div", { className: f("relative", p), children: [
/* @__PURE__ */ d("div", { className: "relative", children: [
/* @__PURE__ */ n(
"input",
{
ref: x,
type: "text",
value: k,
onChange: w,
onClick: v,
onKeyDown: I,
onFocus: N,
placeholder: m,
className: f(
"w-full px-3 py-2 border border-gray-300 rounded-md",
"bg-white text-gray-900 placeholder-gray-500",
"focus:outline-none focus:border-b-1",
"cursor-text font-mono",
"caret-white",
g
)
}
),
i.isVisible && typeof c == "object" && /* @__PURE__ */ d("div", { className: "absolute inset-0 px-3 py-2 pointer-events-none flex items-center font-mono", children: [
/* @__PURE__ */ n("span", { className: "text-transparent", children: c.before }),
/* @__PURE__ */ n("span", { className: "bg-blue-100 text-blue-800 px-1 rounded", children: c.highlighted }),
/* @__PURE__ */ n("span", { className: "text-transparent", children: c.after })
] })
] }),
/* @__PURE__ */ n("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none", children: /* @__PURE__ */ n(
"svg",
{
className: "w-4 h-4 text-gray-400",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ n(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
}
)
}
) })
] });
};
export {
K as TimePickerInput
};