@tomino/dynamic-form-semantic-ui/dist/cjs/semantic/dropdown_view.js

Semantic UI form renderer based on dynamic form generation

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const semantic_ui_react_1 = require("semantic-ui-react");
const mobx_react_1 = require("mobx-react");
const helpers_1 = require("../helpers");
const wrapper_1 = require("../wrapper");
const controlProps = [
    'basic',
    'button',
    'className',
    'clearable',
    'closeOnBlur',
    'closeOnChange',
    'compact',
    'deburr',
    'defaultOpen',
    'direction',
    'floating',
    'fluid',
    'header',
    'icon',
    'item',
    'labeled',
    'lazyLoad',
    'loading',
    'minCharacters',
    'noResultsMessage',
    'onAddItem',
    'onBlur',
    'onChange',
    'onClose',
    'onClick',
    'onFocus',
    'onLabelClick',
    'onMouseDown',
    'onOpen',
    'onSearchChange',
    'open',
    'options',
    'openOnFocus',
    'placeholder',
    'pointing',
    'scrolling',
    'search',
    'searchQuery',
    'selectOnBlur',
    'selectOnNavigation',
    'selection',
    'simple',
    'text',
    'upward',
    'wrapSelection',
    'value'
];
exports.DropdownView = mobx_react_1.observer((props) => {
    const { handleChange, error, formElement, owner, context, value } = helpers_1.processControl(props);
    const [filterSource, filterColumn, schemaSource, options, asyncOptionsHandler] = helpers_1.getValues(props, 'filterSource', 'filterColumn', 'schemaSource', 'options', 'asyncOptions');
    const [loading, setLoading] = React.useState(false);
    const [asyncOptions, setOptions] = React.useState([]);
    let currentOptions = React.useMemo(() => {
        return schemaSource
            ? owner.getSchema(schemaSource).$enum
            : Array.isArray(options) && options.length > asyncOptions.length
                ? options
                : asyncOptions;
    }, [asyncOptions, options, owner, schemaSource]);
    React.useEffect(() => {
        async function load() {
            if (asyncOptionsHandler) {
                setLoading(true);
                const options = helpers_1.simpleHandle(props, asyncOptionsHandler, context);
                const opts = await options;
                setOptions(opts);
                setLoading(false);
            }
        }
        load();
    }, [asyncOptionsHandler, context, options, owner, props]);
    const filter = filterSource ? owner.getValue(filterSource) : null;
    const filteredOptions = filterSource
        ? currentOptions.filter((v) => v[filterColumn] === filter)
        : currentOptions;
    if (!formElement.elements || formElement.elements.length === 0) {
        return (React.createElement(wrapper_1.DynamicComponent, Object.assign({}, props, { control: semantic_ui_react_1.Dropdown, controlProps: controlProps, error: !!error, options: filteredOptions, loading: loading, showError: true, onChange: handleChange, value: value || '' })));
    }
    return (React.createElement(wrapper_1.DynamicComponent, Object.assign({}, props, { control: semantic_ui_react_1.Dropdown, controlProps: controlProps }),
        React.createElement(semantic_ui_react_1.Dropdown.Menu, null, formElement.elements &&
            formElement.elements.map((m, i) => (React.createElement(semantic_ui_react_1.Dropdown.Item, { key: i, "data-name": m.props.name, "data-value": m.props.value }, props.catalogue.createComponent(props, m, context)))))));
});
//# sourceMappingURL=dropdown_view.js.map