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

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

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import React, { useState, memo } from "react";
import { Autocomplete } from "@material-ui/lab";
import { propsEqual, useField } from "@ezform/core";
import { Chip, TextField } from "@material-ui/core";
import { FieldReadonly } from "./FieldReadonly";
export var FieldComboSelect = 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, _d = props.color, color = _d === void 0 ? "primary" : _d, _e = props.chipVariant, chipVariant = _e === void 0 ? "default" : _e, chipColor = props.chipColor, chipSize = props.chipSize, defaultValue = props.defaultValue;
    useField(name, validator, form, defaultValue);
    var getOptionSelected = function (option, value) {
        return option.value === value;
    };
    var _f = useState(false), open = _f[0], setOpen = _f[1];
    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, color: color, name: name, id: id, label: label, value: value_1.join(", "), fullWidth: true }));
    }
    return (React.createElement(Autocomplete, { open: open, onOpen: function () { return setOpen(true); }, onClose: function () { return setOpen(false); }, multiple: true, id: id, disabled: disabled, options: options, filterSelectedOptions: true, value: form.getField(name) || [], onChange: function (event, newValue, reason) {
            if (reason === "clear") {
                form.setField(name, []);
            }
            else {
                var newFields = newValue === null || newValue === void 0 ? void 0 : newValue.map(function (v) { return (v === null || v === void 0 ? void 0 : v.value) || v; });
                form.setField(name, newFields);
            }
        }, getOptionLabel: function (option) { return option.label; }, getOptionDisabled: function (option) { return option === null || option === void 0 ? void 0 : option.disabled; }, getOptionSelected: getOptionSelected, renderTags: function (value, getTagProps) {
            return value.map(function (v, index) {
                var _a;
                var initialProps = getTagProps({ index: index });
                return (React.createElement(Chip, __assign({ key: v, label: (_a = options.find(function (o) { return o.value === v; })) === null || _a === void 0 ? void 0 : _a.label, variant: chipVariant, color: chipColor, size: chipSize }, initialProps)));
            });
        }, renderInput: function (params) { return (React.createElement(TextField, __assign({}, params, { label: label, variant: variant, color: color, error: form.hasError(name), helperText: form.getHelperText(name), fullWidth: true }))); } }));
}, propsEqual);