react-pannable - npm Package Compare versions

Comparing version 0.2.3 to 0.3.0

dist/react-pannable.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).ReactPannable={},e.React)}(this,function(e,f){"use strict";function u(e,t){if(null==e)return{};var n,i,o={},r=Object.keys(e);for(i=0;i<r.length;i++)t.indexOf(n=r[i])<0&&(o[n]=e[n]);return o}function m(){return(m=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(this,arguments)}function r(e,t){e.prototype=Object.create(t.prototype),(e.prototype.constructor=e).__proto__=t}f=f&&f.hasOwnProperty("default")?f.default:f;var t,h={create:function(e){var t,n=e.transformTranslate;return m({},u(e,["transformTranslate"]),(t=n)?{transform:"translate3d("+t[0]+"px, "+t[1]+"px, 0)",WebkitTransform:"translate3d("+t[0]+"px, "+t[1]+"px, 0)",msTransform:"translate("+t[0]+"px, "+t[1]+"px)"}:null)}},g=function(i){function e(){for(var o,e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];return(o=i.call.apply(i,[this].concat(t))||this).state={target:null,translation:null,velocity:null,startXY:null,moveXY:null,moveT:null},o.elemRef=f.createRef(),o._onTouchStart=function(e){var t=o.props,n=t.onTouchStart;e.touches&&1===e.touches.length&&t.enabled&&o._track(e.touches[0]),n&&n(e)},o._onTouchMove=function(e){var t=o.props.onTouchMove;e.touches&&1===e.touches.length&&o._move(e.touches[0]),t&&t(e)},o._onTouchEnd=function(e){var t=o.props.onTouchEnd;e.changedTouches&&1===e.changedTouches.length&&o._end(),t&&t(e)},o._onTouchCancel=function(e){var t=o.props.onTouchCancel;e.changedTouches&&1===e.changedTouches.length&&o._end(),t&&t(e)},o._onMouseDown=function(e){var t=o.props,n=t.enabled,i=t.onMouseDown;(o._shouldPreventClick=n)&&(o._addMousePanListener(),o._track(e)),i&&i(e)},o._onMouseMove=function(e){e.preventDefault(),o._move(e)},o._onMouseUp=function(e){e.preventDefault(),o._removeMousePanListener(),o._end()},o._onClick=function(e){var t=o.props.onClick;o._shouldPreventClick&&e.preventDefault(),o._shouldPreventClick=!1,t&&t(e)},o}r(e,i);var t=e.prototype;return t.componentDidUpdate=function(e){var t=this.props.enabled;e.enabled===t||t||this._cancel()},t.componentWillUnmount=function(){this._removeMousePanListener()},t._track=function(e){this.setState({startXY:{x:e.pageX,y:e.pageY},moveXY:{x:e.pageX,y:e.pageY},moveT:(new Date).getTime()})},t._move=function(h){h={target:h.target,pageX:h.pageX,pageY:h.pageY},this.setState(function(e,t){var n=t.shouldStart,i=t.onStart,o=t.onMove,r=e.target,a=e.startXY,s=e.moveXY,l=e.moveT,c=(new Date).getTime(),d=c-l;if(!a)return null;var u={translation:{x:h.pageX-a.x,y:h.pageY-a.y},velocity:{x:(h.pageX-s.x)/d,y:(h.pageY-s.y)/d},moveXY:{x:h.pageX,y:h.pageY},moveT:c};return r?o({target:r,translation:u.translation,velocity:u.velocity}):0<Math.sqrt(u.translation.x*u.translation.x+u.translation.y*u.translation.y)&&("function"==typeof n?n({target:h.target,translation:u.translation,velocity:u.velocity}):n)&&(u.target=h.target,u.startXY={x:h.pageX,y:h.pageY},u.translation={x:0,y:0},i({target:u.target,translation:u.translation,velocity:u.velocity})),u})},t._end=function(){this.setState(function(e,t){var n=e.target;return n&&t.onEnd({target:n,translation:e.translation,velocity:e.velocity}),{target:null,translation:null,velocity:null,startXY:null,moveXY:null,moveT:null}})},t._cancel=function(){this.setState(function(e,t){var n=e.target;return n&&t.onCancel({target:n,translation:e.translation,velocity:e.velocity}),{target:null,translation:null,velocity:null,startXY:null,moveXY:null,moveT:null}})},t._addMousePanListener=function(){var e=document.documentElement;e.addEventListener("mousemove",this._onMouseMove,!1),e.addEventListener("mouseup",this._onMouseUp,!1)},t._removeMousePanListener=function(){var e=document.documentElement;e.removeEventListener("mousemove",this._onMouseMove,!1),e.removeEventListener("mouseup",this._onMouseUp,!1)},t.render=function(){var e=this.props,t=e.enabled,n=e.style,i=u(e,["enabled","shouldStart","onStart","onMove","onEnd","onCancel","style"]),o=h.create(m({touchAction:t?"none":"auto"},n));return f.createElement("div",m({},i,{ref:this.elemRef,style:o,onTouchStart:this._onTouchStart,onTouchEnd:this._onTouchEnd,onTouchMove:this._onTouchMove,onTouchCancel:this._onTouchCancel,onMouseDown:this._onMouseDown,onClick:this._onClick}))},e}(f.PureComponent);g.defaultProps={enabled:!0,shouldStart:!0,onStart:function(){},onMove:function(){},onEnd:function(){},onCancel:function(){}};var c=(t="undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{}).requestAnimationFrame||t.webkitRequestAnimationFrame||t.mozRequestAnimationFrame||t.msRequestAnimationFrame||t.setTimeout&&function(e){return t.setTimeout(e,20)}||function(){},d=t.cancelAnimationFrame||t.webkitCancelAnimationFrame||t.mozCancelAnimationFrame||t.clearTimeout||function(){};function v(e,t,n){return n?t?t*Math.round(e/t):0:{x:v(e.x,t.width,"x"),y:v(e.y,t.height,"y")}}function p(e,t){var n=t.x,i=t.y,o=Math.sqrt(n*n+i*i);return{x:e*(n/o),y:e*(i/o)}}var n=function(n){function e(e){var t;return(t=n.call(this,e)||this)._onDragStart=function(e){var r=e.translation,a=e.velocity;t.setState(function(e,t){var n=e.contentOffset,i=t.directionalLockEnabled?Math.abs(a.y)<Math.abs(a.x)?"x":"y":"xy",o={x:n.x+("y"===i?0:r.x),y:n.y+("x"===i?0:r.y)};return{contentOffset:o,contentVelocity:{x:"y"===i?0:a.x,y:"x"===i?0:a.y},dragging:!0,dragStartOffset:o,dragDirection:i,decelerating:!1,decelerationEndOffset:null,decelerationRate:0}})},t._onDragMove=function(e){var i=e.translation,o=e.velocity;t.setState(function(e){var t=e.dragStartOffset,n=e.dragDirection;return{contentOffset:{x:t.x+("y"===n?0:i.x),y:t.y+("x"===n?0:i.y)},contentVelocity:{x:"y"===n?0:o.x,y:"x"===n?0:o.y}}})},t._onDragEnd=function(e){var d=e.translation,u=e.velocity;t.setState(function(e,t){var n=e.dragStartOffset,i=e.dragDirection,o=e.size,r=t.pagingEnabled,a={x:n.x+("y"===i?0:d.x),y:n.y+("x"===i?0:d.y)},s={x:"y"===i?0:u.x,y:"x"===i?0:u.y},l=r?.02:.002;r&&(s=function e(t,n,i,o){if(o){if(!i)return 0;var r=i<0?-1:1;return r*Math.min(Math.abs(t),Math.sqrt(r*i*n))}return i=p(i,t),{x:e(t.x,n.width,i.x,"x"),y:e(t.y,n.height,i.y,"y")}}(s,o,l));var c=function e(t,n,i,o){return o?i?t+.5*n*(n/i):t:(i=p(i,n),{x:e(t.x,n.x,i.x,"x"),y:e(t.y,n.y,i.y,"y")})}(a,s,l);return r&&(c=v(c,o)),{contentOffset:a,contentVelocity:s,dragging:!1,dragStartOffset:null,dragDirection:"xy",decelerating:!0,decelerationEndOffset:c,decelerationRate:l}})},t._onDragCancel=function(e){var r=e.translation,a=e.velocity;t.setState(function(e,t){var n=e.dragStartOffset,i={x:n.x+r.x,y:n.y+r.y},o=n;return t.pagingEnabled&&(o=v(o,e.size)),{contentOffset:i,contentVelocity:a,dragging:!1,dragStartOffset:null,dragDirection:"xy",decelerating:!0,decelerationEndOffset:o,decelerationRate:.01}})},t.state={size:{width:e.width,height:e.height},contentSize:{width:e.contentWidth,height:e.contentHeight},contentOffset:{x:0,y:0},contentVelocity:{x:0,y:0},prevContentOffset:null,dragging:!1,decelerating:!1,dragStartOffset:null,dragDirection:"xy",decelerationEndOffset:null,decelerationRate:0},t.boundingRef=f.createRef(),t.contentRef=f.createRef(),t.setContentSize=t.setContentSize.bind(function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)),t}r(e,n),e.getDerivedStateFromProps=function(e,t){var n=t.size,i=t.contentSize,o=t.contentOffset,r=t.contentVelocity,a=t.dragging,s=t.decelerating,l=t.decelerationEndOffset,c={};if(t.prevContentOffset!==o){var d=function e(t,n,i,o){return o?Math.max(Math.min(n-i,0),Math.min(t,0)):{x:e(t.x,n.width,i.width,"x"),y:e(t.y,n.height,i.height,"y")}}(o,n,i),u=r,h=s,f=l;d.x===o.x&&d.y===o.y?d=o:(u={x:d.x!==o.x?0:u.x,y:d.y!==o.y?0:u.y},f&&(f={x:d.x!==o.x?d.x:f.x,y:d.y!==o.y?d.y:f.y})),f&&d.x===f.x&&d.y===f.y&&0===u.x&&0===u.y&&(h=!1,f=null,c.decelerationRate=0),c.prevContentOffset=o,c.contentOffset=d,u!==r&&(c.contentVelocity=u),h!==s&&(c.decelerating=h),f!==l&&(c.decelerationEndOffset=f),e.onScroll({contentOffset:d,contentVelocity:u,decelerating:h,dragging:a,size:n,contentSize:i})}return c};var t=e.prototype;return t.componentDidUpdate=function(e,t){var n=this,i=this.props,o=i.width,r=i.height,a=i.contentWidth,s=i.contentHeight;if(e.width===o&&e.height===r||this.setState(function(e){return{size:{width:o,height:r},contentOffset:m({},e.contentOffset)}}),e.contentWidth===a&&e.contentHeight===s||this.setState(function(e){return{contentSize:{width:a,height:s},contentOffset:m({},e.contentOffset)}}),t.contentOffset!==this.state.contentOffset&&this.state.decelerationEndOffset){var l=(new Date).getTime();this._deceleratingTimer&&d(this._deceleratingTimer),this._deceleratingTimer=c(function(){n._deceleratingTimer=void 0,n._decelerate((new Date).getTime()-l)})}},t.componentWillUnmount=function(){this._deceleratingTimer&&(d(this._deceleratingTimer),this._deceleratingTimer=void 0)},t.getSize=function(){return this.state.size},t.getContentSize=function(){return this.state.contentSize},t.getContentOffset=function(){return this.state.contentOffset},t.isDragging=function(){return this.state.dragging},t.isDecelerating=function(){return this.state.decelerating},t.setContentSize=function(t){this.setState(function(e){return{contentSize:t,contentOffset:m({},e.contentOffset)}})},t.scrollTo=function(e){var i=e.offset,o=e.animated;this.setState(function(e,t){var n=e.contentOffset;return e.dragging?null:o?(t.pagingEnabled&&(i=v(i,e.size)),{contentOffset:m({},n),decelerating:!0,decelerationEndOffset:i,decelerationRate:.01}):{contentOffset:i,contentVelocity:{x:0,y:0},decelerating:!1,decelerationEndOffset:null,decelerationRate:0}})},t.scrollToRect=function(e){var t=e.rect,n=e.align,i=e.animated,o=this.state,r=function e(t,n,i,o,r,a){if(a){var s;if("auto"===i){var l=r<n?-1:1;s=l*Math.max(0,Math.min(l*(t+o),l*(r-n)))-t}else"start"===i?i=0:"center"===i?i=.5:"end"===i&&(i=1),("number"!=typeof i||isNaN(i))&&(i=.5),s=i*(r-n)-t;return s}return"object"!=typeof i&&(i={x:i,y:i}),{x:e(t.x,n.width,i.x,o.x,r.width,"x"),y:e(t.y,n.height,i.y,o.y,r.height,"y")}}({x:t.x,y:t.y},{width:t.width,height:t.height},void 0===n?"auto":n,o.contentOffset,o.size);this.scrollTo({offset:r,animated:i})},t._decelerate=function(i){this.setState(function(e){var t=e.decelerationEndOffset;if(!t)return null;var n=function e(t,n,i,o,r,a){if(a){if(!n)return{offset:r,velocity:0};var s=(n<0?-1:1)*Math.sqrt(.5*o*o+n*(r-i)),l=n?(s-o)/n:0;return(n?(2*s-o)/n:0)<t?{offset:r,velocity:0}:{offset:i+.5*(o+s)*l-.5*(2*s-n*Math.abs(l-t))*(l-t),velocity:s-n*Math.abs(l-t)}}var c=e(t,(n=p(n,{x:r.x-i.x,y:r.y-i.y})).x,i.x,o.x,r.x,"x"),d=e(t,n.y,i.y,o.y,r.y,"y");return{offset:{x:c.offset,y:d.offset},velocity:{x:c.velocity,y:d.velocity}}}(i,e.decelerationRate,e.contentOffset,e.contentVelocity,t);return{contentOffset:n.offset,contentVelocity:n.velocity}})},t.render=function(){var e=this.props,t=e.scrollEnabled,n=e.style,i=e.children,o=u(e,["width","height","contentWidth","contentHeight","scrollEnabled","pagingEnabled","directionalLockEnabled","style","children"]),r=this.state,a=r.size,s=r.contentSize,l=r.contentOffset,c=h.create(m({overflow:"hidden",position:"relative",boxSizing:"border-box",width:a.width,height:a.height},n)),d=h.create({position:"relative",boxSizing:"border-box",width:s.width,height:s.height,transformTranslate:[l.x,l.y]});return f.createElement(g,m({},o,{ref:this.boundingRef,style:c,enabled:t,onStart:this._onDragStart,onMove:this._onDragMove,onEnd:this._onDragEnd,onCancel:this._onDragCancel}),f.createElement("div",{ref:this.contentRef,style:d},"function"==typeof i?i(this):i))},e}(f.PureComponent);function s(e){var t=window.getComputedStyle(e)||{},n=e.offsetWidth||0,i=e.offsetHeight||0;return t.paddingLeft&&(n-=parseInt(t.paddingLeft,10)),t.paddingRight&&(n-=parseInt(t.paddingRight,10)),t.borderLeftWidth&&(n-=parseInt(t.borderLeftWidth,10)),t.borderRightWidth&&(n-=parseInt(t.borderRightWidth,10)),t.paddingTop&&(i-=parseInt(t.paddingTop,10)),t.paddingBottom&&(i-=parseInt(t.paddingBottom,10)),t.borderTopWidth&&(i-=parseInt(t.borderTopWidth,10)),t.borderBottomWidth&&(i-=parseInt(t.borderBottomWidth,10)),{width:n,height:i}}function i(e,t){return e(t={exports:{}},t.exports),t.exports}n.defaultProps={children:null,width:0,height:0,contentWidth:0,contentHeight:0,scrollEnabled:!0,pagingEnabled:!1,directionalLockEnabled:!1,onScroll:function(){}};var o=i(function(e){(e.exports={}).forEach=function(e,t){for(var n=0;n<e.length;n++){var i=t(e[n]);if(i)return i}}}),x=i(function(e){var t=e.exports={};t.isIE=function(e){return(-1!=(t=navigator.userAgent.toLowerCase()).indexOf("msie")||-1!=t.indexOf("trident")||-1!=t.indexOf(" edge/"))&&(!e||e===function(){for(var e=3,t=document.createElement("div"),n=t.getElementsByTagName("i");t.innerHTML="\x3c!--[if gt IE "+ ++e+"]><i></i><![endif]--\x3e",n[0];);return 4<e?e:void 0}());var t},t.isLegacyOpera=function(){return!!window.opera}}),y=i(function(e){(e.exports={}).getOption=function(e,t,n){var i=e[t];return null!=i||void 0===n?i:n}}),b=function(e){var t=(e=e||{}).reporter,n=y.getOption(e,"async",!0),i=y.getOption(e,"auto",!0);i&&!n&&(t&&t.warn("Invalid options combination. auto=true and async=false is invalid. Setting async=true."),n=!0);var o,r=w(),a=!1;function s(){for(a=!0;r.size();){var e=r;r=w(),e.process()}a=!1}function l(){o=setTimeout(s,0)}return{add:function(e,t){!a&&i&&n&&0===r.size()&&l(),r.add(e,t)},force:function(e){a||(void 0===e&&(e=n),o&&(clearTimeout(o),o=null),e?l():s())}}};function w(){var i={},n=0,o=0,r=0;return{add:function(e,t){t||(t=e,e=0),o<e?o=e:e<r&&(r=e),i[e]||(i[e]=[]),i[e].push(t),n++},process:function(){for(var e=r;e<=o;e++)for(var t=i[e],n=0;n<t.length;n++)(0,t[n])()},size:function(){return n}}}var a="_erd";function l(e){return e[a]}var S={initState:function(e){return e[a]={},l(e)},getState:l,cleanState:function(e){delete e[a]}},M=o.forEach,z=function(e){var w=(e=e||{}).reporter,S=e.batchProcessor,z=e.stateHandler.getState,E=e.idHandler;if(!S)throw Error("Missing required dependency: batchProcessor");if(!w)throw Error("Missing required dependency: reporter.");var _=function(){var e=document.createElement("div");e.style.cssText="position: absolute; width: 1000px; height: 1000px; visibility: hidden; margin: 0; padding: 0;";var t=document.createElement("div");t.style.cssText="position: absolute; width: 500px; height: 500px; overflow: scroll; visibility: none; top: -1500px; left: -1500px; visibility: hidden; margin: 0; padding: 0;",t.appendChild(e),document.body.insertBefore(t,document.body.firstChild);var n=500-t.clientWidth,i=500-t.clientHeight;return document.body.removeChild(t),{width:n,height:i}}(),T="erd_scroll_detection_container";function O(e,t,n){if(e.addEventListener)e.addEventListener(t,n);else{if(!e.attachEvent)return w.error("[scroll] Don't know how to add event listeners.");e.attachEvent("on"+t,n)}}function n(e,t,n){if(e.removeEventListener)e.removeEventListener(t,n);else{if(!e.detachEvent)return w.error("[scroll] Don't know how to remove event listeners.");e.detachEvent("on"+t,n)}}function C(e){return z(e).container.childNodes[0].childNodes[0].childNodes[0]}function D(e){return z(e).container.childNodes[0].childNodes[0].childNodes[1]}return function(i,e){if(!document.getElementById(i)){var t=e+"_animation",n=e+"_animation_active",o="/* Created by the element-resize-detector library. */\n";o+="."+e+" > div::-webkit-scrollbar { display: none; }\n\n",o+="."+n+" { -webkit-animation-duration: 0.1s; animation-duration: 0.1s; -webkit-animation-name: "+t+"; animation-name: "+t+"; }\n",o+="@-webkit-keyframes "+t+" { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }\n",function(e,t){t=t||function(e){document.head.appendChild(e)};var n=document.createElement("style");n.innerHTML=e,n.id=i,t(n)}(o+="@keyframes "+t+" { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }")}}("erd_scroll_detection_scrollbar_style",T),{makeDetectable:function(a,p,e){function y(){if(a.debug){var e=Array.prototype.slice.call(arguments);if(e.unshift(E.get(p),"Scroll: "),w.log.apply)w.log.apply(null,e);else for(var t=0;t<e.length;t++)w.log(e[t])}}function s(e){var t=z(e).container.childNodes[0],n=window.getComputedStyle(t);return!n.width||-1==n.width.indexOf("px")}function t(){var e=window.getComputedStyle(p),t={};return t.position=e.position,t.width=p.offsetWidth,t.height=p.offsetHeight,t.top=e.top,t.right=e.right,t.bottom=e.bottom,t.left=e.left,t.widthCSS=e.width,t.heightCSS=e.height,t}function n(){if(y("storeStyle invoked."),z(p)){var e=t();z(p).style=e}else y("Aborting because element has been uninstalled")}function l(e,t,n){z(e).lastWidth=t,z(e).lastHeight=n}function c(){return 2*_.width+1}function d(){return 2*_.height+1}function u(e){return e+10+c()}function h(e){return e+10+d()}function f(e,t,n){var i=C(e),o=D(e),r=u(t),a=h(n),s=2*t+c(),l=2*n+d();i.scrollLeft=r,i.scrollTop=a,o.scrollLeft=s,o.scrollTop=l}function m(){var e=z(p).container;if(!e){(e=document.createElement("div")).className=T,e.style.cssText="visibility: hidden; display: inline; width: 0px; height: 0px; z-index: -1; overflow: hidden; margin: 0; padding: 0;",(z(p).container=e).className+=" "+T+"_animation_active",p.appendChild(e);var t=function(){z(p).onRendered&&z(p).onRendered()};O(e,"animationstart",t),z(p).onAnimationStart=t}return e}function i(){if(y("Injecting elements"),z(p)){!function(){var e=z(p).style;if("static"===e.position){p.style.position="relative";var t=function(e,t,n,i){var o=n[i];"auto"!==o&&"0"!==o.replace(/[^-\d\.]/g,"")&&(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(w,p,e,"top"),t(w,p,e,"right"),t(w,p,e,"bottom"),t(w,p,e,"left")}}();var e=z(p).container;e||(e=m());var t,n,i,o,r=_.width,a=_.height,s="position: absolute; flex: none; overflow: hidden; z-index: -1; visibility: hidden; left: "+(t=(t=-(1+r))?t+"px":"0")+"; top: "+(n=(n=-(1+a))?n+"px":"0")+"; right: "+(o=(o=-r)?o+"px":"0")+"; bottom: "+(i=(i=-a)?i+"px":"0")+";",l=document.createElement("div"),c=document.createElement("div"),d=document.createElement("div"),u=document.createElement("div"),h=document.createElement("div"),f=document.createElement("div");l.dir="ltr",l.style.cssText="position: absolute; flex: none; overflow: hidden; z-index: -1; visibility: hidden; width: 100%; height: 100%; left: 0px; top: 0px;",c.className=l.className=T,c.style.cssText=s,d.style.cssText="position: absolute; flex: none; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;",u.style.cssText="position: absolute; left: 0; top: 0;",h.style.cssText="position: absolute; flex: none; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;",f.style.cssText="position: absolute; width: 200%; height: 200%;",d.appendChild(u),h.appendChild(f),c.appendChild(d),c.appendChild(h),l.appendChild(c),e.appendChild(l),O(d,"scroll",g),O(h,"scroll",v),z(p).onExpandScroll=g,z(p).onShrinkScroll=v}else y("Aborting because element has been uninstalled");function g(){z(p).onExpand&&z(p).onExpand()}function v(){z(p).onShrink&&z(p).onShrink()}}function o(){function i(e,t,n){var i=C(e).childNodes[0],o=u(t),r=h(n);i.style.width=o+"px",i.style.height=r+"px"}function n(e){var t=p.offsetWidth,n=p.offsetHeight;y("Storing current size",t,n),l(p,t,n),S.add(0,function(){z(p)?o()?(a.debug&&(p.offsetWidth===t&&p.offsetHeight===n||w.warn(E.get(p),"Scroll: Size changed before updating detector elements.")),i(p,t,n)):y("Aborting because element container has not been initialized"):y("Aborting because element has been uninstalled")}),S.add(1,function(){z(p)?o()?f(p,t,n):y("Aborting because element container has not been initialized"):y("Aborting because element has been uninstalled")}),e&&S.add(2,function(){z(p)?o()?e():y("Aborting because element container has not been initialized"):y("Aborting because element has been uninstalled")})}function o(){return!!z(p).container}function r(){y("notifyListenersIfNeeded invoked");var e=z(p);return void 0===z(p).lastNotifiedWidth&&e.lastWidth===e.startSize.width&&e.lastHeight===e.startSize.height?y("Not notifying: Size is the same as the start size, and there has been no notification yet."):e.lastWidth===e.lastNotifiedWidth&&e.lastHeight===e.lastNotifiedHeight?y("Not notifying: Size already notified"):(y("Current size not notified, notifying..."),e.lastNotifiedWidth=e.lastWidth,e.lastNotifiedHeight=e.lastHeight,void M(z(p).listeners,function(e){e(p)}))}function e(){if(y("Scroll detected."),s(p))y("Scroll event fired while unrendered. Ignoring...");else{var e=p.offsetWidth,t=p.offsetHeight;e!==z(p).lastWidth||t!==z(p).lastHeight?(y("Element size changed."),n(r)):y("Element size has not changed ("+e+"x"+t+").")}}if(y("registerListenersAndPositionElements invoked."),z(p)){z(p).onRendered=function(){if(y("startanimation triggered."),s(p))y("Ignoring since element is still unrendered...");else{y("Element rendered.");var e=C(p),t=D(p);0!==e.scrollLeft&&0!==e.scrollTop&&0!==t.scrollLeft&&0!==t.scrollTop||(y("Scrollbars out of sync. Updating detector elements..."),n(r))}},z(p).onExpand=e,z(p).onShrink=e;var t=z(p).style;i(p,t.width,t.height)}else y("Aborting because element has been uninstalled")}function r(){if(y("finalizeDomMutation invoked."),z(p)){var e=z(p).style;l(p,e.width,e.height),f(p,e.width,e.height)}else y("Aborting because element has been uninstalled")}function g(){e(p)}function v(){var e;y("Installing..."),z(p).listeners=[],e=t(),z(p).startSize={width:e.width,height:e.height},y("Element start size",z(p).startSize),S.add(0,n),S.add(1,i),S.add(2,o),S.add(3,r),S.add(4,g)}var x,b;e||(e=p,p=a,a=null),a=a||{},y("Making detectable..."),(b=x=p)!==b.ownerDocument.body&&!b.ownerDocument.body.contains(b)||null===window.getComputedStyle(x)?(y("Element is detached"),m(),y("Waiting until element is attached..."),z(p).onRendered=function(){y("Element is now attached"),v()}):v()},addListener:function(e,t){if(!z(e).listeners.push)throw Error("Cannot add listener to an element that is not detectable.");z(e).listeners.push(t)},uninstall:function(e){var t=z(e);t&&(t.onExpandScroll&&n(C(e),"scroll",t.onExpandScroll),t.onShrinkScroll&&n(D(e),"scroll",t.onShrinkScroll),t.onAnimationStart&&n(t.container,"animationstart",t.onAnimationStart),t.container&&e.removeChild(t.container))}}},E=o.forEach;function _(e){return Array.isArray(e)||void 0!==e.length}function T(e){if(Array.isArray(e))return e;var t=[];return E(e,function(e){t.push(e)}),t}function O(e){return e&&1===e.nodeType}function C(e,t,n){var i=e[t];return null==i&&void 0!==n?n:i}var D=function(t){var u,e,i,o,n;if((t=t||{}).idHandler)u={get:function(e){return t.idHandler.get(e,!0)},set:t.idHandler.set};else{var r=(n=1,{generate:function(){return n++}}),a=(i=(e={idGenerator:r,stateHandler:S}).idGenerator,o=e.stateHandler.getState,{get:function(e){var t=o(e);return t&&void 0!==t.id?t.id:null},set:function(e){var t=o(e);if(!t)throw Error("setId required the element to have a resize detection state.");var n=i.generate();return t.id=n}});u=a}var h=t.reporter;h||(h=function(e){function t(){}var n={log:t,warn:t,error:t};if(!e&&window.console){var i=function(e,n){e[n]=function(){var e=console[n];if(e.apply)e.apply(console,arguments);else for(var t=0;t<arguments.length;t++)e(arguments[t])}};i(n,"log"),i(n,"warn"),i(n,"error")}return n}(!1===h));var s=C(t,"batchProcessor",b({reporter:h})),f={};f.callOnAdd=!!C(t,"callOnAdd",!0),f.debug=!!C(t,"debug",!1);var l,g,v=function(i){var o={};function r(e){var t=i.get(e);return void 0===t?[]:o[t]||[]}return{get:r,add:function(e,t){var n=i.get(e);o[n]||(o[n]=[]),o[n].push(t)},removeListener:function(e,t){for(var n=r(e),i=0,o=n.length;i<o;++i)if(n[i]===t){n.splice(i,1);break}},removeAllListeners:function(e){var t=r(e);t&&(t.length=0)}}}(u),p=(l={stateHandler:S}.stateHandler.getState,{isDetectable:function(e){var t=l(e);return t&&!!t.isDetectable},markAsDetectable:function(e){l(e).isDetectable=!0},isBusy:function(e){return!!l(e).busy},markBusy:function(e,t){l(e).busy=!!t}}),c=C(t,"strategy","object"),d={reporter:h,batchProcessor:s,stateHandler:S,idHandler:u};if("scroll"===c&&(x.isLegacyOpera()?(h.warn("Scroll strategy is not supported on legacy Opera. Changing to object strategy."),c="object"):x.isIE(9)&&(h.warn("Scroll strategy is not supported on IE9. Changing to object strategy."),c="object")),"scroll"===c)g=z(d);else{if("object"!==c)throw Error("Invalid strategy name: "+c);g=function(e){var s=(e=e||{}).reporter,l=e.batchProcessor,c=e.stateHandler.getState;if(!s)throw Error("Missing required dependency: reporter.");function i(e){return c(e).object}return{makeDetectable:function(e,t,n){n||(n=t,t=e,e=null),e=e||{},x.isIE(8)?n(t):function(n,i){var o=!1,r=window.getComputedStyle(n),e=n.offsetWidth,t=n.offsetHeight;function a(){function e(){if("static"===r.position){n.style.position="relative";var e=function(e,t,n,i){var o=n[i];"auto"!==o&&"0"!==o.replace(/[^-\d\.]/g,"")&&(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)};e(s,n,r,"top"),e(s,n,r,"right"),e(s,n,r,"bottom"),e(s,n,r,"left")}}""!==r.position&&(e(),o=!0);var t=document.createElement("object");t.style.cssText="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;",t.tabIndex=-1,t.type="text/html",t.setAttribute("aria-hidden","true"),t.onload=function(){o||e(),function e(t,n){t.contentDocument?n(t.contentDocument):setTimeout(function(){e(t,n)},100)}(this,function(e){i(n)})},x.isIE()||(t.data="about:blank"),n.appendChild(t),c(n).object=t,x.isIE()&&(t.data="about:blank")}c(n).startSize={width:e,height:t},l?l.add(a):a()}(t,n)},addListener:function(e,t){if(!i(e))throw Error("Element is not detectable by this strategy.");function n(){t(e)}x.isIE(8)?(c(e).object={proxy:n},e.attachEvent("onresize",n)):i(e).contentDocument.defaultView.addEventListener("resize",n)},uninstall:function(e){x.isIE(8)?e.detachEvent("onresize",c(e).object.proxy):e.removeChild(i(e)),delete c(e).object}}}(d)}var y={};return{listenTo:function(e,i,o){function r(t){var e=v.get(t);E(e,function(e){e(t)})}function a(e,t,n){v.add(t,n),e&&n(t)}if(o||(o=i,i=e,e={}),!i)throw Error("At least one element required.");if(!o)throw Error("Listener required.");if(O(i))i=[i];else{if(!_(i))return h.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");i=T(i)}var s=0,l=C(e,"callOnAdd",f.callOnAdd),c=C(e,"onReady",function(){}),d=C(e,"debug",f.debug);E(i,function(e){S.getState(e)||(S.initState(e),u.set(e));var n=u.get(e);if(d&&h.log("Attaching listener to element",n,e),!p.isDetectable(e))return d&&h.log(n,"Not detectable."),p.isBusy(e)?(d&&h.log(n,"System busy making it detectable"),a(l,e,o),y[n]=y[n]||[],void y[n].push(function(){++s===i.length&&c()})):(d&&h.log(n,"Making detectable..."),p.markBusy(e,!0),g.makeDetectable({debug:d},e,function(e){if(d&&h.log(n,"onElementDetectable"),S.getState(e)){p.markAsDetectable(e),p.markBusy(e,!1),g.addListener(e,r),a(l,e,o);var t=S.getState(e);t&&t.startSize&&(t.startSize.width===e.offsetWidth&&t.startSize.height===e.offsetHeight||r(e)),y[n]&&E(y[n],function(e){e()})}else d&&h.log(n,"Element uninstalled before being detectable.");delete y[n],++s===i.length&&c()}));d&&h.log(n,"Already detecable, adding listener."),a(l,e,o),s++}),s===i.length&&c()},removeListener:v.removeListener,removeAllListeners:v.removeAllListeners,uninstall:function(e){if(!e)return h.error("At least one element is required.");if(O(e))e=[e];else{if(!_(e))return h.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");e=T(e)}E(e,function(e){v.removeAllListeners(e),g.uninstall(e),S.cleanState(e)})}}}({strategy:"scroll"}),L=function(o){function e(){for(var e,t=arguments.length,n=Array(t),i=0;i<t;i++)n[i]=arguments[i];return(e=o.call.apply(o,[this].concat(n))||this).resizeRef=f.createRef(),e}r(e,o);var t=e.prototype;return t.componentDidMount=function(){this._calculateSize()},t.componentDidUpdate=function(e){e.width===this.props.width&&e.height===this.props.height||this._calculateSize()},t.componentWillUnmount=function(){this._resizeNode&&(D.uninstall(this._resizeNode),this._resizeNode=void 0)},t._calculateSize=function(){var e,t=this,n=this.props,i=n.width,o=n.height,r=n.onResize;if(i<0||o<0){if(!this._resizeNode){var a=this.resizeRef.current;if(!a)return;return void D.listenTo(this._resizeNode=a,function(){return t._calculateSize()})}e=s(this._resizeNode)}else this._resizeNode&&(D.uninstall(this._resizeNode),this._resizeNode=void 0),e={width:i,height:o};r(e)},t.render=function(){var e=this.props,t=e.width,n=e.height,i=e.children;return f.createElement("div",{ref:this.resizeRef,style:{position:"absolute",width:t<0?"auto":t,height:n<0?"auto":n}},"function"==typeof i?i(this):i)},e}(f.PureComponent);L.defaultProps={width:-1,height:-1,onResize:function(){}};var k=function(o){function e(){for(var e,t=arguments.length,n=Array(t),i=0;i<t;i++)n[i]=arguments[i];return(e=o.call.apply(o,[this].concat(n))||this).state={size:{width:0,height:0},widthDict:{},heightDict:{},xList:[],yList:[]},e}r(e,o),e.getDerivedStateFromProps=function(e,t){var n=e.columnWidth,i=e.rowHeight,o=e.columnCount,r=e.rowCount,a=e.rowHeightHash,s=e.columnWidthHash,l=e.onResize,c=t.xList,d=t.yList,u=t.widthDict,h=t.heightDict,f=t.size,g={},v=m({},f),p=R(r,i,a,d,h);p.originList&&(g.yList=p.originList),p.sizeDict&&(g.heightDict=p.sizeDict),v.height=p.size;var y=R(o,n,s,c,u);return y.originList&&(g.xList=y.originList),y.sizeDict&&(g.widthDict=y.sizeDict),v.width=y.size,v.width===f.width&&v.height===f.height||(l(v),g.size=v),g};var t=e.prototype;return t.getCellRect=function(e){var t=e.rowIndex,n=e.columnIndex,i=this.state,o=i.xList,r=i.yList,a=o[n-1]||0,s=r[t-1]||0;return{x:a,y:s,width:(o[n]||0)-a,height:(r[t]||0)-s}},t.render=function(){var e=this.props,t=e.visibleRect,n=e.renderCell,i=e.cellKey,o=e.children;if("function"==typeof o)return o(this);for(var r=this.state,a=r.xList,s=r.yList,l=[],c=0;c<s.length;c++)for(var d=0;d<a.length;d++){var u=this.getCellRect({rowIndex:c,columnIndex:d});if(A({x:u.x,y:u.y},{width:u.width,height:u.height},{x:t.x,y:t.y},{width:t.width,height:t.height})){var h={position:"absolute",left:u.x,top:u.y,width:u.width,height:u.width};l.push(f.createElement("div",{key:i({columnIndex:d,rowIndex:c}),style:h},n({columnIndex:d,rowIndex:c})))}}return f.createElement(f.Fragment,null,l)},e}(f.PureComponent);function A(e,t,n,i,o){if(o){var r=e-n;return-.25*i<r+t&&r<1.25*i}return A(e.x,t.width,n.x,i.width,"x")&&A(e.y,t.height,n.y,i.height,"y")}function R(e,t,n,i,o){for(var r,a=i.length!==e,s=[],l=0,c={},d=0;d<e;d++){var u=void 0;if("number"==typeof t)u=t;else{var h=n({index:d});void 0===(u=o[h])&&(u=t({index:d}),r||(r=m({},o)),r[h]=u)}i[d]!==(l+=u)&&(a=!0),s[d]=l}return a&&(c.originList=s),r&&(c.sizeDict=r),c.size=l,c}k.defaultProps={rowCount:0,columnCount:0,rowHeight:0,columnWidth:0,rowHeightHash:function(e){return""+e.rowIndex},columnWidthHash:function(e){return""+e.columnIndex},cellKey:function(e){return e.rowIndex+"-"+e.columnIndex},renderCell:function(){return null},visibleRect:{x:0,y:0,width:0,height:0},onResize:function(){}};var H=function(o){function e(){for(var e,t=arguments.length,n=Array(t),i=0;i<t;i++)n[i]=arguments[i];return(e=o.call.apply(o,[this].concat(n))||this).state={size:{width:0,height:0}},e.resizeRef=f.createRef(),e}r(e,o);var t=e.prototype;return t.componentDidMount=function(){this._calculateSize()},t.componentDidUpdate=function(e){e.width===this.props.width&&e.height===this.props.height||this._calculateSize()},t.componentWillUnmount=function(){this._resizeNode&&(D.uninstall(this._resizeNode),this._resizeNode=void 0)},t._calculateSize=function(){var e,t=this,n=this.props,i=n.width,o=n.height;if(i<0||o<0){if(!this._resizeNode){var r=this.resizeRef.current;if(!r)return;return void D.listenTo(this._resizeNode=r,function(){return t._calculateSize()})}e=s(this._resizeNode)}else this._resizeNode&&(D.uninstall(this._resizeNode),this._resizeNode=void 0),e={width:i,height:o};this.setState({size:e})},t.render=function(){var e=this.props,t=e.width,n=e.height;return f.createElement("div",{ref:this.resizeRef,style:{width:t<0?"100%":t,height:n<0?"100%":n}},(0,e.children)(this.state.size))},e}(f.Component);H.defaultProps={children:function(){return null},width:-1,height:-1},e.Pad=n,e.Pannable=g,e.GeneralContent=L,e.GridContent=k,e.AutoResizing=H,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e((t=t||self).ReactPannable={},t.React)}(this,function(t,u){"use strict";function h(t,e){if(null==t)return{};var n,i,o={},r=Object.keys(t);for(i=0;i<r.length;i++)e.indexOf(n=r[i])<0&&(o[n]=t[n]);return o}function f(){return(f=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t}).apply(this,arguments)}function r(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}u=u&&u.hasOwnProperty("default")?u.default:u;var e,g={create:function(t){var e,n=t.transformTranslate;return f({},h(t,["transformTranslate"]),(e=n)?{transform:"translate3d("+e[0]+"px, "+e[1]+"px, 0)",WebkitTransform:"translate3d("+e[0]+"px, "+e[1]+"px, 0)",msTransform:"translate("+e[0]+"px, "+e[1]+"px)"}:null)}},p=function(i){function t(){for(var o,t=arguments.length,e=Array(t),n=0;n<t;n++)e[n]=arguments[n];return(o=i.call.apply(i,[this].concat(e))||this).state={target:null,translation:null,velocity:null,startXY:null,moveXY:null,moveT:null},o.elemRef=u.createRef(),o._onTouchStart=function(t){var e=o.props,n=e.onTouchStart;t.touches&&1===t.touches.length&&e.enabled&&o._track(t.touches[0]),n&&n(t)},o._onTouchMove=function(t){var e=o.props.onTouchMove;t.touches&&1===t.touches.length&&o._move(t.touches[0]),e&&e(t)},o._onTouchEnd=function(t){var e=o.props.onTouchEnd;t.changedTouches&&1===t.changedTouches.length&&o._end(),e&&e(t)},o._onTouchCancel=function(t){var e=o.props.onTouchCancel;t.changedTouches&&1===t.changedTouches.length&&o._end(),e&&e(t)},o._onMouseDown=function(t){var e=o.props,n=e.enabled,i=e.onMouseDown;(o._shouldPreventClick=n)&&(o._addMousePanListener(),o._track(t)),i&&i(t)},o._onMouseMove=function(t){t.preventDefault(),o._move(t)},o._onMouseUp=function(t){t.preventDefault(),o._removeMousePanListener(),o._end()},o._onClick=function(t){var e=o.props.onClick;o._shouldPreventClick&&t.preventDefault(),o._shouldPreventClick=!1,e&&e(t)},o}r(t,i);var e=t.prototype;return e.componentDidUpdate=function(t){var e=this.props.enabled;t.enabled===e||e||this._cancel()},e.componentWillUnmount=function(){this._removeMousePanListener()},e._track=function(t){this.setState({startXY:{x:t.pageX,y:t.pageY},moveXY:{x:t.pageX,y:t.pageY},moveT:(new Date).getTime()})},e._move=function(h){h={target:h.target,pageX:h.pageX,pageY:h.pageY},this.setState(function(t,e){var n=e.shouldStart,i=e.onStart,o=e.onMove,r=t.target,a=t.startXY,s=t.moveXY,l=t.moveT,c=(new Date).getTime(),d=c-l;if(!a)return null;var u={translation:{x:h.pageX-a.x,y:h.pageY-a.y},velocity:{x:(h.pageX-s.x)/d,y:(h.pageY-s.y)/d},moveXY:{x:h.pageX,y:h.pageY},moveT:c};return r?o({target:r,translation:u.translation,velocity:u.velocity}):0<Math.sqrt(u.translation.x*u.translation.x+u.translation.y*u.translation.y)&&("function"==typeof n?n({target:h.target,translation:u.translation,velocity:u.velocity}):n)&&(u.target=h.target,u.startXY={x:h.pageX,y:h.pageY},u.translation={x:0,y:0},i({target:u.target,translation:u.translation,velocity:u.velocity})),u})},e._end=function(){this.setState(function(t,e){var n=t.target;return n&&e.onEnd({target:n,translation:t.translation,velocity:t.velocity}),{target:null,translation:null,velocity:null,startXY:null,moveXY:null,moveT:null}})},e._cancel=function(){this.setState(function(t,e){var n=t.target;return n&&e.onCancel({target:n,translation:t.translation,velocity:t.velocity}),{target:null,translation:null,velocity:null,startXY:null,moveXY:null,moveT:null}})},e._addMousePanListener=function(){var t=document.documentElement;t.addEventListener("mousemove",this._onMouseMove,!1),t.addEventListener("mouseup",this._onMouseUp,!1)},e._removeMousePanListener=function(){var t=document.documentElement;t.removeEventListener("mousemove",this._onMouseMove,!1),t.removeEventListener("mouseup",this._onMouseUp,!1)},e.render=function(){var t=this.props,e=t.enabled,n=t.style,i=h(t,["enabled","shouldStart","onStart","onMove","onEnd","onCancel","style"]),o=g.create(f({touchAction:e?"none":"auto"},n));return u.createElement("div",f({},i,{ref:this.elemRef,style:o,onTouchStart:this._onTouchStart,onTouchEnd:this._onTouchEnd,onTouchMove:this._onTouchMove,onTouchCancel:this._onTouchCancel,onMouseDown:this._onMouseDown,onClick:this._onClick}))},t}(u.PureComponent);p.defaultProps={enabled:!0,shouldStart:!0,onStart:function(){},onMove:function(){},onEnd:function(){},onCancel:function(){}};var c=(e="undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{}).requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.msRequestAnimationFrame||e.setTimeout&&function(t){return e.setTimeout(t,20)}||function(){},d=e.cancelAnimationFrame||e.webkitCancelAnimationFrame||e.mozCancelAnimationFrame||e.clearTimeout||function(){};function v(t,e,n){return n?e?e*Math.round(t/e):0:{x:v(t.x,e.width,"x"),y:v(t.y,e.height,"y")}}function y(t,e){var n=e.x,i=e.y,o=Math.sqrt(n*n+i*i);return{x:t*(n/o),y:t*(i/o)}}var n=function(n){function t(t){var e;return(e=n.call(this,t)||this)._onDragStart=function(t){var r=t.translation,a=t.velocity;e.setState(function(t,e){var n=t.contentOffset,i=e.directionalLockEnabled?Math.abs(a.y)<Math.abs(a.x)?"x":"y":"xy",o={x:n.x+("y"===i?0:r.x),y:n.y+("x"===i?0:r.y)};return{contentOffset:o,contentVelocity:{x:"y"===i?0:a.x,y:"x"===i?0:a.y},dragging:!0,dragStartOffset:o,dragDirection:i,decelerating:!1,decelerationEndOffset:null,decelerationRate:0}})},e._onDragMove=function(t){var i=t.translation,o=t.velocity;e.setState(function(t){var e=t.dragStartOffset,n=t.dragDirection;return{contentOffset:{x:e.x+("y"===n?0:i.x),y:e.y+("x"===n?0:i.y)},contentVelocity:{x:"y"===n?0:o.x,y:"x"===n?0:o.y}}})},e._onDragEnd=function(t){var d=t.translation,u=t.velocity;e.setState(function(t,e){var n=t.dragStartOffset,i=t.dragDirection,o=t.size,r=e.pagingEnabled,a={x:n.x+("y"===i?0:d.x),y:n.y+("x"===i?0:d.y)},s={x:"y"===i?0:u.x,y:"x"===i?0:u.y},l=r?.02:.002;r&&(s=function t(e,n,i,o){if(o){if(!i)return 0;var r=i<0?-1:1;return r*Math.min(Math.abs(e),Math.sqrt(r*i*n))}return i=y(i,e),{x:t(e.x,n.width,i.x,"x"),y:t(e.y,n.height,i.y,"y")}}(s,o,l));var c=function t(e,n,i,o){return o?i?e+.5*n*(n/i):e:(i=y(i,n),{x:t(e.x,n.x,i.x,"x"),y:t(e.y,n.y,i.y,"y")})}(a,s,l);return r&&(c=v(c,o)),{contentOffset:a,contentVelocity:s,dragging:!1,dragStartOffset:null,dragDirection:"xy",decelerating:!0,decelerationEndOffset:c,decelerationRate:l}})},e._onDragCancel=function(t){var r=t.translation,a=t.velocity;e.setState(function(t,e){var n=t.dragStartOffset,i={x:n.x+r.x,y:n.y+r.y},o=n;return e.pagingEnabled&&(o=v(o,t.size)),{contentOffset:i,contentVelocity:a,dragging:!1,dragStartOffset:null,dragDirection:"xy",decelerating:!0,decelerationEndOffset:o,decelerationRate:.01}})},e.state={size:{width:t.width,height:t.height},contentSize:{width:t.contentWidth,height:t.contentHeight},contentOffset:{x:0,y:0},contentVelocity:{x:0,y:0},prevContentOffset:null,dragging:!1,decelerating:!1,dragStartOffset:null,dragDirection:"xy",decelerationEndOffset:null,decelerationRate:0},e.boundingRef=u.createRef(),e.contentRef=u.createRef(),e.setContentSize=e.setContentSize.bind(function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(e)),e}r(t,n),t.getDerivedStateFromProps=function(t,e){var n=e.size,i=e.contentSize,o=e.contentOffset,r=e.contentVelocity,a=e.dragging,s=e.decelerating,l=e.decelerationEndOffset,c={};if(e.prevContentOffset!==o){var d=function t(e,n,i,o){return o?Math.max(Math.min(n-i,0),Math.min(e,0)):{x:t(e.x,n.width,i.width,"x"),y:t(e.y,n.height,i.height,"y")}}(o,n,i),u=r,h=s,f=l;d.x===o.x&&d.y===o.y?d=o:(u={x:d.x!==o.x?0:u.x,y:d.y!==o.y?0:u.y},f&&(f={x:d.x!==o.x?d.x:f.x,y:d.y!==o.y?d.y:f.y})),f&&d.x===f.x&&d.y===f.y&&0===u.x&&0===u.y&&(h=!1,f=null,c.decelerationRate=0),c.prevContentOffset=o,c.contentOffset=d,u!==r&&(c.contentVelocity=u),h!==s&&(c.decelerating=h),f!==l&&(c.decelerationEndOffset=f),t.onScroll({contentOffset:d,contentVelocity:u,decelerating:h,dragging:a,size:n,contentSize:i})}return c};var e=t.prototype;return e.componentDidUpdate=function(t,e){var n=this,i=this.props,o=i.width,r=i.height,a=i.contentWidth,s=i.contentHeight;if(t.width===o&&t.height===r||this.setState(function(t){return{size:{width:o,height:r},contentOffset:f({},t.contentOffset)}}),t.contentWidth===a&&t.contentHeight===s||this.setState(function(t){return{contentSize:{width:a,height:s},contentOffset:f({},t.contentOffset)}}),e.contentOffset!==this.state.contentOffset&&this.state.decelerationEndOffset){var l=(new Date).getTime();this._deceleratingTimer&&d(this._deceleratingTimer),this._deceleratingTimer=c(function(){n._deceleratingTimer=void 0,n._decelerate((new Date).getTime()-l)})}},e.componentWillUnmount=function(){this._deceleratingTimer&&(d(this._deceleratingTimer),this._deceleratingTimer=void 0)},e.getSize=function(){return this.state.size},e.getContentSize=function(){return this.state.contentSize},e.getContentOffset=function(){return this.state.contentOffset},e.isDragging=function(){return this.state.dragging},e.isDecelerating=function(){return this.state.decelerating},e.setContentSize=function(e){this.setState(function(t){return{contentSize:e,contentOffset:f({},t.contentOffset)}})},e.scrollTo=function(t){var i=t.offset,o=t.animated;this.setState(function(t,e){var n=t.contentOffset;return t.dragging?null:o?(e.pagingEnabled&&(i=v(i,t.size)),{contentOffset:f({},n),decelerating:!0,decelerationEndOffset:i,decelerationRate:.01}):{contentOffset:i,contentVelocity:{x:0,y:0},decelerating:!1,decelerationEndOffset:null,decelerationRate:0}})},e.scrollToRect=function(t){var e=t.rect,n=t.align,i=t.animated,o=this.state,r=function t(e,n,i,o,r,a){if(a){var s;if("auto"===i){var l=r<n?-1:1;s=l*Math.max(0,Math.min(l*(e+o),l*(r-n)))-e}else"start"===i?i=0:"center"===i?i=.5:"end"===i&&(i=1),("number"!=typeof i||isNaN(i))&&(i=.5),s=i*(r-n)-e;return s}return"object"!=typeof i&&(i={x:i,y:i}),{x:t(e.x,n.width,i.x,o.x,r.width,"x"),y:t(e.y,n.height,i.y,o.y,r.height,"y")}}({x:e.x,y:e.y},{width:e.width,height:e.height},void 0===n?"auto":n,o.contentOffset,o.size);this.scrollTo({offset:r,animated:i})},e._decelerate=function(i){this.setState(function(t){var e=t.decelerationEndOffset;if(!e)return null;var n=function t(e,n,i,o,r,a){if(a){if(!n)return{offset:r,velocity:0};var s=(n<0?-1:1)*Math.sqrt(.5*o*o+n*(r-i)),l=n?(s-o)/n:0;return(n?(2*s-o)/n:0)<e?{offset:r,velocity:0}:{offset:i+.5*(o+s)*l-.5*(2*s-n*Math.abs(l-e))*(l-e),velocity:s-n*Math.abs(l-e)}}var c=t(e,(n=y(n,{x:r.x-i.x,y:r.y-i.y})).x,i.x,o.x,r.x,"x"),d=t(e,n.y,i.y,o.y,r.y,"y");return{offset:{x:c.offset,y:d.offset},velocity:{x:c.velocity,y:d.velocity}}}(i,t.decelerationRate,t.contentOffset,t.contentVelocity,e);return{contentOffset:n.offset,contentVelocity:n.velocity}})},e.render=function(){var t=this.props,e=t.scrollEnabled,n=t.style,i=t.children,o=h(t,["width","height","contentWidth","contentHeight","scrollEnabled","pagingEnabled","directionalLockEnabled","style","children"]),r=this.state,a=r.size,s=r.contentSize,l=r.contentOffset,c=g.create(f({overflow:"hidden",position:"relative",boxSizing:"border-box",width:a.width,height:a.height},n)),d=g.create({position:"relative",boxSizing:"border-box",width:s.width,height:s.height,transformTranslate:[l.x,l.y]});return u.createElement(p,f({},o,{ref:this.boundingRef,style:c,enabled:e,onStart:this._onDragStart,onMove:this._onDragMove,onEnd:this._onDragEnd,onCancel:this._onDragCancel}),u.createElement("div",{ref:this.contentRef,style:d},"function"==typeof i?i(this):i))},t}(u.PureComponent);function s(t){var e=window.getComputedStyle(t)||{},n=t.offsetWidth||0,i=t.offsetHeight||0;return e.paddingLeft&&(n-=parseInt(e.paddingLeft,10)),e.paddingRight&&(n-=parseInt(e.paddingRight,10)),e.borderLeftWidth&&(n-=parseInt(e.borderLeftWidth,10)),e.borderRightWidth&&(n-=parseInt(e.borderRightWidth,10)),e.paddingTop&&(i-=parseInt(e.paddingTop,10)),e.paddingBottom&&(i-=parseInt(e.paddingBottom,10)),e.borderTopWidth&&(i-=parseInt(e.borderTopWidth,10)),e.borderBottomWidth&&(i-=parseInt(e.borderBottomWidth,10)),{width:n,height:i}}function i(t,e){return t(e={exports:{}},e.exports),e.exports}n.defaultProps={children:null,width:0,height:0,contentWidth:0,contentHeight:0,scrollEnabled:!0,pagingEnabled:!1,directionalLockEnabled:!1,onScroll:function(){}};var o=i(function(t){(t.exports={}).forEach=function(t,e){for(var n=0;n<t.length;n++){var i=e(t[n]);if(i)return i}}}),m=i(function(t){var e=t.exports={};e.isIE=function(t){return(-1!=(e=navigator.userAgent.toLowerCase()).indexOf("msie")||-1!=e.indexOf("trident")||-1!=e.indexOf(" edge/"))&&(!t||t===function(){for(var t=3,e=document.createElement("div"),n=e.getElementsByTagName("i");e.innerHTML="\x3c!--[if gt IE "+ ++t+"]><i></i><![endif]--\x3e",n[0];);return 4<t?t:void 0}());var e},e.isLegacyOpera=function(){return!!window.opera}}),w=i(function(t){(t.exports={}).getOption=function(t,e,n){var i=t[e];return null!=i||void 0===n?i:n}}),b=function(t){var e=(t=t||{}).reporter,n=w.getOption(t,"async",!0),i=w.getOption(t,"auto",!0);i&&!n&&(e&&e.warn("Invalid options combination. auto=true and async=false is invalid. Setting async=true."),n=!0);var o,r=x(),a=!1;function s(){for(a=!0;r.size();){var t=r;r=x(),t.process()}a=!1}function l(){o=setTimeout(s,0)}return{add:function(t,e){!a&&i&&n&&0===r.size()&&l(),r.add(t,e)},force:function(t){a||(void 0===t&&(t=n),o&&(clearTimeout(o),o=null),t?l():s())}}};function x(){var i={},n=0,o=0,r=0;return{add:function(t,e){e||(e=t,t=0),o<t?o=t:t<r&&(r=t),i[t]||(i[t]=[]),i[t].push(e),n++},process:function(){for(var t=r;t<=o;t++)for(var e=i[t],n=0;n<e.length;n++)(0,e[n])()},size:function(){return n}}}var a="_erd";function l(t){return t[a]}var S={initState:function(t){return t[a]={},l(t)},getState:l,cleanState:function(t){delete t[a]}},A=o.forEach,z=function(t){var x=(t=t||{}).reporter,S=t.batchProcessor,z=t.stateHandler.getState,E=t.idHandler;if(!S)throw Error("Missing required dependency: batchProcessor");if(!x)throw Error("Missing required dependency: reporter.");var _=function(){var t=document.createElement("div");t.style.cssText="position: absolute; width: 1000px; height: 1000px; visibility: hidden; margin: 0; padding: 0;";var e=document.createElement("div");e.style.cssText="position: absolute; width: 500px; height: 500px; overflow: scroll; visibility: none; top: -1500px; left: -1500px; visibility: hidden; margin: 0; padding: 0;",e.appendChild(t),document.body.insertBefore(e,document.body.firstChild);var n=500-e.clientWidth,i=500-e.clientHeight;return document.body.removeChild(e),{width:n,height:i}}(),T="erd_scroll_detection_container";function C(t,e,n){if(t.addEventListener)t.addEventListener(e,n);else{if(!t.attachEvent)return x.error("[scroll] Don't know how to add event listeners.");t.attachEvent("on"+e,n)}}function n(t,e,n){if(t.removeEventListener)t.removeEventListener(e,n);else{if(!t.detachEvent)return x.error("[scroll] Don't know how to remove event listeners.");t.detachEvent("on"+e,n)}}function O(t){return z(t).container.childNodes[0].childNodes[0].childNodes[0]}function M(t){return z(t).container.childNodes[0].childNodes[0].childNodes[1]}return function(i,t){if(!document.getElementById(i)){var e=t+"_animation",n=t+"_animation_active",o="/* Created by the element-resize-detector library. */\n";o+="."+t+" > div::-webkit-scrollbar { display: none; }\n\n",o+="."+n+" { -webkit-animation-duration: 0.1s; animation-duration: 0.1s; -webkit-animation-name: "+e+"; animation-name: "+e+"; }\n",o+="@-webkit-keyframes "+e+" { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }\n",function(t,e){e=e||function(t){document.head.appendChild(t)};var n=document.createElement("style");n.innerHTML=t,n.id=i,e(n)}(o+="@keyframes "+e+" { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }")}}("erd_scroll_detection_scrollbar_style",T),{makeDetectable:function(a,v,t){function y(){if(a.debug){var t=Array.prototype.slice.call(arguments);if(t.unshift(E.get(v),"Scroll: "),x.log.apply)x.log.apply(null,t);else for(var e=0;e<t.length;e++)x.log(t[e])}}function s(t){var e=z(t).container.childNodes[0],n=window.getComputedStyle(e);return!n.width||-1==n.width.indexOf("px")}function e(){var t=window.getComputedStyle(v),e={};return e.position=t.position,e.width=v.offsetWidth,e.height=v.offsetHeight,e.top=t.top,e.right=t.right,e.bottom=t.bottom,e.left=t.left,e.widthCSS=t.width,e.heightCSS=t.height,e}function n(){if(y("storeStyle invoked."),z(v)){var t=e();z(v).style=t}else y("Aborting because element has been uninstalled")}function l(t,e,n){z(t).lastWidth=e,z(t).lastHeight=n}function c(){return 2*_.width+1}function d(){return 2*_.height+1}function u(t){return t+10+c()}function h(t){return t+10+d()}function f(t,e,n){var i=O(t),o=M(t),r=u(e),a=h(n),s=2*e+c(),l=2*n+d();i.scrollLeft=r,i.scrollTop=a,o.scrollLeft=s,o.scrollTop=l}function m(){var t=z(v).container;if(!t){(t=document.createElement("div")).className=T,t.style.cssText="visibility: hidden; display: inline; width: 0px; height: 0px; z-index: -1; overflow: hidden; margin: 0; padding: 0;",(z(v).container=t).className+=" "+T+"_animation_active",v.appendChild(t);var e=function(){z(v).onRendered&&z(v).onRendered()};C(t,"animationstart",e),z(v).onAnimationStart=e}return t}function i(){if(y("Injecting elements"),z(v)){!function(){var t=z(v).style;if("static"===t.position){v.style.position="relative";var e=function(t,e,n,i){var o=n[i];"auto"!==o&&"0"!==o.replace(/[^-\d\.]/g,"")&&(t.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: ",e),e.style[i]=0)};e(x,v,t,"top"),e(x,v,t,"right"),e(x,v,t,"bottom"),e(x,v,t,"left")}}();var t=z(v).container;t||(t=m());var e,n,i,o,r=_.width,a=_.height,s="position: absolute; flex: none; overflow: hidden; z-index: -1; visibility: hidden; left: "+(e=(e=-(1+r))?e+"px":"0")+"; top: "+(n=(n=-(1+a))?n+"px":"0")+"; right: "+(o=(o=-r)?o+"px":"0")+"; bottom: "+(i=(i=-a)?i+"px":"0")+";",l=document.createElement("div"),c=document.createElement("div"),d=document.createElement("div"),u=document.createElement("div"),h=document.createElement("div"),f=document.createElement("div");l.dir="ltr",l.style.cssText="position: absolute; flex: none; overflow: hidden; z-index: -1; visibility: hidden; width: 100%; height: 100%; left: 0px; top: 0px;",c.className=l.className=T,c.style.cssText=s,d.style.cssText="position: absolute; flex: none; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;",u.style.cssText="position: absolute; left: 0; top: 0;",h.style.cssText="position: absolute; flex: none; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;",f.style.cssText="position: absolute; width: 200%; height: 200%;",d.appendChild(u),h.appendChild(f),c.appendChild(d),c.appendChild(h),l.appendChild(c),t.appendChild(l),C(d,"scroll",g),C(h,"scroll",p),z(v).onExpandScroll=g,z(v).onShrinkScroll=p}else y("Aborting because element has been uninstalled");function g(){z(v).onExpand&&z(v).onExpand()}function p(){z(v).onShrink&&z(v).onShrink()}}function o(){function i(t,e,n){var i=O(t).childNodes[0],o=u(e),r=h(n);i.style.width=o+"px",i.style.height=r+"px"}function n(t){var e=v.offsetWidth,n=v.offsetHeight;y("Storing current size",e,n),l(v,e,n),S.add(0,function(){z(v)?o()?(a.debug&&(v.offsetWidth===e&&v.offsetHeight===n||x.warn(E.get(v),"Scroll: Size changed before updating detector elements.")),i(v,e,n)):y("Aborting because element container has not been initialized"):y("Aborting because element has been uninstalled")}),S.add(1,function(){z(v)?o()?f(v,e,n):y("Aborting because element container has not been initialized"):y("Aborting because element has been uninstalled")}),t&&S.add(2,function(){z(v)?o()?t():y("Aborting because element container has not been initialized"):y("Aborting because element has been uninstalled")})}function o(){return!!z(v).container}function r(){y("notifyListenersIfNeeded invoked");var t=z(v);return void 0===z(v).lastNotifiedWidth&&t.lastWidth===t.startSize.width&&t.lastHeight===t.startSize.height?y("Not notifying: Size is the same as the start size, and there has been no notification yet."):t.lastWidth===t.lastNotifiedWidth&&t.lastHeight===t.lastNotifiedHeight?y("Not notifying: Size already notified"):(y("Current size not notified, notifying..."),t.lastNotifiedWidth=t.lastWidth,t.lastNotifiedHeight=t.lastHeight,void A(z(v).listeners,function(t){t(v)}))}function t(){if(y("Scroll detected."),s(v))y("Scroll event fired while unrendered. Ignoring...");else{var t=v.offsetWidth,e=v.offsetHeight;t!==z(v).lastWidth||e!==z(v).lastHeight?(y("Element size changed."),n(r)):y("Element size has not changed ("+t+"x"+e+").")}}if(y("registerListenersAndPositionElements invoked."),z(v)){z(v).onRendered=function(){if(y("startanimation triggered."),s(v))y("Ignoring since element is still unrendered...");else{y("Element rendered.");var t=O(v),e=M(v);0!==t.scrollLeft&&0!==t.scrollTop&&0!==e.scrollLeft&&0!==e.scrollTop||(y("Scrollbars out of sync. Updating detector elements..."),n(r))}},z(v).onExpand=t,z(v).onShrink=t;var e=z(v).style;i(v,e.width,e.height)}else y("Aborting because element has been uninstalled")}function r(){if(y("finalizeDomMutation invoked."),z(v)){var t=z(v).style;l(v,t.width,t.height),f(v,t.width,t.height)}else y("Aborting because element has been uninstalled")}function g(){t(v)}function p(){var t;y("Installing..."),z(v).listeners=[],t=e(),z(v).startSize={width:t.width,height:t.height},y("Element start size",z(v).startSize),S.add(0,n),S.add(1,i),S.add(2,o),S.add(3,r),S.add(4,g)}var w,b;t||(t=v,v=a,a=null),a=a||{},y("Making detectable..."),(b=w=v)!==b.ownerDocument.body&&!b.ownerDocument.body.contains(b)||null===window.getComputedStyle(w)?(y("Element is detached"),m(),y("Waiting until element is attached..."),z(v).onRendered=function(){y("Element is now attached"),p()}):p()},addListener:function(t,e){if(!z(t).listeners.push)throw Error("Cannot add listener to an element that is not detectable.");z(t).listeners.push(e)},uninstall:function(t){var e=z(t);e&&(e.onExpandScroll&&n(O(t),"scroll",e.onExpandScroll),e.onShrinkScroll&&n(M(t),"scroll",e.onShrinkScroll),e.onAnimationStart&&n(e.container,"animationstart",e.onAnimationStart),e.container&&t.removeChild(e.container))}}},E=o.forEach;function _(t){return Array.isArray(t)||void 0!==t.length}function T(t){if(Array.isArray(t))return t;var e=[];return E(t,function(t){e.push(t)}),e}function C(t){return t&&1===t.nodeType}function O(t,e,n){var i=t[e];return null==i&&void 0!==n?n:i}var M=function(e){var u,t,i,o,n;if((e=e||{}).idHandler)u={get:function(t){return e.idHandler.get(t,!0)},set:e.idHandler.set};else{var r=(n=1,{generate:function(){return n++}}),a=(i=(t={idGenerator:r,stateHandler:S}).idGenerator,o=t.stateHandler.getState,{get:function(t){var e=o(t);return e&&void 0!==e.id?e.id:null},set:function(t){var e=o(t);if(!e)throw Error("setId required the element to have a resize detection state.");var n=i.generate();return e.id=n}});u=a}var h=e.reporter;h||(h=function(t){function e(){}var n={log:e,warn:e,error:e};if(!t&&window.console){var i=function(t,n){t[n]=function(){var t=console[n];if(t.apply)t.apply(console,arguments);else for(var e=0;e<arguments.length;e++)t(arguments[e])}};i(n,"log"),i(n,"warn"),i(n,"error")}return n}(!1===h));var s=O(e,"batchProcessor",b({reporter:h})),f={};f.callOnAdd=!!O(e,"callOnAdd",!0),f.debug=!!O(e,"debug",!1);var l,g,p=function(i){var o={};function r(t){var e=i.get(t);return void 0===e?[]:o[e]||[]}return{get:r,add:function(t,e){var n=i.get(t);o[n]||(o[n]=[]),o[n].push(e)},removeListener:function(t,e){for(var n=r(t),i=0,o=n.length;i<o;++i)if(n[i]===e){n.splice(i,1);break}},removeAllListeners:function(t){var e=r(t);e&&(e.length=0)}}}(u),v=(l={stateHandler:S}.stateHandler.getState,{isDetectable:function(t){var e=l(t);return e&&!!e.isDetectable},markAsDetectable:function(t){l(t).isDetectable=!0},isBusy:function(t){return!!l(t).busy},markBusy:function(t,e){l(t).busy=!!e}}),c=O(e,"strategy","object"),d={reporter:h,batchProcessor:s,stateHandler:S,idHandler:u};if("scroll"===c&&(m.isLegacyOpera()?(h.warn("Scroll strategy is not supported on legacy Opera. Changing to object strategy."),c="object"):m.isIE(9)&&(h.warn("Scroll strategy is not supported on IE9. Changing to object strategy."),c="object")),"scroll"===c)g=z(d);else{if("object"!==c)throw Error("Invalid strategy name: "+c);g=function(t){var s=(t=t||{}).reporter,l=t.batchProcessor,c=t.stateHandler.getState;if(!s)throw Error("Missing required dependency: reporter.");function i(t){return c(t).object}return{makeDetectable:function(t,e,n){n||(n=e,e=t,t=null),t=t||{},m.isIE(8)?n(e):function(n,i){var o=!1,r=window.getComputedStyle(n),t=n.offsetWidth,e=n.offsetHeight;function a(){function t(){if("static"===r.position){n.style.position="relative";var t=function(t,e,n,i){var o=n[i];"auto"!==o&&"0"!==o.replace(/[^-\d\.]/g,"")&&(t.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: ",e),e.style[i]=0)};t(s,n,r,"top"),t(s,n,r,"right"),t(s,n,r,"bottom"),t(s,n,r,"left")}}""!==r.position&&(t(),o=!0);var e=document.createElement("object");e.style.cssText="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;",e.tabIndex=-1,e.type="text/html",e.setAttribute("aria-hidden","true"),e.onload=function(){o||t(),function t(e,n){e.contentDocument?n(e.contentDocument):setTimeout(function(){t(e,n)},100)}(this,function(t){i(n)})},m.isIE()||(e.data="about:blank"),n.appendChild(e),c(n).object=e,m.isIE()&&(e.data="about:blank")}c(n).startSize={width:t,height:e},l?l.add(a):a()}(e,n)},addListener:function(t,e){if(!i(t))throw Error("Element is not detectable by this strategy.");function n(){e(t)}m.isIE(8)?(c(t).object={proxy:n},t.attachEvent("onresize",n)):i(t).contentDocument.defaultView.addEventListener("resize",n)},uninstall:function(t){m.isIE(8)?t.detachEvent("onresize",c(t).object.proxy):t.removeChild(i(t)),delete c(t).object}}}(d)}var y={};return{listenTo:function(t,i,o){function r(e){var t=p.get(e);E(t,function(t){t(e)})}function a(t,e,n){p.add(e,n),t&&n(e)}if(o||(o=i,i=t,t={}),!i)throw Error("At least one element required.");if(!o)throw Error("Listener required.");if(C(i))i=[i];else{if(!_(i))return h.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");i=T(i)}var s=0,l=O(t,"callOnAdd",f.callOnAdd),c=O(t,"onReady",function(){}),d=O(t,"debug",f.debug);E(i,function(t){S.getState(t)||(S.initState(t),u.set(t));var n=u.get(t);if(d&&h.log("Attaching listener to element",n,t),!v.isDetectable(t))return d&&h.log(n,"Not detectable."),v.isBusy(t)?(d&&h.log(n,"System busy making it detectable"),a(l,t,o),y[n]=y[n]||[],void y[n].push(function(){++s===i.length&&c()})):(d&&h.log(n,"Making detectable..."),v.markBusy(t,!0),g.makeDetectable({debug:d},t,function(t){if(d&&h.log(n,"onElementDetectable"),S.getState(t)){v.markAsDetectable(t),v.markBusy(t,!1),g.addListener(t,r),a(l,t,o);var e=S.getState(t);e&&e.startSize&&(e.startSize.width===t.offsetWidth&&e.startSize.height===t.offsetHeight||r(t)),y[n]&&E(y[n],function(t){t()})}else d&&h.log(n,"Element uninstalled before being detectable.");delete y[n],++s===i.length&&c()}));d&&h.log(n,"Already detecable, adding listener."),a(l,t,o),s++}),s===i.length&&c()},removeListener:p.removeListener,removeAllListeners:p.removeAllListeners,uninstall:function(t){if(!t)return h.error("At least one element is required.");if(C(t))t=[t];else{if(!_(t))return h.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");t=T(t)}E(t,function(t){p.removeAllListeners(t),g.uninstall(t),S.cleanState(t)})}}}({strategy:"scroll"}),D=function(o){function t(){for(var t,e=arguments.length,n=Array(e),i=0;i<e;i++)n[i]=arguments[i];return(t=o.call.apply(o,[this].concat(n))||this).resizeRef=u.createRef(),t}r(t,o);var e=t.prototype;return e.componentDidMount=function(){this._calculateSize()},e.componentDidUpdate=function(t){t.width===this.props.width&&t.height===this.props.height||this._calculateSize()},e.componentWillUnmount=function(){this._resizeNode&&(M.uninstall(this._resizeNode),this._resizeNode=void 0)},e._calculateSize=function(){var t,e=this,n=this.props,i=n.width,o=n.height,r=n.onResize;if(i<0||o<0){if(!this._resizeNode){var a=this.resizeRef.current;if(!a)return;return void M.listenTo(this._resizeNode=a,function(){return e._calculateSize()})}t=s(this._resizeNode)}else this._resizeNode&&(M.uninstall(this._resizeNode),this._resizeNode=void 0),t={width:i,height:o};r(t)},e.render=function(){var t=this.props,e=t.width,n=t.height,i=t.children;return u.createElement("div",{ref:this.resizeRef,style:{position:"absolute",width:e<0?"auto":e,height:n<0?"auto":n}},"function"==typeof i?i(this):i)},t}(u.PureComponent);D.defaultProps={width:-1,height:-1,onResize:function(){}};var k=function(o){function t(){for(var t,e=arguments.length,n=Array(e),i=0;i<e;i++)n[i]=arguments[i];return(t=o.call.apply(o,[this].concat(n))||this).state={rowCount:0,columnCount:0,sizeWidth:0,sizeHeight:0,layoutAttrs:[]},t}r(t,o);var e=t.prototype;return e.componentDidMount=function(){this._calculateLayout()},e.componentDidUpdate=function(t){var e=this.props;t.width===e.width&&t.height===e.height&&t.itemWidth===e.itemWidth&&t.itemHeight===e.itemHeight&&t.lineSpacing===e.lineSpacing&&t.inneritemSpacing===e.inneritemSpacing&&t.count===e.count&&t.direction===e.direction||this._calculateLayout()},e._calculateLayout=function(){this.setState(function(t,e){var n=e.onResize,i=function t(e,n,i,o,r,a){if(!a){var s=e.width,l=0,c=0,d=0,u=[];if(0<(c=s<0?(s=r*n.width+(1<r?(r-1)*o:0),r):0===n.width&&0===i?r:1+(s<n.width?0:Math.floor((s-n.width)/(n.width+o))))&&(d=Math.ceil(r/c)),0<d){for(var h=0;h<d;h++){0<h&&(l+=i+n.height);for(var f=0;f<c;f++){var g=f+h*c;g<r&&u.push({x:Math.round(f*((s-n.width)/(c-1))),y:l,width:n.width,height:n.height,rowIndex:h,columnIndex:f})}}l+=n.height}return{rowCount:d,columnCount:c,sizeWidth:s,sizeHeight:l,layoutAttrs:u}}{if("vertical"===a){var p=t({width:e.width,height:e.height},{width:n.width,height:n.height},i,o,r);return{sizeWidth:p.sizeWidth,sizeHeight:p.sizeHeight,rowCount:p.rowCount,columnCount:p.columnCount,layoutAttrs:p.layoutAttrs}}if("horizontal"===a){var v=t({width:e.height,height:e.width},{width:n.height,height:n.width},i,o,r);return{sizeWidth:v.sizeHeight,sizeHeight:v.sizeWidth,rowCount:v.columnCount,columnCount:v.rowCount,layoutAttrs:v.layoutAttrs.map(function(t){return{x:t.y,y:t.x,width:t.height,height:t.width}})}}}}({width:e.width,height:e.height},{width:e.itemWidth,height:e.itemHeight},e.lineSpacing,e.inneritemSpacing,e.count,e.direction);return t.sizeWidth===i.sizeWidth&&t.sizeHeight===i.sizeHeight||n({width:i.sizeWidth,height:i.sizeHeight}),i})},e.getItemRect=function(t){var e=this.state,n=e.layoutAttrs,i=function t(e,n,i){if(!i)return e.column+e.row*n.column;{if("vertical"===i)return t({row:e.row,column:e.column},{row:n.row,column:n.column});if("horizontal"===i)return t({row:e.column,column:e.row},{row:n.column,column:n.row})}}({row:t.rowIndex,column:t.columnIndex},{row:e.rowCount,column:e.columnCount},this.props.direction);if(i<n.length){var o=n[i];return{x:o.x,y:o.y,width:o.width,height:o.height}}return null},e.render=function(){var t=this.props,e=t.visibleRect,n=t.renderItem,i=t.itemKey,o=t.children,r=this.state.layoutAttrs;if("function"==typeof o)return o(this);for(var a=[],s=0;s<r.length;s++){var l=r[s];if(R(l,e)){var c={position:"absolute",left:l.x,top:l.y,width:l.width,height:l.width};a.push(u.createElement("div",{key:i(l),style:c},n(l)))}}return u.createElement(u.Fragment,null,a)},t}(u.PureComponent);function R(t,e,n){if(n){var i=t.x-e.x;return-.25*e.width<i+t.width&&i<1.25*e.width}return R({x:t.x,width:t.width},{x:e.x,width:e.width},"x")&&R({x:t.y,width:t.height},{x:e.y,width:e.height},"y")}k.defaultProps={direction:"vertical",count:0,lineSpacing:0,inneritemSpacing:0,width:-1,height:-1,itemWidth:0,itemHeight:0,itemKey:function(t){return t.rowIndex+"-"+t.columnIndex},renderItem:function(){return null},visibleRect:{x:0,y:0,width:0,height:0},onResize:function(){}};var W=function(o){function t(){for(var t,e=arguments.length,n=Array(e),i=0;i<e;i++)n[i]=arguments[i];return(t=o.call.apply(o,[this].concat(n))||this).state={size:{width:0,height:0}},t.resizeRef=u.createRef(),t}r(t,o);var e=t.prototype;return e.componentDidMount=function(){this._calculateSize()},e.componentDidUpdate=function(t){t.width===this.props.width&&t.height===this.props.height||this._calculateSize()},e.componentWillUnmount=function(){this._resizeNode&&(M.uninstall(this._resizeNode),this._resizeNode=void 0)},e._calculateSize=function(){var t,e=this,n=this.props,i=n.width,o=n.height;if(i<0||o<0){if(!this._resizeNode){var r=this.resizeRef.current;if(!r)return;return void M.listenTo(this._resizeNode=r,function(){return e._calculateSize()})}t=s(this._resizeNode)}else this._resizeNode&&(M.uninstall(this._resizeNode),this._resizeNode=void 0),t={width:i,height:o};this.setState({size:t})},e.render=function(){var t=this.props,e=t.width,n=t.height;return u.createElement("div",{ref:this.resizeRef,style:{width:e<0?"100%":e,height:n<0?"100%":n}},(0,t.children)(this.state.size))},t}(u.Component);W.defaultProps={children:function(){return null},width:-1,height:-1},t.Pad=n,t.Pannable=p,t.GeneralContent=D,t.GridContent=k,t.AutoResizing=W,Object.defineProperty(t,"__esModule",{value:!0})});

