From 5e137e5efcf8f736334fb4994d71a30577a49f2d Mon Sep 17 00:00:00 2001 From: Nicolas Ramz Date: Mon, 21 Nov 2022 16:27:22 +0100 Subject: [PATCH] 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. --- package-lock.json | 60 ++++++++++++------------ package.json | 4 +- src/components/RowRenderer.tsx | 7 ++- src/components/menus/FileContextMenu.tsx | 1 - 4 files changed, 35 insertions(+), 37 deletions(-) diff --git a/package-lock.json b/package-lock.json index c3975d66..a371fe77 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,8 +27,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", @@ -5389,13 +5389,13 @@ } }, "node_modules/dnd-core": { - "version": "12.0.1", - "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-12.0.1.tgz", - "integrity": "sha512-KzfKXQM9t9uSBO7DFmrILVgXUCShpY3/MbnLPF9/wg1Wcvq2KblbeT72GhjcrplS9cz0DFXilE1NXy43n8plag==", + "version": "14.0.1", + "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-14.0.1.tgz", + "integrity": "sha512-+PVS2VPTgKFPYWo3vAFEA8WPbTf7/xo43TifH9G8S1KqnrQu0o77A3unrF5yOugy4mIz7K5wAVFHUcha7wsz6A==", "dependencies": { "@react-dnd/asap": "^4.0.0", "@react-dnd/invariant": "^2.0.0", - "redux": "^4.0.5" + "redux": "^4.1.1" } }, "node_modules/doctrine": { @@ -6677,8 +6677,7 @@ "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", - "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", - "dev": true + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, "node_modules/fast-diff": { "version": "1.2.0", @@ -12466,13 +12465,14 @@ } }, "node_modules/react-dnd": { - "version": "13.1.1", - "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-13.1.1.tgz", - "integrity": "sha512-oxQW8846omV1l3Pm2zY/atvNxryx+blW1rxnSmoGvFMgmxXpOHulaXrlXgxRH+OLRvLt2cfVTSxZ4ykbzBypaw==", + "version": "14.0.5", + "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-14.0.5.tgz", + "integrity": "sha512-9i1jSgbyVw0ELlEVt/NkCUkxy1hmhJOkePoCH713u75vzHGyXhPDm28oLfc2NMSBjZRM1Y+wRjHXJT3sPrTy+A==", "dependencies": { "@react-dnd/invariant": "^2.0.0", "@react-dnd/shallowequal": "^2.0.0", - "dnd-core": "12.0.1", + "dnd-core": "14.0.1", + "fast-deep-equal": "^3.1.3", "hoist-non-react-statics": "^3.3.2" }, "peerDependencies": { @@ -12494,11 +12494,11 @@ } }, "node_modules/react-dnd-html5-backend": { - "version": "12.1.1", - "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-12.1.1.tgz", - "integrity": "sha512-cQZgfuSGQEwHdvdoPtfUOvcrS8rye/V0hU046LjY/BLSgcrdjtQVviE2d/81QQaeJpvK00JizctsZqVY7IvHgA==", + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-14.1.0.tgz", + "integrity": "sha512-6ONeqEC3XKVf4eVmMTe0oPds+c5B9Foyj8p/ZKLb7kL2qh9COYxiBHv3szd6gztqi/efkmriywLUVlPotqoJyw==", "dependencies": { - "dnd-core": "12.0.1" + "dnd-core": "14.0.1" } }, "node_modules/react-dnd-text-dragpreview": { @@ -19662,13 +19662,13 @@ } }, "dnd-core": { - "version": "12.0.1", - "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-12.0.1.tgz", - "integrity": "sha512-KzfKXQM9t9uSBO7DFmrILVgXUCShpY3/MbnLPF9/wg1Wcvq2KblbeT72GhjcrplS9cz0DFXilE1NXy43n8plag==", + "version": "14.0.1", + "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-14.0.1.tgz", + "integrity": "sha512-+PVS2VPTgKFPYWo3vAFEA8WPbTf7/xo43TifH9G8S1KqnrQu0o77A3unrF5yOugy4mIz7K5wAVFHUcha7wsz6A==", "requires": { "@react-dnd/asap": "^4.0.0", "@react-dnd/invariant": "^2.0.0", - "redux": "^4.0.5" + "redux": "^4.1.1" } }, "doctrine": { @@ -20649,8 +20649,7 @@ "fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", - "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", - "dev": true + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, "fast-diff": { "version": "1.2.0", @@ -25042,22 +25041,23 @@ } }, "react-dnd": { - "version": "13.1.1", - "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-13.1.1.tgz", - "integrity": "sha512-oxQW8846omV1l3Pm2zY/atvNxryx+blW1rxnSmoGvFMgmxXpOHulaXrlXgxRH+OLRvLt2cfVTSxZ4ykbzBypaw==", + "version": "14.0.5", + "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-14.0.5.tgz", + "integrity": "sha512-9i1jSgbyVw0ELlEVt/NkCUkxy1hmhJOkePoCH713u75vzHGyXhPDm28oLfc2NMSBjZRM1Y+wRjHXJT3sPrTy+A==", "requires": { "@react-dnd/invariant": "^2.0.0", "@react-dnd/shallowequal": "^2.0.0", - "dnd-core": "12.0.1", + "dnd-core": "14.0.1", + "fast-deep-equal": "^3.1.3", "hoist-non-react-statics": "^3.3.2" } }, "react-dnd-html5-backend": { - "version": "12.1.1", - "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-12.1.1.tgz", - "integrity": "sha512-cQZgfuSGQEwHdvdoPtfUOvcrS8rye/V0hU046LjY/BLSgcrdjtQVviE2d/81QQaeJpvK00JizctsZqVY7IvHgA==", + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-14.1.0.tgz", + "integrity": "sha512-6ONeqEC3XKVf4eVmMTe0oPds+c5B9Foyj8p/ZKLb7kL2qh9COYxiBHv3szd6gztqi/efkmriywLUVlPotqoJyw==", "requires": { - "dnd-core": "12.0.1" + "dnd-core": "14.0.1" } }, "react-dnd-text-dragpreview": { diff --git a/package.json b/package.json index 15063300..9caaf274 100644 --- a/package.json +++ b/package.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", diff --git a/src/components/RowRenderer.tsx b/src/components/RowRenderer.tsx index 295b3437..bd9d3f12 100644 --- a/src/components/RowRenderer.tsx +++ b/src/components/RowRenderer.tsx @@ -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) } } diff --git a/src/components/menus/FileContextMenu.tsx b/src/components/menus/FileContextMenu.tsx index c8c6d885..82af9899 100644 --- a/src/components/menus/FileContextMenu.tsx +++ b/src/components/menus/FileContextMenu.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'