add state to track file names being moved.

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

@@ -35,6 +35,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
   const [state, setState] = useState<WorkSpaceState>(workspaceState)
   // const [isPending, startTransition] = useTransition();
   const treeRef = useRef<HTMLDivElement>(null)
+  const [filesSelected, setFilesSelected] = useState<string[]>([])
 
   useEffect(() => {
     if (contextMenuItems) {
@@ -342,7 +343,9 @@ export const FileExplorer = (props: FileExplorerProps) => {
 
   const handleFileMove = async (dest: string, sourcesrc: string[]) => {
     if (await moveFilesIsAllowed(sourcesrc, dest) === false) return
-    const src = sourcesrc.length === 1 ? sourcesrc[0] : sourcesrc.join('\n')
+    const files = filesSelected && filesSelected.length > 0 && filesSelected.join('\n')
+    console.log(files)
+    const src = files.length > 0 ? files : sourcesrc.length === 1 ? sourcesrc[0] : sourcesrc.join('\n')
     try {
       props.modal(
         intl.formatMessage({ id: 'filePanel.moveFile' }),
@@ -364,7 +367,9 @@ export const FileExplorer = (props: FileExplorerProps) => {
 
   const handleFolderMove = async (dest: string, sourcesrc: string[]) => {
     if (await moveFoldersIsAllowed(sourcesrc, dest) === false) return
-    const src = sourcesrc.length === 1 ? sourcesrc[0] : sourcesrc.join('\n')
+    const folders = filesSelected && filesSelected.length > 0 && filesSelected.join('\n')
+    console.log(folders)
+    const src = folders.length > 0 ? folders : sourcesrc.length === 1 ? sourcesrc[0] : sourcesrc.join('\n')
     try {
       props.modal(
         intl.formatMessage({ id: 'filePanel.moveFile' }),
@@ -455,6 +460,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
           moveFolder={handleFolderMove}
           moveFolderSilently={moveFolderSilently}
           moveFileSilently={moveFileSilently}
+          setFilesSelected={setFilesSelected}
           handleClickFolder={handleClickFolder}
           createNewFile={props.createNewFile}
           createNewFolder={props.createNewFolder}

libs/remix-ui/workspace/src/lib/components/flat-tree-drop.tsx

@@ -57,7 +57,11 @@ export const FlatTreeDrop = (props: FlatTreeDropProps) => {
 
     const target = await getEventTarget(event)
     const items = buildMultiSelectedItemProfiles(target)
-    console.log('onDrop', { items, target })
+    const filePaths = []
+    filePaths.push(target && target.path ? target.path : '/')
+    items.forEach((item) => filePaths.push(item.path))
+    props.setFilesSelected(filePaths)
+    console.log('onDrop', { items, target, filePaths })
     let dragDestination: any
     if (!target || !target.path) {
       dragDestination = {

libs/remix-ui/workspace/src/lib/components/flat-tree.tsx

@@ -1,4 +1,4 @@
-import React, { SyntheticEvent, useEffect, useRef, useState, RefObject, useMemo, useContext } from 'react'
+import React, { SyntheticEvent, useEffect, useRef, useState, RefObject, useMemo, useContext, Dispatch } from 'react'
 import { Popover } from 'react-bootstrap'
 import { FileType, WorkspaceElement } from '../types'
 import { getPathIcon } from '@remix-ui/helper';
@@ -40,6 +40,7 @@ interface FlatTreeProps {
   moveFolder: (dest: string, src: string[]) => void
   moveFolderSilently: (dest: string, src: string[]) => Promise<void>
   moveFileSilently: (dest: string, src: string[]) => Promise<void>
+  setFilesSelected: Dispatch<React.SetStateAction<string[]>>
   fileState: fileDecoration[]
   createNewFile?: any
   createNewFolder?: any
@@ -53,7 +54,7 @@ let mouseTimer: any = {
 }
 
 export const FlatTree = (props: FlatTreeProps) => {
-  const { files, flatTree, expandPath, focusEdit, editModeOff, handleTreeClick, moveFile, moveFolder, fileState, focusElement, handleClickFolder, deletePath, moveFileSilently, moveFolderSilently } = props
+  const { files, flatTree, expandPath, focusEdit, editModeOff, handleTreeClick, moveFile, moveFolder, fileState, focusElement, handleClickFolder, deletePath, moveFileSilently, moveFolderSilently, setFilesSelected } = props
   const [hover, setHover] = useState<string>('')
   const [mouseOverTarget, setMouseOverTarget] = useState<{
     path: string,
@@ -254,6 +255,7 @@ export const FlatTree = (props: FlatTreeProps) => {
         moveFolder={moveFolder}
         moveFolderSilently={moveFolderSilently}
         moveFileSilently={moveFileSilently}
+        setFilesSelected={setFilesSelected}
         handleClickFolder={handleClickFolder}
         expandPath={expandPath}
       >

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

@@ -1,5 +1,5 @@
 /* eslint-disable @nrwl/nx/enforce-module-boundaries */
-import React from 'react'
+import React, { Dispatch } from 'react'
 import { customAction } from '@remixproject/plugin-api'
 import { fileDecoration } from '@remix-ui/file-decorators'
 import { RemixAppManager } from 'libs/remix-ui/plugin-manager/src/types'
@@ -350,6 +350,7 @@ export interface FlatTreeDropProps {
   moveFolder: (dest: string, src: string[]) => void
   moveFolderSilently: (dest: string, src: string[]) => Promise<void>
   moveFileSilently: (dest: string, src: string[]) => Promise<void>
+  setFilesSelected: Dispatch<React.SetStateAction<string[]>>
   getFlatTreeItem: (path: string) => FileType
   handleClickFolder: (path: string, type: string) => void
   dragSource: FileType