react-slim-bounds/lib/Wrap.js

using media query more convenient

"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _inherits(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)}Object.defineProperty(exports,"__esModule",{value:!0});var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},_createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),_get=function(e,t,n){for(var i=!0;i;){var o=e,r=t,a=n;i=!1,null===o&&(o=Function.prototype);var s=Object.getOwnPropertyDescriptor(o,r);if(void 0!==s){if("value"in s)return s.value;var u=s.get;if(void 0===u)return;return u.call(a)}var c=Object.getPrototypeOf(o);if(null===c)return;e=c,t=r,n=a,i=!0,s=c=void 0}},React=require("react"),listener=require("./listener"),_=require("underscore"),classNames=require("classnames");exports["default"]=function(e){var t=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],n=arguments.length<=2||void 0===arguments[2]?{}:arguments[2],i=function(i){function o(){_classCallCheck(this,o),_get(Object.getPrototypeOf(o.prototype),"constructor",this).call(this),this.state={loaded:!1,width:0,height:0,activeBounds:[]},this.debounce=_.debounce(function(){this.setState({debounced:!0})},100),this.handleResize=this.handleResize.bind(this),this.handleLookup=this.handleLookup.bind(this)}return _inherits(o,i),_createClass(o,[{key:"handleResize",value:function(e){var t=this.wrap;this.setState({loaded:!0,debounced:!1,width:t.clientWidth,height:t.clientHeight,activeBounds:this.calculateBounds(t.clientWidth,t.clientHeight)}),this.debounce()}},{key:"calculateBounds",value:function(t,n){var i=e.bounds&&e.bounds(),o=[];if(i)for(var r in i)if(i.hasOwnProperty(r)){var a=i[r],s=a.minWidth||0,u=a.maxWidth||99999;(a.minWidth||a.maxWidth)&&t>s&&t<u&&o.push(r);var c=a.minHeight||0,l=a.maxHeight||99999;(a.minHeight||a.maxHeight)&&n>c&&n<l&&o.push(r)}return o}},{key:"componentDidMount",value:function(){listener.add(this.component,this.handleResize);this.state.loaded||this.handleResize()}},{key:"shouldComponentUpdate",value:function(e,t){return!this.state.loaded||!_.isEqual(this.state.activeBounds,t.activeBounds)||t.debounced===!0}},{key:"componentWillUnmount",value:function(){listener.remove(this.component,this.handleResize)}},{key:"handleLookup",value:function(e){return this.state.activeBounds.indexOf(e)>-1}},{key:"render",value:function(){var i=this,o={wrap:{position:"relative",height:"100%"},component:{height:"100%"}};return React.createElement("div",{ref:function(e){return i.wrap=e},style:_extends({},o.wrap,t)},React.createElement("div",{ref:function(e){return i.component=e},style:_extends({},o.component,n)},this.state.loaded&&this.state.width>0?React.createElement(e,_extends({},this.props,{ref:function(e){return i.originComponent=e},width:this.state.width,height:this.state.height,activeBounds:this.state.activeBounds,isBound:this.handleLookup})):null))}}]),o}(React.Component);return i},module.exports=exports["default"];