import React = require ( "react" ) ; import { useDrop } from "react-dnd" ; interface DraggedField { type : string ; index : number ; } export function DropZone ( props ) { const { dragDropType , index , move } = props ; const [ collectedProps , drop ] = useDrop ( { accept : dragDropType , canDrop : item => { return index < item . index || index > item . index + 1 ; } , drop : ( item ) => { const from = item . index ; const to = index ; if ( to > from ) { move ( from , to - 1 ) ; } else { move ( from , to ) ; } } , collect : monitor => { return { isOver : monitor . isOver ( ) , canDrop : monitor . canDrop ( ) } ; } } ) ; let className = "drop-zone" ; if ( collectedProps . isOver ) { className += "--is-over" ; } if ( collectedProps . canDrop ) { className += "--can-drop" ; } return < div className = { className } ref = { drop } / > ; }