react-media
Version:
CSS media queries for React
2 lines (1 loc) • 4.17 kB
JavaScript
;function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var React=_interopDefault(require("react")),PropTypes=_interopDefault(require("prop-types")),invariant=_interopDefault(require("invariant")),json2mq=_interopDefault(require("json2mq"));function _defineProperty(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function _extends(){return(_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function _inheritsLoose(e,t){e.prototype=Object.create(t.prototype),(e.prototype.constructor=e).__proto__=t}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var MediaQueryListener=function(){function e(e,t,r){var n=this;this.nativeMediaQueryList=e.matchMedia(t),this.active=!0,this.cancellableListener=function(){n.matches=n.nativeMediaQueryList.matches,n.active&&r.apply(void 0,arguments)},this.nativeMediaQueryList.addListener(this.cancellableListener),this.matches=this.nativeMediaQueryList.matches}return e.prototype.cancel=function(){this.active=!1,this.nativeMediaQueryList.removeListener(this.cancellableListener)},e}(),queryType=PropTypes.oneOfType([PropTypes.string,PropTypes.object,PropTypes.arrayOf(PropTypes.object.isRequired)]),Media=function(n){function e(e){var t,r;return _defineProperty(_assertThisInitialized(_assertThisInitialized(t=n.call(this,e)||this)),"queries",[]),_defineProperty(_assertThisInitialized(_assertThisInitialized(t)),"getMatches",function(){return unwrapSingleQuery(t.queries.reduce(function(e,t){var r,n=t.name,i=t.mqListener;return _extends({},e,((r={})[n]=i.matches,r))},{}))}),_defineProperty(_assertThisInitialized(_assertThisInitialized(t)),"updateMatches",function(){var e=t.getMatches();t.setState(function(){return{matches:e}},t.onChange)}),e.query||e.queries||e.query&&e.queries||invariant(!1),void 0!==e.defaultMatches&&e.query&&"boolean"!=typeof e.defaultMatches&&invariant(!1),void 0!==e.defaultMatches&&e.queries&&"object"!=typeof e.defaultMatches&&invariant(!1),"object"!=typeof window?(r=void 0!==e.defaultMatches?e.defaultMatches:!!e.query||Object.keys(t.props.queries).reduce(function(e,t){var r;return _extends({},e,((r={})[t]=!0,r))},{}),t.state={matches:r},_assertThisInitialized(t)):(t.initialize(),t.state={matches:void 0!==t.props.defaultMatches?t.props.defaultMatches:t.getMatches()},t.onChange(),t)}_inheritsLoose(e,n);var t=e.prototype;return t.initialize=function(){var n=this,i=this.props.targetWindow||window;"function"!=typeof i.matchMedia&&invariant(!1);var a=this.props.queries||wrapInQueryObject(this.props.query);this.queries=Object.keys(a).map(function(e){var t=a[e],r="string"!=typeof t?json2mq(t):t;return{name:e,mqListener:new MediaQueryListener(i,r,n.updateMatches)}})},t.componentDidMount=function(){this.initialize(),void 0!==this.props.defaultMatches&&this.updateMatches()},t.onChange=function(){var e=this.props.onChange;e&&e(this.state.matches)},t.componentWillUnmount=function(){this.queries.forEach(function(e){return e.mqListener.cancel()})},t.render=function(){var e=this.props,t=e.children,r=e.render,n=this.state.matches,i="object"==typeof n?Object.keys(n).some(function(e){return n[e]}):n;return r?i?r(n):null:t?"function"==typeof t?t(n):(!Array.isArray(t)||t.length)&&i?React.Children.only(t)&&"string"==typeof React.Children.only(t).type?React.Children.only(t):React.cloneElement(React.Children.only(t),{matches:n}):null:null},e}(React.Component);function wrapInQueryObject(e){return{__DEFAULT__:e}}function unwrapSingleQuery(e){var t=Object.keys(e);return 1===t.length&&"__DEFAULT__"===t[0]?e.__DEFAULT__:e}_defineProperty(Media,"propTypes",{defaultMatches:PropTypes.oneOfType([PropTypes.bool,PropTypes.objectOf(PropTypes.bool)]),query:queryType,queries:PropTypes.objectOf(queryType),render:PropTypes.func,children:PropTypes.oneOfType([PropTypes.node,PropTypes.func]),targetWindow:PropTypes.object,onChange:PropTypes.func}),module.exports=Media;