office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
171 lines • 8.91 kB
JavaScript
define(["require", "exports", "tslib", "react", "prop-types", "../../Utilities", "./ScrollablePane.scss"], function (require, exports, tslib_1, React, PropTypes, Utilities_1, stylesImport) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var styles = stylesImport;
var ScrollablePane = (function (_super) {
tslib_1.__extends(ScrollablePane, _super);
function ScrollablePane(props) {
var _this = _super.call(this, props) || this;
_this._subscribers = [];
_this._stickyAbove = [];
_this._stickyBelow = [];
return _this;
}
ScrollablePane.prototype.getChildContext = function () {
return {
scrollablePane: {
subscribe: this.subscribe,
addStickyHeader: this.addStickyHeader,
removeStickyHeader: this.removeStickyHeader,
addStickyFooter: this.addStickyFooter,
removeStickyFooter: this.removeStickyFooter,
}
};
};
ScrollablePane.prototype.componentDidMount = function () {
var _this = this;
var _a = this.refs, root = _a.root, stickyContainer = _a.stickyContainer, stickyAbove = _a.stickyAbove, stickyBelow = _a.stickyBelow;
this._events.on(root, 'scroll', this._notifySubscribers);
this._events.on(window, 'resize', this._onWindowResize);
setTimeout(function () {
_this._resizeContainer();
if (stickyContainer.parentElement && root.parentElement) {
stickyContainer.parentElement.removeChild(stickyContainer);
root.parentElement.insertBefore(stickyContainer, root.nextSibling);
_this._notifySubscribers();
if (_this._stickyAbove.length > 1) {
_this._sortStickies(_this._stickyAbove, stickyAbove);
}
if (_this._stickyBelow.length > 1) {
_this._sortStickies(_this._stickyBelow, stickyBelow);
}
}
}, 500);
};
ScrollablePane.prototype.componentWillUnmount = function () {
this._events.off(this.refs.root);
this._events.off(window);
};
ScrollablePane.prototype.render = function () {
var className = this.props.className;
return (React.createElement("div", { ref: 'root', className: Utilities_1.css('ms-ScrollablePane', styles.root, className), "data-is-scrollable": true },
React.createElement("div", { ref: 'stickyContainer', className: styles.stickyContainer },
React.createElement("div", { ref: 'stickyAbove', className: styles.stickyAbove }),
React.createElement("div", { ref: 'stickyBelow', className: styles.stickyBelow })),
this.props.children));
};
ScrollablePane.prototype.subscribe = function (handler) {
this._subscribers = this._subscribers.concat(handler);
};
ScrollablePane.prototype.addStickyHeader = function (sticky) {
var stickyAbove = this.refs.stickyAbove;
this._addSticky(sticky, this._stickyAbove, stickyAbove, function () {
stickyAbove.appendChild(sticky.content);
});
};
ScrollablePane.prototype.addStickyFooter = function (sticky) {
var stickyBelow = this.refs.stickyBelow;
this._addSticky(sticky, this._stickyBelow, stickyBelow, function () {
stickyBelow.insertBefore(sticky.content, stickyBelow.firstChild);
});
};
ScrollablePane.prototype.removeStickyHeader = function (sticky) {
this._removeSticky(sticky, this._stickyAbove, this.refs.stickyAbove);
};
ScrollablePane.prototype.removeStickyFooter = function (sticky) {
this._removeSticky(sticky, this._stickyBelow, this.refs.stickyBelow);
};
ScrollablePane.prototype._addSticky = function (sticky, stickyList, container, addStickyToContainer) {
if (stickyList.indexOf(sticky) < 0) {
stickyList.push(sticky);
addStickyToContainer();
sticky.content.addEventListener('transitionend', this._setPlaceholderHeights.bind(null, stickyList, container), false);
if (sticky.props.stickyClassName) {
setTimeout(function () {
if (sticky.props.stickyClassName) {
sticky.content.children[0].classList.add(sticky.props.stickyClassName);
}
}, 1);
}
this._notifySubscribers();
this._setPlaceholderHeights(stickyList, container);
}
};
ScrollablePane.prototype._removeSticky = function (sticky, stickyList, container) {
var indexOfSticky = stickyList.indexOf(sticky);
if (indexOfSticky >= 0) {
sticky.content.removeEventListener('transitionend', this._setPlaceholderHeights.bind(null, stickyList, container));
stickyList.splice(indexOfSticky, 1);
}
};
ScrollablePane.prototype._onWindowResize = function () {
var _this = this;
var _a = this.refs, stickyAbove = _a.stickyAbove, stickyBelow = _a.stickyBelow;
setTimeout(function () {
_this._resizeContainer();
_this._notifySubscribers();
_this._setPlaceholderHeights(_this._stickyAbove, stickyAbove);
_this._setPlaceholderHeights(_this._stickyBelow, stickyBelow);
}, 5);
};
ScrollablePane.prototype._resizeContainer = function () {
var _a = this.refs, 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';
}
};
ScrollablePane.prototype._setPlaceholderHeights = function (stickies, element) {
var _a = this.refs, stickyAbove = _a.stickyAbove, stickyBelow = _a.stickyBelow;
stickies.forEach(function (sticky, idx) {
sticky.setPlaceholderHeight(element.children[idx].clientHeight);
});
};
ScrollablePane.prototype._sortStickies = function (stickyList, container) {
stickyList.sort(function (a, b) {
return a.refs.root.offsetTop - b.refs.root.offsetTop;
});
while (container.lastChild) {
this.refs.stickyBelow.removeChild(container.lastChild);
}
stickyList.forEach(function (sticky) {
container.appendChild(sticky.content);
});
};
ScrollablePane.prototype._notifySubscribers = function () {
var _a = this.refs, stickyAbove = _a.stickyAbove, stickyBelow = _a.stickyBelow;
this._subscribers.forEach(function (handle) {
handle(stickyAbove.getBoundingClientRect(), stickyBelow.getBoundingClientRect());
});
};
ScrollablePane.childContextTypes = {
scrollablePane: PropTypes.object
};
tslib_1.__decorate([
Utilities_1.autobind
], ScrollablePane.prototype, "subscribe", null);
tslib_1.__decorate([
Utilities_1.autobind
], ScrollablePane.prototype, "addStickyHeader", null);
tslib_1.__decorate([
Utilities_1.autobind
], ScrollablePane.prototype, "addStickyFooter", null);
tslib_1.__decorate([
Utilities_1.autobind
], ScrollablePane.prototype, "removeStickyHeader", null);
tslib_1.__decorate([
Utilities_1.autobind
], ScrollablePane.prototype, "removeStickyFooter", null);
tslib_1.__decorate([
Utilities_1.autobind
], ScrollablePane.prototype, "_setPlaceholderHeights", null);
return ScrollablePane;
}(Utilities_1.BaseComponent));
exports.ScrollablePane = ScrollablePane;
});
//# sourceMappingURL=ScrollablePane.js.map