@conduction/components
Version:
React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)
39 lines (38 loc) • 2.52 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import * as styles from "./HorizontalOverflowWrapper.module.css";
import clsx from "clsx";
import { Button } from "@utrecht/component-library-react/dist/css-module";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
export const HorizontalOverflowWrapper = ({ children, ariaLabels, scrollMode = "buttons", }) => {
const [canScrollRight, setCanScrollRight] = React.useState(false);
const [canScrollLeft, setCanScrollLeft] = React.useState(false);
const wrapperRef = React.useRef(null);
const scrollRight = () => {
wrapperRef.current?.scrollTo({
left: wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth * 0.9,
behavior: "smooth",
});
};
const scrollLeft = () => {
wrapperRef.current?.scrollTo({
left: wrapperRef.current.scrollLeft - wrapperRef.current.clientWidth * 0.9,
behavior: "smooth",
});
};
React.useEffect(() => {
if (scrollMode === "scrollbar")
return;
checkScrollDirections();
window.addEventListener("resize", checkScrollDirections);
return () => window.removeEventListener("resize", checkScrollDirections);
}, [scrollMode]);
const checkScrollDirections = () => {
if (!wrapperRef.current)
return;
setCanScrollRight(wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth < wrapperRef.current.scrollWidth);
setCanScrollLeft(wrapperRef.current.scrollLeft > 0);
};
return (_jsxs("div", { className: styles.container, children: [scrollMode === "buttons" && canScrollLeft && (_jsx(Button, { className: clsx(styles.scrollButton), onClick: scrollLeft, appearance: "secondary-action-button", "aria-label": ariaLabels.scrollLeftButton, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) })), scrollMode === "buttons" && canScrollRight && (_jsx(Button, { className: clsx(styles.scrollButton, styles.right), onClick: scrollRight, appearance: "secondary-action-button", "aria-label": ariaLabels.scrollRightButton, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) })), _jsx("div", { ref: wrapperRef, className: clsx(styles.wrapper, scrollMode === "scrollbar" && styles.scrollbarVisible), onScroll: scrollMode === "buttons" ? checkScrollDirections : undefined, children: children })] }));
};