@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
99 lines (98 loc) • 3.54 kB
JavaScript
"use client";
import { jsxs as H, jsx as i } from "react/jsx-runtime";
import { c as a } from "./chunks/index.DL9mof6u.js";
import { forwardRef as I, useState as v, useRef as d } from "react";
import { i as b, g as S } from "./chunks/is-animation-disabled.B-V_68K-.js";
import { g as W } from "./chunks/helpers.CexwVao7.js";
import { u as R } from "./chunks/useIsomorphicLayoutEffect.CnJ9AMFS.js";
import "./chunks/index.D-sRdssb.js";
import { D as L } from "./chunks/Button.Cn5yg7dG.js";
import './assets/scroller.Hszs1Yq4.css';function P(...u) {
return (l) => {
for (const s of u)
s && (typeof s == "function" ? s(l) : s.current = l);
};
}
const T = "ds-scroller_root_3ktti_1", M = "ds-scroller_scroll-wrapper_3ktti_6", j = "ds-scroller_scroller_3ktti_45", A = "ds-scroller_scroll-button_3ktti_60", O = "ds-scroller_scroll-button--hidden_3ktti_65", q = "ds-scroller_scroll-button--right_3ktti_69", o = {
root: T,
scrollWrapper: M,
scroller: j,
scrollButton: A,
scrollButtonHidden: O,
scrollButtonRight: q
}, V = I(({
children: u,
className: l,
scrollerClassName: s,
scrollerButtonClassName: h,
scrollToPosition: n,
...x
}, k) => {
const [m, w] = v(!1), [p, N] = v(!1), c = d(null), t = d(null), D = d(!1), f = () => {
g();
};
R(() => {
const r = new ResizeObserver(f);
return t.current && r.observe(t.current), () => {
r.disconnect();
};
}, []), R(() => {
const r = [
// utility large bold -- assuming that it is used with DSButton or DSLinkButton variant="navigation"
"18px 'STIHL Contraface Digital Text Bold'"
];
return Promise.all(r.map((e) => document.fonts.load(e))).then(() => {
D.current = !0, g(), y();
}).catch((e) => {
throw new Error(W("DSScroller", `The component requires the fonts to be loaded: ${e}`));
}), t.current?.addEventListener("scroll", f), () => {
t.current?.removeEventListener("scroll", f);
};
}, [n]);
const y = () => {
t.current && n?.scrollPosition && t.current.scrollTo({
left: n.scrollPosition,
behavior: b() || !n.isSmooth ? "instant" : "smooth"
});
}, g = () => {
if (t.current && c.current) {
const r = S(t.current), e = S(c.current);
w(e.left < r.left), N(e.right > r.right + 4);
}
}, B = (r) => {
const e = z(r);
t.current?.scrollTo({
left: e,
behavior: b() ? "instant" : "smooth"
});
}, z = (r) => {
if (!c.current || !t.current)
return 0;
const {
scrollLeft: e,
offsetWidth: E
} = t.current, _ = Math.round(E * 0.2);
return r === "next" ? e + _ : e - _;
}, C = a(o.scroller, s);
return /* @__PURE__ */ H("div", { className: a(o.root, l), ...x, children: [
/* @__PURE__ */ i(
"div",
{
className: o.scrollWrapper,
ref: P(t, k),
tabIndex: m || p ? 0 : -1,
children: /* @__PURE__ */ i("div", { className: C, ref: c, children: u })
}
),
/* @__PURE__ */ i(L, { variant: "filled", className: a(o.scrollButton, h, {
[o.scrollButtonHidden]: !m
}), hideLabel: !0, iconName: "chevron-left", tabIndex: -1, size: "small", onClick: () => B("prev"), children: "Left" }),
/* @__PURE__ */ i(L, { variant: "filled", className: a(o.scrollButton, o.scrollButtonRight, h, {
[o.scrollButtonHidden]: !p
}), hideLabel: !0, iconName: "chevron-right", tabIndex: -1, size: "small", onClick: () => B("next"), children: "Right" })
] });
});
V.displayName = "DSScroller";
export {
V as DSScroller
};