@wq/material-web/components/TabGroup.js

Web bindings for @wq/material

import React, { useState } from "react";
import { Tabs } from "@mui/material";
export default function TabGroup(props) {
    if (props.value || props.setValue) {
        return /*#__PURE__*/ React.createElement(ControlledTabGroup, {
            ...props,
        });
    } else {
        return /*#__PURE__*/ React.createElement(UncontrolledTabGroup, {
            ...props,
        });
    }
}
function UncontrolledTabGroup({ children, ...rest }) {
    const tabs = React.Children.toArray(children),
        [value, setValue] = useState(tabs[0].props.value);
    return /*#__PURE__*/ React.createElement(
        ControlledTabGroup,
        {
            value: value,
            setValue: setValue,
            ...rest,
        },
        children
    );
}
function ControlledTabGroup({ children, value, setValue, ...rest }) {
    const tabs = React.Children.toArray(children),
        activeTab = tabs.find((tab) => tab.props.value === value),
        handleChange = (evt, tab) => setValue(tab);
    return /*#__PURE__*/ React.createElement(
        "div",
        {
            style: {
                flex: 1,
                display: "flex",
                flexDirection: "column",
                overflow: "hidden",
            },
        },
        /*#__PURE__*/ React.createElement(
            Tabs,
            {
                value: value,
                onChange: handleChange,
                variant: "fullWidth",
                ...rest,
            },
            tabs
        ),
        /*#__PURE__*/ React.createElement(
            "div",
            {
                style: {
                    flex: 1,
                    display: "flex",
                    flexDirection: "column",
                    overflow: "hidden",
                },
            },
            activeTab && activeTab.props.children
        )
    );
}