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

Semantic UI form renderer based on dynamic form generation

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