@etsoo/materialui
Version:
TypeScript Material-UI Implementation
51 lines (50 loc) • 4.05 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.HiSelector = HiSelector;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const SelectEx_1 = require("./SelectEx");
const Grid_1 = __importDefault(require("@mui/material/Grid"));
const FormLabel_1 = __importDefault(require("@mui/material/FormLabel"));
/**
* Hierarchy selector
* @param props Prop
* @returns Component
*/
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_1.default.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_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)(SelectEx_1.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 && ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(SelectEx_1.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 && ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(SelectEx_1.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 && ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(SelectEx_1.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]}`) }))] }));
}