Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-waypoint

Package Overview
Dependencies
Maintainers
4
Versions
69
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-waypoint - npm Package Compare versions

Comparing version 9.0.0 to 9.0.1

5

CHANGELOG.md

@@ -0,1 +1,6 @@

## 9.0.1
- Fix export in TypeScript types (#298)
- Update babel 6 -> 7, rollup 0 -> 1 (#301)
## 9.0.0

@@ -2,0 +7,0 @@

679

cjs/index.js

@@ -7,7 +7,76 @@ 'use strict';

var React = _interopDefault(require('react'));
var consolidatedEvents = require('consolidated-events');
var PropTypes = _interopDefault(require('prop-types'));
var React = _interopDefault(require('react'));
var reactIs = require('react-is');
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function");
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
writable: true,
configurable: true
}
});
if (superClass) _setPrototypeOf(subClass, superClass);
}
function _getPrototypeOf(o) {
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
return o.__proto__ || Object.getPrototypeOf(o);
};
return _getPrototypeOf(o);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
function _possibleConstructorReturn(self, call) {
if (call && (typeof call === "object" || typeof call === "function")) {
return call;
}
return _assertThisInitialized(self);
}
/**

@@ -49,3 +118,5 @@ * Attempts to parse the offset provided as a prop as a percentage. For

return parseFloat(str);
}if (str.slice(-2) === 'px') {
}
if (str.slice(-2) === 'px') {
return parseFloat(str.slice(0, -2));

@@ -62,2 +133,3 @@ }

*/
function computeOffsetPixels(offset, contextHeight) {

@@ -71,2 +143,3 @@ var pixelOffset = parseOffsetAsPixels(offset);

var percentOffset = parseOffsetAsPercentage(offset);
if (typeof percentOffset === 'number') {

@@ -89,2 +162,3 @@ return percentOffset * contextHeight;

(_console = console).log.apply(_console, arguments); // eslint-disable-line no-console
}

@@ -94,3 +168,2 @@ }

