@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
89 lines • 2.83 kB
JavaScript
import React from 'react';
import { MenuItem, MenuView } from './menu_view';
import { observer } from 'mobx-react';
import { propGroup, prop, handlerProp } from '../editor/editor_common';
import { colors } from './enums';
import { DropComponentEditor } from '../editor/droppable_editor';
export const MenuEditorComponent = props => (React.createElement(DropComponentEditor, Object.assign({}, props, { Component: observer(MenuView), layout: props.formElement.props.vertical ? 'column' : 'row' })));
export const MenuEditor = {
Component: observer(MenuEditorComponent),
title: 'Menu',
control: 'Menu',
icon: 'window maximize outline',
group: 'Form',
props: {
...propGroup('Menu', {
attached: prop({
control: 'Select',
label: 'Attached',
type: 'string',
$enum: [
{ text: 'None', value: '' },
{ text: 'top', value: 'Top' },
{ text: 'bottom', value: 'Bottom' }
]
}),
inverted: prop({
control: 'Checkbox',
label: 'Inverted',
type: 'boolean'
}),
subMenu: prop({
control: 'Checkbox',
label: 'Sub Menu',
type: 'boolean'
}),
tabular: prop({
control: 'Checkbox',
label: 'Tabular',
type: 'boolean'
}),
color: prop({
control: 'Select',
label: 'Color',
type: 'string',
$enum: colors
}),
position: prop({
control: 'Select',
label: 'Position',
type: 'string',
props: {
options: [{ text: 'Left', value: 'left' }, { text: 'Right', value: 'right' }]
}
}),
final: prop({
type: 'boolean'
})
})
},
childProps: propGroup('Menu', {
name: prop({
label: 'Name',
type: 'string'
}),
customItem: prop({
label: 'Custom Item',
type: 'boolean',
control: 'Checkbox',
documentation: 'Enable, if contained item defines its own menu item structure, such as Dropdown'
})
})
};
export const MenuItemEditor = {
Component: MenuItem,
title: 'Menu Item',
control: 'MenuItem',
icon: 'window maximize outline',
group: 'Form',
props: {
...propGroup('Menu', {
content: prop({}),
icon: prop({})
}),
...propGroup('Handlers', {
onClick: handlerProp({})
})
}
};
//# sourceMappingURL=menu_editor.js.map