DragPreview: fixed text (#311)

Sometimes, selecting two or more files & started dragging would
incorrectly use the row under the mouse as ghost element.

This should always show "Copy x elements" instead. Current row is used as ghost element only when a single file is being dragged.

Author: warpdesign

package-lock.json

@@ -131,8 +131,8 @@
         "mobx": "^6.6.2",
         "mobx-react": "^7.5.3",
         "react": "^16.9.0",
-        "react-dnd": "^13.1.1",
-        "react-dnd-html5-backend": "^12.1.1",
+        "react-dnd": "^14.0.5",
+        "react-dnd-html5-backend": "^14.1.0",
         "react-dnd-text-dragpreview": "^0.2.3",
         "react-dom": "^16.9.0",
         "react-i18next": "^12.0.0",

package.json

@@ -155,10 +155,9 @@ export function RowRendererFn({
     }
 
     if (fileCache.isVisible) {
-        if (selectedCount > 1) {
-            connectDragPreview(createPreview(selectedCount, isDarkModeActive))
-        } else {
-            connectDragPreview(undefined)
+        const img = selectedCount > 1 ? createPreview(selectedCount, isDarkModeActive) : undefined
+        if (img) {
+            img.onload = () => connectDragPreview(img)
         }
     }
 

src/components/RowRenderer.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { Menu, MenuItem, MenuDivider, Intent } from '@blueprintjs/core'
-import { AppState } from '$src/state/appState'
 import { useStores } from '$src/hooks/useStores'
 import { File, sameID } from '$src/services/Fs'
 import { useTranslation } from 'react-i18next'