import { useCallback } from "react" ; import { useActionCreator } from "../hooks" ; import * as Actions from "../actionCreators" ; import { WindowId } from "../types" ; interface Coord { x : number ; y : number ; } interface Props extends React . HTMLAttributes < HTMLDivElement > { handleDrop ( e , coord ) : void ; windowId : WindowId ; } function supress ( e ) { e . stopPropagation ( ) ; e . preventDefault ( ) ; e . dataTransfer . dropEffect = "link" ; e . dataTransfer . effectAllowed = "link" ; } const DropTarget = ( props ) => { const { handleDrop , windowId , ... passThroughProps } = props ; const droppedFiles = useActionCreator ( Actions . droppedFiles ) ; const onDrop = useCallback ( ( e ) => { supress ( e ) ; droppedFiles ( e , windowId ) ; const { currentTarget } = e ; if ( ! ( currentTarget instanceof Element ) ) { return ; } const { left : x , top : y } = currentTarget . getBoundingClientRect ( ) ; handleDrop ( e , { x , y } ) ; } , [ handleDrop , droppedFiles , windowId ] ) ; return ( < div { ... passThroughProps } onDragStart = { supress } onDragEnter = { supress } onDragOver = { supress } onDrop = { onDrop } / > ) ; } ; export default DropTarget ;