@finos/legend-studio
Version:
89 lines • 8.77 kB
JavaScript
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 { useEditorStore } from '../../EditorStoreProvider.js';
import { CaretDownIcon, clsx, CustomSelectorInput, DropdownMenu, LockIcon, LongArrowRightIcon, MenuContent, MenuContentItem, PURE_DataIcon, WrenchIcon, } from '@finos/legend-art';
import { useEffect, useRef } from 'react';
import { UnsupportedEditorPanel } from '../UnsupportedElementEditor.js';
import { externalFormatData_setContentType, externalFormatData_setData, } from '../../../../stores/graphModifier/DSLData_GraphModifierHelper.js';
import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
import { getEditorLanguageFromFormat } from '../../../../stores/editor-state/FileGenerationViewerState.js';
import { DataElementReferenceState, ExternalFormatDataState, RelationalCSVDataState, } from '../../../../stores/editor-state/element-editor-state/data/EmbeddedDataState.js';
import { buildElementOption } from '@finos/legend-application';
import { RelationalCSVDataEditor } from './RelationalCSVDataEditor.js';
export const ExternalFormatDataEditor = observer((props) => {
const { externalFormatDataState, isReadOnly } = props;
const editorStore = useEditorStore();
const typeNameRef = useRef(null);
const changeData = (val) => externalFormatData_setData(externalFormatDataState.embeddedData, val);
useEffect(() => {
if (!isReadOnly) {
typeNameRef.current?.focus();
}
}, [isReadOnly]);
const contentTypeOptions = editorStore.graphState.graphGenerationState.externalFormatState
.formatContentTypes;
const onContentTypeChange = (val) => externalFormatData_setContentType(externalFormatDataState.embeddedData, val);
const language = getEditorLanguageFromFormat(editorStore.graphState.graphGenerationState.externalFormatState.getFormatTypeForContentType(externalFormatDataState.embeddedData.contentType));
const format = () => externalFormatDataState.format();
return (_jsxs("div", { className: "panel external-format-data-editor", children: [_jsxs("div", { className: "external-format-data-editor__header", children: [_jsxs("div", { className: "external-format-data-editor__header__title", children: [isReadOnly && (_jsx("div", { className: "external-format-editor-editor__header__lock", children: _jsx(LockIcon, {}) })), _jsx("div", { className: "external-format-data-editor__header__title__label", children: externalFormatDataState.label() })] }), _jsxs("div", { className: "external-format-data-editor__header__actions", children: [_jsx("button", { className: "panel__header__action", disabled: !externalFormatDataState.supportsFormatting || isReadOnly, tabIndex: -1, onClick: format, title: 'Format External Format', children: _jsx(WrenchIcon, {}) }), _jsx(DropdownMenu, { disabled: isReadOnly, content: _jsx(MenuContent, { className: "external-format-data-editor__dropdown", children: contentTypeOptions.map((contentType) => (_jsx(MenuContentItem, { className: "external-format-data-editor__option", onClick: () => onContentTypeChange(contentType), children: contentType }, contentType))) }), menuProps: {
anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
transformOrigin: { vertical: 'top', horizontal: 'right' },
}, children: _jsxs("div", { className: "external-format-data-editor__type", children: [_jsx("div", { className: "external-format-data-editor__type__label", children: externalFormatDataState.embeddedData.contentType }), _jsx("div", { className: "external-format-data-editor__type__icon", children: _jsx(CaretDownIcon, {}) })] }) })] })] }), _jsx("div", { className: clsx('external-format-data-editor__content'), children: _jsx("div", { className: "external-format-data-editor__content__input", children: _jsx(StudioTextInputEditor, { language: language, inputValue: externalFormatDataState.embeddedData.data, updateInput: changeData, hideGutter: true }) }) })] }));
});
export const DataElementReferenceDataEditor = observer((props) => {
const { dataElementReferenceState, isReadOnly } = props;
const dataElement = dataElementReferenceState.embeddedData.dataElement.value;
const editorStore = dataElementReferenceState.editorStore;
const options = editorStore.dataOptions;
const selectedOption = buildElementOption(dataElement);
const onDataElementChange = (val) => {
if (val.value !== selectedOption.value && val.value) {
dataElementReferenceState.setDataElement(val.value);
}
};
const visitData = () => editorStore.openElement(dataElement);
return (_jsxs("div", { className: "panel data-element-reference-editor", children: [_jsx("div", { className: "data-element-reference-editor__header", children: _jsxs("div", { className: "data-element-reference-editor__header__title", children: [isReadOnly && (_jsx("div", { className: "external-format-editor-editor__header__lock", children: _jsx(LockIcon, {}) })), _jsx("div", { className: "data-element-reference-editor__header__title__label", children: dataElementReferenceState.label() })] }) }), _jsxs("div", { className: clsx('data-element-reference-editor__content'), children: [_jsxs("div", { className: "data-element-reference-editor__value", children: [_jsx("div", { className: "btn--sm data-element-reference-editor__value__label", children: _jsx(PURE_DataIcon, {}) }), _jsx(CustomSelectorInput, { className: "panel__content__form__section__dropdown data-element-reference-editor__value__dropdown", disabled: isReadOnly, options: options, onChange: onDataElementChange, value: selectedOption, darkMode: true }), _jsx("button", { className: "btn--dark btn--sm data-element-reference-editor__value-btn", onClick: visitData, tabIndex: -1, title: 'See data element', children: _jsx(LongArrowRightIcon, {}) })] }), _jsx("div", { className: "data-element-reference-editor__content__value", children: renderEmbeddedDataEditor(dataElementReferenceState.embeddedDataValueState, isReadOnly) })] })] }));
});
export const EmbeddedDataEditor = observer((props) => {
const { embeddedDataEditorState, isReadOnly } = props;
return (_jsx("div", { className: "panel connection-editor", children: renderEmbeddedDataEditor(embeddedDataEditorState.embeddedDataState, isReadOnly) }));
});
export function renderEmbeddedDataEditor(embeddedDataState, isReadOnly) {
if (embeddedDataState instanceof ExternalFormatDataState) {
return (_jsx(ExternalFormatDataEditor, { externalFormatDataState: embeddedDataState, isReadOnly: isReadOnly }));
}
else if (embeddedDataState instanceof RelationalCSVDataState) {
return (_jsx(RelationalCSVDataEditor, { dataState: embeddedDataState, isReadOnly: isReadOnly }));
}
else if (embeddedDataState instanceof DataElementReferenceState) {
return (_jsx(DataElementReferenceDataEditor, { dataElementReferenceState: embeddedDataState, isReadOnly: isReadOnly }));
}
else {
const extraEmbeddedDataEditorRenderers = embeddedDataState.editorStore.pluginManager
.getApplicationPlugins()
.flatMap((plugin) => plugin.getExtraEmbeddedDataEditorRenderers?.() ?? []);
for (const editorRenderer of extraEmbeddedDataEditorRenderers) {
const editor = editorRenderer(embeddedDataState, isReadOnly);
if (editor) {
return editor;
}
}
return (_jsxs("div", { className: "panel connection-editor", children: [_jsx("div", { className: "data-editor__header", children: _jsxs("div", { className: "data-editor__header__title", children: [isReadOnly && (_jsx("div", { className: "element-editor__header__lock", children: _jsx(LockIcon, {}) })), _jsx("div", { className: "data-editor__header__title__label", children: embeddedDataState.label() })] }) }), _jsx("div", { className: "panel__content", children: _jsx(UnsupportedEditorPanel, { text: "Can't display this embedded data in form-mode", isReadOnly: isReadOnly }) })] }));
}
}
//# sourceMappingURL=EmbeddedDataEditor.js.map