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

Semantic UI form renderer based on dynamic form generation

import * as React from 'react';
import { css, pointer, tryInterpolate, getValue, DynamicControl, sourceValue } from '../common';
import { observer } from 'mobx-react';
import { Context } from '../context';
import { EditorContext } from '../editor/editor_context';
const formText = css `
  margin-top: 20px;
  label: formText;
`;
export const TextComponent = props => {
    const context = React.useContext(EditorContext);
    const text = getValue(props, context, 'value');
    const inline = getValue(props, context, 'inline');
    let parsedText = '';
    try {
        parsedText = tryInterpolate(text, props.owner);
    }
    catch (ex) {
        parsedText = '<b style="color: red">Error: </b>' + ex.message;
    }
    return (React.createElement(DynamicControl, Object.assign({}, props, { styleName: inline ? formText : '', dangerouslySetInnerHTML: { __html: parsedText } })));
};
export const TextView = {
    Component: TextComponent,
    toString: f => f.props.text
};
const imageProps = ['alt', 'src'];
export const Image = props => {
    const context = React.useContext(Context);
    return (React.createElement(DynamicControl, Object.assign({}, props, { controlProps: imageProps, control: "img", style: {
            width: getValue(props, context, 'imageWidth'),
            height: getValue(props, context, 'imageHeight')
        } })));
};
Image.displayName = 'Image';
export const ImageView = {
    Component: Image,
    toString: formElement => formElement.props.url
};
export const Link = props => {
    const { owner, formElement: { props: { text, url } } } = props;
    return (React.createElement(DynamicControl, Object.assign({}, props, { control: "a", href: tryInterpolate(url, owner) }), tryInterpolate(text, owner) || '[Link]'));
};
export const LinkView = {
    Component: Link,
    toString: (owner, { formElement }) => {
        return `[${formElement.props.url}] ${tryInterpolate(formElement.props.url, owner)}`;
    }
};
export const LinkSelectorComponent = props => {
    const { formElement, owner } = props;
    const { text, target } = formElement.props;
    const context = React.useContext(Context);
    const onClick = React.useCallback(() => owner.setValue(sourceValue(target), getValue(props, context, 'source')), [context, owner, props, target]);
    return (React.createElement(DynamicControl, Object.assign({}, props, { control: "a", styleName: pointer, onClick: onClick }), tryInterpolate(text, owner)));
};
export const LinkSelectorView = {
    Component: observer(LinkSelectorComponent),
    toString: (owner, props, context) => {
        return tryInterpolate(getValue(props, context), owner);
    }
};
//# sourceMappingURL=text_view.js.map