synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
54 lines • 2.54 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
/** Originally from YamUI. May need to alter to update to later versions of react-intersection-observer (which does the heavy lifting).
* This component has the option to provide an outOfView renderer, which might be useful in the future.
*/
var React = (0, tslib_1.__importStar)(require("react"));
var react_intersection_observer_1 = (0, tslib_1.__importDefault)(require("react-intersection-observer"));
/**
* VisibilityObserver uses the IntersectionObserver API to allow conditional child rendering and callbacks based
* on viewport visibility. It will render the `renderOutOfView` prop until it is scrolled into view, then will
* always render the `renderInView` prop instead. Callbacks will always be triggered on visibility changes.
*/
var VisibilityObserver = /** @class */ (function (_super) {
(0, tslib_1.__extends)(VisibilityObserver, _super);
function VisibilityObserver(props) {
var _this = _super.call(this, props) || this;
_this.getObserverChildren = function (isVisible) {
var _a = _this.props, renderInView = _a.renderInView, renderOutOfView = _a.renderOutOfView;
var shouldRenderAsInView = isVisible || _this.state.hasBeenInView;
if (shouldRenderAsInView && renderInView) {
return renderInView();
}
if (!isVisible && renderOutOfView) {
return renderOutOfView();
}
return null;
};
_this.onVisibilityChange = function (isVisible) {
if (isVisible) {
_this.setState({ hasBeenInView: true });
if (_this.props.onEnterView) {
_this.props.onEnterView();
}
}
else {
if (_this.props.onLeaveView) {
_this.props.onLeaveView();
}
}
};
_this.state = {
hasBeenInView: false,
};
return _this;
}
VisibilityObserver.prototype.render = function () {
var _a = this.props, rootMargin = _a.rootMargin, tag = _a.tag;
return (React.createElement(react_intersection_observer_1.default, { as: tag || 'div', rootMargin: rootMargin, onChange: this.onVisibilityChange }, this.getObserverChildren));
};
return VisibilityObserver;
}(React.Component));
exports.default = VisibilityObserver;
//# sourceMappingURL=VisibilityObserver.js.map