@etsoo/materialui
Version:
TypeScript Material-UI Implementation
93 lines (92 loc) • 4.11 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { DataTypes, Utils } from "@etsoo/shared";
import Box from "@mui/material/Box";
import Checkbox from "@mui/material/Checkbox";
import FormControl from "@mui/material/FormControl";
import FormControlLabel from "@mui/material/FormControlLabel";
import FormGroup from "@mui/material/FormGroup";
import FormHelperText from "@mui/material/FormHelperText";
import InputLabel from "@mui/material/InputLabel";
import NotchedOutline from "@mui/material/OutlinedInput";
import React from "react";
/**
* OptionGroupFlag
* @param props Props
* @returns Component
*/
export function OptionGroupFlag(props) {
// Destruct
const { getOptionLabel, defaultValue, idField = "id", label, labelField = "label", mRef, name, onValueChange, options, readOnly, row, itemSize, helperText, variant, required, fullWidth, sx = {}, ...rest } = props;
// Outlined
const outlined = variant === "outlined";
// Get option value
// D type should be the source id type
const getOptionValue = (option) => {
const value = DataTypes.getValue(option, idField);
if (value == null)
return null;
return value;
};
// Value
const [value, setValue] = React.useState(defaultValue);
React.useEffect(() => {
setValue(defaultValue);
}, [defaultValue]);
// Disabled ids
const [disabledIds, setDisabledIds] = React.useState();
// Item checked
const itemChecked = (option) => {
// Value
const itemValue = getOptionValue(option);
if (itemValue == null || value == null)
return false;
return (value & itemValue) > 0;
};
React.useImperativeHandle(mRef, () => ({
disable(ids) {
setDisabledIds(ids);
}
}));
// First item value
const firstOptionValue = getOptionValue(options[0]);
// Items
const list = options.map((option) => {
// Value
const ov = getOptionValue(option);
if (ov == null)
return;
// Control
const control = (_jsx(Checkbox, { name: name, readOnly: readOnly, size: itemSize, checked: itemChecked(option), disabled: disabledIds?.includes(ov), onChange: (event) => {
if (firstOptionValue == null)
return;
const typeValue = Utils.parseString(event.target.value, firstOptionValue);
const newValue = (value == null
? event.target.checked
? typeValue
: undefined
: event.target.checked
? value | typeValue
: value ^ typeValue);
if (onValueChange)
onValueChange(newValue);
setValue(newValue);
} }));
// Label
const label = getOptionLabel == null ? `${option[labelField]}` : getOptionLabel(option);
return (_jsx(FormControlLabel, { control: control, value: ov, label: label }, ov));
});
// Group
const group = _jsx(FormGroup, { row: row, children: list });
// Layout
return (_jsxs(React.Fragment, { children: [_jsxs(FormControl, { fullWidth: fullWidth, sx: sx, ...rest, children: [label && (_jsx(InputLabel, { required: required, variant: variant, shrink: true, children: label })), outlined ? (_jsx(NotchedOutline, { label: label && required ? label + " *" : label, notched: true, endAdornment: group, sx: {
cursor: "default",
display: "flex",
gap: 1,
paddingX: 2,
paddingY: "7px",
width: fullWidth ? "100%" : "auto",
"& input": {
display: "none"
}
} })) : (_jsx(Box, { paddingLeft: 2, paddingY: "7px", children: group }))] }), helperText && (_jsx(FormHelperText, { sx: { marginLeft: 2, marginRight: 2 }, children: helperText }))] }));
}