From e3eed70a2a63e3e0d383a9d5340153949feafa5c Mon Sep 17 00:00:00 2001
From: Matt Harrison <mattharrison@hey.com>
Date: Mon, 16 May 2022 17:54:14 +0100
Subject: [PATCH] feat: adds currentTimeIndicator component to Calendar (#1)

---
 src/Calendar.js             |  3 +++
 src/CurrentTimeIndicator.js | 12 ++++++++++++
 src/DayColumn.js            |  9 ++++++---
 3 files changed, 21 insertions(+), 3 deletions(-)
 create mode 100644 src/CurrentTimeIndicator.js

diff --git a/src/Calendar.js b/src/Calendar.js
index c67e43548..907c4dec0 100644
--- a/src/Calendar.js
+++ b/src/Calendar.js
@@ -731,6 +731,7 @@ class Calendar extends React.Component {
      *   timeSlotWrapper: MyTimeSlotWrapper,
      *   timeGutterHeader: MyTimeGutterWrapper,
      *   resourceHeader: MyResourceHeader,
+     *   currentTimeIndicator: MyCurrentTimeIndicator,
      *   toolbar: MyToolbar,
      *   agenda: {
      *   	 event: MyAgendaEvent, // with the agenda view use a different component to render events
@@ -764,6 +765,8 @@ class Calendar extends React.Component {
       timeGutterHeader: PropTypes.elementType,
       resourceHeader: PropTypes.elementType,
 
+      currentTimeIndicator: PropTypes.elementType,
+
       toolbar: PropTypes.elementType,
 
       agenda: PropTypes.shape({
diff --git a/src/CurrentTimeIndicator.js b/src/CurrentTimeIndicator.js
new file mode 100644
index 000000000..c4f9fb880
--- /dev/null
+++ b/src/CurrentTimeIndicator.js
@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const CurrentTimeIndicator = ({ position }) => (
+  <div className="rbc-current-time-indicator" style={{ top: `${position}%` }} />
+)
+
+CurrentTimeIndicator.propTypes = {
+  position: PropTypes.number,
+}
+
+export default CurrentTimeIndicator
diff --git a/src/DayColumn.js b/src/DayColumn.js
index 910a6c7f6..76eed3245 100644
--- a/src/DayColumn.js
+++ b/src/DayColumn.js
@@ -13,6 +13,7 @@ import TimeSlotGroup from './TimeSlotGroup'
 import TimeGridEvent from './TimeGridEvent'
 import { DayLayoutAlgorithmPropType } from './utils/propTypes'
 
+import CurrentTimeIndicator from './CurrentTimeIndicator'
 import DayColumnWrapper from './DayColumnWrapper'
 
 class DayColumn extends React.Component {
@@ -124,6 +125,9 @@ class DayColumn extends React.Component {
 
     const { className, style } = dayProp(max)
 
+    const CurrentTimeIndicatorComponent =
+      components.currentTimeIndicator || CurrentTimeIndicator
+
     const DayColumnWrapperComponent =
       components.dayColumnWrapper || DayColumnWrapper
 
@@ -173,9 +177,8 @@ class DayColumn extends React.Component {
           </div>
         )}
         {isNow && this.intervalTriggered && (
-          <div
-            className="rbc-current-time-indicator"
-            style={{ top: `${this.state.timeIndicatorPosition}%` }}
+          <CurrentTimeIndicatorComponent
+            position={this.state.timeIndicatorPosition}
           />
         )}
       </DayColumnWrapperComponent>