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 } }) =>