react-sizeme - npm Package Compare versions

Comparing version 1.0.6 to 2.0.0

lib/react-sizeme.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define("react-sizeme",["react","react-dom"],t):"object"==typeof exports?exports["react-sizeme"]=t(require("react"),require("react-dom")):e["react-sizeme"]=t(e.React,e.ReactDOM)}(this,function(e,t){return function(e){function t(i){if(n[i])return n[i].exports;var r=n[i]={exports:{},id:i,loaded:!1};return e[i].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=n(4),o=i(r);t.default=o.default},function(e,t){function n(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}e.exports=n},function(e,t){"use strict";var n=e.exports={};n.isIE=function(e){function t(){var e=navigator.userAgent.toLowerCase();return-1!==e.indexOf("msie")||-1!==e.indexOf("trident")||-1!==e.indexOf(" edge/")}if(!t())return!1;if(!e)return!0;var n=function(){var e,t=3,n=document.createElement("div"),i=n.getElementsByTagName("i");do n.innerHTML="<!--[if gt IE "+ ++t+"]><i></i><![endif]-->";while(i[0]);return t>4?t:e}();return e===n},n.isLegacyOpera=function(){return!!window.opera}},function(e,t){"use strict";var n=e.exports={};n.forEach=function(e,t){for(var n=0;e.length>n;n++){var i=t(e[n]);if(i)return i}}},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){var n={};for(var i in e)t.indexOf(i)<0&&Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n}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 s(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 c(e){var t=e.className,n=e.style,i={};return t||n?(t&&(i.className=t),n&&(i.style=n)):i.style={width:"100%",height:"100%",position:"relative"},v.default.createElement("div",i)}function l(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:E,t=e.monitorWidth,n=void 0===t?!0:t,i=e.monitorHeight,r=void 0===i?!1:i,c=e.refreshRate,l=void 0===c?16:c;return(0,b.default)(n||r,'You have to monitor at least one of the width or height when using the "sizeAware" higher order component'),(0,b.default)(l>=16,"It is highly recommended that you don't put your refreshRate lower than 16 as this may cause layout thrashing."),function(e){var t=T(e),i=function(e){function i(){var e,t,n,r;o(this,i);for(var s=arguments.length,c=Array(s),u=0;s>u;u++)c[u]=arguments[u];return t=n=a(this,(e=Object.getPrototypeOf(i)).call.apply(e,[this].concat(c))),n.state={width:void 0,height:void 0},n.refCallback=function(e){n.element=e},n.checkIfSizeChanged=(0,d.default)(function(e){var t=e.getBoundingClientRect(),i=t.width,r=t.height,o={width:i,height:r};n.hasSizeChanged(n.state,o)&&n.setState(o)},l),r=t,a(n,r)}return s(i,e),h(i,[{key:"componentDidMount",value:function(){this.handleDOMNode()}},{key:"componentDidUpdate",value:function(){this.handleDOMNode()}},{key:"componentWillUnmount",value:function(){this.domEl&&(x.default.removeAllListeners(this.domEl),this.domEl=null)}},{key:"handleDOMNode",value:function(){var e=this.element&&m.default.findDOMNode(this.element);return e?(this.domEl&&x.default.removeAllListeners(this.domEl),this.domEl=e,void x.default.listenTo(this.domEl,this.checkIfSizeChanged)):void(this.domEl&&(x.default.removeAllListeners(this.domEl),this.domEl=null))}},{key:"hasSizeChanged",value:function(e,t){var i=e.height,o=e.width,a=t.height,s=t.width;return r&&i!==a||n&&o!==s}},{key:"render",value:function(){var e=this.state,n=e.width,i=e.height;return v.default.createElement(t,f({explicitRef:this.refCallback,size:{width:n,height:i}},this.props))}}]),i}(v.default.Component);return i}}Object.defineProperty(t,"__esModule",{value:!0});var u=n(23),d=i(u),f=Object.assign||function(e){for(var t=1;arguments.length>t;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},h=function(){function e(e,t){for(var n=0;t.length>n;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}}(),p=n(25),v=i(p),g=n(26),m=i(g),y=n(17),b=i(y),w=n(5),x=i(w),E={monitorWidth:!0,monitorHeight:!1},S=function(e){function t(){return o(this,t),a(this,Object.getPrototypeOf(t).apply(this,arguments))}return s(t,e),h(t,[{key:"render",value:function(){return p.Children.only(this.props.children)}}]),t}(p.Component);S.propTypes={children:p.PropTypes.element.isRequired},c.propTypes={className:p.PropTypes.string,style:p.PropTypes.object};var T=function(e){function t(t){var n=t.explicitRef,i=t.className,o=t.style,a=t.size,s=r(t,["explicitRef","className","style","size"]),l=a.width,u=a.height,d=void 0===l&&void 0===u?v.default.createElement(c,{className:i,style:o}):v.default.createElement(e,f({className:i,style:o,size:a},s));return v.default.createElement(S,{ref:n},d)}return t.propTypes={explicitRef:p.PropTypes.func.isRequired,className:p.PropTypes.string,style:p.PropTypes.object,size:p.PropTypes.shape({width:p.PropTypes.number,height:p.PropTypes.number})},t};t.default=l},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var r=n(10),o=i(r),a=(0,o.default)({strategy:"scroll"});t.default=a},function(e,t,n){"use strict";function i(){function e(e,t){t||(t=e,e=0),e>o?o=e:a>e&&(a=e),i[e]||(i[e]=[]),i[e].push(t),r++}function t(){for(var e=a;o>=e;e++)for(var t=i[e],n=0;t.length>n;n++){var r=t[n];r()}}function n(){return r}var i={},r=0,o=0,a=0;return{add:e,process:t,size:n}}var r=n(7);e.exports=function(e){function t(e,t){!p&&d&&u&&0===h.size()&&a(),h.add(e,t)}function n(){for(p=!0;h.size();){var e=h;h=i(),e.process()}p=!1}function o(e){p||(void 0===e&&(e=u),f&&(s(f),f=null),e?a():n())}function a(){f=c(n)}function s(e){var t=clearTimeout;return t(e)}function c(e){var t=function(e){return setTimeout(e,0)};return t(e)}e=e||{};var l=e.reporter,u=r.getOption(e,"async",!0),d=r.getOption(e,"auto",!0);d&&!u&&(l&&l.warn("Invalid options combination. auto=true and async=false is invalid. Setting async=true."),u=!0);var f,h=i(),p=!1;return{add:t,force:o}}},function(e,t){"use strict";function n(e,t,n){var i=e[t];return void 0!==i&&null!==i||void 0===n?i:n}var i=e.exports={};i.getOption=n},function(e,t,n){"use strict";var i=n(2);e.exports=function(e){function t(e,t){function n(){t(e)}if(!r(e))throw Error("Element is not detectable by this strategy.");if(i.isIE(8))c(e).object={proxy:n},e.attachEvent("onresize",n);else{var o=r(e);o.contentDocument.defaultView.addEventListener("resize",n)}}function n(e,t,n){function r(e,t){function n(){function n(){if("static"===l.position){e.style.position="relative";var t=function(e,t,n,i){function r(e){return e.replace(/[^-\d\.]/g,"")}var o=n[i];"auto"!==o&&"0"!==r(o)&&(e.warn("An element that is positioned static has style."+i+"="+o+" which is ignored due to the static positioning. The element will need to be positioned relative, so the style."+i+" will be set to 0. Element: ",t),t.style[i]=0)};t(a,e,l,"top"),t(a,e,l,"right"),t(a,e,l,"bottom"),t(a,e,l,"left")}}function s(){function i(e,t){return e.contentDocument?void t(e.contentDocument):void setTimeout(function(){i(e,t)},100)}o||n();var r=this;i(r,function(n){t(e)})}""!==l.position&&(n(l),o=!0);var u=document.createElement("object");u.style.cssText=r,u.type="text/html",u.onload=s,i.isIE()||(u.data="about:blank"),e.appendChild(u),c(e).object=u,i.isIE()&&(u.data="about:blank")}var r="display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; padding: 0; margin: 0; opacity: 0; z-index: -1000; pointer-events: none;",o=!1,l=getComputedStyle(e),u=e.offsetWidth,d=e.offsetHeight;c(e).startSize={width:u,height:d},s?s.add(n):n()}n||(n=t,t=e,e=null),e=e||{};i.isIE(8)?n(t):r(t,n)}function r(e){return c(e).object}function o(e){i.isIE(8)?e.detachEvent("onresize",c(e).object.proxy):e.removeChild(r(e)),delete c(e).object}e=e||{};var a=e.reporter,s=e.batchProcessor,c=e.stateHandler.getState;if(!a)throw Error("Missing required dependency: reporter.");return{makeDetectable:n,addListener:t,uninstall:o}}},function(e,t,n){"use strict";var i=n(3).forEach;e.exports=function(e){function t(){var e=500,t=500,n=document.createElement("div");n.style.cssText="position: absolute; width: "+2*e+"px; height: "+2*t+"px; visibility: hidden;";var i=document.createElement("div");i.style.cssText="position: absolute; width: "+e+"px; height: "+t+"px; overflow: scroll; visibility: none; top: "+3*-e+"px; left: "+3*-t+"px; visibility: hidden;",i.appendChild(n),document.body.insertBefore(i,document.body.firstChild);var r=e-i.clientWidth,o=t-i.clientHeight;return document.body.removeChild(i),{width:r,height:o}}function n(e,t){function n(t,n){n=n||function(e){document.head.appendChild(e)};var i=document.createElement("style");return i.innerHTML=t,i.id=e,n(i),i}if(!document.getElementById(e)){var i=t+"_animation",r=t+"_animation_active",o="/* Created by the element-resize-detector library. */\n";o+="."+t+" > div::-webkit-scrollbar { display: none; }\n\n",o+="."+r+" { -webkit-animation-duration: 0.1s; animation-duration: 0.1s; -webkit-animation-name: "+i+"; animation-name: "+i+"; }\n",o+="@-webkit-keyframes "+i+" { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }\n",o+="@keyframes "+i+" { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }",n(o)}}function r(e){e.className+=" "+p+"_animation_active"}function o(e,t){var n=u(e).listeners;if(!n.push)throw Error("Cannot add listener to an element that is not detectable.");u(e).listeners.push(t)}function a(e,t,n){function o(){if(e.debug){var n=Array.prototype.slice.call(arguments);if(n.unshift(d.get(t),"Scroll: "),c.log.apply)c.log.apply(null,n);else for(var i=0;n.length>i;i++)c.log(n[i])}}function a(e){function t(e){return e===e.ownerDocument.body||e.ownerDocument.body.contains(e)}return!t(e)}function s(e){var t=u(e).container.childNodes[0];return-1===getComputedStyle(t).width.indexOf("px")}function h(){var e=getComputedStyle(t),n={};return n.position=e.position,n.width=t.offsetWidth,n.height=t.offsetHeight,n.top=e.top,n.right=e.right,n.bottom=e.bottom,n.left=e.left,n.widthCSS=e.width,n.heightCSS=e.height,n}function v(){var e=h();u(t).startSize={width:e.width,height:e.height},o("Element start size",u(t).startSize)}function g(){u(t).listeners=[]}function m(){o("storeStyle invoked.");var e=h();u(t).style=e}function y(e,t,n){u(e).lastWidth=t,u(e).lastHeight=n}function b(e){return u(e).container.childNodes[0].childNodes[0].childNodes[0]}function w(e){return b(e).childNodes[0]}function x(e){return u(e).container.childNodes[0].childNodes[0].childNodes[1]}function E(){return 2*f.width+1}function S(){return 2*f.height+1}function T(e){return e+10+E()}function z(e){return e+10+S()}function O(e){return 2*e+E()}function k(e){return 2*e+S()}function j(e,t,n){var i=b(e),r=x(e),o=T(t),a=z(n),s=O(t),c=k(n);i.scrollLeft=o,i.scrollTop=a,r.scrollLeft=s,r.scrollTop=c}function C(e,t,n){if(e.addEventListener)e.addEventListener(t,n);else{if(!e.attachEvent)return c.error("[scroll] Don't know how to add event listeners.");e.attachEvent("on"+t,n)}}function N(){var e=u(t).container;return e||(e=document.createElement("div"),e.className=p,e.style.cssText="visibility: hidden; display: inline; width: 0px; height: 0px; z-index: -1; overflow: hidden;",u(t).container=e,r(e),t.appendChild(e),C(e,"animationstart",function(){u(t).onRendered&&u(t).onRendered()})),e}function _(){function e(){var e=u(t).style;if("static"===e.position){t.style.position="relative";var n=function(e,t,n,i){function r(e){return e.replace(/[^-\d\.]/g,"")}var o=n[i];"auto"!==o&&"0"!==r(o)&&(e.warn("An element that is positioned static has style."+i+"="+o+" which is ignored due to the static positioning. The element will need to be positioned relative, so the style."+i+" will be set to 0. Element: ",t),t.style[i]=0)};n(c,t,e,"top"),n(c,t,e,"right"),n(c,t,e,"bottom"),n(c,t,e,"left")}}function n(e,t,n,i){return e=e?e+"px":"0",t=t?t+"px":"0",n=n?n+"px":"0",i=i?i+"px":"0","left: "+e+"; top: "+t+"; right: "+i+"; bottom: "+n+";"}o("Injecting elements"),e();var i=u(t).container;i||(i=N());var r=f.width,a=f.height,s="position: absolute; overflow: hidden; z-index: -1; visibility: hidden; width: 100%; height: 100%; left: 0px; top: 0px;",l="position: absolute; overflow: hidden; z-index: -1; visibility: hidden; "+n(-(1+r),-(1+a),-a,-r),d="position: absolute; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;",h="position: absolute; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;",v="position: absolute; left: 0; top: 0;",g="position: absolute; width: 200%; height: 200%;",m=document.createElement("div"),y=document.createElement("div"),b=document.createElement("div"),w=document.createElement("div"),x=document.createElement("div"),E=document.createElement("div");m.style.cssText=s,m.className=p,y.className=p,y.style.cssText=l,b.style.cssText=d,w.style.cssText=v,x.style.cssText=h,E.style.cssText=g,b.appendChild(w),x.appendChild(E),y.appendChild(b),y.appendChild(x),m.appendChild(y),i.appendChild(m),C(b,"scroll",function(){u(t).onExpand&&u(t).onExpand()}),C(x,"scroll",function(){u(t).onShrink&&u(t).onShrink()})}function H(){function n(e,t,n){var i=w(e),r=T(t),o=z(n);i.style.width=r+"px",i.style.height=o+"px"}function r(i){var r=t.offsetWidth,a=t.offsetHeight;o("Storing current size",r,a),y(t,r,a),l.add(0,function(){if(e.debug){var i=t.offsetWidth,o=t.offsetHeight;i===r&&o===a||c.warn(d.get(t),"Scroll: Size changed before updating detector elements.")}n(t,r,a)}),l.add(1,function(){j(t,r,a)}),i&&l.add(2,i)}function a(){function e(){return void 0===u(t).lastNotifiedWidth}o("notifyListenersIfNeeded invoked");var n=u(t);return e()&&n.lastWidth===n.startSize.width&&n.lastHeight===n.startSize.height?o("Not notifying: Size is the same as the start size, and there has been no notification yet."):n.lastWidth===n.lastNotifiedWidth&&n.lastHeight===n.lastNotifiedHeight?o("Not notifying: Size already notified"):(o("Current size not notified, notifying..."),n.lastNotifiedWidth=n.lastWidth,n.lastNotifiedHeight=n.lastHeight,void i(u(t).listeners,function(e){e(t)}))}function f(){if(o("startanimation triggered."),s(t))return void o("Ignoring since element is still unrendered...");o("Element rendered.");var e=b(t),n=x(t);0!==e.scrollLeft&&0!==e.scrollTop&&0!==n.scrollLeft&&0!==n.scrollTop||(o("Scrollbars out of sync. Updating detector elements..."),r(a))}function h(){if(o("Scroll detected."),s(t))return void o("Scroll event fired while unrendered. Ignoring...");var e=t.offsetWidth,n=t.offsetHeight;e!==t.lastWidth||n!==t.lastHeight?(o("Element size changed."),r(a)):o("Element size has not changed ("+e+"x"+n+").")}o("registerListenersAndPositionElements invoked."),u(t).onRendered=f,u(t).onExpand=h,u(t).onShrink=h;var p=u(t).style;n(t,p.width,p.height)}function L(){o("finalizeDomMutation invoked.");var e=u(t).style;y(t,e.width,e.height),j(t,e.width,e.height)}function A(){n(t)}function D(){o("Installing..."),g(),v(),l.add(0,m),l.add(1,_),l.add(2,H),l.add(3,L),l.add(4,A)}n||(n=t,t=e,e=null),e=e||{},o("Making detectable..."),a(t)?(o("Element is detached"),N(),o("Waiting until element is attached..."),u(t).onRendered=function(){o("Element is now attached"),D()}):D()}function s(e){var t=u(e);e.removeChild(t.container),delete t.container}e=e||{};var c=e.reporter,l=e.batchProcessor,u=e.stateHandler.getState,d=e.idHandler;if(!l)throw Error("Missing required dependency: batchProcessor");if(!c)throw Error("Missing required dependency: reporter.");var f=t(),h="erd_scroll_detection_scrollbar_style",p="erd_scroll_detection_container";return n(h,p),{makeDetectable:a,addListener:o,uninstall:s}}},function(e,t,n){"use strict";function i(e,t,n){var i=e[t];return void 0!==i&&null!==i||void 0===n?i:n}var r=n(3).forEach,o=n(11),a=n(14),s=n(12),c=n(13),l=n(15),u=n(2),d=n(6),f=n(16),h=n(8),p=n(9);e.exports=function(e){function t(e,t,n){function o(e){var t=S.get(e);r(t,function(t){t(e)})}function a(e,t,n){S.add(t,n),e&&n(t)}function s(e){return Array.isArray(e)||void 0!==e.length}function c(e){if(Array.isArray(e))return e;var n=[];return r(t,function(e){n.push(e)}),n}function l(e){return e&&1===e.nodeType}if(n||(n=t,t=e,e={}),!t)throw Error("At least one element required.");if(!n)throw Error("Listener required.");if(l(t))t=[t];else{if(!s(t))return y.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");t=c(t)}var u=0,d=i(e,"callOnAdd",x.callOnAdd),h=i(e,"onReady",function(){}),p=i(e,"debug",x.debug);r(t,function(e){var i=v.get(e);return p&&y.log("Attaching listener to element",i,e),T.isDetectable(e)?(p&&y.log(i,"Already detecable, adding listener."),a(d,e,n),void u++):(p&&y.log(i,"Not detectable."),T.isBusy(e)?(p&&y.log(i,"System busy making it detectable"),a(d,e,n),k[i]=k[i]||[],void k[i].push(function(){u++,u===t.length&&h()})):(p&&y.log(i,"Making detectable..."),T.markBusy(e,!0),E.makeDetectable({debug:p},e,function(e){if(p&&y.log(i,"onElementDetectable"),T.markAsDetectable(e),T.markBusy(e,!1),E.addListener(e,o),a(d,e,n),f.getState(e).startSize){var s=e.offsetWidth,c=e.offsetHeight;f.getState(e).startSize.width===s&&f.getState(e).startSize.height===c||o(e)}u++,u===t.length&&h(),k[i]&&(r(k[i],function(e){e()}),delete k[i])})))}),u===t.length&&h()}function n(e){S.removeAllListeners(e),E.uninstall(e),f.cleanState(e)}e=e||{};var v=e.idHandler;if(!v){var g=s(),m=c({idGenerator:g,stateHandler:f});v=m}var y=e.reporter;if(!y){var b=y===!1;y=l(b)}var w=i(e,"batchProcessor",d({reporter:y})),x={};x.callOnAdd=!!i(e,"callOnAdd",!0),x.debug=!!i(e,"debug",!1);var E,S=a(v),T=o({stateHandler:f}),z=i(e,"strategy","object"),O={reporter:y,batchProcessor:w,stateHandler:f,idHandler:v};if("scroll"===z&&(u.isLegacyOpera()?(y.warn("Scroll strategy is not supported on legacy Opera. Changing to object strategy."),z="object"):u.isIE(9)&&(y.warn("Scroll strategy is not supported on IE9. Changing to object strategy."),z="object")),"scroll"===z)E=p(O);else{if("object"!==z)throw Error("Invalid strategy name: "+z);E=h(O)}var k={};return{listenTo:t,removeListener:S.removeListener,removeAllListeners:S.removeAllListeners,uninstall:n}}},function(e,t){"use strict";e.exports=function(e){function t(e){return!!o(e).isDetectable}function n(e){o(e).isDetectable=!0}function i(e){return!!o(e).busy}function r(e,t){o(e).busy=!!t}var o=e.stateHandler.getState;return{isDetectable:t,markAsDetectable:n,isBusy:i,markBusy:r}}},function(e,t){"use strict";e.exports=function(){function e(){return t++}var t=1;return{generate:e}}},function(e,t){"use strict";e.exports=function(e){function t(e,t){return t||i(e)||n(e),a(e).id}function n(e){var t=o.generate();return a(e).id=t,t}function i(e){return void 0!==a(e).id}function r(e){delete a(e).id}var o=e.idGenerator,a=e.stateHandler.getState;return{get:t,remove:r}}},function(e,t){"use strict";e.exports=function(e){function t(t){return o[e.get(t)]||[]}function n(t,n){var i=e.get(t);o[i]||(o[i]=[]),o[i].push(n)}function i(e,n){for(var i=t(e),r=0,o=i.length;o>r;++r)if(i[r]===n){i.splice(r,1);break}}function r(t){var n=o[e.get(t)];n&&(n.length=0)}var o={};return{get:t,add:n,removeListener:i,removeAllListeners:r}}},function(e,t){"use strict";e.exports=function(e){function t(){}var n={log:t,warn:t,error:t};if(!e&&window.console){var i=function(e,t){e[t]=function(){var e=console[t];if(e.apply)e.apply(console,arguments);else for(var n=0;arguments.length>n;n++)e(arguments[n])}};i(n,"log"),i(n,"warn"),i(n,"error")}return n}},function(e,t){"use strict";function n(e){return e[o]={},i(e)}function i(e){return e[o]||n(e)}function r(e){delete e[o]}var o="_erd";e.exports={initState:n,getState:i,cleanState:r}},function(e,t,n){"use strict";var i=function(e,t,n,i,r,o,a,s){if(!e){var c;if(void 0===t)c=Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[n,i,r,o,a,s],u=0;c=Error(t.replace(/%s/g,function(){return l[u++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}};e.exports=i},function(e,t,n){function i(e,t,n){function i(t){var n=y,i=b;return y=b=void 0,S=t,w=e.apply(i,n)}function u(e){return S=e,x=setTimeout(h,t),T?i(e):w}function d(e){var n=e-E,i=e-S,r=t-n;return z===!1?r:l(r,z-i)}function f(e){var n=e-E,i=e-S;return!E||n>=t||0>n||z!==!1&&i>=z}function h(){var e=o();return f(e)?p(e):void(x=setTimeout(h,d(e)))}function p(e){return clearTimeout(x),x=void 0,O&&y?i(e):(y=b=void 0,w)}function v(){void 0!==x&&clearTimeout(x),E=S=0,y=b=x=void 0}function g(){return void 0===x?w:p(o())}function m(){var e=o(),n=f(e);return y=arguments,b=this,E=e,n?void 0===x?u(E):(clearTimeout(x),x=setTimeout(h,t),i(E)):(void 0===x&&(x=setTimeout(h,t)),w)}var y,b,w,x,E=0,S=0,T=!1,z=!1,O=!0;if("function"!=typeof e)throw new TypeError(s);return t=a(t)||0,r(n)&&(T=!!n.leading,z="maxWait"in n&&c(a(n.maxWait)||0,t),O="trailing"in n?!!n.trailing:O),m.cancel=v,m.flush=g,m}var r=n(1),o=n(22),a=n(24),s="Expected a function",c=Math.max,l=Math.min;e.exports=i},function(e,t,n){function i(e){var t=r(e)?c.call(e):"";return t==o||t==a}var r=n(1),o="[object Function]",a="[object GeneratorFunction]",s=Object.prototype,c=s.toString;e.exports=i},function(e,t){function n(e){return!!e&&"object"==typeof e}e.exports=n},function(e,t,n){function i(e){return"symbol"==typeof e||r(e)&&s.call(e)==o}var r=n(20),o="[object Symbol]",a=Object.prototype,s=a.toString;e.exports=i},function(e,t){var n=Date.now;e.exports=n},function(e,t,n){function i(e,t,n){var i=!0,s=!0;if("function"!=typeof e)throw new TypeError(a);return o(n)&&(i="leading"in n?!!n.leading:i,s="trailing"in n?!!n.trailing:s),r(e,t,{leading:i,maxWait:t,trailing:s})}var r=n(18),o=n(1),a="Expected a function";e.exports=i},function(e,t,n){function i(e){if("number"==typeof e)return e;if(a(e))return s;if(o(e)){var t=r(e.valueOf)?e.valueOf():e;e=o(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(c,"");var n=u.test(e);return n||d.test(e)?f(e.slice(2),n?2:8):l.test(e)?s:+e}var r=n(19),o=n(1),a=n(21),s=NaN,c=/^\s+|\s+$/g,l=/^[-+]0x[0-9a-f]+$/i,u=/^0b[01]+$/i,d=/^0o[0-7]+$/i,f=parseInt;e.exports=i},function(t,n){t.exports=e},function(e,n){e.exports=t}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define("react-sizeme",["react","react-dom"],t):"object"==typeof exports?exports["react-sizeme"]=t(require("react"),require("react-dom")):e["react-sizeme"]=t(e.React,e.ReactDOM)}(this,function(e,t){return function(e){function t(i){if(n[i])return n[i].exports;var r=n[i]={exports:{},id:i,loaded:!1};return e[i].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=n(4),o=i(r);t.default=o.default},function(e,t){function n(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}e.exports=n},function(e,t){"use strict";var n=e.exports={};n.isIE=function(e){function t(){var e=navigator.userAgent.toLowerCase();return-1!==e.indexOf("msie")||-1!==e.indexOf("trident")||-1!==e.indexOf(" edge/")}if(!t())return!1;if(!e)return!0;var n=function(){var e,t=3,n=document.createElement("div"),i=n.getElementsByTagName("i");do n.innerHTML="<!--[if gt IE "+ ++t+"]><i></i><![endif]-->";while(i[0]);return t>4?t:e}();return e===n},n.isLegacyOpera=function(){return!!window.opera}},function(e,t){"use strict";var n=e.exports={};n.forEach=function(e,t){for(var n=0;e.length>n;n++){var i=t(e[n]);if(i)return i}}},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){var n={};for(var i in e)t.indexOf(i)<0&&Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n}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 s(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 l(e){var t=e.className,n=e.style,i={};return t||n?(t&&(i.className=t),n&&(i.style=n)):i.style={width:"100%",height:"100%",position:"relative"},v.default.createElement("div",i)}function c(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:E,t=e.monitorWidth,n=void 0===t?!0:t,i=e.monitorHeight,r=void 0===i?!1:i,l=e.refreshRate,c=void 0===l?16:l;return(0,b.default)(n||r,'You have to monitor at least one of the width or height when using the "sizeAware" higher order component'),(0,b.default)(c>=16,"It is highly recommended that you don't put your refreshRate lower than 16 as this may cause layout thrashing."),function(e){var t=T(e),i=function(e){function i(){var e,t,s,l;o(this,i);for(var u=arguments.length,f=Array(u),h=0;u>h;h++)f[h]=arguments[h];return t=s=a(this,(e=Object.getPrototypeOf(i)).call.apply(e,[this].concat(f))),s.state={width:void 0,height:void 0},s.refCallback=function(e){s.element=e},s.checkIfSizeChanged=(0,d.default)(function(e){var t=e.getBoundingClientRect(),i=t.width,o=t.height,a={width:n?i:null,height:r?o:null};s.hasSizeChanged(s.state,a)&&s.setState(a)},c),l=t,a(s,l)}return s(i,e),h(i,[{key:"componentDidMount",value:function(){this.handleDOMNode()}},{key:"componentDidUpdate",value:function(){this.handleDOMNode()}},{key:"componentWillUnmount",value:function(){this.domEl&&(x.default.removeAllListeners(this.domEl),this.domEl=null)}},{key:"handleDOMNode",value:function(){var e=this.element&&m.default.findDOMNode(this.element);return e?(this.domEl&&x.default.removeAllListeners(this.domEl),this.domEl=e,void x.default.listenTo(this.domEl,this.checkIfSizeChanged)):void(this.domEl&&(x.default.removeAllListeners(this.domEl),this.domEl=null))}},{key:"hasSizeChanged",value:function(e,t){var i=e.height,o=e.width,a=t.height,s=t.width;return r&&i!==a||n&&o!==s}},{key:"render",value:function(){var e=this.state,n=e.width,i=e.height;return v.default.createElement(t,f({explicitRef:this.refCallback,size:{width:n,height:i}},this.props))}}]),i}(v.default.Component);return i}}Object.defineProperty(t,"__esModule",{value:!0});var u=n(23),d=i(u),f=Object.assign||function(e){for(var t=1;arguments.length>t;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},h=function(){function e(e,t){for(var n=0;t.length>n;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}}(),p=n(25),v=i(p),g=n(26),m=i(g),y=n(17),b=i(y),w=n(5),x=i(w),E={monitorWidth:!0,monitorHeight:!1},S=function(e){function t(){return o(this,t),a(this,Object.getPrototypeOf(t).apply(this,arguments))}return s(t,e),h(t,[{key:"render",value:function(){return p.Children.only(this.props.children)}}]),t}(p.Component);S.propTypes={children:p.PropTypes.element.isRequired},l.propTypes={className:p.PropTypes.string,style:p.PropTypes.object};var T=function(e){function t(t){var n=t.explicitRef,i=t.className,o=t.style,a=t.size,s=r(t,["explicitRef","className","style","size"]),c=a.width,u=a.height,d=void 0===c&&void 0===u?v.default.createElement(l,{className:i,style:o}):v.default.createElement(e,f({className:i,style:o,size:a},s));return v.default.createElement(S,{ref:n},d)}return t.propTypes={explicitRef:p.PropTypes.func.isRequired,className:p.PropTypes.string,style:p.PropTypes.object,size:p.PropTypes.shape({width:p.PropTypes.number,height:p.PropTypes.number})},t};t.default=c},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var r=n(10),o=i(r),a=(0,o.default)({strategy:"scroll"});t.default=a},function(e,t,n){"use strict";function i(){function e(e,t){t||(t=e,e=0),e>o?o=e:a>e&&(a=e),i[e]||(i[e]=[]),i[e].push(t),r++}function t(){for(var e=a;o>=e;e++)for(var t=i[e],n=0;t.length>n;n++){var r=t[n];r()}}function n(){return r}var i={},r=0,o=0,a=0;return{add:e,process:t,size:n}}var r=n(7);e.exports=function(e){function t(e,t){!p&&d&&u&&0===h.size()&&a(),h.add(e,t)}function n(){for(p=!0;h.size();){var e=h;h=i(),e.process()}p=!1}function o(e){p||(void 0===e&&(e=u),f&&(s(f),f=null),e?a():n())}function a(){f=l(n)}function s(e){var t=clearTimeout;return t(e)}function l(e){var t=function(e){return setTimeout(e,0)};return t(e)}e=e||{};var c=e.reporter,u=r.getOption(e,"async",!0),d=r.getOption(e,"auto",!0);d&&!u&&(c&&c.warn("Invalid options combination. auto=true and async=false is invalid. Setting async=true."),u=!0);var f,h=i(),p=!1;return{add:t,force:o}}},function(e,t){"use strict";function n(e,t,n){var i=e[t];return void 0!==i&&null!==i||void 0===n?i:n}var i=e.exports={};i.getOption=n},function(e,t,n){"use strict";var i=n(2);e.exports=function(e){function t(e,t){function n(){t(e)}if(!r(e))throw Error("Element is not detectable by this strategy.");if(i.isIE(8))l(e).object={proxy:n},e.attachEvent("onresize",n);else{var o=r(e);o.contentDocument.defaultView.addEventListener("resize",n)}}function n(e,t,n){function r(e,t){function n(){function n(){if("static"===c.position){e.style.position="relative";var t=function(e,t,n,i){function r(e){return e.replace(/[^-\d\.]/g,"")}var o=n[i];"auto"!==o&&"0"!==r(o)&&(e.warn("An element that is positioned static has style."+i+"="+o+" which is ignored due to the static positioning. The element will need to be positioned relative, so the style."+i+" will be set to 0. Element: ",t),t.style[i]=0)};t(a,e,c,"top"),t(a,e,c,"right"),t(a,e,c,"bottom"),t(a,e,c,"left")}}function s(){function i(e,t){return e.contentDocument?void t(e.contentDocument):void setTimeout(function(){i(e,t)},100)}o||n();var r=this;i(r,function(n){t(e)})}""!==c.position&&(n(c),o=!0);var u=document.createElement("object");u.style.cssText=r,u.type="text/html",u.onload=s,i.isIE()||(u.data="about:blank"),e.appendChild(u),l(e).object=u,i.isIE()&&(u.data="about:blank")}var r="display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; padding: 0; margin: 0; opacity: 0; z-index: -1000; pointer-events: none;",o=!1,c=getComputedStyle(e),u=e.offsetWidth,d=e.offsetHeight;l(e).startSize={width:u,height:d},s?s.add(n):n()}n||(n=t,t=e,e=null),e=e||{};i.isIE(8)?n(t):r(t,n)}function r(e){return l(e).object}function o(e){i.isIE(8)?e.detachEvent("onresize",l(e).object.proxy):e.removeChild(r(e)),delete l(e).object}e=e||{};var a=e.reporter,s=e.batchProcessor,l=e.stateHandler.getState;if(!a)throw Error("Missing required dependency: reporter.");return{makeDetectable:n,addListener:t,uninstall:o}}},function(e,t,n){"use strict";var i=n(3).forEach;e.exports=function(e){function t(){var e=500,t=500,n=document.createElement("div");n.style.cssText="position: absolute; width: "+2*e+"px; height: "+2*t+"px; visibility: hidden;";var i=document.createElement("div");i.style.cssText="position: absolute; width: "+e+"px; height: "+t+"px; overflow: scroll; visibility: none; top: "+3*-e+"px; left: "+3*-t+"px; visibility: hidden;",i.appendChild(n),document.body.insertBefore(i,document.body.firstChild);var r=e-i.clientWidth,o=t-i.clientHeight;return document.body.removeChild(i),{width:r,height:o}}function n(e,t){function n(t,n){n=n||function(e){document.head.appendChild(e)};var i=document.createElement("style");return i.innerHTML=t,i.id=e,n(i),i}if(!document.getElementById(e)){var i=t+"_animation",r=t+"_animation_active",o="/* Created by the element-resize-detector library. */\n";o+="."+t+" > div::-webkit-scrollbar { display: none; }\n\n",o+="."+r+" { -webkit-animation-duration: 0.1s; animation-duration: 0.1s; -webkit-animation-name: "+i+"; animation-name: "+i+"; }\n",o+="@-webkit-keyframes "+i+" { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }\n",o+="@keyframes "+i+" { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }",n(o)}}function r(e){e.className+=" "+p+"_animation_active"}function o(e,t){var n=u(e).listeners;if(!n.push)throw Error("Cannot add listener to an element that is not detectable.");u(e).listeners.push(t)}function a(e,t,n){function o(){if(e.debug){var n=Array.prototype.slice.call(arguments);if(n.unshift(d.get(t),"Scroll: "),l.log.apply)l.log.apply(null,n);else for(var i=0;n.length>i;i++)l.log(n[i])}}function a(e){function t(e){return e===e.ownerDocument.body||e.ownerDocument.body.contains(e)}return!t(e)}function s(e){var t=u(e).container.childNodes[0];return-1===getComputedStyle(t).width.indexOf("px")}function h(){var e=getComputedStyle(t),n={};return n.position=e.position,n.width=t.offsetWidth,n.height=t.offsetHeight,n.top=e.top,n.right=e.right,n.bottom=e.bottom,n.left=e.left,n.widthCSS=e.width,n.heightCSS=e.height,n}function v(){var e=h();u(t).startSize={width:e.width,height:e.height},o("Element start size",u(t).startSize)}function g(){u(t).listeners=[]}function m(){o("storeStyle invoked.");var e=h();u(t).style=e}function y(e,t,n){u(e).lastWidth=t,u(e).lastHeight=n}function b(e){return u(e).container.childNodes[0].childNodes[0].childNodes[0]}function w(e){return b(e).childNodes[0]}function x(e){return u(e).container.childNodes[0].childNodes[0].childNodes[1]}function E(){return 2*f.width+1}function S(){return 2*f.height+1}function T(e){return e+10+E()}function z(e){return e+10+S()}function O(e){return 2*e+E()}function k(e){return 2*e+S()}function j(e,t,n){var i=b(e),r=x(e),o=T(t),a=z(n),s=O(t),l=k(n);i.scrollLeft=o,i.scrollTop=a,r.scrollLeft=s,r.scrollTop=l}function C(e,t,n){if(e.addEventListener)e.addEventListener(t,n);else{if(!e.attachEvent)return l.error("[scroll] Don't know how to add event listeners.");e.attachEvent("on"+t,n)}}function N(){var e=u(t).container;return e||(e=document.createElement("div"),e.className=p,e.style.cssText="visibility: hidden; display: inline; width: 0px; height: 0px; z-index: -1; overflow: hidden;",u(t).container=e,r(e),t.appendChild(e),C(e,"animationstart",function(){u(t).onRendered&&u(t).onRendered()})),e}function _(){function e(){var e=u(t).style;if("static"===e.position){t.style.position="relative";var n=function(e,t,n,i){function r(e){return e.replace(/[^-\d\.]/g,"")}var o=n[i];"auto"!==o&&"0"!==r(o)&&(e.warn("An element that is positioned static has style."+i+"="+o+" which is ignored due to the static positioning. The element will need to be positioned relative, so the style."+i+" will be set to 0. Element: ",t),t.style[i]=0)};n(l,t,e,"top"),n(l,t,e,"right"),n(l,t,e,"bottom"),n(l,t,e,"left")}}function n(e,t,n,i){return e=e?e+"px":"0",t=t?t+"px":"0",n=n?n+"px":"0",i=i?i+"px":"0","left: "+e+"; top: "+t+"; right: "+i+"; bottom: "+n+";"}o("Injecting elements"),e();var i=u(t).container;i||(i=N());var r=f.width,a=f.height,s="position: absolute; overflow: hidden; z-index: -1; visibility: hidden; width: 100%; height: 100%; left: 0px; top: 0px;",c="position: absolute; overflow: hidden; z-index: -1; visibility: hidden; "+n(-(1+r),-(1+a),-a,-r),d="position: absolute; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;",h="position: absolute; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;",v="position: absolute; left: 0; top: 0;",g="position: absolute; width: 200%; height: 200%;",m=document.createElement("div"),y=document.createElement("div"),b=document.createElement("div"),w=document.createElement("div"),x=document.createElement("div"),E=document.createElement("div");m.style.cssText=s,m.className=p,y.className=p,y.style.cssText=c,b.style.cssText=d,w.style.cssText=v,x.style.cssText=h,E.style.cssText=g,b.appendChild(w),x.appendChild(E),y.appendChild(b),y.appendChild(x),m.appendChild(y),i.appendChild(m),C(b,"scroll",function(){u(t).onExpand&&u(t).onExpand()}),C(x,"scroll",function(){u(t).onShrink&&u(t).onShrink()})}function H(){function n(e,t,n){var i=w(e),r=T(t),o=z(n);i.style.width=r+"px",i.style.height=o+"px"}function r(i){var r=t.offsetWidth,a=t.offsetHeight;o("Storing current size",r,a),y(t,r,a),c.add(0,function(){if(e.debug){var i=t.offsetWidth,o=t.offsetHeight;i===r&&o===a||l.warn(d.get(t),"Scroll: Size changed before updating detector elements.")}n(t,r,a)}),c.add(1,function(){j(t,r,a)}),i&&c.add(2,i)}function a(){function e(){return void 0===u(t).lastNotifiedWidth}o("notifyListenersIfNeeded invoked");var n=u(t);return e()&&n.lastWidth===n.startSize.width&&n.lastHeight===n.startSize.height?o("Not notifying: Size is the same as the start size, and there has been no notification yet."):n.lastWidth===n.lastNotifiedWidth&&n.lastHeight===n.lastNotifiedHeight?o("Not notifying: Size already notified"):(o("Current size not notified, notifying..."),n.lastNotifiedWidth=n.lastWidth,n.lastNotifiedHeight=n.lastHeight,void i(u(t).listeners,function(e){e(t)}))}function f(){if(o("startanimation triggered."),s(t))return void o("Ignoring since element is still unrendered...");o("Element rendered.");var e=b(t),n=x(t);0!==e.scrollLeft&&0!==e.scrollTop&&0!==n.scrollLeft&&0!==n.scrollTop||(o("Scrollbars out of sync. Updating detector elements..."),r(a))}function h(){if(o("Scroll detected."),s(t))return void o("Scroll event fired while unrendered. Ignoring...");var e=t.offsetWidth,n=t.offsetHeight;e!==t.lastWidth||n!==t.lastHeight?(o("Element size changed."),r(a)):o("Element size has not changed ("+e+"x"+n+").")}o("registerListenersAndPositionElements invoked."),u(t).onRendered=f,u(t).onExpand=h,u(t).onShrink=h;var p=u(t).style;n(t,p.width,p.height)}function L(){o("finalizeDomMutation invoked.");var e=u(t).style;y(t,e.width,e.height),j(t,e.width,e.height)}function A(){n(t)}function D(){o("Installing..."),g(),v(),c.add(0,m),c.add(1,_),c.add(2,H),c.add(3,L),c.add(4,A)}n||(n=t,t=e,e=null),e=e||{},o("Making detectable..."),a(t)?(o("Element is detached"),N(),o("Waiting until element is attached..."),u(t).onRendered=function(){o("Element is now attached"),D()}):D()}function s(e){var t=u(e);e.removeChild(t.container),delete t.container}e=e||{};var l=e.reporter,c=e.batchProcessor,u=e.stateHandler.getState,d=e.idHandler;if(!c)throw Error("Missing required dependency: batchProcessor");if(!l)throw Error("Missing required dependency: reporter.");var f=t(),h="erd_scroll_detection_scrollbar_style",p="erd_scroll_detection_container";return n(h,p),{makeDetectable:a,addListener:o,uninstall:s}}},function(e,t,n){"use strict";function i(e,t,n){var i=e[t];return void 0!==i&&null!==i||void 0===n?i:n}var r=n(3).forEach,o=n(11),a=n(14),s=n(12),l=n(13),c=n(15),u=n(2),d=n(6),f=n(16),h=n(8),p=n(9);e.exports=function(e){function t(e,t,n){function o(e){var t=S.get(e);r(t,function(t){t(e)})}function a(e,t,n){S.add(t,n),e&&n(t)}function s(e){return Array.isArray(e)||void 0!==e.length}function l(e){if(Array.isArray(e))return e;var n=[];return r(t,function(e){n.push(e)}),n}function c(e){return e&&1===e.nodeType}if(n||(n=t,t=e,e={}),!t)throw Error("At least one element required.");if(!n)throw Error("Listener required.");if(c(t))t=[t];else{if(!s(t))return y.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");t=l(t)}var u=0,d=i(e,"callOnAdd",x.callOnAdd),h=i(e,"onReady",function(){}),p=i(e,"debug",x.debug);r(t,function(e){var i=v.get(e);return p&&y.log("Attaching listener to element",i,e),T.isDetectable(e)?(p&&y.log(i,"Already detecable, adding listener."),a(d,e,n),void u++):(p&&y.log(i,"Not detectable."),T.isBusy(e)?(p&&y.log(i,"System busy making it detectable"),a(d,e,n),k[i]=k[i]||[],void k[i].push(function(){u++,u===t.length&&h()})):(p&&y.log(i,"Making detectable..."),T.markBusy(e,!0),E.makeDetectable({debug:p},e,function(e){if(p&&y.log(i,"onElementDetectable"),T.markAsDetectable(e),T.markBusy(e,!1),E.addListener(e,o),a(d,e,n),f.getState(e).startSize){var s=e.offsetWidth,l=e.offsetHeight;f.getState(e).startSize.width===s&&f.getState(e).startSize.height===l||o(e)}u++,u===t.length&&h(),k[i]&&(r(k[i],function(e){e()}),delete k[i])})))}),u===t.length&&h()}function n(e){S.removeAllListeners(e),E.uninstall(e),f.cleanState(e)}e=e||{};var v=e.idHandler;if(!v){var g=s(),m=l({idGenerator:g,stateHandler:f});v=m}var y=e.reporter;if(!y){var b=y===!1;y=c(b)}var w=i(e,"batchProcessor",d({reporter:y})),x={};x.callOnAdd=!!i(e,"callOnAdd",!0),x.debug=!!i(e,"debug",!1);var E,S=a(v),T=o({stateHandler:f}),z=i(e,"strategy","object"),O={reporter:y,batchProcessor:w,stateHandler:f,idHandler:v};if("scroll"===z&&(u.isLegacyOpera()?(y.warn("Scroll strategy is not supported on legacy Opera. Changing to object strategy."),z="object"):u.isIE(9)&&(y.warn("Scroll strategy is not supported on IE9. Changing to object strategy."),z="object")),"scroll"===z)E=p(O);else{if("object"!==z)throw Error("Invalid strategy name: "+z);E=h(O)}var k={};return{listenTo:t,removeListener:S.removeListener,removeAllListeners:S.removeAllListeners,uninstall:n}}},function(e,t){"use strict";e.exports=function(e){function t(e){return!!o(e).isDetectable}function n(e){o(e).isDetectable=!0}function i(e){return!!o(e).busy}function r(e,t){o(e).busy=!!t}var o=e.stateHandler.getState;return{isDetectable:t,markAsDetectable:n,isBusy:i,markBusy:r}}},function(e,t){"use strict";e.exports=function(){function e(){return t++}var t=1;return{generate:e}}},function(e,t){"use strict";e.exports=function(e){function t(e,t){return t||i(e)||n(e),a(e).id}function n(e){var t=o.generate();return a(e).id=t,t}function i(e){return void 0!==a(e).id}function r(e){delete a(e).id}var o=e.idGenerator,a=e.stateHandler.getState;return{get:t,remove:r}}},function(e,t){"use strict";e.exports=function(e){function t(t){return o[e.get(t)]||[]}function n(t,n){var i=e.get(t);o[i]||(o[i]=[]),o[i].push(n)}function i(e,n){for(var i=t(e),r=0,o=i.length;o>r;++r)if(i[r]===n){i.splice(r,1);break}}function r(t){var n=o[e.get(t)];n&&(n.length=0)}var o={};return{get:t,add:n,removeListener:i,removeAllListeners:r}}},function(e,t){"use strict";e.exports=function(e){function t(){}var n={log:t,warn:t,error:t};if(!e&&window.console){var i=function(e,t){e[t]=function(){var e=console[t];if(e.apply)e.apply(console,arguments);else for(var n=0;arguments.length>n;n++)e(arguments[n])}};i(n,"log"),i(n,"warn"),i(n,"error")}return n}},function(e,t){"use strict";function n(e){return e[o]={},i(e)}function i(e){return e[o]||n(e)}function r(e){delete e[o]}var o="_erd";e.exports={initState:n,getState:i,cleanState:r}},function(e,t,n){"use strict";var i=function(e,t,n,i,r,o,a,s){if(!e){var l;if(void 0===t)l=Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,i,r,o,a,s],u=0;l=Error(t.replace(/%s/g,function(){return c[u++]})),l.name="Invariant Violation"}throw l.framesToPop=1,l}};e.exports=i},function(e,t,n){function i(e,t,n){function i(t){var n=y,i=b;return y=b=void 0,S=t,w=e.apply(i,n)}function u(e){return S=e,x=setTimeout(h,t),T?i(e):w}function d(e){var n=e-E,i=e-S,r=t-n;return z===!1?r:c(r,z-i)}function f(e){var n=e-E,i=e-S;return!E||n>=t||0>n||z!==!1&&i>=z}function h(){var e=o();return f(e)?p(e):void(x=setTimeout(h,d(e)))}function p(e){return clearTimeout(x),x=void 0,O&&y?i(e):(y=b=void 0,w)}function v(){void 0!==x&&clearTimeout(x),E=S=0,y=b=x=void 0}function g(){return void 0===x?w:p(o())}function m(){var e=o(),n=f(e);return y=arguments,b=this,E=e,n?void 0===x?u(E):(clearTimeout(x),x=setTimeout(h,t),i(E)):(void 0===x&&(x=setTimeout(h,t)),w)}var y,b,w,x,E=0,S=0,T=!1,z=!1,O=!0;if("function"!=typeof e)throw new TypeError(s);return t=a(t)||0,r(n)&&(T=!!n.leading,z="maxWait"in n&&l(a(n.maxWait)||0,t),O="trailing"in n?!!n.trailing:O),m.cancel=v,m.flush=g,m}var r=n(1),o=n(22),a=n(24),s="Expected a function",l=Math.max,c=Math.min;e.exports=i},function(e,t,n){function i(e){var t=r(e)?l.call(e):"";return t==o||t==a}var r=n(1),o="[object Function]",a="[object GeneratorFunction]",s=Object.prototype,l=s.toString;e.exports=i},function(e,t){function n(e){return!!e&&"object"==typeof e}e.exports=n},function(e,t,n){function i(e){return"symbol"==typeof e||r(e)&&s.call(e)==o}var r=n(20),o="[object Symbol]",a=Object.prototype,s=a.toString;e.exports=i},function(e,t){var n=Date.now;e.exports=n},function(e,t,n){function i(e,t,n){var i=!0,s=!0;if("function"!=typeof e)throw new TypeError(a);return o(n)&&(i="leading"in n?!!n.leading:i,s="trailing"in n?!!n.trailing:s),r(e,t,{leading:i,maxWait:t,trailing:s})}var r=n(18),o=n(1),a="Expected a function";e.exports=i},function(e,t,n){function i(e){if("number"==typeof e)return e;if(a(e))return s;if(o(e)){var t=r(e.valueOf)?e.valueOf():e;e=o(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(l,"");var n=u.test(e);return n||d.test(e)?f(e.slice(2),n?2:8):c.test(e)?s:+e}var r=n(19),o=n(1),a=n(21),s=NaN,l=/^\s+|\s+$/g,c=/^[-+]0x[0-9a-f]+$/i,u=/^0b[01]+$/i,d=/^0o[0-7]+$/i,f=parseInt;e.exports=i},function(t,n){t.exports=e},function(e,n){e.exports=t}])});

