Provide onDropFromOutside prop for Dnd Cal

examples/App.js

@@ -25,6 +25,7 @@ import Resource from './demos/resource'
 import DndResource from './demos/dndresource'
 import Timeslots from './demos/timeslots'
 import Dnd from './demos/dnd'
+import DndOutsideSource from './demos/dndOutsideSource'
 import Dropdown from 'react-bootstrap/lib/Dropdown'
 import MenuItem from 'react-bootstrap/lib/MenuItem'
 
@@ -43,6 +44,7 @@ const EXAMPLES = {
   customView: 'Custom Calendar Views',
   resource: 'Resource Scheduling',
   dnd: 'Addon: Drag and drop',
+  dndOutsideSource: 'Addon: Drag and drop (from outside calendar)',
 }
 
 const DEFAULT_EXAMPLE = 'basic'
@@ -78,6 +80,7 @@ class Example extends React.Component {
       timeslots: Timeslots,
       dnd: Dnd,
       dndresource: DndResource,
+      dndOutsideSource: DndOutsideSource,
     }[selected]
 
     return (

examples/demos/dndOutsideSource.js

@@ -0,0 +1,174 @@
+import React from 'react'
+import events from '../events'
+import BigCalendar from 'react-big-calendar'
+import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
+import Layout from 'react-tackle-box/Layout'
+import Card from '../Card'
+
+import 'react-big-calendar/lib/addons/dragAndDrop/styles.less'
+
+const DragAndDropCalendar = withDragAndDrop(BigCalendar)
+
+const formatName = (name, count) => `${name} ID ${count}`
+
+class Dnd extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      events: events,
+      draggedEvent: null,
+      counters: {
+        item1: 0,
+        item2: 0,
+      },
+    }
+  }
+
+  handleDragStart = name => {
+    this.setState({ draggedEvent: name })
+  }
+
+  customOnDragOver = event => {
+    // check for undroppable is specific to this example
+    // and not part of API. This just demonstrates that
+    // onDragOver can optionally be passed to conditionally
+    // allow draggable items to be dropped on cal, based on
+    // whether event.preventDefault is called
+    if (this.state.draggedEvent !== 'undroppable') {
+      console.log('preventDefault')
+      event.preventDefault()
+    }
+  }
+
+  onDropFromOutside = ({ start, end, allDay }) => {
+    const { draggedEvent, counters } = this.state
+    const event = {
+      title: formatName(draggedEvent, counters[draggedEvent]),
+      start,
+      end,
+      isAllDay: allDay,
+    }
+    const updatedCounters = {
+      ...counters,
+      [draggedEvent]: counters[draggedEvent] + 1,
+    }
+    this.setState({ draggedEvent: null, counters: updatedCounters })
+    this.newEvent(event)
+  }
+
+  moveEvent({ event, start, end, isAllDay: droppedOnAllDaySlot }) {
+    const { events } = this.state
+
+    const idx = events.indexOf(event)
+    let allDay = event.allDay
+
+    if (!event.allDay && droppedOnAllDaySlot) {
+      allDay = true
+    } else if (event.allDay && !droppedOnAllDaySlot) {
+      allDay = false
+    }
+
+    const updatedEvent = { ...event, start, end, allDay }
+
+    const nextEvents = [...events]
+    nextEvents.splice(idx, 1, updatedEvent)
+
+    this.setState({
+      events: nextEvents,
+    })
+
+    // alert(`${event.title} was dropped onto ${updatedEvent.start}`)
+  }
+
+  resizeEvent = ({ event, start, end }) => {
+    const { events } = this.state
+
+    const nextEvents = events.map(existingEvent => {
+      return existingEvent.id == event.id
+        ? { ...existingEvent, start, end }
+        : existingEvent
+    })
+
+    this.setState({
+      events: nextEvents,
+    })
+
+    //alert(`${event.title} was resized to ${start}-${end}`)
+  }
+
+  newEvent(event) {
+    let idList = this.state.events.map(a => a.id)
+    let newId = Math.max(...idList) + 1
+    let hour = {
+      id: newId,
+      title: event.title,
+      allDay: event.isAllDay,
+      start: event.start,
+      end: event.end,
+    }
+    this.setState({
+      events: this.state.events.concat([hour]),
+    })
+  }
+
+  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]) => (
+            <div
+              style={{
+                border: '2px solid gray',
+                borderRadius: '4px',
+                width: '100px',
+                margin: '10px',
+              }}
+              draggable="true"
+              key={name}
+              onDragStart={() => this.handleDragStart(name)}
+            >
+              {formatName(name, count)}
+            </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>
+        </Card>
+        <DragAndDropCalendar
+          selectable
+          localizer={this.props.localizer}
+          events={this.state.events}
+          onEventDrop={this.moveEvent}
+          onDropFromOutside={this.onDropFromOutside}
+          onDragOver={this.customOnDragOver}
+          resizable
+          onEventResize={this.resizeEvent}
+          onSelectSlot={this.newEvent}
+          onD
+          defaultView={BigCalendar.Views.MONTH}
+          defaultDate={new Date(2015, 3, 12)}
+        />
+      </div>
+    )
+  }
+}
+
+export default Dnd

