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

TypeScript Material-UI Implementation

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.HiSelectorTL = HiSelectorTL;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const Tiplist_1 = require("./Tiplist");
const Grid_1 = __importDefault(require("@mui/material/Grid"));
const FormLabel_1 = __importDefault(require("@mui/material/FormLabel"));
/**
 * Hierarchy tiplist selector
 * @param props Prop
 * @returns Component
 */
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_1.default.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_1.default.useEffect(() => {
        setValues(values);
    }, [values.toString()]);
    const currentValue = localValues.at(-1);
    react_1.default.useEffect(() => {
        updateValue(currentValue);
    }, [currentValue]);
    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [label && ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: { xs: 12 }, children: (0, jsx_runtime_1.jsx)(FormLabel_1.default, { required: required, sx: { fontSize: (theme) => theme.typography.caption }, children: label }) })), (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: `${currentValue ?? ""}` }), (0, jsx_runtime_1.jsx)(Grid_1.default, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(Tiplist_1.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 && ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(Tiplist_1.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 && ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(Tiplist_1.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 && ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(Tiplist_1.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]}`) }))] }));
}