From 6708a4583a2179112dbc9c999a68161bb46de186 Mon Sep 17 00:00:00 2001
From: healthycola <lordwizards@gmail.com>
Date: Wed, 23 Jan 2019 16:02:19 -0600
Subject: [PATCH] feat: add ability to set custom resource headers (#1187)

Add an ability to set a custom resource headers. For #1174
---
 src/ResourceHeader.js   | 14 ++++++++++++++
 src/TimeGridHeader.js   | 16 ++++++++++++----
 src/less/time-grid.less |  5 +++++
 3 files changed, 31 insertions(+), 4 deletions(-)
 create mode 100644 src/ResourceHeader.js

diff --git a/src/ResourceHeader.js b/src/ResourceHeader.js
new file mode 100644
index 000000000..c3a126c8a
--- /dev/null
+++ b/src/ResourceHeader.js
@@ -0,0 +1,14 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const ResourceHeader = ({ label }) => {
+  return <React.Fragment>{label}</React.Fragment>
+}
+
+ResourceHeader.propTypes = {
+  label: PropTypes.node,
+  index: PropTypes.number,
+  resource: PropTypes.object,
+}
+
+export default ResourceHeader
diff --git a/src/TimeGridHeader.js b/src/TimeGridHeader.js
index f06b86714..0d68e3a7b 100644
--- a/src/TimeGridHeader.js
+++ b/src/TimeGridHeader.js
@@ -6,6 +6,7 @@ import React from 'react'
 import dates from './utils/dates'
 import DateContentRow from './DateContentRow'
 import Header from './Header'
+import ResourceHeader from './ResourceHeader'
 import { notify } from './utils/helpers'
 
 class TimeGridHeader extends React.Component {
@@ -116,7 +117,10 @@ class TimeGridHeader extends React.Component {
       scrollRef,
       localizer,
       isOverflowing,
-      components: { timeGutterHeader: TimeGutterHeader },
+      components: {
+        timeGutterHeader: TimeGutterHeader,
+        resourceHeader: ResourceHeaderComponent = ResourceHeader,
+      },
     } = this.props
 
     let style = {}
@@ -142,9 +146,13 @@ class TimeGridHeader extends React.Component {
         {resources.map(([id, resource], idx) => (
           <div className="rbc-time-header-content" key={id || idx}>
             {resource && (
-              <div className="rbc-row rbc-row-resource">
-                <div key={`resource_${idx}`} className="rbc-header">
-                  {accessors.resourceTitle(resource)}
+              <div className="rbc-row rbc-row-resource" key={`resource_${idx}`}>
+                <div className="rbc-header">
+                  <ResourceHeaderComponent
+                    index={idx}
+                    label={accessors.resourceTitle(resource)}
+                    resource={resource}
+                  />
                 </div>
               </div>
             )}
diff --git a/src/less/time-grid.less b/src/less/time-grid.less
index 40af3598d..9fc102b56 100644
--- a/src/less/time-grid.less
+++ b/src/less/time-grid.less
@@ -94,6 +94,11 @@
     border-left-width: 0;
     border-right: 1px solid @cell-border;
   }
+
+  >.rbc-row.rbc-row-resource {
+      border-bottom: 1px solid @cell-border;
+      flex-shrink: 0;
+  }
 }
 
 .rbc-time-content {