From f3ea6f838005626a5107a4d1d9fc6ac8a7fd78ba Mon Sep 17 00:00:00 2001
From: NathanPriebe <37284011+NathanBP@users.noreply.github.com>
Date: Fri, 24 May 2019 22:46:34 +1000
Subject: [PATCH] fix: bug with dayWrapper not applying (#1196)

* Fixed bug with dayWrapper not applying

* Removed packagelock.json, updated dayWrapper to timeSlotWrapper
---
 examples/demos/basic.js             | 10 ++++++++++
 src/Calendar.js                     |  3 ---
 src/index.js                        |  2 +-
 stories/Calendar.js                 |  4 ++--
 stories/DragAndDrop.js              |  4 ++--
 stories/helpers/customComponents.js |  8 ++++----
 6 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/examples/demos/basic.js b/examples/demos/basic.js
index ad3b0dfd6..a040d6121 100644
--- a/examples/demos/basic.js
+++ b/examples/demos/basic.js
@@ -5,6 +5,13 @@ import dates from '../../src/utils/dates'
 
 let allViews = Object.keys(BigCalendar.Views).map(k => BigCalendar.Views[k])
 
+const ColoredDateCellWrapper = ({ children }) =>
+  React.cloneElement(React.Children.only(children), {
+    style: {
+      backgroundColor: 'lightblue',
+    },
+  })
+
 let Basic = ({ localizer }) => (
   <BigCalendar
     events={events}
@@ -13,6 +20,9 @@ let Basic = ({ localizer }) => (
     showMultiDayTimes
     max={dates.add(dates.endOf(new Date(2015, 17, 1), 'day'), -1, 'hours')}
     defaultDate={new Date(2015, 3, 1)}
+    components={{
+      timeSlotWrapper: ColoredDateCellWrapper,
+    }}
     localizer={localizer}
   />
 )
diff --git a/src/Calendar.js b/src/Calendar.js
index 71bc0ec5c..8da45977a 100644
--- a/src/Calendar.js
+++ b/src/Calendar.js
@@ -643,7 +643,6 @@ class Calendar extends React.Component {
      *   event: MyEvent, // used by each view (Month, Day, Week)
      *   eventWrapper: MyEventWrapper,
      *   eventContainerWrapper: MyEventContainerWrapper,
-     *   dayWrapper: MyDayWrapper,
      *   dateCellWrapper: MyDateCellWrapper,
      *   timeSlotWrapper: MyTimeSlotWrapper,
      *   timeGutterHeader: MyTimeGutterWrapper,
@@ -674,7 +673,6 @@ class Calendar extends React.Component {
       event: elementType,
       eventWrapper: elementType,
       eventContainerWrapper: elementType,
-      dayWrapper: elementType,
       dateCellWrapper: elementType,
       timeSlotWrapper: elementType,
       timeGutterHeader: elementType,
@@ -793,7 +791,6 @@ class Calendar extends React.Component {
       components: defaults(components[view] || {}, omit(components, names), {
         eventWrapper: NoopWrapper,
         eventContainerWrapper: NoopWrapper,
-        dayWrapper: NoopWrapper,
         dateCellWrapper: NoopWrapper,
         weekWrapper: NoopWrapper,
         timeSlotWrapper: NoopWrapper,
diff --git a/src/index.js b/src/index.js
index 5f87f846a..889099bcd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -14,7 +14,7 @@ Object.assign(Calendar, {
   move,
   components: {
     eventWrapper: EventWrapper,
-    dayWrapper: BackgroundWrapper,
+    timeSlotWrapper: BackgroundWrapper,
     dateCellWrapper: BackgroundWrapper,
   },
 })
diff --git a/stories/Calendar.js b/stories/Calendar.js
index bad9fe302..8be67e0c1 100644
--- a/stories/Calendar.js
+++ b/stories/Calendar.js
@@ -165,13 +165,13 @@ storiesOf('Big Calendar', module)
       />
     )
   })
-  .add('add custom dayWrapper', () => {
+  .add('add custom timeSlotWrapper', () => {
     return (
       <Calendar
         defaultView={Calendar.Views.DAY}
         events={events}
         components={{
-          dayWrapper: customComponents.dayWrapper,
+          timeSlotWrapper: customComponents.timeSlotWrapper,
         }}
       />
     )
diff --git a/stories/DragAndDrop.js b/stories/DragAndDrop.js
index ce66df897..3ad618ec4 100644
--- a/stories/DragAndDrop.js
+++ b/stories/DragAndDrop.js
@@ -61,11 +61,11 @@ storiesOf('Drag and Drop', module)
       />
     )
   })
-  .add('draggable and resizable with custom dayWrapper', () => {
+  .add('draggable and resizable with custom timeSlotWrapper', () => {
     return (
       <DragAndDropCalendar
         components={{
-          dayWrapper: customComponents.dayWrapper,
+          timeSlotWrapper: customComponents.timeSlotWrapper,
         }}
         defaultDate={new Date()}
         defaultView={Calendar.Views.WEEK}
diff --git a/stories/helpers/customComponents.js b/stories/helpers/customComponents.js
index 8fd424763..82f6fca83 100644
--- a/stories/helpers/customComponents.js
+++ b/stories/helpers/customComponents.js
@@ -27,10 +27,10 @@ const customComponents = {
       </div>
     )
   },
-  dayWrapper: dayWrapperProps => {
+  timeSlotWrapper: timeSlotWrapperProps => {
     // Show different styles at arbitrary time
-    const hasCustomInfo = dayWrapperProps.value
-      ? dayWrapperProps.value.getHours() === 4
+    const hasCustomInfo = timeSlotWrapperProps.value
+      ? timeSlotWrapperProps.value.getHours() === 4
       : false
     const style = {
       display: 'flex',
@@ -40,7 +40,7 @@ const customComponents = {
     return (
       <div style={style}>
         {hasCustomInfo && 'Custom Day Wrapper'}
-        {dayWrapperProps.children}
+        {timeSlotWrapperProps.children}
       </div>
     )
   },