package.json

 {
   "name": "react-sizeme",
-  "version": "1.0.6",
+  "version": "2.0.0",
   "description": "Make your React Components aware of their width and height.",
@@ -5,0 +5,0 @@ "main": "lib/react-sizeme.js",

README.md

@@ -19,2 +19,6 @@ <p align='center'>
 
+## Release Notes 
+
+See here: https://github.com/ctrlplusb/react-sizeme/releases
+
 ## What is this for?
@@ -26,17 +30,20 @@
 
-Perhaps its easiest just to show a live example:
+It really does work! Look:
 
-https://react-sizeme-example-esbefmsitg.now.sh
+https://react-sizeme-example-tupkctjbbt.now.sh
 
 ## Simple Example 
 
-Below is a partial example highlighting the use of the library. Read the Usage section in its entirety for a full description on configuration and usage.
+Below is a super simple example highlighting the use of the library. Read the Usage section in its entirety for a full description on configuration and usage.
 
 ```javascript
+import SizeMe from 'react-sizeme';
+
 class MyComponent extends Component {
   render() {
-    const { width, height } = this.props.size;
+    // We receive width and height via "size" prop!
+    const { width } = this.props.size;
   
     return (
-      <div>My size is {width}px x {height}px</div>
+      <div>My width is {width}px</div>
     );
@@ -46,3 +53,4 @@ }
 
-export default SizeMeHOC(MyComponent);  // Wired up here!
+// Wired up here!
+export default SizeMe()(MyComponent);
 ```
@@ -68,10 +76,21 @@
 const SizeMeHOC = SizeMe({
-  // If true any changes to `width` will result in a new `size` prop being
-  // passed to your Component.
+  // If true, then any changes to your Components rendered width will cause an 
+  // recalculation of the "size" prop which will then be be passed into 
+  // your Component.
+  // If false, then any changes to your Components rendered width will NOT 
+  // cause any recalculation of the "size" prop. Additionally any "size" prop 
+  // that is passed into your Component will always have a `null` value 
+  // for the "width" property.
   monitorWidth: true, 
-  // If true any changes to `height` will result in a new `size` prop being
-  // passed to your Component. 
+  // If true, then any changes to your Components rendered height will cause an 
+  // recalculation of the "size" prop which will then be be passed into 
+  // your Component.
+  // If false, then any changes to your Components rendered height will NOT 
+  // cause any recalculation of the "size" prop. Additionally any "size" prop 
+  // that is passed into your Component will always have a `null` value 
+  // for the "height" property.
   monitorHeight: false,
-  // The maximum speed, in milliseconds, at which size changes should be 
-  // propogated to your Components. This should not be set to lower than 16.
+  // The maximum frequency, in milliseconds, at which size changes should be 
+  // recalculated when changes in your Component's rendered size are being
+  // detected. This should not be set to lower than 16.
   refreshRate: 16
@@ -81,4 +100,6 @@ });
 
-__IMPORTANT__: We don't monitor height by default, so if you use the default settings and your component only changes in height it won't recieve an updated `size` prop.  I figured that in most cases we care about the width only and it would be annoying if vertical text spanning kept throwing out updates.
+__IMPORTANT__: We don't monitor height by default, so if you use the default settings and your component only changes in height it won't cause a recalculation of the `size` prop.  I figured that in most cases we care about the width only and it would be annoying if vertical text spanning kept throwing out updates.
 
+__IMPORTANT__: If you aren't monitoring a specific dimension (width or height) you will be provided `null` values for the respective dimension.  This is to avoid any possible misconfigured implementation whoopsies.
+
 __IMPORTANT__: `refreshRate` is set very low.  If you are using this library in a manner where you expect loads of active changes to your components dimensions you may need to tweak this value to avoid browser spamming. 
@@ -85,0 +106,0 @@

src/SizeMe.js

@@ -175,3 +175,6 @@ /* eslint-disable react/no-multi-comp */
         const { width, height } = el.getBoundingClientRect();
-        const next = { width, height };
+        const next = {
+          width: monitorWidth ? width : null,
+          height: monitorHeight ? height : null
+        };
 
@@ -178,0 +181,0 @@ if (this.hasSizeChanged(this.state, next)) {

test/SizeMe.test.js

@@ -69,5 +69,3 @@ import React from 'react';
       it(`Then the resizeDetector registration and deregistration should be called`, () => {
-        const SizeAwareComponent = SizeMe()(
-          ({ size: { width, height } }) => <div>{width} x {height}</div>
-        );
+        const SizeAwareComponent = SizeMe()(() => <div></div>);
 
@@ -88,3 +86,3 @@ const mounted = mount(<SizeAwareComponent />);
       it(`Then the resizeDetector registration and deregistration should be called`, () => {
-        const SizeAwareComponent = SizeMe()(
+        const SizeAwareComponent = SizeMe({ monitorHeight: true })(
           ({ size: { width, height } }) => <div>{width} x {height}</div>
@@ -128,5 +126,3 @@ );
       it(`Then it should render the default placeholder`, () => {
-        const SizeAwareComponent = SizeMe()(
-          ({ size: { width, height } }) => <div>{width} x {height}</div>
-        );
+        const SizeAwareComponent = SizeMe()(() => <div></div>);
 
@@ -142,5 +138,3 @@ const mounted = mount(<SizeAwareComponent />);
       it(`Then it should render a placeholder with the className`, () => {
-        const SizeAwareComponent = SizeMe()(
-          ({ size: { width, height } }) => <div>{width} x {height}</div>
-        );
+        const SizeAwareComponent = SizeMe()(() => <div></div>);
 
@@ -156,5 +150,3 @@ const mounted = mount(<SizeAwareComponent className={`foo`} />);
       it(`Then it should render a placeholder with the style`, () => {
-        const SizeAwareComponent = SizeMe()(
-          ({ size: { width, height } }) => <div>{width} x {height}</div>
-        );
+        const SizeAwareComponent = SizeMe()(() => <div></div>);
 
@@ -170,5 +162,3 @@ const mounted = mount(<SizeAwareComponent style={{ height: `20px` }} />);
       it(`Then it should render a placeholder with both`, () => {
-        const SizeAwareComponent = SizeMe()(
-          ({ size: { width, height } }) => <div>{width} x {height}</div>
-        );
+        const SizeAwareComponent = SizeMe()(() => <div></div>);
 
@@ -184,7 +174,49 @@ const mounted = mount(
 
-    describe(`And the size event has occurred`, () => {
-      it(`Then the actual size aware component should render`, () => {
-        const refreshRate = 30;
+    describe(`And the size event has occurred when only width is being monitored`, () => {
+      it(`Then expected sizes should be provided to the rendered component`, () => {
+        const SizeAwareComponent = SizeMe({ monitorWidth: true, monitorHeight: false })(
+          ({ size: { width, height } }) => <div>{width} x {height || `null`}</div>
+        );
 
-        const SizeAwareComponent = SizeMe({ refreshRate })(
+        const mounted = mount(<SizeAwareComponent />);
+
+        // Initial render should be as expected.
+        expect(mounted.html()).to.equal(placeholderHtml);
+
+        // Get the callback for size changes.
+        const checkIfSizeChangedCallback = resizeDetectorMock.listenTo.args[0][1];
+        checkIfSizeChangedCallback({
+          getBoundingClientRect: () => ({ width: 100, height: 150 })
+        });
+
+        // Update should have occurred immediately.
+        expect(mounted.text()).to.equal(`100 x null`);
+      });
+    });
+
+    describe(`And the size event has occurred when only height is being monitored`, () => {
+      it(`Then expected sizes should be provided to the rendered component`, () => {
+        const SizeAwareComponent = SizeMe({ monitorWidth: false, monitorHeight: true })(
+          ({ size: { width, height } }) => <div>{width || `null`} x {height}</div>
+        );
+
+        const mounted = mount(<SizeAwareComponent />);
+
+        // Initial render should be as expected.
+        expect(mounted.html()).to.equal(placeholderHtml);
+
+        // Get the callback for size changes.
+        const checkIfSizeChangedCallback = resizeDetectorMock.listenTo.args[0][1];
+        checkIfSizeChangedCallback({
+          getBoundingClientRect: () => ({ width: 100, height: 150 })
+        });
+
+        // Update should have occurred immediately.
+        expect(mounted.text()).to.equal(`null x 150`);
+      });
+    });
+
+    describe(`And the size event has occurred when width and height are being monitored`, () => {
+      it(`Then expected sizes should be provided to the rendered component`, () => {
+        const SizeAwareComponent = SizeMe({ monitorWidth: true, monitorHeight: true })(
           ({ size: { width, height } }) => <div>{width} x {height}</div>
@@ -201,7 +233,7 @@ );
         checkIfSizeChangedCallback({
-          getBoundingClientRect: () => ({ width: 100, height: 100 })
+          getBoundingClientRect: () => ({ width: 100, height: 150 })
         });
 
         // Update should have occurred immediately.
-        expect(mounted.text()).to.equal(`100 x 100`);
+        expect(mounted.text()).to.equal(`100 x 150`);
       });
@@ -212,5 +244,3 @@ });
       it(`Then the new props should be passed into the component`, () => {
-        const refreshRate = 16;
-
-        const SizeAwareComponent = SizeMe({ refreshRate })(
+        const SizeAwareComponent = SizeMe({ monitorHeight: true, monitorWidth: true })(
           function ({ size: { width, height }, otherProp }) {
@@ -217,0 +247,0 @@ return <div>{width} x {height} & {otherProp}</div>;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

71289

increased by3.95%

Lines of code

686

increased by3.78%

Number of lines in readme file

223

increased by10.4%

No dependency changes