fix(dnd): added check for null dragFromOutsideItem, updated example (#2651)

Based on the work of @achrafl0 in #2616

closes #2383

Author: matthiaseigner

src/addons/dragAndDrop/EventContainerWrapper.js

@@ -126,6 +126,18 @@ class EventContainerWrapper extends React.Component {
     })
   }
 
+  handleDragOverFromOutside = (point, bounds) => {
+    const { slotMetrics } = this.props
+
+    const start = slotMetrics.closestSlotFromPoint(
+      { y: point.y, x: point.x },
+      bounds
+    )
+    const end = slotMetrics.nextSlot(start)
+    const event = this.context.draggable.dragFromOutsideItem()
+    this.update(event, slotMetrics.getRange(start, end, false, true))
+  }
+
   updateParentScroll = (parent, node) => {
     setTimeout(() => {
       const draggedEl = qsa(node, '.rbc-addons-dnd-drag-preview')[0]
@@ -200,10 +212,12 @@ class EventContainerWrapper extends React.Component {
       this.handleDropFromOutside(point, bounds)
     })
 
-    selector.on('dragOver', (point) => {
-      if (!this.context.draggable.dragFromOutsideItem) return
+    selector.on('dragOverFromOutside', (point) => {
+      const item = this.context.draggable.dragFromOutsideItem ? this.context.draggable.dragFromOutsideItem() : null
+      if (!item) return
       const bounds = getBoundsForNode(node)
-      this.handleDropFromOutside(point, bounds)
+      if (!pointInColumn(bounds, point)) return this.reset()
+      this.handleDragOverFromOutside(point, bounds)
     })
 
     selector.on('selectStart', () => {

src/addons/dragAndDrop/WeekWrapper.js

@@ -91,8 +91,9 @@ class WeekWrapper extends React.Component {
   }
 
   handleDragOverFromOutside = (point, node) => {
-    if (!this.context.draggable.dragFromOutsideItem) return
-    this.handleMove(point, node, this.context.draggable.dragFromOutsideItem())
+    const item = this.context.draggable.dragFromOutsideItem ? this.context.draggable.dragFromOutsideItem() : null
+    if (!item) return
+    this.handleMove(point, node, item)
   }
 
   handleResize(point, bounds) {

stories/demos/exampleCode/dndOutsideSource.js

@@ -35,9 +35,9 @@ export default function DnDOutsideResource({ localizer }) {
   //,
   const handleDragStart = useCallback((event) => setDraggedEvent(event), [])
 
-  const dragFromOutsideItem = useCallback(() => draggedEvent, [draggedEvent])
+  const dragFromOutsideItem = useCallback(() => draggedEvent === 'undroppable' ? null : draggedEvent, [draggedEvent])
 
-  const customOnDragOver = useCallback(
+  const customOnDragOverFromOutside = useCallback(
     (dragEvent) => {
       // check for undroppable is specific to this example
       // and not part of API. This just demonstrates that
@@ -177,7 +177,7 @@ export default function DnDOutsideResource({ localizer }) {
           events={myEvents}
           localizer={localizer}
           onDropFromOutside={onDropFromOutside}
-          onDragOver={customOnDragOver}
+          onDragOverFromOutside={customOnDragOverFromOutside}
           onEventDrop={moveEvent}
           onEventResize={resizeEvent}
           onSelectSlot={newEvent}