import { DragEvent } from 'react' ; import { useDragOver } from '../../hooks' ; import { DRAG_ITEM_KEY , DRAG_ITEM_ID_KEY } from './constants' ; param dragFilter param dropEffect param dropCallback returns const useItemsDroppable = ( dragFilter , dropEffect = 'move' , dropCallback ) => { const [ dragOver , dragProps ] = useDragOver ( ( event ) => event . dataTransfer . types . includes ( DRAG_ITEM_KEY ) && dragFilter ( event ) , dropEffect ) ; const handleDrop = async ( event ) => { dragProps . onDrop ( event ) ; const dragElement = document . getElementById ( event . dataTransfer . getData ( DRAG_ITEM_ID_KEY ) ) ; const dragendEvent = new Event ( 'dragend' ) as any ; dragendEvent . dataTransfer = event . dataTransfer ; dragendEvent . dataTransfer . dropEffect = dropEffect ; dragElement ?. dispatchEvent ( dragendEvent ) ; const itemIDs = JSON . parse ( event . dataTransfer . getData ( DRAG_ITEM_KEY ) ) as string [ ] ; void dropCallback ( itemIDs ) ; } ; return { dragOver , dragProps , handleDrop } ; } ; export default useItemsDroppable ;