@frontify/fondue
Version:
Design system of Frontify
213 lines (212 loc) • 7.55 kB
JavaScript
import { jsxs as N, jsx as f } from "react/jsx-runtime";
import { useState as d, useCallback as K, useMemo as at, useEffect as D } from "react";
import { useMemoizedId as lt } from "../../hooks/useMemoizedId.es.js";
import { debounce as it } from "../../utilities/debounce.es.js";
import { merge as m } from "../../utilities/merge.es.js";
import { clamp as $ } from "../../utilities/number.es.js";
import { Validation as S } from "../../utilities/validation.es.js";
import { TextInput as wt, TextInputType as ct } from "../TextInput/TextInput.es.js";
var ut = /* @__PURE__ */ ((b) => (b.MinMax = "MinMax", b.ValueOutOfRange = "ValueOutOfRange", b.ValueNaN = "ValueNaN", b))(ut || {});
const ft = 0, dt = 100, bt = 1, pt = 5, ht = "Slider text input", mt = 3, z = ["ArrowUp", "ArrowRight"], B = ["ArrowDown", "ArrowLeft"], Y = ["Home", "End"], gt = ({
id: b,
label: v,
value: k,
min: o = ft,
max: s = dt,
showMinMax: U = !1,
step: c = bt,
stepMultiplier: j = pt,
valueSuffix: r = "",
onError: T,
onChange: I,
"aria-label": P = ht,
"aria-labelledby": R,
disabled: e = !1,
"data-test-id": L = "fondue-slider"
}) => {
const [l, g] = d(), [i, x] = d(""), [p, y] = d(), [_, O] = d(), [a, H] = d(null), [q, F] = d(!1), [C, M] = d(!1), h = lt(b), G = (t) => {
x(`${t.replace(r, "")}${r}`);
}, u = K(
({ clientX: t, rawValue: n }) => {
if (!a)
return;
const w = s - o, ot = a.getBoundingClientRect().x, rt = a.clientWidth;
let A;
if (t !== void 0)
A = (t - ot) / rt;
else {
A = ((n ?? o) - o) / w, O($(A, 0, 1) * 100);
return;
}
const nt = $(A, 0, 1), st = w / c, X = $(Math.round(nt * st) * c + o, o, s);
O((X - o) / w * 100), x(`${X}${r}`);
},
[a, s, o, c, r]
), E = at(
() => a ? it((t) => {
e || u({
clientX: t.clientX ?? t.touches[0].clientX
});
}, mt) : () => {
},
[u, a, e]
), V = K(() => {
a && (M(!1), window.removeEventListener("mousemove", E), window.removeEventListener("touchmove", E), window.removeEventListener("mouseup", V));
}, [a, E]), W = (t) => {
!a || e || (M(!0), u({
clientX: t.clientX ?? t.touches[0].clientX
}), window.addEventListener("mousemove", E), window.addEventListener("touchmove", E), window.addEventListener("mouseup", V));
}, J = (t) => {
if (![...z, ...B, ...Y].includes(t.key) || l === void 0 || e)
return;
t.preventDefault();
let n = 0, w = 0;
B.includes(t.key) ? n = -c : z.includes(t.key) && (n = c), Y.includes(t.key) ? w = t.key === "Home" ? o : s : (n *= t.shiftKey ? j : 1, w = $(Math.floor(l / c) * c + n, o, s)), g(w), x(`${w}${r}`);
}, Q = () => {
e || F(!0);
}, Z = () => {
e || F(!1);
}, tt = () => {
e || M(!0);
}, et = () => {
e || M(!1);
};
return D(() => {
if (!a)
return;
if (o > s) {
y(
"MinMax"
/* MinMax */
);
return;
}
const t = k ?? o;
g(t), x(`${t}${r}`), u({ rawValue: t });
}, [a, u, o, s, k, r]), D(() => {
if (!i)
return;
const t = i.replace(r, ""), n = +t;
if (Number.isNaN(n) || !t) {
g(void 0), y(
"ValueNaN"
/* ValueNaN */
);
return;
}
if (n < o || n > s) {
g(void 0), y(
"ValueOutOfRange"
/* ValueOutOfRange */
);
return;
}
y(void 0), g(n);
}, [i, r, o, s]), D(() => {
if (p || l === void 0 || !i)
return;
const n = +i.replace(r, "");
Number.isNaN(n) || l !== n || (u({ rawValue: l }), e || I({
raw: l,
withSuffix: i.replace(r, "") + r
}));
}, [l, i, r, p, I, u, e]), D(() => {
p && T && T(p);
}, [p, T]), /* @__PURE__ */ N("div", { className: "tw-flex tw-flex-col", "data-test-id": L, id: h, children: [
/* @__PURE__ */ f(
"label",
{
id: `${h}-label`,
htmlFor: h,
className: m([!v && "tw-hidden", e && "tw-text-text-disabled"]),
"data-test-id": `${L}-label`,
children: v
}
),
/* @__PURE__ */ f("div", { className: "tw-flex", children: /* @__PURE__ */ N("div", { className: m(["tw-flex-1 tw-flex tw-items-center"]), children: [
U && /* @__PURE__ */ N("div", { className: m(["tw-mr-3", e && "tw-text-text-disabled"]), children: [
o,
r
] }),
/* @__PURE__ */ N(
"button",
{
ref: H,
"data-test-id": `${L}-interactive`,
className: "tw-flex-1 tw-relative tw-h-full tw-cursor-pointer disabled:tw-cursor-default tw-outline-none",
onMouseOver: Q,
onMouseOut: Z,
onFocus: tt,
onBlur: et,
onMouseDown: W,
onMouseUp: V,
onTouchStart: W,
onTouchEnd: V,
onKeyDown: J,
disabled: e,
children: [
/* @__PURE__ */ f("span", { className: "tw-absolute tw-block tw-top-1/2 tw--translate-y-1/2 tw-w-full tw-h-1 tw-rounded-sm tw-bg-box-neutral tw-flex-1" }),
_ !== void 0 && /* @__PURE__ */ f(
"span",
{
role: "slider",
"aria-valuenow": l,
"aria-valuemin": o,
"aria-valuemax": s,
"aria-label": P,
"aria-labelledby": v ? `${h}-label` : R,
"data-test-id": `${L}-track`,
className: m([
"tw-absolute tw-block tw-top-1/2 tw--translate-y-1/2 tw-origin-left tw-w-full tw-h-1 tw-rounded-sm tw-bg-box-neutral-strong tw-flex-1",
e && "tw-bg-box-neutral"
]),
style: { width: `${_}%` }
}
),
/* @__PURE__ */ f(
"span",
{
className: m([
"tw-absolute tw-block tw-top-1/2 tw--translate-y-1/2 tw--translate-x-1/2 tw-w-5 tw-h-5",
"after:tw-absolute after:tw-block after:tw-top-1/2 after:tw-left-1/2 after:tw--translate-y-1/2 after:tw--translate-x-1/2 after:tw-w-5 after:tw-h-5 after:tw-bg-base after:tw-rounded-full after:tw-border after:tw-border-line-strong",
q && !C && "after:tw-shadow",
C && "after:tw-border-line-xx-strong before:tw-content-[''] before:tw-opacity-25 before:tw-top-1/2 before:tw--translate-y-1/2 before:tw--translate-x-1/2 before:tw-left-1/2 before:tw-block before:tw-rounded-full before:tw-absolute before:tw-z-0 before:tw-w-9 before:tw-h-9 before:tw-bg-box-neutral-strong",
e && "after:tw-bg-box-neutral after:tw-border-line-weak"
]),
style: { left: `${_}%` }
}
)
]
}
),
U && /* @__PURE__ */ N("div", { className: m(["tw-ml-3", e && "tw-text-text-disabled"]), children: [
s,
r
] }),
/* @__PURE__ */ f("div", { className: "tw-w-16 tw-ml-3", children: /* @__PURE__ */ f(
wt,
{
id: `${h}-text-input`,
value: i,
placeholder: P,
"aria-labelledby": v ? `${h}-label` : R,
type: ct.Text,
validation: p ? S.Error : S.Default,
onChange: G,
disabled: e
}
) })
] }) })
] });
};
gt.displayName = "FondueSlider";
export {
ht as ARIA_LABEL_DEFAULT_VALUE,
dt as MAX_DEFAULT_VALUE,
ft as MIN_DEFAULT_VALUE,
bt as STEP_DEFAULT_VALUE,
pt as STEP_MULTIPLIER_DEFAULT_VALUE,
gt as Slider,
ut as SliderError
};
//# sourceMappingURL=Slider.es.js.map