import React , { ReactElement } from "react" ; import { DragDropContext , Droppable , DroppableProvided , DroppableStateSnapshot , DropResult } from "react-beautiful-dnd" ; import { ListManagerItem } from "./ListManagerItem" ; import hash from "object-hash" ; interface Location { id : string ; index : number ; } export interface DragAndDropResult { source : Location ; destination : Location ; } export interface Chunk { id : string ; items : any [ ] ; } export interface Props { chunks : Chunk [ ] ; direction : "horizontal" | "vertical" ; render ( item ) : ReactElement < { } > ; onDragEnd ( result ) : void ; } const horizontalStyle = { display : "flex" , flexDirection : "row" , alignItems : "flex-start" } ; export const DragAndDropWrapper = ( { onDragEnd , chunks , direction , render } ) => { return ( < DragDropContext onDragEnd = { mapAndInvoke ( onDragEnd ) } > { chunks . map ( ( { id : droppableId , items } ) => ( < Droppable key = { droppableId } droppableId = { droppableId } direction = { direction } > { ( provided , _ ) => ( < div ref = { provided . innerRef } style = { direction === "horizontal" ? horizontalStyle : undefined } { ... provided . droppableProps } > { items . map ( ( item , index ) => ( < ListManagerItem key = { hash ( item ) } item = { item } index = { index } render = { render } / > ) ) } { provided . placeholder } < /div>)} < /Droppable>))} < /DragDropContext>); } ; function mapAndInvoke ( onDragEnd ) { return function ( { source , destination } ) : void { if ( destination !== undefined && destination !== null ) { const result = { source : { id : source . droppableId , index : source . index } , destination : { id : destination . droppableId , index : destination . index } } ; onDragEnd ( result ) ; } } ; }