@finos/legend-application-studio/lib/components/editor/editor-group/ProtocolValueBuilder.js

Legend Studio application core

import { createElement as _createElement } from "react";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Copyright (c) 2020-present, Goldman Sachs
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { observer } from 'mobx-react-lite';
import { extractAnnotatedElementDocumentation } from '@finos/legend-graph';
import { BlankPanelContent, TreeView, clsx, TimesIcon, } from '@finos/legend-art';
import { isNonNullable, noop, prettyCONSTName } from '@finos/legend-shared';
import { UnsupportedFieldNode, StringFieldNode, OptionalStringFieldNode, } from '../../../stores/editor/editor-state/element-editor-state/ProtocolValueBuilderState.js';
const UnsupportedFieldEditor = observer((props) => {
    const { node } = props;
    const property = node.property;
    const documentation = extractAnnotatedElementDocumentation(property);
    return (_jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: prettyCONSTName(property.name) }), documentation && (_jsx("div", { className: "panel__content__form__section__header__prompt", children: documentation })), _jsx("div", { children: "unsupported" })] }));
});
const StringFieldEditor = observer((props) => {
    const { node } = props;
    const property = node.property;
    const documentation = extractAnnotatedElementDocumentation(property);
    return (_jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: prettyCONSTName(property.name) }), documentation && (_jsx("div", { className: "panel__content__form__section__header__prompt", children: documentation })), _jsx("input", { className: "panel__content__form__section__input", spellCheck: false, value: node.value, onChange: (event) => node.setValue(event.target.value) })] }));
});
const OptionalStringFieldEditor = observer((props) => {
    const { node } = props;
    const property = node.property;
    const documentation = extractAnnotatedElementDocumentation(property);
    return (_jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: prettyCONSTName(property.name) }), documentation && (_jsx("div", { className: "panel__content__form__section__header__prompt", children: documentation })), _jsxs("div", { className: "panel__content__form__section__input__container", children: [_jsx("input", { className: "panel__content__form__section__input", spellCheck: false, value: node.value ?? '', placeholder: node.value === undefined ? '(empty)' : undefined, onChange: (event) => node.setValue(event.target.value) }), _jsx("button", { className: "panel__content__form__section__input__reset-btn", tabIndex: -1, onClick: () => node.setValue(undefined), title: "Reset", children: _jsx(TimesIcon, {}) })] })] }));
});
const ProtocolValueFieldEditor = observer((props) => {
    const { node } = props;
    if (node instanceof UnsupportedFieldNode) {
        return _jsx(UnsupportedFieldEditor, { ...props, node: node });
    }
    else if (node instanceof StringFieldNode) {
        return _jsx(StringFieldEditor, { ...props, node: node });
    }
    else if (node instanceof OptionalStringFieldNode) {
        return _jsx(OptionalStringFieldEditor, { ...props, node: node });
    }
    return null;
});
const ProtocolValueNodeView = observer((props) => {
    const { node, level, getChildNodes, classPrefix } = props;
    const childNodes = getChildNodes(node);
    if (!childNodes.length) {
        return _jsx(ProtocolValueFieldEditor, { ...props });
    }
    return (_jsxs("div", { className: clsx('tree-view__node__block panel__content__form', {
            [`${classPrefix}__tree-view__node__block`]: classPrefix,
        }), children: [_jsx(ProtocolValueFieldEditor, { ...props, level: level + 1 }), node.isOpen &&
                childNodes.map((childNode) => (_createElement(ProtocolValueNodeView, { ...props, key: childNode.id })))] }));
});
export const ProtocolValueBuilder = observer((props) => {
    const { builderState } = props;
    const treeData = builderState.treeData;
    const getChildNodes = (node) => {
        if (!node.childrenIds.length || !treeData) {
            return [];
        }
        return node.childrenIds
            .map((childId) => treeData.nodes.get(childId))
            .filter(isNonNullable);
    };
    if (!treeData) {
        return (
        // TODO: show a JSON editor
        _jsx(BlankPanelContent, { children: `Can't display form editor` }));
    }
    return (_jsx(TreeView, { className: "protocol-value-builder panel__content__form", components: {
            TreeNodeContainer: ProtocolValueFieldEditor,
            TreeNodeView: ProtocolValueNodeView,
        }, treeData: treeData, onNodeSelect: noop(), getChildNodes: getChildNodes, innerProps: {
            builderState,
        } }));
});
//# sourceMappingURL=ProtocolValueBuilder.js.map