@etsoo/materialui/lib/mjs/TabBox.js

TypeScript Material-UI Implementation

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useSearchParamsEx1 } from "@etsoo/react";
import { Utils } from "@etsoo/shared";
import Box from "@mui/material/Box";
import Tab from "@mui/material/Tab";
import Tabs from "@mui/material/Tabs";
import React from "react";
function isActionTab(children) {
    return typeof children === "function" && children.length === 0;
}
/**
 * Tabs with box
 * @param props Props
 * @returns Component
 */
export function TabBox(props) {
    // Destruct
    const { index, indexField = "index", inputName, root, defaultIndex = 0, onChange, tabProps, tabs, ...rest } = props;
    // State
    const [params, setSearchParams] = useSearchParamsEx1({
        [indexField]: "number"
    });
    const [value, setValue] = React.useState(params[indexField] ?? defaultIndex);
    React.useEffect(() => {
        if (index == null)
            return;
        setValue(index);
    }, [index]);
    // Layout
    return (_jsxs(React.Fragment, { children: [inputName && _jsx("input", { type: "hidden", name: inputName, value: value }), _jsx(Box, { ...root, children: _jsx(Tabs, { value: value, onChange: (event, newValue) => {
                        setSearchParams((prev) => {
                            if (newValue == defaultIndex)
                                prev.delete(indexField);
                            else
                                prev.set(indexField, newValue);
                            return prev;
                        });
                        const { children } = tabs[newValue];
                        if (isActionTab(children)) {
                            children();
                        }
                        else {
                            setValue(newValue);
                            if (onChange)
                                onChange(event, newValue);
                        }
                    }, ...rest, children: tabs.map(({ children, panelProps, ...tabRest }, index) => (_jsx(Tab, { value: index, ...tabRest }, index))) }) }), tabs.map(({ children, panelProps }, index) => (_jsx(Box, { hidden: value !== index, ...tabProps, ...panelProps, children: isActionTab(children) ? (_jsx(React.Fragment, {})) : (Utils.getResult(children, value === index, index)) }, index)))] }));
}