@dccs/react-autocomplete-mui/lib/DefaultAutocomplete.js

React-Autocomplete without the tears

"use strict";
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);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Autocomplete_1 = require("@material-ui/lab/Autocomplete");
var core_1 = require("@material-ui/core");
var utils_1 = require("./utils");
var utils_2 = require("@dccs/utils");
function DefaultAutocomplete(props) {
    var onChange = props.onChange, variant = props.variant, onInputChange = props.onInputChange, textFieldProps = props.textFieldProps, keyProp = props.keyProp, textProp = props.textProp, options = props.options, value = props.value, highlightQuery = props.highlightQuery, highlightQueryStyle = props.highlightQueryStyle, others = __rest(props, ["onChange", "variant", "onInputChange", "textFieldProps", "keyProp", "textProp", "options", "value", "highlightQuery", "highlightQueryStyle"]);
    var _a = React.useState(keyToOption(value)), selectedOption = _a[0], setSelectedOption = _a[1];
    var _b = React.useState(""), inputValue = _b[0], setInputValue = _b[1];
    function keyToOption(key) {
        if (key) {
            if (options && options.length > 0) {
                var option = options.find(function (o) { return getKeyFromOption(o) === key; });
                if (option) {
                    return option;
                }
                // tslint:disable-next-line: no-console
                console.error("@dccs/react-autocomplete-mui: no option found for " + key + "!");
            }
        }
        return "";
    }
    function handleChange(e, option) {
        setSelectedOption(option);
        if (onChange) {
            onChange(e, option ? getKeyFromOption(option) : undefined);
        }
    }
    function handleInputChange(e, query, reason) {
        setInputValue(query || "");
        if (onInputChange) {
            onInputChange(e, query, reason);
        }
    }
    function getTextFromOption(option) {
        var text = textProp(option);
        if (text) {
            return text;
        }
        // tslint:disable-next-line: no-console
        console.error("@dccs/react-autocomplete-mui: TextProp returned undefiend or null!", option);
        return option.toString ? option.toString() : "";
    }
    function getKeyFromOption(option) {
        var key = keyProp(option);
        if (key) {
            return key;
        }
        // tslint:disable-next-line: no-console
        console.error("@dccs/react-autocomplete-mui: KeyProp returned undefiend or null!", option);
    }
    function renderOption(option, state) {
        if (option) {
            if (highlightQuery) {
                return (
                // <MenuItem selected={state.selected}>
                utils_2.HighlightQuery(getTextFromOption(option), state.inputValue, highlightQueryStyle)
                // </MenuItem>
                );
            }
            return (
            // <MenuItem selected={state.selected}>
            getTextFromOption(option)
            // </MenuItem>
            );
        }
        return "";
    }
    function handleGetOptionLabel(option) {
        if (option) {
            return getTextFromOption(option);
        }
        return "";
    }
    function handleFilterOptions(oArray, state) {
        if (inputValue) {
            return oArray.filter(function (o) {
                return utils_1.stringCompare(getTextFromOption(o), inputValue);
            });
        }
        else {
            return oArray;
        }
    }
    React.useEffect(function () {
        setSelectedOption(keyToOption(value));
    }, [value]);
    return (React.createElement(Autocomplete_1.default, __assign({ getOptionLabel: handleGetOptionLabel, renderOption: renderOption, onChange: handleChange, onInputChange: handleInputChange, options: options, value: selectedOption, filterOptions: handleFilterOptions, renderInput: function (params) { return (React.createElement(core_1.TextField, __assign({}, params, { autoComplete: "off" }, textFieldProps))); } }, others)));
}
exports.DefaultAutocomplete = DefaultAutocomplete;