@etsoo/materialui/lib/cjs/ComboBoxPro.js

TypeScript Material-UI Implementation

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ComboBoxPro = ComboBoxPro;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const InputField_1 = require("./InputField");
const shared_1 = require("@etsoo/shared");
const ReactApp_1 = require("./app/ReactApp");
const Autocomplete_1 = __importDefault(require("@mui/material/Autocomplete"));
function ComboBoxPro(props) {
    // Global app
    const app = (0, ReactApp_1.useAppContext)();
    // Labels
    const { noOptions, loading: loadingLabel, open: openDefault } = app?.getLabels("noOptions", "loading", "open") ?? {};
    // Destruct
    const { noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, options, openOnFocus = true, label, inputProps, name, value, idValue, onChange, onValueChange, ...rest } = props;
    const [open, setOpen] = react_1.default.useState(false);
    const [localOptions, setOptions] = react_1.default.useState([]);
    const [localValue, setValue] = react_1.default.useState(null);
    const [loading, setLoading] = react_1.default.useState(false);
    react_1.default.useEffect(() => {
        if (value === undefined)
            return;
        setValue(value);
    }, [value]);
    react_1.default.useEffect(() => {
        if (idValue == null)
            return;
        const option = localOptions.find((option) => option.id === idValue);
        if (option) {
            setValue(option);
            if (onValueChange)
                onValueChange(option);
        }
        else
            setValue(null);
    }, [localOptions, idValue]);
    react_1.default.useEffect(() => {
        if (typeof options === "function") {
            setLoading(true);
            options().then((result) => {
                setLoading(false);
                if (result != null)
                    setOptions(result);
            });
        }
        else {
            setOptions(options);
        }
    }, [options]);
    return ((0, jsx_runtime_1.jsx)(Autocomplete_1.default, { id: name, value: localValue == null ? "" : localValue, open: open, freeSolo: true, clearOnBlur: false, onOpen: () => {
            setOpen(true);
        }, onClose: () => {
            setOpen(false);
        }, options: localOptions, loading: loading, openOnFocus: openOnFocus, renderInput: (params) => ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { ...inputProps, ...params, label: label, name: name, onBlur: (event) => {
                if (onChange) {
                    const value = event.target.value;
                    if (!localValue && localValue != value)
                        onChange(event, value, "blur", undefined);
                }
            } })), getOptionLabel: (item) => typeof item === "object" ? shared_1.DataTypes.getListItemLabel(item) : item, isOptionEqualToValue: (option, value) => option.id === value.id, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, onChange: (event, value, reason, details) => {
            setValue(value);
            if (onChange)
                onChange(event, value, reason, details);
            if (onValueChange) {
                if (typeof value === "object")
                    onValueChange(value == null ? null : value);
            }
        }, ...rest }));
}