@cantonjs/react-scroll-view/es/Observer.js

react scroll component using intersection observer API

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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"); } }

import Map from './MapPolyfill';
import warning from 'warning';
import Intersection from './Intersection';

if (!IntersectionObserver) {
	throw new Error(['react-scroll-view requires `IntersectionObserver`.', 'You may add this polyfill to fix the issue.', '`https://github.com/w3c/IntersectionObserver/tree/master/polyfill`'].join(' '));
}

var createBox = function createBox(observer, intersection) {
	return {
		observer: observer,
		intersection: intersection
	};
};

var Observer = function () {
	function Observer() {
		_classCallCheck(this, Observer);

		this._boxes = new Map();
		this._prevScrollPos = 0;
		this._currScrollPos = 0;
	}

	_createClass(Observer, [{
		key: 'mount',
		value: function mount(root) {
			this.root = root;
		}
	}, {
		key: 'observe',
		value: function observe(target, intersection, options) {
			var _this = this;

			if (!this.root) {
				return warning(false, 'Should call observer.mount(root) before calling observer.observe()');
			}

			if (intersection instanceof Intersection && !this._boxes.has(target)) {
				var callback = function callback(entries) {
					return entries.forEach(function (entry) {
						var target = entry.target;

						if (_this._boxes.has(target)) {
							var _boxes$get = _this._boxes.get(target),
							    _intersection = _boxes$get.intersection;

							_intersection.onIntersect({ entry: entry });
						}
					});
				};
				var observer = new IntersectionObserver(callback, _extends({
					root: this.root
				}, options));
				var box = createBox(observer, intersection);
				this._boxes.set(target, box);
				observer.observe(target);
			}
		}
	}, {
		key: 'unobserve',
		value: function unobserve(target) {
			var box = this._boxes.get(target);
			if (box) {
				var observer = box.observer;

				observer.unobserve(target);
				observer.disconnect();
				this._boxes.delete(target);
			}
		}
	}]);

	return Observer;
}();

export default Observer;