fix: time indicator placement

Author: jquense

src/DayColumn.js

@@ -21,6 +21,7 @@ class DayColumn extends React.Component {
     min: PropTypes.instanceOf(Date).isRequired,
     max: PropTypes.instanceOf(Date).isRequired,
     getNow: PropTypes.func.isRequired,
+    isNow: PropTypes.bool,
 
     rtl: PropTypes.bool,
 
@@ -63,10 +64,16 @@ class DayColumn extends React.Component {
 
   componentDidMount() {
     this.props.selectable && this._selectable()
+
+    if (this.props.isNow) {
+      this.positionTimeIndicator()
+      this.triggerTimeIndicatorUpdate()
+    }
   }
 
   componentWillUnmount() {
     this._teardownSelectable()
+    window.clearTimeout(this._timeIndicatorTimeout)
   }
 
   componentWillReceiveProps(nextProps) {
@@ -77,12 +84,30 @@ class DayColumn extends React.Component {
     this.slotMetrics = this.slotMetrics.update(nextProps)
   }
 
+  triggerTimeIndicatorUpdate() {
+    // Update the position of the time indicator every minute
+    this._timeIndicatorTimeout = window.setTimeout(() => {
+      this.positionTimeIndicator()
+      this.triggerTimeIndicatorUpdate()
+    }, 60000)
+  }
+
+  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}%`
+    }
+  }
+
   render() {
     const {
       max,
       rtl,
-      date,
-      getNow,
+      isNow,
       resource,
       accessors,
       localizer,
@@ -96,7 +121,6 @@ class DayColumn extends React.Component {
     let selectDates = { start: startDate, end: endDate }
 
     const { className, style } = dayProp(max)
-    const current = getNow()
 
     return (
       <div
@@ -105,8 +129,9 @@ class DayColumn extends React.Component {
           className,
           'rbc-day-slot',
           'rbc-time-column',
-          selecting && 'rbc-slot-selecting',
-          dates.eq(date, current, 'day') && 'rbc-today'
+          isNow && 'rbc-now',
+          isNow && 'rbc-today', // WHY
+          selecting && 'rbc-slot-selecting'
         )}
       >
         {slotMetrics.groups.map((grp, idx) => (
@@ -136,6 +161,9 @@ class DayColumn extends React.Component {
             <span>{localizer.format(selectDates, 'selectRangeFormat')}</span>
           </div>
         )}
+        {isNow && (
+          <div ref="timeIndicator" className="rbc-current-time-indicator" />
+        )}
       </div>
     )
   }

src/TimeGrid.js

@@ -82,9 +82,6 @@ export default class TimeGrid extends Component {
 
     this.applyScroll()
 
-    this.positionTimeIndicator()
-    this.triggerTimeIndicatorUpdate()
-
     window.addEventListener('resize', this.handleResize)
   }
 
@@ -99,7 +96,6 @@ export default class TimeGrid extends Component {
     this.rafHandle = raf(this.checkOverflow)
   }
   componentWillUnmount() {
-    window.clearTimeout(this._timeIndicatorTimeout)
     window.removeEventListener('resize', this.handleResize)
 
     raf.cancel(this.rafHandle)
@@ -111,7 +107,6 @@ export default class TimeGrid extends Component {
     }
 
     this.applyScroll()
-    this.positionTimeIndicator()
     //this.checkOverflow()
   }
 
@@ -146,7 +141,7 @@ export default class TimeGrid extends Component {
     })
   }
 
-  renderEvents(range, events, today) {
+  renderEvents(range, events, now) {
     let { min, max, components, accessors, localizer } = this.props
 
     const groupedEvents = this.resources.groupEvents(events)
@@ -170,7 +165,7 @@ export default class TimeGrid extends Component {
             max={dates.merge(date, max)}
             resource={resource && id}
             components={components}
-            className={cn({ 'rbc-now': dates.eq(date, today, 'day') })}
+            isNow={dates.eq(date, now, 'day')}
             key={i + '-' + jj}
             date={date}
             events={daysEvents}
@@ -270,8 +265,6 @@ export default class TimeGrid extends Component {
             className="rbc-time-gutter"
           />
           {this.renderEvents(range, rangeEvents, getNow())}
-
-          <div ref="timeIndicator" className="rbc-current-time-indicator" />
         </div>
       </div>
     )
@@ -321,45 +314,4 @@ export default class TimeGrid extends Component {
       })
     }
   }
-
-  positionTimeIndicator() {
-    const { rtl, min, max, getNow, range } = this.props
-    const current = getNow()
-
-    const secondsGrid = dates.diff(max, min, 'seconds')
-    const secondsPassed = dates.diff(current, min, 'seconds')
-
-    const timeIndicator = this.refs.timeIndicator
-    const factor = secondsPassed / secondsGrid
-    const timeGutter = this.gutter
-
-    const content = this.refs.content
-
-    if (timeGutter && current >= min && current <= max) {
-      const pixelHeight = timeGutter.offsetHeight
-      const dayPixelWidth =
-        (content.offsetWidth - timeGutter.offsetWidth) / this.slots
-      const dayOffset =
-        range.findIndex(d => dates.eq(d, dates.today(), 'day')) * dayPixelWidth
-      const offset = Math.floor(factor * pixelHeight)
-
-      timeIndicator.style.display = dayOffset >= 0 ? 'block' : 'none'
-      timeIndicator.style[rtl ? 'left' : 'right'] = 0
-      timeIndicator.style[rtl ? 'right' : 'left'] =
-        timeGutter.offsetWidth + dayOffset + 'px'
-      timeIndicator.style.top = offset + 'px'
-      timeIndicator.style.width = dayPixelWidth + 'px'
-    } else {
-      timeIndicator.style.display = 'none'
-    }
-  }
-
-  triggerTimeIndicatorUpdate() {
-    // Update the position of the time indicator every minute
-    this._timeIndicatorTimeout = window.setTimeout(() => {
-      this.positionTimeIndicator()
-
-      this.triggerTimeIndicatorUpdate()
-    }, 60000)
-  }
 }

src/less/time-grid.less

@@ -31,7 +31,6 @@
     box-sizing: content-box;
     width: 100%;
     position: relative;
-
   }
   .rbc-allday-cell + .rbc-allday-cell {
     border-left: 1px solid @cell-border;
@@ -48,7 +47,6 @@
   }
 }
 
-
 .rbc-time-header {
   display: flex;
   flex: 0 0 auto; // should not shrink below height
@@ -64,11 +62,11 @@
   }
 
   > .rbc-row:first-child {
-    border-bottom: 1px solid  @cell-border;
+    border-bottom: 1px solid @cell-border;
   }
 
   > .rbc-row.rbc-row-resource {
-    border-bottom: 1px solid  @cell-border;
+    border-bottom: 1px solid @cell-border;
   }
 
   // .rbc-gutter-cell {
@@ -87,7 +85,7 @@
   flex-direction: column;
   border-left: 1px solid @cell-border;
 
-  .rbc-rtl &  {
+  .rbc-rtl & {
     border-left-width: 0;
     border-right: 1px solid @cell-border;
   }
@@ -125,6 +123,8 @@
 .rbc-current-time-indicator {
   position: absolute;
   z-index: 3;
+  left: 0;
+  right: 0;
   height: 1px;
 
   background-color: @current-time-color;