Skip to content

Commit

Permalink
fix: make sure time indicator is updated after navigation (jquense#1082)
Browse files Browse the repository at this point in the history
* fix: make sure time indicator is updated after navigation

* Replace setInterval with setTimeout
  • Loading branch information
RusinovAnton authored and jquense committed Nov 27, 2018
1 parent aa8f08b commit 07b2fa4
Showing 1 changed file with 39 additions and 10 deletions.
49 changes: 39 additions & 10 deletions src/DayColumn.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ class DayColumn extends React.Component {
timeslots: 2,
}

state = { selecting: false }
state = { selecting: false, timeIndicatorPosition: null }

constructor(...args) {
super(...args)
Expand All @@ -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) {
Expand All @@ -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()
}
}

Expand Down Expand Up @@ -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>
)
Expand Down

0 comments on commit 07b2fa4

Please sign in to comment.