fix: filemetadata available on dragstart (#1610)

* fix: filemetadata available on dragstart

* refactor: rename mutateItemByReadingDataTransfer to loadDataTransfer

This commit also streamlines the condition we use to pass the dataTransfer object to the NativeDragSource.

* refactor: streamline datatransfer passing

* docs: improve native-files typings

* fix: update loadDataTransfer to accept null

* fix: linting issue

packages/core/html5-backend/src/HTML5Backend.ts

@@ -258,10 +258,10 @@ export default class HTML5Backend implements Backend {
 		)
 	}
 
-	private beginDragNativeItem(type: string) {
+	private beginDragNativeItem(type: string, dataTransfer?: DataTransfer) {
 		this.clearCurrentDragSourceNode()
 
-		this.currentNativeSource = createNativeDragSource(type)
+		this.currentNativeSource = createNativeDragSource(type, dataTransfer)
 		this.currentNativeHandle = this.registry.addSource(
 			type,
 			this.currentNativeSource,
@@ -499,7 +499,7 @@ export default class HTML5Backend implements Backend {
 
 		if (nativeType) {
 			// A native item (such as file or URL) dragged from outside the document
-			this.beginDragNativeItem(nativeType)
+			this.beginDragNativeItem(nativeType, dataTransfer as DataTransfer)
 		}
 	}
 
@@ -614,7 +614,7 @@ export default class HTML5Backend implements Backend {
 		e.preventDefault()
 
 		if (this.isDraggingNativeItem()) {
-			this.currentNativeSource!.mutateItemByReadingDataTransfer(e.dataTransfer)
+			this.currentNativeSource!.loadDataTransfer(e.dataTransfer)
 		}
 
 		this.enterLeaveCounter.reset()

packages/core/html5-backend/src/NativeDragSources/NativeDragSource.ts

@@ -8,6 +8,10 @@ export class NativeDragSource {
 	public constructor(config: NativeItemConfig) {
 		this.config = config
 		this.item = {}
+		this.initializeExposedProperties()
+	}
+
+	private initializeExposedProperties() {
 		Object.keys(this.config.exposeProperties).forEach(property => {
 			Object.defineProperty(this.item, property, {
 				configurable: true, // This is needed to allow redefining it later
@@ -23,19 +27,21 @@ export class NativeDragSource {
 		})
 	}
 
-	public mutateItemByReadingDataTransfer(dataTransfer: DataTransfer | null) {
-		const newProperties: PropertyDescriptorMap = {}
+	public loadDataTransfer(dataTransfer: DataTransfer | null | undefined) {
 		if (dataTransfer) {
+			const newProperties: PropertyDescriptorMap = {}
 			Object.keys(this.config.exposeProperties).forEach(property => {
 				newProperties[property] = {
 					value: this.config.exposeProperties[property](
 						dataTransfer,
 						this.config.matchesTypes,
 					),
+					configurable: true,
+					enumerable: true,
 				}
 			})
+			Object.defineProperties(this.item, newProperties)
 		}
-		Object.defineProperties(this.item, newProperties)
 	}
 
 	public canDrag() {

packages/core/html5-backend/src/NativeDragSources/index.ts

@@ -1,8 +1,13 @@
 import { nativeTypesConfig } from './nativeTypesConfig'
 import { NativeDragSource } from './NativeDragSource'
 
-export function createNativeDragSource(type: string): NativeDragSource {
-	return new NativeDragSource(nativeTypesConfig[type])
+export function createNativeDragSource(
+	type: string,
+	dataTransfer?: DataTransfer,
+): NativeDragSource {
+	const result = new NativeDragSource(nativeTypesConfig[type])
+	result.loadDataTransfer(dataTransfer)
+	return result
 }
 
 export function matchNativeItemType(

packages/documentation/examples-hooks/src/06-other/native-files/FileList.tsx

@@ -1,11 +1,11 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 
 export interface FileListProps {
-	files: any[]
+	files: File[]
 }
 
-function list(files: any[]) {
-	const label = (file: { size: string; name: string; type: string }) =>
+function list(files: File[]) {
+	const label = (file: File) =>
 		`'${file.name}' of size '${file.size}' and type '${file.type}'`
 	return files.map(file => <li key={file.name}>{label(file)}</li>)
 }
@@ -14,7 +14,8 @@ const FileList: React.FC<FileListProps> = ({ files }) => {
 	if (files.length === 0) {
 		return <div>Nothing to display</div>
 	}
-	return <div>{list(files)}</div>
+	const fileList = useMemo(() => list(files), [files])
+	return <div>{fileList}</div>
 }
 
 export default FileList

packages/documentation/examples-hooks/src/06-other/native-files/index.tsx

@@ -5,7 +5,7 @@ import TargetBox from './TargetBox'
 import FileList from './FileList'
 
 const Container: React.FC = () => {
-	const [droppedFiles, setDroppedFiles] = useState([])
+	const [droppedFiles, setDroppedFiles] = useState<File[]>([])
 
 	const handleFileDrop = useCallback(
 		(item: any, monitor: DropTargetMonitor) => {