src/Selection.js

@@ -54,6 +54,7 @@ class Selection {
     this._handleMoveEvent = this._handleMoveEvent.bind(this)
     this._handleTerminatingEvent = this._handleTerminatingEvent.bind(this)
     this._keyListener = this._keyListener.bind(this)
+    this._dropFromOutsideListener = this._dropFromOutsideListener.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
@@ -64,6 +65,10 @@ class Selection {
     )
     this._onKeyDownListener = addEventListener('keydown', this._keyListener)
     this._onKeyUpListener = addEventListener('keyup', this._keyListener)
+    this._onDropFromOutsideListener = addEventListener(
+      'drop',
+      this._dropFromOutsideListener
+    )
     this._addInitialEventListener()
   }
 
@@ -187,6 +192,19 @@ class Selection {
     }
   }
 
+  _dropFromOutsideListener(e) {
+    const { pageX, pageY, clientX, clientY } = getEventCoordinates(e)
+
+    this.emit('dropFromOutside', {
+      x: pageX,
+      y: pageY,
+      clientX: clientX,
+      clientY: clientY,
+    })
+
+    e.preventDefault()
+  }
+
   _handleInitialEvent(e) {
     const { clientX, clientY, pageX, pageY } = getEventCoordinates(e)
     let node = this.container(),

src/addons/dragAndDrop/EventContainerWrapper.js

@@ -31,6 +31,7 @@ class EventContainerWrapper extends React.Component {
     draggable: PropTypes.shape({
       onStart: PropTypes.func,
       onEnd: PropTypes.func,
+      onDropFromOutside: PropTypes.func,
       onBeginAction: PropTypes.func,
       dragAndDropAction: PropTypes.object,
     }),
@@ -113,6 +114,21 @@ class EventContainerWrapper extends React.Component {
     this.update(event, slotMetrics.getRange(start, end))
   }
 
+  handleDropFromOutside = (point, boundaryBox) => {
+    const { slotMetrics } = this.props
+
+    let start = slotMetrics.closestSlotFromPoint(
+      { y: point.y, x: point.x },
+      boundaryBox
+    )
+
+    this.context.draggable.onDropFromOutside({
+      start,
+      end: slotMetrics.nextSlot(start),
+      allDay: false,
+    })
+  }
+
   _selectable = () => {
     let node = findDOMNode(this)
     let selector = (this._selector = new Selection(() =>
@@ -141,6 +157,16 @@ class EventContainerWrapper extends React.Component {
       if (dragAndDropAction.action === 'resize') this.handleResize(box, bounds)
     })
 
+    selector.on('dropFromOutside', point => {
+      if (!this.context.draggable.onDropFromOutside) return
+
+      const bounds = getBoundsForNode(node)
+
+      if (!pointInColumn(bounds, point)) return
+
+      this.handleDropFromOutside(point, bounds)
+    })
+
     selector.on('selectStart', () => this.context.draggable.onStart())
 
     selector.on('select', point => {

src/addons/dragAndDrop/WeekWrapper.js

@@ -37,6 +37,7 @@ class WeekWrapper extends React.Component {
       onStart: PropTypes.func,
       onEnd: PropTypes.func,
       dragAndDropAction: PropTypes.object,
+      onDropFromOutside: PropTypes.func,
       onBeginAction: PropTypes.func,
     }),
   }
@@ -106,6 +107,21 @@ class WeekWrapper extends React.Component {
     this.update(event, start, end)
   }
 
+  handleDropFromOutside = (point, rowBox) => {
+    if (!this.context.draggable.onDropFromOutside) return
+    const { slotMetrics: metrics } = this.props
+
+    let start = metrics.getDateForSlot(
+      getSlotAtX(rowBox, point.x, false, metrics.slots)
+    )
+
+    this.context.draggable.onDropFromOutside({
+      start,
+      end: dates.add(start, 1, 'day'),
+      allDay: false,
+    })
+  }
+
   handleResize(point, node) {
     const { event, direction } = this.context.draggable.dragAndDropAction
     const { accessors, slotMetrics: metrics } = this.props
@@ -193,6 +209,17 @@ class WeekWrapper extends React.Component {
       if (!this.state.segment || !pointInBox(bounds, point)) return
       this.handleInteractionEnd()
     })
+
+    selector.on('dropFromOutside', point => {
+      if (!this.context.draggable.onDropFromOutside) return
+
+      const bounds = getBoundsForNode(node)
+
+      if (!pointInBox(bounds, point)) return
+
+      this.handleDropFromOutside(point, bounds)
+    })
+
     selector.on('click', () => this.context.draggable.onEnd(null))
   }