aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/DraggableList/DraggableList.tsx @ 812b9f90

import { memo } from 'react'
import { DragDropContext, Droppable, OnDragEndResponder } from 'react-beautiful-dnd'
import { MapPoint } from '../Map/pathUtils'
import DraggableListItem from './DraggableListItem'

export interface DraggableListProps {
    items: MapPoint[]
    onDragEnd: OnDragEndResponder
}

const DraggableList = memo(({ items, onDragEnd }: DraggableListProps) => {
    return (
        <DragDropContext onDragEnd={onDragEnd}>
            <Droppable droppableId="droppable-list">
                {(provided) => (
                    <div ref={provided.innerRef} {...provided.droppableProps}>
                        {items.map((item, index) => (
                            <DraggableListItem
                                list={items}
                                index={index}
                                key={item.id}
                            />
                        ))}
                        {provided.placeholder}
                    </div>
                )}
            </Droppable>
        </DragDropContext>
    )
})

export default DraggableList