@cantonjs/react-scroll-view
Version:
react scroll component using intersection observer API
99 lines (76 loc) • 3.32 kB
JavaScript
Object.defineProperty(exports, "__esModule", {
value: true
});
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; }; }();
var _MapPolyfill = require('./MapPolyfill');
var _MapPolyfill2 = _interopRequireDefault(_MapPolyfill);
var _warning = require('warning');
var _warning2 = _interopRequireDefault(_warning);
var _Intersection = require('./Intersection');
var _Intersection2 = _interopRequireDefault(_Intersection);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
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 _MapPolyfill2.default();
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 (0, _warning2.default)(false, 'Should call observer.mount(root) before calling observer.observe()');
}
if (intersection instanceof _Intersection2.default && !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;
}();
exports.default = Observer;
;