es/GridContent.js

@@ -1,2 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
@@ -19,10 +18,7 @@ import React from 'react';
     _this.state = {
-      size: {
-        width: 0,
-        height: 0
-      },
-      widthDict: {},
-      heightDict: {},
-      xList: [],
-      yList: []
+      rowCount: 0,
+      columnCount: 0,
+      sizeWidth: 0,
+      sizeHeight: 0,
+      layoutAttrs: []
     };
@@ -32,76 +28,90 @@ return _this;
 
-  GridContent.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
-    var columnWidth = props.columnWidth,
-        rowHeight = props.rowHeight,
-        columnCount = props.columnCount,
-        rowCount = props.rowCount,
-        rowHeightHash = props.rowHeightHash,
-        columnWidthHash = props.columnWidthHash,
-        onResize = props.onResize;
-    var xList = state.xList,
-        yList = state.yList,
-        widthDict = state.widthDict,
-        heightDict = state.heightDict,
-        size = state.size;
-    var nextState = {};
+  var _proto = GridContent.prototype;
 
-    var nextSize = _extends({}, size);
+  _proto.componentDidMount = function componentDidMount() {
+    this._calculateLayout();
+  };
 
-    var rowState = calculateDerivedState(rowCount, rowHeight, rowHeightHash, yList, heightDict);
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var _this$props = this.props,
+        width = _this$props.width,
+        height = _this$props.height,
+        itemWidth = _this$props.itemWidth,
+        itemHeight = _this$props.itemHeight,
+        lineSpacing = _this$props.lineSpacing,
+        inneritemSpacing = _this$props.inneritemSpacing,
+        count = _this$props.count,
+        direction = _this$props.direction;
 
