office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
205 lines • 10.3 kB
JavaScript
define(["require", "exports", "tslib", "react", "prop-types", "../../Utilities"], function (require, exports, tslib_1, React, PropTypes, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var getClassNames = Utilities_1.classNamesFunction();
var ScrollablePaneBase = /** @class */ (function (_super) {
tslib_1.__extends(ScrollablePaneBase, _super);
function ScrollablePaneBase(props) {
var _this = _super.call(this, props) || this;
_this._subscribers = new Set();
_this._stickyAbove = new Set();
_this._stickyBelow = new Set();
return _this;
}
ScrollablePaneBase.prototype.getChildContext = function () {
return {
scrollablePane: {
subscribe: this.subscribe,
unsubscribe: this.unsubscribe,
addStickyHeader: this.addStickyHeader,
removeStickyHeader: this.removeStickyHeader,
addStickyFooter: this.addStickyFooter,
removeStickyFooter: this.removeStickyFooter,
notifySubscribers: this.notifySubscribers
}
};
};
ScrollablePaneBase.prototype.componentDidMount = function () {
var _this = this;
this._events.on(this.root, 'scroll', this.notifySubscribers);
this._events.on(window, 'resize', this._onWindowResize);
this._async.setTimeout(function () {
_this._resizeContainer();
if (_this.stickyContainer.parentElement && _this.root.parentElement) {
_this.stickyContainer.parentElement.removeChild(_this.stickyContainer);
_this.root.parentElement.insertBefore(_this.stickyContainer, _this.root.nextSibling);
_this.notifySubscribers();
}
}, 500);
};
ScrollablePaneBase.prototype.componentWillUnmount = function () {
this._events.off(this.root);
this._events.off(window);
if (this.stickyContainer.parentElement) {
this.stickyContainer.parentElement.removeChild(this.stickyContainer);
}
};
ScrollablePaneBase.prototype.render = function () {
var _a = this.props, className = _a.className, theme = _a.theme, getStyles = _a.getStyles;
var classNames = getClassNames(getStyles, {
theme: theme,
className: className
});
return (React.createElement("div", { ref: this._resolveRef('root'), className: classNames.root, "data-is-scrollable": true },
React.createElement("div", { ref: this._resolveRef('stickyContainer'), className: classNames.stickyContainer },
React.createElement("div", { ref: this._resolveRef('stickyAbove'), className: classNames.stickyAbove }),
React.createElement("div", { ref: this._resolveRef('stickyBelow'), className: classNames.stickyBelow })),
this.props.children));
};
ScrollablePaneBase.prototype.forceLayoutUpdate = function () {
this._onWindowResize();
};
ScrollablePaneBase.prototype.subscribe = function (handler) {
this._subscribers.add(handler);
};
ScrollablePaneBase.prototype.unsubscribe = function (handler) {
this._subscribers.delete(handler);
};
ScrollablePaneBase.prototype.addStickyHeader = function (sticky) {
var _this = this;
this._addSticky(sticky, this._stickyAbove, this.stickyAbove, function () {
_this.stickyAbove.appendChild(sticky.content);
});
};
ScrollablePaneBase.prototype.addStickyFooter = function (sticky) {
var _this = this;
this._addSticky(sticky, this._stickyBelow, this.stickyBelow, function () {
_this.stickyBelow.insertBefore(sticky.content, _this.stickyBelow.firstChild);
});
};
ScrollablePaneBase.prototype.removeStickyHeader = function (sticky) {
this._removeSticky(sticky, this._stickyAbove, this.stickyAbove);
};
ScrollablePaneBase.prototype.removeStickyFooter = function (sticky) {
this._removeSticky(sticky, this._stickyBelow, this.stickyBelow);
};
ScrollablePaneBase.prototype.notifySubscribers = function (sort) {
var _this = this;
this._subscribers.forEach(function (handle) {
handle(_this.stickyAbove.getBoundingClientRect(), _this.stickyBelow.getBoundingClientRect());
});
if (this._stickyAbove.size > 1) {
this._sortStickies(this._stickyAbove, this.stickyAbove);
}
if (this._stickyBelow.size > 1) {
this._sortStickies(this._stickyBelow, this.stickyBelow);
}
};
ScrollablePaneBase.prototype._addSticky = function (sticky, stickyList, container, addStickyToContainer) {
if (!stickyList.has(sticky)) {
stickyList.add(sticky);
addStickyToContainer();
sticky.content.addEventListener('transitionend', this._setPlaceholderHeights.bind(null, stickyList), false);
if (sticky.props.stickyClassName) {
this._async.setTimeout(function () {
if (sticky.props.stickyClassName) {
sticky.content.children[0].classList.add(sticky.props.stickyClassName);
}
}, 1);
}
this.notifySubscribers();
this._setPlaceholderHeights(stickyList);
}
};
ScrollablePaneBase.prototype._removeSticky = function (sticky, stickyList, container) {
if (stickyList.has(sticky)) {
sticky.content.removeEventListener('transitionend', this._setPlaceholderHeights.bind(null, stickyList, container));
stickyList.delete(sticky);
}
};
ScrollablePaneBase.prototype._onWindowResize = function () {
var _this = this;
this._async.setTimeout(function () {
_this._resizeContainer();
_this.notifySubscribers();
_this._setPlaceholderHeights(_this._stickyAbove);
_this._setPlaceholderHeights(_this._stickyBelow);
}, 5);
};
ScrollablePaneBase.prototype._resizeContainer = function () {
var _a = this, stickyContainer = _a.stickyContainer, root = _a.root;
var _b = getComputedStyle(root), borderTopWidth = _b.borderTopWidth, borderLeftWidth = _b.borderLeftWidth;
stickyContainer.style.height = root.clientHeight + 'px';
stickyContainer.style.width = root.clientWidth + 'px';
if (borderTopWidth) {
stickyContainer.style.top = root.offsetTop + parseInt(borderTopWidth, 10) + 'px';
}
if (borderLeftWidth) {
stickyContainer.style.left = root.offsetLeft + parseInt(borderLeftWidth, 10) + 'px';
}
};
ScrollablePaneBase.prototype._setPlaceholderHeights = function (stickies) {
stickies.forEach(function (sticky, idx) {
sticky.setPlaceholderHeight(sticky.content.clientHeight);
});
};
ScrollablePaneBase.prototype._sortStickies = function (stickyList, container) {
var _this = this;
var stickyArr = Array.from(stickyList);
stickyArr = stickyArr.sort(function (a, b) {
var aOffset = _this._calculateOffsetParent(a.root);
var bOffset = _this._calculateOffsetParent(b.root);
return aOffset - bOffset;
});
while (container.lastChild) {
container.removeChild(container.lastChild);
}
stickyArr.forEach(function (sticky) {
container.appendChild(sticky.content);
});
};
ScrollablePaneBase.prototype._calculateOffsetParent = function (ele) {
var offset = 0;
while (ele.offsetParent !== this.root.offsetParent) {
offset += ele.offsetTop;
if (ele.parentElement) {
ele = ele.parentElement;
}
}
return offset;
};
ScrollablePaneBase.childContextTypes = {
scrollablePane: PropTypes.object
};
tslib_1.__decorate([
Utilities_1.autobind
], ScrollablePaneBase.prototype, "subscribe", null);
tslib_1.__decorate([
Utilities_1.autobind
], ScrollablePaneBase.prototype, "unsubscribe", null);
tslib_1.__decorate([
Utilities_1.autobind
], ScrollablePaneBase.prototype, "addStickyHeader", null);
tslib_1.__decorate([
Utilities_1.autobind
], ScrollablePaneBase.prototype, "addStickyFooter", null);
tslib_1.__decorate([
Utilities_1.autobind
], ScrollablePaneBase.prototype, "removeStickyHeader", null);
tslib_1.__decorate([
Utilities_1.autobind
], ScrollablePaneBase.prototype, "removeStickyFooter", null);
tslib_1.__decorate([
Utilities_1.autobind
], ScrollablePaneBase.prototype, "notifySubscribers", null);
tslib_1.__decorate([
Utilities_1.autobind
], ScrollablePaneBase.prototype, "_setPlaceholderHeights", null);
ScrollablePaneBase = tslib_1.__decorate([
Utilities_1.customizable('ScrollablePane', ['theme'])
], ScrollablePaneBase);
return ScrollablePaneBase;
}(Utilities_1.BaseComponent));
exports.ScrollablePaneBase = ScrollablePaneBase;
});
//# sourceMappingURL=ScrollablePane.base.js.map