react-inln/dist/index.js

Define react component style for multiple breakpoints directly in props

"use strict";var _react=_interopRequireWildcard(require("react"));Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;function _interopRequireWildcard(a){if(a&&a.__esModule)return a;var b={};if(null!=a)for(var c in a)if(Object.prototype.hasOwnProperty.call(a,c)){var d=Object.defineProperty&&Object.getOwnPropertyDescriptor?Object.getOwnPropertyDescriptor(a,c):{};d.get||d.set?Object.defineProperty(b,c,d):b[c]=a[c]}return b.default=a,b}function _extends(){return _extends=Object.assign||function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(this,arguments)}function _objectSpread(a){for(var b=1;b<arguments.length;b++){var c=null==arguments[b]?{}:arguments[b],d=Object.keys(c);"function"==typeof Object.getOwnPropertySymbols&&(d=d.concat(Object.getOwnPropertySymbols(c).filter(function(a){return Object.getOwnPropertyDescriptor(c,a).enumerable}))),d.forEach(function(b){_defineProperty(a,b,c[b])})}return a}function _slicedToArray(a,b){return _arrayWithHoles(a)||_iterableToArrayLimit(a,b)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}function _iterableToArrayLimit(a,b){var c=[],d=!0,e=!1,f=void 0;try{for(var g,h=a[Symbol.iterator]();!(d=(g=h.next()).done)&&(c.push(g.value),!(b&&c.length===b));d=!0);}catch(a){e=!0,f=a}finally{try{d||null==h["return"]||h["return"]()}finally{if(e)throw f}}return c}function _arrayWithHoles(a){if(Array.isArray(a))return a}function _objectWithoutProperties(a,b){if(null==a)return{};var c,d,e=_objectWithoutPropertiesLoose(a,b);if(Object.getOwnPropertySymbols){var f=Object.getOwnPropertySymbols(a);for(d=0;d<f.length;d++)c=f[d],!(0<=b.indexOf(c))&&Object.prototype.propertyIsEnumerable.call(a,c)&&(e[c]=a[c])}return e}function _objectWithoutPropertiesLoose(a,b){if(null==a)return{};var c,d,e={},f=Object.keys(a);for(d=0;d<f.length;d++)c=f[d],0<=b.indexOf(c)||(e[c]=a[c]);return e}function _typeof(a){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function _defineProperties(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,"value"in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}function _createClass(a,b,c){return b&&_defineProperties(a.prototype,b),c&&_defineProperties(a,c),a}function _possibleConstructorReturn(a,b){return b&&("object"===_typeof(b)||"function"==typeof b)?b:_assertThisInitialized(a)}function _getPrototypeOf(a){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(a){return a.__proto__||Object.getPrototypeOf(a)},_getPrototypeOf(a)}function _inherits(a,b){if("function"!=typeof b&&null!==b)throw new TypeError("Super expression must either be null or a function");a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,writable:!0,configurable:!0}}),b&&_setPrototypeOf(a,b)}function _setPrototypeOf(a,b){return _setPrototypeOf=Object.setPrototypeOf||function(a,b){return a.__proto__=b,a},_setPrototypeOf(a,b)}function _assertThisInitialized(a){if(void 0===a)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return a}function _defineProperty(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}var Element=function(a){function b(){var a,c;_classCallCheck(this,b);for(var d=arguments.length,e=Array(d),f=0;f<d;f++)e[f]=arguments[f];return c=_possibleConstructorReturn(this,(a=_getPrototypeOf(b)).call.apply(a,[this].concat(e))),_defineProperty(_assertThisInitialized(_assertThisInitialized(c)),"state",{css:{}}),_defineProperty(_assertThisInitialized(_assertThisInitialized(c)),"breakpoints",[{match:"only screen and (max-width: 575px)",alias:"xs"},{match:"only screen and (max-width: 768px)",alias:"s"},{match:"only screen and (max-width: 992px)",alias:"m"},{match:"only screen and (max-width: 1200px)",alias:"l"},{match:"only screen and (min-width: 1201px)",alias:"xl"}]),_defineProperty(_assertThisInitialized(_assertThisInitialized(c)),"_breakpoints",[]),_defineProperty(_assertThisInitialized(_assertThisInitialized(c)),"ignoreAttributes",["length","src"]),_defineProperty(_assertThisInitialized(_assertThisInitialized(c)),"cssAttributes",function(){var a=[];for(var b in document.body.style)["length","src"].includes(b)||["string","number"].includes(_typeof(document.body.style[b]))&&a.push(b);return a}()),_defineProperty(_assertThisInitialized(_assertThisInitialized(c)),"equalCss",function(a,b){return JSON.stringify(a,c.cssAttributes)===JSON.stringify(b,c.cssAttributes)}),_defineProperty(_assertThisInitialized(_assertThisInitialized(c)),"extractFromProps",function(a){var b=a.tag,d=void 0===b?"div":b,e=a.children,f=_objectWithoutProperties(a,["tag","children"]),g={},h={};for(var o in f){var i=f[o],j=o.split("_"),k=_slicedToArray(j,2),l=k[0],m=k[1],n=void 0===m?"":m;c.cssAttributes.includes(l)?g[n]=_objectSpread({},g[n],_defineProperty({},l,i)):h=_objectSpread({},h,_defineProperty({},l,i))}return{Tag:d,children:e,cssRules:g,props:h}}),_defineProperty(_assertThisInitialized(_assertThisInitialized(c)),"matchedMedia",function(a,b){var d=c.extractFromProps(c.props),e=d.cssRules,f=e[""]||{};if(a in e&&b.matches)f=_objectSpread({},f,e[a]);else{var g=c._breakpoints.find(function(a){return a.alias in e&&a.mql.matches});g&&(f=_objectSpread({},f,e[g.alias]))}f&&Object.keys(f).length&&!c.equalCss(c.state.css,f)&&c.setState({css:f})}),c}return _inherits(b,a),_createClass(b,[{key:"componentDidMount",value:function b(){var a=this;this._breakpoints=this.breakpoints.map(function(b){var c=b.match,d=b.alias;return{alias:d,mql:window.matchMedia(c),listener:function c(b){return a.matchedMedia(d,b)}}}),this._breakpoints.forEach(function(a){var b=a.mql,c=a.listener;return b.addListener(c)}),this._breakpoints.forEach(function(a){var b=a.mql,c=a.listener;return c(b)})}},{key:"componentWillUnmount",value:function a(){this._breakpoints.forEach(function(a){var b=a.mql,c=a.listener;return b.removeListener(c)})}},{key:"componentDidUpdate",value:function b(a){this.equalCss(a,this.props)||this._breakpoints.forEach(function(a){var b=a.mql,c=a.listener;return c(b)})}},{key:"render",value:function e(){var a=this.extractFromProps(this.props),b=a.Tag,c=a.children,d=a.props;return _react.default.createElement(b,_extends({},d,{style:this.state.css}),c)}}]),b}(_react.Component),_default=Element;exports.default=_default;