-    if (rowState.originList) {
-      nextState.yList = rowState.originList;
+    if (prevProps.width !== width || prevProps.height !== height || prevProps.itemWidth !== itemWidth || prevProps.itemHeight !== itemHeight || prevProps.lineSpacing !== lineSpacing || prevProps.inneritemSpacing !== inneritemSpacing || prevProps.count !== count || prevProps.direction !== direction) {
+      this._calculateLayout();
     }
+  };
 
-    if (rowState.sizeDict) {
-      nextState.heightDict = rowState.sizeDict;
-    }
+  _proto._calculateLayout = function _calculateLayout() {
+    this.setState(function (state, props) {
+      var width = props.width,
+          height = props.height,
+          itemWidth = props.itemWidth,
+          itemHeight = props.itemHeight,
+          lineSpacing = props.lineSpacing,
+          inneritemSpacing = props.inneritemSpacing,
+          count = props.count,
+          direction = props.direction,
+          onResize = props.onResize;
+      var nextState = calculateLayout({
+        width: width,
+        height: height
+      }, {
+        width: itemWidth,
+        height: itemHeight
+      }, lineSpacing, inneritemSpacing, count, direction);
 
-    nextSize.height = rowState.size;
-    var columnState = calculateDerivedState(columnCount, columnWidth, columnWidthHash, xList, widthDict);
+      if (state.sizeWidth !== nextState.sizeWidth || state.sizeHeight !== nextState.sizeHeight) {
+        onResize({
+          width: nextState.sizeWidth,
+          height: nextState.sizeHeight
+        });
+      }
 
-    if (columnState.originList) {
-      nextState.xList = columnState.originList;
-    }
-
-    if (columnState.sizeDict) {
-      nextState.widthDict = columnState.sizeDict;
-    }
-
-    nextSize.width = columnState.size;
-
-    if (nextSize.width !== size.width || nextSize.height !== size.height) {
-      onResize(nextSize);
-      nextState.size = nextSize;
-    }
-
-    return nextState;
+      return nextState;
+    });
   };
 
