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

TypeScript Material-UI Implementation

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Tiplist } from "./Tiplist";
import Grid from "@mui/material/Grid";
import FormLabel from "@mui/material/FormLabel";
/**
 * Hierarchy tiplist selector
 * @param props Prop
 * @returns Component
 */
export function HiSelectorTL(props) {
    // Destruct
    const { breakPoints = { xs: 6, md: 4, lg: 3 }, idField = "id", error, helperText, name, label = name, labels = ["1", "2", "3", "4"], loadData, onChange, onItemChange, required, search = false, values = [] } = props;
    const [localValues, setValues] = React.useState(values);
    const updateValue = (value) => {
        if (onChange)
            onChange(value);
    };
    const doChange = (index, event, value, reason) => {
        if (onItemChange) {
            onItemChange(event, value, reason);
            if (event.isDefaultPrevented())
                return;
        }
        const newValues = [...localValues.slice(0, index)];
        if (value)
            newValues.push(value[idField]);
        setValues(newValues);
    };
    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(Tiplist, { idField: idField, label: labels[0], name: "tab1", search: search, fullWidth: true, idValue: values[0], loadData: (keyword, id, items) => loadData(keyword, id, items), inputRequired: required, inputError: error, inputHelperText: helperText, onChange: (event, value, reason) => doChange(0, event, value, reason) }) }), localValues[0] != null && (_jsx(Grid, { size: breakPoints, children: _jsx(Tiplist, { label: labels[1], idField: idField, name: "tab2", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[0]), idValue: values[1], onChange: (event, value, reason) => doChange(1, event, value, reason) }, `${localValues[0]}`) })), localValues[1] != null && (_jsx(Grid, { size: breakPoints, children: _jsx(Tiplist, { label: labels[2], idField: idField, name: "tab3", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[1]), idValue: values[2], onChange: (event, value, reason) => doChange(2, event, value, reason) }, `${localValues[1]}`) })), localValues[2] != null && (_jsx(Grid, { size: breakPoints, children: _jsx(Tiplist, { label: labels[3], idField: idField, name: "tab4", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[2]), idValue: values[3], onChange: (event, value, reason) => doChange(3, event, value, reason) }, `${localValues[2]}`) }))] }));
}