@etsoo/materialui
Version:
TypeScript Material-UI Implementation
117 lines (116 loc) • 5.87 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.OptionGroup = OptionGroup;
const jsx_runtime_1 = require("react/jsx-runtime");
const shared_1 = require("@etsoo/shared");
const Box_1 = __importDefault(require("@mui/material/Box"));
const Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
const FormControl_1 = __importDefault(require("@mui/material/FormControl"));
const FormControlLabel_1 = __importDefault(require("@mui/material/FormControlLabel"));
const FormGroup_1 = __importDefault(require("@mui/material/FormGroup"));
const FormHelperText_1 = __importDefault(require("@mui/material/FormHelperText"));
const InputLabel_1 = __importDefault(require("@mui/material/InputLabel"));
const OutlinedInput_1 = __importDefault(require("@mui/material/OutlinedInput"));
const Radio_1 = __importDefault(require("@mui/material/Radio"));
const RadioGroup_1 = __importDefault(require("@mui/material/RadioGroup"));
const react_1 = __importDefault(require("react"));
/**
* OptionGroup
* @param props Props
* @returns Component
*/
function OptionGroup(props) {
// Destruct
const { getOptionLabel, defaultValue, idField = "id", label, labelField = "label", multiple = false, mRef, name, onValueChange, options, readOnly, row, itemSize, helperText, variant, required, fullWidth, ...rest } = props;
// Outlined
const outlined = variant === "outlined";
// Get option value
// D type should be the source id type
const getOptionValue = (option) => {
const value = shared_1.DataTypes.getValue(option, idField);
if (value == null)
return null;
return value;
};
// Checkbox values
const [values, setValues] = react_1.default.useState([]);
// Values
const dv = react_1.default.useMemo(() => defaultValue == null
? []
: Array.isArray(defaultValue)
? defaultValue
: [defaultValue], [defaultValue]);
react_1.default.useEffect(() => {
setValues(dv);
}, [dv]);
// Disabled ids
const [disabledIds, setDisabledIds] = react_1.default.useState();
// Item checked
const itemChecked = (option) => {
// Value
const value = getOptionValue(option);
if (value == null)
return false;
return values.includes(value);
};
react_1.default.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);
// Control
const control = multiple ? ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { name: name, readOnly: readOnly, size: itemSize, checked: itemChecked(option), disabled: disabledIds?.includes(ov), onChange: (event) => {
if (firstOptionValue == null)
return;
const typeValue = shared_1.Utils.parseString(event.target.value, firstOptionValue);
const changedValues = [...values];
if (event.target.checked) {
if (changedValues.includes(typeValue))
return;
changedValues.push(typeValue);
}
else {
changedValues.remove(typeValue);
}
if (onValueChange)
onValueChange(changedValues);
setValues(changedValues);
} })) : ((0, jsx_runtime_1.jsx)(Radio_1.default, { disabled: disabledIds?.includes(ov), size: itemSize, readOnly: readOnly }));
// Label
const label = getOptionLabel == null ? `${option[labelField]}` : getOptionLabel(option);
// Value, convert to string
// Will fail when type is number
const value = getOptionValue(option);
return ((0, jsx_runtime_1.jsx)(FormControlLabel_1.default, { control: control, value: value, label: label }, value));
});
// Group
const group = multiple ? ((0, jsx_runtime_1.jsx)(FormGroup_1.default, { row: row, children: list })) : ((0, jsx_runtime_1.jsx)(RadioGroup_1.default, { row: row, name: name, value: values[0] ?? "", onChange: (_event, value) => {
if (firstOptionValue == null)
return;
const typeValue = shared_1.Utils.parseString(value, firstOptionValue);
if (onValueChange)
onValueChange(typeValue);
setValues([typeValue]);
}, children: list }));
// Layout
return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(FormControl_1.default, { fullWidth: fullWidth, ...rest, children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.default, { required: required, variant: variant, shrink: true, children: label })), outlined ? ((0, jsx_runtime_1.jsx)(OutlinedInput_1.default, { 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"
}
} })) : ((0, jsx_runtime_1.jsx)(Box_1.default, { paddingLeft: 2, paddingY: "7px", children: group }))] }), helperText && ((0, jsx_runtime_1.jsx)(FormHelperText_1.default, { sx: { marginLeft: 2, marginRight: 2 }, children: helperText }))] }));
}