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

Semantic UI form renderer based on dynamic form generation

import React from 'react';
import { observer } from 'mobx-react';
import { propGroup, boundProp, handlerProp, tableProp, dataProp, prop } from '../editor/editor_common';
import { DropdownView } from './dropdown_view';
import { DynamicComponent } from '../wrapper';
import { StackEditor } from '../layouts/stack_editor';
import { Segment } from 'semantic-ui-react';
import { SingleDropCell } from '../editor/layouts_common_editor';
const templates = [
    { text: 'Component View', value: 'component' },
    { text: 'Items', value: 'items' }
];
const DropdownEditorComponent = (props) => {
    const { formElement } = props;
    const template = formElement.props.template;
    const stackedFormElement = React.useMemo(() => ({
        ...formElement,
        props: {
            gap: '12px',
            layout: 'column'
        }
    }), [formElement]);
    if (template == null || template === 'component') {
        return React.createElement(DropdownView, Object.assign({}, props));
    }
    return (React.createElement(DynamicComponent, Object.assign({}, props),
        React.createElement(Segment, null,
            React.createElement(StackEditor.Component, Object.assign({}, props, { formElement: stackedFormElement })),
            React.createElement(SingleDropCell, Object.assign({}, props)))));
};
export const DropdownEditor = {
    Component: observer(DropdownEditorComponent),
    title: 'Dropdown',
    control: 'Dropdown',
    icon: 'caret down',
    group: 'Form',
    props: {
        options: tableProp({ bound: true }, 'Options'),
        ...propGroup('Sources', {
            asyncOptions: handlerProp(),
            value: boundProp(),
            schemaSource: dataProp({
                documentation: 'Dataset path containing the enumeration of list values'
            }),
            filterSource: dataProp({
                documentation: 'Dataset path used to filter current values. For example, we can have a dataset path "country", store a code of currently selected country.'
            }),
            filterColumn: prop({
                documentation: 'Enumerator column used to filter current values. For example, we can have an enumerator with columns "value, text, countryCode". As a result we can choose to use the "countryCode" to compare with filter source.'
            })
        }),
        ...propGroup('Dropdown', {
            additionLabel: boundProp(),
            basic: boundProp({ type: 'boolean' }),
            button: boundProp({ type: 'boolean' }),
            className: boundProp({ type: 'boolean' }),
            clearable: boundProp({ type: 'boolean' }),
            closeOnBlur: boundProp({ type: 'boolean' }),
            closeOnChange: boundProp({ type: 'boolean' }),
            compact: boundProp({ type: 'boolean' }),
            deburr: boundProp({ type: 'boolean' }),
            defaultOpen: boundProp({ type: 'boolean' }),
            direction: boundProp({
                control: 'Select',
                props: { options: [{ text: 'left', value: 'left' }, { text: 'right', value: 'right' }] }
            }),
            error: boundProp({ type: 'boolean' }),
            floating: boundProp({ type: 'boolean' }),
            fluid: boundProp({ type: 'boolean' }),
            header: boundProp({ type: 'boolean' }),
            icon: boundProp({ type: 'boolean' }),
            item: boundProp({ type: 'boolean' }),
            labeled: boundProp({ type: 'boolean' }),
            lazyLoad: boundProp({ type: 'boolean' }),
            loading: boundProp({ type: 'boolean' }),
            minCharacters: boundProp({ type: 'number' }),
            noResultsMessage: boundProp({ type: 'boolean' }),
            open: boundProp({ type: 'boolean' }),
            openOnFocus: boundProp({ type: 'boolean' }),
            placeholder: boundProp({ type: 'boolean' }),
            pointing: boundProp({ type: 'boolean' }),
            scrolling: boundProp({ type: 'boolean' }),
            search: boundProp({ type: 'boolean' }),
            searchQuery: boundProp({ type: 'boolean' }),
            selectOnBlur: boundProp({ type: 'boolean' }),
            selectOnNavigation: boundProp({ type: 'boolean' }),
            selection: boundProp({ type: 'boolean' }),
            simple: boundProp({ type: 'boolean' }),
            text: boundProp(),
            upward: boundProp({ type: 'boolean' }),
            wrapSelection: boundProp({ type: 'boolean' })
        }),
        ...propGroup('Handlers', {
            onAddItem: handlerProp(),
            onBlur: handlerProp({ type: 'boolean' }),
            onChange: handlerProp({ type: 'boolean' }),
            onClose: handlerProp({ type: 'boolean' }),
            onClick: handlerProp({ type: 'boolean' }),
            onFocus: handlerProp({ type: 'boolean' }),
            onLabelClick: handlerProp({ type: 'boolean' }),
            onMouseDown: handlerProp({ type: 'boolean' }),
            onOpen: handlerProp({ type: 'boolean' }),
            onSearchChange: handlerProp({ type: 'boolean' }),
            onSearch: handlerProp({ type: 'boolean' })
        }),
        ...propGroup('Editor', {
            template: prop({
                control: 'Select',
                props: {
                    default: 'component',
                    options: templates
                }
            })
        })
    }
};
//# sourceMappingURL=dropdown_editor.js.map