fui-fancyui
Version:
FancyUI Libary
61 lines (60 loc) • 2.01 kB
JavaScript
"use client";
import { jsx as h } from "react/jsx-runtime";
import { useState as C, createRef as R, useEffect as A } from "react";
import L from "../../atoms/SingleInput/SingleInput.js";
import { InputWrapper as P } from "./SingleInputs.style.js";
function N(m) {
const { length: l = 6, handler: f, status: g, automaticCase: n, themeType: k = "secondary", layer: w = 0 } = m, [o, p] = C(Array(l).fill("")), a = Array.from({ length: l }, () => R());
A(() => {
o.every((t) => t !== "") && f && f(o.join(""));
}, [o, f]);
const i = (t) => {
const e = t.split("").slice(0, l);
p((r) => {
const s = [...r];
for (let c = 0; c < e.length; c++)
s[c] = e[c];
return s;
});
}, T = (t) => {
t.preventDefault();
const e = t.clipboardData.getData("text");
i(e), t.target.blur();
}, D = (t, e) => {
t.preventDefault(), n === "upper" && (t.key = t.key.toUpperCase()), n === "lower" && (t.key = t.key.toLowerCase()), p((r) => {
const s = [...r];
return s[e] = t.key, s;
}), a[e + 1] ? u(e) : t.currentTarget.blur();
}, b = (t) => {
o[t] === "" ? y(t) : p((e) => {
const r = [...e];
return r[t] = "", r;
});
}, u = (t) => {
var e;
a[t + 1] && ((e = a[t + 1].current) == null || e.focus());
}, y = (t) => {
var e;
a[t - 1] && ((e = a[t - 1].current) == null || e.focus());
}, I = async () => {
const t = await navigator.clipboard.readText();
u(t.length), i(t);
}, K = (t, e) => {
t.key === "v" && (t.ctrlKey || t.metaKey) ? (I(), t.currentTarget.blur()) : t.key.length === 1 ? D(t, e) : t.key === "Backspace" ? b(e) : t.key === "ArrowRight" ? u(e) : t.key === "ArrowLeft" && y(e);
};
return /* @__PURE__ */ h(P, { onPaste: T, $status: g, children: o.map((t, e) => /* @__PURE__ */ h(
L,
{
ref: a[e],
value: t,
"aria-label": `Input ${e}`,
onKeyDown: (r) => K(r, e),
themeType: k,
layer: w
},
e
)) });
}
export {
N as default
};