office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
76 lines (74 loc) • 3.82 kB
JavaScript
define(["require", "exports", "tslib", "react", "./BaseDecorator", "../../Utilities"], function (require, exports, tslib_1, React, BaseDecorator_1, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var RESIZE_DELAY = 500;
var MAX_RESIZE_ATTEMPTS = 3;
function withViewport(ComposedComponent) {
return (function (_super) {
tslib_1.__extends(WithViewportComponent, _super);
function WithViewportComponent() {
var _this = _super.call(this) || this;
/* Note: using lambda here because decorators don't seem to work in decorators. */
_this._updateViewport = function (withForceUpdate) {
var viewport = _this.state.viewport;
var viewportElement = _this.refs.root;
var scrollElement = Utilities_1.findScrollableParent(viewportElement);
var scrollRect = Utilities_1.getRect(scrollElement);
var clientRect = Utilities_1.getRect(viewportElement);
var updateComponent = function () {
if (withForceUpdate && _this._composedComponentInstance) {
_this._composedComponentInstance.forceUpdate();
}
};
var isSizeChanged = (clientRect.width !== viewport.width ||
scrollRect.height !== viewport.height);
if (isSizeChanged && _this._resizeAttempts < MAX_RESIZE_ATTEMPTS) {
_this._resizeAttempts++;
_this.setState({
viewport: {
width: clientRect.width,
height: scrollRect.height
}
}, function () { _this._updateViewport(withForceUpdate); });
}
else {
_this._resizeAttempts = 0;
updateComponent();
}
};
_this._resizeAttempts = 0;
_this.state = {
viewport: {
width: 0,
height: 0
}
};
return _this;
}
WithViewportComponent.prototype.componentDidMount = function () {
this._onAsyncResize = this._async.debounce(this._onAsyncResize, RESIZE_DELAY, {
leading: false
});
this._events.on(window, 'resize', this._onAsyncResize);
this._updateViewport();
};
WithViewportComponent.prototype.componentWillUnmount = function () {
this._events.dispose();
};
WithViewportComponent.prototype.render = function () {
var viewport = this.state.viewport;
var isViewportVisible = viewport.width > 0 && viewport.height > 0;
return (React.createElement("div", { className: 'ms-Viewport', ref: 'root', style: { minWidth: 1, minHeight: 1 } }, isViewportVisible && (React.createElement(ComposedComponent, tslib_1.__assign({ ref: this._updateComposedComponentRef, viewport: viewport }, this.props)))));
};
WithViewportComponent.prototype.forceUpdate = function () {
this._updateViewport(true);
};
WithViewportComponent.prototype._onAsyncResize = function () {
this._updateViewport();
};
return WithViewportComponent;
}(BaseDecorator_1.BaseDecorator));
}
exports.withViewport = withViewport;
});
//# sourceMappingURL=withViewport.js.map