@conduction/components/lib/components/tabs/Tabs.js

React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import * as styles from "./Tabs.module.css";
import { Tabs as RTabs, TabList as RTabList, Tab as RTab, TabPanel as RTabPanel, } from "react-tabs";
import clsx from "clsx";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
// Tabs
export const Tabs = ({ children, ...otherProps }) => (_jsx(RTabs, { selectedIndex: 0, className: styles.tabs, ...otherProps, children: children }));
Tabs.tabsRole = "Tabs";
// TabList
export const TabList = ({ children, ...otherProps }) => {
    const [canScrollRight, setCanScrollRight] = React.useState(false);
    const [canScrollLeft, setCanScrollLeft] = React.useState(false);
    const wrapperRef = React.useRef(null);
    const handleScroll = () => {
        if (wrapperRef.current) {
            setCanScrollLeft(wrapperRef.current.scrollLeft > 0);
            setCanScrollRight(wrapperRef.current.scrollWidth - wrapperRef.current.scrollLeft > wrapperRef.current.clientWidth);
        }
    };
    const handleScrollRight = () => {
        if (wrapperRef.current)
            wrapperRef.current.scrollTo({
                left: wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth * 0.9,
                behavior: "smooth",
            });
    };
    const handleScrollLeft = () => {
        if (wrapperRef.current)
            wrapperRef.current.scrollTo({
                left: wrapperRef.current.scrollLeft - wrapperRef.current.clientWidth * 0.9,
                behavior: "smooth",
            });
    };
    React.useEffect(() => {
        if (wrapperRef.current) {
            setCanScrollRight(wrapperRef.current.scrollWidth > wrapperRef.current.clientWidth); // initiate scroll
        }
    }, []);
    return (_jsx("div", { className: styles.container, children: _jsx("div", { onScroll: handleScroll, ref: wrapperRef, className: clsx(styles.wrapper), children: _jsxs("div", { className: styles.tabListContainer, children: [canScrollLeft && (_jsx("div", { onClick: handleScrollLeft, className: clsx(canScrollLeft && styles.scrollLeftButton, styles.tabButton), children: _jsx("span", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) }) })), _jsx(RTabList, { className: clsx(canScrollRight || canScrollLeft ? styles.tabListOverflow : styles.tabList), ...otherProps, children: children }), canScrollRight && (_jsx("div", { onClick: handleScrollRight, className: clsx(canScrollRight && styles.scrollRightButton, styles.tabButton), children: _jsx("span", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) }) }))] }) }) }));
};
TabList.tabsRole = "TabList";
// Tab
export const Tab = ({ children, ...otherProps }) => (_jsx(RTab, { tabIndex: "0", className: styles.tab, ...otherProps, children: children }));
Tab.tabsRole = "Tab";
// TabPanel
export const TabPanel = ({ children, ...otherProps }) => (_jsx(RTabPanel, { ...otherProps, children: children }));
TabPanel.tabsRole = "TabPanel";