feat(dnd): add preview of an item inside cell while dragging (#1369)

examples/demos/dndOutsideSource.js

@@ -21,11 +21,22 @@ class Dnd extends React.Component {
         item1: 0,
         item2: 0,
       },
+      displayDragItemInCell: true,
     }
   }
 
-  handleDragStart = name => {
-    this.setState({ draggedEvent: name })
+  handleDragStart = event => {
+    this.setState({ draggedEvent: event })
+  }
+
+  handleDisplayDragItemInCell = () => {
+    this.setState({
+      displayDragItemInCell: !this.state.displayDragItemInCell,
+    })
+  }
+
+  dragFromOutsideItem = () => {
+    return this.state.draggedEvent
   }
 
   customOnDragOver = event => {
@@ -43,14 +54,14 @@ class Dnd extends React.Component {
   onDropFromOutside = ({ start, end, allDay }) => {
     const { draggedEvent, counters } = this.state
     const event = {
-      title: formatName(draggedEvent, counters[draggedEvent]),
+      title: formatName(draggedEvent.name, counters[draggedEvent.name]),
       start,
       end,
       isAllDay: allDay,
     }
     const updatedCounters = {
       ...counters,
-      [draggedEvent]: counters[draggedEvent] + 1,
+      [draggedEvent.name]: counters[draggedEvent.name] + 1,
     }
     this.setState({ draggedEvent: null, counters: updatedCounters })
     this.newEvent(event)
@@ -114,16 +125,35 @@ class Dnd extends React.Component {
   render() {
     return (
       <div>
-        <Card
-          className="examples--header"
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            flexWrap: 'wrap',
-          }}
-        >
-          <h4 style={{ color: 'gray', width: '100%' }}>Outside Drag Sources</h4>
-          {Object.entries(this.state.counters).map(([name, count]) => (
+        <Card className="examples--header" style={{ display: 'flex' }}>
+          <div
+            style={{
+              display: 'flex',
+              flex: 1,
+              justifyContent: 'center',
+              flexWrap: 'wrap',
+            }}
+          >
+            <h4 style={{ color: 'gray', width: '100%' }}>
+              Outside Drag Sources
+            </h4>
+            {Object.entries(this.state.counters).map(([name, count]) => (
+              <div
+                style={{
+                  border: '2px solid gray',
+                  borderRadius: '4px',
+                  width: '100px',
+                  margin: '10px',
+                }}
+                draggable="true"
+                key={name}
+                onDragStart={() =>
+                  this.handleDragStart({ title: formatName(name, count), name })
+                }
+              >
+                {formatName(name, count)}
+              </div>
+            ))}
             <div
               style={{
                 border: '2px solid gray',
@@ -133,30 +163,32 @@ class Dnd extends React.Component {
               }}
               draggable="true"
               key={name}
-              onDragStart={() => this.handleDragStart(name)}
+              onDragStart={() => this.handleDragStart('undroppable')}
             >
-              {formatName(name, count)}
+              Draggable but not for calendar.
             </div>
-          ))}
-          <div
-            style={{
-              border: '2px solid gray',
-              borderRadius: '4px',
-              width: '100px',
-              margin: '10px',
-            }}
-            draggable="true"
-            key={name}
-            onDragStart={() => this.handleDragStart('undroppable')}
-          >
-            Draggable but not for calendar.
+          </div>
+
+          <div>
+            <label>
+              <input
+                style={{ marginRight: 5 }}
+                type="checkbox"
+                checked={this.state.displayDragItemInCell}
+                onChange={this.handleDisplayDragItemInCell}
+              />
+              Display dragged item in cell while dragging over
+            </label>
           </div>
         </Card>
         <DragAndDropCalendar
           selectable
           localizer={this.props.localizer}
           events={this.state.events}
           onEventDrop={this.moveEvent}
+          dragFromOutsideItem={
+            this.state.displayDragItemInCell ? this.dragFromOutsideItem : null
+          }
           onDropFromOutside={this.onDropFromOutside}
           onDragOver={this.customOnDragOver}
           resizable

src/Selection.js

@@ -56,6 +56,9 @@ class Selection {
     this._handleTerminatingEvent = this._handleTerminatingEvent.bind(this)
     this._keyListener = this._keyListener.bind(this)
     this._dropFromOutsideListener = this._dropFromOutsideListener.bind(this)
+    this._dragOverFromOutsideListener = this._dragOverFromOutsideListener.bind(
+      this
+    )
 
     // Fixes an iOS 10 bug where scrolling could not be prevented on the window.
     // https://github.com/metafizzy/flickity/issues/457#issuecomment-254501356
@@ -70,6 +73,10 @@ class Selection {
       'drop',
       this._dropFromOutsideListener
     )
+    this._onDragOverfromOutisde = addEventListener(
+      'dragover',
+      this._dragOverFromOutsideListener
+    )
     this._addInitialEventListener()
   }
 
@@ -105,6 +112,7 @@ class Selection {
     this._onMoveListener && this._onMoveListener.remove()
     this._onKeyUpListener && this._onKeyUpListener.remove()
     this._onKeyDownListener && this._onKeyDownListener.remove()
+    this._onDropFromOutsideListener && this._onDragOverfromOutisde.remove()
   }
 
   isSelected(node) {
@@ -207,6 +215,19 @@ class Selection {
     e.preventDefault()
   }
 
+  _dragOverFromOutsideListener(e) {
+    const { pageX, pageY, clientX, clientY } = getEventCoordinates(e)
+
+    this.emit('dragOverFromOutside', {
+      x: pageX,
+      y: pageY,
+      clientX: clientX,
+      clientY: clientY,
+    })
+
+    e.preventDefault()
+  }
+
   _handleInitialEvent(e) {
     if (this.isDetached) {
       return

src/addons/dragAndDrop/EventContainerWrapper.js

@@ -34,6 +34,7 @@ class EventContainerWrapper extends React.Component {
       onDropFromOutside: PropTypes.func,
       onBeginAction: PropTypes.func,
       dragAndDropAction: PropTypes.object,
+      dragFromOutsideItem: PropTypes.func,
     }),
   }
 
@@ -168,6 +169,14 @@ class EventContainerWrapper extends React.Component {
       this.handleDropFromOutside(point, bounds)
     })
 
+    selector.on('dragOver', point => {
+      if (!this.context.draggable.dragFromOutsideItem) return
+
+      const bounds = getBoundsForNode(node)
+
+      this.handleDropFromOutside(point, bounds)
+    })
+
     selector.on('selectStart', () => this.context.draggable.onStart())
 
     selector.on('select', point => {

src/addons/dragAndDrop/WeekWrapper.js

@@ -39,6 +39,7 @@ class WeekWrapper extends React.Component {
       dragAndDropAction: PropTypes.object,
       onDropFromOutside: PropTypes.func,
       onBeginAction: PropTypes.func,
+      dragFromOutsideItem: PropTypes.func,
     }),
   }
 
@@ -78,8 +79,8 @@ class WeekWrapper extends React.Component {
     this.setState({ segment })
   }
 
-  handleMove = ({ x, y }, node) => {
-    const { event } = this.context.draggable.dragAndDropAction
+  handleMove = ({ x, y }, node, draggedEvent) => {
+    const { event = draggedEvent } = this.context.draggable.dragAndDropAction
     const metrics = this.props.slotMetrics
     const { accessors } = this.props
 
@@ -122,6 +123,16 @@ class WeekWrapper extends React.Component {
     })
   }
 
+  handleDragOverFromOutside = ({ x, y }, node) => {
+    if (!this.context.draggable.dragFromOutsideItem) return
+
+    this.handleMove(
+      { x, y },
+      node,
+      this.context.draggable.dragFromOutsideItem()
+    )
+  }
+
   handleResize(point, node) {
     const { event, direction } = this.context.draggable.dragAndDropAction
     const { accessors, slotMetrics: metrics } = this.props
@@ -220,6 +231,14 @@ class WeekWrapper extends React.Component {
       this.handleDropFromOutside(point, bounds)
     })
 
+    selector.on('dragOverFromOutside', point => {
+      if (!this.context.draggable.dragFromOutsideItem) return
+
+      const bounds = getBoundsForNode(node)
+
+      this.handleDragOverFromOutside(point, bounds)
+    })
+
     selector.on('click', () => this.context.draggable.onEnd(null))
   }
 

src/addons/dragAndDrop/withDragAndDrop.js

@@ -72,6 +72,8 @@ export default function withDragAndDrop(Calendar) {
       onDragOver: PropTypes.func,
       onDropFromOutside: PropTypes.func,
 
+      dragFromOutsideItem: PropTypes.func,
+
       draggableAccessor: accessor,
       resizableAccessor: accessor,
 
@@ -100,6 +102,7 @@ export default function withDragAndDrop(Calendar) {
         onEnd: PropTypes.func,
         onBeginAction: PropTypes.func,
         onDropFromOutside: PropTypes.fun,
+        dragFromOutsideItem: PropTypes.fun,
         draggableAccessor: accessor,
         resizableAccessor: accessor,
         dragAndDropAction: PropTypes.object,
@@ -127,6 +130,7 @@ export default function withDragAndDrop(Calendar) {
           onEnd: this.handleInteractionEnd,
           onBeginAction: this.handleBeginAction,
           onDropFromOutside: this.props.onDropFromOutside,
+          dragFromOutsideItem: this.props.dragFromOutsideItem,
           draggableAccessor: this.props.draggableAccessor,
           resizableAccessor: this.props.resizableAccessor,
           dragAndDropAction: this.state,