/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
// @noflow
// Intentional; Flow can't handle the bind on L20
var React = require('react');
var ReactDOM = require('react-dom');
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = function (ComposedComponent) {
var WidthProvider = (function (_super) {
__extends(WidthProvider, _super);
function WidthProvider(props) {
_super.call(this, props);
this.state = {
mounted: false,
width: 1280
};
}
WidthProvider.prototype.componentDidMount = function () {
this.setState({ mounted: true });
window.addEventListener('resize', this.onWindowResize.bind(this));
// Call to properly set the breakpoint and resize the elements.
// Note that if you're doing a full-width element, this can get a little wonky if a scrollbar
// appears because of the grid. In that case, fire your own resize event, or set `overflow: scroll` on your body.
this.onWindowResize();
};
WidthProvider.prototype.componentWillUnmount = function () {
window.removeEventListener('resize', this.onWindowResize);
};
WidthProvider.prototype.onWindowResize = function (_event, cb) {
var node = ReactDOM.findDOMNode(this);
var padLeft = window.getComputedStyle(node, null).getPropertyValue('padding-left') || 0;
padLeft = parseInt(padLeft) || 0;
var padRight = window.getComputedStyle(node, null).getPropertyValue('padding-right') || 0;
padRight = parseInt(padRight) || 0;
this.setState({ width: node.offsetWidth - padLeft - padRight }, cb);
};
WidthProvider.prototype.render = function () {
Iif (this.props.measureBeforeMount && !this.state.mounted)
return React.createElement("div", __assign({}, this.props, this.state));
return React.createElement(ComposedComponent, __assign({}, this.props, this.state));
};
return WidthProvider;
}(React.Component));
WidthProvider.defaultProps = {
measureBeforeMount: false
};
WidthProvider.propTypes = {
// If true, will not render children until mounted. Useful for getting the exact width before
// rendering, to prevent any unsightly resizing.
measureBeforeMount: React.PropTypes.bool
};
return WidthProvider;
};
|