feat: Slot group prop getter (#1471) (#1510)

* feat: Added slotGroupPropGetter (#1471)

* fix: Pass getters to time gutter

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
   "./dist/react-big-calendar.js": {
-    "bundled": 501317,
-    "minified": 146786,
-    "gzipped": 44762
+    "bundled": 507436,
+    "minified": 149016,
+    "gzipped": 45496
   },
   "./dist/react-big-calendar.min.js": {
-    "bundled": 439004,
-    "minified": 127972,
-    "gzipped": 40409
+    "bundled": 444328,
+    "minified": 130089,
+    "gzipped": 41174
   },
   "dist/react-big-calendar.esm.js": {
-    "bundled": 168678,
-    "minified": 80552,
-    "gzipped": 19913,
+    "bundled": 174497,
+    "minified": 83179,
+    "gzipped": 20739,
     "treeshaked": {
       "rollup": {
-        "code": 58283,
+        "code": 60400,
         "import_statements": 1578
       },
       "webpack": {
-        "code": 62787
+        "code": 64923
       }
     }
   }

src/Calendar.js

@@ -486,14 +486,23 @@ class Calendar extends React.Component {
 
     /**
      * Optionally provide a function that returns an object of className or style props
-     * to be applied to the the time-slot node. Caution! Styles that change layout or
+     * to be applied to the time-slot node. Caution! Styles that change layout or
      * position may break the calendar in unexpected ways.
      *
      * ```js
      * (date: Date, resourceId: (number|string)) => { className?: string, style?: Object }
      * ```
      */
-    slotPropGetter: PropTypes.func,
+	slotPropGetter: PropTypes.func,
+
+	/**
+	 * Optionally provide a function that returns an object of props to be applied 
+	 * to the time-slot group node. Useful to dynamically change the sizing of time nodes.
+	 * ```js
+	 * () => { style?: Object }
+	 * ```
+	 */
+	slotGroupPropGetter: PropTypes.func,
 
     /**
      * Optionally provide a function that returns an object of className or style props
@@ -775,7 +784,8 @@ class Calendar extends React.Component {
     resourceIdAccessor,
     resourceTitleAccessor,
     eventPropGetter,
-    slotPropGetter,
+	slotPropGetter,
+	slotGroupPropGetter,
     dayPropGetter,
     view,
     views,
@@ -794,7 +804,9 @@ class Calendar extends React.Component {
         eventProp: (...args) =>
           (eventPropGetter && eventPropGetter(...args)) || {},
         slotProp: (...args) =>
-          (slotPropGetter && slotPropGetter(...args)) || {},
+		  (slotPropGetter && slotPropGetter(...args)) || {},
+		slotGroupProp: (...args) =>
+		  (slotGroupPropGetter && slotGroupPropGetter(...args)) || {},
         dayProp: (...args) => (dayPropGetter && dayPropGetter(...args)) || {},
       },
       components: defaults(components[view] || {}, omit(components, names), {

src/TimeGrid.js

@@ -240,6 +240,7 @@ export default class TimeGrid extends Component {
             timeslots={this.props.timeslots}
             components={components}
             className="rbc-time-gutter"
+            getters={getters}
           />
           {this.renderEvents(range, rangeEvents, getNow())}
         </div>

src/TimeGutter.js

@@ -36,7 +36,7 @@ export default class TimeGutter extends Component {
   }
 
   render() {
-    const { resource, components } = this.props
+    const { resource, components, getters } = this.props
 
     return (
       <div className="rbc-time-gutter rbc-time-column">
@@ -48,6 +48,7 @@ export default class TimeGutter extends Component {
               resource={resource}
               components={components}
               renderSlot={this.renderSlot}
+              getters={getters}
             />
           )
         })}
@@ -63,6 +64,7 @@ TimeGutter.propTypes = {
   step: PropTypes.number.isRequired,
   getNow: PropTypes.func.isRequired,
   components: PropTypes.object.isRequired,
+  getters: PropTypes.object,
 
   localizer: PropTypes.object.isRequired,
   resource: PropTypes.string,

src/TimeSlotGroup.js

@@ -14,8 +14,9 @@ export default class TimeSlotGroup extends Component {
       components: { timeSlotWrapper: Wrapper = BackgroundWrapper } = {},
     } = this.props
 
+	const groupProps = getters ? getters.slotGroupProp() : {}
     return (
-      <div className="rbc-timeslot-group">
+      <div className="rbc-timeslot-group" {...groupProps}>
         {group.map((value, idx) => {
           const slotProps = getters ? getters.slotProp(value, resource) : {}
           return (