Fixed DnD with Resource Columns + Added Example of it (jquense#873)

* Fixed DnD with Resource Columns + Added Example of it

* Update DayColumn.js

* Update TimeSlotGroup.js

examples/App.js

@@ -22,6 +22,7 @@ import Popup from './demos/popup'
 import Rendering from './demos/rendering'
 import CustomView from './demos/customView'
 import Resource from './demos/resource'
+import DndResource from './demos/dndresource'
 import Timeslots from './demos/timeslots'
 import Dnd from './demos/dnd'
 
@@ -43,6 +44,7 @@ class Example extends React.Component {
       resource: Resource,
       timeslots: Timeslots,
       dnd: Dnd,
+      dndresource: DndResource,
     }[selected]
 
     return (
@@ -119,6 +121,11 @@ class Example extends React.Component {
                   Drag and Drop
                 </a>
               </li>
+              <li className={cn({ active: selected === 'dndresource' })}>
+                <a href="#" onClick={this.select.bind(null, 'dndresource')}>
+                  D'n'D Resource columns
+                </a>
+              </li>
             </ul>
           </header>
           <div className="example">

examples/demos/dndresource.js

@@ -0,0 +1,107 @@
+import React from 'react'
+import HTML5Backend from 'react-dnd-html5-backend'
+import { DragDropContext } from 'react-dnd'
+import BigCalendar from 'react-big-calendar'
+import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
+
+import 'react-big-calendar/lib/addons/dragAndDrop/styles.less'
+
+const DragAndDropCalendar = withDragAndDrop(BigCalendar)
+
+let allViews = Object.keys(BigCalendar.Views).map(k => BigCalendar.Views[k])
+const events = [
+  {
+    id: 0,
+    title: 'Board meeting',
+    start: new Date(2018, 0, 29, 9, 0, 0),
+    end: new Date(2018, 0, 29, 13, 0, 0),
+    resourceId: 1,
+  },
+  {
+    id: 1,
+    title: 'MS training',
+    start: new Date(2018, 0, 29, 14, 0, 0),
+    end: new Date(2018, 0, 29, 16, 30, 0),
+    resourceId: 2,
+  },
+  {
+    id: 2,
+    title: 'Team lead meeting',
+    start: new Date(2018, 0, 29, 8, 30, 0),
+    end: new Date(2018, 0, 29, 12, 30, 0),
+    resourceId: 3,
+  },
+  {
+    id: 11,
+    title: 'Birthday Party',
+    start: new Date(2018, 0, 30, 7, 0, 0),
+    end: new Date(2018, 0, 30, 10, 30, 0),
+    resourceId: 4,
+  },
+]
+
+const resourceMap = [
+  { resourceId: 1, resourceTitle: 'Board room' },
+  { resourceId: 2, resourceTitle: 'Training room' },
+  { resourceId: 3, resourceTitle: 'Meeting room 1' },
+  { resourceId: 4, resourceTitle: 'Meeting room 2' },
+]
+
+class Dnd extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      events: events,
+    }
+
+    this.moveEvent = this.moveEvent.bind(this)
+  }
+
+  moveEvent({ event, start, end, resourceId }) {
+    console.log('moveEvent.args=', { event, start, end, resourceId })
+    const { events } = this.state
+
+    const idx = events.indexOf(event)
+    const updatedEvent = { ...event, start, end, resourceId }
+    console.log('events', events)
+    const nextEvents = [...events]
+    nextEvents.splice(idx, 1, updatedEvent)
+    console.log('nextEvents', nextEvents)
+    this.setState({
+      events: nextEvents,
+    })
+  }
+
+  resizeEvent = (resizeType, { 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,
+    })
+  }
+
+  render() {
+    return (
+      <DragAndDropCalendar
+        selectable
+        events={this.state.events}
+        onEventDrop={this.moveEvent}
+        resizable
+        resources={resourceMap}
+        resourceIdAccessor="resourceId"
+        resourceTitleAccessor="resourceTitle"
+        onEventResize={this.resizeEvent}
+        defaultView="day"
+        defaultDate={new Date(2018, 0, 29)}
+      />
+    )
+  }
+}
+
+export default DragDropContext(HTML5Backend)(Dnd)

src/DayColumn.js

@@ -59,7 +59,7 @@ class DayColumn extends React.Component {
     timeSlotWrapperComponent: elementType,
     eventComponent: elementType,
     eventWrapperComponent: elementType.isRequired,
-    resource: PropTypes.string,
+    resource: PropTypes.any,
   }
 
   static defaultProps = {

src/TimeGrid.js

@@ -184,7 +184,7 @@ export default class TimeGrid extends Component {
             {...this.props}
             min={dates.merge(date, min)}
             max={dates.merge(date, max)}
-            resource={resource && resource.id}
+            resource={get(resource, resourceIdAccessor)}
             eventComponent={components.event}
             eventWrapperComponent={components.eventWrapper}
             timeSlotWrapperComponent={components.dayWrapper}

src/TimeSlotGroup.js

@@ -11,7 +11,7 @@ export default class TimeSlotGroup extends Component {
     timeSlotWrapperComponent: elementType,
     group: PropTypes.array.isRequired,
     slotPropGetter: PropTypes.func,
-    resource: PropTypes.string,
+    resource: PropTypes.any,
   }
   static defaultProps = {
     timeSlotWrapperComponent: BackgroundWrapper,