-  var _proto = GridContent.prototype;
-
-  _proto.getCellRect = function getCellRect(_ref) {
+  _proto.getItemRect = function getItemRect(_ref) {
     var rowIndex = _ref.rowIndex,
         columnIndex = _ref.columnIndex;
+    var direction = this.props.direction;
     var _this$state = this.state,
-        xList = _this$state.xList,
-        yList = _this$state.yList;
-    var x = xList[columnIndex - 1] || 0;
-    var y = yList[rowIndex - 1] || 0;
-    var x2 = xList[columnIndex] || 0;
-    var y2 = yList[rowIndex] || 0;
-    return {
-      x: x,
-      y: y,
-      width: x2 - x,
-      height: y2 - y
-    };
+        rowCount = _this$state.rowCount,
+        columnCount = _this$state.columnCount,
+        layoutAttrs = _this$state.layoutAttrs;
+    var index = calculateIndexForLayoutAttrs({
+      row: rowIndex,
+      column: columnIndex
+    }, {
+      row: rowCount,
+      column: columnCount
+    }, direction);
+
+    if (index < layoutAttrs.length) {
+      var attrs = layoutAttrs[index];
+      return {
+        x: attrs.x,
+        y: attrs.y,
+        width: attrs.width,
+        height: attrs.height
+      };
+    }
+
+    return null;
   };
 
   _proto.render = function render() {
-    var _this$props = this.props,
-        visibleRect = _this$props.visibleRect,
-        renderCell = _this$props.renderCell,
-        cellKey = _this$props.cellKey,
-        children = _this$props.children;
+    var _this$props2 = this.props,
+        visibleRect = _this$props2.visibleRect,
+        renderItem = _this$props2.renderItem,
+        itemKey = _this$props2.itemKey,
+        children = _this$props2.children;
+    var layoutAttrs = this.state.layoutAttrs;
 
@@ -112,45 +122,19 @@ if (typeof children === 'function') {
 
-    var _this$state2 = this.state,
-        xList = _this$state2.xList,
-        yList = _this$state2.yList;
     var grids = [];
 
-    for (var rowIndex = 0; rowIndex < yList.length; rowIndex++) {
-      for (var columnIndex = 0; columnIndex < xList.length; columnIndex++) {
-        var cellRect = this.getCellRect({
-          rowIndex: rowIndex,
-          columnIndex: columnIndex
-        });
+    for (var index = 0; index < layoutAttrs.length; index++) {
+      var attrs = layoutAttrs[index];
 
-        if (needsRender({
-          x: cellRect.x,
-          y: cellRect.y
-        }, {
-          width: cellRect.width,
-          height: cellRect.height
-        }, {
-          x: visibleRect.x,
-          y: visibleRect.y
-        }, {
-          width: visibleRect.width,
-          height: visibleRect.height
-        })) {
-          var cellStyle = {
-            position: 'absolute',
-            left: cellRect.x,
-            top: cellRect.y,
-            width: cellRect.width,
-            height: cellRect.width
-          };
-          grids.push(React.createElement("div", {
-            key: cellKey({
-              columnIndex: columnIndex,
-              rowIndex: rowIndex
-            }),
-            style: cellStyle
-          }, renderCell({
-            columnIndex: columnIndex,
-            rowIndex: rowIndex
-          })));
-        }
+      if (needsRender(attrs, visibleRect)) {
+        var cellStyle = {
+          position: 'absolute',
+          left: attrs.x,
+          top: attrs.y,
+          width: attrs.width,
+          height: attrs.width
+        };
+        grids.push(React.createElement("div", {
+          key: itemKey(attrs),
+          style: cellStyle
+        }, renderItem(attrs)));
       }
@@ -166,20 +150,16 @@ }
 GridContent.defaultProps = {
-  rowCount: 0,
-  columnCount: 0,
-  rowHeight: 0,
-  columnWidth: 0,
-  rowHeightHash: function rowHeightHash(_ref2) {
-    var rowIndex = _ref2.rowIndex;
-    return '' + rowIndex;
-  },
-  columnWidthHash: function columnWidthHash(_ref3) {
-    var columnIndex = _ref3.columnIndex;
-    return '' + columnIndex;
-  },
-  cellKey: function cellKey(_ref4) {
-    var columnIndex = _ref4.columnIndex,
-        rowIndex = _ref4.rowIndex;
+  direction: 'vertical',
+  count: 0,
+  lineSpacing: 0,
+  inneritemSpacing: 0,
+  width: -1,
+  height: -1,
+  itemWidth: 0,
+  itemHeight: 0,
+  itemKey: function itemKey(_ref2) {
+    var columnIndex = _ref2.columnIndex,
+        rowIndex = _ref2.rowIndex;
     return rowIndex + '-' + columnIndex;
   },
-  renderCell: function renderCell() {
+  renderItem: function renderItem() {
     return null;
@@ -197,61 +177,143 @@ },
 
-function needsRender(origin, size, vOrigin, vSize, name) {
+function needsRender(cellRect, visibleRect, name) {
   if (name) {
-    var dOrigin = origin - vOrigin;
-    return -0.25 * vSize < dOrigin + size && dOrigin < 1.25 * vSize;
+    var dx = cellRect.x - visibleRect.x;
+    return -0.25 * visibleRect.width < dx + cellRect.width && dx < 1.25 * visibleRect.width;
   }
 
-  return needsRender(origin.x, size.width, vOrigin.x, vSize.width, 'x') && needsRender(origin.y, size.height, vOrigin.y, vSize.height, 'y');
+  return needsRender({
+    x: cellRect.x,
+    width: cellRect.width
+  }, {
+    x: visibleRect.x,
+    width: visibleRect.width
+  }, 'x') && needsRender({
+    x: cellRect.y,
+    width: cellRect.height
+  }, {
+    x: visibleRect.y,
+    width: visibleRect.height
+  }, 'y');
 }
 
-function calculateDerivedState(count, sizeFn, sizeHashFn, originList, sizeDict) {
-  var shouldUpdateOriginList = originList.length !== count;
-  var nextOriginList = [];
-  var nextSize = 0;
-  var nextSizeDict;
-  var nextState = {};
+function calculateIndexForLayoutAttrs(index, count, direction) {
+  if (!direction) {
+    return index.column + index.row * count.column;
+  }
 
-  for (var index = 0; index < count; index++) {
-    var size = void 0;
+  if (direction === 'vertical') {
+    return calculateIndexForLayoutAttrs({
+      row: index.row,
+      column: index.column
+    }, {
+      row: count.row,
+      column: count.column
+    });
+  } else if (direction === 'horizontal') {
+    return calculateIndexForLayoutAttrs({
+      row: index.column,
+      column: index.row
+    }, {
+      row: count.column,
+      column: count.row
+    });
+  }
+}
 
-    if (typeof sizeFn === 'number') {
-      size = sizeFn;
+function calculateLayout(size, itemSize, lineSpacing, inneritemSpacing, count, direction) {
+  if (!direction) {
+    var sizeWidth = size.width;
+    var sizeHeight = 0;
+    var columnCount = 0;
+    var rowCount = 0;
+    var layoutAttrs = [];
+
+    if (sizeWidth < 0) {
+      sizeWidth = count * itemSize.width + (count <= 1 ? 0 : (count - 1) * inneritemSpacing);
+      columnCount = count;
     } else {
-      var sizeHash = sizeHashFn({
-        index: index
-      });
-      size = sizeDict[sizeHash];
+      if (itemSize.width === 0 && lineSpacing === 0) {
+        columnCount = count;
+      } else {
+        columnCount = 1 + (sizeWidth < itemSize.width ? 0 : Math.floor((sizeWidth - itemSize.width) / (itemSize.width + inneritemSpacing)));
+      }
+    }
 
-      if (size === undefined) {
-        size = sizeFn({
-          index: index
-        });
+    if (columnCount > 0) {
+      rowCount = Math.ceil(count / columnCount);
+    }
 
-        if (!nextSizeDict) {
-          nextSizeDict = _extends({}, sizeDict);
+    if (rowCount > 0) {
+      for (var rowIndex = 0; rowIndex < rowCount; rowIndex++) {
+        if (rowIndex > 0) {
+          sizeHeight += lineSpacing + itemSize.height;
         }
 
-        nextSizeDict[sizeHash] = size;
+        for (var columnIndex = 0; columnIndex < columnCount; columnIndex++) {
+          var index = columnIndex + rowIndex * columnCount;
+
+          if (index < count) {
+            layoutAttrs.push({
+              x: Math.round(columnIndex * ((sizeWidth - itemSize.width) / (columnCount - 1))),
+              y: sizeHeight,
+              width: itemSize.width,
+              height: itemSize.height,
+              rowIndex: rowIndex,
+              columnIndex: columnIndex
+            });
+          }
+        }
       }
-    }
 
-    nextSize += size;
-
-    if (originList[index] !== nextSize) {
-      shouldUpdateOriginList = true;
+      sizeHeight += itemSize.height;
     }
 
-    nextOriginList[index] = nextSize;
+    return {
+      rowCount: rowCount,
+      columnCount: columnCount,
+      sizeWidth: sizeWidth,
+      sizeHeight: sizeHeight,
+      layoutAttrs: layoutAttrs
+    };
   }
 
-  if (shouldUpdateOriginList) {
-    nextState.originList = nextOriginList;
-  }
+  if (direction === 'vertical') {
+    var layout = calculateLayout({
+      width: size.width,
+      height: size.height
+    }, {
+      width: itemSize.width,
+      height: itemSize.height
+    }, lineSpacing, inneritemSpacing, count);
+    return {
+      sizeWidth: layout.sizeWidth,
+      sizeHeight: layout.sizeHeight,
+      rowCount: layout.rowCount,
+      columnCount: layout.columnCount,
+      layoutAttrs: layout.layoutAttrs
+    };
+  } else if (direction === 'horizontal') {
+    var _layout = calculateLayout({
+      width: size.height,
+      height: size.width
+    }, {
+      width: itemSize.height,
+      height: itemSize.width
+    }, lineSpacing, inneritemSpacing, count);
 
-  if (nextSizeDict) {
-    nextState.sizeDict = nextSizeDict;
+    return {
+      sizeWidth: _layout.sizeHeight,
+      sizeHeight: _layout.sizeWidth,
+      rowCount: _layout.columnCount,
+      columnCount: _layout.rowCount,
+      layoutAttrs: _layout.layoutAttrs.map(function (attrs) {
+        return {
+          x: attrs.y,
+          y: attrs.x,
+          width: attrs.height,
+          height: attrs.width
+        };
+      })
+    };
   }
-
-  nextState.size = nextSize;
-  return nextState;
 }

lib/GridContent.js

@@ -8,4 +8,2 @@ "use strict";
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
@@ -29,10 +27,7 @@
     _this.state = {
-      size: {
-        width: 0,
-        height: 0
-      },
-      widthDict: {},
-      heightDict: {},
-      xList: [],
-      yList: []
+      rowCount: 0,
+      columnCount: 0,
+      sizeWidth: 0,
+      sizeHeight: 0,
+      layoutAttrs: []
     };
@@ -42,74 +37,90 @@ return _this;
 
-  GridContent.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
-    var columnWidth = props.columnWidth,
-        rowHeight = props.rowHeight,
-        columnCount = props.columnCount,
-        rowCount = props.rowCount,
-        rowHeightHash = props.rowHeightHash,
-        columnWidthHash = props.columnWidthHash,
-        onResize = props.onResize;
-    var xList = state.xList,
-        yList = state.yList,
-        widthDict = state.widthDict,
-        heightDict = state.heightDict,
-        size = state.size;
-    var nextState = {};
-    var nextSize = (0, _extends2.default)({}, size);
-    var rowState = calculateDerivedState(rowCount, rowHeight, rowHeightHash, yList, heightDict);
+  var _proto = GridContent.prototype;
 
-    if (rowState.originList) {
-      nextState.yList = rowState.originList;
-    }
+  _proto.componentDidMount = function componentDidMount() {
+    this._calculateLayout();
+  };
 
-    if (rowState.sizeDict) {
-      nextState.heightDict = rowState.sizeDict;
-    }
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var _this$props = this.props,
+        width = _this$props.width,
+        height = _this$props.height,
+        itemWidth = _this$props.itemWidth,
+        itemHeight = _this$props.itemHeight,
+        lineSpacing = _this$props.lineSpacing,
+        inneritemSpacing = _this$props.inneritemSpacing,
+        count = _this$props.count,
+        direction = _this$props.direction;
 
-    nextSize.height = rowState.size;
-    var columnState = calculateDerivedState(columnCount, columnWidth, columnWidthHash, xList, widthDict);
-
-    if (columnState.originList) {
-      nextState.xList = columnState.originList;
+    if (prevProps.width !== width || prevProps.height !== height || prevProps.itemWidth !== itemWidth || prevProps.itemHeight !== itemHeight || prevProps.lineSpacing !== lineSpacing || prevProps.inneritemSpacing !== inneritemSpacing || prevProps.count !== count || prevProps.direction !== direction) {
+      this._calculateLayout();
     }
+  };
 
-    if (columnState.sizeDict) {
-      nextState.widthDict = columnState.sizeDict;
-    }
+  _proto._calculateLayout = function _calculateLayout() {
+    this.setState(function (state, props) {
+      var width = props.width,
+          height = props.height,
+          itemWidth = props.itemWidth,
+          itemHeight = props.itemHeight,
+          lineSpacing = props.lineSpacing,
+          inneritemSpacing = props.inneritemSpacing,
+          count = props.count,
+          direction = props.direction,
+          onResize = props.onResize;
+      var nextState = calculateLayout({
+        width: width,
+        height: height
+      }, {
+        width: itemWidth,
+        height: itemHeight
+      }, lineSpacing, inneritemSpacing, count, direction);
 
-    nextSize.width = columnState.size;
+      if (state.sizeWidth !== nextState.sizeWidth || state.sizeHeight !== nextState.sizeHeight) {
+        onResize({
+          width: nextState.sizeWidth,
+          height: nextState.sizeHeight
+        });
+      }
 
-    if (nextSize.width !== size.width || nextSize.height !== size.height) {
-      onResize(nextSize);
-      nextState.size = nextSize;
-    }
-
-    return nextState;
+      return nextState;
+    });
   };
 
-  var _proto = GridContent.prototype;
-
-  _proto.getCellRect = function getCellRect(_ref) {
+  _proto.getItemRect = function getItemRect(_ref) {
     var rowIndex = _ref.rowIndex,
         columnIndex = _ref.columnIndex;
+    var direction = this.props.direction;
     var _this$state = this.state,
-        xList = _this$state.xList,
-        yList = _this$state.yList;
-    var x = xList[columnIndex - 1] || 0;
-    var y = yList[rowIndex - 1] || 0;
-    var x2 = xList[columnIndex] || 0;
-    var y2 = yList[rowIndex] || 0;
-    return {
-      x: x,
-      y: y,
-      width: x2 - x,
-      height: y2 - y
-    };
+        rowCount = _this$state.rowCount,
+        columnCount = _this$state.columnCount,
+        layoutAttrs = _this$state.layoutAttrs;
+    var index = calculateIndexForLayoutAttrs({
+      row: rowIndex,
+      column: columnIndex
+    }, {
+      row: rowCount,
+      column: columnCount
+    }, direction);
+
+    if (index < layoutAttrs.length) {
+      var attrs = layoutAttrs[index];
+      return {
+        x: attrs.x,
+        y: attrs.y,
+        width: attrs.width,
+        height: attrs.height
+      };
+    }
+
+    return null;
   };
 
   _proto.render = function render() {
-    var _this$props = this.props,
-        visibleRect = _this$props.visibleRect,
-        renderCell = _this$props.renderCell,
-        cellKey = _this$props.cellKey,
-        children = _this$props.children;
+    var _this$props2 = this.props,
+        visibleRect = _this$props2.visibleRect,
+        renderItem = _this$props2.renderItem,
+        itemKey = _this$props2.itemKey,
+        children = _this$props2.children;
+    var layoutAttrs = this.state.layoutAttrs;
 
@@ -120,45 +131,19 @@ if (typeof children === 'function') {
 
-    var _this$state2 = this.state,
-        xList = _this$state2.xList,
-        yList = _this$state2.yList;
     var grids = [];
 
-    for (var rowIndex = 0; rowIndex < yList.length; rowIndex++) {
-      for (var columnIndex = 0; columnIndex < xList.length; columnIndex++) {
-        var cellRect = this.getCellRect({
-          rowIndex: rowIndex,
-          columnIndex: columnIndex
-        });
+    for (var index = 0; index < layoutAttrs.length; index++) {
+      var attrs = layoutAttrs[index];
 
-        if (needsRender({
-          x: cellRect.x,
-          y: cellRect.y
-        }, {
-          width: cellRect.width,
-          height: cellRect.height
-        }, {
-          x: visibleRect.x,
-          y: visibleRect.y
-        }, {
-          width: visibleRect.width,
-          height: visibleRect.height
-        })) {
-          var cellStyle = {
-            position: 'absolute',
-            left: cellRect.x,
-            top: cellRect.y,
-            width: cellRect.width,
-            height: cellRect.width
-          };
-          grids.push(_react.default.createElement("div", {
-            key: cellKey({
-              columnIndex: columnIndex,
-              rowIndex: rowIndex
-            }),
-            style: cellStyle
-          }, renderCell({
-            columnIndex: columnIndex,
-            rowIndex: rowIndex
-          })));
-        }
+      if (needsRender(attrs, visibleRect)) {
+        var cellStyle = {
+          position: 'absolute',
+          left: attrs.x,
+          top: attrs.y,
+          width: attrs.width,
+          height: attrs.width
+        };
+        grids.push(_react.default.createElement("div", {
+          key: itemKey(attrs),
+          style: cellStyle
+        }, renderItem(attrs)));
       }
@@ -175,20 +160,16 @@ }
 GridContent.defaultProps = {
-  rowCount: 0,
-  columnCount: 0,
-  rowHeight: 0,
-  columnWidth: 0,
-  rowHeightHash: function rowHeightHash(_ref2) {
-    var rowIndex = _ref2.rowIndex;
-    return '' + rowIndex;
-  },
-  columnWidthHash: function columnWidthHash(_ref3) {
-    var columnIndex = _ref3.columnIndex;
-    return '' + columnIndex;
-  },
-  cellKey: function cellKey(_ref4) {
-    var columnIndex = _ref4.columnIndex,
-        rowIndex = _ref4.rowIndex;
+  direction: 'vertical',
+  count: 0,
+  lineSpacing: 0,
+  inneritemSpacing: 0,
+  width: -1,
+  height: -1,
+  itemWidth: 0,
+  itemHeight: 0,
+  itemKey: function itemKey(_ref2) {
+    var columnIndex = _ref2.columnIndex,
+        rowIndex = _ref2.rowIndex;
     return rowIndex + '-' + columnIndex;
   },
-  renderCell: function renderCell() {
+  renderItem: function renderItem() {
     return null;
@@ -205,61 +186,143 @@ },
 
-function needsRender(origin, size, vOrigin, vSize, name) {
+function needsRender(cellRect, visibleRect, name) {
   if (name) {
-    var dOrigin = origin - vOrigin;
-    return -0.25 * vSize < dOrigin + size && dOrigin < 1.25 * vSize;
+    var dx = cellRect.x - visibleRect.x;
+    return -0.25 * visibleRect.width < dx + cellRect.width && dx < 1.25 * visibleRect.width;
   }
 
-  return needsRender(origin.x, size.width, vOrigin.x, vSize.width, 'x') && needsRender(origin.y, size.height, vOrigin.y, vSize.height, 'y');
+  return needsRender({
+    x: cellRect.x,
+    width: cellRect.width
+  }, {
+    x: visibleRect.x,
+    width: visibleRect.width
+  }, 'x') && needsRender({
+    x: cellRect.y,
+    width: cellRect.height
+  }, {
+    x: visibleRect.y,
+    width: visibleRect.height
+  }, 'y');
 }
 
-function calculateDerivedState(count, sizeFn, sizeHashFn, originList, sizeDict) {
-  var shouldUpdateOriginList = originList.length !== count;
-  var nextOriginList = [];
-  var nextSize = 0;
-  var nextSizeDict;
-  var nextState = {};
+function calculateIndexForLayoutAttrs(index, count, direction) {
+  if (!direction) {
+    return index.column + index.row * count.column;
+  }
 
-  for (var index = 0; index < count; index++) {
-    var size = void 0;
+  if (direction === 'vertical') {
+    return calculateIndexForLayoutAttrs({
+      row: index.row,
+      column: index.column
+    }, {
+      row: count.row,
+      column: count.column
+    });
+  } else if (direction === 'horizontal') {
+    return calculateIndexForLayoutAttrs({
+      row: index.column,
+      column: index.row
+    }, {
+      row: count.column,
+      column: count.row
+    });
+  }
+}
 
-    if (typeof sizeFn === 'number') {
-      size = sizeFn;
+function calculateLayout(size, itemSize, lineSpacing, inneritemSpacing, count, direction) {
+  if (!direction) {
+    var sizeWidth = size.width;
+    var sizeHeight = 0;
+    var columnCount = 0;
+    var rowCount = 0;
+    var layoutAttrs = [];
+
+    if (sizeWidth < 0) {
+      sizeWidth = count * itemSize.width + (count <= 1 ? 0 : (count - 1) * inneritemSpacing);
+      columnCount = count;
     } else {
-      var sizeHash = sizeHashFn({
-        index: index
-      });
-      size = sizeDict[sizeHash];
+      if (itemSize.width === 0 && lineSpacing === 0) {
+        columnCount = count;
+      } else {
+        columnCount = 1 + (sizeWidth < itemSize.width ? 0 : Math.floor((sizeWidth - itemSize.width) / (itemSize.width + inneritemSpacing)));
+      }
+    }
 
-      if (size === undefined) {
-        size = sizeFn({
-          index: index
-        });
+    if (columnCount > 0) {
+      rowCount = Math.ceil(count / columnCount);
+    }
 
-        if (!nextSizeDict) {
-          nextSizeDict = (0, _extends2.default)({}, sizeDict);
+    if (rowCount > 0) {
+      for (var rowIndex = 0; rowIndex < rowCount; rowIndex++) {
+        if (rowIndex > 0) {
+          sizeHeight += lineSpacing + itemSize.height;
         }
 
-        nextSizeDict[sizeHash] = size;
+        for (var columnIndex = 0; columnIndex < columnCount; columnIndex++) {
+          var index = columnIndex + rowIndex * columnCount;
+
+          if (index < count) {
+            layoutAttrs.push({
+              x: Math.round(columnIndex * ((sizeWidth - itemSize.width) / (columnCount - 1))),
+              y: sizeHeight,
+              width: itemSize.width,
+              height: itemSize.height,
+              rowIndex: rowIndex,
+              columnIndex: columnIndex
+            });
+          }
+        }
       }
-    }
 
-    nextSize += size;
-
-    if (originList[index] !== nextSize) {
-      shouldUpdateOriginList = true;
+      sizeHeight += itemSize.height;
     }
 
-    nextOriginList[index] = nextSize;
+    return {
+      rowCount: rowCount,
+      columnCount: columnCount,
+      sizeWidth: sizeWidth,
+      sizeHeight: sizeHeight,
+      layoutAttrs: layoutAttrs
+    };
   }
 
-  if (shouldUpdateOriginList) {
-    nextState.originList = nextOriginList;
-  }
+  if (direction === 'vertical') {
+    var layout = calculateLayout({
+      width: size.width,
+      height: size.height
+    }, {
+      width: itemSize.width,
+      height: itemSize.height
+    }, lineSpacing, inneritemSpacing, count);
+    return {
+      sizeWidth: layout.sizeWidth,
+      sizeHeight: layout.sizeHeight,
+      rowCount: layout.rowCount,
+      columnCount: layout.columnCount,
+      layoutAttrs: layout.layoutAttrs
+    };
+  } else if (direction === 'horizontal') {
+    var _layout = calculateLayout({
+      width: size.height,
+      height: size.width
+    }, {
+      width: itemSize.height,
+      height: itemSize.width
+    }, lineSpacing, inneritemSpacing, count);
 
-  if (nextSizeDict) {
-    nextState.sizeDict = nextSizeDict;
+    return {
+      sizeWidth: _layout.sizeHeight,
+      sizeHeight: _layout.sizeWidth,
+      rowCount: _layout.columnCount,
+      columnCount: _layout.rowCount,
+      layoutAttrs: _layout.layoutAttrs.map(function (attrs) {
+        return {
+          x: attrs.y,
+          y: attrs.x,
+          width: attrs.height,
+          height: attrs.width
+        };
+      })
+    };
   }
-
-  nextState.size = nextSize;
-  return nextState;
 }

package.json

 {
   "name": "react-pannable",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "",
   "keywords": [
     "react",
-    "react-component"
+    "scroll",
+    "grid",
+    "page",
+    "pan",
+    "drag"
   ],
@@ -9,0 +13,0 @@ "homepage": "https://github.com/n43/react-pannable",

README.md

@@ -123,2 +123,10 @@ # react-pannable
 type Rect = { x: number, y: number, width: number, height: number };
+type LayoutAttrs = {
+  rowIndex: number,
+  columnIndex: number,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+};
 ```
@@ -128,18 +136,20 @@
 
-| Property        |      Type       |                        DefaultValue                         | Description                                                                                  |
-| :-------------- | :-------------: | :---------------------------------------------------------: | :------------------------------------------------------------------------------------------- |
-| rowCount        |     number      |                              0                              | the number of rows.                                                                          |
-| columnCount     |     number      |                              0                              | the number of columns.                                                                       |
-| rowHeight       | number,function |                              0                              | the height of the specified row.                                                             |
-| columnWidth     | number,function |                              0                              | the width of the specified column.                                                           |
-| rowHeightHash   |    function     |               ({ rowIndex }) => '' + rowIndex               | the hash of the row's height.:`({ rowIndex: number }) => string`                             |
-| columnWidthHash |    function     |            ({ columnIndex }) => '' + columnIndex            | the hash of the column's width.:`({ columnIndex: number }) => string`                        |
-| cellKey         |    function     | ({ columnIndex, rowIndex }) => rowIndex + '-' + columnIndex | the key of the specified cell.:`({ rowIndex: number, columnIndex: number }) => string`       |
-| renderCell      |    function     |                         () => null                          | the renderer of the specified cell.:`({ rowIndex: number, columnIndex: number }) => element` |
-| visibleRect     |      Rect       |             { x: 0, y: 0, width: 0, height: 0 }             | the area of the visible content.                                                             |
-| onResize        |    function     |                          () => {}                           | Callback invoked when the content resize.:`(size: Size) => {}`                               |
+| Property         |          Type           |                           DefaultValue                           | Description                                                                                   |
+| :--------------- | :---------------------: | :--------------------------------------------------------------: | :-------------------------------------------------------------------------------------------- |
+| direction        | 'vertical','horizontal' |                            'vertical'                            | the direction of the grid.                                                                    |
+| count            |         number          |                                0                                 | the number of items.                                                                          |
+| lineSpacing      |         number          |                                0                                 | The minimum spacing to use between lines of items in the grid.                                |
+| inneritemSpacing |         number          |                                0                                 | The minimum spacing to use between items in the same row.                                     |
+| width            |         number          |                                -1                                | The width of the content. If you set this property to `-1`, it shrinks the content's width.   |
+| height           |         number          |                                -1                                | The height of the content. If you set this property to `-1`, it shrinks the content's height. |
+| itemWidth        |         number          |                                0                                 | The width of the item.                                                                        |
+| itemHeight       |         number          |                                0                                 | The height of the item.                                                                       |
+| itemKey          |        function         | (attrs: LayoutAttrs) => attrs.rowIndex + '-' + attrs.columnIndex | the key of the specified cell.:`({ rowIndex: number, columnIndex: number }) => string`        |
+| renderItem       |        function         |                            () => null                            | the renderer of the item.:`(attrs: LayoutAttrs) => element`                                   |
+| visibleRect      |          Rect           |               { x: 0, y: 0, width: 0, height: 0 }                | the area of the visible content.                                                              |
+| onResize         |        function         |                             () => {}                             | Callback invoked when the content resize.:`(size: Size) => {}`                                |
 
 #### Public Methods
 
-##### getCellRect({ rowIndex: number, columnIndex: number })
+##### getItemRect({ rowIndex: number, columnIndex: number })
 
@@ -146,0 +156,0 @@ Returns the area of cell at the specified indexes.

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

241496

increased by3.44%

Lines of code

5555

increased by3.79%

Number of lines in readme file

159

increased by6.71%

No dependency changes