feat: add dragging ability from the monthly Popup component (jquense#…

…1554)

* Added dragging ability to the monthly Popup component

* Trigger Build

examples/demos/dnd.js

@@ -12,16 +12,39 @@ class Dnd extends React.Component {
     super(props)
     this.state = {
       events: events,
+      displayDragItemInCell: true,
     }
 
     this.moveEvent = this.moveEvent.bind(this)
     this.newEvent = this.newEvent.bind(this)
   }
 
-  moveEvent({ event, start, end, isAllDay: droppedOnAllDaySlot }) {
+  handleDragStart = event => {
+    this.setState({ draggedEvent: event })
+  }
+
+  dragFromOutsideItem = () => {
+    return this.state.draggedEvent
+  }
+
+  onDropFromOutside = ({ start, end, allDay }) => {
+    const { draggedEvent } = this.state
+
+    const event = {
+      id: draggedEvent.id,
+      title: draggedEvent.title,
+      start,
+      end,
+      allDay: allDay,
+    }
+
+    this.setState({ draggedEvent: null })
+    this.moveEvent({ event, start, end })
+  }
+
+  moveEvent = ({ event, start, end, isAllDay: droppedOnAllDaySlot }) => {
     const { events } = this.state
 
-    const idx = events.indexOf(event)
     let allDay = event.allDay
 
     if (!event.allDay && droppedOnAllDaySlot) {
@@ -30,10 +53,11 @@ class Dnd extends React.Component {
       allDay = false
     }
 
-    const updatedEvent = { ...event, start, end, allDay }
-
-    const nextEvents = [...events]
-    nextEvents.splice(idx, 1, updatedEvent)
+    const nextEvents = events.map(existingEvent => {
+      return existingEvent.id == event.id
+        ? { ...existingEvent, start, end }
+        : existingEvent
+    })
 
     this.setState({
       events: nextEvents,
@@ -86,6 +110,12 @@ class Dnd extends React.Component {
         onDragStart={console.log}
         defaultView={Views.MONTH}
         defaultDate={new Date(2015, 3, 12)}
+        popup={true}
+        dragFromOutsideItem={
+          this.state.displayDragItemInCell ? this.dragFromOutsideItem : null
+        }
+        onDropFromOutside={this.onDropFromOutside}
+        handleDragStart={this.handleDragStart}
       />
     )
   }

src/Month.js

@@ -214,11 +214,13 @@ class MonthView extends React.Component {
             components={components}
             localizer={localizer}
             position={overlay.position}
+            show={this.overlayDisplay}
             events={overlay.events}
             slotStart={overlay.date}
             slotEnd={overlay.end}
             onSelect={this.handleSelectEvent}
             onDoubleClick={this.handleDoubleClickEvent}
+            handleDragStart={this.props.handleDragStart}
           />
         )}
       </Overlay>
@@ -273,6 +275,12 @@ class MonthView extends React.Component {
     notify(onShowMore, [events, date, slot])
   }
 
+  overlayDisplay = () => {
+    this.setState({
+      overlay: null,
+    })
+  }
+
   selectDates(slotInfo) {
     let slots = this._pendingSelection.slice()
 
@@ -328,6 +336,7 @@ MonthView.propTypes = {
   getDrilldownView: PropTypes.func.isRequired,
 
   popup: PropTypes.bool,
+  handleDragStart: PropTypes.func,
 
   popupOffset: PropTypes.oneOfType([
     PropTypes.number,

src/Popup.js

@@ -78,6 +78,9 @@ class Popup extends React.Component {
             slotStart={slotStart}
             slotEnd={slotEnd}
             selected={isSelected(event, selected)}
+            draggable={true}
+            onDragStart={() => this.props.handleDragStart(event)}
+            onDragEnd={() => this.props.show()}
           />
         ))}
       </div>
@@ -103,6 +106,8 @@ Popup.propTypes = {
   localizer: PropTypes.object.isRequired,
   onSelect: PropTypes.func,
   onDoubleClick: PropTypes.func,
+  handleDragStart: PropTypes.func,
+  show: PropTypes.func,
   slotStart: PropTypes.instanceOf(Date),
   slotEnd: PropTypes.number,
   popperRef: PropTypes.oneOfType([