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

TypeScript Material-UI Implementation

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { SelectEx } from "./SelectEx";
import Grid from "@mui/material/Grid";
import FormLabel from "@mui/material/FormLabel";
/**
 * Hierarchy selector
 * @param props Prop
 * @returns Component
 */
export function HiSelector(props) {
    // Destruct
    const { breakPoints = { xs: 6, md: 4, lg: 3 }, idField = "id", error, helperText, name, label, labelField = "name", labels = ["1", "2", "3", "4"], loadData, onChange, onSelectChange, onItemChange, required, search = true, values = [], variant = "outlined" } = props;
    const [localValues, setValues] = React.useState(values);
    const updateValue = (value) => {
        if (onChange)
            onChange(value);
    };
    const doChange = (event, index) => {
        const value = event.target.value;
        const itemValue = value === "" ? undefined : value;
        const newValues = [...localValues.slice(0, index)];
        if (itemValue != null)
            newValues.push(itemValue);
        setValues(newValues);
        if (onSelectChange)
            onSelectChange(event);
    };
    const doItemChange = (option, userAction) => {
        if (onItemChange == null)
            return;
        if (!userAction && (option == null || option[idField] !== values.at(-1)))
            return;
        onItemChange(option, userAction);
    };
    React.useEffect(() => {
        setValues(values);
    }, [values.toString()]);
    const currentValue = localValues.at(-1);
    React.useEffect(() => {
        updateValue(currentValue);
    }, [currentValue]);
    return (_jsxs(React.Fragment, { children: [label && (_jsx(Grid, { size: { xs: 12 }, children: _jsx(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption }, children: label }) })), _jsx("input", { type: "hidden", name: name, value: `${currentValue ?? ""}` }), _jsx(Grid, { size: breakPoints, children: _jsx(SelectEx, { idField: idField, label: labels[0], labelField: labelField, name: "tab1", search: search, fullWidth: true, loadData: () => loadData(), value: values[0], onChange: (event) => doChange(event, 0), onItemChange: doItemChange, required: required, error: error, helperText: helperText, variant: variant }) }), localValues[0] != null && (_jsx(Grid, { size: breakPoints, children: _jsx(SelectEx, { idField: idField, label: labels[1], labelField: labelField, name: "tab2", search: search, fullWidth: true, loadData: () => loadData(localValues[0]), value: values[1], onChange: (event) => doChange(event, 1), onItemChange: doItemChange, variant: variant }, `${localValues[0]}`) })), localValues[1] != null && (_jsx(Grid, { size: breakPoints, children: _jsx(SelectEx, { idField: idField, label: labels[2], labelField: labelField, name: "tab3", search: search, fullWidth: true, loadData: () => loadData(localValues[1]), value: values[2], onChange: (event) => doChange(event, 2), onItemChange: doItemChange, variant: variant }, `${localValues[1]}`) })), localValues[2] != null && (_jsx(Grid, { size: breakPoints, children: _jsx(SelectEx, { idField: idField, label: labels[3], labelField: labelField, name: "tab4", search: search, fullWidth: true, loadData: () => loadData(localValues[2]), value: values[3], onChange: (event) => doChange(event, 3), onItemChange: doItemChange, variant: variant }, `${localValues[2]}`) }))] }));
}