@ezform/mui/lib/components/FieldSearchSelect.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, { memo, useEffect, useState } from "react";
import { useField, propsEqual } from "@ezform/core";
import { TextField } from "@material-ui/core";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { FieldReadonly } from "./FieldReadonly";
export var FieldSearchSelect = memo(function (props) {
    var _a;
    var id = props.id, name = props.name, form = props.form, _b = props.validator, validator = _b === void 0 ? function () { return null; } : _b, disabled = props.disabled, _c = props.readonly, readonly = _c === void 0 ? form.isReadonly : _c, label = props.label, options = props.options, _d = props.variant, variant = _d === void 0 ? "standard" : _d, _e = props.color, color = _e === void 0 ? "primary" : _e, defaultValue = props.defaultValue;
    useField(name, validator, form, defaultValue);
    var _f = useState(""), input = _f[0], setInput = _f[1];
    var handleChange = function (e, selected) {
        if (selected) {
            form.setField(name, selected.value);
        }
        else {
            form.setField(name, null);
        }
    };
    useEffect(function () {
        if (form.getField(name)) {
            var selected = options.find(function (o) { return o.value === form.getField(name); });
            setInput((selected === null || selected === void 0 ? void 0 : selected.label) || "");
        }
    }, [form.getField(name)]);
    var handleInputChange = function (e, value, reason) {
        if (reason === "clear") {
            setInput("");
        }
        else {
            setInput(value);
        }
    };
    if (readonly) {
        return (React.createElement(FieldReadonly, { variant: variant, color: color, name: name, id: id, label: label, value: ((_a = options.find(function (f) { return f.value === form.getField(name); })) === null || _a === void 0 ? void 0 : _a.label) || "", fullWidth: true }));
    }
    return (React.createElement(Autocomplete, { id: id, onChange: handleChange, disabled: disabled, options: options, getOptionLabel: function (option) { return (option === null || option === void 0 ? void 0 : option.label) || ""; }, getOptionDisabled: function (option) { return (option === null || option === void 0 ? void 0 : option.disabled) || false; }, getOptionSelected: function (option, value) { return option.value === value; }, value: form.getField(name), inputValue: input, onInputChange: handleInputChange, disableClearable: false, 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);