var errorMessage = '<Waypoint> expected to receive a single React element child.\n\n' + 'See https://goo.gl/LrBNgw for more info.';
/**

@@ -102,2 +175,3 @@ * Raise an error if more that one child was provided to "children"

*/
function ensureChildrenIsValid(children) {

@@ -125,3 +199,2 @@ if (children) {

var errorMessage$1 = '<Waypoint> needs a DOM element to compute boundaries. The child you passed is neither a ' + 'DOM element (e.g. <div>) nor does it use the innerRef prop.\n\n' + 'See https://goo.gl/LrBNgw for more info.';
/**

@@ -134,2 +207,3 @@ * Raise an error if "children" is not a DOM Element and there is no ref provided to Waypoint

*/
function ensureRefIsProvidedByChild(children, ref) {

@@ -148,18 +222,19 @@ if (children && !isDOMElement(children) && !ref) {

*/
function getCurrentPosition(bounds) {
if (bounds.viewportBottom - bounds.viewportTop === 0) {
return INVISIBLE;
}
} // top is within the viewport
// top is within the viewport
if (bounds.viewportTop <= bounds.waypointTop && bounds.waypointTop <= bounds.viewportBottom) {
return INSIDE;
}
} // bottom is within the viewport
// bottom is within the viewport
if (bounds.viewportTop <= bounds.waypointBottom && bounds.waypointBottom <= bounds.viewportBottom) {
return INSIDE;
}
} // top is above the viewport and bottom is below the viewport
// top is above the viewport and bottom is below the viewport
if (bounds.waypointTop <= bounds.viewportTop && bounds.viewportBottom <= bounds.waypointBottom) {

@@ -180,5 +255,4 @@ return INSIDE;

var timeout = void 0;
var timeout;
var timeoutQueue = [];
function onNextTick(cb) {

@@ -189,7 +263,6 @@ timeoutQueue.push(cb);

timeout = setTimeout(function () {
timeout = null;
timeout = null; // Drain the timeoutQueue
// Drain the timeoutQueue
var item = void 0;
// eslint-disable-next-line no-cond-assign
var item; // eslint-disable-next-line no-cond-assign
while (item = timeoutQueue.shift()) {

@@ -202,26 +275,21 @@ item();

var isSubscribed = true;
return function unsubscribe() {
if (!isSubscribed) {
return;
}
return function () {
function unsubscribe() {
if (!isSubscribed) {
return;
}
isSubscribed = false;
var index = timeoutQueue.indexOf(cb);
isSubscribed = false;
if (index === -1) {
return;
}
var index = timeoutQueue.indexOf(cb);
if (index === -1) {
return;
}
timeoutQueue.splice(index, 1);
timeoutQueue.splice(index, 1);
if (!timeoutQueue.length && timeout) {
clearTimeout(timeout);
timeout = null;
}
if (!timeoutQueue.length && timeout) {
clearTimeout(timeout);
timeout = null;
}
return unsubscribe;
}();
};
}

@@ -240,10 +308,2 @@

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var defaultProps = {

@@ -256,29 +316,19 @@ debug: false,

horizontal: false,
onEnter: function () {
function onEnter() {}
return onEnter;
}(),
onLeave: function () {
function onLeave() {}
return onLeave;
}(),
onPositionChange: function () {
function onPositionChange() {}
return onPositionChange;
}(),
onEnter: function onEnter() {},
onLeave: function onLeave() {},
onPositionChange: function onPositionChange() {},
fireOnRapidScroll: true
};
}; // Calls a function when you scroll to the element.
// Calls a function when you scroll to the element.
var Waypoint = function (_React$PureComponent) {
var Waypoint =
/*#__PURE__*/
function (_React$PureComponent) {
_inherits(Waypoint, _React$PureComponent);
function Waypoint(props) {
var _this;
_classCallCheck(this, Waypoint);
var _this = _possibleConstructorReturn(this, (Waypoint.__proto__ || Object.getPrototypeOf(Waypoint)).call(this, props));
_this = _possibleConstructorReturn(this, _getPrototypeOf(Waypoint).call(this, props));

@@ -288,2 +338,3 @@ _this.refElement = function (e) {

};
return _this;

@@ -293,122 +344,103 @@ }

_createClass(Waypoint, [{
key: 'componentWillMount',
value: function () {
function componentWillMount() {
var children = this.props.children;
key: "componentWillMount",
value: function componentWillMount() {
var children = this.props.children;
if (process.env.NODE_ENV !== 'production') {
ensureChildrenIsValid(children);
}
if (process.env.NODE_ENV !== 'production') {
ensureChildrenIsValid(children);
}
return componentWillMount;
}()
}
}, {
key: 'componentDidMount',
value: function () {
function componentDidMount() {
var _this2 = this;
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
if (!Waypoint.getWindow()) {
return;
}
if (!Waypoint.getWindow()) {
return;
} // this._ref may occasionally not be set at this time. To help ensure that
// this works smoothly and to avoid layout thrashing, we want to delay the
// initial execution until the next tick.
// this._ref may occasionally not be set at this time. To help ensure that
// this works smoothly and to avoid layout thrashing, we want to delay the
// initial execution until the next tick.
this.cancelOnNextTick = onNextTick(function () {
_this2.cancelOnNextTick = null;
var _props = _this2.props,
children = _props.children,
debug = _props.debug;
// Berofe doing anything, we want to check that this._ref is avaliable in Waypoint
this.cancelOnNextTick = onNextTick(function () {
_this2.cancelOnNextTick = null;
var _this2$props = _this2.props,
children = _this2$props.children,
debug = _this2$props.debug; // Berofe doing anything, we want to check that this._ref is avaliable in Waypoint
ensureRefIsProvidedByChild(children, _this2._ref);
ensureRefIsProvidedByChild(children, _this2._ref);
_this2._handleScroll = _this2._handleScroll.bind(_this2);
_this2.scrollableAncestor = _this2._findScrollableAncestor();
_this2._handleScroll = _this2._handleScroll.bind(_this2);
_this2.scrollableAncestor = _this2._findScrollableAncestor();
if (process.env.NODE_ENV !== 'production' && debug) {
debugLog('scrollableAncestor', _this2.scrollableAncestor);
}
if (process.env.NODE_ENV !== 'production' && debug) {
debugLog('scrollableAncestor', _this2.scrollableAncestor);
}
_this2.scrollEventListenerUnsubscribe = consolidatedEvents.addEventListener(_this2.scrollableAncestor, 'scroll', _this2._handleScroll, { passive: true });
_this2.resizeEventListenerUnsubscribe = consolidatedEvents.addEventListener(window, 'resize', _this2._handleScroll, { passive: true });
_this2._handleScroll(null);
_this2.scrollEventListenerUnsubscribe = consolidatedEvents.addEventListener(_this2.scrollableAncestor, 'scroll', _this2._handleScroll, {
passive: true
});
}
_this2.resizeEventListenerUnsubscribe = consolidatedEvents.addEventListener(window, 'resize', _this2._handleScroll, {
passive: true
});
return componentDidMount;
}()
_this2._handleScroll(null);
});
}
}, {
key: 'componentWillReceiveProps',
value: function () {
function componentWillReceiveProps(newProps) {
if (process.env.NODE_ENV !== 'production') {
ensureChildrenIsValid(newProps.children);
}
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(newProps) {
if (process.env.NODE_ENV !== 'production') {
ensureChildrenIsValid(newProps.children);
}
return componentWillReceiveProps;
}()
}
}, {
key: 'componentDidUpdate',
value: function () {
function componentDidUpdate() {
var _this3 = this;
key: "componentDidUpdate",
value: function componentDidUpdate() {
var _this3 = this;
if (!Waypoint.getWindow()) {
return;
}
if (!Waypoint.getWindow()) {
return;
}
if (!this.scrollableAncestor) {
// The Waypoint has not yet initialized.
return;
}
if (!this.scrollableAncestor) {
// The Waypoint has not yet initialized.
return;
} // The element may have moved, so we need to recompute its position on the
// page. This happens via handleScroll in a way that forces layout to be
// computed.
//
// We want this to be deferred to avoid forcing layout during render, which
// causes layout thrashing. And, if we already have this work enqueued, we
// can just wait for that to happen instead of enqueueing again.
// The element may have moved, so we need to recompute its position on the
// page. This happens via handleScroll in a way that forces layout to be
// computed.
//
// We want this to be deferred to avoid forcing layout during render, which
// causes layout thrashing. And, if we already have this work enqueued, we
// can just wait for that to happen instead of enqueueing again.
if (this.cancelOnNextTick) {
return;
}
this.cancelOnNextTick = onNextTick(function () {
_this3.cancelOnNextTick = null;
_this3._handleScroll(null);
});
if (this.cancelOnNextTick) {
return;
}
return componentDidUpdate;
}()
this.cancelOnNextTick = onNextTick(function () {
_this3.cancelOnNextTick = null;
_this3._handleScroll(null);
});
}
}, {
key: 'componentWillUnmount',
value: function () {
function componentWillUnmount() {
if (!Waypoint.getWindow()) {
return;
}
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (!Waypoint.getWindow()) {
return;
}
if (this.scrollEventListenerUnsubscribe) {
this.scrollEventListenerUnsubscribe();
}
if (this.resizeEventListenerUnsubscribe) {
this.resizeEventListenerUnsubscribe();
}
if (this.scrollEventListenerUnsubscribe) {
this.scrollEventListenerUnsubscribe();
}
if (this.cancelOnNextTick) {
this.cancelOnNextTick();
}
if (this.resizeEventListenerUnsubscribe) {
this.resizeEventListenerUnsubscribe();
}
return componentWillUnmount;
}()
if (this.cancelOnNextTick) {
this.cancelOnNextTick();
}
}
/**

@@ -424,41 +456,35 @@ * Traverses up the DOM to find an ancestor container which has an overflow

}, {
key: '_findScrollableAncestor',
value: function () {
function _findScrollableAncestor() {
var _props2 = this.props,
horizontal = _props2.horizontal,
scrollableAncestor = _props2.scrollableAncestor;
key: "_findScrollableAncestor",
value: function _findScrollableAncestor() {
var _this$props = this.props,
horizontal = _this$props.horizontal,
scrollableAncestor = _this$props.scrollableAncestor;
if (scrollableAncestor) {
return resolveScrollableAncestorProp(scrollableAncestor);
}
if (scrollableAncestor) {
return resolveScrollableAncestorProp(scrollableAncestor);
}
var node = this._ref;
var node = this._ref;
while (node.parentNode) {
node = node.parentNode;
while (node.parentNode) {
node = node.parentNode;
if (node === document.body) {
// We've reached all the way to the root node.
return window;
}
if (node === document.body) {
// We've reached all the way to the root node.
return window;
}
var style = window.getComputedStyle(node);
var overflowDirec = horizontal ? style.getPropertyValue('overflow-x') : style.getPropertyValue('overflow-y');
var overflow = overflowDirec || style.getPropertyValue('overflow');
var style = window.getComputedStyle(node);
var overflowDirec = horizontal ? style.getPropertyValue('overflow-x') : style.getPropertyValue('overflow-y');
var overflow = overflowDirec || style.getPropertyValue('overflow');
if (overflow === 'auto' || overflow === 'scroll') {
return node;
}
if (overflow === 'auto' || overflow === 'scroll') {
return node;
}
} // A scrollable ancestor element was not found, which means that we need to
// do stuff on window.
// A scrollable ancestor element was not found, which means that we need to
// do stuff on window.
return window;
}
return _findScrollableAncestor;
}()
return window;
}
/**

@@ -471,36 +497,58 @@ * @param {Object} event the native scroll event coming from the scrollable

}, {
key: '_handleScroll',
value: function () {
function _handleScroll(event) {
if (!this._ref) {
// There's a chance we end up here after the component has been unmounted.
return;
}
key: "_handleScroll",
value: function _handleScroll(event) {
if (!this._ref) {
// There's a chance we end up here after the component has been unmounted.
return;
}
var bounds = this._getBounds();
var currentPosition = getCurrentPosition(bounds);
var previousPosition = this._previousPosition;
var _props3 = this.props,
debug = _props3.debug,
onPositionChange = _props3.onPositionChange,
onEnter = _props3.onEnter,
onLeave = _props3.onLeave,
fireOnRapidScroll = _props3.fireOnRapidScroll;
var bounds = this._getBounds();
var currentPosition = getCurrentPosition(bounds);
var previousPosition = this._previousPosition;
var _this$props2 = this.props,
debug = _this$props2.debug,
onPositionChange = _this$props2.onPositionChange,
onEnter = _this$props2.onEnter,
onLeave = _this$props2.onLeave,
fireOnRapidScroll = _this$props2.fireOnRapidScroll;
if (process.env.NODE_ENV !== 'production' && debug) {
debugLog('currentPosition', currentPosition);
debugLog('previousPosition', previousPosition);
}
if (process.env.NODE_ENV !== 'production' && debug) {
debugLog('currentPosition', currentPosition);
debugLog('previousPosition', previousPosition);
} // Save previous position as early as possible to prevent cycles
// Save previous position as early as possible to prevent cycles
this._previousPosition = currentPosition;
if (previousPosition === currentPosition) {
// No change since last trigger
return;
}
this._previousPosition = currentPosition;
var callbackArg = {
currentPosition: currentPosition,
if (previousPosition === currentPosition) {
// No change since last trigger
return;
}
var callbackArg = {
currentPosition: currentPosition,
previousPosition: previousPosition,
event: event,
waypointTop: bounds.waypointTop,
waypointBottom: bounds.waypointBottom,
viewportTop: bounds.viewportTop,
viewportBottom: bounds.viewportBottom
};
onPositionChange.call(this, callbackArg);
if (currentPosition === INSIDE) {
onEnter.call(this, callbackArg);
} else if (previousPosition === INSIDE) {
onLeave.call(this, callbackArg);
}
var isRapidScrollDown = previousPosition === BELOW && currentPosition === ABOVE;
var isRapidScrollUp = previousPosition === ABOVE && currentPosition === BELOW;
if (fireOnRapidScroll && (isRapidScrollDown || isRapidScrollUp)) {
// If the scroll event isn't fired often enough to occur while the
// waypoint was visible, we trigger both callbacks anyway.
onEnter.call(this, {
currentPosition: INSIDE,
previousPosition: previousPosition,

@@ -512,93 +560,60 @@ event: event,

viewportBottom: bounds.viewportBottom
};
onPositionChange.call(this, callbackArg);
if (currentPosition === INSIDE) {
onEnter.call(this, callbackArg);
} else if (previousPosition === INSIDE) {
onLeave.call(this, callbackArg);
}
var isRapidScrollDown = previousPosition === BELOW && currentPosition === ABOVE;
var isRapidScrollUp = previousPosition === ABOVE && currentPosition === BELOW;
if (fireOnRapidScroll && (isRapidScrollDown || isRapidScrollUp)) {
// If the scroll event isn't fired often enough to occur while the
// waypoint was visible, we trigger both callbacks anyway.
onEnter.call(this, {
currentPosition: INSIDE,
previousPosition: previousPosition,
event: event,
waypointTop: bounds.waypointTop,
waypointBottom: bounds.waypointBottom,
viewportTop: bounds.viewportTop,
viewportBottom: bounds.viewportBottom
});
onLeave.call(this, {
currentPosition: currentPosition,
previousPosition: INSIDE,
event: event,
waypointTop: bounds.waypointTop,
waypointBottom: bounds.waypointBottom,
viewportTop: bounds.viewportTop,
viewportBottom: bounds.viewportBottom
});
}
});
onLeave.call(this, {
currentPosition: currentPosition,
previousPosition: INSIDE,
event: event,
waypointTop: bounds.waypointTop,
waypointBottom: bounds.waypointBottom,
viewportTop: bounds.viewportTop,
viewportBottom: bounds.viewportBottom
});
}
return _handleScroll;
}()
}
}, {
key: '_getBounds',
value: function () {
function _getBounds() {
var _props4 = this.props,
horizontal = _props4.horizontal,
debug = _props4.debug;
key: "_getBounds",
value: function _getBounds() {
var _this$props3 = this.props,
horizontal = _this$props3.horizontal,
debug = _this$props3.debug;
var _ref$getBoundingClien = this._ref.getBoundingClientRect(),
left = _ref$getBoundingClien.left,
top = _ref$getBoundingClien.top,
right = _ref$getBoundingClien.right,
bottom = _ref$getBoundingClien.bottom;
var _this$_ref$getBoundin = this._ref.getBoundingClientRect(),
left = _this$_ref$getBoundin.left,
top = _this$_ref$getBoundin.top,
right = _this$_ref$getBoundin.right,
bottom = _this$_ref$getBoundin.bottom;
var waypointTop = horizontal ? left : top;
var waypointBottom = horizontal ? right : bottom;
var waypointTop = horizontal ? left : top;
var waypointBottom = horizontal ? right : bottom;
var contextHeight;
var contextScrollTop;
var contextHeight = void 0;
var contextScrollTop = void 0;
if (this.scrollableAncestor === window) {
contextHeight = horizontal ? window.innerWidth : window.innerHeight;
contextScrollTop = 0;
} else {
contextHeight = horizontal ? this.scrollableAncestor.offsetWidth : this.scrollableAncestor.offsetHeight;
contextScrollTop = horizontal ? this.scrollableAncestor.getBoundingClientRect().left : this.scrollableAncestor.getBoundingClientRect().top;
}
if (this.scrollableAncestor === window) {
contextHeight = horizontal ? window.innerWidth : window.innerHeight;
contextScrollTop = 0;
} else {
contextHeight = horizontal ? this.scrollableAncestor.offsetWidth : this.scrollableAncestor.offsetHeight;
contextScrollTop = horizontal ? this.scrollableAncestor.getBoundingClientRect().left : this.scrollableAncestor.getBoundingClientRect().top;
}
if (process.env.NODE_ENV !== 'production' && debug) {
debugLog('waypoint top', waypointTop);
debugLog('waypoint bottom', waypointBottom);
debugLog('scrollableAncestor height', contextHeight);
debugLog('scrollableAncestor scrollTop', contextScrollTop);
}
var _props5 = this.props,
bottomOffset = _props5.bottomOffset,
topOffset = _props5.topOffset;
var topOffsetPx = computeOffsetPixels(topOffset, contextHeight);
var bottomOffsetPx = computeOffsetPixels(bottomOffset, contextHeight);
var contextBottom = contextScrollTop + contextHeight;
return {
waypointTop: waypointTop,
waypointBottom: waypointBottom,
viewportTop: contextScrollTop + topOffsetPx,
viewportBottom: contextBottom - bottomOffsetPx
};
if (process.env.NODE_ENV !== 'production' && debug) {
debugLog('waypoint top', waypointTop);
debugLog('waypoint bottom', waypointBottom);
debugLog('scrollableAncestor height', contextHeight);
debugLog('scrollableAncestor scrollTop', contextScrollTop);
}
return _getBounds;
}()
var _this$props4 = this.props,
bottomOffset = _this$props4.bottomOffset,
topOffset = _this$props4.topOffset;
var topOffsetPx = computeOffsetPixels(topOffset, contextHeight);
var bottomOffsetPx = computeOffsetPixels(bottomOffset, contextHeight);
var contextBottom = contextScrollTop + contextHeight;
return {
waypointTop: waypointTop,
waypointBottom: waypointBottom,
viewportTop: contextScrollTop + topOffsetPx,
viewportBottom: contextBottom - bottomOffsetPx
};
}
/**

@@ -609,40 +624,41 @@ * @return {Object}

}, {
key: 'render',
value: function () {
function render() {
var _this4 = this;
key: "render",
value: function render() {
var _this4 = this;
var children = this.props.children;
var children = this.props.children;
if (!children) {
// We need an element that we can locate in the DOM to determine where it is
// rendered relative to the top of its context.
return React.createElement("span", {
ref: this.refElement,
style: {
fontSize: 0
}
});
}
if (!children) {
// We need an element that we can locate in the DOM to determine where it is
// rendered relative to the top of its context.
return React.createElement('span', { ref: this.refElement, style: { fontSize: 0 } });
}
if (isDOMElement(children) || reactIs.isForwardRef(children)) {
var ref = function ref(node) {
_this4.refElement(node);
if (isDOMElement(children) || reactIs.isForwardRef(children)) {
var ref = function () {
function ref(node) {
_this4.refElement(node);
if (children.ref) {
if (typeof children.ref === 'function') {
children.ref(node);
} else {
children.ref.current = node;
}
}
if (children.ref) {
if (typeof children.ref === 'function') {
children.ref(node);
} else {
children.ref.current = node;
}
}
};
return ref;
}();
return React.cloneElement(children, { ref: ref });
}
return React.cloneElement(children, { innerRef: this.refElement });
return React.cloneElement(children, {
ref: ref
});
}
return render;
}()
return React.cloneElement(children, {
innerRef: this.refElement
});
}
}]);

@@ -664,3 +680,2 @@

horizontal: PropTypes.bool,
// `topOffset` can either be a number, in which case its a distance from the

@@ -674,3 +689,2 @@ // top of the container in pixels, or a string value. Valid string values are

topOffset: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
// `bottomOffset` is like `topOffset`, but for the bottom of the container.

@@ -685,2 +699,3 @@ bottomOffset: PropTypes.oneOfType([PropTypes.string, PropTypes.number])

Waypoint.invisible = INVISIBLE;
Waypoint.getWindow = function () {

@@ -690,4 +705,6 @@ if (typeof window !== 'undefined') {

}
return undefined;
};
Waypoint.defaultProps = defaultProps;

@@ -694,0 +711,0 @@ Waypoint.displayName = 'Waypoint';

679

es/index.js

@@ -1,6 +0,75 @@

import React from 'react';
import { addEventListener } from 'consolidated-events';
import PropTypes from 'prop-types';
import React from 'react';
import { isForwardRef } from 'react-is';
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function");
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
writable: true,
configurable: true
}
});
if (superClass) _setPrototypeOf(subClass, superClass);
}
function _getPrototypeOf(o) {
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
return o.__proto__ || Object.getPrototypeOf(o);
};
return _getPrototypeOf(o);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
function _possibleConstructorReturn(self, call) {
if (call && (typeof call === "object" || typeof call === "function")) {
return call;
}
return _assertThisInitialized(self);
}
/**

@@ -42,3 +111,5 @@ * Attempts to parse the offset provided as a prop as a percentage. For

return parseFloat(str);
}if (str.slice(-2) === 'px') {
}
if (str.slice(-2) === 'px') {
return parseFloat(str.slice(0, -2));

@@ -55,2 +126,3 @@ }

*/
function computeOffsetPixels(offset, contextHeight) {

@@ -64,2 +136,3 @@ var pixelOffset = parseOffsetAsPixels(offset);

var percentOffset = parseOffsetAsPercentage(offset);
if (typeof percentOffset === 'number') {

@@ -82,2 +155,3 @@ return percentOffset * contextHeight;

(_console = console).log.apply(_console, arguments); // eslint-disable-line no-console
}

@@ -87,3 +161,2 @@ }

var errorMessage = '<Waypoint> expected to receive a single React element child.\n\n' + 'See https://goo.gl/LrBNgw for more info.';
/**

@@ -95,2 +168,3 @@ * Raise an error if more that one child was provided to "children"

*/
function ensureChildrenIsValid(children) {

@@ -118,3 +192,2 @@ if (children) {

var errorMessage$1 = '<Waypoint> needs a DOM element to compute boundaries. The child you passed is neither a ' + 'DOM element (e.g. <div>) nor does it use the innerRef prop.\n\n' + 'See https://goo.gl/LrBNgw for more info.';
/**

@@ -127,2 +200,3 @@ * Raise an error if "children" is not a DOM Element and there is no ref provided to Waypoint

*/
function ensureRefIsProvidedByChild(children, ref) {

@@ -141,18 +215,19 @@ if (children && !isDOMElement(children) && !ref) {

*/
function getCurrentPosition(bounds) {
if (bounds.viewportBottom - bounds.viewportTop === 0) {
return INVISIBLE;
}
} // top is within the viewport
// top is within the viewport
if (bounds.viewportTop <= bounds.waypointTop && bounds.waypointTop <= bounds.viewportBottom) {
return INSIDE;
}
} // bottom is within the viewport
// bottom is within the viewport
if (bounds.viewportTop <= bounds.waypointBottom && bounds.waypointBottom <= bounds.viewportBottom) {
return INSIDE;
}
} // top is above the viewport and bottom is below the viewport
// top is above the viewport and bottom is below the viewport
if (bounds.waypointTop <= bounds.viewportTop && bounds.viewportBottom <= bounds.waypointBottom) {

@@ -173,5 +248,4 @@ return INSIDE;

var timeout = void 0;
var timeout;
var timeoutQueue = [];
function onNextTick(cb) {

@@ -182,7 +256,6 @@ timeoutQueue.push(cb);

timeout = setTimeout(function () {
timeout = null;
timeout = null; // Drain the timeoutQueue
// Drain the timeoutQueue
var item = void 0;
// eslint-disable-next-line no-cond-assign
var item; // eslint-disable-next-line no-cond-assign
while (item = timeoutQueue.shift()) {

@@ -195,26 +268,21 @@ item();

var isSubscribed = true;
return function unsubscribe() {
if (!isSubscribed) {
return;
}
return function () {
function unsubscribe() {
if (!isSubscribed) {
return;
}
isSubscribed = false;
var index = timeoutQueue.indexOf(cb);
isSubscribed = false;
if (index === -1) {
return;
}
var index = timeoutQueue.indexOf(cb);
if (index === -1) {
return;
}
timeoutQueue.splice(index, 1);
timeoutQueue.splice(index, 1);
if (!timeoutQueue.length && timeout) {
clearTimeout(timeout);
timeout = null;
}
if (!timeoutQueue.length && timeout) {
clearTimeout(timeout);
timeout = null;
}
return unsubscribe;
}();
};
}

@@ -233,10 +301,2 @@

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var defaultProps = {

@@ -249,29 +309,19 @@ debug: false,

horizontal: false,
onEnter: function () {
function onEnter() {}
return onEnter;
}(),
onLeave: function () {
function onLeave() {}
return onLeave;
}(),
onPositionChange: function () {
function onPositionChange() {}
return onPositionChange;
}(),
onEnter: function onEnter() {},
onLeave: function onLeave() {},
onPositionChange: function onPositionChange() {},
fireOnRapidScroll: true
};
}; // Calls a function when you scroll to the element.
// Calls a function when you scroll to the element.
var Waypoint = function (_React$PureComponent) {
var Waypoint =
/*#__PURE__*/
function (_React$PureComponent) {
_inherits(Waypoint, _React$PureComponent);
function Waypoint(props) {
var _this;
_classCallCheck(this, Waypoint);
var _this = _possibleConstructorReturn(this, (Waypoint.__proto__ || Object.getPrototypeOf(Waypoint)).call(this, props));
_this = _possibleConstructorReturn(this, _getPrototypeOf(Waypoint).call(this, props));

@@ -281,2 +331,3 @@ _this.refElement = function (e) {

};
return _this;

@@ -286,122 +337,103 @@ }

_createClass(Waypoint, [{
key: 'componentWillMount',
value: function () {
function componentWillMount() {
var children = this.props.children;
key: "componentWillMount",
value: function componentWillMount() {
var children = this.props.children;
if (process.env.NODE_ENV !== 'production') {
ensureChildrenIsValid(children);
}
if (process.env.NODE_ENV !== 'production') {
ensureChildrenIsValid(children);
}
return componentWillMount;
}()
}
}, {
key: 'componentDidMount',
value: function () {
function componentDidMount() {
var _this2 = this;
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
if (!Waypoint.getWindow()) {
return;
}
if (!Waypoint.getWindow()) {
return;
} // this._ref may occasionally not be set at this time. To help ensure that
// this works smoothly and to avoid layout thrashing, we want to delay the
// initial execution until the next tick.
// this._ref may occasionally not be set at this time. To help ensure that
// this works smoothly and to avoid layout thrashing, we want to delay the
// initial execution until the next tick.
this.cancelOnNextTick = onNextTick(function () {
_this2.cancelOnNextTick = null;
var _props = _this2.props,
children = _props.children,
debug = _props.debug;
// Berofe doing anything, we want to check that this._ref is avaliable in Waypoint
this.cancelOnNextTick = onNextTick(function () {
_this2.cancelOnNextTick = null;
var _this2$props = _this2.props,
children = _this2$props.children,
debug = _this2$props.debug; // Berofe doing anything, we want to check that this._ref is avaliable in Waypoint
ensureRefIsProvidedByChild(children, _this2._ref);
ensureRefIsProvidedByChild(children, _this2._ref);
_this2._handleScroll = _this2._handleScroll.bind(_this2);
_this2.scrollableAncestor = _this2._findScrollableAncestor();
_this2._handleScroll = _this2._handleScroll.bind(_this2);
_this2.scrollableAncestor = _this2._findScrollableAncestor();
if (process.env.NODE_ENV !== 'production' && debug) {
debugLog('scrollableAncestor', _this2.scrollableAncestor);
}
if (process.env.NODE_ENV !== 'production' && debug) {
debugLog('scrollableAncestor', _this2.scrollableAncestor);
}
_this2.scrollEventListenerUnsubscribe = addEventListener(_this2.scrollableAncestor, 'scroll', _this2._handleScroll, { passive: true });
_this2.resizeEventListenerUnsubscribe = addEventListener(window, 'resize', _this2._handleScroll, { passive: true });
_this2._handleScroll(null);
_this2.scrollEventListenerUnsubscribe = addEventListener(_this2.scrollableAncestor, 'scroll', _this2._handleScroll, {
passive: true
});
}
_this2.resizeEventListenerUnsubscribe = addEventListener(window, 'resize', _this2._handleScroll, {
passive: true
});
return componentDidMount;
}()
_this2._handleScroll(null);
});
}
}, {
key: 'componentWillReceiveProps',
value: function () {
function componentWillReceiveProps(newProps) {
if (process.env.NODE_ENV !== 'production') {
ensureChildrenIsValid(newProps.children);
}
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(newProps) {
if (process.env.NODE_ENV !== 'production') {
ensureChildrenIsValid(newProps.children);
}
return componentWillReceiveProps;
}()
}
}, {
key: 'componentDidUpdate',
value: function () {
function componentDidUpdate() {
var _this3 = this;
key: "componentDidUpdate",
value: function componentDidUpdate() {
var _this3 = this;
if (!Waypoint.getWindow()) {
return;
}
if (!Waypoint.getWindow()) {
return;
}
if (!this.scrollableAncestor) {
// The Waypoint has not yet initialized.
return;
}
if (!this.scrollableAncestor) {
// The Waypoint has not yet initialized.
return;
} // The element may have moved, so we need to recompute its position on the
// page. This happens via handleScroll in a way that forces layout to be
// computed.
//
// We want this to be deferred to avoid forcing layout during render, which
// causes layout thrashing. And, if we already have this work enqueued, we
// can just wait for that to happen instead of enqueueing again.
// The element may have moved, so we need to recompute its position on the
// page. This happens via handleScroll in a way that forces layout to be
// computed.
//
// We want this to be deferred to avoid forcing layout during render, which
// causes layout thrashing. And, if we already have this work enqueued, we
// can just wait for that to happen instead of enqueueing again.
if (this.cancelOnNextTick) {
return;
}
this.cancelOnNextTick = onNextTick(function () {
_this3.cancelOnNextTick = null;
_this3._handleScroll(null);
});
if (this.cancelOnNextTick) {
return;
}
return componentDidUpdate;
}()
this.cancelOnNextTick = onNextTick(function () {
_this3.cancelOnNextTick = null;
_this3._handleScroll(null);
});
}
}, {
key: 'componentWillUnmount',
value: function () {
function componentWillUnmount() {
if (!Waypoint.getWindow()) {
return;
}
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (!Waypoint.getWindow()) {
return;
}
if (this.scrollEventListenerUnsubscribe) {
this.scrollEventListenerUnsubscribe();
}
if (this.resizeEventListenerUnsubscribe) {
this.resizeEventListenerUnsubscribe();
}
if (this.scrollEventListenerUnsubscribe) {
this.scrollEventListenerUnsubscribe();
}
if (this.cancelOnNextTick) {
this.cancelOnNextTick();
}
if (this.resizeEventListenerUnsubscribe) {
this.resizeEventListenerUnsubscribe();
}
return componentWillUnmount;
}()
if (this.cancelOnNextTick) {
this.cancelOnNextTick();
}
}
/**

@@ -417,41 +449,35 @@ * Traverses up the DOM to find an ancestor container which has an overflow

}, {
key: '_findScrollableAncestor',
value: function () {
function _findScrollableAncestor() {
var _props2 = this.props,
horizontal = _props2.horizontal,
scrollableAncestor = _props2.scrollableAncestor;
key: "_findScrollableAncestor",
value: function _findScrollableAncestor() {
var _this$props = this.props,
horizontal = _this$props.horizontal,
scrollableAncestor = _this$props.scrollableAncestor;
if (scrollableAncestor) {
return resolveScrollableAncestorProp(scrollableAncestor);
}
if (scrollableAncestor) {
return resolveScrollableAncestorProp(scrollableAncestor);
}
var node = this._ref;
var node = this._ref;
while (node.parentNode) {
node = node.parentNode;
while (node.parentNode) {
node = node.parentNode;
if (node === document.body) {
// We've reached all the way to the root node.
return window;
}
if (node === document.body) {
// We've reached all the way to the root node.
return window;
}
var style = window.getComputedStyle(node);
var overflowDirec = horizontal ? style.getPropertyValue('overflow-x') : style.getPropertyValue('overflow-y');
var overflow = overflowDirec || style.getPropertyValue('overflow');
var style = window.getComputedStyle(node);
var overflowDirec = horizontal ? style.getPropertyValue('overflow-x') : style.getPropertyValue('overflow-y');
var overflow = overflowDirec || style.getPropertyValue('overflow');
if (overflow === 'auto' || overflow === 'scroll') {
return node;
}
if (overflow === 'auto' || overflow === 'scroll') {
return node;
}
} // A scrollable ancestor element was not found, which means that we need to
// do stuff on window.
// A scrollable ancestor element was not found, which means that we need to
// do stuff on window.
return window;
}
return _findScrollableAncestor;
}()
return window;
}
/**

@@ -464,36 +490,58 @@ * @param {Object} event the native scroll event coming from the scrollable

}, {
key: '_handleScroll',
value: function () {
function _handleScroll(event) {
if (!this._ref) {
// There's a chance we end up here after the component has been unmounted.
return;
}
key: "_handleScroll",
value: function _handleScroll(event) {
if (!this._ref) {
// There's a chance we end up here after the component has been unmounted.
return;
}
var bounds = this._getBounds();
var currentPosition = getCurrentPosition(bounds);
var previousPosition = this._previousPosition;
var _props3 = this.props,
debug = _props3.debug,
onPositionChange = _props3.onPositionChange,
onEnter = _props3.onEnter,
onLeave = _props3.onLeave,
fireOnRapidScroll = _props3.fireOnRapidScroll;
var bounds = this._getBounds();
var currentPosition = getCurrentPosition(bounds);
var previousPosition = this._previousPosition;
var _this$props2 = this.props,
debug = _this$props2.debug,
onPositionChange = _this$props2.onPositionChange,
onEnter = _this$props2.onEnter,
onLeave = _this$props2.onLeave,
fireOnRapidScroll = _this$props2.fireOnRapidScroll;
if (process.env.NODE_ENV !== 'production' && debug) {
debugLog('currentPosition', currentPosition);
debugLog('previousPosition', previousPosition);
}
if (process.env.NODE_ENV !== 'production' && debug) {
debugLog('currentPosition', currentPosition);
debugLog('previousPosition', previousPosition);
} // Save previous position as early as possible to prevent cycles
// Save previous position as early as possible to prevent cycles
this._previousPosition = currentPosition;
if (previousPosition === currentPosition) {
// No change since last trigger
return;
}
this._previousPosition = currentPosition;
var callbackArg = {
currentPosition: currentPosition,
if (previousPosition === currentPosition) {
// No change since last trigger
return;
}
var callbackArg = {
currentPosition: currentPosition,
previousPosition: previousPosition,
event: event,
waypointTop: bounds.waypointTop,
waypointBottom: bounds.waypointBottom,
viewportTop: bounds.viewportTop,
viewportBottom: bounds.viewportBottom
};
onPositionChange.call(this, callbackArg);
if (currentPosition === INSIDE) {
onEnter.call(this, callbackArg);
} else if (previousPosition === INSIDE) {
onLeave.call(this, callbackArg);
}
var isRapidScrollDown = previousPosition === BELOW && currentPosition === ABOVE;
var isRapidScrollUp = previousPosition === ABOVE && currentPosition === BELOW;
if (fireOnRapidScroll && (isRapidScrollDown || isRapidScrollUp)) {
// If the scroll event isn't fired often enough to occur while the
// waypoint was visible, we trigger both callbacks anyway.
onEnter.call(this, {
currentPosition: INSIDE,
previousPosition: previousPosition,

@@ -505,93 +553,60 @@ event: event,

viewportBottom: bounds.viewportBottom
};
onPositionChange.call(this, callbackArg);
if (currentPosition === INSIDE) {
onEnter.call(this, callbackArg);
} else if (previousPosition === INSIDE) {
onLeave.call(this, callbackArg);
}
var isRapidScrollDown = previousPosition === BELOW && currentPosition === ABOVE;
var isRapidScrollUp = previousPosition === ABOVE && currentPosition === BELOW;
if (fireOnRapidScroll && (isRapidScrollDown || isRapidScrollUp)) {
// If the scroll event isn't fired often enough to occur while the
// waypoint was visible, we trigger both callbacks anyway.
onEnter.call(this, {
currentPosition: INSIDE,
previousPosition: previousPosition,
event: event,
waypointTop: bounds.waypointTop,
waypointBottom: bounds.waypointBottom,
viewportTop: bounds.viewportTop,
viewportBottom: bounds.viewportBottom
});
onLeave.call(this, {
currentPosition: currentPosition,
previousPosition: INSIDE,
event: event,
waypointTop: bounds.waypointTop,
waypointBottom: bounds.waypointBottom,
viewportTop: bounds.viewportTop,
viewportBottom: bounds.viewportBottom
});
}
});
onLeave.call(this, {
currentPosition: currentPosition,
previousPosition: INSIDE,
event: event,
waypointTop: bounds.waypointTop,
waypointBottom: bounds.waypointBottom,
viewportTop: bounds.viewportTop,
viewportBottom: bounds.viewportBottom
});
}
return _handleScroll;
}()
}
}, {
key: '_getBounds',
value: function () {
function _getBounds() {
var _props4 = this.props,
horizontal = _props4.horizontal,
debug = _props4.debug;
key: "_getBounds",
value: function _getBounds() {
var _this$props3 = this.props,
horizontal = _this$props3.horizontal,
debug = _this$props3.debug;
var _ref$getBoundingClien = this._ref.getBoundingClientRect(),
left = _ref$getBoundingClien.left,
top = _ref$getBoundingClien.top,
right = _ref$getBoundingClien.right,
bottom = _ref$getBoundingClien.bottom;
var _this$_ref$getBoundin = this._ref.getBoundingClientRect(),
left = _this$_ref$getBoundin.left,
top = _this$_ref$getBoundin.top,
right = _this$_ref$getBoundin.right,
bottom = _this$_ref$getBoundin.bottom;
var waypointTop = horizontal ? left : top;
var waypointBottom = horizontal ? right : bottom;
var waypointTop = horizontal ? left : top;
var waypointBottom = horizontal ? right : bottom;
var contextHeight;
var contextScrollTop;
var contextHeight = void 0;
var contextScrollTop = void 0;
if (this.scrollableAncestor === window) {
contextHeight = horizontal ? window.innerWidth : window.innerHeight;
contextScrollTop = 0;
} else {
contextHeight = horizontal ? this.scrollableAncestor.offsetWidth : this.scrollableAncestor.offsetHeight;
contextScrollTop = horizontal ? this.scrollableAncestor.getBoundingClientRect().left : this.scrollableAncestor.getBoundingClientRect().top;
}
if (this.scrollableAncestor === window) {
contextHeight = horizontal ? window.innerWidth : window.innerHeight;
contextScrollTop = 0;
} else {
contextHeight = horizontal ? this.scrollableAncestor.offsetWidth : this.scrollableAncestor.offsetHeight;
contextScrollTop = horizontal ? this.scrollableAncestor.getBoundingClientRect().left : this.scrollableAncestor.getBoundingClientRect().top;
}
if (process.env.NODE_ENV !== 'production' && debug) {
debugLog('waypoint top', waypointTop);
debugLog('waypoint bottom', waypointBottom);
debugLog('scrollableAncestor height', contextHeight);
debugLog('scrollableAncestor scrollTop', contextScrollTop);
}
var _props5 = this.props,
bottomOffset = _props5.bottomOffset,
topOffset = _props5.topOffset;
var topOffsetPx = computeOffsetPixels(topOffset, contextHeight);
var bottomOffsetPx = computeOffsetPixels(bottomOffset, contextHeight);
var contextBottom = contextScrollTop + contextHeight;
return {
waypointTop: waypointTop,
waypointBottom: waypointBottom,
viewportTop: contextScrollTop + topOffsetPx,
viewportBottom: contextBottom - bottomOffsetPx
};
if (process.env.NODE_ENV !== 'production' && debug) {
debugLog('waypoint top', waypointTop);
debugLog('waypoint bottom', waypointBottom);
debugLog('scrollableAncestor height', contextHeight);
debugLog('scrollableAncestor scrollTop', contextScrollTop);
}
return _getBounds;
}()
var _this$props4 = this.props,
bottomOffset = _this$props4.bottomOffset,
topOffset = _this$props4.topOffset;
var topOffsetPx = computeOffsetPixels(topOffset, contextHeight);
var bottomOffsetPx = computeOffsetPixels(bottomOffset, contextHeight);
var contextBottom = contextScrollTop + contextHeight;
return {
waypointTop: waypointTop,
waypointBottom: waypointBottom,
viewportTop: contextScrollTop + topOffsetPx,
viewportBottom: contextBottom - bottomOffsetPx
};
}
/**

@@ -602,40 +617,41 @@ * @return {Object}

}, {
key: 'render',
value: function () {
function render() {
var _this4 = this;
key: "render",
value: function render() {
var _this4 = this;
var children = this.props.children;
var children = this.props.children;
if (!children) {
// We need an element that we can locate in the DOM to determine where it is
// rendered relative to the top of its context.
return React.createElement("span", {
ref: this.refElement,
style: {
fontSize: 0
}
});
}
if (!children) {
// We need an element that we can locate in the DOM to determine where it is
// rendered relative to the top of its context.
return React.createElement('span', { ref: this.refElement, style: { fontSize: 0 } });
}
if (isDOMElement(children) || isForwardRef(children)) {
var ref = function ref(node) {
_this4.refElement(node);
if (isDOMElement(children) || isForwardRef(children)) {
var ref = function () {
function ref(node) {
_this4.refElement(node);
if (children.ref) {
if (typeof children.ref === 'function') {
children.ref(node);
} else {
children.ref.current = node;
}
}
if (children.ref) {
if (typeof children.ref === 'function') {
children.ref(node);
} else {
children.ref.current = node;
}
}
};
return ref;
}();
return React.cloneElement(children, { ref: ref });
}
return React.cloneElement(children, { innerRef: this.refElement });
return React.cloneElement(children, {
ref: ref
});
}
return render;
}()
return React.cloneElement(children, {
innerRef: this.refElement
});
}
}]);

@@ -657,3 +673,2 @@

horizontal: PropTypes.bool,
// `topOffset` can either be a number, in which case its a distance from the

@@ -667,3 +682,2 @@ // top of the container in pixels, or a string value. Valid string values are

topOffset: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
// `bottomOffset` is like `topOffset`, but for the bottom of the container.

@@ -678,2 +692,3 @@ bottomOffset: PropTypes.oneOfType([PropTypes.string, PropTypes.number])

Waypoint.invisible = INVISIBLE;
Waypoint.getWindow = function () {

@@ -683,4 +698,6 @@ if (typeof window !== 'undefined') {

}
return undefined;
};
Waypoint.defaultProps = defaultProps;

@@ -687,0 +704,0 @@ Waypoint.displayName = 'Waypoint';

4

index.d.ts
import * as React from 'react';
declare class Waypoint extends React.Component<Waypoint.WaypointProps, {}> {
export declare class Waypoint extends React.Component<Waypoint.WaypointProps, {}> {
static above: string;

@@ -10,4 +10,2 @@ static below: string;

export Waypoint;
declare namespace Waypoint {

@@ -14,0 +12,0 @@ interface CallbackArgs {

14

package.json
{
"name": "react-waypoint",
"version": "9.0.0",
"version": "9.0.1",
"description": "A React component to execute a function whenever you scroll to an element.",

@@ -41,7 +41,7 @@ "main": "cjs/index.js",

"devDependencies": {
"@babel/cli": "^7.0.0",
"@babel/core": "^7.0.0",
"@types/react": "^15.0.21",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^6.4.0",
"babel-preset-airbnb": "^2.5.1",
"babel-loader": "^8.0.0",
"babel-preset-airbnb": "^3.2.0",
"eslint": "^4.19.1",

@@ -64,4 +64,4 @@ "eslint-config-airbnb": "^17.1.0",

"rimraf": "^2.6.2",
"rollup": "^0.62.0",
"rollup-plugin-babel": "^3.0.7",
"rollup": "^1.4.0",
"rollup-plugin-babel": "^4.3.2",
"safe-publish-latest": "^1.1.1",

@@ -68,0 +68,0 @@ "webpack": "^2.3.3"

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc