react-segmented-input
Version:
Highly customizable React components for code input fields with TypeScript support
527 lines (526 loc) • 16.4 kB
JavaScript
import te, { forwardRef as ne, useState as oe, useRef as ae, useEffect as Z, useImperativeHandle as se } from "react";
var K = { exports: {} }, X = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var Q;
function le() {
if (Q) return X;
Q = 1;
var _ = Symbol.for("react.transitional.element"), C = Symbol.for("react.fragment");
function y(S, p, b) {
var k = null;
if (b !== void 0 && (k = "" + b), p.key !== void 0 && (k = "" + p.key), "key" in p) {
b = {};
for (var i in p)
i !== "key" && (b[i] = p[i]);
} else b = p;
return p = b.ref, {
$$typeof: _,
type: S,
key: k,
ref: p !== void 0 ? p : null,
props: b
};
}
return X.Fragment = C, X.jsx = y, X.jsxs = y, X;
}
var H = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var ee;
function ce() {
return ee || (ee = 1, process.env.NODE_ENV !== "production" && function() {
function _(e) {
if (e == null) return null;
if (typeof e == "function")
return e.$$typeof === V ? null : e.displayName || e.name || null;
if (typeof e == "string") return e;
switch (e) {
case P:
return "Fragment";
case f:
return "Profiler";
case J:
return "StrictMode";
case h:
return "Suspense";
case $:
return "SuspenseList";
case D:
return "Activity";
}
if (typeof e == "object")
switch (typeof e.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), e.$$typeof) {
case j:
return "Portal";
case W:
return (e.displayName || "Context") + ".Provider";
case G:
return (e._context.displayName || "Context") + ".Consumer";
case N:
var r = e.render;
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
case B:
return r = e.displayName || null, r !== null ? r : _(e.type) || "Memo";
case I:
r = e._payload, e = e._init;
try {
return _(e(r));
} catch {
}
}
return null;
}
function C(e) {
return "" + e;
}
function y(e) {
try {
C(e);
var r = !1;
} catch {
r = !0;
}
if (r) {
r = console;
var t = r.error, n = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
return t.call(
r,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
n
), C(e);
}
}
function S(e) {
if (e === P) return "<>";
if (typeof e == "object" && e !== null && e.$$typeof === I)
return "<...>";
try {
var r = _(e);
return r ? "<" + r + ">" : "<...>";
} catch {
return "<...>";
}
}
function p() {
var e = L.A;
return e === null ? null : e.getOwner();
}
function b() {
return Error("react-stack-top-frame");
}
function k(e) {
if (E.call(e, "key")) {
var r = Object.getOwnPropertyDescriptor(e, "key").get;
if (r && r.isReactWarning) return !1;
}
return e.key !== void 0;
}
function i(e, r) {
function t() {
M || (M = !0, console.error(
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
r
));
}
t.isReactWarning = !0, Object.defineProperty(e, "key", {
get: t,
configurable: !0
});
}
function g() {
var e = _(this.type);
return A[e] || (A[e] = !0, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
)), e = this.props.ref, e !== void 0 ? e : null;
}
function q(e, r, t, n, l, u, R, v) {
return t = u.ref, e = {
$$typeof: Y,
type: e,
key: r,
props: u,
_owner: l
}, (t !== void 0 ? t : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: g
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(e, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(e, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: R
}), Object.defineProperty(e, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: v
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function w(e, r, t, n, l, u, R, v) {
var a = r.children;
if (a !== void 0)
if (n)
if (x(a)) {
for (n = 0; n < a.length; n++)
F(a[n]);
Object.freeze && Object.freeze(a);
} else
console.error(
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
);
else F(a);
if (E.call(r, "key")) {
a = _(e);
var o = Object.keys(r).filter(function(s) {
return s !== "key";
});
n = 0 < o.length ? "{key: someKey, " + o.join(": ..., ") + ": ...}" : "{key: someKey}", z[a + n] || (o = 0 < o.length ? "{" + o.join(": ..., ") + ": ...}" : "{}", console.error(
`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,
n,
a,
o,
a
), z[a + n] = !0);
}
if (a = null, t !== void 0 && (y(t), a = "" + t), k(r) && (y(r.key), a = "" + r.key), "key" in r) {
t = {};
for (var d in r)
d !== "key" && (t[d] = r[d]);
} else t = r;
return a && i(
t,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), q(
e,
a,
u,
l,
p(),
t,
R,
v
);
}
function F(e) {
typeof e == "object" && e !== null && e.$$typeof === Y && e._store && (e._store.validated = 1);
}
var O = te, Y = Symbol.for("react.transitional.element"), j = Symbol.for("react.portal"), P = Symbol.for("react.fragment"), J = Symbol.for("react.strict_mode"), f = Symbol.for("react.profiler"), G = Symbol.for("react.consumer"), W = Symbol.for("react.context"), N = Symbol.for("react.forward_ref"), h = Symbol.for("react.suspense"), $ = Symbol.for("react.suspense_list"), B = Symbol.for("react.memo"), I = Symbol.for("react.lazy"), D = Symbol.for("react.activity"), V = Symbol.for("react.client.reference"), L = O.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, E = Object.prototype.hasOwnProperty, x = Array.isArray, c = console.createTask ? console.createTask : function() {
return null;
};
O = {
react_stack_bottom_frame: function(e) {
return e();
}
};
var M, A = {}, T = O.react_stack_bottom_frame.bind(
O,
b
)(), m = c(S(b)), z = {};
H.Fragment = P, H.jsx = function(e, r, t, n, l) {
var u = 1e4 > L.recentlyCreatedOwnerStacks++;
return w(
e,
r,
t,
!1,
n,
l,
u ? Error("react-stack-top-frame") : T,
u ? c(S(e)) : m
);
}, H.jsxs = function(e, r, t, n, l) {
var u = 1e4 > L.recentlyCreatedOwnerStacks++;
return w(
e,
r,
t,
!0,
n,
l,
u ? Error("react-stack-top-frame") : T,
u ? c(S(e)) : m
);
};
}()), H;
}
var re;
function ue() {
return re || (re = 1, process.env.NODE_ENV === "production" ? K.exports = le() : K.exports = ce()), K.exports;
}
var U = ue();
const ie = ne(
(_, C) => {
const {
borderTop: y = !0,
borderRight: S = !0,
borderBottom: p = !0,
borderLeft: b = !0,
border: k = !0,
borderThickness: i = 1,
borderColor: g = "#ccc",
backgroundColor: q = "transparent",
fontSize: w = 16,
fontWeight: F = 400,
textColor: O = "#000",
borderRadius: Y = 4,
width: j = 40,
height: P = 40,
gap: J = 8,
numberOfChars: f,
separatorPositions: G = [],
separatorChar: W = "-",
onChange: N,
onComplete: h,
value: $ = "",
placeholder: B = "",
disabled: I = !1,
autoFocus: D = !1,
className: V = "",
style: L = {}
} = _, [E, x] = oe(
Array(f).fill("").map((r, t) => $[t] || "")
), c = ae([]);
Z(() => {
const r = Array(f).fill("").map((t, n) => $[n] || "");
x(r);
}, [$, f]), Z(() => {
D && c.current[0] && c.current[0].focus();
}, [D]), se(C, () => ({
getValue: () => E.join(""),
setValue: (r) => {
const t = Array(f).fill("").map((n, l) => r[l] || "");
x(t);
},
clear: () => {
x(Array(f).fill("")), c.current[0] && c.current[0].focus();
},
focus: () => {
const r = E.findIndex((n) => n === ""), t = r === -1 ? 0 : r;
c.current[t] && c.current[t].focus();
}
}));
const M = () => {
const r = {};
return k ? r.border = `${i}px solid ${g}` : (y && (r.borderTop = `${i}px solid ${g}`), S && (r.borderRight = `${i}px solid ${g}`), p && (r.borderBottom = `${i}px solid ${g}`), b && (r.borderLeft = `${i}px solid ${g}`)), r;
}, A = () => ({
...M(),
backgroundColor: q,
fontSize: `${w}px`,
fontWeight: F,
color: O,
borderRadius: `${Y}px`,
width: `${j}px`,
height: `${P}px`,
textAlign: "center",
outline: "none"
}), T = (r, t) => {
const n = t.target.value, l = n.slice(-1);
if (n.length <= 1) {
const u = [...E];
u[r] = l, x(u);
const R = u.join("");
N?.(R), l && r < f - 1 && c.current[r + 1]?.focus(), R.length === f && !R.includes("") && h?.(R);
}
}, m = (r, t) => {
t.key === "Backspace" && !E[r] && r > 0 && c.current[r - 1]?.focus(), t.key === "ArrowLeft" && r > 0 && (t.preventDefault(), c.current[r - 1]?.focus()), t.key === "ArrowRight" && r < f - 1 && (t.preventDefault(), c.current[r + 1]?.focus());
}, z = (r) => {
r.preventDefault();
const t = r.clipboardData.getData("text").slice(0, f), n = Array(f).fill("").map((v, a) => t[a] || "");
x(n);
const l = n.join("");
N?.(l), l.length === f && h?.(l);
const u = n.map((v, a) => v !== "" ? a : -1).filter((v) => v !== -1).pop() ?? -1, R = Math.min(u + 1, f - 1);
c.current[R]?.focus();
}, e = (r) => G.includes(r + 1);
return /* @__PURE__ */ U.jsx(
"div",
{
className: `box-code-input ${V}`,
onPaste: z,
style: { gap: `${J}px`, ...L },
children: E.map((r, t) => /* @__PURE__ */ U.jsxs(te.Fragment, { children: [
/* @__PURE__ */ U.jsx(
"input",
{
ref: (n) => {
c.current[t] = n;
},
type: "text",
value: r,
onChange: (n) => T(t, n),
onKeyDown: (n) => m(t, n),
style: A(),
placeholder: B,
disabled: I,
maxLength: 1,
className: "box-code-input__field"
}
),
e(t) && /* @__PURE__ */ U.jsx(
"span",
{
className: "box-code-input__separator",
style: { fontSize: `${w}px` },
children: W
}
)
] }, t))
}
);
}
);
ie.displayName = "BoxCodeInput";
const fe = ne(
(_, C) => {
const {
borderTop: y = !0,
borderRight: S = !0,
borderBottom: p = !0,
borderLeft: b = !0,
border: k = !0,
borderThickness: i = 1,
borderColor: g = "#ccc",
backgroundColor: q = "transparent",
fontSize: w = 16,
fontWeight: F = 400,
textColor: O = "#000",
textAlign: Y = "center",
letterSpacing: j = 8,
borderRadius: P = 4,
paddingTop: J = 12,
paddingRight: f = 16,
paddingBottom: G = 12,
paddingLeft: W = 16,
width: N,
numberOfChars: h,
separatorPositions: $ = [],
separatorChar: B = "-",
onChange: I,
onComplete: D,
value: V = "",
placeholder: L = "",
disabled: E = !1,
autoFocus: x = !1,
className: c = "",
style: M = {}
} = _, [A, T] = oe(V), m = ae(null);
Z(() => {
T(V);
}, [V]), Z(() => {
x && m.current && m.current.focus();
}, [x]), se(C, () => ({
getValue: () => A,
setValue: (o) => {
const d = o.slice(0, h);
T(d);
},
clear: () => {
T(""), m.current && m.current.focus();
},
focus: () => {
m.current && m.current.focus();
}
}));
const z = () => {
const o = {};
return k ? o.border = `${i}px solid ${g}` : (y && (o.borderTop = `${i}px solid ${g}`), S && (o.borderRight = `${i}px solid ${g}`), p && (o.borderBottom = `${i}px solid ${g}`), b && (o.borderLeft = `${i}px solid ${g}`)), o;
}, e = () => {
if (N)
return N;
const o = w * 0.65, d = j * (h - 1), s = $.length * (w * 0.6 + j);
return o * h + d + s + W + f;
}, r = () => ({
...z(),
backgroundColor: q,
fontSize: `${w}px`,
fontWeight: F,
color: O,
textAlign: Y,
letterSpacing: `${j}px`,
borderRadius: `${P}px`,
paddingTop: `${J}px`,
// Son karakterin sağında letter-spacing olmaması için padding'i azalt
paddingRight: `${Math.max(0, f - j)}px`,
paddingBottom: `${G}px`,
paddingLeft: `${W}px`,
width: `${e()}px`,
outline: "none",
...M
}), t = (o) => {
let d = "";
for (let s = 0; s < o.length; s++)
$.includes(s) && s > 0 && (d += B), d += o[s];
return d;
}, n = (o) => o.replace(new RegExp(`\\${B}`, "g"), ""), l = (o) => {
const d = o.target.value, s = n(d);
s.length <= h && (T(s), I?.(s), s.length === h && D?.(s));
}, u = (o) => {
const { key: d } = o;
d.length === 1 && A.length >= h && o.preventDefault();
}, R = (o) => {
o.preventDefault();
const d = o.clipboardData.getData("text").slice(0, h), s = n(d);
T(s), I?.(s), s.length === h && D?.(s);
}, v = () => {
if (m.current) {
const o = A.length;
setTimeout(() => {
m.current && m.current.setSelectionRange(o, o);
}, 0);
}
}, a = t(A);
return /* @__PURE__ */ U.jsx("div", { className: `line-code-input ${c}`, children: /* @__PURE__ */ U.jsx(
"input",
{
ref: m,
type: "text",
value: a,
onChange: l,
onKeyDown: u,
onPaste: R,
onFocus: v,
style: r(),
placeholder: L,
disabled: E,
maxLength: h + $.length,
className: "line-code-input__field"
}
) });
}
);
fe.displayName = "LineCodeInput";
export {
ie as BoxCodeInput,
fe as LineCodeInput
};