Async/await for files

libs/remix-ui/file-explorer/src/lib/file-explorer.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react' // eslint-disable-line
 import { TreeView, TreeViewItem } from '@remix-ui/tree-view' // eslint-disable-line
+import Draggable from 'react-draggable' // eslint-disable-line
 import * as helper from '../../../../../apps/remix-ide/src/lib/helper'
 import { FileExplorerProps } from './types'
 
@@ -75,7 +76,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
   }
 
   const [state, setState] = useState({
-    focusElement: null,
+    focusElement: [],
     focusPath: null,
     menuItems: [
       {
@@ -106,19 +107,23 @@ export const FileExplorer = (props: FileExplorerProps) => {
       publishToGist,
       createNewFile
     },
-    fileManager: null
+    fileManager: null,
+    ctrlKey: false
   })
 
   useEffect(() => {
+    (async () => {
       const fileManager = registry.get('filemanager').api
+      const files = await resolveDirectory(name)
 
       setState(prevState => {
-      return { ...prevState, fileManager }
+        return { ...prevState, fileManager, files }
       })
-    resolveDirectory(name)
+    })()
   }, [])
 
-  const resolveDirectory = (folderPath) => {
+  const resolveDirectory = async (folderPath): Promise<{ path: string, name: string, isDirectory: boolean }[]> => {
+    return new Promise((resolve) => {
       const folderIndex = state.files.findIndex(({ path }) => path === folderPath)
 
       if (folderIndex === -1) {
@@ -126,9 +131,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
           if (error) console.error(error)
           const files = normalize(folderPath, fileTree)
 
-        setState(prevState => {
+          resolve(files)
-          return { ...prevState, files }
-        })
         })
       } else {
         files.resolveDirectory(folderPath, (error, fileTree) => {
@@ -136,11 +139,10 @@ export const FileExplorer = (props: FileExplorerProps) => {
           const files = state.files
 
           files[folderIndex].child = normalize(folderPath, fileTree)
-        setState(prevState => {
+          resolve(files)
-          return { ...prevState, files }
-        })
         })
       }
+    })
   }
 
   const label = (data) => {
@@ -159,7 +161,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
     )
   }
 
-  const normalize = (path, filesList) => {
+  const normalize = (path, filesList): { path: string, name: string, isDirectory: boolean }[] => {
     const folders = []
     const files = []
     const prefix = path.split('/')[0]
@@ -352,6 +354,23 @@ export const FileExplorer = (props: FileExplorerProps) => {
   // }
   // }
 
+  const handleClickFile = async (event, path) => {
+    event.stopPropagation()
+    await state.fileManager.open(path)
+    setState(prevState => {
+      return { ...prevState, focusElement: [path] }
+    })
+  }
+
+  const handleClickFolder = async (path) => {
+    console.log('path: ', path)
+    const files = await resolveDirectory(path)
+
+    setState(prevState => {
+      return { ...prevState, focusElement: [path], files }
+    })
+  }
+
   const renderMenuItems = () => {
     let items
     if (state.menuItems) {
@@ -401,7 +420,16 @@ export const FileExplorer = (props: FileExplorerProps) => {
   const renderFiles = (file, index) => {
     if (file.isDirectory) {
       return (
-        <TreeViewItem id={`treeViewItem${file.path}`} iconX='pr-3 far fa-folder' iconY='pr-3 far fa-folder-open' key={index} label={label(file)} onClick={() => { resolveDirectory(file.path) }}>
+        // <Draggable key={index} axis="y" bounds="parent">
+        <TreeViewItem
+          id={`treeViewItem${file.path}`}
+          iconX='pr-3 far fa-folder'
+          iconY='pr-3 far fa-folder-open'
+          key={`${file.path + index}`}
+          label={label(file)}
+          onClick={(e) => { e.stopPropagation(); handleClickFolder(file.path) }}
+          labelClass={ state.focusElement.findIndex(item => item === file.path) !== -1 ? 'bg-secondary' : '' }
+        >
           {
             file.child ? <TreeView id={`treeView${file.path}`} key={index}>{
               file.child.map((file, index) => {
@@ -411,24 +439,47 @@ export const FileExplorer = (props: FileExplorerProps) => {
             </TreeView> : <TreeView id={`treeView${file.path}`} key={index} />
           }
         </TreeViewItem>
+        // </Draggable>
       )
     } else {
       return (
+        // <Draggable key={index} axis="y" bounds="parent">
         <TreeViewItem
-          id={`treeView${file.path}`}
+          id={`treeViewItem${file.path}`}
           key={index}
           label={label(file)}
-          onClick={() => { state.fileManager.open(file.path) }}
+          onClick={(event) => {
+            handleClickFile(event, file.path)
+          }}
           icon='fa fa-file'
+          labelClass={ state.focusElement.findIndex(item => item === file.path) !== -1 ? 'bg-secondary' : '' }
         />
+        // </Draggable>
       )
     }
   }
 
   return (
-    <div>
+    <div tabIndex={-1}
+      onKeyDown={(e) => {
+        if (e.ctrlKey) {
+          console.log('TRUE')
+          setState(prevState => {
+            return { ...prevState, ctrlKey: true }
+          })
+        }
+      }}
+      onKeyUp={() => {
+        console.log('FALSE')
+        setState(prevState => {
+          return { ...prevState, ctrlKey: false }
+        })
+      }}
+    >
       <TreeView id='treeView'>
         <TreeViewItem id="treeViewItem" label={renderMenuItems()} expand={true}>
+          {/* <Draggable onStart={() => false}> */}
+          <div>
             <TreeView id='treeViewMenu'>
               {
                 state.files.map((file, index) => {
@@ -436,6 +487,8 @@ export const FileExplorer = (props: FileExplorerProps) => {
                 })
               }
             </TreeView>
+          </div>
+          {/* </Draggable> */}
         </TreeViewItem>
       </TreeView>
     </div>

libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx

@@ -4,7 +4,7 @@ import { TreeViewItemProps } from '../../types'
 import './tree-view-item.css'
 
 export const TreeViewItem = (props: TreeViewItemProps) => {
-  const { id, children, label, expand, iconX = 'fas fa-caret-right', iconY = 'fas fa-caret-down', icon, ...otherProps } = props
+  const { id, children, label, labelClass, expand, iconX = 'fas fa-caret-right', iconY = 'fas fa-caret-down', icon, ...otherProps } = props
   const [isExpanded, setIsExpanded] = useState(false)
 
   useEffect(() => {
@@ -13,7 +13,7 @@ export const TreeViewItem = (props: TreeViewItemProps) => {
 
   return (
     <li key={`treeViewLi${id}`} data-id={`treeViewLi${id}`} className='li_tv' {...otherProps}>
-      <div key={`treeViewDiv${id}`} data-id={`treeViewDiv${id}`} className='d-flex flex-row align-items-center' onClick={() => setIsExpanded(!isExpanded)}>
+      <div key={`treeViewDiv${id}`} data-id={`treeViewDiv${id}`} className={`d-flex flex-row align-items-center ${labelClass}`} onClick={() => setIsExpanded(!isExpanded)}>
         { children ? <div className={isExpanded ? `px-1 ${iconY} caret caret_tv` : `px-1 ${iconX} caret caret_tv`} style={{ visibility: children ? 'visible' : 'hidden' }}></div> : icon ? <div className={`pr-3 pl-1 ${icon} caret caret_tv`}></div> : null }
         <span className='w-100 pl-1'>
           { label }

libs/remix-ui/tree-view/src/types/index.ts

@@ -8,9 +8,10 @@ export interface TreeViewItemProps {
     id?: string,
     label: string | number | React.ReactNode,
     expand?: boolean,
-    onClick?: VoidFunction,
+    onClick?: (...args: any) => void,
     className?: string,
     iconX?: string,
     iconY?: string,
-    icon?: string
+    icon?: string,
+    labelClass?: string
 }