import { useRecoilValue } from "recoil" ; import FilesystemExplorer , { TreeItemInfo , } from "../components/FilesystemExplorer" ; import { Panel } from "../modules/panel" ; import { clientState , openedFolders } from "../utils/atoms" ; import { ReactSVG } from "react-svg" ; import useEditor from "../hooks/useEditor" ; import useTabs from "../hooks/useTabs" ; import { BorderedButton } from "@gveditor/web_components" ; import { openFolderPicker } from "../utils/commands" ; import { setRecoil } from "recoil-nexus" ; function ExplorerPanelContainer ( ) { const client = useRecoilValue ( clientState ) ; const [ openTab ] = useTabs ( ) ; const getEditor = useEditor ( ) ; async function openFile ( item ) { if ( item . isFile ) { try { client . read_file_by_path ( item . path , "local" ) . then ( ( fileContent ) => { if ( fileContent . Ok ) { const { content } = fileContent . Ok ; const editor = getEditor ( fileContent . Ok . format ) ; if ( editor != null ) { const newTab = new editor ( item . name , item . path , content ) ; openTab ( newTab ) ; } else { } } else { } } ) ; } catch ( err ) { console . log ( err ) ; } } } async function openFolder ( ) { const openedFolder = await openFolderPicker ( "local" ) ; if ( openedFolder != null ) { setRecoil ( openedFolders , [ { path : openedFolder , } , ] ) ; } } const folders = useRecoilValue ( openedFolders ) ; return ( < div style = { { height : "100%" , paddingLeft : 5 } } > { folders . map ( ( { path } ) => { return ( < FilesystemExplorer initialRoute = { path } onSelected = { openFile } key = { path } filesystem_name = "local" / > ) ; } ) } { folders . length === 0 && ( < > < BorderedButton expanded = { true } onClick = { openFolder } > Open folder < /BorderedButton> < />)} < /div>); } /**
 * Built-in panel that displays a filesystem explorer
 */ export default class ExplorerPanel extends Panel { constructor ( ) { super ( "Explorer" ) ; this . icon = ( ) => < ReactSVG src = "/icons/folder_outlined.svg" / > ; this . container = ( ) => < ExplorerPanelContainer />; } }