office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
82 lines • 4.17 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 ResponsiveMode;
(function (ResponsiveMode) {
ResponsiveMode[ResponsiveMode["small"] = 0] = "small";
ResponsiveMode[ResponsiveMode["medium"] = 1] = "medium";
ResponsiveMode[ResponsiveMode["large"] = 2] = "large";
ResponsiveMode[ResponsiveMode["xLarge"] = 3] = "xLarge";
ResponsiveMode[ResponsiveMode["xxLarge"] = 4] = "xxLarge";
ResponsiveMode[ResponsiveMode["xxxLarge"] = 5] = "xxxLarge";
})(ResponsiveMode = exports.ResponsiveMode || (exports.ResponsiveMode = {}));
var RESPONSIVE_MAX_CONSTRAINT = [479, 639, 1023, 1365, 1919, 99999999];
var _defaultMode;
/**
* Allows a server rendered scenario to provide a default responsive mode.
*/
function setResponsiveMode(responsiveMode) {
_defaultMode = responsiveMode;
}
exports.setResponsiveMode = setResponsiveMode;
function withResponsiveMode(ComposedComponent) {
var resultClass = /** @class */ (function (_super) {
tslib_1.__extends(WithResponsiveMode, _super);
function WithResponsiveMode(props) {
var _this = _super.call(this, props) || this;
_this._updateComposedComponentRef = _this._updateComposedComponentRef.bind(_this);
_this.state = {
responsiveMode: _this._getResponsiveMode()
};
return _this;
}
WithResponsiveMode.prototype.componentDidMount = function () {
var _this = this;
this._events.on(window, 'resize', function () {
var responsiveMode = _this._getResponsiveMode();
if (responsiveMode !== _this.state.responsiveMode) {
_this.setState({
responsiveMode: responsiveMode
});
}
});
};
WithResponsiveMode.prototype.componentWillUnmount = function () {
this._events.dispose();
};
WithResponsiveMode.prototype.render = function () {
var responsiveMode = this.state.responsiveMode;
return (React.createElement(ComposedComponent, tslib_1.__assign({ ref: this._updateComposedComponentRef, responsiveMode: responsiveMode }, this.props)));
};
WithResponsiveMode.prototype._getResponsiveMode = function () {
var responsiveMode = ResponsiveMode.small;
var win = Utilities_1.getWindow();
if (typeof win !== 'undefined') {
try {
while (win.innerWidth > RESPONSIVE_MAX_CONSTRAINT[responsiveMode]) {
responsiveMode++;
}
}
catch (e) {
// Return a best effort result in cases where we're in the browser but it throws on getting innerWidth.
responsiveMode = ResponsiveMode.large;
}
}
else {
if (_defaultMode !== undefined) {
responsiveMode = _defaultMode;
}
else {
throw new Error('Content was rendered in a server environment without providing a default responsive mode. ' +
'Call setResponsiveMode to define what the responsive mode is.');
}
}
return responsiveMode;
};
return WithResponsiveMode;
}(BaseDecorator_1.BaseDecorator));
return Utilities_1.hoistStatics(ComposedComponent, resultClass);
}
exports.withResponsiveMode = withResponsiveMode;
});
//# sourceMappingURL=withResponsiveMode.js.map