@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
111 lines • 5.32 kB
JavaScript
define(["require", "exports", "tslib", "react", "prop-types", "office-ui-fabric-react/lib/Utilities", "./ScrollContainer.scss"], function (require, exports, tslib_1, React, PropTypes, Utilities_1, ScrollContainerStyles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ScrollContainerContextTypes = {
scrollContainer: PropTypes.object.isRequired
};
var ScrollContainer = /** @class */ (function (_super) {
tslib_1.__extends(ScrollContainer, _super);
function ScrollContainer() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._callbacks = [];
_this._pendingElements = [];
_this._resolveRoot = function (element) {
if (element) {
_this._root = element;
_this._init();
}
};
_this._onIntersection = function (entries, observer) {
for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
var entry = entries_1[_i];
// tslint:disable-next-line:no-any
if (entry.isIntersecting || entry.intersectionRatio > 0) {
// Schedule callbacks on next frame
_this._async.requestAnimationFrame(function () {
var scrollTop = _this._root.scrollTop;
for (var _i = 0, _a = _this._callbacks; _i < _a.length; _i++) {
var callback = _a[_i];
callback(scrollTop);
}
});
// Only need to call callbacks for on entry
return;
}
}
};
_this._onScroll = function () {
var scrollTop = _this._root.scrollTop;
for (var _i = 0, _a = _this._callbacks; _i < _a.length; _i++) {
var callback = _a[_i];
callback(scrollTop);
}
};
return _this;
}
ScrollContainer.prototype.getChildContext = function () {
return {
scrollContainer: this
};
};
ScrollContainer.prototype.observe = function (element) {
if (this._observer) {
this._observer.observe(element);
}
else {
this._pendingElements.push(element);
}
};
ScrollContainer.prototype.unobserve = function (element) {
if (this._observer) {
this._observer.unobserve(element);
}
};
ScrollContainer.prototype.registerVisibleCallback = function (callback) {
this._callbacks.push(callback);
};
ScrollContainer.prototype.render = function () {
var _a = this.props, children = _a.children, className = _a.className;
return (React.createElement("div", { className: Utilities_1.css('ms-ScrollContainer', ScrollContainerStyles.root, className), "data-is-scrollable": true, ref: this._resolveRoot }, children));
};
ScrollContainer.prototype.componentWillUnmount = function () {
if (this._observer) {
this._observer.disconnect();
}
};
ScrollContainer.prototype._init = function () {
if (typeof IntersectionObserver !== 'undefined') {
var threshold = [];
for (var i = 0; i < 100; ++i) {
threshold.push(i / 100.0);
}
this._observer = new IntersectionObserver(this._onIntersection, {
root: this._root,
threshold: threshold
});
// If there were attempts to observe elements before the observer was ready, add them now
if (this._pendingElements.length > 0) {
for (var _i = 0, _a = this._pendingElements; _i < _a.length; _i++) {
var pendingElement = _a[_i];
this._observer.observe(pendingElement);
}
this._pendingElements = [];
}
}
else {
var scrollDebounceDelay = this.props.scrollDebounceDelay;
this._onScroll = this._async.debounce(this._onScroll, scrollDebounceDelay);
// No intersection observer, rely on scroll event. Note: not all browsers support options, but since
// we don't need capture, we can pass it and have it ignored if not supported
this._root.addEventListener('scroll', this._onScroll, {
passive: true
// tslint:disable-next-line:no-any
});
}
};
ScrollContainer.childContextTypes = exports.ScrollContainerContextTypes;
return ScrollContainer;
}(Utilities_1.BaseComponent));
exports.ScrollContainer = ScrollContainer;
});
//# sourceMappingURL=ScrollContainer.js.map