@payfit/unity-components
Version:
66 lines (65 loc) • 2.17 kB
JavaScript
import { useScrollEdges as e } from "../../hooks/use-scroll-edges.js";
import { scrollArea as t } from "./ScrollArea.variants.js";
import { forwardRef as n, useCallback as r } from "react";
import { uyMerge as i } from "@payfit/unity-themes";
import { jsx as a, jsxs as o } from "react/jsx-runtime";
//#region src/core/components/scroll-area/ScrollArea.tsx
function s(e) {
return e === "inline" || e === "both";
}
function c(e) {
return e === "block" || e === "both";
}
function l(e, t) {
return e === "both" || e === t;
}
var u = n(({ axis: n = "block", children: u, className: d, fade: f = "none", fadeColor: p, onScroll: m, ...h }, g) => {
let { onScroll: _, scrollEdges: v, scrollRef: y } = e({ axis: n }), { blockEndFade: b, blockStartFade: x, inlineEndFade: S, inlineStartFade: C, root: w, viewport: T } = t({
axis: n,
fadeColor: p
}), E = r((e) => {
y.current = e, typeof g == "function" ? g(e) : g && (g.current = e);
}, [g, y]), D = r((e) => {
_(e), m?.(e);
}, [m, _]);
return /* @__PURE__ */ o("div", {
...h,
className: i(w(), d),
"data-axis": n,
"data-overflow-inline": v.hasOverflowInline || void 0,
"data-overflow-block": v.hasOverflowBlock || void 0,
"data-scrollable-inline-start": v.canScrollInlineStart || void 0,
"data-scrollable-inline-end": v.canScrollInlineEnd || void 0,
"data-scrollable-block-start": v.canScrollBlockStart || void 0,
"data-scrollable-block-end": v.canScrollBlockEnd || void 0,
"data-unity-component": "scroll-area",
children: [
/* @__PURE__ */ a("div", {
ref: E,
className: T(),
"data-unity-slot": "scroll-area.viewport",
onScroll: D,
children: u
}),
s(n) && l(f, "start") && /* @__PURE__ */ a("span", {
"aria-hidden": "true",
className: C()
}),
s(n) && l(f, "end") && /* @__PURE__ */ a("span", {
"aria-hidden": "true",
className: S()
}),
c(n) && l(f, "start") && /* @__PURE__ */ a("span", {
"aria-hidden": "true",
className: x()
}),
c(n) && l(f, "end") && /* @__PURE__ */ a("span", {
"aria-hidden": "true",
className: b()
})
]
});
});
u.displayName = "ScrollArea";
//#endregion
export { u as ScrollArea };