Skip to content

Commit

Permalink
Added horizontaloverflowwrapper
Browse files Browse the repository at this point in the history
  • Loading branch information
remko48 committed Feb 19, 2024
1 parent 71bb659 commit 115fbfd
Show file tree
Hide file tree
Showing 4 changed files with 327 additions and 190 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
:root {
--conduction-horizontal-overflow-wrapper-background-color: unset;
--conduction-horizontal-overflow-wrapper-buttons-top: 12px;

--conduction-horizontal-overflow-wrapper-margin-inline-start: 8px;
--conduction-horizontal-overflow-wrapper-margin-inline-end: 8px;
--conduction-horizontal-overflow-wrapper-margin-block-start: 8px;
--conduction-horizontal-overflow-wrapper-margin-block-end: 8px;
}

.container {
position: relative;
background-color: var(
--conduction-horizontal-overflow-wrapper-background-color
);
}

.wrapper {
overflow-x: scroll;
}

.scrollButton {
position: sticky;
top: var(--conduction-horizontal-overflow-wrapper-buttons-top);

margin-inline-start: var(
--conduction-horizontal-overflow-wrapper-margin-inline-start
);
margin-inline-end: var(
--conduction-horizontal-overflow-wrapper-margin-inline-end
);
margin-block-start: var(
--conduction-horizontal-overflow-wrapper-margin-block-start
);
margin-block-end: var(
--conduction-horizontal-overflow-wrapper-margin-block-end
);
z-index: 10000;
}

.scrollButton.right {
left: 100%;
}

/* Hide scrollbar */
.wrapper::-webkit-scrollbar {
display: none;
}
.wrapper {
-ms-overflow-style: none;
scrollbar-width: none;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
/**
* IMPORTANT: This is a temporary component that will be removed if the @conduction/components package can be updated.
*/

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";

interface HorizontalOverflowWrapperProps {
children: React.ReactNode;
ariaLabels: {
scrollRightButton: string;
scrollLeftButton: string;
};
}

export const HorizontalOverflowWrapper: React.FC<HorizontalOverflowWrapperProps> = ({ children, ariaLabels }) => {
const [canScrollRight, setCanScrollRight] = React.useState<boolean>(false);
const [canScrollLeft, setCanScrollLeft] = React.useState<boolean>(false);

const wrapperRef = React.useRef<HTMLDivElement | null>(null);

const scrollRight = (): void => {
wrapperRef.current?.scrollTo({
left: wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth * 0.9,
behavior: "smooth",
});
};

const scrollLeft = (): void => {
wrapperRef.current?.scrollTo({
left: wrapperRef.current.scrollLeft - wrapperRef.current.clientWidth * 0.9,
behavior: "smooth",
});
};

React.useEffect(() => {
checkScrollDirections(); // initiate available scroll directions

window.addEventListener("resize", checkScrollDirections);

return () => window.removeEventListener("resize", checkScrollDirections);
}, []);

const checkScrollDirections = (): void => {
if (!wrapperRef.current) return;

setCanScrollRight(wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth < wrapperRef.current.scrollWidth);
setCanScrollLeft(wrapperRef.current.scrollLeft > 0);
};

return (
<div className={styles.container}>
{canScrollLeft && (
<Button
className={clsx(styles.scrollButton)}
onClick={scrollLeft}
appearance="secondary-action-button"
aria-label={ariaLabels.scrollLeftButton}
>
<FontAwesomeIcon icon={faChevronLeft} />
</Button>
)}

{canScrollRight && (
<Button
className={clsx(styles.scrollButton, styles.right)}
onClick={scrollRight}
appearance="secondary-action-button"
aria-label={ariaLabels.scrollRightButton}
>
<FontAwesomeIcon icon={faChevronRight} />
</Button>
)}

<div ref={wrapperRef} className={styles.wrapper} onScroll={checkScrollDirections}>
{children}
</div>
</div>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,6 @@
justify-content: space-between;
}

.tableContainer {
max-width: 100%;
overflow-x: scroll;
}

.button > span > svg {
margin-inline-end: var(--gateway-ui-size-xs);
Expand Down
Loading

0 comments on commit 115fbfd

Please sign in to comment.