braid-design-system
Version:
Themeable design system for the SEEK Group
69 lines (68 loc) • 2.32 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { useRef, useCallback } from "react";
import { throttle } from "throttle-debounce";
import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect.mjs";
import { Box } from "../../Box/Box.mjs";
import { buildDataAttributes } from "../buildDataAttributes.mjs";
import { container, mask, hideScrollbar, fadeSize, direction, maskTop, maskBottom, maskLeft, maskRight } from "./ScrollContainer.css.mjs";
const scrollOffset = 2;
const maskOverflow = (element, direction2) => setTimeout(() => {
const atTop = element.scrollTop <= 0;
const atBottom = element.scrollHeight - element.offsetHeight - element.scrollTop < scrollOffset;
const atLeft = element.scrollLeft <= 0;
const atRight = element.scrollWidth - element.offsetWidth - element.scrollLeft < scrollOffset;
if (direction2 === "vertical" || direction2 === "all") {
element.classList[atTop ? "remove" : "add"](maskTop);
element.classList[atBottom ? "remove" : "add"](maskBottom);
}
if (direction2 === "horizontal" || direction2 === "all") {
element.classList[atLeft ? "remove" : "add"](maskLeft);
element.classList[atRight ? "remove" : "add"](maskRight);
}
});
const ScrollContainer = ({
children,
direction: direction$1 = "horizontal",
fadeSize: fadeSize$1 = "medium",
hideScrollbar: hideScrollbar$1 = false,
data,
...restProps
}) => {
const containerRef = useRef(null);
const updateMask = throttle(
100,
useCallback(() => {
if (containerRef.current) {
maskOverflow(containerRef.current, direction$1);
}
}, [containerRef, direction$1])
);
useIsomorphicLayoutEffect(() => {
if (containerRef.current) {
updateMask();
}
window.addEventListener("resize", updateMask);
return () => window.removeEventListener("resize", updateMask);
}, [updateMask]);
return /* @__PURE__ */ jsx(
Box,
{
ref: containerRef,
onScroll: updateMask,
position: "relative",
height: "full",
className: [
container,
mask,
hideScrollbar$1 ? hideScrollbar : null,
fadeSize[fadeSize$1],
direction[direction$1]
],
...buildDataAttributes({ data, validateRestProps: restProps }),
children
}
);
};
export {
ScrollContainer
};