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

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

import React from "react";
import { useField } from "@ezform/core";
import { FormControl, FormHelperText, Grid, Switch } from "@material-ui/core";
export var FieldSwitch = function (props) {
    var id = props.id, name = props.name, form = props.form, _a = props.validator, validator = _a === void 0 ? function () { return null; } : _a, disabled = props.disabled, _b = props.readonly, readonly = _b === void 0 ? form.isReadonly : _b, label = props.label, labelBefore = props.labelBefore, _c = props.color, color = _c === void 0 ? "secondary" : _c, size = props.size, defaultValue = props.defaultValue;
    useField(name, validator, form, defaultValue);
    var handleChange = function (e) {
        form.setField(name, e.target.checked);
    };
    return (React.createElement(FormControl, { error: form.hasError(name) },
        React.createElement(Grid, { container: true, alignItems: "center" },
            labelBefore && React.createElement(Grid, { item: true }, labelBefore),
            React.createElement(Grid, { item: true },
                React.createElement(Switch, { id: id, checked: form.getField(name) || false, size: size, color: color, onChange: !readonly && handleChange, inputProps: { readOnly: readonly }, disabled: disabled, readOnly: readonly })),
            label && React.createElement(Grid, { item: true }, label)),
        form.hasError(name) && (React.createElement(FormHelperText, { error: true }, form.getHelperText(name)))));
};