@frontify/fondue
Version:
Design system of Frontify
249 lines (248 loc) • 7.67 kB
JavaScript
import { jsxs as T, jsx as s, Fragment as nt } from "react/jsx-runtime";
import { useRef as C, useCallback as I, useEffect as rt } from "react";
import ot from "../../foundation/Icon/Generated/IconMinus16.es.js";
import ct from "../../foundation/Icon/Generated/IconPlus16.es.js";
import { useMemoizedId as ut } from "../../hooks/useMemoizedId.es.js";
import { InputStyles as o, GetStatusIcon as lt, InputActions as it } from "../../utilities/input.es.js";
import { merge as p } from "../../utilities/merge.es.js";
import { Validation as st, validationClassMap as at } from "../../utilities/validation.es.js";
import { NumberInputIncrement as u } from "./types.es.js";
const mt = ["ArrowUp", "ArrowRight"], ht = ["ArrowDown", "ArrowLeft"], dt = ["Backspace", "Tab"], wt = ({
id: L,
size: W,
disabled: i = !1,
required: Y,
readOnly: a,
status: b = st.Default,
decorator: V,
suffix: r = "",
controls: _,
clearable: B,
placeholder: H,
stepInterval: M = 10,
title: O,
defaultValue: v,
hugWidth: z,
value: G,
valueSelect: h,
onChange: N,
onKeyDown: $,
onBlur: A,
onFocus: P,
"aria-label": q = "Number Input",
"data-test-id": l = "fondue-number-input",
...J
}) => {
const y = C(0), R = C(!1), D = C(!1), n = C(null), E = i || a, d = I(() => {
if (n.current) {
const { value: t } = n.current;
return r ? t.replace(`${r}`, "").trim() : t;
}
return "";
}, [n, r]), f = () => {
clearInterval(y.current), D.current = !1;
}, g = (t) => {
n.current && !i && (D.current = !0, Q(t));
}, Q = (t) => {
(() => {
let m = 0, c = 0;
y.current = window.setInterval(() => {
switch (!0) {
case m > 2e3:
c += 5;
break;
case m > 5e3:
c += 10;
break;
default:
c = 1;
}
w(t, c), m += 250;
}, 250);
})();
}, X = (t) => {
const { key: e, shiftKey: m } = t;
if (dt.includes(e)) {
const c = d(), S = c.length === 2 && c.includes("-");
((c == null ? void 0 : c.length) === 0 || S) && F();
return;
} else if (!isNaN(Number(e)))
return;
t.preventDefault(), R.current = m, ht.includes(e) ? w(u.DECREMENT) : mt.includes(e) && w(u.INCREMENT), $ && $(t);
}, Z = (t) => {
t.preventDefault(), R.current = t.shiftKey, n.current && K();
}, w = (t, e = 1) => {
const c = (() => {
const S = d(), k = Number(S) || 0;
switch (e = R.current ? M : e, t) {
case u.DECREMENT:
return k - e;
case u.INCREMENT:
return k + e;
default:
return k;
}
})();
U(c);
}, U = (t) => {
if (n.current) {
const e = t.toString();
if (n.current.value = r ? `${e} ${r}` : e, D.current)
return;
K();
}
}, j = I(() => {
if (h && n.current) {
const t = n.current.value.length, e = r ? t - r.length - 1 : t;
n.current.setSelectionRange(0, e);
}
}, [r, h]), x = I(() => {
if (r && n.current) {
const t = n.current.value.length - r.length - 1;
n.current.setSelectionRange(t, t);
}
}, [r, n]), K = I(() => {
const t = d();
N == null || N(t ? Number(t) : void 0), r && x(), h && j();
}, [r, h, N, d, x, j]), F = () => {
n.current && (n.current.value = v ? v.toString() : ""), K();
}, tt = (t) => {
P && P(t);
}, et = (t) => {
A && A(t);
};
return rt(() => {
clearInterval(y.current);
}, []), /* @__PURE__ */ T(
"div",
{
className: p([
o.base,
o.height,
o.hover,
o.focusWithin,
z ? "tw-w-auto" : o.width,
i || a ? o.readOnly : "",
b ? at[b] : ""
]),
"data-test-id": l,
children: [
V ? /* @__PURE__ */ s(
"div",
{
className: p([
"tw-flex tw-items-center tw-justify-center tw-pl-1",
E ? "tw-text-text-disabled" : "tw-text-text"
]),
"data-test-id": `${l}-decorator`,
children: V
}
) : null,
/* @__PURE__ */ s(
"input",
{
...J,
defaultValue: v,
value: G,
id: ut(L),
ref: n,
name: l,
type: r || h ? "text" : "number",
placeholder: H,
className: p([
"tw-hide-input-arrows",
o.width,
o.element,
i ? o.disabled : "",
a ? o.readOnly : ""
]),
onClick: r ? x : void 0,
onChange: () => U(Number(d())),
onKeyDown: X,
onKeyUp: Z,
onFocus: tt,
onBlur: et,
size: W,
title: O,
"aria-label": q,
required: Y,
readOnly: a,
disabled: i,
"data-test-id": `${l}-input`
}
),
/* @__PURE__ */ T("span", { className: "tw-flex tw-items-center", children: [
_ ? /* @__PURE__ */ T(nt, { children: [
/* @__PURE__ */ s(
"button",
{
className: p([
"tw-text-text-weak tw-p-1 hover:tw-rounded-sm hover:tw-bg-box-neutral hover:tw-text-box-neutral-inverse focus:tw-ring-line-xx-strong focus:tw-bg-box-neutral",
i ? o.disabled : "",
a ? o.readOnly : ""
]),
type: "button",
onClick: (t) => {
if (t.button === 0) {
const e = t.shiftKey ? M : 1;
w(u.DECREMENT, e);
}
},
onMouseDown: (t) => t.shiftKey || t.button > 0 ? null : g(u.DECREMENT),
onMouseUp: f,
onTouchStart: (t) => t.shiftKey ? null : g(u.DECREMENT),
onTouchEnd: f,
disabled: E,
"aria-label": "Decrement value",
title: "Decrement value",
"data-test-id": `${l}-decrement`,
children: /* @__PURE__ */ s(ot, {})
}
),
/* @__PURE__ */ s(
"button",
{
className: p([
"tw-text-text-weak tw-p-1 hover:tw-rounded-sm hover:tw-bg-box-neutral hover:tw-text-box-neutral-inverse focus:tw-ring-line-xx-strong focus:tw-bg-box-neutral",
i ? o.disabled : "",
a ? o.readOnly : ""
]),
type: "button",
onClick: (t) => {
if (t.button === 0) {
const e = t.shiftKey ? M : 1;
w(u.INCREMENT, e);
}
},
onMouseDown: (t) => t.shiftKey || t.button > 0 ? null : g(u.INCREMENT),
onMouseUp: f,
onTouchStart: (t) => t.shiftKey ? null : g(u.INCREMENT),
onTouchEnd: f,
disabled: E,
"aria-label": "Increment value",
title: "Increment value",
"data-test-id": `${l}-increment`,
children: /* @__PURE__ */ s(ct, {})
}
)
] }) : null,
/* @__PURE__ */ s(
it,
{
disabled: E,
clearable: B,
callbacks: { clearable: F },
dataTestId: l
}
),
b ? lt(b, l) : null
] })
]
}
);
};
wt.displayName = "FondueNumberInput";
export {
wt as NumberInput
};
//# sourceMappingURL=NumberInput.es.js.map