braid-design-system
Version:
Themeable design system for the SEEK Group
68 lines (67 loc) • 3.05 kB
JavaScript
;
const jsxRuntime = require("react/jsx-runtime");
const react = require("react");
const throttleDebounce = require("throttle-debounce");
const lib_hooks_useIsomorphicLayoutEffect_cjs = require("../../../hooks/useIsomorphicLayoutEffect.cjs");
const lib_components_Box_Box_cjs = require("../../Box/Box.cjs");
const lib_components_private_buildDataAttributes_cjs = require("../buildDataAttributes.cjs");
const lib_components_private_ScrollContainer_ScrollContainer_css_cjs = require("./ScrollContainer.css.cjs");
const scrollOffset = 2;
const maskOverflow = (element, direction) => 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 (direction === "vertical" || direction === "all") {
element.classList[atTop ? "remove" : "add"](lib_components_private_ScrollContainer_ScrollContainer_css_cjs.maskTop);
element.classList[atBottom ? "remove" : "add"](lib_components_private_ScrollContainer_ScrollContainer_css_cjs.maskBottom);
}
if (direction === "horizontal" || direction === "all") {
element.classList[atLeft ? "remove" : "add"](lib_components_private_ScrollContainer_ScrollContainer_css_cjs.maskLeft);
element.classList[atRight ? "remove" : "add"](lib_components_private_ScrollContainer_ScrollContainer_css_cjs.maskRight);
}
});
const ScrollContainer = ({
children,
direction = "horizontal",
fadeSize = "medium",
hideScrollbar = false,
data,
...restProps
}) => {
const containerRef = react.useRef(null);
const updateMask = throttleDebounce.throttle(
100,
react.useCallback(() => {
if (containerRef.current) {
maskOverflow(containerRef.current, direction);
}
}, [containerRef, direction])
);
lib_hooks_useIsomorphicLayoutEffect_cjs.useIsomorphicLayoutEffect(() => {
if (containerRef.current) {
updateMask();
}
window.addEventListener("resize", updateMask);
return () => window.removeEventListener("resize", updateMask);
}, [updateMask]);
return /* @__PURE__ */ jsxRuntime.jsx(
lib_components_Box_Box_cjs.Box,
{
ref: containerRef,
onScroll: updateMask,
position: "relative",
height: "full",
className: [
lib_components_private_ScrollContainer_ScrollContainer_css_cjs.container,
lib_components_private_ScrollContainer_ScrollContainer_css_cjs.mask,
hideScrollbar ? lib_components_private_ScrollContainer_ScrollContainer_css_cjs.hideScrollbar : null,
lib_components_private_ScrollContainer_ScrollContainer_css_cjs.fadeSize[fadeSize],
lib_components_private_ScrollContainer_ScrollContainer_css_cjs.direction[direction]
],
...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
children
}
);
};
exports.ScrollContainer = ScrollContainer;