chore: 下载指定文件

libs/remix-ui/workspace/src/lib/actions/index.ts

@@ -235,7 +235,6 @@ const saveAs = (blob, name) => {
     }
   }, 0) // 40s
 }
-// todo 选中文件下载
 export const downloadFile = async (folder?: string  ) => {
   try {
     tooltip('preparing files for download, please wait..')

libs/remix-ui/workspace/src/lib/actions/workspace.ts

@@ -229,7 +229,7 @@ export const switchToWorkspace = async (name: string) => {
   }
 }
 
-export const uploadFile = async (target, targetFolder: string, cb?: (err: Error, result?: string | number | boolean | Record<string, any>) => void) => {
+export const uploadFile = async (target, targetFolder: string, cb?: (err: Error, result?: string | number | boolean | Record<string, any>) => void, isFolder=false) => {
   // TODO The file explorer is merely a view on the current state of
   // the files module. Please ask the user here if they want to overwrite
   // a file and then just use `files.add`. The file explorer will
@@ -258,7 +258,7 @@ export const uploadFile = async (target, targetFolder: string, cb?: (err: Error,
       fileReader.readAsText(file)
       cb && cb(null, true)
     }
-    const name = `${targetFolder}/${file.name}`
+    const name = `${targetFolder}/${isFolder? file.webkitRelativePath : file.name}`
 
     workspaceProvider.exists(name).then(exist => {
       if (!exist) {
@@ -275,6 +275,10 @@ export const uploadFile = async (target, targetFolder: string, cb?: (err: Error,
   })
 }
 
+export const uploadFolder = async (target, targetFolder: string, cb?: (err: Error, result?: string | number | boolean | Record<string, any>) => void) => {
+  uploadFile(target, targetFolder, cb, true)
+}
+
 export const getWorkspaces = async (): Promise<string[]> | undefined => {
   try {
     const workspaces: string[] = await new Promise((resolve, reject) => {

libs/remix-ui/workspace/src/lib/components/file-explorer-menu.tsx

 import React, { useState, useEffect } from 'react' //eslint-disable-line
 import { FileExplorerMenuProps } from '../types'
-
+declare module 'react' {
+  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
+    // extends React's HTMLAttributes
+    directory?: string;
+    webkitdirectory?:string;
+  }
+}
 export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
   const [state, setState] = useState({
     menuItems: [
@@ -25,6 +31,11 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
         icon: 'fa fa-upload'
       },
       {
+        action: 'uploadFolder',
+        title: 'Load a local folder into current workspace',
+        icon: 'fa fa-upload'
+      },
+      {
         action: 'downloadFile',
         title: 'export current workspace',
         icon: 'fa fa-download'
@@ -62,12 +73,29 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
                 title={title}
                 key={index}
               >
-                <input id="fileUpload" data-id="fileExplorerFileUpload" type="file" onChange={(e) => {
+                <input id="fileUpload" data-id="fileExplorerFileUpload" type="file"  onChange={(e) => {
                   e.stopPropagation()
                   props.uploadFile(e.target)
                   e.target.value = null
                 }}
-                multiple />
+                multiple/>
+              </label>
+            )
+          }if (action === 'uploadFolder') {
+            return (
+              <label
+                id={action}
+                data-id={'fileExplorerUploadFile' + action }
+                className={icon + ' mb-0 remixui_newFile'}
+                title={title}
+                key={index}
+              >
+                <input id="fileUpload" data-id="fileExplorerFileUpload" type="file"  onChange={(e) => {
+                  e.stopPropagation()
+                  props.uploadFolder(e.target)
+                  e.target.value = null
+                }}
+                       multiple webkitdirectory="true"/>
               </label>
             )
           } else {

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

@@ -137,6 +137,14 @@ export const FileExplorer = (props: FileExplorerProps) => {
     }
   }
 
+  const getFocusedTarget = () => {
+    if (props.focusElement[0]) {
+      if (props.focusElement[0].type === 'folder' && props.focusElement[0].key) return name + '/' + props.focusElement[0].key
+      else if (props.focusElement[0].type === 'file' && props.focusElement[0].key) return name + '/' + props.focusElement[0].key
+      else return name
+    }
+  }
+
   const createNewFile = async (newFilePath: string) => {
     try {
       props.dispatchCreateNewFile(newFilePath, props.name)
@@ -176,9 +184,17 @@ export const FileExplorer = (props: FileExplorerProps) => {
     props.dispatchUploadFile(target, parentFolder)
   }
 
-  const downloadFile = () => {
+  const uploadFolder = (target) => {
     const parentFolder = getFocusedFolder()
-    props.dispatchDownloadFile(parentFolder !== name ? `${name}/${parentFolder}` : parentFolder)
+    const expandPath = [...new Set([...props.expandPath, parentFolder])]
+
+    props.dispatchHandleExpandPath(expandPath)
+    props.dispatchUploadFolder(target, parentFolder)
+  }
+
+  const downloadFile = () => {
+    const parentFolder = getFocusedTarget()
+    props.dispatchDownloadFile(parentFolder)
   }
 
   const copyFile = (src: string, dest: string) => {
@@ -423,6 +439,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
                 createNewFolder={handleNewFolderInput}
                 publishToGist={publishToGist}
                 uploadFile={uploadFile}
+                uploadFolder={uploadFolder}
                 downloadFile={downloadFile}
               />
             </div>

libs/remix-ui/workspace/src/lib/contexts/index.ts

@@ -18,6 +18,7 @@ export const FileSystemContext = createContext<{
   dispatchDeleteWorkspace: (workspaceName: string) => Promise<void>,
   dispatchPublishToGist: (path?: string, type?: string) => Promise<void>,
   dispatchUploadFile: (target?: SyntheticEvent, targetFolder?: string) => Promise<void>,
+  dispatchUploadFolder: (target?: SyntheticEvent, targetFolder?: string) => Promise<void>,
   dispatchDownloadFile: (targetFolder?: string) => Promise<void>,
   dispatchCreateNewFile: (path: string, rootDir: string) => Promise<void>,
   dispatchSetFocusElement: (elements: { key: string, type: 'file' | 'folder' | 'gist' }[]) => Promise<void>,

libs/remix-ui/workspace/src/lib/providers/FileSystemProvider.tsx

@@ -30,7 +30,7 @@ import {
   renameWorkspace,
   switchToWorkspace,
   uploadFile,
-  downloadFile
+  downloadFile, uploadFolder
 } from '../actions'
 import { Modal, WorkspaceProps } from '../types'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -106,6 +106,10 @@ export const FileSystemProvider = (props: WorkspaceProps) => {
     await uploadFile(target, targetFolder)
   }
 
+  const dispatchUploadFolder = async (target?: SyntheticEvent, targetFolder?: string) => {
+    await uploadFolder(target, targetFolder)
+  }
+
   const dispatchCreateNewFile = async (path: string, rootDir: string) => {
     await createNewFile(path, rootDir)
   }
@@ -251,7 +255,8 @@ export const FileSystemProvider = (props: WorkspaceProps) => {
     dispatchEmitContextMenuEvent,
     dispatchHandleClickFile,
     dispatchHandleExpandPath,
-    dispatchDownloadFile
+    dispatchDownloadFile,
+    dispatchUploadFolder
   }
   return (
     <FileSystemContext.Provider value={value}>

libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

@@ -178,7 +178,7 @@ export function Workspace () {
               { (global.fs.mode === 'browser') && (currentWorkspace !== NO_WORKSPACE) &&
                   <FileExplorer
                     name={currentWorkspace}
-                    menuItems={['createNewFile', 'createNewFolder', canUpload ? 'uploadFile' : '', 'downloadFile']}
+                    menuItems={['createNewFile', 'createNewFolder', canUpload ? 'uploadFile' : '', 'uploadFolder', 'downloadFile']}
                     contextMenuItems={global.fs.browser.contextMenu.registeredMenuItems}
                     removedContextMenuItems={global.fs.browser.contextMenu.removedMenuItems}
                     files={global.fs.browser.files}
@@ -193,6 +193,7 @@ export function Workspace () {
                     dispatchDeletePath={global.dispatchDeletePath}
                     dispatchRenamePath={global.dispatchRenamePath}
                     dispatchUploadFile={global.dispatchUploadFile}
+                    dispatchUploadFolder={global.dispatchUploadFolder}
                     dispatchCopyFile={global.dispatchCopyFile}
                     dispatchCopyFolder={global.dispatchCopyFolder}
                     dispatchPublishToGist={global.dispatchPublishToGist}
@@ -229,6 +230,7 @@ export function Workspace () {
                         dispatchDeletePath={global.dispatchDeletePath}
                         dispatchRenamePath={global.dispatchRenamePath}
                         dispatchUploadFile={global.dispatchUploadFile}
+                        dispatchUploadFolder={global.dispatchUploadFolder}
                         dispatchCopyFile={global.dispatchCopyFile}
                         dispatchCopyFolder={global.dispatchCopyFolder}
                         dispatchPublishToGist={global.dispatchPublishToGist}

libs/remix-ui/workspace/src/lib/types/index.ts

@@ -76,6 +76,7 @@ export interface FileExplorerProps {
     dispatchDeletePath: (path: string[]) => Promise<void>,
     dispatchRenamePath: (oldPath: string, newPath: string) => Promise<void>,
     dispatchUploadFile: (target?: React.SyntheticEvent, targetFolder?: string) => Promise<void>,
+    dispatchUploadFolder: (target?: React.SyntheticEvent, targetFolder?: string) => Promise<void>,
     dispatchCopyFile: (src: string, dest: string) => Promise<void>,
     dispatchCopyFolder: (src: string, dest: string) => Promise<void>,
     dispatchRunScript: (path: string) => Promise<void>,
@@ -97,6 +98,7 @@ export interface FileExplorerMenuProps {
     createNewFolder: (parentFolder?: string) => void,
     publishToGist: (path?: string) => void,
     uploadFile: (target: EventTarget & HTMLInputElement) => void,
+    uploadFolder: (target: EventTarget & HTMLInputElement) => void,
     downloadFile: (fold?: string) => void,
 }
 export interface FileExplorerContextMenuProps {