@ezform/mui
Version:
Material UI form components for use with EZForm React validation and form library
38 lines (37 loc) • 2.54 kB
JavaScript
import React, { memo } from "react";
import { useField, propsEqual } from "@ezform/core";
import { MenuItem, ListItemText, Checkbox, TextField } from "@material-ui/core";
import { FieldReadonly } from "./FieldReadonly";
export var FieldMultiSelect = memo(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, options = props.options, _c = props.variant, variant = _c === void 0 ? "standard" : _c, defaultValue = props.defaultValue;
useField(name, validator, form, defaultValue);
var handleChange = function (e) {
form.setField(name, e.target.value);
};
if (readonly) {
var value_1 = [];
(form.getField(name) || []).forEach(function (val) {
var _a;
var label = (_a = options.find(function (f) { return f.value === val; })) === null || _a === void 0 ? void 0 : _a.label;
value_1.push(label);
});
return (React.createElement(FieldReadonly, { variant: variant, name: name, id: id, label: label, value: value_1.join(", "), fullWidth: true }));
}
return (React.createElement(TextField, { select: true, label: label, variant: variant, id: id, value: form.getField(name) || [], onChange: handleChange, disabled: disabled, error: form.hasError(name), SelectProps: {
multiple: true,
renderValue: function (selected) {
var render = [];
selected.map(function (s) {
var option = options.find(function (o) { return (o === null || o === void 0 ? void 0 : o.value) === s; });
if (option)
render.push(option === null || option === void 0 ? void 0 : option.label);
});
return render.join(", ");
}
}, fullWidth: true, helperText: form.getHelperText(name) }, options.map(function (option) {
var _a;
return (React.createElement(MenuItem, { key: option.key, value: option.value, disabled: (option === null || option === void 0 ? void 0 : option.disabled) || false },
React.createElement(Checkbox, { checked: ((_a = form.getField(name)) === null || _a === void 0 ? void 0 : _a.indexOf(option.value)) > -1, color: "primary" }),
React.createElement(ListItemText, { primary: option.label })));
})));
}, propsEqual);