react-responsive
Advanced tools
Comparing version 5.0.0 to 6.0.0
## Change Log | ||
### v6.0.0 | ||
- Require React v16 or higher | ||
- Update and simplify all lifecycle functions | ||
- Remove all support for wrapper elements | ||
- Previously, when either `component` or non-mediaquery props were provided, we would render a wrapper element. This behavior no longer exists. | ||
- The rendering logic is now a basic ternary - `matches ? props.children : null` | ||
- Thanks to @whatknight for doing the work here. | ||
### v5.0.0 | ||
@@ -4,0 +13,0 @@ - New changelog system, all manual now since the automated system was overcomplicated and missed things. |
@@ -48,22 +48,28 @@ !function(root, factory) { | ||
module.exports = hyphenateStyleName; | ||
}, function(module, exports, __webpack_require__) { | ||
}, function(module, __webpack_exports__, __webpack_require__) { | ||
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: !0 | ||
}); | ||
var _extends = Object.assign || function(target) { | ||
function _objectSpread(target) { | ||
for (var i = 1; i < arguments.length; i++) { | ||
var source = arguments[i]; | ||
for (var key in source) Object.prototype.hasOwnProperty.call(source, key) && (target[key] = source[key]); | ||
var source = null != arguments[i] ? arguments[i] : {}, ownKeys = Object.keys(source); | ||
"function" == typeof Object.getOwnPropertySymbols && (ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) { | ||
return Object.getOwnPropertyDescriptor(source, sym).enumerable; | ||
}))), ownKeys.forEach(function(key) { | ||
_defineProperty(target, key, source[key]); | ||
}); | ||
} | ||
return target; | ||
}, _propTypes = __webpack_require__(0), _propTypes2 = function(obj) { | ||
return obj && obj.__esModule ? obj : { | ||
default: obj | ||
}; | ||
}(_propTypes), stringOrNumber = _propTypes2.default.oneOfType([ _propTypes2.default.string, _propTypes2.default.number ]), matchers = { | ||
orientation: _propTypes2.default.oneOf([ "portrait", "landscape" ]), | ||
scan: _propTypes2.default.oneOf([ "progressive", "interlace" ]), | ||
aspectRatio: _propTypes2.default.string, | ||
deviceAspectRatio: _propTypes2.default.string, | ||
} | ||
function _defineProperty(obj, key, value) { | ||
return key in obj ? Object.defineProperty(obj, key, { | ||
value: value, | ||
enumerable: !0, | ||
configurable: !0, | ||
writable: !0 | ||
}) : obj[key] = value, obj; | ||
} | ||
var __WEBPACK_IMPORTED_MODULE_0_prop_types__ = __webpack_require__(0), __WEBPACK_IMPORTED_MODULE_0_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_prop_types__), stringOrNumber = __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.oneOfType([ __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string, __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number ]), matchers = { | ||
orientation: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.oneOf([ "portrait", "landscape" ]), | ||
scan: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.oneOf([ "progressive", "interlace" ]), | ||
aspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string, | ||
deviceAspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string, | ||
height: stringOrNumber, | ||
@@ -73,11 +79,11 @@ deviceHeight: stringOrNumber, | ||
deviceWidth: stringOrNumber, | ||
color: _propTypes2.default.bool, | ||
colorIndex: _propTypes2.default.bool, | ||
monochrome: _propTypes2.default.bool, | ||
color: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool, | ||
colorIndex: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool, | ||
monochrome: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool, | ||
resolution: stringOrNumber | ||
}, features = _extends({ | ||
minAspectRatio: _propTypes2.default.string, | ||
maxAspectRatio: _propTypes2.default.string, | ||
minDeviceAspectRatio: _propTypes2.default.string, | ||
maxDeviceAspectRatio: _propTypes2.default.string, | ||
}, features = _objectSpread({ | ||
minAspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string, | ||
maxAspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string, | ||
minDeviceAspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string, | ||
maxDeviceAspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string, | ||
minHeight: stringOrNumber, | ||
@@ -91,24 +97,24 @@ maxHeight: stringOrNumber, | ||
maxDeviceWidth: stringOrNumber, | ||
minColor: _propTypes2.default.number, | ||
maxColor: _propTypes2.default.number, | ||
minColorIndex: _propTypes2.default.number, | ||
maxColorIndex: _propTypes2.default.number, | ||
minMonochrome: _propTypes2.default.number, | ||
maxMonochrome: _propTypes2.default.number, | ||
minColor: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number, | ||
maxColor: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number, | ||
minColorIndex: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number, | ||
maxColorIndex: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number, | ||
minMonochrome: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number, | ||
maxMonochrome: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number, | ||
minResolution: stringOrNumber, | ||
maxResolution: stringOrNumber | ||
}, matchers), types = { | ||
all: _propTypes2.default.bool, | ||
grid: _propTypes2.default.bool, | ||
aural: _propTypes2.default.bool, | ||
braille: _propTypes2.default.bool, | ||
handheld: _propTypes2.default.bool, | ||
print: _propTypes2.default.bool, | ||
projection: _propTypes2.default.bool, | ||
screen: _propTypes2.default.bool, | ||
tty: _propTypes2.default.bool, | ||
tv: _propTypes2.default.bool, | ||
embossed: _propTypes2.default.bool | ||
}, all = _extends({}, types, features); | ||
matchers.type = Object.keys(types), exports.default = { | ||
all: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool, | ||
grid: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool, | ||
aural: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool, | ||
braille: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool, | ||
handheld: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool, | ||
print: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool, | ||
projection: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool, | ||
screen: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool, | ||
tty: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool, | ||
tv: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool, | ||
embossed: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool | ||
}, all = _objectSpread({}, types, features); | ||
matchers.type = Object.keys(types), __webpack_exports__.a = { | ||
all: all, | ||
@@ -118,9 +124,11 @@ types: types, | ||
features: features | ||
}, module.exports = exports.default; | ||
}, function(module, exports, __webpack_require__) { | ||
}; | ||
}, function(module, __webpack_exports__, __webpack_require__) { | ||
"use strict"; | ||
function _interopRequireDefault(obj) { | ||
return obj && obj.__esModule ? obj : { | ||
default: obj | ||
}; | ||
function _typeof(obj) { | ||
return (_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(obj) { | ||
return typeof obj; | ||
} : function(obj) { | ||
return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; | ||
})(obj); | ||
} | ||
@@ -130,97 +138,117 @@ function _classCallCheck(instance, Constructor) { | ||
} | ||
function _defineProperties(target, props) { | ||
for (var i = 0; i < props.length; i++) { | ||
var descriptor = props[i]; | ||
descriptor.enumerable = descriptor.enumerable || !1, descriptor.configurable = !0, | ||
"value" in descriptor && (descriptor.writable = !0), Object.defineProperty(target, descriptor.key, descriptor); | ||
} | ||
} | ||
function _createClass(Constructor, protoProps, staticProps) { | ||
return protoProps && _defineProperties(Constructor.prototype, protoProps), staticProps && _defineProperties(Constructor, staticProps), | ||
Constructor; | ||
} | ||
function _possibleConstructorReturn(self, call) { | ||
if (!self) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); | ||
return !call || "object" != typeof call && "function" != typeof call ? self : call; | ||
return !call || "object" !== _typeof(call) && "function" != typeof call ? _assertThisInitialized(self) : call; | ||
} | ||
function _getPrototypeOf(o) { | ||
return (_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function(o) { | ||
return o.__proto__ || Object.getPrototypeOf(o); | ||
})(o); | ||
} | ||
function _inherits(subClass, superClass) { | ||
if ("function" != typeof superClass && null !== superClass) throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); | ||
if ("function" != typeof superClass && null !== superClass) throw new TypeError("Super expression must either be null or a function"); | ||
subClass.prototype = Object.create(superClass && superClass.prototype, { | ||
constructor: { | ||
value: subClass, | ||
enumerable: !1, | ||
writable: !0, | ||
configurable: !0 | ||
} | ||
}), superClass && (Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass); | ||
}), superClass && _setPrototypeOf(subClass, superClass); | ||
} | ||
function omit(object, keys) { | ||
var newObject = _extends({}, object); | ||
return keys.forEach(function(key) { | ||
return delete newObject[key]; | ||
}), newObject; | ||
function _setPrototypeOf(o, p) { | ||
return (_setPrototypeOf = Object.setPrototypeOf || function(o, p) { | ||
return o.__proto__ = p, o; | ||
})(o, p); | ||
} | ||
Object.defineProperty(exports, "__esModule", { | ||
value: !0 | ||
}), exports.toQuery = exports.default = void 0; | ||
var _createClass = function() { | ||
function defineProperties(target, props) { | ||
for (var i = 0; i < props.length; i++) { | ||
var descriptor = props[i]; | ||
descriptor.enumerable = descriptor.enumerable || !1, descriptor.configurable = !0, | ||
"value" in descriptor && (descriptor.writable = !0), Object.defineProperty(target, descriptor.key, descriptor); | ||
} | ||
} | ||
return function(Constructor, protoProps, staticProps) { | ||
return protoProps && defineProperties(Constructor.prototype, protoProps), staticProps && defineProperties(Constructor, staticProps), | ||
Constructor; | ||
}; | ||
}(), _extends = Object.assign || function(target) { | ||
function _assertThisInitialized(self) { | ||
if (void 0 === self) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); | ||
return self; | ||
} | ||
function _objectSpread(target) { | ||
for (var i = 1; i < arguments.length; i++) { | ||
var source = arguments[i]; | ||
for (var key in source) Object.prototype.hasOwnProperty.call(source, key) && (target[key] = source[key]); | ||
var source = null != arguments[i] ? arguments[i] : {}, ownKeys = Object.keys(source); | ||
"function" == typeof Object.getOwnPropertySymbols && (ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) { | ||
return Object.getOwnPropertyDescriptor(source, sym).enumerable; | ||
}))), ownKeys.forEach(function(key) { | ||
_defineProperty(target, key, source[key]); | ||
}); | ||
} | ||
return target; | ||
}, _react = __webpack_require__(5), _react2 = _interopRequireDefault(_react), _propTypes = __webpack_require__(0), _propTypes2 = _interopRequireDefault(_propTypes), _matchmediaquery = __webpack_require__(9), _matchmediaquery2 = _interopRequireDefault(_matchmediaquery), _hyphenateStyleName = __webpack_require__(2), _hyphenateStyleName2 = _interopRequireDefault(_hyphenateStyleName), _mediaQuery = __webpack_require__(3), _mediaQuery2 = _interopRequireDefault(_mediaQuery), _toQuery = __webpack_require__(11), _toQuery2 = _interopRequireDefault(_toQuery), defaultTypes = { | ||
component: _propTypes2.default.node, | ||
query: _propTypes2.default.string, | ||
values: _propTypes2.default.shape(_mediaQuery2.default.matchers), | ||
children: _propTypes2.default.oneOfType([ _propTypes2.default.node, _propTypes2.default.func ]), | ||
onChange: _propTypes2.default.func, | ||
onBeforeChange: _propTypes2.default.func | ||
}, mediaKeys = Object.keys(_mediaQuery2.default.all), excludedQueryKeys = Object.keys(defaultTypes), excludedPropKeys = excludedQueryKeys.concat(mediaKeys), MediaQuery = function(_React$Component) { | ||
} | ||
function _defineProperty(obj, key, value) { | ||
return key in obj ? Object.defineProperty(obj, key, { | ||
value: value, | ||
enumerable: !0, | ||
configurable: !0, | ||
writable: !0 | ||
}) : obj[key] = value, obj; | ||
} | ||
Object.defineProperty(__webpack_exports__, "__esModule", { | ||
value: !0 | ||
}), __webpack_require__.d(__webpack_exports__, "default", function() { | ||
return MediaQuery; | ||
}); | ||
var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(5), __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__), __WEBPACK_IMPORTED_MODULE_1_prop_types__ = __webpack_require__(0), __WEBPACK_IMPORTED_MODULE_1_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_prop_types__), __WEBPACK_IMPORTED_MODULE_2_matchmediaquery__ = __webpack_require__(9), __WEBPACK_IMPORTED_MODULE_2_matchmediaquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_matchmediaquery__), __WEBPACK_IMPORTED_MODULE_3_hyphenate_style_name__ = __webpack_require__(2), __WEBPACK_IMPORTED_MODULE_3_hyphenate_style_name___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3_hyphenate_style_name__), __WEBPACK_IMPORTED_MODULE_4__mediaQuery__ = __webpack_require__(3), __WEBPACK_IMPORTED_MODULE_5__toQuery__ = __webpack_require__(11); | ||
__webpack_require__.d(__webpack_exports__, "toQuery", function() { | ||
return __WEBPACK_IMPORTED_MODULE_5__toQuery__.a; | ||
}); | ||
var defaultTypes = { | ||
component: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.node, | ||
query: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.string, | ||
values: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.shape(__WEBPACK_IMPORTED_MODULE_4__mediaQuery__.a.matchers), | ||
children: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.oneOfType([ __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.node, __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.func ]), | ||
onChange: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.func | ||
}, excludedQueryKeys = Object.keys(defaultTypes), omit = function(object, keys) { | ||
var newObject = _objectSpread({}, object); | ||
return keys.forEach(function(key) { | ||
return delete newObject[key]; | ||
}), newObject; | ||
}, getValues = function(_ref) { | ||
var _ref$values = _ref.values, values = void 0 === _ref$values ? {} : _ref$values; | ||
return Object.keys(values).reduce(function(result, key) { | ||
return result[__WEBPACK_IMPORTED_MODULE_3_hyphenate_style_name___default()(key)] = values[key], | ||
result; | ||
}, {}); | ||
}, getQuery = function(props) { | ||
return props.query || Object(__WEBPACK_IMPORTED_MODULE_5__toQuery__.a)(omit(props, excludedQueryKeys)); | ||
}, createMatchMedia = function(props, query) { | ||
var values = getValues(props), forceStatic = 0 === values.length; | ||
return __WEBPACK_IMPORTED_MODULE_2_matchmediaquery___default()(query, values, forceStatic); | ||
}, MediaQuery = function(_React$Component) { | ||
function MediaQuery() { | ||
var _ref, _temp, _this, _ret; | ||
var _getPrototypeOf2, _this; | ||
_classCallCheck(this, MediaQuery); | ||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key]; | ||
return _temp = _this = _possibleConstructorReturn(this, (_ref = MediaQuery.__proto__ || Object.getPrototypeOf(MediaQuery)).call.apply(_ref, [ this ].concat(args))), | ||
_this.state = { | ||
matches: !1 | ||
}, _this.updateMatches = function() { | ||
_this._mql.matches !== _this.state.matches && _this.setState({ | ||
matches: _this._mql.matches | ||
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key]; | ||
return _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(MediaQuery)).call.apply(_getPrototypeOf2, [ this ].concat(args))), | ||
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", { | ||
matches: !1, | ||
mq: null, | ||
query: "" | ||
}), _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "cleanupMediaQuery", function(mq) { | ||
mq && (mq.removeListener(_this.updateMatches), mq.dispose()); | ||
}), _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "updateMatches", function() { | ||
_this._unmounted || _this.state.mq.matches !== _this.state.matches && _this.setState({ | ||
matches: _this.state.mq.matches | ||
}); | ||
}, _this.removeMql = function() { | ||
_this._mql && (_this._mql.removeListener(_this.updateMatches), _this._mql.dispose()); | ||
}, _ret = _temp, _possibleConstructorReturn(_this, _ret); | ||
}), _this; | ||
} | ||
return _inherits(MediaQuery, _React$Component), _createClass(MediaQuery, [ { | ||
key: "componentWillMount", | ||
key: "componentDidMount", | ||
value: function() { | ||
this.updateQuery(this.props); | ||
this.state.mq.addListener(this.updateMatches), this.updateMatches(); | ||
} | ||
}, { | ||
key: "componentWillReceiveProps", | ||
value: function(nextProps) { | ||
this.updateQuery(nextProps); | ||
} | ||
}, { | ||
key: "updateQuery", | ||
value: function(props) { | ||
var values = void 0, forceStatic = !1; | ||
if (props.query ? this.query = props.query : this.query = (0, _toQuery2.default)(omit(props, excludedQueryKeys)), | ||
!this.query) throw new Error("Invalid or missing MediaQuery!"); | ||
props.values && (values = Object.keys(props.values).reduce(function(result, key) { | ||
return result[(0, _hyphenateStyleName2.default)(key)] = props.values[key], result; | ||
}, {}), 0 !== Object.keys(values).length && (forceStatic = !0)), this.removeMql(), | ||
this._mql = (0, _matchmediaquery2.default)(this.query, values, forceStatic), this._mql.addListener(this.updateMatches), | ||
this.updateMatches(); | ||
} | ||
}, { | ||
key: "componentWillUpdate", | ||
value: function(_, nextState) { | ||
this.props.onBeforeChange && this.state.matches !== nextState.matches && this.props.onBeforeChange(this.state.matches); | ||
} | ||
}, { | ||
key: "componentDidUpdate", | ||
value: function(_, prevState) { | ||
value: function(prevProps, prevState) { | ||
this.state.mq !== prevState.mq && (this.cleanupMediaQuery(prevState.mq), this.state.mq.addListener(this.updateMatches)), | ||
this.props.onChange && prevState.matches !== this.state.matches && this.props.onChange(this.state.matches); | ||
@@ -231,3 +259,3 @@ } | ||
value: function() { | ||
this.removeMql(); | ||
this._unmounted = !0, this.cleanupMediaQuery(this.state.mq); | ||
} | ||
@@ -237,12 +265,22 @@ }, { | ||
value: function() { | ||
if ("function" == typeof this.props.children) return this.props.children(this.state.matches); | ||
if (!1 === this.state.matches) return null; | ||
var props = omit(this.props, excludedPropKeys), hasMergeProps = Object.keys(props).length > 0, childrenCount = _react2.default.Children.count(this.props.children); | ||
return this.props.component || null == this.props.children || hasMergeProps && childrenCount > 1 ? _react2.default.createElement(this.props.component || "div", props, this.props.children) : hasMergeProps ? _react2.default.cloneElement(this.props.children, props) : childrenCount ? this.props.children : null; | ||
return "function" == typeof this.props.children ? this.props.children(this.state.matches) : this.state.matches ? this.props.children : null; | ||
} | ||
} ], [ { | ||
key: "getDerivedStateFromProps", | ||
value: function(props, state) { | ||
var query = getQuery(props); | ||
if (!query) throw new Error("Invalid or missing MediaQuery!"); | ||
if (query === state.query) return null; | ||
var mq = createMatchMedia(props, query); | ||
return { | ||
matches: mq.matches, | ||
mq: mq, | ||
query: query | ||
}; | ||
} | ||
} ]), MediaQuery; | ||
}(_react2.default.Component); | ||
MediaQuery.displayName = "MediaQuery", MediaQuery.defaultProps = { | ||
}(__WEBPACK_IMPORTED_MODULE_0_react___default.a.Component); | ||
_defineProperty(MediaQuery, "displayName", "MediaQuery"), _defineProperty(MediaQuery, "defaultProps", { | ||
values: {} | ||
}, exports.default = MediaQuery, exports.toQuery = _toQuery2.default; | ||
}); | ||
}, function(module, exports) { | ||
@@ -701,12 +739,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_5__; | ||
var RE_MEDIA_QUERY = /(?:(only|not)?\s*([^\s\(\)]+)(?:\s*and)?\s*)?(.+)?/i, RE_MQ_EXPRESSION = /\(\s*([^\s\:\)]+)\s*(?:\:\s*([^\s\)]+))?\s*\)/, RE_MQ_FEATURE = /^(?:(min|max)-)?(.+)/, RE_LENGTH_UNIT = /(em|rem|px|cm|mm|in|pt|pc)?$/, RE_RESOLUTION_UNIT = /(dpi|dpcm|dppx)?$/; | ||
}, function(module, exports, __webpack_require__) { | ||
}, function(module, __webpack_exports__, __webpack_require__) { | ||
"use strict"; | ||
function _interopRequireDefault(obj) { | ||
return obj && obj.__esModule ? obj : { | ||
default: obj | ||
}; | ||
} | ||
function keyVal(k, v) { | ||
var realKey = (0, _hyphenateStyleName2.default)(k); | ||
return "number" == typeof v && (v += "px"), !0 === v ? k : !1 === v ? negate(k) : "(" + realKey + ": " + v + ")"; | ||
var realKey = __WEBPACK_IMPORTED_MODULE_0_hyphenate_style_name___default()(k); | ||
return "number" == typeof v && (v = "".concat(v, "px")), !0 === v ? k : !1 === v ? negate(k) : "(".concat(realKey, ": ").concat(v, ")"); | ||
} | ||
@@ -716,7 +749,8 @@ function join(conds) { | ||
} | ||
Object.defineProperty(exports, "__esModule", { | ||
value: !0 | ||
}), exports.default = function(obj) { | ||
var __WEBPACK_IMPORTED_MODULE_0_hyphenate_style_name__ = __webpack_require__(2), __WEBPACK_IMPORTED_MODULE_0_hyphenate_style_name___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_hyphenate_style_name__), __WEBPACK_IMPORTED_MODULE_1__mediaQuery__ = __webpack_require__(3), negate = function(cond) { | ||
return "not ".concat(cond); | ||
}; | ||
__webpack_exports__.a = function(obj) { | ||
var rules = []; | ||
return Object.keys(_mediaQuery2.default.all).forEach(function(k) { | ||
return Object.keys(__WEBPACK_IMPORTED_MODULE_1__mediaQuery__.a.all).forEach(function(k) { | ||
var v = obj[k]; | ||
@@ -726,8 +760,4 @@ null != v && rules.push(keyVal(k, v)); | ||
}; | ||
var _hyphenateStyleName = __webpack_require__(2), _hyphenateStyleName2 = _interopRequireDefault(_hyphenateStyleName), _mediaQuery = __webpack_require__(3), _mediaQuery2 = _interopRequireDefault(_mediaQuery), negate = function(cond) { | ||
return "not " + cond; | ||
}; | ||
module.exports = exports.default; | ||
} ]); | ||
}); | ||
//# sourceMappingURL=react-responsive.js.map |
@@ -1,2 +0,2 @@ | ||
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.MediaQuery=t(require("react")):e.MediaQuery=t(e.react)}("undefined"!=typeof self?self:this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=3)}([function(e,t,n){e.exports=n(5)()},function(e,t,n){"use strict";function r(e){return e in i?i[e]:i[e]=e.replace(o,"-$&").toLowerCase().replace(a,"-ms-")}var o=/[A-Z]/g,a=/^ms-/,i={};e.exports=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},o=n(0),a=function(e){return e&&e.__esModule?e:{default:e}}(o),i=a.default.oneOfType([a.default.string,a.default.number]),u={orientation:a.default.oneOf(["portrait","landscape"]),scan:a.default.oneOf(["progressive","interlace"]),aspectRatio:a.default.string,deviceAspectRatio:a.default.string,height:i,deviceHeight:i,width:i,deviceWidth:i,color:a.default.bool,colorIndex:a.default.bool,monochrome:a.default.bool,resolution:i},s=r({minAspectRatio:a.default.string,maxAspectRatio:a.default.string,minDeviceAspectRatio:a.default.string,maxDeviceAspectRatio:a.default.string,minHeight:i,maxHeight:i,minDeviceHeight:i,maxDeviceHeight:i,minWidth:i,maxWidth:i,minDeviceWidth:i,maxDeviceWidth:i,minColor:a.default.number,maxColor:a.default.number,minColorIndex:a.default.number,maxColorIndex:a.default.number,minMonochrome:a.default.number,maxMonochrome:a.default.number,minResolution:i,maxResolution:i},u),c={all:a.default.bool,grid:a.default.bool,aural:a.default.bool,braille:a.default.bool,handheld:a.default.bool,print:a.default.bool,projection:a.default.bool,screen:a.default.bool,tty:a.default.bool,tv:a.default.bool,embossed:a.default.bool},l=r({},c,s);u.type=Object.keys(c),t.default={all:l,types:c,matchers:u,features:s},e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function u(e,t){var n=c({},e);return t.forEach(function(e){return delete n[e]}),n}Object.defineProperty(t,"__esModule",{value:!0}),t.toQuery=t.default=void 0;var s=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},l=n(4),f=r(l),p=n(0),d=r(p),h=n(7),m=r(h),y=n(1),v=r(y),b=n(2),g=r(b),x=n(9),O=r(x),_={component:d.default.node,query:d.default.string,values:d.default.shape(g.default.matchers),children:d.default.oneOfType([d.default.node,d.default.func]),onChange:d.default.func,onBeforeChange:d.default.func},w=Object.keys(g.default.all),j=Object.keys(_),k=j.concat(w),M=function(e){function t(){var e,n,r,i;o(this,t);for(var u=arguments.length,s=Array(u),c=0;c<u;c++)s[c]=arguments[c];return n=r=a(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(s))),r.state={matches:!1},r.updateMatches=function(){r._mql.matches!==r.state.matches&&r.setState({matches:r._mql.matches})},r.removeMql=function(){r._mql&&(r._mql.removeListener(r.updateMatches),r._mql.dispose())},i=n,a(r,i)}return i(t,e),s(t,[{key:"componentWillMount",value:function(){this.updateQuery(this.props)}},{key:"componentWillReceiveProps",value:function(e){this.updateQuery(e)}},{key:"updateQuery",value:function(e){var t=void 0,n=!1;if(e.query?this.query=e.query:this.query=(0,O.default)(u(e,j)),!this.query)throw new Error("Invalid or missing MediaQuery!");e.values&&(t=Object.keys(e.values).reduce(function(t,n){return t[(0,v.default)(n)]=e.values[n],t},{}),0!==Object.keys(t).length&&(n=!0)),this.removeMql(),this._mql=(0,m.default)(this.query,t,n),this._mql.addListener(this.updateMatches),this.updateMatches()}},{key:"componentWillUpdate",value:function(e,t){this.props.onBeforeChange&&this.state.matches!==t.matches&&this.props.onBeforeChange(this.state.matches)}},{key:"componentDidUpdate",value:function(e,t){this.props.onChange&&t.matches!==this.state.matches&&this.props.onChange(this.state.matches)}},{key:"componentWillUnmount",value:function(){this.removeMql()}},{key:"render",value:function(){if("function"==typeof this.props.children)return this.props.children(this.state.matches);if(!1===this.state.matches)return null;var e=u(this.props,k),t=Object.keys(e).length>0,n=f.default.Children.count(this.props.children);return this.props.component||null==this.props.children||t&&n>1?f.default.createElement(this.props.component||"div",e,this.props.children):t?f.default.cloneElement(this.props.children,e):n?this.props.children:null}}]),t}(f.default.Component);M.displayName="MediaQuery",M.defaultProps={values:{}},t.default=M,t.toQuery=O.default},function(t,n){t.exports=e},function(e,t,n){"use strict";function r(){}var o=n(6);e.exports=function(){function e(e,t,n,r,a,i){if(i!==o){var u=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw u.name="Invariant Violation",u}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){"use strict";function r(e,t,n){function r(e){l&&l.addListener(e)}function o(e){l&&l.removeListener(e)}function u(e){c.matches=e.matches,c.media=e.media}function s(){l&&l.removeListener(u)}var c=this;if(i&&!n){var l=i.call(window,e);this.matches=l.matches,this.media=l.media,l.addListener(u)}else this.matches=a(e,t),this.media=e;this.addListener=r,this.removeListener=o,this.dispose=s}function o(e,t,n){return new r(e,t,n)}var a=n(8).match,i="undefined"!=typeof window?window.matchMedia:null;e.exports=o},function(e,t,n){"use strict";function r(e,t){return o(e).some(function(e){var n=e.inverse,r="all"===e.type||t.type===e.type;if(r&&n||!r&&!n)return!1;var o=e.expressions.every(function(e){var n=e.feature,r=e.modifier,o=e.value,s=t[n];if(!s)return!1;switch(n){case"orientation":case"scan":return s.toLowerCase()===o.toLowerCase();case"width":case"height":case"device-width":case"device-height":o=u(o),s=u(s);break;case"resolution":o=i(o),s=i(s);break;case"aspect-ratio":case"device-aspect-ratio":case"device-pixel-ratio":o=a(o),s=a(s);break;case"grid":case"color":case"color-index":case"monochrome":o=parseInt(o,10)||1,s=parseInt(s,10)||0}switch(r){case"min":return s>=o;case"max":return s<=o;default:return s===o}});return o&&!n||!o&&n})}function o(e){return e.split(",").map(function(e){e=e.trim();var t=e.match(s),n=t[1],r=t[2],o=t[3]||"",a={};return a.inverse=!!n&&"not"===n.toLowerCase(),a.type=r?r.toLowerCase():"all",o=o.match(/\([^\)]+\)/g)||[],a.expressions=o.map(function(e){var t=e.match(c),n=t[1].toLowerCase().match(l);return{modifier:n[1],feature:n[2],value:t[2]}}),a})}function a(e){var t,n=Number(e);return n||(t=e.match(/^(\d+)\s*\/\s*(\d+)$/),n=t[1]/t[2]),n}function i(e){var t=parseFloat(e);switch(String(e).match(p)[1]){case"dpcm":return t/2.54;case"dppx":return 96*t;default:return t}}function u(e){var t=parseFloat(e);switch(String(e).match(f)[1]){case"em":case"rem":return 16*t;case"cm":return 96*t/2.54;case"mm":return 96*t/2.54/10;case"in":return 96*t;case"pt":return 72*t;case"pc":return 72*t/12;default:return t}}t.match=r,t.parse=o;var s=/(?:(only|not)?\s*([^\s\(\)]+)(?:\s*and)?\s*)?(.+)?/i,c=/\(\s*([^\s\:\)]+)\s*(?:\:\s*([^\s\)]+))?\s*\)/,l=/^(?:(min|max)-)?(.+)/,f=/(em|rem|px|cm|mm|in|pt|pc)?$/,p=/(dpi|dpcm|dppx)?$/},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var n=(0,u.default)(e);return"number"==typeof t&&(t+="px"),!0===t?e:!1===t?l(e):"("+n+": "+t+")"}function a(e){return e.join(" and ")}Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){var t=[];return Object.keys(c.default.all).forEach(function(n){var r=e[n];null!=r&&t.push(o(n,r))}),a(t)};var i=n(1),u=r(i),s=n(2),c=r(s),l=function(e){return"not "+e};e.exports=t.default}])}); | ||
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.MediaQuery=t(require("react")):e.MediaQuery=t(e.react)}("undefined"!=typeof self?self:this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=3)}([function(e,t,n){e.exports=n(5)()},function(e,t,n){"use strict";function r(e){return e in i?i[e]:i[e]=e.replace(o,"-$&").toLowerCase().replace(a,"-ms-")}var o=/[A-Z]/g,a=/^ms-/,i={};e.exports=r},function(e,t,n){"use strict";function r(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){o(e,t,n[t])})}return e}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var a=n(0),i=n.n(a),c=i.a.oneOfType([i.a.string,i.a.number]),s={orientation:i.a.oneOf(["portrait","landscape"]),scan:i.a.oneOf(["progressive","interlace"]),aspectRatio:i.a.string,deviceAspectRatio:i.a.string,height:c,deviceHeight:c,width:c,deviceWidth:c,color:i.a.bool,colorIndex:i.a.bool,monochrome:i.a.bool,resolution:c},u=r({minAspectRatio:i.a.string,maxAspectRatio:i.a.string,minDeviceAspectRatio:i.a.string,maxDeviceAspectRatio:i.a.string,minHeight:c,maxHeight:c,minDeviceHeight:c,maxDeviceHeight:c,minWidth:c,maxWidth:c,minDeviceWidth:c,maxDeviceWidth:c,minColor:i.a.number,maxColor:i.a.number,minColorIndex:i.a.number,maxColorIndex:i.a.number,minMonochrome:i.a.number,maxMonochrome:i.a.number,minResolution:c,maxResolution:c},s),f={all:i.a.bool,grid:i.a.bool,aural:i.a.bool,braille:i.a.bool,handheld:i.a.bool,print:i.a.bool,projection:i.a.bool,screen:i.a.bool,tty:i.a.bool,tv:i.a.bool,embossed:i.a.bool},p=r({},f,u);s.type=Object.keys(f),t.a={all:p,types:f,matchers:s,features:u}},function(e,t,n){"use strict";function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function i(e,t,n){return t&&a(e.prototype,t),n&&a(e,n),e}function c(e,t){return!t||"object"!==r(t)&&"function"!=typeof t?p(e):t}function s(e){return(s=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&f(e,t)}function f(e,t){return(f=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function p(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){m(e,t,n[t])})}return e}function m(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}Object.defineProperty(t,"__esModule",{value:!0}),n.d(t,"default",function(){return C});var h=n(4),d=n.n(h),y=n(0),b=n.n(y),v=n(7),g=n.n(v),O=n(1),w=n.n(O),x=n(2),j=n(9);n.d(t,"toQuery",function(){return j.a});var P={component:b.a.node,query:b.a.string,values:b.a.shape(x.a.matchers),children:b.a.oneOfType([b.a.node,b.a.func]),onChange:b.a.func},_=Object.keys(P),k=function(e,t){var n=l({},e);return t.forEach(function(e){return delete n[e]}),n},q=function(e){var t=e.values,n=void 0===t?{}:t;return Object.keys(n).reduce(function(e,t){return e[w()(t)]=n[t],e},{})},M=function(e){return e.query||Object(j.a)(k(e,_))},S=function(e,t){var n=q(e),r=0===n.length;return g()(t,n,r)},C=function(e){function t(){var e,n;o(this,t);for(var r=arguments.length,a=new Array(r),i=0;i<r;i++)a[i]=arguments[i];return n=c(this,(e=s(t)).call.apply(e,[this].concat(a))),m(p(p(n)),"state",{matches:!1,mq:null,query:""}),m(p(p(n)),"cleanupMediaQuery",function(e){e&&(e.removeListener(n.updateMatches),e.dispose())}),m(p(p(n)),"updateMatches",function(){n._unmounted||n.state.mq.matches!==n.state.matches&&n.setState({matches:n.state.mq.matches})}),n}return u(t,e),i(t,[{key:"componentDidMount",value:function(){this.state.mq.addListener(this.updateMatches),this.updateMatches()}},{key:"componentDidUpdate",value:function(e,t){this.state.mq!==t.mq&&(this.cleanupMediaQuery(t.mq),this.state.mq.addListener(this.updateMatches)),this.props.onChange&&t.matches!==this.state.matches&&this.props.onChange(this.state.matches)}},{key:"componentWillUnmount",value:function(){this._unmounted=!0,this.cleanupMediaQuery(this.state.mq)}},{key:"render",value:function(){return"function"==typeof this.props.children?this.props.children(this.state.matches):this.state.matches?this.props.children:null}}],[{key:"getDerivedStateFromProps",value:function(e,t){var n=M(e);if(!n)throw new Error("Invalid or missing MediaQuery!");if(n===t.query)return null;var r=S(e,n);return{matches:r.matches,mq:r,query:n}}}]),t}(d.a.Component);m(C,"displayName","MediaQuery"),m(C,"defaultProps",{values:{}})},function(t,n){t.exports=e},function(e,t,n){"use strict";function r(){}var o=n(6);e.exports=function(){function e(e,t,n,r,a,i){if(i!==o){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){"use strict";function r(e,t,n){function r(e){f&&f.addListener(e)}function o(e){f&&f.removeListener(e)}function c(e){u.matches=e.matches,u.media=e.media}function s(){f&&f.removeListener(c)}var u=this;if(i&&!n){var f=i.call(window,e);this.matches=f.matches,this.media=f.media,f.addListener(c)}else this.matches=a(e,t),this.media=e;this.addListener=r,this.removeListener=o,this.dispose=s}function o(e,t,n){return new r(e,t,n)}var a=n(8).match,i="undefined"!=typeof window?window.matchMedia:null;e.exports=o},function(e,t,n){"use strict";function r(e,t){return o(e).some(function(e){var n=e.inverse,r="all"===e.type||t.type===e.type;if(r&&n||!r&&!n)return!1;var o=e.expressions.every(function(e){var n=e.feature,r=e.modifier,o=e.value,s=t[n];if(!s)return!1;switch(n){case"orientation":case"scan":return s.toLowerCase()===o.toLowerCase();case"width":case"height":case"device-width":case"device-height":o=c(o),s=c(s);break;case"resolution":o=i(o),s=i(s);break;case"aspect-ratio":case"device-aspect-ratio":case"device-pixel-ratio":o=a(o),s=a(s);break;case"grid":case"color":case"color-index":case"monochrome":o=parseInt(o,10)||1,s=parseInt(s,10)||0}switch(r){case"min":return s>=o;case"max":return s<=o;default:return s===o}});return o&&!n||!o&&n})}function o(e){return e.split(",").map(function(e){e=e.trim();var t=e.match(s),n=t[1],r=t[2],o=t[3]||"",a={};return a.inverse=!!n&&"not"===n.toLowerCase(),a.type=r?r.toLowerCase():"all",o=o.match(/\([^\)]+\)/g)||[],a.expressions=o.map(function(e){var t=e.match(u),n=t[1].toLowerCase().match(f);return{modifier:n[1],feature:n[2],value:t[2]}}),a})}function a(e){var t,n=Number(e);return n||(t=e.match(/^(\d+)\s*\/\s*(\d+)$/),n=t[1]/t[2]),n}function i(e){var t=parseFloat(e);switch(String(e).match(l)[1]){case"dpcm":return t/2.54;case"dppx":return 96*t;default:return t}}function c(e){var t=parseFloat(e);switch(String(e).match(p)[1]){case"em":case"rem":return 16*t;case"cm":return 96*t/2.54;case"mm":return 96*t/2.54/10;case"in":return 96*t;case"pt":return 72*t;case"pc":return 72*t/12;default:return t}}t.match=r,t.parse=o;var s=/(?:(only|not)?\s*([^\s\(\)]+)(?:\s*and)?\s*)?(.+)?/i,u=/\(\s*([^\s\:\)]+)\s*(?:\:\s*([^\s\)]+))?\s*\)/,f=/^(?:(min|max)-)?(.+)/,p=/(em|rem|px|cm|mm|in|pt|pc)?$/,l=/(dpi|dpcm|dppx)?$/},function(e,t,n){"use strict";function r(e,t){var n=i()(e);return"number"==typeof t&&(t="".concat(t,"px")),!0===t?e:!1===t?s(e):"(".concat(n,": ").concat(t,")")}function o(e){return e.join(" and ")}var a=n(1),i=n.n(a),c=n(2),s=function(e){return"not ".concat(e)};t.a=function(e){var t=[];return Object.keys(c.a.all).forEach(function(n){var o=e[n];null!=o&&t.push(r(n,o))}),o(t)}}])}); | ||
//# sourceMappingURL=react-responsive.min.js.map |
{ | ||
"name": "react-responsive", | ||
"description": "Media queries in react for responsive design", | ||
"version": "5.0.0", | ||
"version": "6.0.0", | ||
"homepage": "http://github.com/contra/react-responsive", | ||
@@ -38,18 +38,19 @@ "repository": { | ||
"devDependencies": { | ||
"babel-cli": "^6.18.0", | ||
"babel-core": "^6.18.0", | ||
"babel-eslint": "^8.2.2", | ||
"babel-loader": "^7.1.4", | ||
"babel-plugin-add-module-exports": "^0.2.1", | ||
"babel-plugin-transform-class-properties": "^6.24.1", | ||
"babel-plugin-transform-object-rest-spread": "^6.26.0", | ||
"babel-preset-env": "^1.6.1", | ||
"babel-preset-react": "^6.16.0", | ||
"babel-register": "^6.18.0", | ||
"@babel/cli": "^7.0.0", | ||
"@babel/core": "^7.0.0", | ||
"@babel/plugin-proposal-class-properties": "^7.0.0", | ||
"@babel/plugin-proposal-object-rest-spread": "^7.0.0", | ||
"@babel/preset-env": "^7.0.0", | ||
"@babel/preset-react": "^7.0.0", | ||
"@babel/register": "^7.0.0", | ||
"babel-core": "^7.0.0-bridge.0", | ||
"babel-eslint": "^10.0.0", | ||
"babel-loader": "^8.0.0", | ||
"babel-plugin-add-module-exports": "^1.0.0", | ||
"chai": "^4.1.2", | ||
"cross-env": "^5.1.3", | ||
"eslint": "^4.18.2", | ||
"eslint": "^5.0.0", | ||
"eslint-plugin-import": "^2.9.0", | ||
"eslint-plugin-react": "^7.7.0", | ||
"jsdom": "^11.6.2", | ||
"jsdom": "^12.2.0", | ||
"mocha": "^5.0.0", | ||
@@ -59,5 +60,5 @@ "react": "^16.2.0", | ||
"should": "^13.2.1", | ||
"sinon": "^4.4.2", | ||
"webpack": "^3.11.0", | ||
"webpack-dev-server": "^2.11.2" | ||
"sinon": "^6.3.5", | ||
"webpack": "^3.0.0", | ||
"webpack-dev-server": "^2.0.0" | ||
}, | ||
@@ -73,13 +74,13 @@ "scripts": { | ||
"lint": "eslint src test", | ||
"test": "cross-env NODE_PATH=$NODE_PATH:$PWD/src mocha -R spec --compilers js:babel-register --require ./test/setup.js test/*_test.js" | ||
"test": "cross-env NODE_PATH=$NODE_PATH:$PWD/src mocha -R spec --compilers js:@babel/register --require ./test/setup.js test/*_test.js" | ||
}, | ||
"babel": { | ||
"presets": [ | ||
"env", | ||
"react" | ||
"@babel/preset-env", | ||
"@babel/preset-react" | ||
], | ||
"plugins": [ | ||
"add-module-exports", | ||
"transform-class-properties", | ||
"transform-object-rest-spread" | ||
"@babel/plugin-proposal-class-properties", | ||
"@babel/plugin-proposal-object-rest-spread" | ||
] | ||
@@ -86,0 +87,0 @@ }, |
@@ -130,53 +130,5 @@ # react-responsive [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Support us][gittip-image]][gittip-url] | ||
### Component Property | ||
You may specify an optional `component` property on the `MediaQuery` that indicates what component to wrap children with. Any additional props defined on the `MediaQuery` will be passed through to this "wrapper" component. If the `component` property is not defined and the `MediaQuery` has more than 1 child, a `div` will be used as the "wrapper" component by default. However, if the `component` prop is not defined and there is only 1 child, that child will be rendered alone without a component wrapping it. | ||
**Specifying Wrapper Component** | ||
```jsx | ||
<MediaQuery minDeviceWidth={700} component="ul"> | ||
<li>Item 1</li> | ||
<li>Item 2</li> | ||
</MediaQuery> | ||
// renders the following when the media query condition is met | ||
<ul> | ||
<li>Item 1</li> | ||
<li>Item 2</li> | ||
</ul> | ||
``` | ||
**Unwrapped Component** | ||
```jsx | ||
<MediaQuery minDeviceWidth={700}> | ||
<div>Unwrapped component</div> | ||
</MediaQuery> | ||
// renders the following when the media query condition is met | ||
<div>Unwrapped component</div> | ||
``` | ||
**Default div Wrapper Component** | ||
```jsx | ||
<MediaQuery minDeviceWidth={1200} className="some-class"> | ||
<div>Wrapped</div> | ||
<div>Content</div> | ||
</MediaQuery> | ||
// renders the following when the media query condition is met | ||
<div className="some-class"> | ||
<div>Wrapped</div> | ||
<div>Content</div> | ||
</div> | ||
``` | ||
### Server rendering | ||
Server rendering can be done by passing static values through the `values` property. | ||
Server rendering can be done by passing static values through the `values` property. | ||
@@ -192,3 +144,3 @@ The values property can contain `orientation`, `scan`, `aspectRatio`, `deviceAspectRatio`, | ||
If you are using [redux](http://redux.js.org/) you can automatically pass `width` / `deviceWidth` values to your components with [react-responsive-redux](https://github.com/modosc/react-responsive-redux). | ||
If you are using [redux](http://redux.js.org/) you can automatically pass `width` / `deviceWidth` values to your components with [react-responsive-redux](https://github.com/modosc/react-responsive-redux). | ||
@@ -195,0 +147,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
281352
780
24
243