@material-ui/core
Version:
React components that implement Google's Material Design.
228 lines (177 loc) • 8.24 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/builtin/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.isWidthDown = exports.isWidthUp = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/builtin/extends"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/builtin/objectSpread"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/builtin/objectWithoutProperties"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/builtin/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/builtin/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/builtin/possibleConstructorReturn"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/builtin/inherits"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactEventListener = _interopRequireDefault(require("react-event-listener"));
var _debounce = _interopRequireDefault(require("debounce"));
var _wrapDisplayName = _interopRequireDefault(require("recompose/wrapDisplayName"));
var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
var _withTheme = _interopRequireDefault(require("../styles/withTheme"));
var _createBreakpoints = require("../styles/createBreakpoints");
var _getThemeProps = _interopRequireDefault(require("../styles/getThemeProps"));
/* eslint-disable react/no-did-mount-set-state */
// By default, returns true if screen width is the same or greater than the given breakpoint.
var isWidthUp = function isWidthUp(breakpoint, width) {
var inclusive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
if (inclusive) {
return _createBreakpoints.keys.indexOf(breakpoint) <= _createBreakpoints.keys.indexOf(width);
}
return _createBreakpoints.keys.indexOf(breakpoint) < _createBreakpoints.keys.indexOf(width);
}; // By default, returns true if screen width is the same or less than the given breakpoint.
exports.isWidthUp = isWidthUp;
var isWidthDown = function isWidthDown(breakpoint, width) {
var inclusive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
if (inclusive) {
return _createBreakpoints.keys.indexOf(width) <= _createBreakpoints.keys.indexOf(breakpoint);
}
return _createBreakpoints.keys.indexOf(width) < _createBreakpoints.keys.indexOf(breakpoint);
};
exports.isWidthDown = isWidthDown;
var withWidth = function withWidth() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
return function (Component) {
var _options$withTheme = options.withTheme,
withThemeOption = _options$withTheme === void 0 ? false : _options$withTheme,
_options$noSSR = options.noSSR,
noSSR = _options$noSSR === void 0 ? false : _options$noSSR,
initialWidthOption = options.initialWidth,
_options$resizeInterv = options.resizeInterval,
resizeInterval = _options$resizeInterv === void 0 ? 166 : _options$resizeInterv;
var WithWidth =
/*#__PURE__*/
function (_React$Component) {
(0, _inherits2.default)(WithWidth, _React$Component);
function WithWidth(props) {
var _this;
(0, _classCallCheck2.default)(this, WithWidth);
_this = (0, _possibleConstructorReturn2.default)(this, (WithWidth.__proto__ || Object.getPrototypeOf(WithWidth)).call(this, props));
_this.state = {
width: undefined
};
_this.handleResize = (0, _debounce.default)(function () {
var width = _this.getWidth();
if (width !== _this.state.width) {
_this.setState({
width: width
});
}
}, resizeInterval);
if (noSSR) {
_this.state.width = _this.getWidth();
}
return _this;
}
(0, _createClass2.default)(WithWidth, [{
key: "componentDidMount",
value: function componentDidMount() {
var width = this.getWidth();
if (width !== this.state.width) {
this.setState({
width: width
});
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.handleResize.clear();
}
}, {
key: "getWidth",
value: function getWidth() {
var innerWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.innerWidth;
var breakpoints = this.props.theme.breakpoints;
var width = null;
/**
* Start with the slowest value as low end devices often have a small screen.
*
* innerWidth |xs sm md lg xl
* |-------|-------|-------|-------|------>
* width | xs | sm | md | lg | xl
*/
var index = 1;
while (width === null && index < _createBreakpoints.keys.length) {
var currentWidth = _createBreakpoints.keys[index]; // @media are inclusive, so reproduce the behavior here.
if (innerWidth < breakpoints.values[currentWidth]) {
width = _createBreakpoints.keys[index - 1];
break;
}
index += 1;
}
width = width || 'xl';
return width;
}
}, {
key: "render",
value: function render() {
var _props = this.props,
initialWidth = _props.initialWidth,
theme = _props.theme,
width = _props.width,
other = (0, _objectWithoutProperties2.default)(_props, ["initialWidth", "theme", "width"]);
var props = (0, _objectSpread2.default)({
width: width || this.state.width || initialWidth || initialWidthOption || (0, _getThemeProps.default)({
theme: theme,
name: 'MuiWithWidth'
}).initialWidth
}, other);
var more = {};
if (withThemeOption) {
more.theme = theme;
} // When rendering the component on the server,
// we have no idea about the client browser screen width.
// In order to prevent blinks and help the reconciliation of the React tree
// we are not rendering the child component.
//
// An alternative is to use the `initialWidth` property.
if (props.width === undefined) {
return null;
}
return _react.default.createElement(_reactEventListener.default, {
target: "window",
onResize: this.handleResize
}, _react.default.createElement(Component, (0, _extends2.default)({}, more, props)));
}
}]);
return WithWidth;
}(_react.default.Component);
WithWidth.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* As `window.innerWidth` is unavailable on the server,
* we default to rendering an empty component during the first mount.
* In some situation, you might want to use an heuristic to approximate
* the screen width of the client browser screen width.
*
* For instance, you could be using the user-agent or the client-hints.
* http://caniuse.com/#search=client%20hint
*/
initialWidth: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
/**
* @ignore
*/
theme: _propTypes.default.object.isRequired,
/**
* Bypass the width calculation logic.
*/
width: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl'])
} : {};
if (process.env.NODE_ENV !== 'production') {
WithWidth.displayName = (0, _wrapDisplayName.default)(Component, 'WithWidth');
}
(0, _hoistNonReactStatics.default)(WithWidth, Component);
return (0, _withTheme.default)()(WithWidth);
};
};
var _default = withWidth;
exports.default = _default;