Implement workflow for copy and paster

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

@@ -4,7 +4,7 @@ import { FileExplorerContextMenuProps } from './types'
 import './css/file-explorer-context-menu.css'
 
 export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) => {
-  const { actions, createNewFile, createNewFolder, deletePath, renamePath, hideContextMenu, pushChangesToGist, publishFileToGist, publishFolderToGist, runScript, emit, pageX, pageY, path, type, ...otherProps } = props
+  const { actions, createNewFile, createNewFolder, deletePath, renamePath, hideContextMenu, pushChangesToGist, publishFileToGist, publishFolderToGist, copy, paste, runScript, emit, pageX, pageY, path, type, ...otherProps } = props
   const contextMenuRef = useRef(null)
 
   useEffect(() => {
@@ -61,6 +61,12 @@ export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) =>
             case 'Run':
               runScript(path)
               break
+            case 'Copy':
+              copy(path, type)
+              break
+            case 'Paste':
+              paste(path)
+              break
             default:
               emit && emit(item.id, path)
               break

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

@@ -23,7 +23,6 @@ export const FileExplorer = (props: FileExplorerProps) => {
       key: '',
       type: 'folder'
     }],
-    focusPath: null,
     files: [],
     fileManager: null,
     ctrlKey: false,
@@ -56,6 +55,13 @@ export const FileExplorer = (props: FileExplorerProps) => {
       path: [],
       extension: [],
       pattern: []
+    }, {
+      id: 'run',
+      name: 'Run',
+      type: [],
+      path: [],
+      extension: ['.js'],
+      pattern: []
     }, {
       id: 'pushChangesToGist',
       name: 'Push changes to gist',
@@ -78,11 +84,11 @@ export const FileExplorer = (props: FileExplorerProps) => {
       extension: [],
       pattern: []
     }, {
-      id: 'run',
-      name: 'Run',
-      type: [],
+      id: 'copy',
+      name: 'Copy',
+      type: ['folder', 'file'],
       path: [],
-      extension: ['.js'],
+      extension: [],
       pattern: []
     }],
     focusContext: {
@@ -112,8 +118,10 @@ export const FileExplorer = (props: FileExplorerProps) => {
     toasterMsg: '',
     mouseOverElement: null,
     showContextMenu: false,
-    reservedKeywords: [name, 'gist-']
+    reservedKeywords: [name, 'gist-'],
+    copyElement: []
   })
+  const [canPaste, setcanPaste] = useState(false)
   const [fileSystem, dispatch] = useReducer(fileSystemReducer, fileSystemInitialState)
   const editRef = useRef(null)
 
@@ -176,12 +184,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
 
   useEffect(() => {
     if (contextMenuItems) {
-      setState(prevState => {
-        // filter duplicate items
-        const items = contextMenuItems.filter(({ name }) => prevState.actions.findIndex(action => action.name === name) === -1)
-
-        return { ...prevState, actions: [...prevState.actions, ...items] }
-      })
+      addMenuItems(contextMenuItems)
     }
   }, [contextMenuItems])
 
@@ -223,6 +226,38 @@ export const FileExplorer = (props: FileExplorerProps) => {
     }
   }, [state.modals])
 
+  useEffect(() => {
+    if (canPaste) {
+      addMenuItems([{
+        id: 'paste',
+        name: 'Paste',
+        type: ['folder', 'file'],
+        path: [],
+        extension: [],
+        pattern: []
+      }])
+    } else {
+      removeMenuItems(['paste'])
+    }
+  }, [canPaste])
+
+  const addMenuItems = (items: { id: string, name: string, type: string[], path: string[], extension: string[], pattern: string[] }[]) => {
+    setState(prevState => {
+      // filter duplicate items
+      const actions = items.filter(({ name }) => prevState.actions.findIndex(action => action.name === name) === -1)
+
+      return { ...prevState, actions: [...prevState.actions, ...actions] }
+    })
+  }
+
+  const removeMenuItems = (ids: string[]) => {
+    setState(prevState => {
+      const actions = prevState.actions.filter(({ id }) => ids.findIndex(value => value === id) === -1)
+
+      return { ...prevState, actions }
+    })
+  }
+
   const extractNameFromKey = (key: string):string => {
     const keyPath = key.split('/')
 
@@ -695,6 +730,21 @@ export const FileExplorer = (props: FileExplorerProps) => {
     })
   }
 
+  const handleCopyClick = (path: string, type: string) => {
+    setState(prevState => {
+      return { ...prevState, copyElement: [...prevState.copyElement, { key: path, type }] }
+    })
+    setcanPaste(true)
+  }
+
+  const handlePasteClick = (dest: string) => {
+    console.log('destination: ', dest)
+    setState(prevState => {
+      return { ...prevState, copyElement: [] }
+    })
+    setcanPaste(false)
+  }
+
   const label = (file: File) => {
     return (
       <div
@@ -868,6 +918,8 @@ export const FileExplorer = (props: FileExplorerProps) => {
           deletePath={deletePath}
           renamePath={editModeOn}
           runScript={runScript}
+          copy={handleCopyClick}
+          paste={handlePasteClick}
           emit={emitContextMenuEvent}
           pageX={state.focusContext.x}
           pageY={state.focusContext.y}

libs/remix-ui/file-explorer/src/lib/types/index.ts

@@ -46,5 +46,7 @@ export interface FileExplorerContextMenuProps {
     pageY: number,
     path: string,
     type: string,
-    onMouseOver?: (...args) => void
+    onMouseOver?: (...args) => void,
+    copy?: (path: string, type: string) => void
+    paste?: (destination: string) => void
 }