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

…2651)

Based on the work of @achrafl0 in #2616

closes #2383

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}