react-pannable - npm Package Compare versions

Comparing version 0.6.0 to 0.6.1

dist/react-pannable.min.js

@@ -1,1 +0,1 @@
-!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,p){"use strict";function v(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 m(){return(m=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}p=p&&p.hasOwnProperty("default")?p.default:p;var e,u={create:function(t){var e,n=t.transformTranslate;return m({},v(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)}},h=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,interval:null,velocity:null,startPoint:null,movePoint:null,moveTime:null},o.elemRef=p.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._removeMousePanListener(),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({startPoint:{x:t.pageX,y:t.pageY},movePoint:{x:t.pageX,y:t.pageY},moveTime:(new Date).getTime()})},e._move=function(p){p={target:p.target,pageX:p.pageX,pageY:p.pageY},this.setState(function(t,e){var n=e.shouldStart,i=e.onStart,o=e.onMove,r=t.target,a=t.startPoint,s=t.movePoint,c=t.moveTime;if(!a)return null;var l=(new Date).getTime(),d={x:p.pageX,y:p.pageY},u=l-c,h={x:d.x-a.x,y:d.y-a.y},f={x:(d.x-s.x)/u,y:(d.y-s.y)/u},g={translation:h,velocity:f,interval:u,movePoint:d,moveTime:l};r?o({target:r,translation:h,velocity:f,interval:u}):0<Math.sqrt(h.x*h.x+h.y*h.y)&&n({target:p.target,translation:h,velocity:f,interval:u})&&(g.target=p.target,g.startPoint={x:p.pageX,y:p.pageY},g.translation=h={x:0,y:0},i({target:p.target,translation:h,velocity:f,interval:u}));return g})},e._end=function(){this.setState(function(t,e){var n=t.target;return n&&e.onEnd({target:n,translation:t.translation,velocity:t.velocity,interval:t.interval}),{target:null,translation:null,velocity:null,interval:null,startPoint:null,movePoint:null,moveTime: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,interval:t.interval}),{target:null,translation:null,velocity:null,interval:null,startPoint:null,movePoint:null,moveTime: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=v(t,["enabled","shouldStart","onStart","onMove","onEnd","onCancel","style"]),o=u.create(m({touchAction:e?"none":"auto"},n));return p.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}))},t}(p.PureComponent);h.defaultProps={enabled:!0,shouldStart:function(){return!0},onStart:function(){},onMove:function(){},onEnd:function(){},onCancel:function(){}};var d=(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(){},f=e.cancelAnimationFrame||e.webkitCancelAnimationFrame||e.mozCancelAnimationFrame||e.clearTimeout||function(){};function y(t,e){var n=e.x,i=e.y,o=Math.sqrt(n*n+i*i);return 0===o?{x:0,y:0}:{x:t*(n/o),y:t*(i/o)}}function g(t,e,n,i,o){if(o){var r="y"===o?["y","height"]:["x","width"],a=r[1],s=t[r[0]];return s=Math.max(Math.min(e[a]-n[a],0),Math.min(s,0)),i&&(s=e[a]?e[a]*Math.round(s/e[a]):0),s}return{x:g(t,e,n,i,"x"),y:g(t,e,n,i,"y")}}var b=.04,a=function(n){function t(t){var e;return(e=n.call(this,t)||this)._onDragStart=function(t){var r=t.velocity;e.setState(function(t,e){var n=t.contentOffset,i=e.directionalLockEnabled?Math.abs(r.y)<Math.abs(r.x)?"x":"y":"xy",o={x:"y"===i?0:r.x,y:"x"===i?0:r.y};return{contentOffset:m({},n),contentVelocity:o,dragging:!0,dragStartOffset:n,dragDirection:i,decelerating:!1}})},e._onDragMove=function(t){var a=t.translation,s=t.interval;e.setState(function(t,e){var n=t.contentOffset,i=t.dragStartOffset,o=t.dragDirection,r=function t(e,n,i,o,r){if(r){var a="y"===r?["y","height","width"]:["x","width","height"],s=a[0],c=a[1],l=a[2],d=e[s],u=Math.min(i[c]-o[c],0),h=.5*Math.min(i[c],i[l]);return 0<d?n[s]?h*(1-h/(h+d)):0:d<u?n[s]?u-h*(1-h/(h-d+u)):u:d}return{x:t(e,n,i,o,"x"),y:t(e,n,i,o,"y")}}({x:i.x+("y"===o?0:a.x),y:i.y+("x"===o?0:a.y)},{x:e.alwaysBounceX,y:e.alwaysBounceY},t.size,t.contentSize);return{contentOffset:r,contentVelocity:{x:(r.x-n.x)/s,y:(r.y-n.y)/s}}})},e._onDragEnd=function(){e.setState(function(t,e){var n=t.contentOffset,i=t.size,o=t.contentSize,r=e.pagingEnabled,a=r?b:.004,s=function t(e,n,i,o){if(o){var r=e[o];return i[o]&&(r+=.5*n[o]*(n[o]/i[o])),r}return"number"==typeof i&&(i=y(i,n)),{x:t(e,n,i,"x"),y:t(e,n,i,"y")}}(n,t.contentVelocity,a);return s=g(s,i,o,r),r&&(s=function t(e,n,i,o,r){if(r){var a="y"===r?["y","height"]:["x","width"],s=a[0],c=a[1],l=n[s],d=Math.min(i[c]-o[c],0);return d=Math.max(d,Math.min(e[s],0)),l=Math.max(d=i[c]?i[c]*Math.floor(e[s]/i[c]):0,Math.min(l,d+i[c]))}return{x:t(e,n,i,o,"x"),y:t(e,n,i,o,"y")}}(n,s,i,o)),{contentOffset:m({},n),dragging:!1,decelerating:!0,decelerationEndOffset:s,decelerationRate:a}})},e._onDragCancel=function(){e.setState(function(t,e){var n=t.dragStartOffset,i=t.size,o=t.contentSize,r=e.pagingEnabled;return{contentOffset:m({},t.contentOffset),dragging:!1,decelerating:!0,decelerationEndOffset:g(n,i,o,r),decelerationRate:b}})},e.state={prevContentOffset:null,contentOffset:{x:0,y:0},contentVelocity:{x:0,y:0},size:{width:t.width,height:t.height},contentSize:{width:t.contentWidth,height:t.contentHeight},dragging:!1,dragStartOffset:null,dragDirection:"xy",decelerating:!1,decelerationEndOffset:null,decelerationRate:b},e.boundingRef=p.createRef(),e.contentRef=p.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.contentOffset,i=e.contentVelocity,o=e.size,r=e.contentSize,a=e.dragging,s=e.decelerating,c=e.decelerationEndOffset,l={};if(e.prevContentOffset!==n){var d=s;if(d){if(e.decelerationRate!==b){var u=g(n,o,r,!1);n.x===u.x&&n.y===u.y||(l.decelerationRate=b)}c.x===n.x&&c.y===n.y&&0===i.x&&0===i.y&&(d=!1)}l.prevContentOffset=n,d!==s&&(l.decelerating=d),t.onScroll({contentOffset:n,contentVelocity:i,size:o,contentSize:r,dragging:a,decelerating:d})}return l};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,c=i.pagingEnabled;(t.width===o&&t.height===r||this._setStateWithScroll({size:{width:o,height:r}},!0),t.contentWidth!==a||t.contentHeight!==s)&&this._setStateWithScroll({contentSize:{width:a,height:s}},!0);if(t.pagingEnabled!==c&&c&&this._setStateWithScroll(null,!0),e.contentOffset!==this.state.contentOffset&&this.state.decelerating){var l=(new Date).getTime();this._deceleratingTimer&&f(this._deceleratingTimer),this._deceleratingTimer=d(function(){n._deceleratingTimer=void 0,n._decelerate((new Date).getTime()-l)})}},e.componentWillUnmount=function(){this._deceleratingTimer&&(f(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(t){this._setStateWithScroll({contentSize:t},!0)},e.scrollToRect=function(t){var e=t.rect,n=t.align,i=void 0===n?"auto":n;this._setStateWithScroll(function(t){return{contentOffset:function t(e,n,i,o,r){if(r){var a="y"===r?["y","height"]:["x","width"],s=a[0],c=a[1],l=-e[s],d=o[c]-e[c];if("auto"===n[s]){var u=d<0?-1:1;l+=u*Math.max(0,Math.min(u*(i[s]-l),u*d))}else"start"===n[s]?n[s]=0:"center"===n[s]?n[s]=.5:"end"===n[s]&&(n[s]=1),("number"!=typeof n[s]||isNaN(n[s]))&&(n[s]=.5),l+=n[s]*d;return l}return"object"!=typeof n&&(n={x:n,y:n}),{x:t(e,n,i,o,"x"),y:t(e,n,i,o,"y")}}(e,i,t.contentOffset,t.size)}},t.animated)},e.scrollTo=function(t){this._setStateWithScroll({contentOffset:t.offset},t.animated)},e._setStateWithScroll=function(a,s){this.setState(function(t,e){"function"==typeof a&&(a=a(t,e));var n=a||{},i=n.contentOffset,o=v(n,["contentOffset"]),r=t.contentOffset;return t.dragging?o:(i||(i=r),i=g(i,o.size||t.size,o.contentSize||t.contentSize,e.pagingEnabled),m({},o,s?{contentOffset:m({},r),decelerating:!0,decelerationEndOffset:i,decelerationRate:b}:{contentOffset:i,contentVelocity:{x:0,y:0},decelerating:!1}))})},e._decelerate=function(n){this.setState(function(t){if(!t.decelerating)return null;var e=function t(e,n,i,o,r,a,s){if(s){var c="y"===s?["y","height"]:["x","width"],l=c[0],d=c[1],u=o[l],h=i[l];if(n[l]){var f=n[l]<0?-1:1,g=f*Math.sqrt(.5*h*h+n[l]*(r[l]-u)),p=(g-h)/n[l];p<0&&(g=h,p=0),(2*g-h)/n[l]<e?(h=0,u=r[l]):0<f*(r[l]-(u+=.5*(i[l]+g)*p-.5*(g+(h=g-n[l]*Math.abs(p-e)))*(p-e)))||(h=(h<0?-1:1)*Math.min(Math.abs(h),Math.sqrt(2*f*n[l]*.25*a[d])))}else u+=h*e;return{offset:u,velocity:h}}"number"==typeof n&&(n=y(n,{x:r.x-o.x,y:r.y-o.y}));var v=t(e,n,i,o,r,a,"x"),m=t(e,n,i,o,r,a,"y");return{offset:{x:v.offset,y:m.offset},velocity:{x:v.velocity,y:m.velocity}}}(n,t.decelerationRate,t.contentVelocity,t.contentOffset,t.decelerationEndOffset,t.size);return{contentOffset:e.offset,contentVelocity:e.velocity}})},e.render=function(){var t=this.props,e=t.scrollEnabled,n=t.style,i=t.children,o=v(t,["width","height","contentWidth","contentHeight","scrollEnabled","pagingEnabled","directionalLockEnabled","alwaysBounceX","alwaysBounceY","style","children"]),r=this.state,a=r.size,s=r.contentSize,c=r.contentOffset,l=u.create(m({overflow:"hidden",position:"relative",boxSizing:"border-box",width:a.width,height:a.height},n)),d=u.create({position:"relative",boxSizing:"border-box",width:s.width,height:s.height,transformTranslate:[c.x,c.y]});return p.createElement(h,m({},o,{ref:this.boundingRef,style:l,enabled:e,onStart:this._onDragStart,onMove:this._onDragMove,onEnd:this._onDragEnd,onCancel:this._onDragCancel}),p.createElement("div",{ref:this.contentRef,style:d},"function"==typeof i?i(this):i))},t}(p.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 n(t,e){return t(e={exports:{}},e.exports),e.exports}a.defaultProps={children:null,width:0,height:0,contentWidth:0,contentHeight:0,scrollEnabled:!0,pagingEnabled:!1,directionalLockEnabled:!1,alwaysBounceX:!0,alwaysBounceY:!0,onScroll:function(){}};var i=n(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}}}),w=n(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}}),l=n(function(t){(t.exports={}).getOption=function(t,e,n){var i=t[e];return null!=i||void 0===n?i:n}}),x=function(t){var e=(t=t||{}).reporter,n=l.getOption(t,"async",!0),i=l.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=S(),a=!1;function s(){for(a=!0;r.size();){var t=r;r=S(),t.process()}a=!1}function c(){o=setTimeout(s,0)}return{add:function(t,e){!a&&i&&n&&0===r.size()&&c(),r.add(t,e)},force:function(t){a||(void 0===t&&(t=n),o&&(clearTimeout(o),o=null),t?c():s())}}};function S(){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 o="_erd";function c(t){return t[o]}var z={initState:function(t){return t[o]={},c(t)},getState:c,cleanState:function(t){delete t[o]}},D=i.forEach,_=function(t){var x=(t=t||{}).reporter,S=t.batchProcessor,z=t.stateHandler.getState,_=t.idHandler;if(!S)throw Error("Missing required dependency: batchProcessor");if(!x)throw Error("Missing required dependency: reporter.");var E=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 M(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 C(t){return z(t).container.childNodes[0].childNodes[0].childNodes[0]}function I(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 m(){if(a.debug){var t=Array.prototype.slice.call(arguments);if(t.unshift(_.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(m("storeStyle invoked."),z(v)){var t=e();z(v).style=t}else m("Aborting because element has been uninstalled")}function c(t,e,n){z(t).lastWidth=e,z(t).lastHeight=n}function l(){return 2*E.width+1}function d(){return 2*E.height+1}function u(t){return t+10+l()}function h(t){return t+10+d()}function f(t,e,n){var i=C(t),o=I(t),r=u(e),a=h(n),s=2*e+l(),c=2*n+d();i.scrollLeft=r,i.scrollTop=a,o.scrollLeft=s,o.scrollTop=c}function y(){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()};M(t,"animationstart",e),z(v).onAnimationStart=e}return t}function i(){if(m("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=y());var e,n,i,o,r=E.width,a=E.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")+";",c=document.createElement("div"),l=document.createElement("div"),d=document.createElement("div"),u=document.createElement("div"),h=document.createElement("div"),f=document.createElement("div");c.dir="ltr",c.style.cssText="position: absolute; flex: none; overflow: hidden; z-index: -1; visibility: hidden; width: 100%; height: 100%; left: 0px; top: 0px;",l.className=c.className=T,l.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),l.appendChild(d),l.appendChild(h),c.appendChild(l),t.appendChild(c),M(d,"scroll",g),M(h,"scroll",p),z(v).onExpandScroll=g,z(v).onShrinkScroll=p}else m("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=C(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;m("Storing current size",e,n),c(v,e,n),S.add(0,function(){z(v)?o()?(a.debug&&(v.offsetWidth===e&&v.offsetHeight===n||x.warn(_.get(v),"Scroll: Size changed before updating detector elements.")),i(v,e,n)):m("Aborting because element container has not been initialized"):m("Aborting because element has been uninstalled")}),S.add(1,function(){z(v)?o()?f(v,e,n):m("Aborting because element container has not been initialized"):m("Aborting because element has been uninstalled")}),t&&S.add(2,function(){z(v)?o()?t():m("Aborting because element container has not been initialized"):m("Aborting because element has been uninstalled")})}function o(){return!!z(v).container}function r(){m("notifyListenersIfNeeded invoked");var t=z(v);return void 0===z(v).lastNotifiedWidth&&t.lastWidth===t.startSize.width&&t.lastHeight===t.startSize.height?m("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?m("Not notifying: Size already notified"):(m("Current size not notified, notifying..."),t.lastNotifiedWidth=t.lastWidth,t.lastNotifiedHeight=t.lastHeight,void D(z(v).listeners,function(t){t(v)}))}function t(){if(m("Scroll detected."),s(v))m("Scroll event fired while unrendered. Ignoring...");else{var t=v.offsetWidth,e=v.offsetHeight;t!==z(v).lastWidth||e!==z(v).lastHeight?(m("Element size changed."),n(r)):m("Element size has not changed ("+t+"x"+e+").")}}if(m("registerListenersAndPositionElements invoked."),z(v)){z(v).onRendered=function(){if(m("startanimation triggered."),s(v))m("Ignoring since element is still unrendered...");else{m("Element rendered.");var t=C(v),e=I(v);0!==t.scrollLeft&&0!==t.scrollTop&&0!==e.scrollLeft&&0!==e.scrollTop||(m("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 m("Aborting because element has been uninstalled")}function r(){if(m("finalizeDomMutation invoked."),z(v)){var t=z(v).style;c(v,t.width,t.height),f(v,t.width,t.height)}else m("Aborting because element has been uninstalled")}function g(){t(v)}function p(){var t;m("Installing..."),z(v).listeners=[],t=e(),z(v).startSize={width:t.width,height:t.height},m("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 b,w;t||(t=v,v=a,a=null),a=a||{},m("Making detectable..."),(w=b=v)!==w.ownerDocument.body&&!w.ownerDocument.body.contains(w)||null===window.getComputedStyle(b)?(m("Element is detached"),y(),m("Waiting until element is attached..."),z(v).onRendered=function(){m("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(C(t),"scroll",e.onExpandScroll),e.onShrinkScroll&&n(I(t),"scroll",e.onShrinkScroll),e.onAnimationStart&&n(e.container,"animationstart",e.onAnimationStart),e.container&&t.removeChild(e.container))}}},E=i.forEach;function T(t){return Array.isArray(t)||void 0!==t.length}function M(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 I(t,e,n){var i=t[e];return null==i&&void 0!==n?n:i}var O=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:z}).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=I(e,"batchProcessor",x({reporter:h})),f={};f.callOnAdd=!!I(e,"callOnAdd",!0),f.debug=!!I(e,"debug",!1);var c,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=(c={stateHandler:z}.stateHandler.getState,{isDetectable:function(t){var e=c(t);return e&&!!e.isDetectable},markAsDetectable:function(t){c(t).isDetectable=!0},isBusy:function(t){return!!c(t).busy},markBusy:function(t,e){c(t).busy=!!e}}),l=I(e,"strategy","object"),d={reporter:h,batchProcessor:s,stateHandler:z,idHandler:u};if("scroll"===l&&(w.isLegacyOpera()?(h.warn("Scroll strategy is not supported on legacy Opera. Changing to object strategy."),l="object"):w.isIE(9)&&(h.warn("Scroll strategy is not supported on IE9. Changing to object strategy."),l="object")),"scroll"===l)g=_(d);else{if("object"!==l)throw Error("Invalid strategy name: "+l);g=function(t){var s=(t=t||{}).reporter,c=t.batchProcessor,l=t.stateHandler.getState;if(!s)throw Error("Missing required dependency: reporter.");function i(t){return l(t).object}return{makeDetectable:function(t,e,n){n||(n=e,e=t,t=null),t=t||{},w.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)})},w.isIE()||(e.data="about:blank"),n.appendChild(e),l(n).object=e,w.isIE()&&(e.data="about:blank")}l(n).startSize={width:t,height:e},c?c.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)}w.isIE(8)?(l(t).object={proxy:n},t.attachEvent("onresize",n)):i(t).contentDocument.defaultView.addEventListener("resize",n)},uninstall:function(t){w.isIE(8)?t.detachEvent("onresize",l(t).object.proxy):t.removeChild(i(t)),delete l(t).object}}}(d)}var m={};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(!T(i))return h.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");i=M(i)}var s=0,c=I(t,"callOnAdd",f.callOnAdd),l=I(t,"onReady",function(){}),d=I(t,"debug",f.debug);E(i,function(t){z.getState(t)||(z.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(c,t,o),m[n]=m[n]||[],void m[n].push(function(){++s===i.length&&l()})):(d&&h.log(n,"Making detectable..."),v.markBusy(t,!0),g.makeDetectable({debug:d},t,function(t){if(d&&h.log(n,"onElementDetectable"),z.getState(t)){v.markAsDetectable(t),v.markBusy(t,!1),g.addListener(t,r),a(c,t,o);var e=z.getState(t);e&&e.startSize&&(e.startSize.width===t.offsetWidth&&e.startSize.height===t.offsetHeight||r(t)),m[n]&&E(m[n],function(t){t()})}else d&&h.log(n,"Element uninstalled before being detectable.");delete m[n],++s===i.length&&l()}));d&&h.log(n,"Already detecable, adding listener."),a(c,t,o),s++}),s===i.length&&l()},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(t))return h.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");t=M(t)}E(t,function(t){p.removeAllListeners(t),g.uninstall(t),z.cleanState(t)})}}}({strategy:"scroll"}),R=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=p.createRef(),t}r(t,o);var e=t.prototype;return e.componentDidMount=function(){this._calculateSize()},e.componentDidUpdate=function(t){var e=this.props;t.width===e.width&&t.height===e.height||this._calculateSize()},e.componentWillUnmount=function(){this._resizeNode&&(O.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 O.listenTo(this._resizeNode=a,function(){return e._calculateSize()})}t=s(this._resizeNode)}else this._resizeNode&&(O.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 p.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}(p.PureComponent);R.defaultProps={width:-1,height:-1,onResize:function(){}};var A=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},layoutAttrs:[],count:{row:0,column:0}},t}r(t,o);var e=t.prototype;return e.componentDidMount=function(){this._calculateLayout()},e.componentDidUpdate=function(t){var e=this.props;t.direction===e.direction&&t.width===e.width&&t.height===e.height&&t.rowSpacing===e.rowSpacing&&t.columnSpacing===e.columnSpacing&&t.itemCount===e.itemCount&&t.itemWidth===e.itemWidth&&t.itemHeight===e.itemHeight||this._calculateLayout()},e.getSize=function(){return this.state.size},e.getCount=function(){return this.state.count},e.getItemRect=function(t){var e,n,i,o=t.itemIndex,r=t.rowIndex,a=t.columnIndex,s=this.state;void 0!==r&&void 0!==a&&(o=(e={row:r,column:a})[i=(n="x"===this.props.direction?["column","row"]:["row","column"])[1]]+e[n[0]]*s.count[i]);var c=s.layoutAttrs[o];return c?c.rect:null},e._calculateLayout=function(){this.setState(function(t,e){var n=e.onResize,i=function(t,e,n,i,o){var r,a,s="x"===o?["y","x","height","width","column","row"]:["x","y","width","height","row","column"],c=s[0],l=s[1],d=s[2],u=s[3],h=s[4],f=s[5],g=i[d],p=0,v=0,m=0,y=[];g<0?(g=e*t[d],1<e&&(g+=(e-1)*n[f]),m=e):0===t[d]&&0===n[f]?m=e:(m=1,t[d]<g&&(m+=Math.floor((g-t[d])/(t[d]+n[f]))));0<m&&(v=Math.ceil(e/m));for(var b=0;b<v;b++){0<b&&(p+=n[h]);for(var w=0;w<m;w++){var x,S,z=w+b*m,_=0;if(1<m&&(_+=Math.round(w*((g-t[d])/(m-1)))),z<e)y.push(((S={rect:(x={},x[c]=_,x[l]=p,x[d]=t[d],x[u]=t[u],x)})[h+"Index"]=b,S[f+"Index"]=w,S.itemIndex=z,S))}p+=t[u]}return{count:(r={},r[h]=v,r[f]=m,r),size:(a={},a[d]=g,a[u]=p,a),layoutAttrs:y}}({width:e.itemWidth,height:e.itemHeight},e.itemCount,{row:e.rowSpacing,column:e.columnSpacing},{width:e.width,height:e.height},e.direction);return t.size.width===i.size.width&&t.size.height===i.size.height||n(i.size),i})},e._renderItem=function(t){var e=(0,this.props.renderItem)(m({},t)),n=e.type,i=e.props,o=i.style,r=v(i,["style"]),a=e.key||t.itemIndex,s=m({position:"absolute",left:t.rect.x,top:t.rect.y,width:t.rect.width,height:t.rect.height},o);return p.createElement(n,m({},r,{key:a,style:s}))},e.render=function(){for(var t=this.props,e=t.itemCount,n=t.visibleRect,i=this.state.layoutAttrs,o=[],r=0;r<e;r++){var a=i[r];a&&L(a.rect,n)&&o.push(this._renderItem(a))}return o},t}(p.PureComponent);function L(t,e,n){if(n){var i="y"===n?["y","height"]:["x","width"],o=i[0],r=i[1],a=t[o]-e[o];return-.25*e[r]<a+t[r]&&a<1.25*e[r]}return L(t,e,"x")&&L(t,e,"y")}A.defaultProps={direction:"y",width:-1,height:-1,rowSpacing:0,columnSpacing:0,itemCount:0,itemWidth:0,itemHeight:0,renderItem:function(){return null},visibleRect:{x:0,y:0,width:0,height:0},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).resizeRef=p.createRef(),t}r(t,o);var e=t.prototype;return e.componentDidMount=function(){this._calculateSize()},e.componentDidUpdate=function(t){var e=this.props;t.width===e.width&&t.height===e.height&&t.hash===e.hash||this._calculateSize()},e._calculateSize=function(){var t=this.props,e=t.width,n=t.height,i=t.hash;(0,t.onResize)(e<0||n<0?(0,t.getSizeByHash)(i)||s(this.resizeRef.current):{width:e,height:n},i)},e.render=function(){var t=this.props,e=t.width,n=t.height,i=t.children;return p.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}(p.PureComponent);k.defaultProps={width:-1,height:-1,hash:"Item",getSizeByHash:function(){return null},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},layoutAttrs:[],itemHashList:[],itemSizeDict:{}},t}r(t,o);var e=t.prototype;return e.componentDidMount=function(){this._calculateLayout()},e.componentDidUpdate=function(t){var e=this.props;t.direction===e.direction&&t.width===e.width&&t.height===e.height&&t.spacing===e.spacing&&t.itemCount===e.itemCount&&t.estimatedItemWidth===e.estimatedItemWidth&&t.estimatedItemHeight===e.estimatedItemHeight||this._calculateLayout()},e.getSize=function(){return this.state.size},e.getItemRect=function(t){var e=this.state.layoutAttrs[t.itemIndex];return e?e.rect:null},e._calculateLayout=function(g,p,v){this.setState(function(t,e){var n=e.direction,i=e.spacing,o=e.itemCount,r=e.estimatedItemWidth,a=e.estimatedItemHeight,s=e.onResize,c=t.itemHashList,l=t.itemSizeDict,d=c,u=l;if(void 0!==g){var h;if(d[g]===p)return null;u=m({},u,((h={})[(d=[].concat(d))[g]=p]=v,h))}var f=function(t,e,n,i,o,r){for(var a,s="x"===r?["y","x","height","width"]:["x","y","width","height"],c=s[0],l=s[1],d=s[2],u=s[3],h=0,f=0,g=[],p=0;p<i;p++){var v;0<p&&(f+=o);var m=e[p],y=n[m]||t;g.push({rect:(v={},v[c]=0,v[l]=f,v[d]=y[d],v[u]=y[u],v),itemIndex:p}),f+=y[u],h<y[d]&&(h=y[d])}return{size:(a={},a[d]=h,a[u]=f,a),layoutAttrs:g}}({width:r,height:a},d,u,o,i,n);return d!==c&&(f.itemHashList=d),u!==l&&(f.itemSizeDict=u),t.size.width===f.size.width&&t.size.height===f.size.height||s(f.size),f})},e._renderItem=function(n){var i=this,t=this.props,e=t.direction,o=t.width,r=t.height,a=this.state.itemSizeDict,s=(0,t.renderItem)(m({},n,{Item:k})),c=s.type,l=s.props,d=l.onResize,u=l.style,h=v(l,["onResize","style"]),f=s.key||n.itemIndex,g=m({position:"absolute",left:n.rect.x,top:n.rect.y,width:n.rect.width,height:n.rect.height},u);return c===k?(h.onResize=function(t,e){i._calculateLayout(n.itemIndex,e,t),d(t)},h.getSizeByHash=function(t){return a[t]},"x"===e?h.height=r:h.width=o,p.createElement("div",{key:f,style:g},p.createElement(c,h))):p.createElement(c,m({},h,{key:f,style:g}))},e.render=function(){for(var t=this.props,e=t.itemCount,n=t.visibleRect,i=this.state.layoutAttrs,o=[],r=0;r<e;r++){var a=i[r];a&&P(a.rect,n)&&o.push(this._renderItem(a))}return o},t}(p.PureComponent);function P(t,e,n){if(n){var i="y"===n?["y","height"]:["x","width"],o=i[0],r=i[1],a=t[o]-e[o];return-.25*e[r]<a+t[r]&&a<1.25*e[r]}return P(t,e,"x")&&P(t,e,"y")}W.defaultProps={direction:"y",width:-1,height:-1,spacing:0,itemCount:0,estimatedItemWidth:0,estimatedItemHeight:0,renderItem:function(){return null},visibleRect:{x:0,y:0,width:0,height:0},onResize:function(){}};var H=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=p.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&&(O.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 O.listenTo(this._resizeNode=r,function(){return e._calculateSize()})}t=s(this._resizeNode)}else this._resizeNode&&(O.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 p.createElement("div",{ref:this.resizeRef,style:{width:e<0?"100%":e,height:n<0?"100%":n}},(0,t.children)(this.state.size))},t}(p.Component);H.defaultProps={children:function(){return null},width:-1,height:-1};var N=function(c){function t(t){var s;(s=c.call(this,t)||this)._onPadScroll=function(t){var e=t.dragging,n=t.decelerating,i=s.props,o=i.onScroll,r="x"===i.direction?["x","width"]:["y","height"],a={activeIndex:Math.abs(Math.floor(t.contentOffset[r[0]]/t.size[r[1]]))};s.state.dragging!==e&&(a.dragging=e),s.state.decelerating!==n&&(a.decelerating=n),s.setState(a),o&&o(t)},s._onMouseEnter=function(){s.setState({mouseEntered:!0})},s._onMouseLeave=function(){s.setState({mouseEntered:!1})};var e,n,i,o,r=t.direction,a=(i=(e={direction:r,size:{width:t.width,height:t.height},contentSize:{width:t.contentWidth,height:t.contentHeight}}).contentSize,(n=e.size)[o="x"===e.direction?"width":"height"]?Math.round(i[o]/n[o]):0);return s.state={prevDirection:r,pageCount:a,activeIndex:0,dragging:!1,decelerating:!1,mouseEntered:!1},s.padRef=p.createRef(),s}r(t,c),t.getDerivedStateFromProps=function(t,e){var n=t.direction,i={};return e.prevDirection!==n&&(i.prevDirection=n,i.activeIndex=0),i};var e=t.prototype;return e.componentDidMount=function(){this.props.autoplayEnabled&&this.play()},e.componentDidUpdate=function(t,e){var n=this.props,i=n.direction,o=n.width,r=n.height,a=n.contentWidth,s=n.contentHeight,c=n.autoplayEnabled,l=this.state,d=l.pageCount,u=l.activeIndex,h=l.dragging,f=l.decelerating,g=l.mouseEntered;if(t.direction!==i||t.width!==o||t.contentWidth!==a||t.height!==r||t.contentHeight!==s){var p="x"===i?o:r,v=p?Math.round(("x"===i?a:s)/p):0;v!==d&&this.setState({pageCount:v})}t.autoplayEnabled===c&&e.dragging===h&&e.decelerating===f&&e.activeIndex===u&&e.mouseEntered===g||(!c||h||g||f||d<=u+1?this.pause():this.play())},e.componentWillUnmount=function(){this.pause()},e.getActiveIndex=function(){return this.state.activeIndex},e.play=function(){var t=this,e=this.props.autoplayInterval;this._autoplayTimer&&(this.forward(),clearTimeout(this._autoplayTimer)),this._autoplayTimer=setTimeout(function(){t.play()},e)},e.pause=function(){this._autoplayTimer&&(clearTimeout(this._autoplayTimer),this._autoplayTimer=void 0)},e.setFrame=function(t){var e=this.props,n=e.direction,i=e.width,o=e.height,r=this.padRef.current,a=r.getContentOffset();r.scrollTo({offset:0===t?{x:0,y:0}:{x:"x"===n?-t*i:a.x,y:"x"===n?a.y:-t*o},animated:!0})},e.rewind=function(){this.setFrame(this.state.activeIndex-1)},e.forward=function(){this.setFrame(this.state.activeIndex+1)},e.render=function(){var t=this.props,e=t.direction,n=t.children,i=v(t,["direction","autoplayEnabled","autoplayInterval","children"]),o={alwaysBounceX:!1,alwaysBounceY:!1};return"x"===e?o.alwaysBounceX=!0:o.alwaysBounceY=!0,p.createElement(a,m({ref:this.padRef},i,o,{pagingEnabled:!0,onScroll:this._onPadScroll,onMouseEnter:this._onMouseEnter,onMouseLeave:this._onMouseLeave}),"function"==typeof n?n(this):n)},t}(p.PureComponent);N.defaultProps={direction:"y",autoplayEnabled:!0,autoplayInterval:3e3},t.Pad=a,t.Pannable=h,t.GeneralContent=R,t.GridContent=A,t.ListContent=W,t.ItemContent=k,t.AutoResizing=H,t.Player=N,Object.defineProperty(t,"__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,v){"use strict";function m(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 w(){return(w=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}v=v&&v.hasOwnProperty("default")?v.default:v;var e,u={create:function(t){var e,n=t.transformTranslate;return w({},m(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)}},h=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,interval:null,velocity:null,startPoint:null,movePoint:null,moveTime:null},o.elemRef=v.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._removeMousePanListener(),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({startPoint:{x:t.pageX,y:t.pageY},movePoint:{x:t.pageX,y:t.pageY},moveTime:(new Date).getTime()})},e._move=function(p){p={target:p.target,pageX:p.pageX,pageY:p.pageY},this.setState(function(t,e){var n=e.shouldStart,i=e.onStart,o=e.onMove,r=t.target,a=t.startPoint,s=t.movePoint,c=t.moveTime;if(!a)return null;var l=(new Date).getTime(),d={x:p.pageX,y:p.pageY},u=l-c,h={x:d.x-a.x,y:d.y-a.y},f={x:(d.x-s.x)/u,y:(d.y-s.y)/u},g={translation:h,velocity:f,interval:u,movePoint:d,moveTime:l};r?o({target:r,translation:h,velocity:f,interval:u}):0<Math.sqrt(h.x*h.x+h.y*h.y)&&n({target:p.target,translation:h,velocity:f,interval:u})&&(g.target=p.target,g.startPoint={x:p.pageX,y:p.pageY},g.translation=h={x:0,y:0},i({target:p.target,translation:h,velocity:f,interval:u}));return g})},e._end=function(){this.setState(function(t,e){var n=t.target;return n&&e.onEnd({target:n,translation:t.translation,velocity:t.velocity,interval:t.interval}),{target:null,translation:null,velocity:null,interval:null,startPoint:null,movePoint:null,moveTime: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,interval:t.interval}),{target:null,translation:null,velocity:null,interval:null,startPoint:null,movePoint:null,moveTime: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=m(t,["enabled","shouldStart","onStart","onMove","onEnd","onCancel","style"]),o=u.create(w({touchAction:e?"none":"auto"},n));return v.createElement("div",w({},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}(v.PureComponent);h.defaultProps={enabled:!0,shouldStart:function(){return!0},onStart:function(){},onMove:function(){},onEnd:function(){},onCancel:function(){}};var g=(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(){},p=e.cancelAnimationFrame||e.webkitCancelAnimationFrame||e.mozCancelAnimationFrame||e.clearTimeout||function(){};function x(t,e){var n=e.x,i=e.y,o=Math.sqrt(n*n+i*i);return 0===o?{x:0,y:0}:{x:t*(n/o),y:t*(i/o)}}function y(t,e,n,i,o){if(o){var r="y"===o?["y","height"]:["x","width"],a=r[0],s=r[1],c=Math.min(e[s]-n[s],0);return c=Math.max(c,Math.min(t[a],0)),i&&(c=e[s]?e[s]*Math.round(c/e[s]):0),c}return{x:y(t,e,n,i,"x"),y:y(t,e,n,i,"y")}}function l(t,e,n,i,o){if(o){var r="y"===o?["y","height"]:["x","width"],a=r[0],s=r[1],c=Math.min(n[s]-i[s],0);return c=Math.max(c,Math.min(e[a],0)),t[a]<(c=n[s]?n[s]*Math.floor(c/n[s]):0)+.5*n[s]?c:c+n[s]}return{x:l(t,e,n,i,"x"),y:l(t,e,n,i,"y")}}var b=.04,a=function(n){function t(t){var e;return(e=n.call(this,t)||this)._onDragStart=function(t){var r=t.velocity;e.setState(function(t,e){var n=t.contentOffset,i=e.directionalLockEnabled?Math.abs(r.y)<Math.abs(r.x)?{x:1,y:0}:{x:0,y:1}:{x:1,y:1},o={x:i.x*r.x,y:i.y*r.y};return{contentOffset:w({},n),contentVelocity:o,dragging:!0,dragStartOffset:n,dragDirection:i,decelerating:!1}})},e._onDragMove=function(t){var a=t.translation,s=t.interval;e.setState(function(t,e){var n=t.contentOffset,i=t.dragStartOffset,o=t.dragDirection,r=function t(e,n,i,o,r){if(r){var a="y"===r?["y","height","width"]:["x","width","height"],s=a[0],c=a[1],l=a[2],d=e[s],u=Math.min(i[c]-o[c],0),h=.5*Math.min(i[c],i[l]);return 0<d?n[s]?h*(1-h/(h+d)):0:d<u?n[s]?u-h*(1-h/(h-d+u)):u:d}return{x:t(e,n,i,o,"x"),y:t(e,n,i,o,"y")}}({x:i.x+o.x*a.x,y:i.y+o.y*a.y},{x:e.alwaysBounceX,y:e.alwaysBounceY},t.size,t.contentSize);return{contentOffset:r,contentVelocity:{x:(r.x-n.x)/s,y:(r.y-n.y)/s}}})},e._onDragEnd=function(){e.setState(function(t,e){var n=t.contentOffset,i=t.size,o=t.contentSize,r=e.pagingEnabled,a=r?b:.004,s=function t(e,n,i,o){if(o){var r=e[o];return i[o]&&(r+=.5*n[o]*(n[o]/i[o])),r}return"number"==typeof i&&(i=x(i,n)),{x:t(e,n,i,"x"),y:t(e,n,i,"y")}}(n,t.contentVelocity,a);return r&&(s=l(n,s,i,o)),{contentOffset:w({},n),dragging:!1,decelerating:!0,decelerationEndOffset:s,decelerationRate:a}})},e._onDragCancel=function(){e.setState(function(t,e){var n=t.contentOffset,i=t.dragStartOffset;return e.pagingEnabled&&(i=l(n,i,t.size,t.contentSize)),{contentOffset:w({},n),dragging:!1,decelerating:!0,decelerationEndOffset:i,decelerationRate:b}})},e.state={prevContentOffset:null,contentOffset:{x:0,y:0},contentVelocity:{x:0,y:0},size:{width:t.width,height:t.height},contentSize:{width:t.contentWidth,height:t.contentHeight},dragging:!1,dragStartOffset:null,dragDirection:null,decelerating:!1,decelerationEndOffset:null,decelerationRate:b},e.boundingRef=v.createRef(),e.contentRef=v.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.contentOffset,i=e.contentVelocity,o=e.size,r=e.contentSize,a=e.dragging,s=e.decelerating,c=e.decelerationEndOffset,l=e.decelerationRate,d={};if(e.prevContentOffset!==n){var u=s,h=c,f=l;if(u){var g=y(n,o,r,!1);g.x===n.x&&g.y===n.y||(f=b,g.x===h.x&&g.y===h.y||(h=g)),h.x===n.x&&h.y===n.y&&0===i.x&&0===i.y&&(u=!1)}d.prevContentOffset=n,u!==s&&(d.decelerating=u),f!==l&&(d.decelerationRate=f),h!==c&&(d.decelerationEndOffset=h),t.onScroll({contentOffset:n,contentVelocity:i,size:o,contentSize:r,dragging:a,decelerating:u})}return d};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,c=i.pagingEnabled,l=i.onResize,d=i.onContentResize;if(t.width!==o||t.height!==r){var u={width:o,height:r};this._setStateWithScroll({size:u}),l(u)}if(t.contentWidth!==a||t.contentHeight!==s){var h={width:a,height:s};this._setStateWithScroll({contentSize:h}),d(h)}if(t.pagingEnabled!==c&&c&&this._setStateWithScroll(null),e.contentOffset!==this.state.contentOffset&&this.state.decelerating){var f=(new Date).getTime();this._deceleratingTimer&&p(this._deceleratingTimer),this._deceleratingTimer=g(function(){n._deceleratingTimer=void 0,n._decelerate((new Date).getTime()-f)})}},e.componentWillUnmount=function(){this._deceleratingTimer&&(p(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.getVisibleRect=function(){var t=this.state,e=t.contentOffset,n=t.size;return{x:-e.x,y:-e.y,width:n.width,height:n.height}},e.setContentSize=function(t){this._setStateWithScroll({contentSize:t}),this.props.onContentResize(t)},e.scrollToRect=function(t){var e=t.rect,n=t.align,i=void 0===n?"auto":n;this._setContentOffset(function(t){return function t(e,n,i,o,r){if(r){var a="y"===r?["y","height"]:["x","width"],s=a[0],c=a[1],l=-e[s],d=o[c]-e[c];if("auto"===n[s]){var u=d<0?-1:1;l+=u*Math.max(0,Math.min(u*(i[s]-l),u*d))}else"start"===n[s]?n[s]=0:"center"===n[s]?n[s]=.5:"end"===n[s]&&(n[s]=1),("number"!=typeof n[s]||isNaN(n[s]))&&(n[s]=.5),l+=n[s]*d;return l}return"object"!=typeof n&&(n={x:n,y:n}),{x:t(e,n,i,o,"x"),y:t(e,n,i,o,"y")}}(e,i,t.contentOffset,t.size)},t.animated)},e.scrollTo=function(t){this._setContentOffset(t.offset,t.animated)},e._setContentOffset=function(i,o){this.setState(function(t,e){"function"==typeof i&&(i=i(t,e));var n=t.contentOffset;return t.dragging?null:(i=y(i,t.size,t.contentSize,e.pagingEnabled),o?{contentOffset:w({},n),decelerating:!0,decelerationEndOffset:i,decelerationRate:b}:{contentOffset:i,contentVelocity:{x:0,y:0},decelerating:!1})})},e._setStateWithScroll=function(o){this.setState(function(t,e){var n=t.contentOffset;if(t.dragging)return o;var i=y(n,t.size,t.contentSize,e.pagingEnabled);return i.x===n.x&&i.y===n.y?o:w({},o,{contentOffset:w({},n),decelerating:!0,decelerationEndOffset:i,decelerationRate:b})})},e._decelerate=function(n){this.setState(function(t){if(!t.decelerating)return null;var e=function t(e,n,i,o,r,a,s){if(s){var c,l,d="y"===s?["y","height"]:["x","width"],u=d[0],h=d[1],f=o[u],g=i[u];if(n[u]){var p=n[u]<0?-1:1,v=p*Math.sqrt(.5*g*g+n[u]*(r[u]-f)),m=(v-g)/n[u];m<0&&(v=g,m=0),(2*v-g)/n[u]<e?(g=0,f=r[u]):0<p*(r[u]-(f+=.5*(i[u]+v)*m-.5*(v+(g=v-n[u]*Math.abs(m-e)))*(m-e)))||(g=(g<0?-1:1)*Math.min(Math.abs(g),Math.sqrt(2*p*n[u]*.25*a[h])))}else f+=g*e;return{offset:(c={},c[u]=f,c),velocity:(l={},l[u]=g,l)}}"number"==typeof n&&(n=x(n,{x:r.x-o.x,y:r.y-o.y}));var y=t(e,n,i,o,r,a,"x"),b=t(e,n,i,o,r,a,"y");return{offset:w({},y.offset,b.offset),velocity:w({},y.velocity,b.velocity)}}(n,t.decelerationRate,t.contentVelocity,t.contentOffset,t.decelerationEndOffset,t.size);return{contentOffset:e.offset,contentVelocity:e.velocity}})},e.render=function(){var t=this.props,e=t.scrollEnabled,n=t.style,i=t.children,o=m(t,["width","height","contentWidth","contentHeight","scrollEnabled","pagingEnabled","directionalLockEnabled","alwaysBounceX","alwaysBounceY","onScroll","onResize","onContentResize","style","children"]),r=this.state,a=r.size,s=r.contentSize,c=r.contentOffset,l=u.create(w({overflow:"hidden",position:"relative",boxSizing:"border-box",width:a.width,height:a.height},n)),d=u.create({position:"relative",boxSizing:"border-box",width:s.width,height:s.height,transformTranslate:[c.x,c.y]});return v.createElement(h,w({},o,{ref:this.boundingRef,style:l,enabled:e,onStart:this._onDragStart,onMove:this._onDragMove,onEnd:this._onDragEnd,onCancel:this._onDragCancel}),v.createElement("div",{ref:this.contentRef,style:d},"function"==typeof i?i(this):i))},t}(v.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 n(t,e){return t(e={exports:{}},e.exports),e.exports}a.defaultProps={children:null,width:0,height:0,contentWidth:0,contentHeight:0,scrollEnabled:!0,pagingEnabled:!1,directionalLockEnabled:!1,alwaysBounceX:!0,alwaysBounceY:!0,onScroll:function(){},onResize:function(){},onContentResize:function(){}};var i=n(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}}}),S=n(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}}),d=n(function(t){(t.exports={}).getOption=function(t,e,n){var i=t[e];return null!=i||void 0===n?i:n}}),z=function(t){var e=(t=t||{}).reporter,n=d.getOption(t,"async",!0),i=d.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=f(),a=!1;function s(){for(a=!0;r.size();){var t=r;r=f(),t.process()}a=!1}function c(){o=setTimeout(s,0)}return{add:function(t,e){!a&&i&&n&&0===r.size()&&c(),r.add(t,e)},force:function(t){a||(void 0===t&&(t=n),o&&(clearTimeout(o),o=null),t?c():s())}}};function f(){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 o="_erd";function c(t){return t[o]}var _={initState:function(t){return t[o]={},c(t)},getState:c,cleanState:function(t){delete t[o]}},I=i.forEach,E=function(t){var x=(t=t||{}).reporter,S=t.batchProcessor,z=t.stateHandler.getState,_=t.idHandler;if(!S)throw Error("Missing required dependency: batchProcessor");if(!x)throw Error("Missing required dependency: reporter.");var E=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}}(),C="erd_scroll_detection_container";function M(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 T(t){return z(t).container.childNodes[0].childNodes[0].childNodes[0]}function R(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",C),{makeDetectable:function(a,v,t){function m(){if(a.debug){var t=Array.prototype.slice.call(arguments);if(t.unshift(_.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(m("storeStyle invoked."),z(v)){var t=e();z(v).style=t}else m("Aborting because element has been uninstalled")}function c(t,e,n){z(t).lastWidth=e,z(t).lastHeight=n}function l(){return 2*E.width+1}function d(){return 2*E.height+1}function u(t){return t+10+l()}function h(t){return t+10+d()}function f(t,e,n){var i=T(t),o=R(t),r=u(e),a=h(n),s=2*e+l(),c=2*n+d();i.scrollLeft=r,i.scrollTop=a,o.scrollLeft=s,o.scrollTop=c}function y(){var t=z(v).container;if(!t){(t=document.createElement("div")).className=C,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+=" "+C+"_animation_active",v.appendChild(t);var e=function(){z(v).onRendered&&z(v).onRendered()};M(t,"animationstart",e),z(v).onAnimationStart=e}return t}function i(){if(m("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=y());var e,n,i,o,r=E.width,a=E.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")+";",c=document.createElement("div"),l=document.createElement("div"),d=document.createElement("div"),u=document.createElement("div"),h=document.createElement("div"),f=document.createElement("div");c.dir="ltr",c.style.cssText="position: absolute; flex: none; overflow: hidden; z-index: -1; visibility: hidden; width: 100%; height: 100%; left: 0px; top: 0px;",l.className=c.className=C,l.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),l.appendChild(d),l.appendChild(h),c.appendChild(l),t.appendChild(c),M(d,"scroll",g),M(h,"scroll",p),z(v).onExpandScroll=g,z(v).onShrinkScroll=p}else m("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=T(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;m("Storing current size",e,n),c(v,e,n),S.add(0,function(){z(v)?o()?(a.debug&&(v.offsetWidth===e&&v.offsetHeight===n||x.warn(_.get(v),"Scroll: Size changed before updating detector elements.")),i(v,e,n)):m("Aborting because element container has not been initialized"):m("Aborting because element has been uninstalled")}),S.add(1,function(){z(v)?o()?f(v,e,n):m("Aborting because element container has not been initialized"):m("Aborting because element has been uninstalled")}),t&&S.add(2,function(){z(v)?o()?t():m("Aborting because element container has not been initialized"):m("Aborting because element has been uninstalled")})}function o(){return!!z(v).container}function r(){m("notifyListenersIfNeeded invoked");var t=z(v);return void 0===z(v).lastNotifiedWidth&&t.lastWidth===t.startSize.width&&t.lastHeight===t.startSize.height?m("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?m("Not notifying: Size already notified"):(m("Current size not notified, notifying..."),t.lastNotifiedWidth=t.lastWidth,t.lastNotifiedHeight=t.lastHeight,void I(z(v).listeners,function(t){t(v)}))}function t(){if(m("Scroll detected."),s(v))m("Scroll event fired while unrendered. Ignoring...");else{var t=v.offsetWidth,e=v.offsetHeight;t!==z(v).lastWidth||e!==z(v).lastHeight?(m("Element size changed."),n(r)):m("Element size has not changed ("+t+"x"+e+").")}}if(m("registerListenersAndPositionElements invoked."),z(v)){z(v).onRendered=function(){if(m("startanimation triggered."),s(v))m("Ignoring since element is still unrendered...");else{m("Element rendered.");var t=T(v),e=R(v);0!==t.scrollLeft&&0!==t.scrollTop&&0!==e.scrollLeft&&0!==e.scrollTop||(m("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 m("Aborting because element has been uninstalled")}function r(){if(m("finalizeDomMutation invoked."),z(v)){var t=z(v).style;c(v,t.width,t.height),f(v,t.width,t.height)}else m("Aborting because element has been uninstalled")}function g(){t(v)}function p(){var t;m("Installing..."),z(v).listeners=[],t=e(),z(v).startSize={width:t.width,height:t.height},m("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 b,w;t||(t=v,v=a,a=null),a=a||{},m("Making detectable..."),(w=b=v)!==w.ownerDocument.body&&!w.ownerDocument.body.contains(w)||null===window.getComputedStyle(b)?(m("Element is detached"),y(),m("Waiting until element is attached..."),z(v).onRendered=function(){m("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(T(t),"scroll",e.onExpandScroll),e.onShrinkScroll&&n(R(t),"scroll",e.onShrinkScroll),e.onAnimationStart&&n(e.container,"animationstart",e.onAnimationStart),e.container&&t.removeChild(e.container))}}},C=i.forEach;function M(t){return Array.isArray(t)||void 0!==t.length}function T(t){if(Array.isArray(t))return t;var e=[];return C(t,function(t){e.push(t)}),e}function R(t){return t&&1===t.nodeType}function O(t,e,n){var i=t[e];return null==i&&void 0!==n?n:i}var D=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:_}).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",z({reporter:h})),f={};f.callOnAdd=!!O(e,"callOnAdd",!0),f.debug=!!O(e,"debug",!1);var c,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=(c={stateHandler:_}.stateHandler.getState,{isDetectable:function(t){var e=c(t);return e&&!!e.isDetectable},markAsDetectable:function(t){c(t).isDetectable=!0},isBusy:function(t){return!!c(t).busy},markBusy:function(t,e){c(t).busy=!!e}}),l=O(e,"strategy","object"),d={reporter:h,batchProcessor:s,stateHandler:_,idHandler:u};if("scroll"===l&&(S.isLegacyOpera()?(h.warn("Scroll strategy is not supported on legacy Opera. Changing to object strategy."),l="object"):S.isIE(9)&&(h.warn("Scroll strategy is not supported on IE9. Changing to object strategy."),l="object")),"scroll"===l)g=E(d);else{if("object"!==l)throw Error("Invalid strategy name: "+l);g=function(t){var s=(t=t||{}).reporter,c=t.batchProcessor,l=t.stateHandler.getState;if(!s)throw Error("Missing required dependency: reporter.");function i(t){return l(t).object}return{makeDetectable:function(t,e,n){n||(n=e,e=t,t=null),t=t||{},S.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)})},S.isIE()||(e.data="about:blank"),n.appendChild(e),l(n).object=e,S.isIE()&&(e.data="about:blank")}l(n).startSize={width:t,height:e},c?c.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)}S.isIE(8)?(l(t).object={proxy:n},t.attachEvent("onresize",n)):i(t).contentDocument.defaultView.addEventListener("resize",n)},uninstall:function(t){S.isIE(8)?t.detachEvent("onresize",l(t).object.proxy):t.removeChild(i(t)),delete l(t).object}}}(d)}var m={};return{listenTo:function(t,i,o){function r(e){var t=p.get(e);C(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(R(i))i=[i];else{if(!M(i))return h.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");i=T(i)}var s=0,c=O(t,"callOnAdd",f.callOnAdd),l=O(t,"onReady",function(){}),d=O(t,"debug",f.debug);C(i,function(t){_.getState(t)||(_.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(c,t,o),m[n]=m[n]||[],void m[n].push(function(){++s===i.length&&l()})):(d&&h.log(n,"Making detectable..."),v.markBusy(t,!0),g.makeDetectable({debug:d},t,function(t){if(d&&h.log(n,"onElementDetectable"),_.getState(t)){v.markAsDetectable(t),v.markBusy(t,!1),g.addListener(t,r),a(c,t,o);var e=_.getState(t);e&&e.startSize&&(e.startSize.width===t.offsetWidth&&e.startSize.height===t.offsetHeight||r(t)),m[n]&&C(m[n],function(t){t()})}else d&&h.log(n,"Element uninstalled before being detectable.");delete m[n],++s===i.length&&l()}));d&&h.log(n,"Already detecable, adding listener."),a(c,t,o),s++}),s===i.length&&l()},removeListener:p.removeListener,removeAllListeners:p.removeAllListeners,uninstall:function(t){if(!t)return h.error("At least one element is required.");if(R(t))t=[t];else{if(!M(t))return h.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");t=T(t)}C(t,function(t){p.removeAllListeners(t),g.uninstall(t),_.cleanState(t)})}}}({strategy:"scroll"}),A=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=v.createRef(),t}r(t,o);var e=t.prototype;return e.componentDidMount=function(){this._calculateSize()},e.componentDidUpdate=function(t){var e=this.props;t.width===e.width&&t.height===e.height||this._calculateSize()},e.componentWillUnmount=function(){this._resizeNode&&(D.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 D.listenTo(this._resizeNode=a,function(){return e._calculateSize()})}t=s(this._resizeNode)}else this._resizeNode&&(D.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 v.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}(v.PureComponent);function L(t,e,n){if(n){var i,o="y"===n?["y","height"]:["x","width"],r=o[0],a=o[1],s=Math.max(t[r],e[r]),c=Math.min(t[r]+t[a],e[r]+e[a]);return(i={})[r]=s-t[r],i[a]=Math.max(0,c-s),i}return w({},L(t,e,"x"),L(t,e,"y"))}function k(t,e,n){if(n){var i="y"===n?["y","height"]:["x","width"],o=i[0],r=i[1],a=t[o]-e[o];return-.25*e[r]<a+t[r]&&a<1.25*e[r]}return k(t,e,"x")&&k(t,e,"y")}A.defaultProps={width:-1,height:-1,onResize:function(){}};var P=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},layoutAttrs:[],count:{row:0,column:0}},t}r(t,o);var e=t.prototype;return e.componentDidMount=function(){this._calculateLayout()},e.componentDidUpdate=function(t){var e=this.props;t.direction===e.direction&&t.width===e.width&&t.height===e.height&&t.rowSpacing===e.rowSpacing&&t.columnSpacing===e.columnSpacing&&t.itemCount===e.itemCount&&t.itemWidth===e.itemWidth&&t.itemHeight===e.itemHeight||this._calculateLayout()},e.getSize=function(){return this.state.size},e.getCount=function(){return this.state.count},e.getItemRect=function(t){var e,n,i,o=t.itemIndex,r=t.rowIndex,a=t.columnIndex,s=this.state;void 0!==r&&void 0!==a&&(o=(e={row:r,column:a})[i=(n="x"===this.props.direction?["column","row"]:["row","column"])[1]]+e[n[0]]*s.count[i]);var c=s.layoutAttrs[o];return c?c.rect:null},e._calculateLayout=function(){this.setState(function(t,e){var n=e.onResize,i=function(t,e,n,i,o){var r,a,s="x"===o?["y","x","height","width","column","row"]:["x","y","width","height","row","column"],c=s[0],l=s[1],d=s[2],u=s[3],h=s[4],f=s[5],g=i[d],p=0,v=0,m=0,y=[];g<0?(g=e*t[d],1<e&&(g+=(e-1)*n[f]),m=e):0===t[d]&&0===n[f]?m=e:(m=1,t[d]<g&&(m+=Math.floor((g-t[d])/(t[d]+n[f]))));0<m&&(v=Math.ceil(e/m));for(var b=0;b<v;b++){0<b&&(p+=n[h]);for(var w=0;w<m;w++){var x,S,z=w+b*m,_=0;if(1<m&&(_+=Math.round(w*((g-t[d])/(m-1)))),z<e)y.push(((S={rect:(x={},x[c]=_,x[l]=p,x[d]=t[d],x[u]=t[u],x)})[h+"Index"]=b,S[f+"Index"]=w,S.itemIndex=z,S))}p+=t[u]}return{count:(r={},r[h]=v,r[f]=m,r),size:(a={},a[d]=g,a[u]=p,a),layoutAttrs:y}}({width:e.itemWidth,height:e.itemHeight},e.itemCount,{row:e.rowSpacing,column:e.columnSpacing},{width:e.width,height:e.height},e.direction);return t.size.width===i.size.width&&t.size.height===i.size.height||n(i.size),i})},e._renderItem=function(t,e){var n=(0,this.props.renderItem)(w({},t,{visibleRect:e})),i=n.type,o=n.props,r=o.style,a=m(o,["style"]),s=n.key||t.itemIndex,c=w({position:"absolute",left:t.rect.x,top:t.rect.y,width:t.rect.width,height:t.rect.height},r);return v.createElement(i,w({},a,{key:s,style:c}))},e.render=function(){for(var t=this.props,e=t.itemCount,n=t.visibleRect,i=this.state.layoutAttrs,o=[],r=0;r<e;r++){var a=i[r];a&&k(a.rect,n)&&o.push(this._renderItem(a,L(a.rect,n)))}return o},t}(v.PureComponent);P.defaultProps={direction:"y",width:-1,height:-1,rowSpacing:0,columnSpacing:0,itemCount:0,itemWidth:0,itemHeight:0,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).resizeRef=v.createRef(),t}r(t,o);var e=t.prototype;return e.componentDidMount=function(){this._calculateSize()},e.componentDidUpdate=function(t){var e=this.props;t.width===e.width&&t.height===e.height&&t.hash===e.hash||this._calculateSize()},e._calculateSize=function(){var t=this.props,e=t.width,n=t.height,i=t.hash;(0,t.onResize)(e<0||n<0?(0,t.getSizeByHash)(i)||s(this.resizeRef.current):{width:e,height:n},i)},e.render=function(){var t=this.props,e=t.width,n=t.height,i=t.children;return v.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}(v.PureComponent);W.defaultProps={width:-1,height:-1,hash:"Item",getSizeByHash:function(){return null},onResize:function(){}};var H=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},layoutAttrs:[],itemHashList:[],itemSizeDict:{}},t}r(t,o);var e=t.prototype;return e.componentDidMount=function(){this._calculateLayout()},e.componentDidUpdate=function(t){var e=this.props;t.direction===e.direction&&t.width===e.width&&t.height===e.height&&t.spacing===e.spacing&&t.itemCount===e.itemCount&&t.estimatedItemWidth===e.estimatedItemWidth&&t.estimatedItemHeight===e.estimatedItemHeight||this._calculateLayout()},e.getSize=function(){return this.state.size},e.getItemRect=function(t){var e=this.state.layoutAttrs[t.itemIndex];return e?e.rect:null},e._calculateLayout=function(g,p,v){this.setState(function(t,e){var n=e.direction,i=e.spacing,o=e.itemCount,r=e.estimatedItemWidth,a=e.estimatedItemHeight,s=e.onResize,c=t.itemHashList,l=t.itemSizeDict,d=c,u=l;if(void 0!==g){var h;if(d[g]===p)return null;u=w({},u,((h={})[(d=[].concat(d))[g]=p]=v,h))}var f=function(t,e,n,i,o,r){for(var a,s="x"===r?["y","x","height","width"]:["x","y","width","height"],c=s[0],l=s[1],d=s[2],u=s[3],h=0,f=0,g=[],p=0;p<i;p++){var v;0<p&&(f+=o);var m=e[p],y=n[m]||t;g.push({rect:(v={},v[c]=0,v[l]=f,v[d]=y[d],v[u]=y[u],v),itemIndex:p}),f+=y[u],h<y[d]&&(h=y[d])}return{size:(a={},a[d]=h,a[u]=f,a),layoutAttrs:g}}({width:r,height:a},d,u,o,i,n);return d!==c&&(f.itemHashList=d),u!==l&&(f.itemSizeDict=u),t.size.width===f.size.width&&t.size.height===f.size.height||s(f.size),f})},e._renderItem=function(n,t){var i=this,e=this.props,o=e.direction,r=e.width,a=e.height,s=this.state.itemSizeDict,c=(0,e.renderItem)(w({},n,{visibleRect:t,Item:W})),l=c.type,d=c.props,u=d.onResize,h=d.style,f=m(d,["onResize","style"]),g=c.key||n.itemIndex,p=w({position:"absolute",left:n.rect.x,top:n.rect.y,width:n.rect.width,height:n.rect.height},h);return l===W?(f.onResize=function(t,e){i._calculateLayout(n.itemIndex,e,t),u(t)},f.getSizeByHash=function(t){return s[t]},"x"===o?f.height=a:f.width=r,v.createElement("div",{key:g,style:p},v.createElement(l,f))):v.createElement(l,w({},f,{key:g,style:p}))},e.render=function(){for(var t=this.props,e=t.itemCount,n=t.visibleRect,i=this.state.layoutAttrs,o=[],r=0;r<e;r++){var a=i[r];a&&k(a.rect,n)&&o.push(this._renderItem(a,L(a.rect,n)))}return o},t}(v.PureComponent);H.defaultProps={direction:"y",width:-1,height:-1,spacing:0,itemCount:0,estimatedItemWidth:0,estimatedItemHeight:0,renderItem:function(){return null},visibleRect:{x:0,y:0,width:0,height:0},onResize:function(){}};var N=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=v.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&&(D.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 D.listenTo(this._resizeNode=r,function(){return e._calculateSize()})}t=s(this._resizeNode)}else this._resizeNode&&(D.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 v.createElement("div",{ref:this.resizeRef,style:{width:e<0?"100%":e,height:n<0?"100%":n}},(0,t.children)(this.state.size))},t}(v.Component);N.defaultProps={children:function(){return null},width:-1,height:-1};var B=function(c){function t(t){var s;(s=c.call(this,t)||this)._onPadScroll=function(t){var e=t.dragging,n=t.decelerating,i=s.props,o=i.onScroll,r="x"===i.direction?["x","width"]:["y","height"],a={activeIndex:Math.abs(Math.floor(t.contentOffset[r[0]]/t.size[r[1]]))};s.state.dragging!==e&&(a.dragging=e),s.state.decelerating!==n&&(a.decelerating=n),s.setState(a),o&&o(t)},s._onMouseEnter=function(){s.setState({mouseEntered:!0})},s._onMouseLeave=function(){s.setState({mouseEntered:!1})};var e,n,i,o,r=t.direction,a=(i=(e={direction:r,size:{width:t.width,height:t.height},contentSize:{width:t.contentWidth,height:t.contentHeight}}).contentSize,(n=e.size)[o="x"===e.direction?"width":"height"]?Math.round(i[o]/n[o]):0);return s.state={prevDirection:r,pageCount:a,activeIndex:0,dragging:!1,decelerating:!1,mouseEntered:!1},s.padRef=v.createRef(),s}r(t,c),t.getDerivedStateFromProps=function(t,e){var n=t.direction,i={};return e.prevDirection!==n&&(i.prevDirection=n,i.activeIndex=0),i};var e=t.prototype;return e.componentDidMount=function(){this.props.autoplayEnabled&&this.play()},e.componentDidUpdate=function(t,e){var n=this.props,i=n.direction,o=n.width,r=n.height,a=n.contentWidth,s=n.contentHeight,c=n.autoplayEnabled,l=this.state,d=l.pageCount,u=l.activeIndex,h=l.dragging,f=l.decelerating,g=l.mouseEntered;if(t.direction!==i||t.width!==o||t.contentWidth!==a||t.height!==r||t.contentHeight!==s){var p="x"===i?o:r,v=p?Math.round(("x"===i?a:s)/p):0;v!==d&&this.setState({pageCount:v})}t.autoplayEnabled===c&&e.dragging===h&&e.decelerating===f&&e.activeIndex===u&&e.mouseEntered===g||(!c||h||g||f||d<=u+1?this.pause():this.play())},e.componentWillUnmount=function(){this.pause()},e.getActiveIndex=function(){return this.state.activeIndex},e.play=function(){var t=this,e=this.props.autoplayInterval;this._autoplayTimer&&(this.forward(),clearTimeout(this._autoplayTimer)),this._autoplayTimer=setTimeout(function(){t.play()},e)},e.pause=function(){this._autoplayTimer&&(clearTimeout(this._autoplayTimer),this._autoplayTimer=void 0)},e.setFrame=function(t){var e=this.props,n=e.direction,i=e.width,o=e.height,r=this.padRef.current,a=r.getContentOffset();r.scrollTo({offset:0===t?{x:0,y:0}:{x:"x"===n?-t*i:a.x,y:"x"===n?a.y:-t*o},animated:!0})},e.rewind=function(){this.setFrame(this.state.activeIndex-1)},e.forward=function(){this.setFrame(this.state.activeIndex+1)},e.render=function(){var t=this.props,e=t.direction,n=t.children,i=m(t,["direction","autoplayEnabled","autoplayInterval","children"]),o={alwaysBounceX:!1,alwaysBounceY:!1};return"x"===e?o.alwaysBounceX=!0:o.alwaysBounceY=!0,v.createElement(a,w({ref:this.padRef},i,o,{pagingEnabled:!0,onScroll:this._onPadScroll,onMouseEnter:this._onMouseEnter,onMouseLeave:this._onMouseLeave}),"function"==typeof n?n(this):n)},t}(v.PureComponent);B.defaultProps={direction:"y",autoplayEnabled:!0,autoplayInterval:3e3},t.Pad=a,t.Pannable=h,t.GeneralContent=A,t.GridContent=P,t.ListContent=H,t.ItemContent=W,t.AutoResizing=N,t.Player=B,Object.defineProperty(t,"__esModule",{value:!0})});

es/GridContent.js

@@ -5,2 +5,3 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
+import { getItemVisibleRect, needsRender } from './utils/visible';
 
@@ -119,5 +120,7 @@ var GridContent =
 
-  _proto._renderItem = function _renderItem(attrs) {
+  _proto._renderItem = function _renderItem(attrs, visibleRect) {
     var renderItem = this.props.renderItem;
-    var element = renderItem(_extends({}, attrs));
+    var element = renderItem(_extends({}, attrs, {
+      visibleRect: visibleRect
+    }));
     var Item = element.type;
@@ -156,3 +159,3 @@
       if (attrs && needsRender(attrs.rect, visibleRect)) {
-        items.push(this._renderItem(attrs));
+        items.push(this._renderItem(attrs, getItemVisibleRect(attrs.rect, visibleRect)));
       }
@@ -189,19 +192,6 @@ }
 
-function needsRender(rect, vRect, name) {
-  if (name) {
-    var _ref2 = name === 'y' ? ['y', 'height'] : ['x', 'width'],
-        x = _ref2[0],
-        width = _ref2[1];
-
-    var dx = rect[x] - vRect[x];
-    return -0.25 * vRect[width] < dx + rect[width] && dx < 1.25 * vRect[width];
-  }
-
-  return needsRender(rect, vRect, 'x') && needsRender(rect, vRect, 'y');
-}
-
 function calculateItemIndex(index, count, direction) {
-  var _ref3 = direction === 'x' ? ['column', 'row'] : ['row', 'column'],
-      row = _ref3[0],
-      column = _ref3[1];
+  var _ref2 = direction === 'x' ? ['column', 'row'] : ['row', 'column'],
+      row = _ref2[0],
+      column = _ref2[1];
 
@@ -214,9 +204,9 @@ return index[column] + index[row] * count[column];
 
-  var _ref4 = direction === 'x' ? ['y', 'x', 'height', 'width', 'column', 'row'] : ['x', 'y', 'width', 'height', 'row', 'column'],
-      x = _ref4[0],
-      y = _ref4[1],
-      width = _ref4[2],
-      height = _ref4[3],
-      row = _ref4[4],
-      column = _ref4[5];
+  var _ref3 = direction === 'x' ? ['y', 'x', 'height', 'width', 'column', 'row'] : ['x', 'y', 'width', 'height', 'row', 'column'],
+      x = _ref3[0],
+      y = _ref3[1],
+      width = _ref3[2],
+      height = _ref3[3],
+      row = _ref3[4],
+      column = _ref3[5];
 
@@ -223,0 +213,0 @@ var sizeWidth = size[width];

es/ListContent.js

@@ -5,2 +5,3 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
+import { getItemVisibleRect, needsRender } from './utils/visible';
 import ItemContent from './ItemContent';
@@ -116,3 +117,3 @@
 
-  _proto._renderItem = function _renderItem(attrs) {
+  _proto._renderItem = function _renderItem(attrs, visibleRect) {
     var _this2 = this;
@@ -127,2 +128,3 @@
     var element = renderItem(_extends({}, attrs, {
+      visibleRect: visibleRect,
       Item: ItemContent
@@ -187,3 +189,3 @@ }));
       if (attrs && needsRender(attrs.rect, visibleRect)) {
-        items.push(this._renderItem(attrs));
+        items.push(this._renderItem(attrs, getItemVisibleRect(attrs.rect, visibleRect)));
       }
@@ -219,23 +221,10 @@ }
 
-function needsRender(rect, vRect, name) {
-  if (name) {
-    var _ref2 = name === 'y' ? ['y', 'height'] : ['x', 'width'],
-        x = _ref2[0],
-        width = _ref2[1];
-
-    var dx = rect[x] - vRect[x];
-    return -0.25 * vRect[width] < dx + rect[width] && dx < 1.25 * vRect[width];
-  }
-
-  return needsRender(rect, vRect, 'x') && needsRender(rect, vRect, 'y');
-}
-
 function calculateLayout(estimatedItemSize, itemHashList, itemSizeDict, itemCount, spacing, direction) {
   var _size;
 
-  var _ref3 = direction === 'x' ? ['y', 'x', 'height', 'width'] : ['x', 'y', 'width', 'height'],
-      x = _ref3[0],
-      y = _ref3[1],
-      width = _ref3[2],
-      height = _ref3[3];
+  var _ref2 = direction === 'x' ? ['y', 'x', 'height', 'width'] : ['x', 'y', 'width', 'height'],
+      x = _ref2[0],
+      y = _ref2[1],
+      width = _ref2[2],
+      height = _ref2[3];
 
@@ -242,0 +231,0 @@ var sizeWidth = 0;

es/Pad.js

@@ -18,6 +18,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 
-  function Pad(props) {
+  function Pad(_props) {
     var _this;
 
-    _this = _React$PureComponent.call(this, props) || this;
+    _this = _React$PureComponent.call(this, _props) || this;
 
@@ -27,9 +27,17 @@ _this._onDragStart = function (_ref) {
 
-      _this.setState(function (_ref2, _ref3) {
-        var contentOffset = _ref2.contentOffset;
-        var directionalLockEnabled = _ref3.directionalLockEnabled;
-        var dragDirection = !directionalLockEnabled ? 'xy' : Math.abs(velocity.x) > Math.abs(velocity.y) ? 'x' : 'y';
+      _this.setState(function (state, props) {
+        var contentOffset = state.contentOffset;
+        var dragDirection = !props.directionalLockEnabled ? {
+          x: 1,
+          y: 1
+        } : Math.abs(velocity.x) > Math.abs(velocity.y) ? {
+          x: 1,
+          y: 0
+        } : {
+          x: 0,
+          y: 1
+        };
         var contentVelocity = {
-          x: dragDirection === 'y' ? 0 : velocity.x,
-          y: dragDirection === 'x' ? 0 : velocity.y
+          x: dragDirection.x * velocity.x,
+          y: dragDirection.y * velocity.y
         };
@@ -47,17 +55,17 @@ return {
 
-    _this._onDragMove = function (_ref4) {
-      var translation = _ref4.translation,
-          interval = _ref4.interval;
+    _this._onDragMove = function (_ref2) {
+      var translation = _ref2.translation,
+          interval = _ref2.interval;
 
-      _this.setState(function (_ref5, _ref6) {
-        var contentOffset = _ref5.contentOffset,
-            size = _ref5.size,
-            contentSize = _ref5.contentSize,
-            dragStartOffset = _ref5.dragStartOffset,
-            dragDirection = _ref5.dragDirection;
-        var alwaysBounceX = _ref6.alwaysBounceX,
-            alwaysBounceY = _ref6.alwaysBounceY;
+      _this.setState(function (state, props) {
+        var contentOffset = state.contentOffset,
+            size = state.size,
+            contentSize = state.contentSize,
+            dragStartOffset = state.dragStartOffset,
+            dragDirection = state.dragDirection;
+        var alwaysBounceX = props.alwaysBounceX,
+            alwaysBounceY = props.alwaysBounceY;
         var nextContentOffset = getAdjustedBounceOffset({
-          x: dragStartOffset.x + (dragDirection === 'y' ? 0 : translation.x),
-          y: dragStartOffset.y + (dragDirection === 'x' ? 0 : translation.y)
+          x: dragStartOffset.x + dragDirection.x * translation.x,
+          y: dragStartOffset.y + dragDirection.y * translation.y
         }, {
@@ -79,11 +87,10 @@ x: alwaysBounceX,
     _this._onDragEnd = function () {
-      _this.setState(function (_ref7, _ref8) {
-        var contentOffset = _ref7.contentOffset,
-            contentVelocity = _ref7.contentVelocity,
-            size = _ref7.size,
-            contentSize = _ref7.contentSize;
-        var pagingEnabled = _ref8.pagingEnabled;
+      _this.setState(function (state, props) {
+        var contentOffset = state.contentOffset,
+            contentVelocity = state.contentVelocity,
+            size = state.size,
+            contentSize = state.contentSize;
+        var pagingEnabled = props.pagingEnabled;
         var decelerationRate = pagingEnabled ? DECELERATION_RATE_STRONG : DECELERATION_RATE_WEAK;
         var decelerationEndOffset = getDecelerationEndOffset(contentOffset, contentVelocity, decelerationRate);
-        decelerationEndOffset = getAdjustedContentOffset(decelerationEndOffset, size, contentSize, pagingEnabled);
 
@@ -105,8 +112,13 @@ if (pagingEnabled) {
     _this._onDragCancel = function () {
-      _this.setState(function (_ref9, _ref10) {
-        var contentOffset = _ref9.contentOffset,
-            dragStartOffset = _ref9.dragStartOffset,
-            size = _ref9.size,
-            contentSize = _ref9.contentSize;
-        var pagingEnabled = _ref10.pagingEnabled;
+      _this.setState(function (state, props) {
+        var contentOffset = state.contentOffset,
+            size = state.size,
+            contentSize = state.contentSize,
+            dragStartOffset = state.dragStartOffset;
+        var decelerationEndOffset = dragStartOffset;
+
+        if (props.pagingEnabled) {
+          decelerationEndOffset = getAdjustedPagingOffset(contentOffset, decelerationEndOffset, size, contentSize);
+        }
+
         return {
@@ -116,3 +128,3 @@ contentOffset: _extends({}, contentOffset),
           decelerating: true,
-          decelerationEndOffset: getAdjustedContentOffset(dragStartOffset, size, contentSize, pagingEnabled),
+          decelerationEndOffset: decelerationEndOffset,
           decelerationRate: DECELERATION_RATE_STRONG
@@ -123,6 +135,6 @@ };
 
-    var width = props.width,
-        height = props.height,
-        contentWidth = props.contentWidth,
-        contentHeight = props.contentHeight;
+    var width = _props.width,
+        height = _props.height,
+        contentWidth = _props.contentWidth,
+        contentHeight = _props.contentHeight;
     _this.state = {
@@ -148,3 +160,3 @@ prevContentOffset: null,
       dragStartOffset: null,
-      dragDirection: 'xy',
+      dragDirection: null,
       decelerating: false,
@@ -174,13 +186,17 @@ decelerationEndOffset: null,
       var nextDecelerating = decelerating;
+      var nextDecelerationEndOffset = decelerationEndOffset;
+      var nextDecelerationRate = decelerationRate;
 
       if (nextDecelerating) {
-        if (decelerationRate !== DECELERATION_RATE_STRONG) {
-          var adjustedContentOffset = getAdjustedContentOffset(contentOffset, size, contentSize, false);
+        var adjustedContentOffset = getAdjustedContentOffset(contentOffset, size, contentSize, false);
 
-          if (contentOffset.x !== adjustedContentOffset.x || contentOffset.y !== adjustedContentOffset.y) {
-            nextState.decelerationRate = DECELERATION_RATE_STRONG;
+        if (adjustedContentOffset.x !== contentOffset.x || adjustedContentOffset.y !== contentOffset.y) {
+          nextDecelerationRate = DECELERATION_RATE_STRONG;
+
+          if (adjustedContentOffset.x !== nextDecelerationEndOffset.x || adjustedContentOffset.y !== nextDecelerationEndOffset.y) {
+            nextDecelerationEndOffset = adjustedContentOffset;
           }
         }
 
-        if (decelerationEndOffset.x === contentOffset.x && decelerationEndOffset.y === contentOffset.y && contentVelocity.x === 0 && contentVelocity.y === 0) {
+        if (nextDecelerationEndOffset.x === contentOffset.x && nextDecelerationEndOffset.y === contentOffset.y && contentVelocity.x === 0 && contentVelocity.y === 0) {
           nextDecelerating = false;
@@ -196,2 +212,10 @@ }
 
+      if (nextDecelerationRate !== decelerationRate) {
+        nextState.decelerationRate = nextDecelerationRate;
+      }
+
+      if (nextDecelerationEndOffset !== decelerationEndOffset) {
+        nextState.decelerationEndOffset = nextDecelerationEndOffset;
+      }
+
       props.onScroll({
@@ -220,11 +244,17 @@ contentOffset: contentOffset,
         contentHeight = _this$props.contentHeight,
-        pagingEnabled = _this$props.pagingEnabled;
+        pagingEnabled = _this$props.pagingEnabled,
+        onResize = _this$props.onResize,
+        onContentResize = _this$props.onContentResize;
 
     if (prevProps.width !== width || prevProps.height !== height) {
+      var size = {
+        width: width,
+        height: height
+      };
+
       this._setStateWithScroll({
-        size: {
-          width: width,
-          height: height
-        }
-      }, true);
+        size: size
+      });
+
+      onResize(size);
     }
@@ -240,3 +270,5 @@
         contentSize: contentSize
-      }, true);
+      });
+
+      onContentResize(contentSize);
     }
@@ -246,3 +278,3 @@
       if (pagingEnabled) {
-        this._setStateWithScroll(null, true);
+        this._setStateWithScroll(null);
       }
@@ -295,42 +327,48 @@ }
 
+  _proto.getVisibleRect = function getVisibleRect() {
+    var _this$state = this.state,
+        contentOffset = _this$state.contentOffset,
+        size = _this$state.size;
+    return {
+      x: -contentOffset.x,
+      y: -contentOffset.y,
+      width: size.width,
+      height: size.height
+    };
+  };
+
   _proto.setContentSize = function setContentSize(contentSize) {
     this._setStateWithScroll({
       contentSize: contentSize
-    }, true);
+    });
+
+    this.props.onContentResize(contentSize);
   };
 
-  _proto.scrollToRect = function scrollToRect(_ref11) {
-    var rect = _ref11.rect,
-        _ref11$align = _ref11.align,
-        align = _ref11$align === void 0 ? 'auto' : _ref11$align,
-        animated = _ref11.animated;
+  _proto.scrollToRect = function scrollToRect(_ref3) {
+    var rect = _ref3.rect,
+        _ref3$align = _ref3.align,
+        align = _ref3$align === void 0 ? 'auto' : _ref3$align,
+        animated = _ref3.animated;
 
-    this._setStateWithScroll(function (_ref12) {
-      var contentOffset = _ref12.contentOffset,
-          size = _ref12.size;
-      return {
-        contentOffset: calculateRectOffset(rect, align, contentOffset, size)
-      };
+    this._setContentOffset(function (_ref4) {
+      var contentOffset = _ref4.contentOffset,
+          size = _ref4.size;
+      return calculateRectOffset(rect, align, contentOffset, size);
     }, animated);
   };
 
-  _proto.scrollTo = function scrollTo(_ref13) {
-    var offset = _ref13.offset,
-        animated = _ref13.animated;
+  _proto.scrollTo = function scrollTo(_ref5) {
+    var offset = _ref5.offset,
+        animated = _ref5.animated;
 
-    this._setStateWithScroll({
-      contentOffset: offset
-    }, animated);
+    this._setContentOffset(offset, animated);
   };
 
-  _proto._setStateWithScroll = function _setStateWithScroll(nState, animated) {
+  _proto._setContentOffset = function _setContentOffset(offset, animated) {
     this.setState(function (state, props) {
-      if (typeof nState === 'function') {
-        nState = nState(state, props);
+      if (typeof offset === 'function') {
+        offset = offset(state, props);
       }
 
-      var _ref14 = nState || {},
-          offset = _ref14.contentOffset,
-          nextState = _objectWithoutPropertiesLoose(_ref14, ["contentOffset"]);
-
       var contentOffset = state.contentOffset,
@@ -340,19 +378,11 @@ size = state.size,
           dragging = state.dragging;
-      var pagingEnabled = props.pagingEnabled;
 
       if (dragging) {
-        return nextState;
+        return null;
       }
 
-      var nextSize = nextState.size || size;
-      var nextContentSize = nextState.contentSize || contentSize;
+      offset = getAdjustedContentOffset(offset, size, contentSize, props.pagingEnabled);
 
-      if (!offset) {
-        offset = contentOffset;
-      }
-
-      offset = getAdjustedContentOffset(offset, nextSize, nextContentSize, pagingEnabled);
-
       if (!animated) {
-        return _extends({}, nextState, {
+        return {
           contentOffset: offset,
@@ -364,6 +394,6 @@ contentVelocity: {
           decelerating: false
-        });
+        };
       }
 
-      return _extends({}, nextState, {
+      return {
         contentOffset: _extends({}, contentOffset),
@@ -373,2 +403,28 @@ decelerating: true,
         decelerationRate: DECELERATION_RATE_STRONG
+      };
+    });
+  };
+
+  _proto._setStateWithScroll = function _setStateWithScroll(nextState) {
+    this.setState(function (state, props) {
+      var dragging = state.dragging,
+          contentOffset = state.contentOffset,
+          size = state.size,
+          contentSize = state.contentSize;
+
+      if (dragging) {
+        return nextState;
+      }
+
+      var adjustedContentOffset = getAdjustedContentOffset(contentOffset, size, contentSize, props.pagingEnabled);
+
+      if (adjustedContentOffset.x === contentOffset.x && adjustedContentOffset.y === contentOffset.y) {
+        return nextState;
+      }
+
+      return _extends({}, nextState, {
+        contentOffset: _extends({}, contentOffset),
+        decelerating: true,
+        decelerationEndOffset: adjustedContentOffset,
+        decelerationRate: DECELERATION_RATE_STRONG
       });
@@ -379,9 +435,9 @@ });
   _proto._decelerate = function _decelerate(interval) {
-    this.setState(function (_ref15) {
-      var size = _ref15.size,
-          contentOffset = _ref15.contentOffset,
-          contentVelocity = _ref15.contentVelocity,
-          decelerating = _ref15.decelerating,
-          decelerationEndOffset = _ref15.decelerationEndOffset,
-          decelerationRate = _ref15.decelerationRate;
+    this.setState(function (state) {
+      var contentOffset = state.contentOffset,
+          contentVelocity = state.contentVelocity,
+          size = state.size,
+          decelerating = state.decelerating,
+          decelerationEndOffset = state.decelerationEndOffset,
+          decelerationRate = state.decelerationRate;
 
@@ -392,6 +448,9 @@ if (!decelerating) {
 
-      var next = calculateDeceleration(interval, decelerationRate, contentVelocity, contentOffset, decelerationEndOffset, size);
+      var _calculateDeceleratio = calculateDeceleration(interval, decelerationRate, contentVelocity, contentOffset, decelerationEndOffset, size),
+          offset = _calculateDeceleratio.offset,
+          velocity = _calculateDeceleratio.velocity;
+
       return {
-        contentOffset: next.offset,
-        contentVelocity: next.velocity
+        contentOffset: offset,
+        contentVelocity: velocity
       };
@@ -412,10 +471,13 @@ });
         alwaysBounceY = _this$props2.alwaysBounceY,
+        onScroll = _this$props2.onScroll,
+        onResize = _this$props2.onResize,
+        onContentResize = _this$props2.onContentResize,
         style = _this$props2.style,
         children = _this$props2.children,
-        boundingProps = _objectWithoutPropertiesLoose(_this$props2, ["width", "height", "contentWidth", "contentHeight", "scrollEnabled", "pagingEnabled", "directionalLockEnabled", "alwaysBounceX", "alwaysBounceY", "style", "children"]);
+        boundingProps = _objectWithoutPropertiesLoose(_this$props2, ["width", "height", "contentWidth", "contentHeight", "scrollEnabled", "pagingEnabled", "directionalLockEnabled", "alwaysBounceX", "alwaysBounceY", "onScroll", "onResize", "onContentResize", "style", "children"]);
 
-    var _this$state = this.state,
-        size = _this$state.size,
-        contentSize = _this$state.contentSize,
-        contentOffset = _this$state.contentOffset;
+    var _this$state2 = this.state,
+        size = _this$state2.size,
+        contentSize = _this$state2.contentSize,
+        contentOffset = _this$state2.contentOffset;
     var boundingStyles = StyleSheet.create(_extends({
@@ -463,4 +525,6 @@ overflow: 'hidden',
   alwaysBounceY: true,
-  onScroll: function onScroll() {}
+  onScroll: function onScroll() {},
+  onResize: function onResize() {},
+  onContentResize: function onContentResize() {}
 };
 export { Pad as default };

es/utils/motion.js

@@ -0,1 +1,3 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+
 function getAcc(rate, _ref) {
@@ -25,5 +27,4 @@ var x = _ref.x,
 
-    var minOffsetX = Math.min(size[width] - cSize[width], 0);
-    var offsetX = offset[x];
-    offsetX = Math.max(minOffsetX, Math.min(offsetX, 0));
+    var offsetX = Math.min(size[width] - cSize[width], 0);
+    offsetX = Math.max(offsetX, Math.min(offset[x], 0));
 
@@ -46,9 +47,36 @@ if (paging) {
 }
-export function getAdjustedBounceOffset(offset, bounce, size, cSize, name) {
+export function getAdjustedPagingOffset(offsetEnd, offset, size, cSize, name) {
   if (name) {
-    var _ref3 = name === 'y' ? ['y', 'height', 'width'] : ['x', 'width', 'height'],
+    var _ref3 = name === 'y' ? ['y', 'height'] : ['x', 'width'],
         x = _ref3[0],
-        width = _ref3[1],
-        height = _ref3[2];
+        width = _ref3[1];
 
+    var offsetX = Math.min(size[width] - cSize[width], 0);
+    offsetX = Math.max(offsetX, Math.min(offset[x], 0));
+
+    if (!size[width]) {
+      offsetX = 0;
+    } else {
+      offsetX = size[width] * Math.floor(offsetX / size[width]);
+    }
+
+    if (offsetEnd[x] < offsetX + 0.5 * size[width]) {
+      return offsetX;
+    } else {
+      return offsetX + size[width];
+    }
+  }
+
+  return {
+    x: getAdjustedPagingOffset(offsetEnd, offset, size, cSize, 'x'),
+    y: getAdjustedPagingOffset(offsetEnd, offset, size, cSize, 'y')
+  };
+}
+export function getAdjustedBounceOffset(offset, bounce, size, cSize, name) {
+  if (name) {
+    var _ref4 = name === 'y' ? ['y', 'height', 'width'] : ['x', 'width', 'height'],
+        x = _ref4[0],
+        width = _ref4[1],
+        height = _ref4[2];
+
     var offsetX = offset[x];
@@ -103,29 +131,6 @@ var minOffsetX = Math.min(size[width] - cSize[width], 0);
 }
-export function getAdjustedPagingOffset(offset, offsetEnd, size, cSize, name) {
+export function calculateDeceleration(interval, acc, velocity, offset, offsetEnd, size, name) {
   if (name) {
-    var _ref4 = name === 'y' ? ['y', 'height'] : ['x', 'width'],
-        x = _ref4[0],
-        width = _ref4[1];
+    var _offset, _velocity;
 
-    var offsetEndX = offsetEnd[x];
-    var minOffsetX = Math.min(size[width] - cSize[width], 0);
-    minOffsetX = Math.max(minOffsetX, Math.min(offset[x], 0));
-
-    if (!size[width]) {
-      minOffsetX = 0;
-    } else {
-      minOffsetX = size[width] * Math.floor(offset[x] / size[width]);
-    }
-
-    offsetEndX = Math.max(minOffsetX, Math.min(offsetEndX, minOffsetX + size[width]));
-    return offsetEndX;
-  }
-
-  return {
-    x: getAdjustedPagingOffset(offset, offsetEnd, size, cSize, 'x'),
-    y: getAdjustedPagingOffset(offset, offsetEnd, size, cSize, 'y')
-  };
-}
-export function calculateDeceleration(interval, acc, velocity, offset, offsetEnd, size, name) {
-  if (name) {
     var _ref5 = name === 'y' ? ['y', 'height'] : ['x', 'width'],
@@ -168,4 +173,4 @@ x = _ref5[0],
     return {
-      offset: offsetX,
-      velocity: velocityX
+      offset: (_offset = {}, _offset[x] = offsetX, _offset),
+      velocity: (_velocity = {}, _velocity[x] = velocityX, _velocity)
     };
@@ -184,10 +189,4 @@ }
   return {
-    offset: {
-      x: nextX.offset,
-      y: nextY.offset
-    },
-    velocity: {
-      x: nextX.velocity,
-      y: nextY.velocity
-    }
+    offset: _extends({}, nextX.offset, nextY.offset),
+    velocity: _extends({}, nextX.velocity, nextY.velocity)
   };
@@ -194,0 +193,0 @@ }

lib/GridContent.js

@@ -16,2 +16,4 @@ "use strict";
 
+var _visible = require("./utils/visible");
+
 var GridContent =
@@ -129,5 +131,7 @@ /*#__PURE__*/
 
-  _proto._renderItem = function _renderItem(attrs) {
+  _proto._renderItem = function _renderItem(attrs, visibleRect) {
     var renderItem = this.props.renderItem;
-    var element = renderItem((0, _extends2.default)({}, attrs));
+    var element = renderItem((0, _extends2.default)({}, attrs, {
+      visibleRect: visibleRect
+    }));
     var Item = element.type;
@@ -161,4 +165,4 @@ var _element$props = element.props,
 
-      if (attrs && needsRender(attrs.rect, visibleRect)) {
-        items.push(this._renderItem(attrs));
+      if (attrs && (0, _visible.needsRender)(attrs.rect, visibleRect)) {
+        items.push(this._renderItem(attrs, (0, _visible.getItemVisibleRect)(attrs.rect, visibleRect)));
       }
@@ -195,19 +199,6 @@ }
 
-function needsRender(rect, vRect, name) {
-  if (name) {
-    var _ref2 = name === 'y' ? ['y', 'height'] : ['x', 'width'],
-        x = _ref2[0],
-        width = _ref2[1];
-
-    var dx = rect[x] - vRect[x];
-    return -0.25 * vRect[width] < dx + rect[width] && dx < 1.25 * vRect[width];
-  }
-
-  return needsRender(rect, vRect, 'x') && needsRender(rect, vRect, 'y');
-}
-
 function calculateItemIndex(index, count, direction) {
-  var _ref3 = direction === 'x' ? ['column', 'row'] : ['row', 'column'],
-      row = _ref3[0],
-      column = _ref3[1];
+  var _ref2 = direction === 'x' ? ['column', 'row'] : ['row', 'column'],
+      row = _ref2[0],
+      column = _ref2[1];
 
@@ -220,9 +211,9 @@ return index[column] + index[row] * count[column];
 
-  var _ref4 = direction === 'x' ? ['y', 'x', 'height', 'width', 'column', 'row'] : ['x', 'y', 'width', 'height', 'row', 'column'],
-      x = _ref4[0],
-      y = _ref4[1],
-      width = _ref4[2],
-      height = _ref4[3],
-      row = _ref4[4],
-      column = _ref4[5];
+  var _ref3 = direction === 'x' ? ['y', 'x', 'height', 'width', 'column', 'row'] : ['x', 'y', 'width', 'height', 'row', 'column'],
+      x = _ref3[0],
+      y = _ref3[1],
+      width = _ref3[2],
+      height = _ref3[3],
+      row = _ref3[4],
+      column = _ref3[5];
 
@@ -229,0 +220,0 @@ var sizeWidth = size[width];

lib/ListContent.js

@@ -16,2 +16,4 @@ "use strict";
 
+var _visible = require("./utils/visible");
+
 var _ItemContent = _interopRequireDefault(require("./ItemContent"));
@@ -127,3 +129,3 @@
 
-  _proto._renderItem = function _renderItem(attrs) {
+  _proto._renderItem = function _renderItem(attrs, visibleRect) {
     var _this2 = this;
@@ -138,2 +140,3 @@
     var element = renderItem((0, _extends3.default)({}, attrs, {
+      visibleRect: visibleRect,
       Item: _ItemContent.default
@@ -194,4 +197,4 @@ }));
 
-      if (attrs && needsRender(attrs.rect, visibleRect)) {
-        items.push(this._renderItem(attrs));
+      if (attrs && (0, _visible.needsRender)(attrs.rect, visibleRect)) {
+        items.push(this._renderItem(attrs, (0, _visible.getItemVisibleRect)(attrs.rect, visibleRect)));
       }
@@ -227,23 +230,10 @@ }
 
-function needsRender(rect, vRect, name) {
-  if (name) {
-    var _ref2 = name === 'y' ? ['y', 'height'] : ['x', 'width'],
-        x = _ref2[0],
-        width = _ref2[1];
-
-    var dx = rect[x] - vRect[x];
-    return -0.25 * vRect[width] < dx + rect[width] && dx < 1.25 * vRect[width];
-  }
-
-  return needsRender(rect, vRect, 'x') && needsRender(rect, vRect, 'y');
-}
-
 function calculateLayout(estimatedItemSize, itemHashList, itemSizeDict, itemCount, spacing, direction) {
   var _size;
 
-  var _ref3 = direction === 'x' ? ['y', 'x', 'height', 'width'] : ['x', 'y', 'width', 'height'],
-      x = _ref3[0],
-      y = _ref3[1],
-      width = _ref3[2],
-      height = _ref3[3];
+  var _ref2 = direction === 'x' ? ['y', 'x', 'height', 'width'] : ['x', 'y', 'width', 'height'],
+      x = _ref2[0],
+      y = _ref2[1],
+      width = _ref2[2],
+      height = _ref2[3];
 
@@ -250,0 +240,0 @@ var sizeWidth = 0;

lib/Pad.js

@@ -34,6 +34,6 @@ "use strict";
 
-  function Pad(props) {
+  function Pad(_props) {
     var _this;
 
-    _this = _React$PureComponent.call(this, props) || this;
+    _this = _React$PureComponent.call(this, _props) || this;
 
@@ -43,9 +43,17 @@ _this._onDragStart = function (_ref) {
 
-      _this.setState(function (_ref2, _ref3) {
-        var contentOffset = _ref2.contentOffset;
-        var directionalLockEnabled = _ref3.directionalLockEnabled;
-        var dragDirection = !directionalLockEnabled ? 'xy' : Math.abs(velocity.x) > Math.abs(velocity.y) ? 'x' : 'y';
+      _this.setState(function (state, props) {
+        var contentOffset = state.contentOffset;
+        var dragDirection = !props.directionalLockEnabled ? {
+          x: 1,
+          y: 1
+        } : Math.abs(velocity.x) > Math.abs(velocity.y) ? {
+          x: 1,
+          y: 0
+        } : {
+          x: 0,
+          y: 1
+        };
         var contentVelocity = {
-          x: dragDirection === 'y' ? 0 : velocity.x,
-          y: dragDirection === 'x' ? 0 : velocity.y
+          x: dragDirection.x * velocity.x,
+          y: dragDirection.y * velocity.y
         };
@@ -63,17 +71,17 @@ return {
 
-    _this._onDragMove = function (_ref4) {
-      var translation = _ref4.translation,
-          interval = _ref4.interval;
+    _this._onDragMove = function (_ref2) {
+      var translation = _ref2.translation,
+          interval = _ref2.interval;
 
-      _this.setState(function (_ref5, _ref6) {
-        var contentOffset = _ref5.contentOffset,
-            size = _ref5.size,
-            contentSize = _ref5.contentSize,
-            dragStartOffset = _ref5.dragStartOffset,
-            dragDirection = _ref5.dragDirection;
-        var alwaysBounceX = _ref6.alwaysBounceX,
-            alwaysBounceY = _ref6.alwaysBounceY;
+      _this.setState(function (state, props) {
+        var contentOffset = state.contentOffset,
+            size = state.size,
+            contentSize = state.contentSize,
+            dragStartOffset = state.dragStartOffset,
+            dragDirection = state.dragDirection;
+        var alwaysBounceX = props.alwaysBounceX,
+            alwaysBounceY = props.alwaysBounceY;
         var nextContentOffset = (0, _motion.getAdjustedBounceOffset)({
-          x: dragStartOffset.x + (dragDirection === 'y' ? 0 : translation.x),
-          y: dragStartOffset.y + (dragDirection === 'x' ? 0 : translation.y)
+          x: dragStartOffset.x + dragDirection.x * translation.x,
+          y: dragStartOffset.y + dragDirection.y * translation.y
         }, {
@@ -95,11 +103,10 @@ x: alwaysBounceX,
     _this._onDragEnd = function () {
-      _this.setState(function (_ref7, _ref8) {
-        var contentOffset = _ref7.contentOffset,
-            contentVelocity = _ref7.contentVelocity,
-            size = _ref7.size,
-            contentSize = _ref7.contentSize;
-        var pagingEnabled = _ref8.pagingEnabled;
+      _this.setState(function (state, props) {
+        var contentOffset = state.contentOffset,
+            contentVelocity = state.contentVelocity,
+            size = state.size,
+            contentSize = state.contentSize;
+        var pagingEnabled = props.pagingEnabled;
         var decelerationRate = pagingEnabled ? DECELERATION_RATE_STRONG : DECELERATION_RATE_WEAK;
         var decelerationEndOffset = (0, _motion.getDecelerationEndOffset)(contentOffset, contentVelocity, decelerationRate);
-        decelerationEndOffset = (0, _motion.getAdjustedContentOffset)(decelerationEndOffset, size, contentSize, pagingEnabled);
 
@@ -121,8 +128,13 @@ if (pagingEnabled) {
     _this._onDragCancel = function () {
-      _this.setState(function (_ref9, _ref10) {
-        var contentOffset = _ref9.contentOffset,
-            dragStartOffset = _ref9.dragStartOffset,
-            size = _ref9.size,
-            contentSize = _ref9.contentSize;
-        var pagingEnabled = _ref10.pagingEnabled;
+      _this.setState(function (state, props) {
+        var contentOffset = state.contentOffset,
+            size = state.size,
+            contentSize = state.contentSize,
+            dragStartOffset = state.dragStartOffset;
+        var decelerationEndOffset = dragStartOffset;
+
+        if (props.pagingEnabled) {
+          decelerationEndOffset = (0, _motion.getAdjustedPagingOffset)(contentOffset, decelerationEndOffset, size, contentSize);
+        }
+
         return {
@@ -132,3 +144,3 @@ contentOffset: (0, _extends2.default)({}, contentOffset),
           decelerating: true,
-          decelerationEndOffset: (0, _motion.getAdjustedContentOffset)(dragStartOffset, size, contentSize, pagingEnabled),
+          decelerationEndOffset: decelerationEndOffset,
           decelerationRate: DECELERATION_RATE_STRONG
@@ -139,6 +151,6 @@ };
 
-    var width = props.width,
-        height = props.height,
-        contentWidth = props.contentWidth,
-        contentHeight = props.contentHeight;
+    var width = _props.width,
+        height = _props.height,
+        contentWidth = _props.contentWidth,
+        contentHeight = _props.contentHeight;
     _this.state = {
@@ -164,3 +176,3 @@ prevContentOffset: null,
       dragStartOffset: null,
-      dragDirection: 'xy',
+      dragDirection: null,
       decelerating: false,
@@ -190,13 +202,17 @@ decelerationEndOffset: null,
       var nextDecelerating = decelerating;
+      var nextDecelerationEndOffset = decelerationEndOffset;
+      var nextDecelerationRate = decelerationRate;
 
       if (nextDecelerating) {
-        if (decelerationRate !== DECELERATION_RATE_STRONG) {
-          var adjustedContentOffset = (0, _motion.getAdjustedContentOffset)(contentOffset, size, contentSize, false);
+        var adjustedContentOffset = (0, _motion.getAdjustedContentOffset)(contentOffset, size, contentSize, false);
 
-          if (contentOffset.x !== adjustedContentOffset.x || contentOffset.y !== adjustedContentOffset.y) {
-            nextState.decelerationRate = DECELERATION_RATE_STRONG;
+        if (adjustedContentOffset.x !== contentOffset.x || adjustedContentOffset.y !== contentOffset.y) {
+          nextDecelerationRate = DECELERATION_RATE_STRONG;
+
+          if (adjustedContentOffset.x !== nextDecelerationEndOffset.x || adjustedContentOffset.y !== nextDecelerationEndOffset.y) {
+            nextDecelerationEndOffset = adjustedContentOffset;
           }
         }
 
-        if (decelerationEndOffset.x === contentOffset.x && decelerationEndOffset.y === contentOffset.y && contentVelocity.x === 0 && contentVelocity.y === 0) {
+        if (nextDecelerationEndOffset.x === contentOffset.x && nextDecelerationEndOffset.y === contentOffset.y && contentVelocity.x === 0 && contentVelocity.y === 0) {
           nextDecelerating = false;
@@ -212,2 +228,10 @@ }
 
+      if (nextDecelerationRate !== decelerationRate) {
+        nextState.decelerationRate = nextDecelerationRate;
+      }
+
+      if (nextDecelerationEndOffset !== decelerationEndOffset) {
+        nextState.decelerationEndOffset = nextDecelerationEndOffset;
+      }
+
       props.onScroll({
@@ -236,11 +260,17 @@ contentOffset: contentOffset,
         contentHeight = _this$props.contentHeight,
-        pagingEnabled = _this$props.pagingEnabled;
+        pagingEnabled = _this$props.pagingEnabled,
+        onResize = _this$props.onResize,
+        onContentResize = _this$props.onContentResize;
 
     if (prevProps.width !== width || prevProps.height !== height) {
+      var size = {
+        width: width,
+        height: height
+      };
+
       this._setStateWithScroll({
-        size: {
-          width: width,
-          height: height
-        }
-      }, true);
+        size: size
+      });
+
+      onResize(size);
     }
@@ -256,3 +286,5 @@
         contentSize: contentSize
-      }, true);
+      });
+
+      onContentResize(contentSize);
     }
@@ -262,3 +294,3 @@
       if (pagingEnabled) {
-        this._setStateWithScroll(null, true);
+        this._setStateWithScroll(null);
       }
@@ -311,42 +343,48 @@ }
 
+  _proto.getVisibleRect = function getVisibleRect() {
+    var _this$state = this.state,
+        contentOffset = _this$state.contentOffset,
+        size = _this$state.size;
+    return {
+      x: -contentOffset.x,
+      y: -contentOffset.y,
+      width: size.width,
+      height: size.height
+    };
+  };
+
   _proto.setContentSize = function setContentSize(contentSize) {
     this._setStateWithScroll({
       contentSize: contentSize
-    }, true);
+    });
+
+    this.props.onContentResize(contentSize);
   };
 
-  _proto.scrollToRect = function scrollToRect(_ref11) {
-    var rect = _ref11.rect,
-        _ref11$align = _ref11.align,
-        align = _ref11$align === void 0 ? 'auto' : _ref11$align,
-        animated = _ref11.animated;
+  _proto.scrollToRect = function scrollToRect(_ref3) {
+    var rect = _ref3.rect,
+        _ref3$align = _ref3.align,
+        align = _ref3$align === void 0 ? 'auto' : _ref3$align,
+        animated = _ref3.animated;
 
-    this._setStateWithScroll(function (_ref12) {
-      var contentOffset = _ref12.contentOffset,
-          size = _ref12.size;
-      return {
-        contentOffset: (0, _motion.calculateRectOffset)(rect, align, contentOffset, size)
-      };
+    this._setContentOffset(function (_ref4) {
+      var contentOffset = _ref4.contentOffset,
+          size = _ref4.size;
+      return (0, _motion.calculateRectOffset)(rect, align, contentOffset, size);
     }, animated);
   };
 
-  _proto.scrollTo = function scrollTo(_ref13) {
-    var offset = _ref13.offset,
-        animated = _ref13.animated;
+  _proto.scrollTo = function scrollTo(_ref5) {
+    var offset = _ref5.offset,
+        animated = _ref5.animated;
 
-    this._setStateWithScroll({
-      contentOffset: offset
-    }, animated);
+    this._setContentOffset(offset, animated);
   };
 
-  _proto._setStateWithScroll = function _setStateWithScroll(nState, animated) {
+  _proto._setContentOffset = function _setContentOffset(offset, animated) {
     this.setState(function (state, props) {
-      if (typeof nState === 'function') {
-        nState = nState(state, props);
+      if (typeof offset === 'function') {
+        offset = offset(state, props);
       }
 
-      var _ref14 = nState || {},
-          offset = _ref14.contentOffset,
-          nextState = (0, _objectWithoutPropertiesLoose2.default)(_ref14, ["contentOffset"]);
-
       var contentOffset = state.contentOffset,
@@ -356,19 +394,11 @@ size = state.size,
           dragging = state.dragging;
-      var pagingEnabled = props.pagingEnabled;
 
       if (dragging) {
-        return nextState;
+        return null;
       }
 
-      var nextSize = nextState.size || size;
-      var nextContentSize = nextState.contentSize || contentSize;
+      offset = (0, _motion.getAdjustedContentOffset)(offset, size, contentSize, props.pagingEnabled);
 
-      if (!offset) {
-        offset = contentOffset;
-      }
-
-      offset = (0, _motion.getAdjustedContentOffset)(offset, nextSize, nextContentSize, pagingEnabled);
-
       if (!animated) {
-        return (0, _extends2.default)({}, nextState, {
+        return {
           contentOffset: offset,
@@ -380,6 +410,6 @@ contentVelocity: {
           decelerating: false
-        });
+        };
       }
 
-      return (0, _extends2.default)({}, nextState, {
+      return {
         contentOffset: (0, _extends2.default)({}, contentOffset),
@@ -389,2 +419,28 @@ decelerating: true,
         decelerationRate: DECELERATION_RATE_STRONG
+      };
+    });
+  };
+
+  _proto._setStateWithScroll = function _setStateWithScroll(nextState) {
+    this.setState(function (state, props) {
+      var dragging = state.dragging,
+          contentOffset = state.contentOffset,
+          size = state.size,
+          contentSize = state.contentSize;
+
+      if (dragging) {
+        return nextState;
+      }
+
+      var adjustedContentOffset = (0, _motion.getAdjustedContentOffset)(contentOffset, size, contentSize, props.pagingEnabled);
+
+      if (adjustedContentOffset.x === contentOffset.x && adjustedContentOffset.y === contentOffset.y) {
+        return nextState;
+      }
+
+      return (0, _extends2.default)({}, nextState, {
+        contentOffset: (0, _extends2.default)({}, contentOffset),
+        decelerating: true,
+        decelerationEndOffset: adjustedContentOffset,
+        decelerationRate: DECELERATION_RATE_STRONG
       });
@@ -395,9 +451,9 @@ });
   _proto._decelerate = function _decelerate(interval) {
-    this.setState(function (_ref15) {
-      var size = _ref15.size,
-          contentOffset = _ref15.contentOffset,
-          contentVelocity = _ref15.contentVelocity,
-          decelerating = _ref15.decelerating,
-          decelerationEndOffset = _ref15.decelerationEndOffset,
-          decelerationRate = _ref15.decelerationRate;
+    this.setState(function (state) {
+      var contentOffset = state.contentOffset,
+          contentVelocity = state.contentVelocity,
+          size = state.size,
+          decelerating = state.decelerating,
+          decelerationEndOffset = state.decelerationEndOffset,
+          decelerationRate = state.decelerationRate;
 
@@ -408,6 +464,9 @@ if (!decelerating) {
 
-      var next = (0, _motion.calculateDeceleration)(interval, decelerationRate, contentVelocity, contentOffset, decelerationEndOffset, size);
+      var _calculateDeceleratio = (0, _motion.calculateDeceleration)(interval, decelerationRate, contentVelocity, contentOffset, decelerationEndOffset, size),
+          offset = _calculateDeceleratio.offset,
+          velocity = _calculateDeceleratio.velocity;
+
       return {
-        contentOffset: next.offset,
-        contentVelocity: next.velocity
+        contentOffset: offset,
+        contentVelocity: velocity
       };
@@ -428,9 +487,12 @@ });
         alwaysBounceY = _this$props2.alwaysBounceY,
+        onScroll = _this$props2.onScroll,
+        onResize = _this$props2.onResize,
+        onContentResize = _this$props2.onContentResize,
         style = _this$props2.style,
         children = _this$props2.children,
-        boundingProps = (0, _objectWithoutPropertiesLoose2.default)(_this$props2, ["width", "height", "contentWidth", "contentHeight", "scrollEnabled", "pagingEnabled", "directionalLockEnabled", "alwaysBounceX", "alwaysBounceY", "style", "children"]);
-    var _this$state = this.state,
-        size = _this$state.size,
-        contentSize = _this$state.contentSize,
-        contentOffset = _this$state.contentOffset;
+        boundingProps = (0, _objectWithoutPropertiesLoose2.default)(_this$props2, ["width", "height", "contentWidth", "contentHeight", "scrollEnabled", "pagingEnabled", "directionalLockEnabled", "alwaysBounceX", "alwaysBounceY", "onScroll", "onResize", "onContentResize", "style", "children"]);
+    var _this$state2 = this.state,
+        size = _this$state2.size,
+        contentSize = _this$state2.contentSize,
+        contentOffset = _this$state2.contentOffset;
 
@@ -482,3 +544,5 @@ var boundingStyles = _StyleSheet.default.create((0, _extends2.default)({
   alwaysBounceY: true,
-  onScroll: function onScroll() {}
+  onScroll: function onScroll() {},
+  onResize: function onResize() {},
+  onContentResize: function onContentResize() {}
 };

lib/utils/motion.js

 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.getAdjustedContentOffset = getAdjustedContentOffset;
+exports.getAdjustedPagingOffset = getAdjustedPagingOffset;
 exports.getAdjustedBounceOffset = getAdjustedBounceOffset;
 exports.getDecelerationEndOffset = getDecelerationEndOffset;
-exports.getAdjustedPagingOffset = getAdjustedPagingOffset;
 exports.calculateDeceleration = calculateDeceleration;
 exports.calculateRectOffset = calculateRectOffset;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 function getAcc(rate, _ref) {
@@ -35,5 +39,4 @@ var x = _ref.x,
 
-    var minOffsetX = Math.min(size[width] - cSize[width], 0);
-    var offsetX = offset[x];
-    offsetX = Math.max(minOffsetX, Math.min(offsetX, 0));
+    var offsetX = Math.min(size[width] - cSize[width], 0);
+    offsetX = Math.max(offsetX, Math.min(offset[x], 0));
 
@@ -57,9 +60,37 @@ if (paging) {
 
-function getAdjustedBounceOffset(offset, bounce, size, cSize, name) {
+function getAdjustedPagingOffset(offsetEnd, offset, size, cSize, name) {
   if (name) {
-    var _ref3 = name === 'y' ? ['y', 'height', 'width'] : ['x', 'width', 'height'],
+    var _ref3 = name === 'y' ? ['y', 'height'] : ['x', 'width'],
         x = _ref3[0],
-        width = _ref3[1],
-        height = _ref3[2];
+        width = _ref3[1];
 
+    var offsetX = Math.min(size[width] - cSize[width], 0);
+    offsetX = Math.max(offsetX, Math.min(offset[x], 0));
+
+    if (!size[width]) {
+      offsetX = 0;
+    } else {
+      offsetX = size[width] * Math.floor(offsetX / size[width]);
+    }
+
+    if (offsetEnd[x] < offsetX + 0.5 * size[width]) {
+      return offsetX;
+    } else {
+      return offsetX + size[width];
+    }
+  }
+
+  return {
+    x: getAdjustedPagingOffset(offsetEnd, offset, size, cSize, 'x'),
+    y: getAdjustedPagingOffset(offsetEnd, offset, size, cSize, 'y')
+  };
+}
+
+function getAdjustedBounceOffset(offset, bounce, size, cSize, name) {
+  if (name) {
+    var _ref4 = name === 'y' ? ['y', 'height', 'width'] : ['x', 'width', 'height'],
+        x = _ref4[0],
+        width = _ref4[1],
+        height = _ref4[2];
+
     var offsetX = offset[x];
@@ -116,30 +147,6 @@ var minOffsetX = Math.min(size[width] - cSize[width], 0);
 
-function getAdjustedPagingOffset(offset, offsetEnd, size, cSize, name) {
+function calculateDeceleration(interval, acc, velocity, offset, offsetEnd, size, name) {
   if (name) {
-    var _ref4 = name === 'y' ? ['y', 'height'] : ['x', 'width'],
-        x = _ref4[0],
-        width = _ref4[1];
+    var _offset, _velocity;
 
-    var offsetEndX = offsetEnd[x];
-    var minOffsetX = Math.min(size[width] - cSize[width], 0);
-    minOffsetX = Math.max(minOffsetX, Math.min(offset[x], 0));
-
-    if (!size[width]) {
-      minOffsetX = 0;
-    } else {
-      minOffsetX = size[width] * Math.floor(offset[x] / size[width]);
-    }
-
-    offsetEndX = Math.max(minOffsetX, Math.min(offsetEndX, minOffsetX + size[width]));
-    return offsetEndX;
-  }
-
-  return {
-    x: getAdjustedPagingOffset(offset, offsetEnd, size, cSize, 'x'),
-    y: getAdjustedPagingOffset(offset, offsetEnd, size, cSize, 'y')
-  };
-}
-
-function calculateDeceleration(interval, acc, velocity, offset, offsetEnd, size, name) {
-  if (name) {
     var _ref5 = name === 'y' ? ['y', 'height'] : ['x', 'width'],
@@ -182,4 +189,4 @@ x = _ref5[0],
     return {
-      offset: offsetX,
-      velocity: velocityX
+      offset: (_offset = {}, _offset[x] = offsetX, _offset),
+      velocity: (_velocity = {}, _velocity[x] = velocityX, _velocity)
     };
@@ -198,10 +205,4 @@ }
   return {
-    offset: {
-      x: nextX.offset,
-      y: nextY.offset
-    },
-    velocity: {
-      x: nextX.velocity,
-      y: nextY.velocity
-    }
+    offset: (0, _extends2.default)({}, nextX.offset, nextY.offset),
+    velocity: (0, _extends2.default)({}, nextX.velocity, nextY.velocity)
   };
@@ -208,0 +209,0 @@ }

package.json

 {
   "name": "react-pannable",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Simulate pan gesture and scroll view for touch devices with React",
@@ -19,3 +19,4 @@ "keywords": [
     "collection",
-    "virtualized"
+    "virtualized",
+    "infinite-scroll"
   ],
@@ -22,0 +23,0 @@ "license": "MIT",

README.md

@@ -96,2 +96,4 @@ # react-pannable
 | onScroll               |     function     |   () => {}   | Callback invoked when the content view scrolls.:`({evt: PadEvent}) => void`                         |
+| onResize               |     function     |   () => {}   | Callback invoked when the bounding view resize.:`(size: Size) => void`                              |
+| onContentResize        |     function     |   () => {}   | Callback invoked when the content view resize.:`(size: Size) => void`                               |
 
@@ -98,0 +100,0 @@ #### Public Methods

src/GridContent.js

 import React from 'react';
+import { getItemVisibleRect, needsRender } from './utils/visible';
 
@@ -116,5 +117,5 @@ export default class GridContent extends React.PureComponent {
 
-  _renderItem(attrs) {
+  _renderItem(attrs, visibleRect) {
     const { renderItem } = this.props;
-    const element = renderItem({ ...attrs });
+    const element = renderItem({ ...attrs, visibleRect });
 
@@ -145,3 +146,5 @@ const Item = element.type;
       if (attrs && needsRender(attrs.rect, visibleRect)) {
-        items.push(this._renderItem(attrs));
+        items.push(
+          this._renderItem(attrs, getItemVisibleRect(attrs.rect, visibleRect))
+        );
       }
@@ -154,13 +157,2 @@ }
 
-function needsRender(rect, vRect, name) {
-  if (name) {
-    const [x, width] = name === 'y' ? ['y', 'height'] : ['x', 'width'];
-
-    const dx = rect[x] - vRect[x];
-    return -0.25 * vRect[width] < dx + rect[width] && dx < 1.25 * vRect[width];
-  }
-
-  return needsRender(rect, vRect, 'x') && needsRender(rect, vRect, 'y');
-}
-
 function calculateItemIndex(index, count, direction) {
@@ -167,0 +159,0 @@ const [row, column] =

src/ListContent.js

 import React from 'react';
+import { getItemVisibleRect, needsRender } from './utils/visible';
 import ItemContent from './ItemContent';
@@ -119,6 +120,6 @@
 
-  _renderItem(attrs) {
+  _renderItem(attrs, visibleRect) {
     const { direction, width, height, renderItem } = this.props;
     const { itemSizeDict } = this.state;
-    const element = renderItem({ ...attrs, Item: ItemContent });
+    const element = renderItem({ ...attrs, visibleRect, Item: ItemContent });
 
@@ -170,3 +171,5 @@ const Item = element.type;
       if (attrs && needsRender(attrs.rect, visibleRect)) {
-        items.push(this._renderItem(attrs));
+        items.push(
+          this._renderItem(attrs, getItemVisibleRect(attrs.rect, visibleRect))
+        );
       }
@@ -179,13 +182,2 @@ }
 
-function needsRender(rect, vRect, name) {
-  if (name) {
-    const [x, width] = name === 'y' ? ['y', 'height'] : ['x', 'width'];
-
-    const dx = rect[x] - vRect[x];
-    return -0.25 * vRect[width] < dx + rect[width] && dx < 1.25 * vRect[width];
-  }
-
-  return needsRender(rect, vRect, 'x') && needsRender(rect, vRect, 'y');
-}
-
 function calculateLayout(
@@ -192,0 +184,0 @@ estimatedItemSize,

src/Pad.js

@@ -33,2 +33,4 @@ import React from 'react';
     onScroll: () => {},
+    onResize: () => {},
+    onContentResize: () => {},
   };
@@ -49,3 +51,3 @@
       dragStartOffset: null,
-      dragDirection: 'xy',
+      dragDirection: null,
       decelerating: false,
@@ -77,17 +79,24 @@ decelerationEndOffset: null,
       let nextDecelerating = decelerating;
+      let nextDecelerationEndOffset = decelerationEndOffset;
+      let nextDecelerationRate = decelerationRate;
 
       if (nextDecelerating) {
-        if (decelerationRate !== DECELERATION_RATE_STRONG) {
-          const adjustedContentOffset = getAdjustedContentOffset(
-            contentOffset,
-            size,
-            contentSize,
-            false
-          );
+        const adjustedContentOffset = getAdjustedContentOffset(
+          contentOffset,
+          size,
+          contentSize,
+          false
+        );
 
+        if (
+          adjustedContentOffset.x !== contentOffset.x ||
+          adjustedContentOffset.y !== contentOffset.y
+        ) {
+          nextDecelerationRate = DECELERATION_RATE_STRONG;
+
           if (
-            contentOffset.x !== adjustedContentOffset.x ||
-            contentOffset.y !== adjustedContentOffset.y
+            adjustedContentOffset.x !== nextDecelerationEndOffset.x ||
+            adjustedContentOffset.y !== nextDecelerationEndOffset.y
           ) {
-            nextState.decelerationRate = DECELERATION_RATE_STRONG;
+            nextDecelerationEndOffset = adjustedContentOffset;
           }
@@ -97,4 +106,4 @@ }
         if (
-          decelerationEndOffset.x === contentOffset.x &&
-          decelerationEndOffset.y === contentOffset.y &&
+          nextDecelerationEndOffset.x === contentOffset.x &&
+          nextDecelerationEndOffset.y === contentOffset.y &&
           contentVelocity.x === 0 &&
@@ -112,2 +121,8 @@ contentVelocity.y === 0
       }
+      if (nextDecelerationRate !== decelerationRate) {
+        nextState.decelerationRate = nextDecelerationRate;
+      }
+      if (nextDecelerationEndOffset !== decelerationEndOffset) {
+        nextState.decelerationEndOffset = nextDecelerationEndOffset;
+      }
 
@@ -134,6 +149,11 @@ props.onScroll({
       pagingEnabled,
+      onResize,
+      onContentResize,
     } = this.props;
 
     if (prevProps.width !== width || prevProps.height !== height) {
-      this._setStateWithScroll({ size: { width, height } }, true);
+      const size = { width, height };
+
+      this._setStateWithScroll({ size });
+      onResize(size);
     }
@@ -145,7 +165,9 @@ if (
       const contentSize = { width: contentWidth, height: contentHeight };
-      this._setStateWithScroll({ contentSize }, true);
+
+      this._setStateWithScroll({ contentSize });
+      onContentResize(contentSize);
     }
     if (prevProps.pagingEnabled !== pagingEnabled) {
       if (pagingEnabled) {
-        this._setStateWithScroll(null, true);
+        this._setStateWithScroll(null);
       }
@@ -196,11 +218,22 @@ }
 
+  getVisibleRect() {
+    const { contentOffset, size } = this.state;
+
+    return {
+      x: -contentOffset.x,
+      y: -contentOffset.y,
+      width: size.width,
+      height: size.height,
+    };
+  }
+
   setContentSize(contentSize) {
-    this._setStateWithScroll({ contentSize }, true);
+    this._setStateWithScroll({ contentSize });
+    this.props.onContentResize(contentSize);
   }
 
   scrollToRect({ rect, align = 'auto', animated }) {
-    this._setStateWithScroll(
-      ({ contentOffset, size }) => ({
-        contentOffset: calculateRectOffset(rect, align, contentOffset, size),
-      }),
+    this._setContentOffset(
+      ({ contentOffset, size }) =>
+        calculateRectOffset(rect, align, contentOffset, size),
       animated
@@ -211,30 +244,22 @@ );
   scrollTo({ offset, animated }) {
-    this._setStateWithScroll({ contentOffset: offset }, animated);
+    this._setContentOffset(offset, animated);
   }
 
-  _setStateWithScroll(nState, animated) {
+  _setContentOffset(offset, animated) {
     this.setState((state, props) => {
-      if (typeof nState === 'function') {
-        nState = nState(state, props);
+      if (typeof offset === 'function') {
+        offset = offset(state, props);
       }
 
-      let { contentOffset: offset, ...nextState } = nState || {};
       const { contentOffset, size, contentSize, dragging } = state;
-      const { pagingEnabled } = props;
 
       if (dragging) {
-        return nextState;
+        return null;
       }
 
-      const nextSize = nextState.size || size;
-      const nextContentSize = nextState.contentSize || contentSize;
-
-      if (!offset) {
-        offset = contentOffset;
-      }
       offset = getAdjustedContentOffset(
         offset,
-        nextSize,
-        nextContentSize,
-        pagingEnabled
+        size,
+        contentSize,
+        props.pagingEnabled
       );
@@ -244,3 +269,2 @@
         return {
-          ...nextState,
           contentOffset: offset,
@@ -253,3 +277,2 @@ contentVelocity: { x: 0, y: 0 },
       return {
-        ...nextState,
         contentOffset: { ...contentOffset },
@@ -263,40 +286,74 @@ decelerating: true,
 
+  _setStateWithScroll(nextState) {
+    this.setState((state, props) => {
+      const { dragging, contentOffset, size, contentSize } = state;
+
+      if (dragging) {
+        return nextState;
+      }
+
+      const adjustedContentOffset = getAdjustedContentOffset(
+        contentOffset,
+        size,
+        contentSize,
+        props.pagingEnabled
+      );
+
+      if (
+        adjustedContentOffset.x === contentOffset.x &&
+        adjustedContentOffset.y === contentOffset.y
+      ) {
+        return nextState;
+      }
+
+      return {
+        ...nextState,
+        contentOffset: { ...contentOffset },
+        decelerating: true,
+        decelerationEndOffset: adjustedContentOffset,
+        decelerationRate: DECELERATION_RATE_STRONG,
+      };
+    });
+  }
+
   _decelerate(interval) {
-    this.setState(
-      ({
-        size,
+    this.setState(state => {
+      const {
         contentOffset,
         contentVelocity,
+        size,
         decelerating,
         decelerationEndOffset,
         decelerationRate,
-      }) => {
-        if (!decelerating) {
-          return null;
-        }
+      } = state;
 
-        const next = calculateDeceleration(
-          interval,
-          decelerationRate,
-          contentVelocity,
-          contentOffset,
-          decelerationEndOffset,
-          size
-        );
+      if (!decelerating) {
+        return null;
+      }
 
-        return { contentOffset: next.offset, contentVelocity: next.velocity };
-      }
-    );
+      const { offset, velocity } = calculateDeceleration(
+        interval,
+        decelerationRate,
+        contentVelocity,
+        contentOffset,
+        decelerationEndOffset,
+        size
+      );
+
+      return { contentOffset: offset, contentVelocity: velocity };
+    });
   }
 
   _onDragStart = ({ velocity }) => {
-    this.setState(({ contentOffset }, { directionalLockEnabled }) => {
-      const dragDirection = !directionalLockEnabled
-        ? 'xy'
+    this.setState((state, props) => {
+      const { contentOffset } = state;
+
+      const dragDirection = !props.directionalLockEnabled
+        ? { x: 1, y: 1 }
         : Math.abs(velocity.x) > Math.abs(velocity.y)
-        ? 'x'
-        : 'y';
+        ? { x: 1, y: 0 }
+        : { x: 0, y: 1 };
       const contentVelocity = {
-        x: dragDirection === 'y' ? 0 : velocity.x,
-        y: dragDirection === 'x' ? 0 : velocity.y,
+        x: dragDirection.x * velocity.x,
+        y: dragDirection.y * velocity.y,
       };
@@ -316,87 +373,85 @@
   _onDragMove = ({ translation, interval }) => {
-    this.setState(
-      (
-        { contentOffset, size, contentSize, dragStartOffset, dragDirection },
-        { alwaysBounceX, alwaysBounceY }
-      ) => {
-        const nextContentOffset = getAdjustedBounceOffset(
-          {
-            x: dragStartOffset.x + (dragDirection === 'y' ? 0 : translation.x),
-            y: dragStartOffset.y + (dragDirection === 'x' ? 0 : translation.y),
-          },
-          { x: alwaysBounceX, y: alwaysBounceY },
-          size,
-          contentSize
-        );
-        const contentVelocity = {
-          x: (nextContentOffset.x - contentOffset.x) / interval,
-          y: (nextContentOffset.y - contentOffset.y) / interval,
-        };
+    this.setState((state, props) => {
+      const {
+        contentOffset,
+        size,
+        contentSize,
+        dragStartOffset,
+        dragDirection,
+      } = state;
+      const { alwaysBounceX, alwaysBounceY } = props;
 
-        return { contentOffset: nextContentOffset, contentVelocity };
-      }
-    );
+      const nextContentOffset = getAdjustedBounceOffset(
+        {
+          x: dragStartOffset.x + dragDirection.x * translation.x,
+          y: dragStartOffset.y + dragDirection.y * translation.y,
+        },
+        { x: alwaysBounceX, y: alwaysBounceY },
+        size,
+        contentSize
+      );
+      const contentVelocity = {
+        x: (nextContentOffset.x - contentOffset.x) / interval,
+        y: (nextContentOffset.y - contentOffset.y) / interval,
+      };
+
+      return { contentOffset: nextContentOffset, contentVelocity };
+    });
   };
 
   _onDragEnd = () => {
-    this.setState(
-      (
-        { contentOffset, contentVelocity, size, contentSize },
-        { pagingEnabled }
-      ) => {
-        const decelerationRate = pagingEnabled
-          ? DECELERATION_RATE_STRONG
-          : DECELERATION_RATE_WEAK;
-        let decelerationEndOffset = getDecelerationEndOffset(
+    this.setState((state, props) => {
+      const { contentOffset, contentVelocity, size, contentSize } = state;
+      const { pagingEnabled } = props;
+
+      const decelerationRate = pagingEnabled
+        ? DECELERATION_RATE_STRONG
+        : DECELERATION_RATE_WEAK;
+      let decelerationEndOffset = getDecelerationEndOffset(
+        contentOffset,
+        contentVelocity,
+        decelerationRate
+      );
+
+      if (pagingEnabled) {
+        decelerationEndOffset = getAdjustedPagingOffset(
           contentOffset,
-          contentVelocity,
-          decelerationRate
-        );
-
-        decelerationEndOffset = getAdjustedContentOffset(
           decelerationEndOffset,
           size,
-          contentSize,
-          pagingEnabled
+          contentSize
         );
-        if (pagingEnabled) {
-          decelerationEndOffset = getAdjustedPagingOffset(
-            contentOffset,
-            decelerationEndOffset,
-            size,
-            contentSize
-          );
-        }
+      }
 
-        return {
-          contentOffset: { ...contentOffset },
-          dragging: false,
-          decelerating: true,
-          decelerationEndOffset,
-          decelerationRate,
-        };
-      }
-    );
+      return {
+        contentOffset: { ...contentOffset },
+        dragging: false,
+        decelerating: true,
+        decelerationEndOffset,
+        decelerationRate,
+      };
+    });
   };
 
   _onDragCancel = () => {
-    this.setState(
-      (
-        { contentOffset, dragStartOffset, size, contentSize },
-        { pagingEnabled }
-      ) => {
-        return {
-          contentOffset: { ...contentOffset },
-          dragging: false,
-          decelerating: true,
-          decelerationEndOffset: getAdjustedContentOffset(
-            dragStartOffset,
-            size,
-            contentSize,
-            pagingEnabled
-          ),
-          decelerationRate: DECELERATION_RATE_STRONG,
-        };
+    this.setState((state, props) => {
+      const { contentOffset, size, contentSize, dragStartOffset } = state;
+      let decelerationEndOffset = dragStartOffset;
+
+      if (props.pagingEnabled) {
+        decelerationEndOffset = getAdjustedPagingOffset(
+          contentOffset,
+          decelerationEndOffset,
+          size,
+          contentSize
+        );
       }
-    );
+
+      return {
+        contentOffset: { ...contentOffset },
+        dragging: false,
+        decelerating: true,
+        decelerationEndOffset,
+        decelerationRate: DECELERATION_RATE_STRONG,
+      };
+    });
   };
@@ -415,2 +470,5 @@
       alwaysBounceY,
+      onScroll,
+      onResize,
+      onContentResize,
       style,
@@ -417,0 +475,0 @@ children,

src/utils/motion.js

@@ -14,7 +14,5 @@ function getAcc(rate, { x, y }) {
 
-    const minOffsetX = Math.min(size[width] - cSize[width], 0);
-    let offsetX = offset[x];
+    let offsetX = Math.min(size[width] - cSize[width], 0);
+    offsetX = Math.max(offsetX, Math.min(offset[x], 0));
 
-    offsetX = Math.max(minOffsetX, Math.min(offsetX, 0));
-
     if (paging) {
@@ -37,2 +35,28 @@ if (!size[width]) {
 
+export function getAdjustedPagingOffset(offsetEnd, offset, size, cSize, name) {
+  if (name) {
+    const [x, width] = name === 'y' ? ['y', 'height'] : ['x', 'width'];
+
+    let offsetX = Math.min(size[width] - cSize[width], 0);
+    offsetX = Math.max(offsetX, Math.min(offset[x], 0));
+
+    if (!size[width]) {
+      offsetX = 0;
+    } else {
+      offsetX = size[width] * Math.floor(offsetX / size[width]);
+    }
+
+    if (offsetEnd[x] < offsetX + 0.5 * size[width]) {
+      return offsetX;
+    } else {
+      return offsetX + size[width];
+    }
+  }
+
+  return {
+    x: getAdjustedPagingOffset(offsetEnd, offset, size, cSize, 'x'),
+    y: getAdjustedPagingOffset(offsetEnd, offset, size, cSize, 'y'),
+  };
+}
+
 export function getAdjustedBounceOffset(offset, bounce, size, cSize, name) {
@@ -95,31 +119,2 @@ if (name) {
 
-export function getAdjustedPagingOffset(offset, offsetEnd, size, cSize, name) {
-  if (name) {
-    const [x, width] = name === 'y' ? ['y', 'height'] : ['x', 'width'];
-
-    let offsetEndX = offsetEnd[x];
-    let minOffsetX = Math.min(size[width] - cSize[width], 0);
-
-    minOffsetX = Math.max(minOffsetX, Math.min(offset[x], 0));
-
-    if (!size[width]) {
-      minOffsetX = 0;
-    } else {
-      minOffsetX = size[width] * Math.floor(offset[x] / size[width]);
-    }
-
-    offsetEndX = Math.max(
-      minOffsetX,
-      Math.min(offsetEndX, minOffsetX + size[width])
-    );
-
-    return offsetEndX;
-  }
-
-  return {
-    x: getAdjustedPagingOffset(offset, offsetEnd, size, cSize, 'x'),
-    y: getAdjustedPagingOffset(offset, offsetEnd, size, cSize, 'y'),
-  };
-}
-
 export function calculateDeceleration(
@@ -178,3 +173,3 @@ interval,
 
-    return { offset: offsetX, velocity: velocityX };
+    return { offset: { [x]: offsetX }, velocity: { [x]: velocityX } };
   }
@@ -206,4 +201,4 @@
   return {
-    offset: { x: nextX.offset, y: nextY.offset },
-    velocity: { x: nextX.velocity, y: nextY.velocity },
+    offset: { ...nextX.offset, ...nextY.offset },
+    velocity: { ...nextX.velocity, ...nextY.velocity },
   };
@@ -210,0 +205,0 @@ }

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

372556

increased by4.51%

Number of package files

58

increased by18.37%

Lines of code

9246

increased by4.71%

Number of lines in readme file

240

increased by0.84%

No dependency changes