Skip to content

Commit dea2043

Browse files
LianaHusLianaHus
authored
Merge pull request #4084 from ethereum/fixdrag
fixing drag drop issues
2 parents 800d2fe + 4fd2c5d commit dea2043

File tree

5 files changed

+112
-15
lines changed

5 files changed

+112
-15
lines changed

‎apps/remix-ide/src/app/files/fileManager.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -904,6 +904,50 @@ class FileManager extends Plugin {
904904
return exists
905905
}
906906

907+
908+
async moveFileIsAllowed (src: string, dest: string) {
909+
try {
910+
src = this.normalize(src)
911+
dest = this.normalize(dest)
912+
src = this.limitPluginScope(src)
913+
dest = this.limitPluginScope(dest)
914+
await this._handleExists(src, `Cannot move ${src}. Path does not exist.`)
915+
await this._handleExists(dest, `Cannot move content into ${dest}. Path does not exist.`)
916+
await this._handleIsFile(src, `Cannot move ${src}. Path is not a file.`)
917+
await this._handleIsDir(dest, `Cannot move content into ${dest}. Path is not directory.`)
918+
const fileName = helper.extractNameFromKey(src)
919+
920+
if (await this.exists(dest + '/' + fileName)) {
921+
return false
922+
}
923+
return true
924+
} catch (e) {
925+
console.log(e)
926+
return false
927+
}
928+
}
929+
930+
async moveDirIsAllowed (src: string, dest: string) {
931+
try {
932+
src = this.normalize(src)
933+
dest = this.normalize(dest)
934+
src = this.limitPluginScope(src)
935+
dest = this.limitPluginScope(dest)
936+
await this._handleExists(src, `Cannot move ${src}. Path does not exist.`)
937+
await this._handleExists(dest, `Cannot move content into ${dest}. Path does not exist.`)
938+
await this._handleIsDir(src, `Cannot move ${src}. Path is not directory.`)
939+
await this._handleIsDir(dest, `Cannot move content into ${dest}. Path is not directory.`)
940+
const dirName = helper.extractNameFromKey(src)
941+
if (await this.exists(dest + '/' + dirName) || src === dest) {
942+
return false
943+
}
944+
return true
945+
} catch (e) {
946+
console.log(e)
947+
return false
948+
}
949+
}
950+
907951
/**
908952
* Moves a file to a new folder
909953
* @param {string} src path of the source file

‎apps/remix-ide/src/app/tabs/locales/en/filePanel.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@
7373
"filePanel.features": "Features",
7474
"filePanel.upgradeability": "Upgradeability",
7575
"filePanel.ok": "OK",
76+
"filePanel.yes": "Yes",
7677
"filePanel.cancel": "Cancel",
7778
"filePanel.createNewWorkspace": "create a new workspace",
7879
"filePanel.connectToLocalhost": "connect to localhost",
@@ -115,6 +116,8 @@
115116
"filePanel.validationErrorMsg": "Special characters are not allowed",
116117
"filePanel.reservedKeyword": "Reserved Keyword",
117118
"filePanel.reservedKeywordMsg": "File name contains Remix reserved keywords. \"{content}\"",
119+
"filePanel.moveFile": "Moving files",
120+
"filePanel.moveFileMsg1": "Are you sure you want to move {src} to {dest}?",
118121
"filePanel.movingFileFailed": "Moving File Failed",
119122
"filePanel.movingFileFailedMsg": "Unexpected error while moving file: {src}",
120123
"filePanel.movingFolderFailed": "Moving Folder Failed",

‎libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,11 @@ export const Draggable = (props: DraggableType) => {
2727
destination = props.file,
2828
context = useContext(MoveContext)
2929

30+
// delay timer
31+
const [timer, setTimer] = useState<NodeJS.Timeout>()
32+
// folder to open
33+
const [folderToOpen, setFolderToOpen] = useState<string>()
34+
3035
const handleDrop = (event: React.DragEvent<HTMLSpanElement>) => {
3136
event.preventDefault()
3237

@@ -50,8 +55,15 @@ export const Draggable = (props: DraggableType) => {
5055
const handleDragover = (event: React.DragEvent<HTMLSpanElement>) => {
5156
//Checks if the folder is opened
5257
event.preventDefault()
53-
if (destination.isDirectory && !props.expandedPath.includes(destination.path)) {
54-
props.handleClickFolder(destination.path, destination.type)
58+
if (destination.isDirectory && !props.expandedPath.includes(destination.path) && folderToOpen !== destination.path && props.handleClickFolder) {
59+
setFolderToOpen(destination.path)
60+
timer && clearTimeout(timer)
61+
setTimer(
62+
setTimeout(() => {
63+
props.handleClickFolder(destination.path, destination.type)
64+
setFolderToOpen(null)
65+
}, 600)
66+
)
5567
}
5668
}
5769

@@ -75,7 +87,12 @@ export const Draggable = (props: DraggableType) => {
7587
onDrop={(event) => {
7688
handleDrop(event)
7789
}}
78-
onDragStart={() => {
90+
onDragStart={(event) => {
91+
if (destination && destination.path === '/'){
92+
event.preventDefault()
93+
event.stopPropagation
94+
} else
95+
7996
if (destination) {
8097
handleDrag()
8198
}

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -514,3 +514,16 @@ export const moveFolder = async (src: string, dest: string) => {
514514
dispatch(displayPopUp('Oops! An error ocurred while performing moveDir operation.' + error))
515515
}
516516
}
517+
518+
export const moveFileIsAllowed = async (src: string, dest: string) => {
519+
const fileManager = plugin.fileManager
520+
const isAllowed = await fileManager.moveFileIsAllowed(src, dest)
521+
return isAllowed
522+
}
523+
524+
export const moveFolderIsAllowed = async (src: string, dest: string) => {
525+
const fileManager = plugin.fileManager
526+
const isAllowed = await fileManager.moveDirIsAllowed(src, dest)
527+
return isAllowed
528+
}
529+

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

Lines changed: 32 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@ import '../css/file-explorer.css'
99
import {checkSpecialChars, extractNameFromKey, extractParentFromKey, joinPath} from '@remix-ui/helper'
1010
// eslint-disable-next-line @typescript-eslint/no-unused-vars
1111
import {FileRender} from './file-render'
12-
import {Drag} from '@remix-ui/drag-n-drop'
12+
import {Drag, Draggable} from '@remix-ui/drag-n-drop'
1313
import {ROOT_PATH} from '../utils/constants'
14+
import { moveFileIsAllowed, moveFolderIsAllowed } from '../actions'
1415

1516
export const FileExplorer = (props: FileExplorerProps) => {
1617
const intl = useIntl()
@@ -289,27 +290,43 @@ export const FileExplorer = (props: FileExplorerProps) => {
289290
props.dispatchHandleExpandPath(expandPath)
290291
}
291292

292-
const handleFileMove = (dest: string, src: string) => {
293+
const handleFileMove = async (dest: string, src: string) => {
294+
if(await moveFileIsAllowed(src, dest) === false) return
293295
try {
294-
props.dispatchMoveFile(src, dest)
296+
props.modal(
297+
intl.formatMessage({ id: 'filePanel.moveFile' }),
298+
intl.formatMessage({ id: 'filePanel.moveFileMsg1' }, { src, dest }),
299+
intl.formatMessage({ id: 'filePanel.yes' }),
300+
() => props.dispatchMoveFile(src, dest),
301+
intl.formatMessage({ id: 'filePanel.cancel' }),
302+
() => {}
303+
)
295304
} catch (error) {
296305
props.modal(
297-
intl.formatMessage({id: 'filePanel.movingFileFailed'}),
298-
intl.formatMessage({id: 'filePanel.movingFileFailedMsg'}, {src}),
299-
intl.formatMessage({id: 'filePanel.close'}),
306+
intl.formatMessage({ id: 'filePanel.movingFileFailed' }),
307+
intl.formatMessage({ id: 'filePanel.movingFileFailedMsg' }, { src }),
308+
intl.formatMessage({ id: 'filePanel.close' }),
300309
async () => {}
301310
)
302311
}
303312
}
304313

305-
const handleFolderMove = (dest: string, src: string) => {
314+
const handleFolderMove = async (dest: string, src: string) => {
315+
if(await moveFolderIsAllowed(src, dest) === false) return
306316
try {
307-
props.dispatchMoveFolder(src, dest)
317+
props.modal(
318+
intl.formatMessage({ id: 'filePanel.moveFile' }),
319+
intl.formatMessage({ id: 'filePanel.moveFileMsg1' }, { src, dest }),
320+
intl.formatMessage({ id: 'filePanel.yes' }),
321+
() => props.dispatchMoveFolder(src, dest),
322+
intl.formatMessage({ id: 'filePanel.cancel' }),
323+
() => {}
324+
)
308325
} catch (error) {
309326
props.modal(
310-
intl.formatMessage({id: 'filePanel.movingFolderFailed'}),
311-
intl.formatMessage({id: 'filePanel.movingFolderFailedMsg'}, {src}),
312-
intl.formatMessage({id: 'filePanel.close'}),
327+
intl.formatMessage({ id: 'filePanel.movingFolderFailed' }),
328+
intl.formatMessage({ id: 'filePanel.movingFolderFailedMsg' }, { src }),
329+
intl.formatMessage({ id: 'filePanel.close' }),
313330
async () => {}
314331
)
315332
}
@@ -340,7 +357,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
340357
</span>
341358
</div>
342359
</li>
343-
<div className="pb-4 mb-4">
360+
<div>
344361
<TreeView id="treeViewMenu">
345362
{files[ROOT_PATH] &&
346363
Object.keys(files[ROOT_PATH]).map((key, index) => (
@@ -364,6 +381,9 @@ export const FileExplorer = (props: FileExplorerProps) => {
364381
))}
365382
</TreeView>
366383
</div>
384+
<Draggable isDraggable={false} file={{ name: '/', path: '/', type: 'folder', isDirectory: true }} expandedPath={props.expandPath} handleClickFolder={null}>
385+
<div className='d-block w-100 pb-4 mb-4'></div>
386+
</Draggable>
367387
</TreeView>
368388
</div>
369389
</Drag>

0 commit comments

Comments
 (0)