-
Notifications
You must be signed in to change notification settings - Fork 208
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add onProgress to track the scroll progress between enter / leave #304
base: master
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
function clamp(val, min, max) { | ||
return Math.min(Math.max(val, min), max); | ||
} | ||
|
||
/** | ||
* @param {object} bounds An object with bounds data for the waypoint and | ||
* scrollable parent | ||
* @return {integer} The current scroll progress of the Waypoint inside of its | ||
* scrollable parent | ||
*/ | ||
export default function getCurrentProgress({ | ||
viewportBottom, | ||
viewportTop, | ||
waypointBottom, | ||
waypointTop, | ||
}) { | ||
const viewportHeight = viewportBottom - viewportTop || 1; | ||
const waypointHeight = waypointBottom - waypointTop || 1; | ||
const distance = viewportHeight + waypointHeight; | ||
const traveled = waypointBottom - viewportTop; | ||
const progress = 1 - clamp(traveled / distance, 0, 1); | ||
return progress; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -13,6 +13,7 @@ import debugLog from './debugLog'; | |
import ensureRefIsUsedByChild from './ensureRefIsUsedByChild'; | ||
import isDOMElement from './isDOMElement'; | ||
import getCurrentPosition from './getCurrentPosition'; | ||
import getCurrentProgress from './getCurrentProgress'; | ||
import onNextTick from './onNextTick'; | ||
import resolveScrollableAncestorProp from './resolveScrollableAncestorProp'; | ||
|
||
|
@@ -25,6 +26,7 @@ const defaultProps = { | |
horizontal: false, | ||
onEnter() { }, | ||
onLeave() { }, | ||
onProgress() { }, | ||
onPositionChange() { }, | ||
fireOnRapidScroll: true, | ||
}; | ||
|
@@ -187,6 +189,7 @@ export class Waypoint extends React.PureComponent { | |
onEnter, | ||
onLeave, | ||
fireOnRapidScroll, | ||
onProgress, | ||
} = this.props; | ||
|
||
if (process.env.NODE_ENV !== 'production' && debug) { | ||
|
@@ -197,11 +200,6 @@ export class Waypoint extends React.PureComponent { | |
// Save previous position as early as possible to prevent cycles | ||
this._previousPosition = currentPosition; | ||
|
||
if (previousPosition === currentPosition) { | ||
// No change since last trigger | ||
return; | ||
} | ||
|
||
const callbackArg = { | ||
currentPosition, | ||
previousPosition, | ||
|
@@ -211,12 +209,25 @@ export class Waypoint extends React.PureComponent { | |
viewportTop: bounds.viewportTop, | ||
viewportBottom: bounds.viewportBottom, | ||
}; | ||
|
||
if (currentPosition === INSIDE) { | ||
const progress = getCurrentProgress(bounds); | ||
onProgress.call(this, Object.assign({}, callbackArg, { progress })); | ||
} | ||
|
||
if (previousPosition === currentPosition) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Any reason not to make this check happen first? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Unfortunately not, as |
||
// No change since last trigger | ||
return; | ||
} | ||
|
||
onPositionChange.call(this, callbackArg); | ||
|
||
if (currentPosition === INSIDE) { | ||
onEnter.call(this, callbackArg); | ||
} else if (previousPosition === INSIDE) { | ||
onLeave.call(this, callbackArg); | ||
const progress = +(currentPosition === ABOVE); | ||
onProgress.call(this, Object.assign({}, callbackArg, { progress })); | ||
} | ||
|
||
const isRapidScrollDown = previousPosition === BELOW | ||
|
@@ -327,6 +338,7 @@ if (process.env.NODE_ENV !== 'production') { | |
onEnter: PropTypes.func, | ||
onLeave: PropTypes.func, | ||
onPositionChange: PropTypes.func, | ||
onProgress: PropTypes.func, | ||
fireOnRapidScroll: PropTypes.bool, | ||
// eslint-disable-next-line react/forbid-prop-types | ||
scrollableAncestor: PropTypes.any, | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit: can this be combined with the same if-statement a few lines down on 225?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I tried it out and it needs to be done before the
previousPosition === currentPosition
check, as these are then "inside" and "inside" and thus the onProgress wouldn't be called.