From e3e1e0c4c1bec88a84f347116963d94db002110b Mon Sep 17 00:00:00 2001 From: Juliusz Gonera Date: Sun, 18 Jul 2021 15:21:37 -0700 Subject: [PATCH 1/4] WIP Add a debugging case for hovering files Temporarily, remove before merging. --- .../src/06-other/native-files/TargetBox.tsx | 22 +++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/packages/examples-hooks/src/06-other/native-files/TargetBox.tsx b/packages/examples-hooks/src/06-other/native-files/TargetBox.tsx index e99e2eb2b9..ec525ec2fb 100644 --- a/packages/examples-hooks/src/06-other/native-files/TargetBox.tsx +++ b/packages/examples-hooks/src/06-other/native-files/TargetBox.tsx @@ -24,10 +24,24 @@ export const TargetBox: FC = (props) => { onDrop(item) } }, - collect: (monitor: DropTargetMonitor) => ({ - isOver: monitor.isOver(), - canDrop: monitor.canDrop(), - }), + canDrop(item: any) { + console.log("canDrop", item.files[0], item.items[0]); + return true; + }, + hover(item: any) { + console.log("hover", item.files[0], item.items[0]); + }, + collect: (monitor: DropTargetMonitor) => { + const item = monitor.getItem() as any; + if (item) { + console.log("collect", item.files[0], item.items[0]); + } + + return { + isOver: monitor.isOver(), + canDrop: monitor.canDrop() + }; + } }), [props], ) From 9886e62d994406f0a8b4a9d31b0489ba49fbd77e Mon Sep 17 00:00:00 2001 From: Juliusz Gonera Date: Sun, 18 Jul 2021 15:22:30 -0700 Subject: [PATCH 2/4] Load dataTransfer in every dragenter and dragover Chrome (and apparently Safari too) will empty the `DataTransferItemList` after a given drag event is done so we need to point `NativeDragSource` to a new list on each dragenter/dragover event. See https://bugs.chromium.org/p/chromium/issues/detail?id=137231 Fixes https://github.com/react-dnd/react-dnd/issues/584 --- packages/backend-html5/src/HTML5BackendImpl.ts | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/backend-html5/src/HTML5BackendImpl.ts b/packages/backend-html5/src/HTML5BackendImpl.ts index a9359fdd30..7433f48150 100644 --- a/packages/backend-html5/src/HTML5BackendImpl.ts +++ b/packages/backend-html5/src/HTML5BackendImpl.ts @@ -202,7 +202,7 @@ export class HTML5BackendImpl implements Backend { true, ) target.addEventListener('dragover', this.handleTopDragOver as EventListener) - target.addEventListener('dragover', this.handleTopDragOverCapture, true) + target.addEventListener('dragover', this.handleTopDragOverCapture as EventListener, true) target.addEventListener('drop', this.handleTopDrop as EventListener) target.addEventListener( 'drop', @@ -241,7 +241,7 @@ export class HTML5BackendImpl implements Backend { 'dragover', this.handleTopDragOver as EventListener, ) - target.removeEventListener('dragover', this.handleTopDragOverCapture, true) + target.removeEventListener('dragover', this.handleTopDragOverCapture as EventListener, true) target.removeEventListener('drop', this.handleTopDrop as EventListener) target.removeEventListener( 'drop', @@ -528,6 +528,10 @@ export class HTML5BackendImpl implements Backend { public handleTopDragEnterCapture = (e: DragEvent): void => { this.dragEnterTargetIds = [] + if (this.isDraggingNativeItem()) { + this.currentNativeSource?.loadDataTransfer(e.dataTransfer) + } + const isFirstEnter = this.enterLeaveCounter.enter(e.target) if (!isFirstEnter || this.monitor.isDragging()) { return @@ -579,8 +583,12 @@ export class HTML5BackendImpl implements Backend { } } - public handleTopDragOverCapture = (): void => { + public handleTopDragOverCapture = (e: DragEvent): void => { this.dragOverTargetIds = [] + + if (this.isDraggingNativeItem()) { + this.currentNativeSource?.loadDataTransfer(e.dataTransfer) + } } public handleDragOver(e: DragEvent, targetId: string): void { From 723d123c1a975a773b8a49102ed7a4b0cffb524f Mon Sep 17 00:00:00 2001 From: Chris Trevino Date: Thu, 3 Feb 2022 15:04:08 -0800 Subject: [PATCH 3/4] chore: cut semver --- .yarn/versions/dba13c30.yml | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .yarn/versions/dba13c30.yml diff --git a/.yarn/versions/dba13c30.yml b/.yarn/versions/dba13c30.yml new file mode 100644 index 0000000000..3379c82ab6 --- /dev/null +++ b/.yarn/versions/dba13c30.yml @@ -0,0 +1,7 @@ +releases: + react-dnd-examples: patch + react-dnd-html5-backend: patch + react-dnd-test-utils: patch + +declined: + - react-dnd-documentation From 5d13364751ed3bc2b323910fa26c5b7d9b63001c Mon Sep 17 00:00:00 2001 From: Chris Trevino Date: Thu, 3 Feb 2022 15:12:09 -0800 Subject: [PATCH 4/4] fix: run prettier --- packages/backend-html5/src/HTML5BackendImpl.ts | 12 ++++++++++-- .../src/06-other/native-files/TargetBox.tsx | 16 ++++++++-------- 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/packages/backend-html5/src/HTML5BackendImpl.ts b/packages/backend-html5/src/HTML5BackendImpl.ts index 451793057d..50c6cdab80 100644 --- a/packages/backend-html5/src/HTML5BackendImpl.ts +++ b/packages/backend-html5/src/HTML5BackendImpl.ts @@ -205,7 +205,11 @@ export class HTML5BackendImpl implements Backend { true, ) target.addEventListener('dragover', this.handleTopDragOver as EventListener) - target.addEventListener('dragover', this.handleTopDragOverCapture as EventListener, true) + target.addEventListener( + 'dragover', + this.handleTopDragOverCapture as EventListener, + true, + ) target.addEventListener('drop', this.handleTopDrop as EventListener) target.addEventListener( 'drop', @@ -244,7 +248,11 @@ export class HTML5BackendImpl implements Backend { 'dragover', this.handleTopDragOver as EventListener, ) - target.removeEventListener('dragover', this.handleTopDragOverCapture as EventListener, true) + target.removeEventListener( + 'dragover', + this.handleTopDragOverCapture as EventListener, + true, + ) target.removeEventListener('drop', this.handleTopDrop as EventListener) target.removeEventListener( 'drop', diff --git a/packages/examples/src/06-other/native-files/TargetBox.tsx b/packages/examples/src/06-other/native-files/TargetBox.tsx index ec525ec2fb..a7fcbac119 100644 --- a/packages/examples/src/06-other/native-files/TargetBox.tsx +++ b/packages/examples/src/06-other/native-files/TargetBox.tsx @@ -25,23 +25,23 @@ export const TargetBox: FC = (props) => { } }, canDrop(item: any) { - console.log("canDrop", item.files[0], item.items[0]); - return true; + console.log('canDrop', item.files[0], item.items[0]) + return true }, hover(item: any) { - console.log("hover", item.files[0], item.items[0]); + console.log('hover', item.files[0], item.items[0]) }, collect: (monitor: DropTargetMonitor) => { - const item = monitor.getItem() as any; + const item = monitor.getItem() as any if (item) { - console.log("collect", item.files[0], item.items[0]); + console.log('collect', item.files[0], item.items[0]) } return { isOver: monitor.isOver(), - canDrop: monitor.canDrop() - }; - } + canDrop: monitor.canDrop(), + } + }, }), [props], )