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

Semantic UI form renderer based on dynamic form generation

import * as React from 'react';
import { Dropdown } from 'semantic-ui-react';
import { observer } from 'mobx-react';
import { processControl, getValues, simpleHandle } from '../helpers';
import { DynamicComponent } from '../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'
];
export const DropdownView = observer((props) => {
    const { handleChange, error, formElement, owner, context, value } = processControl(props);
    const [filterSource, filterColumn, schemaSource, options, asyncOptionsHandler] = 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 = 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(DynamicComponent, Object.assign({}, props, { control: Dropdown, controlProps: controlProps, error: !!error, options: filteredOptions, loading: loading, showError: true, onChange: handleChange, value: value || '' })));
    }
    return (React.createElement(DynamicComponent, Object.assign({}, props, { control: Dropdown, controlProps: controlProps }),
        React.createElement(Dropdown.Menu, null, formElement.elements &&
            formElement.elements.map((m, i) => (React.createElement(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