Async/await for files

4 years ago · aed96d8475
parent e08cba6225
commit aed96d8475
3 changed files with 95 additions and 41 deletions
--- a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
+++ b/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 => {
-          return { ...prevState, files }
-        })
+          resolve(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 => {
-          return { ...prevState, files }
-        })
+          resolve(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>
--- a/libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx
+++ b/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 }
--- a/libs/remix-ui/tree-view/src/types/index.ts
+++ b/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
 }