@ezform/mui/lib/components/FieldCheckboxGroup.js

Material UI form components for use with EZForm React validation and form library

var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
import React, { memo, useEffect, useState } from "react";
import { useField, propsEqual } from "@ezform/core";
import { FormControl, FormControlLabel, FormLabel, FormGroup, Checkbox, FormHelperText } from "@material-ui/core";
export var FieldCheckboxGroup = memo(function (props) {
    var id = props.id, name = props.name, form = props.form, _a = props.validator, validator = _a === void 0 ? function () { return null; } : _a, label = props.label, _b = props.readonly, readonly = _b === void 0 ? form.isReadonly : _b, options = props.options, _c = props.color, color = _c === void 0 ? "secondary" : _c, defaultValue = props.defaultValue;
    useField(name, validator, form, defaultValue);
    var _d = useState([]), selectedOptions = _d[0], setSelectedOptions = _d[1];
    useEffect(function () {
        form.setField(name, selectedOptions);
    }, [selectedOptions]);
    var handleChange = function (option) { return function () {
        setSelectedOptions(function (p) {
            var arr = __spreadArray([], p, true);
            var index = arr.indexOf(option.value);
            if (index >= 0) {
                arr.splice(index, 1);
                return arr;
            }
            arr.push(option.value);
            return arr;
        });
    }; };
    return (React.createElement(FormControl, { error: form.hasError(name), component: "fieldset", fullWidth: true },
        label && React.createElement(FormLabel, { component: "legend" }, label),
        React.createElement(FormGroup, { id: id }, options.map(function (option, i) {
            var _a;
            var selected = (_a = form.getField(name)) === null || _a === void 0 ? void 0 : _a.find(function (val) { return val === option.value; });
            return (React.createElement(FormControlLabel, { key: option.key, control: React.createElement(Checkbox, { disabled: (option === null || option === void 0 ? void 0 : option.disabled) || false, checked: !!selected || false, value: option.value, onChange: !readonly && handleChange(option), name: "".concat(name, "-key-").concat(i), color: color, readOnly: readonly }), label: option.label }));
        })),
        form.hasError(name) && React.createElement(FormHelperText, { error: true }, form.getHelperText(name))));
}, propsEqual);