fix: make sure time indicator is updated after navigation (jquense#1082)

* fix: make sure time indicator is updated after navigation * Replace setInterval with setTimeout
additio · Nov 27, 2018 · 07b2fa4 · 07b2fa4
1 parent aa8f08b
commit 07b2fa4
Showing 1 changed file with 39 additions and 10 deletions.
diff --git a/src/DayColumn.js b/src/DayColumn.js
@@ -54,7 +54,7 @@ class DayColumn extends React.Component {
     timeslots: 2,
   }
 
-  state = { selecting: false }
+  state = { selecting: false, timeIndicatorPosition: null }
 
   constructor(...args) {
     super(...args)
@@ -66,14 +66,13 @@ class DayColumn extends React.Component {
     this.props.selectable && this._selectable()
 
     if (this.props.isNow) {
-      this.positionTimeIndicator()
-      this.triggerTimeIndicatorUpdate()
+      this.setTimeIndicatorPositionUpdateInterval()
     }
   }
 
   componentWillUnmount() {
     this._teardownSelectable()
-    window.clearTimeout(this._timeIndicatorTimeout)
+    this.clearTimeIndicatorInterval()
   }
 
   componentWillReceiveProps(nextProps) {
@@ -84,22 +83,49 @@ class DayColumn extends React.Component {
     this.slotMetrics = this.slotMetrics.update(nextProps)
   }
 
-  triggerTimeIndicatorUpdate() {
-    // Update the position of the time indicator every minute
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.isNow !== this.props.isNow) {
+      this.clearTimeIndicatorInterval()
+
+      if (this.props.isNow) {
+        this.setTimeIndicatorPositionUpdateInterval(
+          prevState.timeIndicatorPosition === this.state.timeIndicatorPosition
+        )
+      }
+    }
+  }
+
+  intervalTriggered = false
+  /**
+   * @param tail {Boolean} - whether `positionTimeIndicator` call should be
+   *   deferred or called upon setting interval (`true` - if deferred);
+   */
+  setTimeIndicatorPositionUpdateInterval(tail = false) {
+    if (!this.intervalTriggered && !tail) {
+      this.positionTimeIndicator()
+    }
+
     this._timeIndicatorTimeout = window.setTimeout(() => {
+      this.intervalTriggered = true
       this.positionTimeIndicator()
-      this.triggerTimeIndicatorUpdate()
+      this.setTimeIndicatorPositionUpdateInterval()
     }, 60000)
   }
 
+  clearTimeIndicatorInterval() {
+    this.intervalTriggered = false
+    window.clearTimeout(this._timeIndicatorTimeout)
+  }
+
   positionTimeIndicator() {
     const { min, max, getNow } = this.props
     const current = getNow()
-    const timeIndicator = this.refs.timeIndicator
 
     if (current >= min && current <= max) {
       const { top } = this.slotMetrics.getRange(current, current)
-      timeIndicator.style.top = `${top}%`
+      this.setState({ timeIndicatorPosition: top })
+    } else {
+      this.clearTimeIndicatorInterval()
     }
   }
 
@@ -162,7 +188,10 @@ class DayColumn extends React.Component {
           </div>
         )}
         {isNow && (
-          <div ref="timeIndicator" className="rbc-current-time-indicator" />
+          <div
+            className="rbc-current-time-indicator"
+            style={{ top: `${this.state.timeIndicatorPosition}%` }}
+          />
         )}
       </div>
     )