From 172c316b0ecba59d6ef9f10649be62a34ffed22a Mon Sep 17 00:00:00 2001
From: Josiah <spacetagman@gmail.com>
Date: Wed, 1 Aug 2018 06:55:31 -0700
Subject: [PATCH] feat: add custom timeSlotWrapper support (#930)

* feat: pass components through to TimeGutter and TimeSlotGroup

* feat: allow timeSlotWrapper to be passed through

* Add story for custom timeSlotWrapper
---
 src/Calendar.js                     |  2 ++
 src/TimeGrid.js                     |  1 +
 src/TimeGutter.js                   |  4 +++-
 stories/Calendar.js                 | 11 +++++++++++
 stories/helpers/customComponents.js | 16 ++++++++++++++++
 5 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/Calendar.js b/src/Calendar.js
index cf7487eee..dc843f0ca 100644
--- a/src/Calendar.js
+++ b/src/Calendar.js
@@ -649,6 +649,7 @@ class Calendar extends React.Component {
       eventContainerWrapper: elementType,
       dayWrapper: elementType,
       dateCellWrapper: elementType,
+      timeSlotWrapper: elementType,
       timeGutterHeader: elementType,
 
       toolbar: elementType,
@@ -767,6 +768,7 @@ class Calendar extends React.Component {
         dayWrapper: NoopWrapper,
         dateCellWrapper: NoopWrapper,
         weekWrapper: NoopWrapper,
+        timeSlotWrapper: NoopWrapper,
       }),
       accessors: {
         start: wrapAccessor(startAccessor),
diff --git a/src/TimeGrid.js b/src/TimeGrid.js
index 9260311c2..be363a191 100644
--- a/src/TimeGrid.js
+++ b/src/TimeGrid.js
@@ -247,6 +247,7 @@ export default class TimeGrid extends Component {
             step={this.props.step}
             getNow={this.props.getNow}
             timeslots={this.props.timeslots}
+            components={components}
             className="rbc-time-gutter"
           />
           {this.renderEvents(range, rangeEvents, getNow(), resources || [null])}
diff --git a/src/TimeGutter.js b/src/TimeGutter.js
index 6a6b2975a..3824e0471 100644
--- a/src/TimeGutter.js
+++ b/src/TimeGutter.js
@@ -12,6 +12,7 @@ export default class TimeGutter extends Component {
     timeslots: PropTypes.number.isRequired,
     step: PropTypes.number.isRequired,
     getNow: PropTypes.func.isRequired,
+    components: PropTypes.object.isRequired,
 
     localizer: PropTypes.object.isRequired,
     resource: PropTypes.string,
@@ -47,7 +48,7 @@ export default class TimeGutter extends Component {
   }
 
   render() {
-    const { resource } = this.props
+    const { resource, components } = this.props
 
     return (
       <div className="rbc-time-gutter rbc-time-column">
@@ -57,6 +58,7 @@ export default class TimeGutter extends Component {
               key={idx}
               group={grp}
               resource={resource}
+              components={components}
               renderSlot={this.renderSlot}
             />
           )
diff --git a/stories/Calendar.js b/stories/Calendar.js
index aa23e0918..b1f5868ea 100644
--- a/stories/Calendar.js
+++ b/stories/Calendar.js
@@ -197,3 +197,14 @@ storiesOf('Big Calendar', module)
       />
     )
   })
+  .add('add custom timeSlotWrapper', () => {
+    return (
+      <Calendar
+        defaultView={Calendar.Views.WEEK}
+        events={events}
+        components={{
+          timeSlotWrapper: customComponents.timeSlotWrapper,
+        }}
+      />
+    )
+  })
diff --git a/stories/helpers/customComponents.js b/stories/helpers/customComponents.js
index 582443ffe..e7e2050de 100644
--- a/stories/helpers/customComponents.js
+++ b/stories/helpers/customComponents.js
@@ -53,6 +53,22 @@ const customComponents = {
     }
     return <div style={style}>{eventWrapperProps.children}</div>
   },
+  timeSlotWrapper: timeSlotWrapperProps => {
+    const style =
+      timeSlotWrapperProps.resource === null ||
+      timeSlotWrapperProps.value.getMinutes() !== 0
+        ? {}
+        : {
+            border: '4px solid',
+            backgroundColor:
+              timeSlotWrapperProps.value.getHours() >= 8 &&
+              timeSlotWrapperProps.value.getHours() <= 17
+                ? 'green'
+                : 'red',
+            padding: '5px',
+          }
+    return <div style={style}>{timeSlotWrapperProps.children}</div>
+  },
 }
 
 export default customComponents