@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
92 lines • 3.56 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const text_view_1 = require("./text_view");
const mobx_react_1 = require("mobx-react");
const editor_common_1 = require("../editor/editor_common");
const helpers_1 = require("../helpers");
const context_1 = require("../context");
const wrapper_1 = require("../wrapper");
const TextEditorComponent = mobx_react_1.observer(props => {
const context = React.useContext(context_1.Context);
if (!helpers_1.getValue(props, context)) {
return React.createElement(wrapper_1.DynamicComponent, Object.assign({}, props), "[Text]");
}
return React.createElement(text_view_1.TextView.Component, Object.assign({}, props));
});
exports.TextEditor = {
Component: mobx_react_1.observer(TextEditorComponent),
title: 'Text',
control: 'Text',
icon: 'font',
props: editor_common_1.propGroup('Text', {
value: editor_common_1.boundProp({
props: { label: '', display: 'padded' },
control: 'Textarea'
})
})
};
const ImageEditorComponent = mobx_react_1.observer((props) => {
let context = React.useContext(context_1.Context);
let src = helpers_1.getValue(props, context, 'src');
if (!src) {
return React.createElement(wrapper_1.DynamicComponent, Object.assign({}, props), "[Image]");
}
return React.createElement(text_view_1.ImageView.Component, Object.assign({}, props));
});
ImageEditorComponent.displayName = 'ImageEditor';
exports.ImageEditor = {
Component: mobx_react_1.observer(ImageEditorComponent),
title: 'Image',
control: 'Image',
icon: 'image outline',
props: editor_common_1.propGroup('Image', {
alt: editor_common_1.boundProp({
props: { label: 'Alternative Text' }
}),
src: editor_common_1.boundProp(),
imageWidth: editor_common_1.boundProp(),
imageHeight: editor_common_1.boundProp()
})
};
exports.LinkEditor = {
Component: mobx_react_1.observer(text_view_1.Link),
title: 'Link',
control: 'Link',
icon: 'anchor',
props: editor_common_1.propGroup('Link', {
url: {
control: {
props: { label: 'Url' },
documentation: 'You can interpolate values using "${}" notation. For example "This is my ${name}", where <i>name</i> is a value from the dataset.'
},
schema: { type: 'string' }
},
text: {
control: {
props: { label: 'Text' },
documentation: 'You can interpolate values using "${}" notation. For example "This is my ${name}", where <i>name</i> is a value from the dataset.'
},
schema: { type: 'string' }
}
})
};
exports.LinkSelectorEditor = {
Component: text_view_1.LinkSelectorView.Component,
title: 'Selector',
control: 'LinkSelector',
icon: 'anchor',
props: {
...editor_common_1.propGroup('Selector', {
text: editor_common_1.prop({ control: 'Textarea' }),
source: editor_common_1.boundProp({
documentation: 'This value is stored to the target. You do not have to specify this and use "source", where the value from "source" will be stored in the "target"'
}),
target: editor_common_1.boundProp({
documentation: 'Dataset path to store the value'
})
})
}
};
//# sourceMappingURL=text_editor.js.map