From 9032ea3cbfb274ed115a35d90461427e09ffbd69 Mon Sep 17 00:00:00 2001 From: Sean Matheson Date: Mon, 16 May 2016 17:25:53 +0100 Subject: [PATCH] fix(core): Fixed issue with possible element checking after component has been unmounted. There are cases where components that are rapidly mounted and unmounted may have sizme event listeners fire and then subsequently fail due to attempts to interact with an unmounted element. On unmount the event listener handlers are set to noop's in order to prevent this case. --- lib/react-sizeme.js | 2 +- src/SizeMe.js | 31 ++++++++++++++++++++++++------- 2 files changed, 25 insertions(+), 8 deletions(-) diff --git a/lib/react-sizeme.js b/lib/react-sizeme.js index 0b779ad..0cf6dcb 100644 --- a/lib/react-sizeme.js +++ b/lib/react-sizeme.js @@ -1 +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="";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}])}); \ No newline at end of file +!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="";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){return e.displayName||e.name||"Component"}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"},m.default.createElement("div",i)}function u(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:S,t=e.monitorWidth,n=void 0===t?!0:t,i=e.monitorHeight,r=void 0===i?!1:i,c=e.refreshRate,u=void 0===c?16:c;return(0,w.default)(n||r,'You have to monitor at least one of the width or height when using the "sizeAware" higher order component'),(0,w.default)(u>=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 c=arguments.length,d=Array(c),h=0;c>h;h++)d[h]=arguments[h];return t=s=a(this,(e=Object.getPrototypeOf(i)).call.apply(e,[this].concat(d))),s.state={width:void 0,height:void 0},s.refCallback=function(e){s.element=e},s.hasSizeChanged=function(e,t){var i=e.height,o=e.width,a=t.height,s=t.width;return r&&i!==a||n&&o!==s},s.checkIfSizeChanged=(0,f.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)},u),l=t,a(s,l)}return s(i,e),p(i,[{key:"componentDidMount",value:function(){this.handleDOMNode()}},{key:"componentDidUpdate",value:function(){this.handleDOMNode()}},{key:"componentWillUnmount",value:function(){this.hasSizeChanged=function(){},this.checkIfSizeChanged=function(){},this.domEl&&(E.default.removeAllListeners(this.domEl),this.domEl=null)}},{key:"handleDOMNode",value:function(){var e=this.element&&y.default.findDOMNode(this.element);return e?(this.domEl&&E.default.removeAllListeners(this.domEl),this.domEl=e,void E.default.listenTo(this.domEl,this.checkIfSizeChanged)):void(this.domEl&&(E.default.removeAllListeners(this.domEl),this.domEl=null))}},{key:"render",value:function(){var e=this.state,n=e.width,i=e.height;return m.default.createElement(t,h({explicitRef:this.refCallback,size:{width:n,height:i}},this.props))}}]),i}(m.default.Component);return i.displayName="SizeMe("+l(e)+")",i}}Object.defineProperty(t,"__esModule",{value:!0});var d=n(23),f=i(d),h=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},p=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}}(),v=n(25),m=i(v),g=n(26),y=i(g),b=n(17),w=i(b),x=n(5),E=i(x),S={monitorWidth:!0,monitorHeight:!1},z=function(e){function t(){return o(this,t),a(this,Object.getPrototypeOf(t).apply(this,arguments))}return s(t,e),p(t,[{key:"render",value:function(){return v.Children.only(this.props.children)}}]),t}(v.Component);z.displayName="SizeMeReferenceWrapper",z.propTypes={children:v.PropTypes.element.isRequired},c.displayName="SizeMePlaceholder",c.propTypes={className:v.PropTypes.string,style:v.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?m.default.createElement(c,{className:i,style:o}):m.default.createElement(e,h({className:i,style:o,size:a},s));return m.default.createElement(z,{ref:n},d)}return t.displayName="SizeMeRenderer("+l(e)+")",t.propTypes={explicitRef:v.PropTypes.func.isRequired,className:v.PropTypes.string,style:v.PropTypes.object,size:v.PropTypes.shape({width:v.PropTypes.number,height:v.PropTypes.number})},t};t.default=u},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 m(){u(t).listeners=[]}function g(){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 z(e){return e+10+E()}function T(e){return e+10+S()}function O(e){return 2*e+E()}function k(e){return 2*e+S()}function N(e,t,n){var i=b(e),r=x(e),o=z(t),a=T(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 j(){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 M(){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=j());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;",m="position: absolute; width: 200%; height: 200%;",g=document.createElement("div"),y=document.createElement("div"),b=document.createElement("div"),w=document.createElement("div"),x=document.createElement("div"),E=document.createElement("div");g.style.cssText=s,g.className=p,y.className=p,y.style.cssText=c,b.style.cssText=d,w.style.cssText=v,x.style.cssText=h,E.style.cssText=m,b.appendChild(w),x.appendChild(E),y.appendChild(b),y.appendChild(x),g.appendChild(y),i.appendChild(g),C(b,"scroll",function(){u(t).onExpand&&u(t).onExpand()}),C(x,"scroll",function(){u(t).onShrink&&u(t).onShrink()})}function _(){function n(e,t,n){var i=w(e),r=z(t),o=T(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(){N(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 H(){o("finalizeDomMutation invoked.");var e=u(t).style;y(t,e.width,e.height),N(t,e.width,e.height)}function L(){n(t)}function A(){o("Installing..."),m(),v(),c.add(0,g),c.add(1,M),c.add(2,_),c.add(3,H),c.add(4,L)}n||(n=t,t=e,e=null),e=e||{},o("Making detectable..."),a(t)?(o("Element is detached"),j(),o("Waiting until element is attached..."),u(t).onRendered=function(){o("Element is now attached"),A()}):A()}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),z.isDetectable(e)?(p&&y.log(i,"Already detecable, adding listener."),a(d,e,n),void u++):(p&&y.log(i,"Not detectable."),z.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..."),z.markBusy(e,!0),E.makeDetectable({debug:p},e,function(e){if(p&&y.log(i,"onElementDetectable"),z.markAsDetectable(e),z.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 m=s(),g=l({idGenerator:m,stateHandler:f});v=g}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),z=o({stateHandler:f}),T=i(e,"strategy","object"),O={reporter:y,batchProcessor:w,stateHandler:f,idHandler:v};if("scroll"===T&&(u.isLegacyOpera()?(y.warn("Scroll strategy is not supported on legacy Opera. Changing to object strategy."),T="object"):u.isIE(9)&&(y.warn("Scroll strategy is not supported on IE9. Changing to object strategy."),T="object")),"scroll"===T)E=p(O);else{if("object"!==T)throw Error("Invalid strategy name: "+T);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),z?i(e):w}function d(e){var n=e-E,i=e-S,r=t-n;return T===!1?r:c(r,T-i)}function f(e){var n=e-E,i=e-S;return!E||n>=t||0>n||T!==!1&&i>=T}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 m(){return void 0===x?w:p(o())}function g(){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,z=!1,T=!1,O=!0;if("function"!=typeof e)throw new TypeError(s);return t=a(t)||0,r(n)&&(z=!!n.leading,T="maxWait"in n&&l(a(n.maxWait)||0,t),O="trailing"in n?!!n.trailing:O),g.cancel=v,g.flush=m,g}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}])}); \ No newline at end of file diff --git a/src/SizeMe.js b/src/SizeMe.js index 6d69e2a..c80a96f 100644 --- a/src/SizeMe.js +++ b/src/SizeMe.js @@ -11,12 +11,18 @@ const defaultConfig = { monitorHeight: false }; +function getDisplayName(WrappedComponent) { + return WrappedComponent.displayName || WrappedComponent.name || `Component`; +} + /** * This is a utility wrapper component that will allow our higher order * component to get a ref handle on our wrapped components html. * @see https://gist.github.com/jimfb/32b587ee6177665fb4cf */ class ReferenceWrapper extends Component { + static displayName = `SizeMeReferenceWrapper`; + render() { return Children.only(this.props.children); } @@ -44,6 +50,7 @@ function Placeholder({ className, style }) { return (
); } +Placeholder.displayName = `SizeMePlaceholder`; Placeholder.propTypes = { className: PropTypes.string, style: PropTypes.object @@ -57,7 +64,7 @@ Placeholder.propTypes = { * It took me forever to figure this out, so tread extra careful on this one! */ const RenderWrapper = (WrappedComponent) => { - function SizeMeRender({ explicitRef, className, style, size, ...restProps }) { + function SizeMeRenderer({ explicitRef, className, style, size, ...restProps }) { const { width, height } = size; const toRender = (width === undefined && height === undefined) @@ -70,17 +77,20 @@ const RenderWrapper = (WrappedComponent) => { ); } - SizeMeRender.propTypes = { + + SizeMeRenderer.displayName = `SizeMeRenderer(${getDisplayName(WrappedComponent)})`; + + SizeMeRenderer.propTypes = { explicitRef: PropTypes.func.isRequired, className: PropTypes.string, style: PropTypes.object, size: PropTypes.shape({ width: PropTypes.number, - height: PropTypes.number, + height: PropTypes.number }) }; - return SizeMeRender; + return SizeMeRenderer; }; /** @@ -116,6 +126,8 @@ function SizeMe(config = defaultConfig) { const SizeMeRenderWrapper = RenderWrapper(WrappedComponent); class SizeAwareComponent extends React.Component { + static displayName = `SizeMe(${getDisplayName(WrappedComponent)})`; + state = { width: undefined, height: undefined @@ -130,6 +142,11 @@ function SizeMe(config = defaultConfig) { } componentWillUnmount() { + // Change our size checker to a noop just in case we have some + // late running events. + this.hasSizeChanged = () => undefined; + this.checkIfSizeChanged = () => undefined; + if (this.domEl) { resizeDetector.removeAllListeners(this.domEl); this.domEl = null; @@ -162,13 +179,13 @@ function SizeMe(config = defaultConfig) { this.element = element; } - hasSizeChanged(current, next) { + hasSizeChanged = (current, next) => { const { height: cHeight, width: cWidth } = current; const { height: nHeight, width: nWidth } = next; return (monitorHeight && cHeight !== nHeight) || (monitorWidth && cWidth !== nWidth); - } + }; checkIfSizeChanged = throttle((el) => { const { width, height } = el.getBoundingClientRect(); @@ -180,7 +197,7 @@ function SizeMe(config = defaultConfig) { if (this.hasSizeChanged(this.state, next)) { this.setState(next); } - }, refreshRate) + }, refreshRate); render() { const { width, height } = this.state;