DnD support for custom EventWrapper (jquense#880)

* Added DnD support for custom DateCellWrapper and DayWrapper components

* Code cleanup

Fixed all hardcoded `defaultView` prop strings to use the Views
constants

* Custom DropWrapper fixes

- Pass through range and value props to match non-dnd component props
- Added `customComponents` utility file for use with stories
- Clarified comment in `withDragAndDrop`

* Support for custom EventWrapper

* Added examples to storybook

Author: amkoehler

src/addons/dragAndDrop/DraggableEventWrapper.js

@@ -8,10 +8,10 @@ import { accessor } from '../../utils/propTypes'
 import { accessor as get } from '../../utils/accessors'
 
 import BigCalendar from '../../index'
-const EventWrapper = BigCalendar.components.eventWrapper
 
 class DraggableEventWrapper extends React.Component {
   static contextTypes = {
+    components: PropTypes.object,
     draggableAccessor: accessor,
     resizableAccessor: accessor,
   }
@@ -51,6 +51,10 @@ class DraggableEventWrapper extends React.Component {
   }
 
   render() {
+    const { components } = this.context
+    const EventWrapper =
+      components.eventWrapper || BigCalendar.components.eventWrapper
+
     let {
       connectDragSource,
       connectTopDragSource,

src/addons/dragAndDrop/withDragAndDrop.js

@@ -52,10 +52,6 @@ try {
  * If you care about these corner cases, you can examine the `allDay` param suppled
  * in the callback to determine how the user dropped or resized the event.
  *
- * Note: you cannot use custom `EventWrapper` components when using this HOC as it
- * is overwritten here.
- *
- *
  * @param {*} Calendar
  * @param {*} backend
  */

stories/Calendar.js

@@ -399,6 +399,19 @@ storiesOf('module.Calendar.week', module)
       </div>
     )
   })
+  .add('add custom eventWrapper', () => {
+    return (
+      <div style={{ height: 600 }}>
+        <Calendar
+          defaultView={Calendar.Views.DAY}
+          events={events}
+          components={{
+            eventWrapper: customComponents.eventWrapper,
+          }}
+        />
+      </div>
+    )
+  })
   .add('no duration', () => {
     return (
       <div style={{ height: 600 }}>
@@ -624,3 +637,21 @@ storiesOf('module.Calendar.week', module)
       </div>
     )
   })
+  .add('draggable and resizable with custom eventWrapper', () => {
+    return (
+      <div style={{ height: 600 }}>
+        <DragAndDropCalendar
+          components={{
+            eventWrapper: customComponents.eventWrapper,
+          }}
+          defaultDate={new Date()}
+          defaultView={Calendar.Views.WEEK}
+          events={events}
+          resizable
+          showMultiDayTimes
+          onEventDrop={action('event dropped')}
+          onEventResize={action('event resized')}
+        />
+      </div>
+    )
+  })

stories/customComponents.js

@@ -44,6 +44,15 @@ const customComponents = {
       </div>
     )
   },
+  eventWrapper: eventWrapperProps => {
+    const style = {
+      border: '4px solid',
+      borderColor:
+        eventWrapperProps.event.start.getHours() % 2 === 0 ? 'green' : 'red',
+      padding: '5px',
+    }
+    return <div style={style}>{eventWrapperProps.children}</div>
+  },
 }
 
 export default customComponents