@tomino/dynamic-form-semantic-ui/dist/cjs/semantic/menu_editor.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_1 = tslib_1.__importDefault(require("react"));
const menu_view_1 = require("./menu_view");
const mobx_react_1 = require("mobx-react");
const editor_common_1 = require("../editor/editor_common");
const enums_1 = require("./enums");
const droppable_editor_1 = require("../editor/droppable_editor");
exports.MenuEditorComponent = props => (react_1.default.createElement(droppable_editor_1.DropComponentEditor, Object.assign({}, props, { Component: mobx_react_1.observer(menu_view_1.MenuView), layout: props.formElement.props.vertical ? 'column' : 'row' })));
exports.MenuEditor = {
    Component: mobx_react_1.observer(exports.MenuEditorComponent),
    title: 'Menu',
    control: 'Menu',
    icon: 'window maximize outline',
    group: 'Form',
    props: {
        ...editor_common_1.propGroup('Menu', {
            attached: editor_common_1.prop({
                control: 'Select',
                label: 'Attached',
                type: 'string',
                $enum: [
                    { text: 'None', value: '' },
                    { text: 'top', value: 'Top' },
                    { text: 'bottom', value: 'Bottom' }
                ]
            }),
            inverted: editor_common_1.prop({
                control: 'Checkbox',
                label: 'Inverted',
                type: 'boolean'
            }),
            subMenu: editor_common_1.prop({
                control: 'Checkbox',
                label: 'Sub Menu',
                type: 'boolean'
            }),
            tabular: editor_common_1.prop({
                control: 'Checkbox',
                label: 'Tabular',
                type: 'boolean'
            }),
            color: editor_common_1.prop({
                control: 'Select',
                label: 'Color',
                type: 'string',
                $enum: enums_1.colors
            }),
            position: editor_common_1.prop({
                control: 'Select',
                label: 'Position',
                type: 'string',
                props: {
                    options: [{ text: 'Left', value: 'left' }, { text: 'Right', value: 'right' }]
                }
            }),
            final: editor_common_1.prop({
                type: 'boolean'
            })
        })
    },
    childProps: editor_common_1.propGroup('Menu', {
        name: editor_common_1.prop({
            label: 'Name',
            type: 'string'
        }),
        customItem: editor_common_1.prop({
            label: 'Custom Item',
            type: 'boolean',
            control: 'Checkbox',
            documentation: 'Enable, if contained item defines its own menu item structure, such as Dropdown'
        })
    })
};
exports.MenuItemEditor = {
    Component: menu_view_1.MenuItem,
    title: 'Menu Item',
    control: 'MenuItem',
    icon: 'window maximize outline',
    group: 'Form',
    props: {
        ...editor_common_1.propGroup('Menu', {
            content: editor_common_1.prop({}),
            icon: editor_common_1.prop({})
        }),
        ...editor_common_1.propGroup('Handlers', {
            onClick: editor_common_1.handlerProp({})
        })
    }
};
//# sourceMappingURL=menu_editor.js.map