@finos/legend-studio
Version:
58 lines • 4.02 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 } from 'react';
import { observer } from 'mobx-react-lite';
import { clsx, ChevronUpIcon, ChevronDownIcon, XIcon } from '@finos/legend-art';
import { Console } from './Console.js';
import { AUX_PANEL_MODE } from '../../../stores/EditorConfig.js';
import { isNonNullable } from '@finos/legend-shared';
import { DevTool } from './DevTool.js';
import { useEditorStore } from '../EditorStoreProvider.js';
export const AuxiliaryPanel = observer(() => {
const editorStore = useEditorStore();
const changeMode = (mode) => () => editorStore.setActiveAuxPanelMode(mode);
const closePanel = () => editorStore.auxPanelDisplayState.toggle();
const toggleExpandAuxPanel = () => editorStore.auxPanelDisplayState.toggleMaximize();
const auxTabMap = {
[AUX_PANEL_MODE.CONSOLE]: {
mode: AUX_PANEL_MODE.CONSOLE,
name: 'CONSOLE',
icon: undefined,
isVisible: true,
},
[AUX_PANEL_MODE.DEV_TOOL]: {
mode: AUX_PANEL_MODE.DEV_TOOL,
name: 'DEVELOPER TOOLS',
icon: undefined,
isVisible: editorStore.isDevToolEnabled,
},
};
const tabsToShow = Object.values(AUX_PANEL_MODE).filter((tab) => isNonNullable(auxTabMap[tab]) && auxTabMap[tab].isVisible);
const isTabVisible = (tabType) => editorStore.activeAuxPanelMode === tabType && tabsToShow.includes(tabType);
useEffect(() => {
if (!tabsToShow.includes(editorStore.activeAuxPanelMode)) {
editorStore.setActiveAuxPanelMode(AUX_PANEL_MODE.CONSOLE);
}
}, [editorStore, tabsToShow, editorStore.activeAuxPanelMode]);
return (_jsxs("div", { className: "panel auxiliary-panel", children: [_jsxs("div", { className: "panel__header", children: [_jsx("div", { className: "auxiliary-panel__header__tabs", children: tabsToShow
.map((tab) => auxTabMap[tab])
.filter(isNonNullable)
.map((tab) => (_jsxs("button", { tabIndex: -1, className: clsx('auxiliary-panel__header__tab', {
'auxiliary-panel__header__tab--active': editorStore.activeAuxPanelMode === tab.mode,
}), onClick: changeMode(tab.mode), children: [tab.icon && (_jsx("div", { className: "auxiliary-panel__header__tab__icon", children: tab.icon })), _jsx("div", { className: "auxiliary-panel__header__tab__title", children: tab.name })] }, tab.mode))) }), _jsxs("div", { className: "auxiliary-panel__header__actions", children: [_jsx("button", { className: "auxiliary-panel__header__action", onClick: toggleExpandAuxPanel, tabIndex: -1, title: 'Toggle expand/collapse', children: editorStore.auxPanelDisplayState.isMaximized ? (_jsx(ChevronDownIcon, {})) : (_jsx(ChevronUpIcon, {})) }), _jsx("button", { className: "auxiliary-panel__header__action", onClick: closePanel, tabIndex: -1, title: 'Close', children: _jsx(XIcon, {}) })] })] }), _jsxs("div", { className: "panel__content", children: [isTabVisible(AUX_PANEL_MODE.CONSOLE) && (_jsx("div", { className: "auxiliary-panel__content__tab", children: _jsx(Console, {}) })), isTabVisible(AUX_PANEL_MODE.DEV_TOOL) && (_jsx("div", { className: "auxiliary-panel__content__tab", children: _jsx(DevTool, {}) }))] })] }));
});
//# sourceMappingURL=AuxiliaryPanel.js.map