import * as React from 'react' ; import { HTMLProps } from 'react' ; import { useTree } from './Tree' ; import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider' ; export const DragBetweenLine = props => { const { draggingPosition , itemHeight } = useDragAndDrop ( ) ; const { renderers } = useTree ( ) ; const shouldDisplay = draggingPosition && draggingPosition . targetType === 'between-items' && draggingPosition . treeId === props . treeId ; if ( ! shouldDisplay ) { return null ; } const lineProps = { onDragOver : e => e . preventDefault ( ) } ; return ( < div style = { { position : 'absolute' , left : '0' , right : '0' , top : `${ ( draggingPosition ?. linearIndex ?? 0 ) * itemHeight }px` } } > { renderers . renderDragBetweenLine ( { draggingPosition : draggingPosition ! , lineProps } ) } < /div>); } ;