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

Easy prototyping admin panel using React and Antd

import React, { useEffect, useState } from "react";
import { Form, Select as SelectAnt } from 'antd';
const Inner = (props) => {
    var _a;
    if (props.item.text) {
        return (React.createElement("div", null,
            React.createElement("span", { style: { marginRight: 4 } }, props.item.title),
            React.createElement("br", null),
            React.createElement("div", { style: { marginTop: -2, fontSize: 12, width: 0, overflow: 'visible' } }, props.item.text)));
    }
    return (React.createElement("span", null, (_a = props.item.title) !== null && _a !== void 0 ? _a : props.item.label));
};
const Select = (props) => {
    var _a, _b, _c, _d, _e;
    let model = props.model;
    const [state, setState] = useState({
        value: undefined,
        object: undefined,
        loading: false,
        disabled: (_a = model._disabled) !== null && _a !== void 0 ? _a : false,
        dataSource: []
    });
    let addProps = {};
    model._onError = () => { };
    model._onComplete = () => onClear();
    model.onHandleClear = () => onClear();
    model.onHandleLoading = (value) => setState(Object.assign(Object.assign({}, state), { loading: value }));
    model.tsxSetDisabled = (value) => setState(Object.assign(Object.assign({}, state), { disabled: value }));
    model.tsxSetValue = (v) => setState(Object.assign(Object.assign({}, state), { value: v, dataSource: state.dataSource }));
    model.tsxClear = () => onClear();
    const onChange = ({ value, object, dataSource }, settings) => {
        var _a, _b, _c;
        let data = [];
        switch (true) {
            case !!(dataSource === null || dataSource === void 0 ? void 0 : dataSource.length):
                data = dataSource;
                break;
            case !!((_a = state.dataSource) === null || _a === void 0 ? void 0 : _a.length):
                data = state.dataSource;
                break;
            case !!((_b = model._fields) === null || _b === void 0 ? void 0 : _b.length):
                data = model._fields;
                break;
            default:
                break;
        }
        model._defaultObject = {
            value: value,
            object: data.find((r) => r.getObject().value === value),
            dataSource: data.map((r) => r._object),
        };
        if (model._formula)
            model._formula.value(model, model._defaultObject);
        if (!(settings === null || settings === void 0 ? void 0 : settings.ignoreOnChange)) {
            (_c = model._onChange) === null || _c === void 0 ? void 0 : _c.call(model, model._defaultObject);
        }
        if (!(settings === null || settings === void 0 ? void 0 : settings.ignoreSetState)) {
            setState(Object.assign(Object.assign({}, state), {
                value: value,
                dataSource: data,
            }));
        }
        /** Debug purposes */
        if (model._useCache && model._key) {
            window.localStorage.setItem(`select:${model._key}`, JSON.stringify(model._defaultObject));
        }
    };
    const onClear = () => onChange({});
    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) => {
        var _a;
        return (_a = model._options) === null || _a === void 0 ? void 0 : _a.call(model, data);
    };
    useEffect(() => {
        if (model._useCache && model._key)
            model.defaultFromCache();
        onStart();
    }, []);
    return (React.createElement(Form.Item, { style: (_b = model._style) !== null && _b !== void 0 ? _b : { marginBottom: 0 } },
        React.createElement(SelectAnt, Object.assign({ placeholder: (_c = model._label) !== null && _c !== void 0 ? _c : undefined, disabled: state.loading || state.disabled, style: { width: (_d = model._width) !== null && _d !== void 0 ? _d : '100%' }, size: (_e = model._sizeString) !== null && _e !== void 0 ? _e : 'large', allowClear: model._clearable, value: state.value, onChange: (value, object) => onChange({ value: value, object: object }), onClear: onClear }, addProps), model._fields.map((r) => {
            var _a;
            let obj = r.getObject();
            if (!props.main.$access((_a = obj._access) !== null && _a !== void 0 ? _a : true))
                return null;
            return (React.createElement(SelectAnt.Option, { key: obj.key, value: obj.value },
                React.createElement(Inner, { item: obj })));
        })),
        model._required && model._data === undefined && React.createElement("div", { style: { color: '#ff4d4f', fontSize: 14, fontWeight: 300, paddingTop: 6, paddingBottom: 12 } }, "Required field")
            || React.createElement("div", { style: { paddingTop: 12 } })));
};
export default Select;
//# sourceMappingURL=Select.js.map