react-antd-admin-panel/dist/components/builder/Autocomplete.js

Easy prototyping admin panel using React and Antd

import React, { useEffect, useState } from "react";
import { AutoComplete as AutocompleteAnt, List, Typography } from "antd";
import { Form } from 'antd';
const Autocomplete = (props) => {
    var _a;
    let model = props.model;
    let access = props.main.$access(model._access);
    const [state, setState] = useState({ value: undefined, dataSource: [] });
    const [loading, setLoading] = useState(false);
    const [disabled, setDisabled] = useState(false);
    model._onError = () => { };
    model._onComplete = () => onChange({});
    model.onHandleClear = () => { };
    model.onHandleLoading = (value) => setLoading(value);
    model.tsxSetDisabled = (value) => setDisabled(value);
    model.tsxClear = () => onClear();
    const render = (item) => {
        if (!item)
            return ({
                id: undefined, key: undefined, value: undefined, title: undefined, object: undefined, label: (React.createElement("span", null)),
            });
        let obj = item.getObject();
        return {
            id: obj.id,
            key: obj.key,
            value: obj.title,
            title: obj.title,
            object: item._object,
            label: (React.createElement(List.Item, { style: { paddingLeft: 8, paddingTop: 4, paddingBottom: 0 } },
                React.createElement(List.Item.Meta, { title: React.createElement(Typography, null, obj._render ? obj._render(model) : obj.title), description: React.createElement(Typography.Paragraph, { style: { marginBottom: 4 } }, obj.text) }))),
        };
    };
    const onChange = ({ value, object, dataSource }, settings) => {
        var _a, _b, _c;
        model._defaultObject = { value: value, object: object, dataSource: dataSource !== null && dataSource !== void 0 ? dataSource : model._get._data };
        if (model._formula)
            model._formula.value(model, model._defaultObject);
        if (!(settings === null || settings === void 0 ? void 0 : settings.ignoreOnChange)) {
            (_a = model._onChange) === null || _a === void 0 ? void 0 : _a.call(model, model._defaultObject);
        }
        if (!(settings === null || settings === void 0 ? void 0 : settings.ignoreSetState)) {
            setState({
                value: value,
                dataSource: (_c = (_b = model._defaultObject.dataSource) === null || _b === void 0 ? void 0 : _b.map((r) => render(r))) !== null && _c !== void 0 ? _c : []
            });
        }
        /** Debug purposes */
        if (model._useCache && model._key) {
            window.localStorage.setItem(`autocomplete:${model._key}`, JSON.stringify(model._defaultObject));
        }
    };
    const onSearch = (value) => {
        if (value.length > 2) {
            model.refresh(value);
        }
    };
    const onUpdate = () => {
        var _a, _b;
        setState({
            value: state.value,
            dataSource: (_b = (_a = model._get._data) === null || _a === void 0 ? void 0 : _a.map((r) => render(r))) !== null && _b !== void 0 ? _b : []
        });
    };
    const onClear = () => {
        setState({
            value: undefined,
            dataSource: []
        });
    };
    const onStart = () => {
        if (model._defaultObject) {
            let data = model._defaultObject;
            if (model._formula)
                model._formula.value(model, model._defaultObject);
            if (data.dataSource)
                data.dataSource = dataSourceAlter(data.dataSource);
            setTimeout(() => onChange(data, {
                ignoreOnChange: model._ignoreOnChange,
                ignoreSetState: model._ignoreSetState,
            }), 0);
        }
        else {
            onClear();
        }
    };
    const dataSourceAlter = (data) => {
        // TODO: If condition try to remove this, this is called with data as undefined
        return model._get._alter(data === null || data === void 0 ? void 0 : data.map((t) => t === null || t === void 0 ? void 0 : t._object));
    };
    useEffect(() => {
        if (model._useCache && model._key)
            model.defaultFromCache();
        onStart();
    }, []);
    return (React.createElement(Form.Item, { name: props.model._key, style: (_a = model._styleForm) !== null && _a !== void 0 ? _a : {} },
        React.createElement(AutocompleteAnt, { style: { width: '100%' }, searchValue: state.value, options: state.dataSource, disabled: loading || disabled || !access.access, allowClear: true, onSearch: onSearch, onSelect: (value, object) => onChange({ value: value, object: object }), onClear: onClear })));
};
export default Autocomplete;
//# sourceMappingURL=Autocomplete.js.map