Download file option

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

@@ -13,7 +13,7 @@ declare global {
 const _paq = window._paq = window._paq || []  //eslint-disable-line
 
 export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) => {
-  const { actions, createNewFile, createNewFolder, deletePath, renamePath, hideContextMenu, pushChangesToGist, publishFileToGist, publishFolderToGist, copy, copyFileName, copyPath, paste, runScript, emit, pageX, pageY, path, type, focus, ...otherProps } = props
+  const { actions, createNewFile, createNewFolder, deletePath, renamePath, downloadPath, hideContextMenu, pushChangesToGist, publishFileToGist, publishFolderToGist, copy, copyFileName, copyPath, paste, runScript, emit, pageX, pageY, path, type, focus, ...otherProps } = props
   const contextMenuRef = useRef(null)
   const intl = useIntl()
   useEffect(() => {
@@ -88,6 +88,10 @@ export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) =>
               deletePath(getPath())
               _paq.push(['trackEvent', 'fileExplorer', 'contextMenu', 'delete'])
               break
+            case 'Download':
+              downloadPath(path)
+              _paq.push(['trackEvent', 'fileExplorer', 'contextMenu', 'download'])
+              break
             case 'Push changes to gist':
               _paq.push(['trackEvent', 'fileExplorer', 'contextMenu', 'pushToChangesoGist'])
               pushChangesToGist(path, type)

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

@@ -12,6 +12,7 @@ import { checkSpecialChars, extractNameFromKey, extractParentFromKey, joinPath }
 import { FileRender } from './file-render'
 import { Drag } from "@remix-ui/drag-n-drop"
 import { ROOT_PATH } from '../utils/constants'
+import { saveAs } from 'file-saver'
 
 export const FileExplorer = (props: FileExplorerProps) => {
   const { name, contextMenuItems, removedContextMenuItems, files, fileState } = props
@@ -174,6 +175,10 @@ export const FileExplorer = (props: FileExplorerProps) => {
     }
   }
 
+  const downloadPath = (path: string) => {
+    console.log('downloadPath', path)
+  }
+
   const uploadFile = (target) => {
     const parentFolder = getFocusedFolder()
     const expandPath = [...new Set([...props.expandPath, parentFolder])]
@@ -488,6 +493,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
           createNewFile={handleNewFileInput}
           createNewFolder={handleNewFolderInput}
           deletePath={deletePath}
+          downloadPath={downloadPath}
           renamePath={editModeOn}
           runScript={runScript}
           copy={handleCopyClick}

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

@@ -127,6 +127,7 @@ export interface FileExplorerContextMenuProps {
     createNewFolder: (parentFolder?: string) => void,
     deletePath: (path: string | string[]) => void,
     renamePath: (path: string, type: string) => void,
+    downloadPath: (path: string) => void,
     hideContextMenu: () => void,
     publishToGist?: (path?: string, type?: string) => void,
     pushChangesToGist?: (path?: string, type?: string) => void,

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

@@ -24,6 +24,12 @@ export const contextMenuActions: MenuItems = [{
   type: ['file', 'folder', 'gist'],
   multiselect: false,
   label: ''
+},{
+  id: 'download',
+  name: 'Download',
+  type: ['file'],
+  multiselect: false,
+  label: ''
 }, {
   id: 'run',
   name: 'Run',