@finos/legend-studio
Version:
92 lines • 6.8 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 { useState, useCallback } from 'react';
import { observer } from 'mobx-react-lite';
import { useDrop } from 'react-dnd';
import { CORE_DND_TYPE, } from '../../../../stores/shared/DnDUtil.js';
import { clsx, LockIcon, PlusIcon, TimesIcon } from '@finos/legend-art';
import { StereotypeSelector } from './StereotypeSelector.js';
import { TaggedValueEditor } from './TaggedValueEditor.js';
import { LEGEND_STUDIO_TEST_ID } from '../../../LegendStudioTestID.js';
import { prettyCONSTName } from '@finos/legend-shared';
import { UML_EDITOR_TAB } from '../../../../stores/editor-state/element-editor-state/UMLEditorState.js';
import { Profile, StereotypeExplicitReference, stub_TaggedValue, stub_Tag, stub_Profile, stub_Stereotype, } from '@finos/legend-graph';
import { annotatedElement_deleteTaggedValue, annotatedElement_addTaggedValue, annotatedElement_addStereotype, annotatedElement_deleteStereotype, } from '../../../../stores/graphModifier/DomainGraphModifierHelper.js';
export const PropertyEditor = observer((props) => {
const { property, deselectProperty, isReadOnly } = props;
// Tab
const [selectedTab, setSelectedTab] = useState(UML_EDITOR_TAB.TAGGED_VALUES);
const tabs = [UML_EDITOR_TAB.TAGGED_VALUES, UML_EDITOR_TAB.STEREOTYPES];
const changeTab = (tab) => () => setSelectedTab(tab);
// Tagged value and Stereotype
let addButtonTitle = '';
switch (selectedTab) {
case UML_EDITOR_TAB.TAGGED_VALUES:
addButtonTitle = 'Add tagged value';
break;
case UML_EDITOR_TAB.STEREOTYPES:
addButtonTitle = 'Add stereotype';
break;
default:
break;
}
const addValue = () => {
if (!isReadOnly) {
if (selectedTab === UML_EDITOR_TAB.TAGGED_VALUES) {
annotatedElement_addTaggedValue(property, stub_TaggedValue(stub_Tag(stub_Profile())));
}
else if (selectedTab === UML_EDITOR_TAB.STEREOTYPES) {
annotatedElement_addStereotype(property, StereotypeExplicitReference.create(stub_Stereotype(stub_Profile())));
}
}
};
const _deleteStereotype = (val) => () => annotatedElement_deleteStereotype(property, val);
const _deleteTaggedValue = (val) => () => annotatedElement_deleteTaggedValue(property, val);
// Drag and Drop
const handleDropTaggedValue = useCallback((item) => {
if (!isReadOnly && item.data.packageableElement instanceof Profile) {
annotatedElement_addTaggedValue(property, stub_TaggedValue(stub_Tag(item.data.packageableElement)));
}
}, [isReadOnly, property]);
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(property, StereotypeExplicitReference.create(stub_Stereotype(item.data.packageableElement)));
}
}, [isReadOnly, property]);
const [{ isStereotypeDragOver }, dropStereotypeRef] = useDrop(() => ({
accept: [CORE_DND_TYPE.PROJECT_EXPLORER_PROFILE],
drop: (item) => handleDropStereotype(item),
collect: (monitor) => ({
isStereotypeDragOver: monitor.isOver({ shallow: true }),
}),
}), [handleDropStereotype]);
return (_jsx("div", { className: "uml-element-editor property-editor", children: _jsxs("div", { "data-testid": LEGEND_STUDIO_TEST_ID.PANEL, className: "panel", children: [_jsxs("div", { className: "panel__header", children: [_jsxs("div", { className: "panel__header__title", children: [isReadOnly && (_jsx("div", { className: "uml-element-editor__header__lock", children: _jsx(LockIcon, {}) })), _jsx("div", { className: "panel__header__title__label", children: "property" }), _jsx("div", { className: "panel__header__title__content", children: property.name })] }), _jsx("div", { className: "panel__header__actions", children: _jsx("button", { className: "panel__header__action", onClick: deselectProperty, tabIndex: -1, title: 'Close', children: _jsx(TimesIcon, {}) }) })] }), _jsxs("div", { className: "panel__header uml-element-editor__tabs__header", children: [_jsx("div", { className: "uml-element-editor__tabs", children: tabs.map((tab) => (_jsx("div", { onClick: changeTab(tab), className: clsx('uml-element-editor__tab', {
'uml-element-editor__tab--active': tab === selectedTab,
}), children: prettyCONSTName(tab) }, tab))) }), _jsx("div", { className: "panel__header__actions", children: _jsx("button", { className: "panel__header__action", disabled: isReadOnly, onClick: addValue, tabIndex: -1, title: addButtonTitle, children: _jsx(PlusIcon, {}) }) })] }), _jsxs("div", { className: "panel__content", children: [selectedTab === UML_EDITOR_TAB.TAGGED_VALUES && (_jsx("div", { ref: dropTaggedValueRef, className: clsx('panel__content__lists', {
'panel__content__lists--dnd-over': isTaggedValueDragOver && !isReadOnly,
}), children: property.taggedValues.map((taggedValue) => (_jsx(TaggedValueEditor, { taggedValue: taggedValue, deleteValue: _deleteTaggedValue(taggedValue), isReadOnly: isReadOnly }, taggedValue._UUID))) })), selectedTab === UML_EDITOR_TAB.STEREOTYPES && (_jsx("div", { ref: dropStereotypeRef, className: clsx('panel__content__lists', {
'panel__content__lists--dnd-over': isStereotypeDragOver && !isReadOnly,
}), children: property.stereotypes.map((stereotype) => (_jsx(StereotypeSelector, { stereotype: stereotype, deleteStereotype: _deleteStereotype(stereotype), isReadOnly: isReadOnly }, stereotype.value._UUID))) }))] })] }) }));
});
//# sourceMappingURL=PropertyEditor.js.map