feat: add custom timeSlotWrapper support (jquense#930)

* feat: pass components through to TimeGutter and TimeSlotGroup

* feat: allow timeSlotWrapper to be passed through

* Add story for custom timeSlotWrapper

Author: spacetag

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),

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])}

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}
             />
           )

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,
+        }}
+      />
+    )
+  })

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