@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
115 lines • 4.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var PropTypes = require("prop-types");
var Utilities_1 = require("office-ui-fabric-react/lib-commonjs/Utilities");
var ScrollContainerStyles = require("./ScrollContainer.scss");
exports.ScrollContainerContextTypes = {
scrollContainer: PropTypes.object.isRequired,
};
var ScrollContainer = /** @class */ (function (_super) {
tslib_1.__extends(ScrollContainer, _super);
function ScrollContainer(props) {
var _this = _super.call(this, props) || 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];
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);
}
};
_this._async = new Utilities_1.Async(_this);
Utilities_1.initializeComponentRef(_this);
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();
}
this._async.dispose();
};
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,
});
}
};
ScrollContainer.childContextTypes = exports.ScrollContainerContextTypes;
return ScrollContainer;
}(React.Component));
exports.ScrollContainer = ScrollContainer;
//# sourceMappingURL=ScrollContainer.js.map