aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/Controls/DragDropCtxWrapper.tsx @ 14588cb6

import { memo } from 'react'
import {
    DragDropContext,
    Droppable,
    OnDragEndResponder,
} from 'react-beautiful-dnd'
import { MapPoint } from '../trackingToolUtils'
import MapPointDraggableListItem from './MapPointDraggableListItem'

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 DragDropCtxWrapper = memo(({ items, onDragEnd }: DraggableListProps) => {
    return (
        <DragDropContext onDragEnd={onDragEnd}>
            <Droppable droppableId="droppable-list">
                {(provided) => (
                    <div ref={provided.innerRef} {...provided.droppableProps}>
                        {items.map((item, index) => (
                            <MapPointDraggableListItem
                                list={items}
                                idx={index}
                                key={item.reactId}
                            />
                        ))}
                        {provided.placeholder}
                    </div>
                )}
            </Droppable>
        </DragDropContext>
    )
})

export default DragDropCtxWrapper