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

Semantic UI form renderer based on dynamic form generation

import * as React from 'react';
import { Link, TextView, ImageView, LinkSelectorView } from './text_view';
import { observer } from 'mobx-react';
import { propGroup, prop, boundProp } from '../editor/editor_common';
import { getValue } from '../helpers';
import { Context } from '../context';
import { DynamicComponent } from '../wrapper';
const TextEditorComponent = observer(props => {
    const context = React.useContext(Context);
    if (!getValue(props, context)) {
        return React.createElement(DynamicComponent, Object.assign({}, props), "[Text]");
    }
    return React.createElement(TextView.Component, Object.assign({}, props));
});
export const TextEditor = {
    Component: observer(TextEditorComponent),
    title: 'Text',
    control: 'Text',
    icon: 'font',
    props: propGroup('Text', {
        value: boundProp({
            props: { label: '', display: 'padded' },
            control: 'Textarea'
        })
    })
};
const ImageEditorComponent = observer((props) => {
    let context = React.useContext(Context);
    let src = getValue(props, context, 'src');
    if (!src) {
        return React.createElement(DynamicComponent, Object.assign({}, props), "[Image]");
    }
    return React.createElement(ImageView.Component, Object.assign({}, props));
});
ImageEditorComponent.displayName = 'ImageEditor';
export const ImageEditor = {
    Component: observer(ImageEditorComponent),
    title: 'Image',
    control: 'Image',
    icon: 'image outline',
    props: propGroup('Image', {
        alt: boundProp({
            props: { label: 'Alternative Text' }
        }),
        src: boundProp(),
        imageWidth: boundProp(),
        imageHeight: boundProp()
    })
};
export const LinkEditor = {
    Component: observer(Link),
    title: 'Link',
    control: 'Link',
    icon: 'anchor',
    props: 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' }
        }
    })
};
export const LinkSelectorEditor = {
    Component: LinkSelectorView.Component,
    title: 'Selector',
    control: 'LinkSelector',
    icon: 'anchor',
    props: {
        ...propGroup('Selector', {
            text: prop({ control: 'Textarea' }),
            source: 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: boundProp({
                documentation: 'Dataset path to store the value'
            })
        })
    }
};
//# sourceMappingURL=text_editor.js.map