@finos/legend-application-pure-ide
Version:
Legend Pure IDE application core
74 lines • 6.18 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 { useEffect, useState } from 'react';
import { observer } from 'mobx-react-lite';
import { FileEditorState } from '../../stores/FileEditorState.js';
import { GenericFileEditor } from './GenericFileEditor.js';
import { PureFileEditor } from './PureFileEditor.js';
import { clsx, FileAltIcon, LockIcon, PlusIcon, useResizeDetector, } from '@finos/legend-art';
import { DiagramEditorState } from '../../stores/DiagramEditorState.js';
import { DiagramEditor } from './DiagramEditor.js';
import { usePureIDEStore } from '../PureIDEStoreProvider.js';
import { PURE_DiagramIcon } from '../shared/ConceptIconUtils.js';
import { TabManager } from '@finos/legend-lego/application';
import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
const EditorGroupSplashScreen = () => {
const commandListWidth = 300;
const commandListHeight = 150;
const [showCommandList, setShowCommandList] = useState(false);
const { ref, width, height } = useResizeDetector();
useEffect(() => {
setShowCommandList((width ?? 0) > commandListWidth && (height ?? 0) > commandListHeight);
}, [width, height]);
return (_jsx("div", { ref: ref, className: "editor-group__splash-screen", children: _jsxs("div", { className: clsx('editor-group__splash-screen__content', {
'editor-group__splash-screen__content--hidden': !showCommandList,
}), children: [_jsxs("div", { className: "editor-group__splash-screen__content__item", children: [_jsx("div", { className: "editor-group__splash-screen__content__item__label", children: `Run the go() function` }), _jsx("div", { className: "editor-group__splash-screen__content__item__hot-keys", children: _jsx("div", { className: "hotkey__key", children: "F9" }) })] }), _jsxs("div", { className: "editor-group__splash-screen__content__item", children: [_jsx("div", { className: "editor-group__splash-screen__content__item__label", children: "Run the full test suite" }), _jsx("div", { className: "editor-group__splash-screen__content__item__hot-keys", children: _jsx("div", { className: "hotkey__key", children: "F10" }) })] }), _jsxs("div", { className: "editor-group__splash-screen__content__item", children: [_jsx("div", { className: "editor-group__splash-screen__content__item__label", children: "Search for a file" }), _jsxs("div", { className: "editor-group__splash-screen__content__item__hot-keys", children: [_jsx("div", { className: "hotkey__key", children: "Ctrl" }), _jsx("div", { className: "hotkey__plus", children: _jsx(PlusIcon, {}) }), _jsx("div", { className: "hotkey__key", children: "P" })] })] })] }) }));
};
export const EditorGroup = observer(() => {
const ideStore = usePureIDEStore();
const currentTab = ideStore.tabManagerState.currentTab;
const renderActiveEditorState = () => {
if (currentTab instanceof FileEditorState) {
if (currentTab.textEditorState.language === CODE_EDITOR_LANGUAGE.PURE) {
return _jsx(PureFileEditor, { editorState: currentTab });
}
return _jsx(GenericFileEditor, { editorState: currentTab });
}
else if (currentTab instanceof DiagramEditorState) {
return _jsx(DiagramEditor, { diagramEditorState: currentTab });
}
return null;
};
const renderTab = (editorState) => {
if (editorState instanceof FileEditorState) {
const showMoreInfo = ideStore.tabManagerState.tabs.filter((tab) => tab instanceof FileEditorState &&
tab.fileName === editorState.fileName).length > 1;
return (_jsxs("div", { className: "editor-group__header__tab", children: [_jsx("div", { className: "editor-group__header__tab__icon", children: _jsx(FileAltIcon, { className: "editor-group__header__tab__icon--file" }) }), _jsx("div", { className: "editor-group__header__tab__label", children: editorState.fileName }), showMoreInfo && (_jsx("div", { className: "editor-group__header__tab__path", children: editorState.filePath })), editorState.file.RO && (_jsx("div", { className: "editor-group__header__tab__icon", children: _jsx(LockIcon, { className: "editor-group__header__tab__icon--readonly" }) }))] }));
}
else if (editorState instanceof DiagramEditorState) {
const showMoreInfo = ideStore.tabManagerState.tabs.filter((tab) => tab instanceof DiagramEditorState &&
tab.diagramName === editorState.diagramName).length > 1;
return (_jsxs("div", { className: "editor-group__header__tab", children: [_jsx("div", { className: "editor-group__header__tab__icon", children: _jsx(PURE_DiagramIcon, {}) }), _jsx("div", { className: "editor-group__header__tab__label", children: editorState.diagramName }), showMoreInfo && (_jsx("div", { className: "editor-group__header__tab__path", children: editorState.diagramPath }))] }));
}
return editorState.label;
};
if (!currentTab) {
return _jsx(EditorGroupSplashScreen, {});
}
return (_jsxs("div", { className: "panel editor-group", children: [_jsxs("div", { className: "panel__header editor-group__header", children: [_jsx("div", { className: "editor-group__header__tabs", children: _jsx(TabManager, { tabManagerState: ideStore.tabManagerState, tabRenderer: renderTab }) }), _jsx("div", { className: "panel__header__actions" })] }), _jsx("div", { className: "panel__content editor-group__content", children: renderActiveEditorState() }, currentTab.uuid)] }));
});
//# sourceMappingURL=EditorGroup.js.map