@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
120 lines • 6.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const mobx_react_1 = require("mobx-react");
const editor_common_1 = require("../editor/editor_common");
const dropdown_view_1 = require("./dropdown_view");
const wrapper_1 = require("../wrapper");
const stack_editor_1 = require("../layouts/stack_editor");
const semantic_ui_react_1 = require("semantic-ui-react");
const layouts_common_editor_1 = require("../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_1.default.useMemo(() => ({
...formElement,
props: {
gap: '12px',
layout: 'column'
}
}), [formElement]);
if (template == null || template === 'component') {
return react_1.default.createElement(dropdown_view_1.DropdownView, Object.assign({}, props));
}
return (react_1.default.createElement(wrapper_1.DynamicComponent, Object.assign({}, props),
react_1.default.createElement(semantic_ui_react_1.Segment, null,
react_1.default.createElement(stack_editor_1.StackEditor.Component, Object.assign({}, props, { formElement: stackedFormElement })),
react_1.default.createElement(layouts_common_editor_1.SingleDropCell, Object.assign({}, props)))));
};
exports.DropdownEditor = {
Component: mobx_react_1.observer(DropdownEditorComponent),
title: 'Dropdown',
control: 'Dropdown',
icon: 'caret down',
group: 'Form',
props: {
options: editor_common_1.tableProp({ bound: true }, 'Options'),
...editor_common_1.propGroup('Sources', {
asyncOptions: editor_common_1.handlerProp(),
value: editor_common_1.boundProp(),
schemaSource: editor_common_1.dataProp({
documentation: 'Dataset path containing the enumeration of list values'
}),
filterSource: editor_common_1.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: editor_common_1.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.'
})
}),
...editor_common_1.propGroup('Dropdown', {
additionLabel: editor_common_1.boundProp(),
basic: editor_common_1.boundProp({ type: 'boolean' }),
button: editor_common_1.boundProp({ type: 'boolean' }),
className: editor_common_1.boundProp({ type: 'boolean' }),
clearable: editor_common_1.boundProp({ type: 'boolean' }),
closeOnBlur: editor_common_1.boundProp({ type: 'boolean' }),
closeOnChange: editor_common_1.boundProp({ type: 'boolean' }),
compact: editor_common_1.boundProp({ type: 'boolean' }),
deburr: editor_common_1.boundProp({ type: 'boolean' }),
defaultOpen: editor_common_1.boundProp({ type: 'boolean' }),
direction: editor_common_1.boundProp({
control: 'Select',
props: { options: [{ text: 'left', value: 'left' }, { text: 'right', value: 'right' }] }
}),
error: editor_common_1.boundProp({ type: 'boolean' }),
floating: editor_common_1.boundProp({ type: 'boolean' }),
fluid: editor_common_1.boundProp({ type: 'boolean' }),
header: editor_common_1.boundProp({ type: 'boolean' }),
icon: editor_common_1.boundProp({ type: 'boolean' }),
item: editor_common_1.boundProp({ type: 'boolean' }),
labeled: editor_common_1.boundProp({ type: 'boolean' }),
lazyLoad: editor_common_1.boundProp({ type: 'boolean' }),
loading: editor_common_1.boundProp({ type: 'boolean' }),
minCharacters: editor_common_1.boundProp({ type: 'number' }),
noResultsMessage: editor_common_1.boundProp({ type: 'boolean' }),
open: editor_common_1.boundProp({ type: 'boolean' }),
openOnFocus: editor_common_1.boundProp({ type: 'boolean' }),
placeholder: editor_common_1.boundProp({ type: 'boolean' }),
pointing: editor_common_1.boundProp({ type: 'boolean' }),
scrolling: editor_common_1.boundProp({ type: 'boolean' }),
search: editor_common_1.boundProp({ type: 'boolean' }),
searchQuery: editor_common_1.boundProp({ type: 'boolean' }),
selectOnBlur: editor_common_1.boundProp({ type: 'boolean' }),
selectOnNavigation: editor_common_1.boundProp({ type: 'boolean' }),
selection: editor_common_1.boundProp({ type: 'boolean' }),
simple: editor_common_1.boundProp({ type: 'boolean' }),
text: editor_common_1.boundProp(),
upward: editor_common_1.boundProp({ type: 'boolean' }),
wrapSelection: editor_common_1.boundProp({ type: 'boolean' })
}),
...editor_common_1.propGroup('Handlers', {
onAddItem: editor_common_1.handlerProp(),
onBlur: editor_common_1.handlerProp({ type: 'boolean' }),
onChange: editor_common_1.handlerProp({ type: 'boolean' }),
onClose: editor_common_1.handlerProp({ type: 'boolean' }),
onClick: editor_common_1.handlerProp({ type: 'boolean' }),
onFocus: editor_common_1.handlerProp({ type: 'boolean' }),
onLabelClick: editor_common_1.handlerProp({ type: 'boolean' }),
onMouseDown: editor_common_1.handlerProp({ type: 'boolean' }),
onOpen: editor_common_1.handlerProp({ type: 'boolean' }),
onSearchChange: editor_common_1.handlerProp({ type: 'boolean' }),
onSearch: editor_common_1.handlerProp({ type: 'boolean' })
}),
...editor_common_1.propGroup('Editor', {
template: editor_common_1.prop({
control: 'Select',
props: {
default: 'component',
options: templates
}
})
})
}
};
//# sourceMappingURL=dropdown_editor.js.map