import * as React from "react" ; import { observer } from "mobx-react" ; import { lazyInject } from "../../inversify.config" ; import SelectedElementService from "../../services/SelectedElementService" ; import NodeList from "./FolderContent" ; import ParentElement from "./ParentElement" ; import SceneStore from "../../stores/SceneStore" ; import ActiveFolder from "./ActiveFolder" ; import { TreeElement } from "../../classes/TreeElement" ; @ observer export default class SideBar extends React . Component < Record < string , unknown > , any > { @ lazyInject ( "SceneStore" ) private readonly sceneStore ! : SceneStore ; @ lazyInject ( "SelectedElementService" ) private readonly selectedElementService ! : SelectedElementService ; public render ( ) { const selectedElement = this . selectedElementService . getSelectedElement ( ) ; if ( selectedElement === null ) { return < div id = "app-sidebar" className = "side-bar" / > ; } const activeFolder = this . getActiveFolder ( selectedElement ) ; return ( < div id = "app-sidebar" className = "side-bar" > < h3 > { selectedElement . name } < /h3> < ParentElement / > < ActiveFolder activeFolder = { activeFolder } /> < NodeList activeFolder = { activeFolder } / > < /div>); } private getActiveFolder ( element ) { return element . isFile ( ) ? this . getParentElement ( element ) : element ; } private getParentElement ( element ) { if ( ! this . sceneStore . projectData ) { return null ; } return element . parent ? element . parent : null ; } }