From 3749f6793188cd9bfce01bf579ef273be3c1c9aa Mon Sep 17 00:00:00 2001 From: Sean Matheson Date: Mon, 12 Sep 2016 22:19:17 +0100 Subject: [PATCH] feat(configuration): The refresh mode strategy can now be configured. You can customise the refresh mode strategy by passing in an additional configuration value of "refreshMode". The default value is 'throttle', however, it also supports a value of 'debounce'. If you select 'debounce' then your component will only be measured after the refresh rate has expired. This can be quite useful if your component is subject to animations etc. Typically you would only want to start measuring your component after the animations complete. --- example/src/MySizeAwareComponent.js | 6 +++- lib/react-sizeme.js | 2 +- src/sizeMe.js | 20 +++++++++++-- test/SizeMe.test.js | 46 +++++++++++++++++++++++------ 4 files changed, 60 insertions(+), 14 deletions(-) diff --git a/example/src/MySizeAwareComponent.js b/example/src/MySizeAwareComponent.js index 0e9c76b..ad5717d 100644 --- a/example/src/MySizeAwareComponent.js +++ b/example/src/MySizeAwareComponent.js @@ -43,4 +43,8 @@ MyComponent.propTypes = { style: PropTypes.object, }; -export default sizeMe({ monitorHeight: true })(MyComponent); +export default sizeMe({ + monitorHeight: true, + refreshRate: 2500, + refreshMode: 'debounce' +})(MyComponent); diff --git a/lib/react-sizeme.js b/lib/react-sizeme.js index ca30904..53334d3 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}}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%"},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,d=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)(d>=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,u=Array(c),h=0;c>h;h++)u[h]=arguments[h];return t=s=a(this,(e=i.__proto__||Object.getPrototypeOf(i)).call.apply(e,[this].concat(u))),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)},d),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&&((0,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&&(0,E.default)().removeAllListeners(this.domEl),this.domEl=e,void(0,E.default)().listenTo(this.domEl,this.checkIfSizeChanged)):void(this.domEl&&((0,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},disablePlaceholder:!!u.enableSSRBehaviour},this.props))}}]),i}(m.default.Component);return i.displayName="SizeMe("+l(e)+")",i.WrappedComponent=e,i}}Object.defineProperty(t,"__esModule",{value:!0});var d=n(21),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(23),m=i(v),g=n(24),y=i(g),b=n(16),w=i(b),x=n(4),E=i(x),S={monitorWidth:!0,monitorHeight:!1},z=function(e){function t(){return o(this,t),a(this,(t.__proto__||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=t.disablePlaceholder,l=r(t,["explicitRef","className","style","size","disablePlaceholder"]),u=a.width,d=a.height,f=void 0!==u||void 0!==d||s?m.default.createElement(e,h({className:i,style:o,size:a},l)):m.default.createElement(c,{className:i,style:o});return m.default.createElement(z,{ref:n},f)}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}),disablePlaceholder:v.PropTypes.bool},t};u.enableSSRBehaviour=!1,t.default=u},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){function n(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}e.exports=n},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function r(){return s||(s=(0,a.default)({strategy:"scroll"})),s}Object.defineProperty(t,"__esModule",{value:!0});var o=n(9),a=i(o),s=void 0;t.default=r},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(6);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(1);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=window.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(2).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; margin: 0; padding: 0;";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; margin: 0; padding: 0;",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+=" "+y+"_animation_active"}function o(e,t,n){if(e.addEventListener)e.addEventListener(t,n);else{if(!e.attachEvent)return f.error("[scroll] Don't know how to add event listeners.");e.attachEvent("on"+t,n)}}function a(e,t,n){if(e.removeEventListener)e.removeEventListener(t,n);else{if(!e.detachEvent)return f.error("[scroll] Don't know how to remove event listeners.");e.detachEvent("on"+t,n)}}function s(e){return p(e).container.childNodes[0].childNodes[0].childNodes[0]}function l(e){return p(e).container.childNodes[0].childNodes[0].childNodes[1]}function c(e,t){var n=p(e).listeners;if(!n.push)throw Error("Cannot add listener to an element that is not detectable.");p(e).listeners.push(t)}function u(e,t,n){function a(){if(e.debug){var n=Array.prototype.slice.call(arguments);if(n.unshift(v.get(t),"Scroll: "),f.log.apply)f.log.apply(null,n);else for(var i=0;n.length>i;i++)f.log(n[i])}}function c(e){function t(e){return e===e.ownerDocument.body||e.ownerDocument.body.contains(e)}return!t(e)}function u(e){var t=p(e).container.childNodes[0];return-1===getComputedStyle(t).width.indexOf("px")}function d(){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 g(){var e=d();p(t).startSize={width:e.width,height:e.height},a("Element start size",p(t).startSize)}function b(){p(t).listeners=[]}function w(){if(a("storeStyle invoked."),!p(t))return void a("Aborting because element has been uninstalled");var e=d();p(t).style=e}function x(e,t,n){p(e).lastWidth=t,p(e).lastHeight=n}function E(e){return s(e).childNodes[0]}function S(){return 2*m.width+1}function z(){return 2*m.height+1}function T(e){return e+10+S()}function O(e){return e+10+z()}function k(e){return 2*e+S()}function C(e){return 2*e+z()}function N(e,t,n){var i=s(e),r=l(e),o=T(t),a=O(n),c=k(t),u=C(n);i.scrollLeft=o,i.scrollTop=a,r.scrollLeft=c,r.scrollTop=u}function j(){var e=p(t).container;return e||(e=document.createElement("div"),e.className=y,e.style.cssText="visibility: hidden; display: inline; width: 0px; height: 0px; z-index: -1; overflow: hidden; margin: 0; padding: 0;",p(t).container=e,r(e),t.appendChild(e),o(e,"animationstart",function(){p(t).onRendered&&p(t).onRendered()})),e}function A(){function e(){var e=p(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(f,t,e,"top"),n(f,t,e,"right"),n(f,t,e,"bottom"),n(f,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+";"}function i(){p(t).onExpand&&p(t).onExpand()}function r(){p(t).onShrink&&p(t).onShrink()}if(a("Injecting elements"),!p(t))return void a("Aborting because element has been uninstalled");e();var s=p(t).container;s||(s=j());var l=m.width,c=m.height,u="position: absolute; overflow: hidden; z-index: -1; visibility: hidden; width: 100%; height: 100%; left: 0px; top: 0px;",d="position: absolute; overflow: hidden; z-index: -1; visibility: hidden; "+n(-(1+l),-(1+c),-c,-l),h="position: absolute; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;",v="position: absolute; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;",g="position: absolute; left: 0; top: 0;",b="position: absolute; width: 200%; height: 200%;",w=document.createElement("div"),x=document.createElement("div"),E=document.createElement("div"),S=document.createElement("div"),z=document.createElement("div"),T=document.createElement("div");w.dir="ltr",w.style.cssText=u,w.className=y,x.className=y,x.style.cssText=d,E.style.cssText=h,S.style.cssText=g,z.style.cssText=v,T.style.cssText=b,E.appendChild(S),z.appendChild(T),x.appendChild(E),x.appendChild(z),w.appendChild(x),s.appendChild(w),o(E,"scroll",i),o(z,"scroll",r),p(t).onExpandScroll=i,p(t).onShrinkScroll=r}function _(){function n(e,t,n){var i=E(e),r=T(t),o=O(n);i.style.width=r+"px",i.style.height=o+"px"}function r(i){var r=t.offsetWidth,o=t.offsetHeight;a("Storing current size",r,o),x(t,r,o),h.add(0,function(){if(!p(t))return void a("Aborting because element has been uninstalled");if(e.debug){var i=t.offsetWidth,s=t.offsetHeight;i===r&&s===o||f.warn(v.get(t),"Scroll: Size changed before updating detector elements.")}n(t,r,o)}),h.add(1,function(){return p(t)?void N(t,r,o):void a("Aborting because element has been uninstalled")}),i&&h.add(2,function(){return p(t)?void i():void a("Aborting because element has been uninstalled")})}function o(){function e(){return void 0===p(t).lastNotifiedWidth}a("notifyListenersIfNeeded invoked");var n=p(t);return e()&&n.lastWidth===n.startSize.width&&n.lastHeight===n.startSize.height?a("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?a("Not notifying: Size already notified"):(a("Current size not notified, notifying..."),n.lastNotifiedWidth=n.lastWidth,n.lastNotifiedHeight=n.lastHeight,void i(p(t).listeners,function(e){e(t)}))}function c(){if(a("startanimation triggered."),u(t))return void a("Ignoring since element is still unrendered...");a("Element rendered.");var e=s(t),n=l(t);0!==e.scrollLeft&&0!==e.scrollTop&&0!==n.scrollLeft&&0!==n.scrollTop||(a("Scrollbars out of sync. Updating detector elements..."),r(o))}function d(){if(a("Scroll detected."),u(t))return void a("Scroll event fired while unrendered. Ignoring...");var e=t.offsetWidth,n=t.offsetHeight;e!==t.lastWidth||n!==t.lastHeight?(a("Element size changed."),r(o)):a("Element size has not changed ("+e+"x"+n+").")}if(a("registerListenersAndPositionElements invoked."),!p(t))return void a("Aborting because element has been uninstalled");p(t).onRendered=c,p(t).onExpand=d,p(t).onShrink=d;var m=p(t).style;n(t,m.width,m.height)}function M(){if(a("finalizeDomMutation invoked."),!p(t))return void a("Aborting because element has been uninstalled");var e=p(t).style;x(t,e.width,e.height),N(t,e.width,e.height)}function P(){n(t)}function D(){a("Installing..."),b(),g(),h.add(0,w),h.add(1,A),h.add(2,_),h.add(3,M),h.add(4,P)}n||(n=t,t=e,e=null),e=e||{},a("Making detectable..."),c(t)?(a("Element is detached"),j(),a("Waiting until element is attached..."),p(t).onRendered=function(){a("Element is now attached"),D()}):D()}function d(e){var t=p(e);t&&(t.busy||(a(s(e),"scroll",t.onExpandScroll),a(l(e),"scroll",t.onShrinkScroll),e.removeChild(t.container)))}e=e||{};var f=e.reporter,h=e.batchProcessor,p=e.stateHandler.getState,v=e.idHandler;if(!h)throw Error("Missing required dependency: batchProcessor");if(!f)throw Error("Missing required dependency: reporter.");var m=t(),g="erd_scroll_detection_scrollbar_style",y="erd_scroll_detection_container";return n(g,y),{makeDetectable:u,addListener:c,uninstall:d}}},function(e,t,n){"use strict";function i(e){return Array.isArray(e)||void 0!==e.length}function r(e){if(Array.isArray(e))return e;var t=[];return s(e,function(e){t.push(e)}),t}function o(e){return e&&1===e.nodeType}function a(e,t,n){var i=e[t];return void 0!==i&&null!==i||void 0===n?i:n}var s=n(2).forEach,l=n(10),c=n(13),u=n(11),d=n(12),f=n(14),h=n(1),p=n(5),v=n(15),m=n(7),g=n(8);e.exports=function(e){function t(e,t,n){function l(e){var t=O.get(e);s(t,function(t){t(e)})}function c(e,t,n){O.add(t,n),e&&n(t)}if(n||(n=t,t=e,e={}),!t)throw Error("At least one element required.");if(!n)throw Error("Listener required.");if(o(t))t=[t];else{if(!i(t))return x.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");t=r(t)}var u=0,d=a(e,"callOnAdd",z.callOnAdd),f=a(e,"onReady",function(){}),h=a(e,"debug",z.debug);s(t,function(e){v.getState(e)||(v.initState(e),y.set(e));var i=y.get(e);return h&&x.log("Attaching listener to element",i,e),k.isDetectable(e)?(h&&x.log(i,"Already detecable, adding listener."),c(d,e,n),void u++):(h&&x.log(i,"Not detectable."),k.isBusy(e)?(h&&x.log(i,"System busy making it detectable"),c(d,e,n),j[i]=j[i]||[],void j[i].push(function(){u++,u===t.length&&f()})):(h&&x.log(i,"Making detectable..."),k.markBusy(e,!0),T.makeDetectable({debug:h},e,function(e){if(h&&x.log(i,"onElementDetectable"),v.getState(e)){if(k.markAsDetectable(e),k.markBusy(e,!1),T.addListener(e,l),c(d,e,n),v.getState(e).startSize){var r=e.offsetWidth,o=e.offsetHeight;v.getState(e).startSize.width===r&&v.getState(e).startSize.height===o||l(e)}j[i]&&s(j[i],function(e){e()})}else h&&x.log(i,"Element uninstalled before being detectable.");delete j[i],u++,u===t.length&&f()})))}),u===t.length&&f()}function n(e){if(!e)return x.error("At least one element is required.");if(o(e))e=[e];else{if(!i(e))return x.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");e=r(e)}s(e,function(e){O.removeAllListeners(e),T.uninstall(e),v.cleanState(e)})}e=e||{};var y;if(e.idHandler)y={get:function(t){return e.idHandler.get(t,!0)},set:e.idHandler.set};else{var b=u(),w=d({idGenerator:b,stateHandler:v});y=w}var x=e.reporter;if(!x){var E=x===!1;x=f(E)}var S=a(e,"batchProcessor",p({reporter:x})),z={};z.callOnAdd=!!a(e,"callOnAdd",!0),z.debug=!!a(e,"debug",!1);var T,O=c(y),k=l({stateHandler:v}),C=a(e,"strategy","object"),N={reporter:x,batchProcessor:S,stateHandler:v,idHandler:y};if("scroll"===C&&(h.isLegacyOpera()?(x.warn("Scroll strategy is not supported on legacy Opera. Changing to object strategy."),C="object"):h.isIE(9)&&(x.warn("Scroll strategy is not supported on IE9. Changing to object strategy."),C="object")),"scroll"===C)T=g(N);else{if("object"!==C)throw Error("Invalid strategy name: "+C);T=m(N)}var j={};return{listenTo:t,removeListener:O.removeListener,removeAllListeners:O.removeAllListeners,uninstall:n}}},function(e,t){"use strict";e.exports=function(e){function t(e){var t=o(e);return t&&!!t.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){var t=r(e);return t&&void 0!==t.id?t.id:null}function n(e){var t=r(e);if(!t)throw Error("setId required the element to have a resize detection state.");var n=i.generate();return t.id=n,n}var i=e.idGenerator,r=e.stateHandler.getState;return{get:t,set:n}}},function(e,t){"use strict";e.exports=function(e){function t(t){var n=e.get(t);return void 0===n?[]:o[n]||[]}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(e){var n=t(e);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]}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){(function(t){var n="object"==typeof t&&t&&t.Object===Object&&t;e.exports=n}).call(t,function(){return this}())},function(e,t,n){var i=n(17),r="object"==typeof self&&self&&self.Object===Object&&self,o=i||r||Function("return this")();e.exports=o},function(e,t,n){function i(e,t,n){function i(t){var n=y,i=b;return y=b=void 0,z=t,x=e.apply(i,n)}function u(e){return z=e,E=setTimeout(h,t),T?i(e):x}function d(e){var n=e-S,i=e-z,r=t-n;return O?c(r,w-i):r}function f(e){var n=e-S,i=e-z;return void 0===S||n>=t||0>n||O&&i>=w}function h(){var e=o();return f(e)?p(e):void(E=setTimeout(h,d(e)))}function p(e){return E=void 0,k&&y?i(e):(y=b=void 0,x)}function v(){void 0!==E&&clearTimeout(E),z=0,y=S=b=E=void 0}function m(){return void 0===E?x:p(o())}function g(){var e=o(),n=f(e);if(y=arguments,b=this,S=e,n){if(void 0===E)return u(S);if(O)return E=setTimeout(h,t),i(S)}return void 0===E&&(E=setTimeout(h,t)),x}var y,b,w,x,E,S,z=0,T=!1,O=!1,k=!0;if("function"!=typeof e)throw new TypeError(s);return t=a(t)||0,r(n)&&(T=!!n.leading,O="maxWait"in n,w=O?l(a(n.maxWait)||0,t):w,k="trailing"in n?!!n.trailing:k),g.cancel=v,g.flush=m,g}var r=n(3),o=n(20),a=n(22),s="Expected a function",l=Math.max,c=Math.min;e.exports=i},function(e,t,n){var i=n(18),r=function(){return i.Date.now()};e.exports=r},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(19),o=n(3),a="Expected a function";e.exports=i},function(e,t){function n(e){return e}e.exports=n},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}}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%"},y.default.createElement("div",i)}function u(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:T,t=e.monitorWidth,n=void 0===t?T.monitorWidth:t,i=e.monitorHeight,r=void 0===i?T.monitorHeight:i,c=e.refreshRate,d=void 0===c?T.refreshRate:c,h=e.refreshMode,g=void 0===h?T.refreshMode:h;(0,E.default)(n||r,'You have to monitor at least one of the width or height when using the "sizeAware" higher order component'),(0,E.default)(d>=16,"It is highly recommended that you don't put your refreshRate lower than 16 as this may cause layout thrashing."),(0,E.default)("throttle"===g||"debounce"===g,'The refreshMode should have a value of "throttle" or "debounce"');var b="throttle"===g?p.default:f.default;return function(e){var t=k(e),i=function(e){function i(){var e,t,s,l;o(this,i);for(var c=arguments.length,u=Array(c),f=0;c>f;f++)u[f]=arguments[f];return t=s=a(this,(e=i.__proto__||Object.getPrototypeOf(i)).call.apply(e,[this].concat(u))),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=b(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)},d),l=t,a(s,l)}return s(i,e),m(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&&((0,z.default)().removeAllListeners(this.domEl),this.domEl=null)}},{key:"handleDOMNode",value:function(){var e=this.element&&w.default.findDOMNode(this.element);return e?(this.domEl&&(0,z.default)().removeAllListeners(this.domEl),this.domEl=e,void(0,z.default)().listenTo(this.domEl,this.checkIfSizeChanged)):void(this.domEl&&((0,z.default)().removeAllListeners(this.domEl),this.domEl=null))}},{key:"render",value:function(){var e=this.state,n=e.width,i=e.height;return y.default.createElement(t,v({explicitRef:this.refCallback,size:{width:n,height:i},disablePlaceholder:!!u.enableSSRBehaviour},this.props))}}]),i}(y.default.Component);return i.displayName="SizeMe("+l(e)+")",i.WrappedComponent=e,i}}Object.defineProperty(t,"__esModule",{value:!0});var d=n(3),f=i(d),h=n(21),p=i(h),v=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},m=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}}(),g=n(23),y=i(g),b=n(24),w=i(b),x=n(17),E=i(x),S=n(5),z=i(S),T={monitorWidth:!0,monitorHeight:!1,refreshRate:16,refreshMode:"throttle"},O=function(e){function t(){return o(this,t),a(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return s(t,e),m(t,[{key:"render",value:function(){return g.Children.only(this.props.children)}}]),t}(g.Component);O.displayName="SizeMeReferenceWrapper",O.propTypes={children:g.PropTypes.element.isRequired},c.displayName="SizeMePlaceholder",c.propTypes={className:g.PropTypes.string,style:g.PropTypes.object};var k=function(e){function t(t){var n=t.explicitRef,i=t.className,o=t.style,a=t.size,s=t.disablePlaceholder,l=r(t,["explicitRef","className","style","size","disablePlaceholder"]),u=a.width,d=a.height,f=void 0!==u||void 0!==d||s?y.default.createElement(e,v({className:i,style:o,size:a},l)):y.default.createElement(c,{className:i,style:o});return y.default.createElement(O,{ref:n},f)}return t.displayName="SizeMeRenderer("+l(e)+")",t.propTypes={explicitRef:g.PropTypes.func.isRequired,className:g.PropTypes.string,style:g.PropTypes.object,size:g.PropTypes.shape({width:g.PropTypes.number,height:g.PropTypes.number}),disablePlaceholder:g.PropTypes.bool},t};u.enableSSRBehaviour=!1,t.default=u},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){function i(e,t,n){function i(t){var n=y,i=b;return y=b=void 0,z=t,x=e.apply(i,n)}function u(e){return z=e,E=setTimeout(h,t),T?i(e):x}function d(e){var n=e-S,i=e-z,r=t-n;return O?c(r,w-i):r}function f(e){var n=e-S,i=e-z;return void 0===S||n>=t||0>n||O&&i>=w}function h(){var e=o();return f(e)?p(e):void(E=setTimeout(h,d(e)))}function p(e){return E=void 0,k&&y?i(e):(y=b=void 0,x)}function v(){void 0!==E&&clearTimeout(E),z=0,y=S=b=E=void 0}function m(){return void 0===E?x:p(o())}function g(){var e=o(),n=f(e);if(y=arguments,b=this,S=e,n){if(void 0===E)return u(S);if(O)return E=setTimeout(h,t),i(S)}return void 0===E&&(E=setTimeout(h,t)),x}var y,b,w,x,E,S,z=0,T=!1,O=!1,k=!0;if("function"!=typeof e)throw new TypeError(s);return t=a(t)||0,r(n)&&(T=!!n.leading,O="maxWait"in n,w=O?l(a(n.maxWait)||0,t):w,k="trailing"in n?!!n.trailing:k),g.cancel=v,g.flush=m,g}var r=n(4),o=n(20),a=n(22),s="Expected a function",l=Math.max,c=Math.min;e.exports=i},function(e,t){function n(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}e.exports=n},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function r(){return s||(s=(0,a.default)({strategy:"scroll"})),s}Object.defineProperty(t,"__esModule",{value:!0});var o=n(10),a=i(o),s=void 0;t.default=r},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(1);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=window.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(2).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; margin: 0; padding: 0;";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; margin: 0; padding: 0;",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+=" "+y+"_animation_active"}function o(e,t,n){if(e.addEventListener)e.addEventListener(t,n);else{if(!e.attachEvent)return f.error("[scroll] Don't know how to add event listeners.");e.attachEvent("on"+t,n)}}function a(e,t,n){if(e.removeEventListener)e.removeEventListener(t,n);else{if(!e.detachEvent)return f.error("[scroll] Don't know how to remove event listeners.");e.detachEvent("on"+t,n)}}function s(e){return p(e).container.childNodes[0].childNodes[0].childNodes[0]}function l(e){return p(e).container.childNodes[0].childNodes[0].childNodes[1]}function c(e,t){var n=p(e).listeners;if(!n.push)throw Error("Cannot add listener to an element that is not detectable.");p(e).listeners.push(t)}function u(e,t,n){function a(){if(e.debug){var n=Array.prototype.slice.call(arguments);if(n.unshift(v.get(t),"Scroll: "),f.log.apply)f.log.apply(null,n);else for(var i=0;n.length>i;i++)f.log(n[i])}}function c(e){function t(e){return e===e.ownerDocument.body||e.ownerDocument.body.contains(e)}return!t(e)}function u(e){var t=p(e).container.childNodes[0];return-1===getComputedStyle(t).width.indexOf("px")}function d(){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 g(){var e=d();p(t).startSize={width:e.width,height:e.height},a("Element start size",p(t).startSize)}function b(){p(t).listeners=[]}function w(){if(a("storeStyle invoked."),!p(t))return void a("Aborting because element has been uninstalled");var e=d();p(t).style=e}function x(e,t,n){p(e).lastWidth=t,p(e).lastHeight=n}function E(e){return s(e).childNodes[0]}function S(){return 2*m.width+1}function z(){return 2*m.height+1}function T(e){return e+10+S()}function O(e){return e+10+z()}function k(e){return 2*e+S()}function C(e){return 2*e+z()}function N(e,t,n){var i=s(e),r=l(e),o=T(t),a=O(n),c=k(t),u=C(n);i.scrollLeft=o,i.scrollTop=a,r.scrollLeft=c,r.scrollTop=u}function j(){var e=p(t).container;return e||(e=document.createElement("div"),e.className=y,e.style.cssText="visibility: hidden; display: inline; width: 0px; height: 0px; z-index: -1; overflow: hidden; margin: 0; padding: 0;",p(t).container=e,r(e),t.appendChild(e),o(e,"animationstart",function(){p(t).onRendered&&p(t).onRendered()})),e}function A(){function e(){var e=p(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(f,t,e,"top"),n(f,t,e,"right"),n(f,t,e,"bottom"),n(f,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+";"}function i(){p(t).onExpand&&p(t).onExpand()}function r(){p(t).onShrink&&p(t).onShrink()}if(a("Injecting elements"),!p(t))return void a("Aborting because element has been uninstalled");e();var s=p(t).container;s||(s=j());var l=m.width,c=m.height,u="position: absolute; overflow: hidden; z-index: -1; visibility: hidden; width: 100%; height: 100%; left: 0px; top: 0px;",d="position: absolute; overflow: hidden; z-index: -1; visibility: hidden; "+n(-(1+l),-(1+c),-c,-l),h="position: absolute; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;",v="position: absolute; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;",g="position: absolute; left: 0; top: 0;",b="position: absolute; width: 200%; height: 200%;",w=document.createElement("div"),x=document.createElement("div"),E=document.createElement("div"),S=document.createElement("div"),z=document.createElement("div"),T=document.createElement("div");w.dir="ltr",w.style.cssText=u,w.className=y,x.className=y,x.style.cssText=d,E.style.cssText=h,S.style.cssText=g,z.style.cssText=v,T.style.cssText=b,E.appendChild(S),z.appendChild(T),x.appendChild(E),x.appendChild(z),w.appendChild(x),s.appendChild(w),o(E,"scroll",i),o(z,"scroll",r),p(t).onExpandScroll=i,p(t).onShrinkScroll=r}function M(){function n(e,t,n){var i=E(e),r=T(t),o=O(n);i.style.width=r+"px",i.style.height=o+"px"}function r(i){var r=t.offsetWidth,o=t.offsetHeight;a("Storing current size",r,o),x(t,r,o),h.add(0,function(){if(!p(t))return void a("Aborting because element has been uninstalled");if(e.debug){var i=t.offsetWidth,s=t.offsetHeight;i===r&&s===o||f.warn(v.get(t),"Scroll: Size changed before updating detector elements.")}n(t,r,o)}),h.add(1,function(){return p(t)?void N(t,r,o):void a("Aborting because element has been uninstalled")}),i&&h.add(2,function(){return p(t)?void i():void a("Aborting because element has been uninstalled")})}function o(){function e(){return void 0===p(t).lastNotifiedWidth}a("notifyListenersIfNeeded invoked");var n=p(t);return e()&&n.lastWidth===n.startSize.width&&n.lastHeight===n.startSize.height?a("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?a("Not notifying: Size already notified"):(a("Current size not notified, notifying..."),n.lastNotifiedWidth=n.lastWidth,n.lastNotifiedHeight=n.lastHeight,void i(p(t).listeners,function(e){e(t)}))}function c(){if(a("startanimation triggered."),u(t))return void a("Ignoring since element is still unrendered...");a("Element rendered.");var e=s(t),n=l(t);0!==e.scrollLeft&&0!==e.scrollTop&&0!==n.scrollLeft&&0!==n.scrollTop||(a("Scrollbars out of sync. Updating detector elements..."),r(o))}function d(){if(a("Scroll detected."),u(t))return void a("Scroll event fired while unrendered. Ignoring...");var e=t.offsetWidth,n=t.offsetHeight;e!==t.lastWidth||n!==t.lastHeight?(a("Element size changed."),r(o)):a("Element size has not changed ("+e+"x"+n+").")}if(a("registerListenersAndPositionElements invoked."),!p(t))return void a("Aborting because element has been uninstalled");p(t).onRendered=c,p(t).onExpand=d,p(t).onShrink=d;var m=p(t).style;n(t,m.width,m.height)}function _(){if(a("finalizeDomMutation invoked."),!p(t))return void a("Aborting because element has been uninstalled");var e=p(t).style;x(t,e.width,e.height),N(t,e.width,e.height)}function H(){n(t)}function P(){a("Installing..."),b(),g(),h.add(0,w),h.add(1,A),h.add(2,M),h.add(3,_),h.add(4,H)}n||(n=t,t=e,e=null),e=e||{},a("Making detectable..."),c(t)?(a("Element is detached"),j(),a("Waiting until element is attached..."),p(t).onRendered=function(){a("Element is now attached"),P()}):P()}function d(e){var t=p(e);t&&(t.busy||(a(s(e),"scroll",t.onExpandScroll),a(l(e),"scroll",t.onShrinkScroll),e.removeChild(t.container)))}e=e||{};var f=e.reporter,h=e.batchProcessor,p=e.stateHandler.getState,v=e.idHandler;if(!h)throw Error("Missing required dependency: batchProcessor");if(!f)throw Error("Missing required dependency: reporter.");var m=t(),g="erd_scroll_detection_scrollbar_style",y="erd_scroll_detection_container";return n(g,y),{makeDetectable:u,addListener:c,uninstall:d}}},function(e,t,n){"use strict";function i(e){return Array.isArray(e)||void 0!==e.length}function r(e){if(Array.isArray(e))return e;var t=[];return s(e,function(e){t.push(e)}),t}function o(e){return e&&1===e.nodeType}function a(e,t,n){var i=e[t];return void 0!==i&&null!==i||void 0===n?i:n}var s=n(2).forEach,l=n(11),c=n(14),u=n(12),d=n(13),f=n(15),h=n(1),p=n(6),v=n(16),m=n(8),g=n(9);e.exports=function(e){function t(e,t,n){function l(e){var t=O.get(e);s(t,function(t){t(e)})}function c(e,t,n){O.add(t,n),e&&n(t)}if(n||(n=t,t=e,e={}),!t)throw Error("At least one element required.");if(!n)throw Error("Listener required.");if(o(t))t=[t];else{if(!i(t))return x.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");t=r(t)}var u=0,d=a(e,"callOnAdd",z.callOnAdd),f=a(e,"onReady",function(){}),h=a(e,"debug",z.debug);s(t,function(e){v.getState(e)||(v.initState(e),y.set(e));var i=y.get(e);return h&&x.log("Attaching listener to element",i,e),k.isDetectable(e)?(h&&x.log(i,"Already detecable, adding listener."),c(d,e,n),void u++):(h&&x.log(i,"Not detectable."),k.isBusy(e)?(h&&x.log(i,"System busy making it detectable"),c(d,e,n),j[i]=j[i]||[],void j[i].push(function(){u++,u===t.length&&f()})):(h&&x.log(i,"Making detectable..."),k.markBusy(e,!0),T.makeDetectable({debug:h},e,function(e){if(h&&x.log(i,"onElementDetectable"),v.getState(e)){if(k.markAsDetectable(e),k.markBusy(e,!1),T.addListener(e,l),c(d,e,n),v.getState(e).startSize){var r=e.offsetWidth,o=e.offsetHeight;v.getState(e).startSize.width===r&&v.getState(e).startSize.height===o||l(e)}j[i]&&s(j[i],function(e){e()})}else h&&x.log(i,"Element uninstalled before being detectable.");delete j[i],u++,u===t.length&&f()})))}),u===t.length&&f()}function n(e){if(!e)return x.error("At least one element is required.");if(o(e))e=[e];else{if(!i(e))return x.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");e=r(e)}s(e,function(e){O.removeAllListeners(e),T.uninstall(e),v.cleanState(e)})}e=e||{};var y;if(e.idHandler)y={get:function(t){return e.idHandler.get(t,!0)},set:e.idHandler.set};else{var b=u(),w=d({idGenerator:b,stateHandler:v});y=w}var x=e.reporter;if(!x){var E=x===!1;x=f(E)}var S=a(e,"batchProcessor",p({reporter:x})),z={};z.callOnAdd=!!a(e,"callOnAdd",!0),z.debug=!!a(e,"debug",!1);var T,O=c(y),k=l({stateHandler:v}),C=a(e,"strategy","object"),N={reporter:x,batchProcessor:S,stateHandler:v,idHandler:y};if("scroll"===C&&(h.isLegacyOpera()?(x.warn("Scroll strategy is not supported on legacy Opera. Changing to object strategy."),C="object"):h.isIE(9)&&(x.warn("Scroll strategy is not supported on IE9. Changing to object strategy."),C="object")),"scroll"===C)T=g(N);else{if("object"!==C)throw Error("Invalid strategy name: "+C);T=m(N)}var j={};return{listenTo:t,removeListener:O.removeListener,removeAllListeners:O.removeAllListeners,uninstall:n}}},function(e,t){"use strict";e.exports=function(e){function t(e){var t=o(e);return t&&!!t.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){var t=r(e);return t&&void 0!==t.id?t.id:null}function n(e){var t=r(e);if(!t)throw Error("setId required the element to have a resize detection state.");var n=i.generate();return t.id=n,n}var i=e.idGenerator,r=e.stateHandler.getState;return{get:t,set:n}}},function(e,t){"use strict";e.exports=function(e){function t(t){var n=e.get(t);return void 0===n?[]:o[n]||[]}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(e){var n=t(e);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]}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){(function(t){var n="object"==typeof t&&t&&t.Object===Object&&t;e.exports=n}).call(t,function(){return this}())},function(e,t,n){var i=n(18),r="object"==typeof self&&self&&self.Object===Object&&self,o=i||r||Function("return this")();e.exports=o},function(e,t,n){var i=n(19),r=function(){return i.Date.now()};e.exports=r},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(3),o=n(4),a="Expected a function";e.exports=i},function(e,t){function n(e){return e}e.exports=n},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 0a00dbe..fb49e10 100644 --- a/src/sizeMe.js +++ b/src/sizeMe.js @@ -3,12 +3,14 @@ import React, { Children, Component, PropTypes } from 'react'; import ReactDOM from 'react-dom'; import invariant from 'invariant'; -import { throttle } from 'lodash'; +import { throttle, debounce } from 'lodash'; import resizeDetector from './resizeDetector'; const defaultConfig = { monitorWidth: true, monitorHeight: false, + refreshRate: 16, + refreshMode: 'throttle', }; function getDisplayName(WrappedComponent) { @@ -116,7 +118,12 @@ const renderWrapper = (WrappedComponent) => { * @return The wrapped component. */ function sizeMe(config = defaultConfig) { - const { monitorWidth = true, monitorHeight = false, refreshRate = 16 } = config; + const { + monitorWidth = defaultConfig.monitorWidth, + monitorHeight = defaultConfig.monitorHeight, + refreshRate = defaultConfig.refreshRate, + refreshMode = defaultConfig.refreshMode, + } = config; invariant( monitorWidth || monitorHeight, @@ -129,6 +136,13 @@ function sizeMe(config = defaultConfig) { '16 as this may cause layout thrashing.' ); + invariant( + refreshMode === 'throttle' || refreshMode === 'debounce', + 'The refreshMode should have a value of "throttle" or "debounce"' + ); + + const refreshDelayStrategy = refreshMode === 'throttle' ? throttle : debounce; + return function WrapComponent(WrappedComponent) { const SizeMeRenderWrapper = renderWrapper(WrappedComponent); @@ -196,7 +210,7 @@ function sizeMe(config = defaultConfig) { || (monitorWidth && cWidth !== nWidth); }; - checkIfSizeChanged = throttle((el) => { + checkIfSizeChanged = refreshDelayStrategy((el) => { const { width, height } = el.getBoundingClientRect(); const next = { width: monitorWidth ? width : null, diff --git a/test/SizeMe.test.js b/test/SizeMe.test.js index 68b65f8..ae02cbe 100644 --- a/test/SizeMe.test.js +++ b/test/SizeMe.test.js @@ -50,20 +50,21 @@ describeWithDOM('Given the SizeMe library', () => { describe('When providing a configuration object', () => { describe('And the refresh rate is below 16', () => { it('Then an error should be thrown', () => { - const action = () => { - sizeMe({ refreshRate: 15 }); - }; - + const action = () => sizeMe({ refreshRate: 15 }); expect(action).to.throw(/don't put your refreshRate lower than 16/); }); }); - describe('And both monitor values are set to false', () => { + describe('And setting an invalid refreshMode to "debounce"', () => { it('Then an error should be thrown', () => { - const action = () => { - sizeMe({ monitorHeight: false, monitorWidth: false }); - }; + const action = () => sizeMe({ refreshMode: 'foo' }); + expect(action).to.throw(/refreshMode should have a value of/); + }); + }); + describe('And both monitor values are set to false', () => { + it('Then an error should be thrown', () => { + const action = () => sizeMe({ monitorHeight: false, monitorWidth: false }); expect(action).to.throw(/You have to monitor at least one of the width or height/); }); }); @@ -85,9 +86,36 @@ describeWithDOM('Given the SizeMe library', () => { }); }); + describe('When setting the "debounce" refreshMode', () => { + it('Then the size data should only appear after the refresh rate has expired', (done) => { + const config = { refreshMode: 'debounce', refreshRate: 50, monitorHeight: true }; + const SizeAwareComponent = sizeMe(config)( + ({ size: { width, height } }) =>
{width} x {height}
+ ); + + const mounted = mount(); + + // Get the callback for size changes. + const checkIfSizeChangedCallback = resizeDetectorMock.listenTo.args[0][1]; + checkIfSizeChangedCallback({ + getBoundingClientRect: () => ({ + width: 100, + height: 100, + }), + }); + + setTimeout(() => expect(mounted.text()).equals(''), 25); + setTimeout(() => { + expect(mounted.text()).equals('100 x 100'); + done(); + }, 55); + }); + }); + describe('When the wrapped component gets mounted after the placeholder', () => { it('Then the resizeDetector registration and deregistration should be called', () => { - const SizeAwareComponent = sizeMe({ monitorHeight: true })( + const config = { monitorHeight: true }; + const SizeAwareComponent = sizeMe(config)( ({ size: { width, height } }) =>
{width} x {height}
);