monday-ui-react-core/src/components/Tabs/TabsContext/TabsContext.jsx

Official monday.com UI resources for application development in React.js

import React, { useRef, forwardRef, useState, useCallback } from "react";
import PropTypes from "prop-types";
import cx from "classnames";
import useMergeRefs from "../../../hooks/useMergeRefs";
import "./TabsContext.scss";

const TabsContext = forwardRef(({ className, id, activeTabId, children }, ref) => {
    const componentRef = useRef(null);
    const mergedRef = useMergeRefs({ refs: [ref, componentRef] });

    const [previousActiveTab, setPreviousActiveTab] = useState(activeTabId);
    const [activeTab, setActiveTab] = useState(activeTabId);
    const onTabClick = useCallback((tabId) => {
        setPreviousActiveTab(activeTab);
        setActiveTab(tabId);
    }, [setPreviousActiveTab, activeTab, setActiveTab]);

    return (
    <div ref={mergedRef} className={cx("tabs-context--wrapper", className)} id={id}>
        {React.Children.map(children, child => {
            if (child.type.isTabList) {
                return React.cloneElement(child, { onTabChange: onTabClick });
            } else if (child.type.isTabPanels) {
                const animationDirection = previousActiveTab < activeTab ? "ltr" : "rtl";
                return React.cloneElement(child, { activeTabId: activeTab, animationDirection });
            }
            return child;
        })}
    </div>
  );
});

TabsContext.propTypes = {
    className: PropTypes.string,
    id: PropTypes.string,
    activeTabId: PropTypes.number
};
TabsContext.defaultProps = {
    className: "",
    id: "",
    activeTabId: 0
};

export default TabsContext;