@finos/legend-studio
Version:
104 lines • 11 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { DATA_TAB_TYPE, PackageableDataEditorState, } from '../../../../stores/editor-state/element-editor-state/data/DataEditorState.js';
import { CaretDownIcon, clsx, DropdownMenu, LockIcon, MenuContent, MenuContentItem, PlusIcon, } from '@finos/legend-art';
import { prettyCONSTName } from '@finos/legend-shared';
import { StereotypeExplicitReference, Profile, stub_Stereotype, stub_Profile, stub_TaggedValue, stub_Tag, } from '@finos/legend-graph';
import { annotatedElement_addStereotype, annotatedElement_addTaggedValue, annotatedElement_deleteStereotype, annotatedElement_deleteTaggedValue, } from '../../../../stores/graphModifier/DomainGraphModifierHelper.js';
import { useDrop } from 'react-dnd';
import { CORE_DND_TYPE, } from '../../../../stores/shared/DnDUtil.js';
import { TaggedValueEditor } from '../uml-editor/TaggedValueEditor.js';
import { useCallback, useEffect, useRef } from 'react';
import { StereotypeSelector } from '../uml-editor/StereotypeSelector.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 { renderEmbeddedDataEditor } from './EmbeddedDataEditor.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));
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() })] }), _jsx("div", { className: "external-format-data-editor__header__actions", children: _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 EmbeddedDataEditor = observer((props) => {
const { embeddedDataEditorState, isReadOnly } = props;
const embeddedDataState = embeddedDataEditorState.embeddedDataState;
return (_jsx("div", { className: "panel connection-editor", children: renderEmbeddedDataEditor(embeddedDataState, isReadOnly) }));
});
export const DataElementEditor = observer(() => {
const editorStore = useEditorStore();
const editorState = editorStore.getCurrentEditorState(PackageableDataEditorState);
const dataElement = editorState.data;
const isReadOnly = editorState.isReadOnly;
const selectedTab = editorState.selectedTab;
const changeTab = (tab) => () => editorState.setSelectedTab(tab);
const addStereotype = () => {
annotatedElement_addStereotype(dataElement, StereotypeExplicitReference.create(stub_Stereotype(stub_Profile())));
};
const addTaggedValue = () => {
annotatedElement_addTaggedValue(dataElement, stub_TaggedValue(stub_Tag(stub_Profile())));
};
const deleteTaggedValue = (val) => () => annotatedElement_deleteTaggedValue(dataElement, val);
const _deleteStereotype = (val) => () => annotatedElement_deleteStereotype(dataElement, val);
const handleDropTaggedValue = useCallback((item) => {
if (!isReadOnly && item.data.packageableElement instanceof Profile) {
annotatedElement_addTaggedValue(dataElement, stub_TaggedValue(stub_Tag(item.data.packageableElement)));
}
}, [dataElement, isReadOnly]);
const [{ isTaggedValueDragOver }, dropTaggedValueRef] = useDrop(() => ({
accept: [CORE_DND_TYPE.PROJECT_EXPLORER_PROFILE],
drop: (item) => handleDropTaggedValue(item),
collect: (monitor) => ({
isTaggedValueDragOver: monitor.isOver({ shallow: true }),
}),
}), [handleDropTaggedValue]);
const handleDropStereotype = useCallback((item) => {
if (!isReadOnly && item.data.packageableElement instanceof Profile) {
annotatedElement_addStereotype(dataElement, StereotypeExplicitReference.create(stub_Stereotype(item.data.packageableElement)));
}
}, [dataElement, isReadOnly]);
const [{ isStereotypeDragOver }, dropStereotypeRef] = useDrop(() => ({
accept: [CORE_DND_TYPE.PROJECT_EXPLORER_PROFILE],
drop: (item) => handleDropStereotype(item),
collect: (monitor) => ({
isStereotypeDragOver: monitor.isOver({ shallow: true }),
}),
}), [handleDropStereotype]);
return (_jsxs("div", { className: "data-editor", children: [_jsx("div", { className: "data-editor__header", children: _jsxs("div", { className: "data-editor__header__title", children: [isReadOnly && (_jsx("div", { className: "data-editor__header__lock", children: _jsx(LockIcon, {}) })), _jsx("div", { className: "data-editor__header__title__label", children: "Data Element" }), _jsx("div", { className: "data-editor__header__title__content", children: dataElement.name })] }) }), _jsx("div", { className: "uml-element-editor__tabs", children: Object.values(DATA_TAB_TYPE).map((tab) => (_jsx("div", { onClick: changeTab(tab), className: clsx('relational-connection-editor__tab', {
'relational-connection-editor__tab--active': tab === selectedTab,
}), children: prettyCONSTName(tab) }, tab))) }), _jsxs("div", { className: "data-editor__content", children: [selectedTab === DATA_TAB_TYPE.GENERAL && (_jsx(EmbeddedDataEditor, { embeddedDataEditorState: editorState.embeddedDataState, isReadOnly: isReadOnly })), selectedTab === DATA_TAB_TYPE.STEREOTYPES && (_jsxs(_Fragment, { children: [_jsxs("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: "Stereotypes" })] }), _jsx("div", { className: "data-editor__header__actions", children: _jsx("button", { className: "data-editor__header__action", onClick: addStereotype, disabled: isReadOnly, tabIndex: -1, title: 'Add Stereotype', children: _jsx(PlusIcon, {}) }) })] }), _jsx("div", { className: "data-editor__content", children: _jsx("div", { className: "data-editor__content__lists", children: _jsx("div", { ref: dropStereotypeRef, className: clsx('panel__content__lists', {
'panel__content__lists--dnd-over': isStereotypeDragOver && !isReadOnly,
}), children: dataElement.stereotypes.map((stereotype) => (_jsx(StereotypeSelector, { stereotype: stereotype, deleteStereotype: _deleteStereotype(stereotype), isReadOnly: isReadOnly, darkTheme: true }, stereotype.value._UUID))) }) }) })] })), selectedTab === DATA_TAB_TYPE.TAGGED_VALUES && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "data-editor__header", children: [_jsxs("div", { className: "data-editor__header__title", children: [isReadOnly && (_jsx("div", { className: "data-editor__header__lock", children: _jsx(LockIcon, {}) })), _jsx("div", { className: "data-editor__header__title__label", children: "Tagged Values" })] }), _jsx("div", { className: "data-editor__header__actions", children: _jsx("button", { className: "data-editor__header__action", onClick: addTaggedValue, disabled: isReadOnly, tabIndex: -1, title: 'Add Tagged value', children: _jsx(PlusIcon, {}) }) })] }), _jsx("div", { className: "data-editor__content", children: _jsx("div", { className: "data-editor__content__lists", children: _jsx("div", { ref: dropTaggedValueRef, className: clsx('panel__content__lists', {
'panel__content__lists--dnd-over': isTaggedValueDragOver && !isReadOnly,
}), children: dataElement.taggedValues.map((taggedValue) => (_jsx(TaggedValueEditor, { taggedValue: taggedValue, deleteValue: deleteTaggedValue(taggedValue), isReadOnly: isReadOnly, darkTheme: true }, taggedValue._UUID))) }) }) })] }))] })] }));
});
//# sourceMappingURL=DataElementEditor.js.map