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

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
}

window.addEventListener('error', (e) => {
    if (
        e.message ===
            'ResizeObserver loop completed with undelivered notifications.' ||
        e.message === 'ResizeObserver loop limit exceeded'
    ) {
        e.stopImmediatePropagation()
    }
})

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}
                                idx={index}
                                key={item.id}
                            />
                        ))}
                        {provided.placeholder}
                    </div>
                )}
            </Droppable>
        </DragDropContext>
    )
})

export default DraggableList