react-pannable - npm Package Compare versions

Comparing version 2.3.0 to 3.0.0

dist/react-pannable.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).ReactPannable={},e.React)}(this,(function(e,t){"use strict";var n="default"in t?t.default:t;function i(e,t){if(null==e)return{};var n,i,r={},o=Object.keys(e);for(i=0;o.length>i;i++)0>t.indexOf(n=o[i])&&(r[n]=e[n]);return r}function r(){return(r=Object.assign||function(e){for(var t=1;arguments.length>t;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(this,arguments)}var o=0,a={target:null,startPoint:null,movePoint:null,moveTime:null,translation:null,velocity:null,interval:null};function l(e,t){switch(t.type){case"disable":case"end":return function(e,t){return e.target?a:e}(e);case"track":return function(e,t){return{target:t.target,startPoint:t.point,movePoint:t.point,moveTime:t.now,translation:null,velocity:null,interval:null}}(0,t);case"move":return function(e,t){var n=e.target,i=e.startPoint,r=e.movePoint,l=e.moveTime,u=e.translation,s=t.point,c=t.now,d=t.shouldStart;if(!n)return e;var f=c-l,h={x:s.x-i.x,y:s.y-i.y},p={x:(s.x-r.x)/f,y:(s.y-r.y)/f};if(u)return{target:n,startPoint:i,movePoint:s,moveTime:c,translation:h,velocity:p,interval:f};if(o>=Math.sqrt(Math.pow(h.x,2)+Math.pow(h.y,2)))return{target:n,startPoint:i,movePoint:s,moveTime:c,translation:null,velocity:null,interval:null};if(!d({target:n,translation:h,velocity:p,interval:f}))return a;return{target:n,startPoint:s,movePoint:s,moveTime:c,translation:{x:0,y:0},velocity:p,interval:f}}(e,t);default:return e}}function u(e,t){var n=t.x,i=t.y,r=Math.sqrt(n*n+i*i);return 0===r?{x:0,y:0}:{x:e*(n/r),y:e*(i/r)}}function s(e,t,n,i){if(i){var r="y"===i?["y","height"]:["x","width"],o=r[0];if(!e[o])return 0;var a=0>e[o]?-1:1;return a*Math.min(a*e[o],Math.sqrt(2*(.5*t[r[1]])*a*n[o]))}"number"==typeof n&&(n=u(n,e));var l={x:s(e,t,n,"x"),y:s(e,t,n,"y")};return l.x===e.x&&l.y===e.y?e:l}function c(e,t,n,i,r,o){if(o){var a="y"===o?["y","height"]:["x","width"],l=a[0],u=a[1],s=t[u],d=Math.min(s-n[u],0),f=e[l];return i&&s>0&&(d=s*Math.ceil(d/s)),f>0?f=0:d>f?f=d:!r&&i&&s>0&&(f=s*Math.round(f/s)),f}var h={x:c(e,t,n,i,r,"x"),y:c(e,t,n,i,r,"y")};return h.x===e.x&&h.y===e.y?e:h}function d(e,t,n,i,r,o){if(o){var a="y"===o?["y","height"]:["x","width"],l=a[0],s=a[1],c=e[l];if(i&&n[s]>0){var f=c/n[s];c=n[s]*(f=t[l]>.5?Math.ceil(f):-.5>t[l]?Math.floor(f):Math.round(f))}else r[l]&&(c+=.5*t[l]*(t[l]/r[l]));return c}return"number"==typeof r&&(r=u(r,t)),{x:d(e,t,n,i,r,"x"),y:d(e,t,n,i,r,"y")}}function f(e,t,n,i){var r,o,a={x:n.x-e.x,y:n.y-e.y},l=Math.sqrt(Math.pow(a.x,2)+Math.pow(a.y,2));if(l){var u=Math.sqrt(.5*Math.pow(r=(t.x*a.x+t.y*a.y)/l,2)+i*l),s=(u-r)/i;0>s&&(u=r,s=0),o=s+u/i}else r=Math.sqrt(Math.pow(t.x,2)+Math.pow(t.y,2)),o=(Math.sqrt(2)+1)*r/i;return o>0?{points:{x:[e.x,e.x+t.x*(o/3),n.x,n.x],y:[e.y,e.y+t.y*(o/3),n.y,n.y]},duration:o,startTime:(new Date).getTime(),endOffset:n,rate:i}:null}var h=.025,p=.0025,v={size:{width:0,height:0},contentSize:{width:0,height:0},contentOffset:{x:0,y:0},contentVelocity:{x:0,y:0},drag:null,deceleration:null,options:[!1,!1,!0,!0],pannable:a};function y(e,t){return function(e,t){var n=e.size,i=e.contentSize,o=e.contentOffset,a=e.contentVelocity,l=e.drag,u=e.deceleration,p=e.options[0],v=h;if(u){var y=u.endOffset;if(y!==c(y,n,i,p,!0)&&o!==c(o,n,i,p,!0)){var m=a;return u.rate!==v&&(m=s(m,n,v),y=d(o,m,n,p,v)),y=c(y,n,i,p,!0),r({},e,{contentVelocity:m,drag:null,deceleration:f(o,m,y,v)})}}else if(!l){var g=c(o,n,i,p);if(o!==g){var w=d(g,{x:0,y:0},n,p,v);return r({},e,{drag:null,deceleration:f(o,a,w,v)})}}return e}(function(e,t){switch(t.type){case"setPannable":return function(e,t){return r({},e,{pannable:t.value})}(e,t);case"setOptions":return function(e,t){return r({},e,{options:t.value})}(e,t);case"setSize":return function(e,t){return r({},e,{size:t.value})}(e,t);case"setContentSize":return function(e,t){return r({},e,{contentSize:t.value})}(e,t);case"dragStart":return function(e,t){var n=e.contentOffset,i=e.pannable.velocity,o={x:1,y:1};e.options[1]&&(Math.abs(i.x)>Math.abs(i.y)?o.y=0:o.x=0);return r({},e,{contentVelocity:{x:o.x*i.x,y:o.y*i.y},drag:{direction:o,startOffset:n},deceleration:null})}(e);case"dragMove":return function(e,t){var n=e.contentOffset,i=e.drag,o=e.options,a=e.pannable,l=a.translation,u=a.interval,s=function e(t,n,i,r,o){if(o){var a="y"===o?["y","height","width"]:["x","width","height"],l=a[0],u=a[1],s=a[2],c=t[l],d=Math.min(i[u]-r[u],0),f=.5*Math.min(i[u],i[s]);return c>0?n[l]?f*(1-f/(f+c)):0:d>c?n[l]?d-f*(1-f/(f-c+d)):d:c}var h={x:e(t,n,i,r,"x"),y:e(t,n,i,r,"y")};return h.x===t.x&&h.y===t.y?t:h}({x:i.startOffset.x+i.direction.x*l.x,y:i.startOffset.y+i.direction.y*l.y},{x:o[2],y:o[3]},e.size,e.contentSize);return r({},e,{contentOffset:s,contentVelocity:{x:(s.x-n.x)/u,y:(s.y-n.y)/u},drag:i,deceleration:null})}(e);case"dragEnd":return function(e,t){var n=e.size,i=e.contentOffset,o=e.options[0],a=p,l=e.contentVelocity;o&&(l=s(l,n,a=h));var u=d(i,l,n,o,a);return r({},e,{contentVelocity:l,drag:null,deceleration:f(i,l,u,a)})}(e);case"dragCancel":return function(e,t){var n=e.contentOffset,i=e.contentVelocity,o=h,a=d(e.drag.startOffset,{x:0,y:0},e.size,e.options[0],o);return r({},e,{drag:null,deceleration:f(n,i,a,o)})}(e);case"decelerate":return function(e,t){var n=e.deceleration,i=t.now;if(!n)return e;if(i>=n.startTime+n.duration)return r({},e,{contentOffset:n.endOffset,contentVelocity:{x:0,y:0},drag:null,deceleration:null});var o=function e(t,n,i){if(i){var o,a=("y"===i?["y"]:["x"])[0],l=t.points,u=t.duration,s=Math.max(0,Math.min((n-t.startTime)/u,1)),c=l[a],d=c[0],f=c[1],h=c[2],p=c[3],v=d-3*(d-f)*s+3*(d-2*f+h)*Math.pow(s,2)-(d-3*f+3*h-p)*Math.pow(s,3),y=(-3*(d-f)+6*(d-2*f+h)*s-3*(d-3*f+3*h-p)*Math.pow(s,2))/u;return(o={})[a+"Offset"]=v,o[a+"Velocity"]=y,o}return r({},e(t,n,"x"),{},e(t,n,"y"))}(n,i);return r({},e,{contentOffset:{x:o.xOffset,y:o.yOffset},contentVelocity:{x:o.xVelocity,y:o.yVelocity},drag:null,deceleration:n})}(e,t);case"scrollTo":return m(e,t);case"scrollToRect":return function(e,t){var n=t.animated,i=function e(t,n,i,r,o){if(o){var a="y"===o?["y","height"]:["x","width"],l=a[0],u=a[1],s=-t[l],c=r[u]-t[u];if("auto"===n[l]){var d=0>c?-1:1;s+=d*Math.max(0,Math.min(d*(i[l]-s),d*c))}else"start"===n[l]?n[l]=0:"center"===n[l]?n[l]=.5:"end"===n[l]&&(n[l]=1),("number"!=typeof n[l]||isNaN(n[l]))&&(n[l]=.5),s+=n[l]*c;return s}"object"!=typeof n&&(n={x:n,y:n});return{x:e(t,n,i,r,"x"),y:e(t,n,i,r,"y")}}(t.rect,t.align,e.contentOffset,e.size);return m(e,{type:"scrollTo",offset:i,animated:n})}(e,t);default:return e}}(e,t))}function m(e,t){var n=e.size,i=e.contentOffset,o=e.contentVelocity,a=e.drag,l=e.deceleration,u=e.options[0],s=t.point,c=t.offset,p=void 0===c?{x:0,y:0}:c;if(s&&(p={x:-s.x,y:-s.y}),a||!t.animated){if(p.x===i.x&&p.y===i.y)return e;var v=r({},e,{contentOffset:p});return a&&(v.drag=r({},a,{startOffset:{x:a.startOffset.x+p.x-i.x,y:a.startOffset.y+p.y-i.y}})),l&&(v.deceleration=f(p,o,{x:l.endOffset.x+p.x-i.x,y:l.endOffset.y+p.y-i.y},l.rate)),v}return r({},e,{drag:null,deceleration:f(i,o,d(p,{x:0,y:0},n,u,h),h)})}var g="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement?t.useLayoutEffect:t.useEffect;function w(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e})),n}var b={create:function(e){var t=e.transformTranslate,n=e.userSelect,r=i(e,["transformTranslate","userSelect"]);return t&&function(e,t){t.transform="translate3d("+e[0]+"px, "+e[1]+"px, 0)",t.WebkitTransform="translate3d("+e[0]+"px, "+e[1]+"px, 0)",t.msTransform="translate("+e[0]+"px, "+e[1]+"px)"}(t,r),n&&function(e,t){t.userSelect=e,t.WebkitUserSelect=e,t.msUserSelect=e}(n,r),r}},x=function(){},E=function(){};void 0!==typeof window&&(x=window.addEventListener,E=window.removeEventListener);function S(e){var o=e.enabled,u=e.shouldStart,s=e.onStart,c=e.onMove,d=e.onEnd,f=e.onCancel,h=e.children,p=i(e,["enabled","shouldStart","onStart","onMove","onEnd","onCancel","children"]),v=t.useReducer(l,a),y=v[0],m=v[1],S=w(y),C=t.useRef(null),z=t.useRef({touchSupported:!1});z.current.state=y,z.current.shouldStart=u;var M=y.target,T=y.translation,O=y.velocity,I=y.interval,k=S.current;g((function(){function e(e,t){m({type:"track",target:e,point:t,now:(new Date).getTime()})}function t(t){if(z.current.touchSupported=!0,t.touches&&1===t.touches.length){var n=t.touches[0];e(n.target,{x:n.pageX,y:n.pageY})}}function n(e){z.current.state.translation&&e.preventDefault()}function i(t){z.current.touchSupported||e(t.target,{x:t.pageX,y:t.pageY})}if(o){var r=C.current;if(!r.addEventListener)return;return r.addEventListener("touchstart",t,!1),r.addEventListener("touchmove",n,!1),r.addEventListener("mousedown",i,!1),function(){r.removeEventListener("touchstart",t,!1),r.removeEventListener("touchmove",n,!1),r.removeEventListener("mousedown",i,!1)}}}),[o]),g((function(){function e(e){m({type:"move",point:e,now:(new Date).getTime(),shouldStart:z.current.shouldStart})}function t(){m({type:"end"})}function n(t){var n=t.touches[0];z.current.state.translation&&t.preventDefault(),e({x:n.pageX,y:n.pageY})}function i(e){z.current.state.translation&&e.preventDefault(),t()}function r(t){t.preventDefault(),e({x:t.pageX,y:t.pageY})}function o(e){e.preventDefault(),t()}if(M)return z.current.touchSupported?(M.addEventListener("touchmove",n,!1),M.addEventListener("touchend",i,!1),M.addEventListener("touchcancel",i,!1),function(){M.removeEventListener("touchmove",n,!1),M.removeEventListener("touchend",i,!1),M.removeEventListener("touchcancel",i,!1)}):(x("mousemove",r,!1),x("mouseup",o,!1),function(){E("mousemove",r,!1),E("mouseup",o,!1)})}),[M]),g((function(){var e={target:M,translation:T,velocity:O,interval:I};k.translation!==T&&(T?k.translation?c(e):s(e):k.translation&&(o?d(e):f(e)))})),t.useMemo((function(){o||m({type:"disable"})}),[o]);var L={};T&&Object.assign(L,b.create({touchAction:"none",pointerEvents:"none",userSelect:"none"})),p.style&&Object.assign(L,p.style),p.style=L;var R="function"==typeof h?h(y):h;return n.createElement("div",r({},p,{ref:C}),R)}S.defaultProps={enabled:!0,shouldStart:function(){return!0},onStart:function(){},onMove:function(){},onEnd:function(){},onCancel:function(){}};var C=n.createContext({visibleRect:null,resizeContent:function(){}});function z(e){var t=0,n=0;if("undefined"!=typeof window&&(t=e.offsetWidth,n=e.offsetHeight,window.getComputedStyle)){var i=window.getComputedStyle(e)||{};i.paddingLeft&&(t-=parseInt(i.paddingLeft,10)),i.paddingRight&&(t-=parseInt(i.paddingRight,10)),i.borderLeftWidth&&(t-=parseInt(i.borderLeftWidth,10)),i.borderRightWidth&&(t-=parseInt(i.borderRightWidth,10)),i.paddingTop&&(n-=parseInt(i.paddingTop,10)),i.paddingBottom&&(n-=parseInt(i.paddingBottom,10)),i.borderTopWidth&&(n-=parseInt(i.borderTopWidth,10)),i.borderBottomWidth&&(n-=parseInt(i.borderBottomWidth,10))}return{width:t,height:n}}function M(e,t){return e===t||!(!e||!t||e.width!==t.width||e.height!==t.height)}function T(e){var o=e.width,a=e.height,l=e.children,u=i(e,["width","height","children"]),s=t.useState(null),c=s[0],d=s[1],f=w(c),h=t.useContext(C),p=t.useRef(null),v=f.current,y=t.useCallback((function(){}),[]),m=t.useCallback((function(){return p.current}),[]),b=t.useCallback((function(){var e=z(p.current);d(e)}),[]);g((function(){M(v,c)||c&&h.resizeContent(c),c||b()})),t.useMemo((function(){var e=null;"number"==typeof o&&"number"==typeof a&&(e={width:o,height:a}),d(e)}),[o,a]);var x={position:"relative"},E={position:"absolute"};"number"==typeof o&&(E.width=o),"number"==typeof a&&(E.height=a),c&&(x.width=c.width,x.height=c.height),u.style&&Object.assign(x,u.style),u.style=x;var S="function"==typeof l?l(c,{getResizeNode:m,calculateSize:b}):l;return n.createElement(C.Provider,{value:r({},h,{resizeContent:y})},n.createElement("div",u,n.createElement("div",{ref:p,style:E},S)))}function O(e,t){return e(t={exports:{}},t.exports),t.exports}T.defaultProps={width:null,height:null},T.PadContent=!0;var I=O((function(e){(e.exports={}).forEach=function(e,t){for(var n=0;e.length>n;n++){var i=t(e[n]);if(i)return i}}})),k=O((function(e){var t=e.exports={};t.isIE=function(e){return(-1!==(t=navigator.userAgent.toLowerCase()).indexOf("msie")||-1!==t.indexOf("trident")||-1!==t.indexOf(" edge/"))&&(!e||e===function(){var e=3,t=document.createElement("div"),n=t.getElementsByTagName("i");do{t.innerHTML="\x3c!--[if gt IE "+ ++e+"]><i></i><![endif]--\x3e"}while(n[0]);return e>4?e:void 0}());var t},t.isLegacyOpera=function(){return!!window.opera}})),L=O((function(e){(e.exports={}).getOption=function(e,t,n){var i=e[t];if(null==i&&void 0!==n)return n;return i}})),R=function(e){var t=(e=e||{}).reporter,n=L.getOption(e,"async",!0),i=L.getOption(e,"auto",!0);i&&!n&&(t&&t.warn("Invalid options combination. auto=true and async=false is invalid. Setting async=true."),n=!0);var r,o=P(),a=!1;function l(){for(a=!0;o.size();){var e=o;o=P(),e.process()}a=!1}function u(){r=setTimeout(l,0)}return{add:function(e,t){!a&&i&&n&&0===o.size()&&u(),o.add(e,t)},force:function(e){a||(void 0===e&&(e=n),r&&(clearTimeout(r),r=null),e?u():l())}}};function P(){var e={},t=0,n=0,i=0;return{add:function(r,o){o||(o=r,r=0),r>n?n=r:i>r&&(i=r),e[r]||(e[r]=[]),e[r].push(o),t++},process:function(){for(var t=i;n>=t;t++)for(var r=e[t],o=0;r.length>o;o++){(0,r[o])()}},size:function(){return t}}}var A="_erd";function D(e){return e[A]}var W={initState:function(e){return e[A]={},D(e)},getState:D,cleanState:function(e){delete e[A]}},H=I.forEach,j=function(e){var t=(e=e||{}).reporter,n=e.batchProcessor,i=e.stateHandler.getState,r=e.idHandler;if(!n)throw Error("Missing required dependency: batchProcessor");if(!t)throw Error("Missing required dependency: reporter.");var o=function(){var e=document.createElement("div");e.style.cssText="position: absolute; width: 1000px; height: 1000px; visibility: hidden; margin: 0; padding: 0;";var t=document.createElement("div");t.style.cssText="position: absolute; width: 500px; height: 500px; overflow: scroll; visibility: none; top: -1500px; left: -1500px; visibility: hidden; margin: 0; padding: 0;",t.appendChild(e),document.body.insertBefore(t,document.body.firstChild);var n=500-t.clientWidth,i=500-t.clientHeight;return document.body.removeChild(t),{width:n,height:i}}(),a="erd_scroll_detection_container";function l(e,n,i){if(e.addEventListener)e.addEventListener(n,i);else{if(!e.attachEvent)return t.error("[scroll] Don't know how to add event listeners.");e.attachEvent("on"+n,i)}}function u(e,n,i){if(e.removeEventListener)e.removeEventListener(n,i);else{if(!e.detachEvent)return t.error("[scroll] Don't know how to remove event listeners.");e.detachEvent("on"+n,i)}}function s(e){return i(e).container.childNodes[0].childNodes[0].childNodes[0]}function c(e){return i(e).container.childNodes[0].childNodes[0].childNodes[1]}return function(e,t){if(!document.getElementById(e)){var n=t+"_animation",i="/* Created by the element-resize-detector library. */\n";i+="."+t+" > div::-webkit-scrollbar { display: none; }\n\n",i+="."+(t+"_animation_active")+" { -webkit-animation-duration: 0.1s; animation-duration: 0.1s; -webkit-animation-name: "+n+"; animation-name: "+n+"; }\n",i+="@-webkit-keyframes "+n+" { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }\n",function(t,n){n=n||function(e){document.head.appendChild(e)};var i=document.createElement("style");i.innerHTML=t,i.id=e,n(i)}(i+="@keyframes "+n+" { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }")}}("erd_scroll_detection_scrollbar_style",a),{makeDetectable:function(e,u,d){function f(){if(e.debug){var n=Array.prototype.slice.call(arguments);if(n.unshift(r.get(u),"Scroll: "),t.log.apply)t.log.apply(null,n);else for(var i=0;n.length>i;i++)t.log(n[i])}}function h(e){var t=i(e).container.childNodes[0],n=window.getComputedStyle(t);return!n.width||-1===n.width.indexOf("px")}function p(){var e=window.getComputedStyle(u),t={};return t.position=e.position,t.width=u.offsetWidth,t.height=u.offsetHeight,t.top=e.top,t.right=e.right,t.bottom=e.bottom,t.left=e.left,t.widthCSS=e.width,t.heightCSS=e.height,t}function v(){if(f("storeStyle invoked."),i(u)){var e=p();i(u).style=e}else f("Aborting because element has been uninstalled")}function y(e,t,n){i(e).lastWidth=t,i(e).lastHeight=n}function m(){return 2*o.width+1}function g(){return 2*o.height+1}function w(e){return e+10+m()}function b(e){return e+10+g()}function x(e,t,n){var i=s(e),r=c(e),o=w(t),a=b(n),l=function(e){return 2*e+m()}(t),u=function(e){return 2*e+g()}(n);i.scrollLeft=o,i.scrollTop=a,r.scrollLeft=l,r.scrollTop=u}function E(){var e=i(u).container;if(!e){(e=document.createElement("div")).className=a,e.style.cssText="visibility: hidden; display: inline; width: 0px; height: 0px; z-index: -1; overflow: hidden; margin: 0; padding: 0;",i(u).container=e,function(e){e.className+=" "+a+"_animation_active"}(e),u.appendChild(e);var t=function(){i(u).onRendered&&i(u).onRendered()};l(e,"animationstart",t),i(u).onAnimationStart=t}return e}function S(){if(f("Injecting elements"),i(u)){!function(){var e=i(u).style;if("static"===e.position){u.style.position="relative";var n=function(e,t,n,i){var r=n[i];"auto"!==r&&"0"!==function(e){return e.replace(/[^-\d\.]/g,"")}(r)&&(e.warn("An element that is positioned static has style."+i+"="+r+" which is ignored due to the static positioning. The element will need to be positioned relative, so the style."+i+" will be set to 0. Element: ",t),t.style[i]=0)};n(t,u,e,"top"),n(t,u,e,"right"),n(t,u,e,"bottom"),n(t,u,e,"left")}}();var e=i(u).container;e||(e=E());var n,r,s,c,d=o.width,h=o.height,p="position: absolute; flex: none; overflow: hidden; z-index: -1; visibility: hidden; "+("left: "+(n=(n=-(1+d))?n+"px":"0")+"; top: "+(r=(r=-(1+h))?r+"px":"0")+"; right: "+(c=(c=-d)?c+"px":"0")+"; bottom: "+(s=(s=-h)?s+"px":"0")+";"),v=document.createElement("div"),y=document.createElement("div"),m=document.createElement("div"),g=document.createElement("div"),w=document.createElement("div"),b=document.createElement("div");v.dir="ltr",v.style.cssText="position: absolute; flex: none; overflow: hidden; z-index: -1; visibility: hidden; width: 100%; height: 100%; left: 0px; top: 0px;",v.className=a,y.className=a,y.style.cssText=p,m.style.cssText="position: absolute; flex: none; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;",g.style.cssText="position: absolute; left: 0; top: 0;",w.style.cssText="position: absolute; flex: none; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;",b.style.cssText="position: absolute; width: 200%; height: 200%;",m.appendChild(g),w.appendChild(b),y.appendChild(m),y.appendChild(w),v.appendChild(y),e.appendChild(v),l(m,"scroll",x),l(w,"scroll",S),i(u).onExpandScroll=x,i(u).onShrinkScroll=S}else f("Aborting because element has been uninstalled");function x(){i(u).onExpand&&i(u).onExpand()}function S(){i(u).onShrink&&i(u).onShrink()}}function C(){function o(e,t,n){var i=function(e){return s(e).childNodes[0]}(e),r=w(t),o=b(n);i.style.width=r+"px",i.style.height=o+"px"}function a(a){var s=u.offsetWidth,c=u.offsetHeight;f("Storing current size",s,c),y(u,s,c),n.add(0,(function(){if(i(u))if(l()){if(e.debug)u.offsetWidth===s&&u.offsetHeight===c||t.warn(r.get(u),"Scroll: Size changed before updating detector elements.");o(u,s,c)}else f("Aborting because element container has not been initialized");else f("Aborting because element has been uninstalled")})),n.add(1,(function(){i(u)?l()?x(u,s,c):f("Aborting because element container has not been initialized"):f("Aborting because element has been uninstalled")})),a&&n.add(2,(function(){i(u)?l()?a():f("Aborting because element container has not been initialized"):f("Aborting because element has been uninstalled")}))}function l(){return!!i(u).container}function d(){f("notifyListenersIfNeeded invoked");var e=i(u);return void 0===i(u).lastNotifiedWidth&&e.lastWidth===e.startSize.width&&e.lastHeight===e.startSize.height?f("Not notifying: Size is the same as the start size, and there has been no notification yet."):e.lastWidth===e.lastNotifiedWidth&&e.lastHeight===e.lastNotifiedHeight?f("Not notifying: Size already notified"):(f("Current size not notified, notifying..."),e.lastNotifiedWidth=e.lastWidth,e.lastNotifiedHeight=e.lastHeight,void H(i(u).listeners,(function(e){e(u)})))}function p(){if(f("Scroll detected."),h(u))f("Scroll event fired while unrendered. Ignoring...");else{var e=u.offsetWidth,t=u.offsetHeight;e!==i(u).lastWidth||t!==i(u).lastHeight?(f("Element size changed."),a(d)):f("Element size has not changed ("+e+"x"+t+").")}}if(f("registerListenersAndPositionElements invoked."),i(u)){i(u).onRendered=function(){if(f("startanimation triggered."),h(u))f("Ignoring since element is still unrendered...");else{f("Element rendered.");var e=s(u),t=c(u);0!==e.scrollLeft&&0!==e.scrollTop&&0!==t.scrollLeft&&0!==t.scrollTop||(f("Scrollbars out of sync. Updating detector elements..."),a(d))}},i(u).onExpand=p,i(u).onShrink=p;var v=i(u).style;o(u,v.width,v.height)}else f("Aborting because element has been uninstalled")}function z(){if(f("finalizeDomMutation invoked."),i(u)){var e=i(u).style;y(u,e.width,e.height),x(u,e.width,e.height)}else f("Aborting because element has been uninstalled")}function M(){d(u)}function T(){var e;f("Installing..."),i(u).listeners=[],e=p(),i(u).startSize={width:e.width,height:e.height},f("Element start size",i(u).startSize),n.add(0,v),n.add(1,S),n.add(2,C),n.add(3,z),n.add(4,M)}d||(d=u,u=e,e=null),e=e||{},f("Making detectable..."),!function(e){return!function(e){return e===e.ownerDocument.body||e.ownerDocument.body.contains(e)}(e)||null===window.getComputedStyle(e)}(u)?T():(f("Element is detached"),E(),f("Waiting until element is attached..."),i(u).onRendered=function(){f("Element is now attached"),T()})},addListener:function(e,t){if(!i(e).listeners.push)throw Error("Cannot add listener to an element that is not detectable.");i(e).listeners.push(t)},uninstall:function(e){var t=i(e);t&&(t.onExpandScroll&&u(s(e),"scroll",t.onExpandScroll),t.onShrinkScroll&&u(c(e),"scroll",t.onShrinkScroll),t.onAnimationStart&&u(t.container,"animationstart",t.onAnimationStart),t.container&&e.removeChild(t.container))}}},N=I.forEach;function V(e){return Array.isArray(e)||void 0!==e.length}function B(e){if(Array.isArray(e))return e;var t=[];return N(e,(function(e){t.push(e)})),t}function q(e){return e&&1===e.nodeType}function _(e,t,n){var i=e[t];return null==i&&void 0!==n?n:i}var X=null;"undefined"!=typeof window&&(X=function(e){var t,n;if((e=e||{}).idHandler)t={get:function(t){return e.idHandler.get(t,!0)},set:e.idHandler.set};else{var i=function(e){var t=e.idGenerator,n=e.stateHandler.getState;return{get:function(e){var t=n(e);return t&&void 0!==t.id?t.id:null},set:function(e){var i=n(e);if(!i)throw Error("setId required the element to have a resize detection state.");var r=t.generate();return i.id=r,r}}}({idGenerator:(n=1,{generate:function(){return n++}}),stateHandler:W});t=i}var r=e.reporter;r||(r=function(e){function t(){}var n={log:t,warn:t,error:t};if(!e&&window.console){var i=function(e,t){e[t]=function(){var e=console[t];if(e.apply)e.apply(console,arguments);else for(var n=0;arguments.length>n;n++)e(arguments[n])}};i(n,"log"),i(n,"warn"),i(n,"error")}return n}(!1===r));var o=_(e,"batchProcessor",R({reporter:r})),a={};a.callOnAdd=!!_(e,"callOnAdd",!0),a.debug=!!_(e,"debug",!1);var l,u=function(e){var t={};function n(n){var i=e.get(n);return void 0===i?[]:t[i]||[]}return{get:n,add:function(n,i){var r=e.get(n);t[r]||(t[r]=[]),t[r].push(i)},removeListener:function(e,t){for(var i=n(e),r=0,o=i.length;o>r;++r)if(i[r]===t){i.splice(r,1);break}},removeAllListeners:function(e){var t=n(e);t&&(t.length=0)}}}(t),s=function(e){var t=e.stateHandler.getState;return{isDetectable:function(e){var n=t(e);return n&&!!n.isDetectable},markAsDetectable:function(e){t(e).isDetectable=!0},isBusy:function(e){return!!t(e).busy},markBusy:function(e,n){t(e).busy=!!n}}}({stateHandler:W}),c=_(e,"strategy","object"),d={reporter:r,batchProcessor:o,stateHandler:W,idHandler:t};if("scroll"===c&&(k.isLegacyOpera()?(r.warn("Scroll strategy is not supported on legacy Opera. Changing to object strategy."),c="object"):k.isIE(9)&&(r.warn("Scroll strategy is not supported on IE9. Changing to object strategy."),c="object")),"scroll"===c)l=j(d);else{if("object"!==c)throw Error("Invalid strategy name: "+c);l=function(e){var t=(e=e||{}).reporter,n=e.batchProcessor,i=e.stateHandler.getState;if(!t)throw Error("Missing required dependency: reporter.");function r(e){return i(e).object}return{makeDetectable:function(e,r,o){o||(o=r,r=e,e=null),e=e||{},k.isIE(8)?o(r):function(e,r){var o="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;",a=!1,l=window.getComputedStyle(e),u=e.offsetWidth,s=e.offsetHeight;function c(){function n(){if("static"===l.position){e.style.position="relative";var n=function(e,t,n,i){var r=n[i];"auto"!==r&&"0"!==function(e){return e.replace(/[^-\d\.]/g,"")}(r)&&(e.warn("An element that is positioned static has style."+i+"="+r+" which is ignored due to the static positioning. The element will need to be positioned relative, so the style."+i+" will be set to 0. Element: ",t),t.style[i]=0)};n(t,e,l,"top"),n(t,e,l,"right"),n(t,e,l,"bottom"),n(t,e,l,"left")}}""!==l.position&&(n(),a=!0);var u=document.createElement("object");u.style.cssText=o,u.tabIndex=-1,u.type="text/html",u.setAttribute("aria-hidden","true"),u.onload=function(){a||n(),function e(t,n){t.contentDocument?n(t.contentDocument):setTimeout((function(){e(t,n)}),100)}(this,(function(t){r(e)}))},k.isIE()||(u.data="about:blank"),e.appendChild(u),i(e).object=u,k.isIE()&&(u.data="about:blank")}i(e).startSize={width:u,height:s},n?n.add(c):c()}(r,o)},addListener:function(e,t){if(!r(e))throw Error("Element is not detectable by this strategy.");function n(){t(e)}k.isIE(8)?(i(e).object={proxy:n},e.attachEvent("onresize",n)):r(e).contentDocument.defaultView.addEventListener("resize",n)},uninstall:function(e){k.isIE(8)?e.detachEvent("onresize",i(e).object.proxy):e.removeChild(r(e)),delete i(e).object}}}(d)}var f={};return{listenTo:function(e,n,i){function o(e){var t=u.get(e);N(t,(function(t){t(e)}))}function c(e,t,n){u.add(t,n),e&&n(t)}if(i||(i=n,n=e,e={}),!n)throw Error("At least one element required.");if(!i)throw Error("Listener required.");if(q(n))n=[n];else{if(!V(n))return r.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");n=B(n)}var d=0,h=_(e,"callOnAdd",a.callOnAdd),p=_(e,"onReady",(function(){})),v=_(e,"debug",a.debug);N(n,(function(e){W.getState(e)||(W.initState(e),t.set(e));var a=t.get(e);if(v&&r.log("Attaching listener to element",a,e),!s.isDetectable(e))return v&&r.log(a,"Not detectable."),s.isBusy(e)?(v&&r.log(a,"System busy making it detectable"),c(h,e,i),f[a]=f[a]||[],void f[a].push((function(){++d===n.length&&p()}))):(v&&r.log(a,"Making detectable..."),s.markBusy(e,!0),l.makeDetectable({debug:v},e,(function(e){if(v&&r.log(a,"onElementDetectable"),W.getState(e)){s.markAsDetectable(e),s.markBusy(e,!1),l.addListener(e,o),c(h,e,i);var t=W.getState(e);if(t&&t.startSize)t.startSize.width===e.offsetWidth&&t.startSize.height===e.offsetHeight||o(e);f[a]&&N(f[a],(function(e){e()}))}else v&&r.log(a,"Element uninstalled before being detectable.");delete f[a],++d===n.length&&p()})));v&&r.log(a,"Already detecable, adding listener."),c(h,e,i),d++})),d===n.length&&p()},removeListener:u.removeListener,removeAllListeners:u.removeAllListeners,uninstall:function(e){if(!e)return r.error("At least one element is required.");if(q(e))e=[e];else{if(!V(e))return r.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");e=B(e)}N(e,(function(e){u.removeAllListeners(e),l.uninstall(e),W.cleanState(e)}))}}}({strategy:"scroll"}));var Y=X,F=r({},T.defaultProps);function G(e){var i=e.width,r=e.height,o=e.children,a=t.useRef(null);return g((function(){if(("number"!=typeof i||"number"!=typeof r)&&Y){var e=a.current.getResizeNode();return Y.listenTo(e,(function(){return a.current.calculateSize()})),function(){return Y.uninstall(e)}}}),[i,r]),n.createElement(T,e,(function(e,t){return a.current=t,"function"==typeof o?o(e,t):o}))}G.defaultProps=F,G.PadContent=!0;var U=function(){},J=function(){};if("undefined"!=typeof window){U=window.requestAnimationFrame,J=window.cancelAnimationFrame;for(var K=["ms","moz","webkit","o"],Q=0,Z=0;4>Z&&!U;++Z)U=window[K[Z]+"RequestAnimationFrame"],J=window[K[Z]+"CancelAnimationFrame"]||window[K[Z]+"CancelRequestAnimationFrame"];U||(U=function(e){var t=(new Date).getTime(),n=Math.max(0,16-(t-Q)),i=window.setTimeout((function(){e(t+n)}),n);return Q=t+n,i},J=function(e){clearTimeout(e)})}var $=r({width:0,height:0,pagingEnabled:!1,directionalLockEnabled:!1,alwaysBounceX:!0,alwaysBounceY:!0,scrollTo:null,scrollToRect:null,onScroll:function(){},onDragStart:function(){},onDragEnd:function(){},onDecelerationStart:function(){},onDecelerationEnd:function(){},onContentResize:function(){}},S.defaultProps);function ee(e){var o=e.width,a=e.height,l=e.pagingEnabled,u=e.directionalLockEnabled,s=e.alwaysBounceX,c=e.alwaysBounceY,d=e.scrollTo,f=e.scrollToRect,h=e.onScroll,p=e.onDragStart,m=e.onDragEnd,x=e.onDecelerationStart,E=e.onDecelerationEnd,z=e.onContentResize,M=e.children,T=i(e,["width","height","pagingEnabled","directionalLockEnabled","alwaysBounceX","alwaysBounceY","scrollTo","scrollToRect","onScroll","onDragStart","onDragEnd","onDecelerationStart","onDecelerationEnd","onContentResize","children"]),O=T.enabled,I=T.shouldStart,k=t.useReducer(y,v),L=k[0],R=k[1],P=w(L),A=L.size,D=L.contentSize,W=L.contentOffset,H=L.contentVelocity,j=L.drag,N=L.deceleration,V=P.current,B=t.useCallback((function(e){R({type:"setContentSize",value:e})}),[]),q=t.useCallback((function(e){return!(u&&!function(e,t,n){var i=Math.abs(e.x)>Math.abs(e.y)?"width":"height";return n[i]>t[i]}(e.velocity,A,D))&&I(e)}),[I,u,A,D]);g((function(){V.pannable.translation!==L.pannable.translation&&(L.pannable.translation?R(V.pannable.translation?{type:"dragMove"}:{type:"dragStart"}):V.pannable.translation&&R(O?{type:"dragEnd"}:{type:"dragCancel"}));var e={size:A,contentSize:D,contentOffset:W,contentVelocity:H,dragging:!!j,decelerating:!!N};V.contentSize!==D&&z(D),V.contentOffset!==W&&h(e),V.drag!==j&&(V.drag?j||m(e):p(e)),V.deceleration!==N&&(V.deceleration?N||E(e):x(e))})),g((function(){if(L.deceleration){var e=U((function(){R({type:"decelerate",now:(new Date).getTime()})}));return function(){J(e)}}}),[L]),t.useMemo((function(){R({type:"setSize",value:{width:o,height:a}})}),[o,a]),t.useMemo((function(){R({type:"setOptions",value:[l,u,s,c]})}),[l,u,s,c]),t.useMemo((function(){d&&R(r({type:"scrollTo"},d))}),[d]),t.useMemo((function(){f&&R(r({type:"scrollToRect"},f))}),[f]),T.shouldStart=q;var _={overflow:"hidden",position:"relative",width:A.width,height:A.height};return T.style&&Object.assign(_,T.style),T.style=_,n.createElement(C.Provider,{value:{visibleRect:{x:-W.x,y:-W.y,width:A.width,height:A.height},resizeContent:B}},n.createElement(S,T,(function(e){L.pannable!==e&&R({type:"setPannable",value:e});var i=b.create({position:"relative",width:D.width,height:D.height,transformTranslate:[W.x,W.y],willChange:"transform"}),r="function"==typeof M?M(L):M;return t.isValidElement(r)&&r.type.PadContent?(r.props.style&&Object.assign(i,r.props.style),r=t.cloneElement(r,{style:i,ref:r.ref})):r=n.createElement(G,{style:i},r),r})))}function te(e,t,n){if(!t)return t;if(n){var i,o="y"===n?["y","height"]:["x","width"],a=o[0],l=o[1];return(i={})[a]=t[a]-e[a],i[l]=t[l],i}return r({},te(e,t,"x"),{},te(e,t,"y"))}function ne(e,t,n){if(!t)return!0;if(n){var i="y"===n?["y","height"]:["x","width"],r=i[0],o=i[1];return e[r]+e[o]>=t[r]-.25*t[o]&&t[r]+1.25*t[o]>=e[r]}return ne(e,t,"x")&&ne(e,t,"y")}function ie(){}ee.defaultProps=$;function re(e){var o=e.width,a=e.height,l=e.direction,u=e.rowSpacing,s=e.columnSpacing,c=e.itemCount,d=e.itemWidth,f=e.itemHeight,h=e.renderItem,p=e.children,v=i(e,["width","height","direction","rowSpacing","columnSpacing","itemCount","itemWidth","itemHeight","renderItem","children"]),y=t.useMemo((function(){return function(e){var t,n,i=e.itemCount,r={width:e.itemWidth,height:e.itemHeight},o={row:e.rowSpacing,column:e.columnSpacing},a="x"===e.direction?["y","x","height","width","column","row"]:["x","y","width","height","row","column"],l=a[0],u=a[1],s=a[2],c=a[3],d=a[4],f=a[5],h={width:e.width,height:e.height}[s],p=0,v=0,y=0,m=[];"number"!=typeof h?(y=i,0===r[s]?h=0:(h=i*r[s],i>1&&(h+=(i-1)*o[f]))):0===r[s]?y=i:(y=1,h>r[s]&&(y+=Math.floor((h-r[s])/(r[s]+o[f]))));y>0&&(v=Math.ceil(i/y));for(var g=0;v>g;g++){g>0&&(p+=o[d]);for(var w=0;y>w;w++){var b,x,E=w+g*y,S=0;if(y>1&&(S+=Math.round(w*((h-r[s])/(y-1)))),E>=i)break;m.push(((x={rect:(b={},b[l]=S,b[u]=p,b[s]=r[s],b[c]=r[c],b)})[d+"Index"]=g,x[f+"Index"]=w,x.itemIndex=E,x))}p+=r[c]}return{size:(t={},t[s]=h,t[c]=p,t),count:(n={},n[d]=v,n[f]=y,n),layoutList:m}}({direction:l,width:o,height:a,rowSpacing:u,columnSpacing:s,itemCount:c,itemWidth:d,itemHeight:f})}),[l,o,a,u,s,c,d,f]),m=w(y),b=t.useContext(C),x=y.size,E=y.layoutList,S=m.current,z=t.useCallback((function(){}),[]);g((function(){b.resizeContent(x)}),[]),g((function(){M(S.size,x)||b.resizeContent(x)}));var T={position:"relative"};x&&(T.width=x.width,T.height=x.height),v.style&&Object.assign(T,v.style),v.style=T;var O=E.map((function(e){return function(e){var i=e.rect,o=e.itemIndex,a=e.visibleRect,l=e.needsRender,u=e.Item,s=!1,c=h(e),d=o+"",f={position:"absolute",left:i.x,top:i.y,width:i.width,height:i.height};return t.isValidElement(c)&&c.type===u&&(void 0!==c.props.forceRender&&(s=c.props.forceRender),c.key&&(d=c.key),c=c.props.children),l||s?(t.isValidElement(c)?(c.props.style&&Object.assign(f,c.props.style),c=t.cloneElement(c,{style:f,ref:c.ref})):c=n.createElement("div",{style:f},c),n.createElement(C.Provider,{key:d,value:r({},b,{visibleRect:a,resizeContent:z})},c)):null}(r({},e,{visibleRect:te(e.rect,b.visibleRect),needsRender:ne(e.rect,b.visibleRect),Item:ie}))}));return"function"==typeof p&&p(y),n.createElement("div",v,O)}function oe(){}re.defaultProps={width:null,height:null,direction:"y",rowSpacing:0,columnSpacing:0,itemCount:0,itemWidth:0,itemHeight:0,renderItem:function(){return null}},re.PadContent=!0;function ae(e){var o=e.width,a=e.height,l=e.direction,u=e.spacing,s=e.itemCount,c=e.estimatedItemWidth,d=e.estimatedItemHeight,f=e.renderItem,h=e.children,p=i(e,["width","height","direction","spacing","itemCount","estimatedItemWidth","estimatedItemHeight","renderItem","children"]),v=t.useState([]),y=v[0],m=v[1],b=t.useState({}),x=b[0],E=b[1],S=t.useMemo((function(){return function(e,t,n){var i,r=e.spacing,o=e.itemCount,a={width:e.width,height:e.height},l={width:e.estimatedItemWidth,height:e.estimatedItemHeight},u="x"===e.direction?["y","x","height","width"]:["x","y","width","height"],s=u[0],c=u[1],d=u[2],f=u[3],h=0,p=0,v=[],y={};"number"==typeof a[d]&&(y[d]=a[d]);for(var m=0;o>m;m++){var g,w,b=n[t[m]]||((g={})[d]=void 0===y[d]?l[d]:y[d],g[f]=l[f],g);v.push({rect:(w={},w[s]=0,w[c]=p,w[d]=b[d],w[f]=b[f],w),itemIndex:m}),b[f]>0&&(p+=b[f],o-1>m&&(p+=r)),b[d]>h&&(h=b[d])}return{size:(i={},i[d]=h,i[f]=p,i),fixed:y,layoutList:v}}({width:o,height:a,direction:l,spacing:u,itemCount:s,estimatedItemWidth:c,estimatedItemHeight:d},y,x)}),[o,a,l,u,s,c,d,y,x]),z=w(S),O=t.useContext(C),I=S.size,k=S.fixed,L=S.layoutList,R=z.current,P=[],A=t.useCallback((function(e){return function(t){E((function(n){var i;return M(n[e],t)?n:r({},n,((i={})[e]=t,i))}))}}),[]);g((function(){O.resizeContent(I)}),[]),g((function(){M(R.size,I)||O.resizeContent(I)}));var D={position:"relative"};I&&(D.width=I.width,D.height=I.height),p.style&&Object.assign(D,p.style),p.style=D;var W=L.map((function(e){return function(e){var i,o=e.rect,a=e.itemIndex,l=e.visibleRect,u=e.needsRender,s=e.Item,c=!1,d=f(e),h=a+"",p={position:"absolute",left:o.x,top:o.y,width:o.width,height:o.height};t.isValidElement(d)&&d.type===s&&(void 0!==d.props.forceRender&&(c=d.props.forceRender),d.key&&(h=d.key),void 0!==d.props.hash&&(i=d.props.hash),d=d.props.children),void 0===i&&(i=h);var v=x[i],y=!u&&!c;if(v||-1===P.indexOf(i)||(y=!0),P[a]=i,y)return null;var m={};return v?(m.width=v.width,m.height=v.height):("number"==typeof k.width&&(m.width=k.width),"number"==typeof k.height&&(m.height=k.height)),t.isValidElement(d)&&d.type.PadContent?(d.props.style&&Object.assign(p,d.props.style),"number"==typeof d.props.width&&(m.width=d.props.width),"number"==typeof d.props.height&&(m.height=d.props.height),d=t.cloneElement(d,r({},m,{style:p,ref:d.ref}))):d=n.createElement(T,r({style:p},m),d),n.createElement(C.Provider,{key:h,value:r({},O,{visibleRect:l,resizeContent:A(i)})},d)}(r({},e,{visibleRect:te(e.rect,O.visibleRect),needsRender:ne(e.rect,O.visibleRect),Item:oe}))}));return y.join()!==P.join()&&m(P),"function"==typeof h&&h(S),n.createElement("div",p,W)}ae.defaultProps={width:null,height:null,direction:"y",spacing:0,itemCount:0,estimatedItemWidth:0,estimatedItemHeight:0,renderItem:function(){return null}},ae.PadContext=!0;function le(e){var o=e.width,a=e.height,l=e.onResize,u=e.children,s=i(e,["width","height","onResize","children"]),c=t.useState(null),d=c[0],f=c[1],h=w(d),p=t.useRef(null),v=h.current,y=t.useCallback((function(){var e=z(p.current);f(e)}),[]);g((function(){M(v,d)||d&&l(d),d||y()})),g((function(){if(("number"!=typeof o||"number"!=typeof a)&&Y){var e=p.current;return Y.listenTo(e,(function(){return y()})),function(){return Y.uninstall(e)}}}),[o,a]),t.useMemo((function(){var e=null;"number"==typeof o&&"number"==typeof a&&(e={width:o,height:a}),f(e)}),[o,a]),s.style=r({width:ue(o),height:ue(a)},s.style);var m=null;return d&&(m="function"==typeof u?u(d):u),n.createElement("div",r({},s,{ref:p}),m)}function ue(e){return null==e||""===e?"100%":e}le.defaultProps={width:null,height:null,onResize:function(){}};var se={mouseEntered:!1,loopCount:1,loopOffset:0,loopWidth:0,scrollTo:null,options:["x",!0],pad:v};function ce(e,t){switch(t.type){case"setMouseEntered":return function(e,t){return r({},e,{mouseEntered:t.value})}(e,t);case"setPad":return function(e,t){var n=r({},e,{pad:t.value});return n=de(n=function(e,t){var n,i=e.loopCount,o=e.loopOffset,a=e.options,l=a[0],u=e.pad,s=u.contentOffset,c=u.size,d=u.contentSize;if(a[1]){var f=function(e,t,n,i,r){var o;if(1===i)return[e,0];var a="y"===r?["height","y","x"]:["width","x","y"],l=a[0],u=a[1],s=a[2],c=n[l],d=t[l],f=c/i,h=.5*(c-f-d),p=0,v=d-c,y=e[u],m=0;if(p-=h,y>=(v+=h)&&p>=y)return[e,0];v>y?m=Math.floor((p-y)/f):y>p&&(m=-Math.floor((y-v)/f));return[(o={},o[u]=y+=f*m,o[s]=e[s],o),m]}(s,c,d,i,l),h=f[0],p=f[1];s!==h&&((n=n||r({},e)).loopOffset=o+p,n.scrollTo={offset:h,animated:!1})}return n||e}(n))}(e,t);case"setOptions":return function(e,t){var n=r({},e,{options:t.value});return n=de(n)}(e,t);case"setScrollTo":return function(e,t){return r({},e,{scrollTo:t.value})}(e,t);case"playNext":return function(e,t){var n=e.pad,i=function(e,t,n,i,r){var o,a="y"===r?["height","y","x"]:["width","x","y"],l=a[0],u=a[1],s=a[2],c=t[l],d=Math.min(c-n[l],0),f=e[u];i&&c>0&&(d=c*Math.ceil(d/c));f=f>d?Math.max(d,f-c):0;return(o={})[u]=f,o[s]=e[s],o}(n.contentOffset,n.size,n.contentSize,n.pagingEnabled,e.options[0]);return r({},e,{scrollTo:{offset:i,animated:!0}})}(e);default:return e}}function de(e,t){var n=e.options,i=e.pad;return r({},e,{},function(e,t,n,i,r){var o="y"===r?"height":"width",a=e[o],l=t[o],u=l/n;if(!i||0===l||0===a)return{loopCount:1,loopOffset:0,loopWidth:u};return{loopCount:2+Math.floor(a/u),loopWidth:u}}(i.size,i.contentSize,e.loopCount,n[1],n[0]))}var fe=r({direction:"x",loop:!0,autoplayEnabled:!0,autoplayInterval:5e3},ee.defaultProps,{pagingEnabled:!0,directionalLockEnabled:!0});function he(e){var r=e.direction,o=e.loop,a=e.autoplayEnabled,l=e.autoplayInterval,u=e.children,s=i(e,["direction","loop","autoplayEnabled","autoplayInterval","children"]),c=s.scrollTo,d=s.onMouseEnter,f=s.onMouseLeave,h=t.useReducer(ce,se),p=h[0],v=h[1],y=p.mouseEntered,m=p.loopCount,g=p.loopOffset,w=p.scrollTo,b=p.pad,x=b.drag,E=b.deceleration,S=t.useCallback((function(e){v({type:"setMouseEntered",value:!0}),d&&d(e)}),[d]),C=t.useCallback((function(e){v({type:"setMouseEntered",value:!1}),f&&f(e)}),[f]);return t.useEffect((function(){if(a&&!y&&!x&&!E){var e=setTimeout((function(){v({type:"playNext"})}),l);return function(){clearTimeout(e)}}}),[a,l,y,x,E]),t.useMemo((function(){v({type:"setOptions",value:[r,o]})}),[o,r]),t.useMemo((function(){c&&v({type:"setScrollTo",value:c})}),[c]),"x"===r?s.alwaysBounceY=!1:s.alwaysBounceX=!1,a&&(s.onMouseEnter=S,s.onMouseLeave=C),s.scrollTo=w,n.createElement(ee,s,(function(e){p.pad!==e&&v({type:"setPad",value:e});var t="function"==typeof u?u(p):u;return n.createElement(ae,{direction:r,itemCount:m,renderItem:function(e){return n.createElement(e.Item,{key:e.itemIndex+g,hash:"loop"},t)}})}))}var pe={activeIndex:0,itemCount:0,scrollTo:null,player:se};function ve(e,t){switch(t.type){case"setPlayer":return function(e,t){var n=t.value,i=n.options[0],o=n.pad,a=o.contentOffset,l=o.size,u=o.contentSize,s=function(e,t,n){var i=e["y"===n?"height":"width"],r=0;i>0&&(r=Math.ceil(t/i));return r}(l,n.loopWidth,i),c=0;if(s>0){var d=function(e,t,n,i){var r="y"===i?["height","y"]:["width","x"],o=r[0],a=r[1],l=t[o],u=0;if(l>0){u=Math.round(-Math.max(Math.min(l-n[o],0),Math.min(e[a],0))/l)}return u}(a,l,u,i);c=d%s}return r({},e,{player:n,itemCount:s,activeIndex:c})}(e,t);case"setScrollTo":return function(e,t){return r({},e,{scrollTo:t.value})}(e,t);case"slideTo":return function(e,t){var n=e.activeIndex,i=e.itemCount,o=e.player.options[0],a=e.player.pad,l=a.contentOffset,u=a.size,s=t.animated,c=t.index;if(0===i)return e;"function"==typeof c&&(c=c({activeIndex:n,itemCount:i}));if(c===n)return e;var d=function(e,t,n,i){var r,o="y"===i?["height","y","x"]:["width","x","y"],a=o[1],l=o[2];return(r={})[a]=t[a]-e*n[o[0]],r[l]=t[l],r}(c-n,l,u,o);return r({},e,{scrollTo:{offset:d,animated:s}})}(e,t);default:return e}}var ye=r({itemCount:0,renderItem:function(){return null},onSlideChange:function(){},slideTo:null},he.defaultProps=fe);function me(e){var o=e.itemCount,a=e.renderItem,l=e.onSlideChange,u=e.slideTo,s=e.children,c=i(e,["itemCount","renderItem","onSlideChange","slideTo","children"]),d=c.width,f=c.height,h=c.direction,p=c.scrollTo,v=t.useReducer(ve,pe),y=v[0],m=v[1],b=w(y),x=y.activeIndex,E=y.itemCount,S=y.scrollTo,C=b.current;g((function(){C.activeIndex!==x&&l({activeIndex:x,itemCount:E})})),t.useMemo((function(){p&&m({type:"setScrollTo",value:p})}),[p]),t.useMemo((function(){u&&m(r({type:"slideTo"},u))}),[u]);var z={width:d,height:f,itemWidth:d,itemHeight:f,direction:h,itemCount:o,renderItem:a};c.scrollTo=S;var M="function"==typeof s?s({activeIndex:x,itemCount:E}):s;return n.createElement(t.Fragment,null,n.createElement(he,c,(function(e){return y.player!==e&&m({type:"setPlayer",value:e}),n.createElement(re,z)})),M)}me.defaultProps=ye,e.AutoResizing=le,e.Carousel=me,e.GeneralContent=G,e.GridContent=re,e.ItemContent=T,e.ListContent=ae,e.Pad=ee,e.Pannable=S,e.Player=he,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).ReactPannable={},e.React)}(this,(function(e,t){"use strict";var n="default"in t?t.default:t;function i(e,t){if(null==e)return{};var n,i,r={},o=Object.keys(e);for(i=0;o.length>i;i++)0>t.indexOf(n=o[i])&&(r[n]=e[n]);return r}function r(){return(r=Object.assign||function(e){for(var t=1;arguments.length>t;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(this,arguments)}var o=0,a={target:null,startPoint:null,movePoint:null,moveTime:null,translation:null,velocity:null,interval:null};function l(e,t){switch(t.type){case"disable":case"end":return function(e,t){return e.target?a:e}(e);case"track":return function(e,t){return{target:t.target,startPoint:t.point,movePoint:t.point,moveTime:t.now,translation:null,velocity:null,interval:null}}(0,t);case"move":return function(e,t){var n=e.target,i=e.startPoint,r=e.movePoint,l=e.moveTime,c=e.translation,u=t.point,s=t.now,d=t.shouldStart;if(!n)return e;var f=s-l,h={x:u.x-i.x,y:u.y-i.y},p={x:(u.x-r.x)/f,y:(u.y-r.y)/f};if(c)return{target:n,startPoint:i,movePoint:u,moveTime:s,translation:h,velocity:p,interval:f};if(o>=Math.sqrt(Math.pow(h.x,2)+Math.pow(h.y,2)))return{target:n,startPoint:i,movePoint:u,moveTime:s,translation:null,velocity:null,interval:null};if(!d({target:n,translation:h,velocity:p,interval:f}))return a;return{target:n,startPoint:u,movePoint:u,moveTime:s,translation:{x:0,y:0},velocity:p,interval:f}}(e,t);default:return e}}var c="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement?t.useLayoutEffect:t.useEffect;function u(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e})),n}var s={create:function(e){var t=e.transformTranslate,n=e.userSelect,r=i(e,["transformTranslate","userSelect"]);return t&&function(e,t){t.transform="translate3d("+e[0]+"px, "+e[1]+"px, 0)",t.WebkitTransform="translate3d("+e[0]+"px, "+e[1]+"px, 0)",t.msTransform="translate("+e[0]+"px, "+e[1]+"px)"}(t,r),n&&function(e,t){t.userSelect=e,t.WebkitUserSelect=e,t.msUserSelect=e}(n,r),r}},d=function(){},f=function(){};void 0!==typeof window&&(d=window.addEventListener,f=window.removeEventListener);function h(e){var o=e.enabled,h=e.shouldStart,p=e.onStart,v=e.onMove,m=e.onEnd,y=e.onCancel,g=e.children,w=i(e,["enabled","shouldStart","onStart","onMove","onEnd","onCancel","children"]),b=t.useReducer(l,a),x=b[0],E=b[1],S=u(x),C=t.useRef(null),I=t.useRef({touchSupported:!1});I.current.state=x,I.current.shouldStart=h;var T=x.target,z=x.translation,M={target:T,translation:z,velocity:x.velocity,interval:x.interval},O=S.current;c((function(){function e(e,t){E({type:"track",target:e,point:t,now:(new Date).getTime()})}function t(t){if(I.current.touchSupported=!0,t.touches&&1===t.touches.length){var n=t.touches[0];e(n.target,{x:n.pageX,y:n.pageY})}}function n(e){I.current.state.translation&&e.preventDefault()}function i(t){I.current.touchSupported||e(t.target,{x:t.pageX,y:t.pageY})}if(o){var r=C.current;if(!r.addEventListener)return;return r.addEventListener("touchstart",t,!1),r.addEventListener("touchmove",n,!1),r.addEventListener("mousedown",i,!1),function(){r.removeEventListener("touchstart",t,!1),r.removeEventListener("touchmove",n,!1),r.removeEventListener("mousedown",i,!1)}}}),[o]),c((function(){function e(e){E({type:"move",point:e,now:(new Date).getTime(),shouldStart:I.current.shouldStart})}function t(){E({type:"end"})}function n(t){var n=t.touches[0];I.current.state.translation&&t.preventDefault(),e({x:n.pageX,y:n.pageY})}function i(e){I.current.state.translation&&e.preventDefault(),t()}function r(t){t.preventDefault(),e({x:t.pageX,y:t.pageY})}function o(e){e.preventDefault(),t()}if(T)return I.current.touchSupported?(T.addEventListener("touchmove",n,!1),T.addEventListener("touchend",i,!1),T.addEventListener("touchcancel",i,!1),function(){T.removeEventListener("touchmove",n,!1),T.removeEventListener("touchend",i,!1),T.removeEventListener("touchcancel",i,!1)}):(d("mousemove",r,!1),d("mouseup",o,!1),function(){f("mousemove",r,!1),f("mouseup",o,!1)})}),[T]),c((function(){O.translation!==z&&(z?O.translation?v(M):p(M):O.translation&&(o?m(M):y(M)))})),t.useMemo((function(){o||E({type:"disable"})}),[o]);var R={};z&&Object.assign(R,s.create({touchAction:"none",pointerEvents:"none",userSelect:"none"})),w.style&&Object.assign(R,w.style),w.style=R;var L="function"==typeof g?g(x):g;return n.createElement("div",r({},w,{ref:C}),L)}h.defaultProps={enabled:!0,shouldStart:function(){return!0},onStart:function(){},onMove:function(){},onEnd:function(){},onCancel:function(){}};var p=n.createContext({visibleRect:null,resizeContent:function(){}});function v(e){var t=0,n=0;if("undefined"!=typeof window&&(t=e.offsetWidth,n=e.offsetHeight,window.getComputedStyle)){var i=window.getComputedStyle(e)||{};i.paddingLeft&&(t-=parseInt(i.paddingLeft,10)),i.paddingRight&&(t-=parseInt(i.paddingRight,10)),i.borderLeftWidth&&(t-=parseInt(i.borderLeftWidth,10)),i.borderRightWidth&&(t-=parseInt(i.borderRightWidth,10)),i.paddingTop&&(n-=parseInt(i.paddingTop,10)),i.paddingBottom&&(n-=parseInt(i.paddingBottom,10)),i.borderTopWidth&&(n-=parseInt(i.borderTopWidth,10)),i.borderBottomWidth&&(n-=parseInt(i.borderBottomWidth,10))}return{width:t,height:n}}function m(e,t){return e===t||!(!e||!t)&&(e.width===t.width&&e.height===t.height)}function y(e){var o=e.width,a=e.height,l=e.children,s=i(e,["width","height","children"]),d=t.useState(null),f=d[0],h=d[1],y=u(f),g=t.useContext(p),w=t.useRef(null),b=y.current,x=t.useCallback((function(){}),[]),E=t.useCallback((function(){return w.current}),[]),S=t.useCallback((function(){var e=v(w.current);h(e)}),[]);c((function(){m(b,f)||f&&g.resizeContent(f),f||S()})),t.useMemo((function(){var e=null;"number"==typeof o&&"number"==typeof a&&(e={width:o,height:a}),h(e)}),[o,a]);var C={position:"relative"},I={position:"absolute"};"number"==typeof o&&(I.width=o),"number"==typeof a&&(I.height=a),f&&(C.width=f.width,C.height=f.height),s.style&&Object.assign(C,s.style),s.style=C;var T="function"==typeof l?l(f,{getResizeNode:E,calculateSize:S}):l;return n.createElement(p.Provider,{value:r({},g,{resizeContent:x})},n.createElement("div",s,n.createElement("div",{ref:w,style:I},T)))}function g(e,t){return e(t={exports:{}},t.exports),t.exports}y.defaultProps={width:null,height:null},y.PadContent=!0;var w=g((function(e){(e.exports={}).forEach=function(e,t){for(var n=0;e.length>n;n++){var i=t(e[n]);if(i)return i}}})),b=g((function(e){var t=e.exports={};t.isIE=function(e){return(-1!==(t=navigator.userAgent.toLowerCase()).indexOf("msie")||-1!==t.indexOf("trident")||-1!==t.indexOf(" edge/"))&&(!e||e===function(){var e=3,t=document.createElement("div"),n=t.getElementsByTagName("i");do{t.innerHTML="\x3c!--[if gt IE "+ ++e+"]><i></i><![endif]--\x3e"}while(n[0]);return e>4?e:void 0}());var t},t.isLegacyOpera=function(){return!!window.opera}})),x=g((function(e){(e.exports={}).getOption=function(e,t,n){var i=e[t];if(null==i&&void 0!==n)return n;return i}})),E=function(e){var t=(e=e||{}).reporter,n=x.getOption(e,"async",!0),i=x.getOption(e,"auto",!0);i&&!n&&(t&&t.warn("Invalid options combination. auto=true and async=false is invalid. Setting async=true."),n=!0);var r,o=S(),a=!1;function l(){for(a=!0;o.size();){var e=o;o=S(),e.process()}a=!1}function c(){r=setTimeout(l,0)}return{add:function(e,t){!a&&i&&n&&0===o.size()&&c(),o.add(e,t)},force:function(e){a||(void 0===e&&(e=n),r&&(clearTimeout(r),r=null),e?c():l())}}};function S(){var e={},t=0,n=0,i=0;return{add:function(r,o){o||(o=r,r=0),r>n?n=r:i>r&&(i=r),e[r]||(e[r]=[]),e[r].push(o),t++},process:function(){for(var t=i;n>=t;t++)for(var r=e[t],o=0;r.length>o;o++){(0,r[o])()}},size:function(){return t}}}var C="_erd";function I(e){return e[C]}var T={initState:function(e){return e[C]={},I(e)},getState:I,cleanState:function(e){delete e[C]}},z=w.forEach,M=function(e){var t=(e=e||{}).reporter,n=e.batchProcessor,i=e.stateHandler.getState,r=e.idHandler;if(!n)throw Error("Missing required dependency: batchProcessor");if(!t)throw Error("Missing required dependency: reporter.");var o=function(){var e=document.createElement("div");e.style.cssText="position: absolute; width: 1000px; height: 1000px; visibility: hidden; margin: 0; padding: 0;";var t=document.createElement("div");t.style.cssText="position: absolute; width: 500px; height: 500px; overflow: scroll; visibility: none; top: -1500px; left: -1500px; visibility: hidden; margin: 0; padding: 0;",t.appendChild(e),document.body.insertBefore(t,document.body.firstChild);var n=500-t.clientWidth,i=500-t.clientHeight;return document.body.removeChild(t),{width:n,height:i}}(),a="erd_scroll_detection_container";function l(e,n,i){if(e.addEventListener)e.addEventListener(n,i);else{if(!e.attachEvent)return t.error("[scroll] Don't know how to add event listeners.");e.attachEvent("on"+n,i)}}function c(e,n,i){if(e.removeEventListener)e.removeEventListener(n,i);else{if(!e.detachEvent)return t.error("[scroll] Don't know how to remove event listeners.");e.detachEvent("on"+n,i)}}function u(e){return i(e).container.childNodes[0].childNodes[0].childNodes[0]}function s(e){return i(e).container.childNodes[0].childNodes[0].childNodes[1]}return function(e,t){if(!document.getElementById(e)){var n=t+"_animation",i="/* Created by the element-resize-detector library. */\n";i+="."+t+" > div::-webkit-scrollbar { display: none; }\n\n",i+="."+(t+"_animation_active")+" { -webkit-animation-duration: 0.1s; animation-duration: 0.1s; -webkit-animation-name: "+n+"; animation-name: "+n+"; }\n",i+="@-webkit-keyframes "+n+" { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }\n",function(t,n){n=n||function(e){document.head.appendChild(e)};var i=document.createElement("style");i.innerHTML=t,i.id=e,n(i)}(i+="@keyframes "+n+" { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }")}}("erd_scroll_detection_scrollbar_style",a),{makeDetectable:function(e,c,d){function f(){if(e.debug){var n=Array.prototype.slice.call(arguments);if(n.unshift(r.get(c),"Scroll: "),t.log.apply)t.log.apply(null,n);else for(var i=0;n.length>i;i++)t.log(n[i])}}function h(e){var t=i(e).container.childNodes[0],n=window.getComputedStyle(t);return!n.width||-1===n.width.indexOf("px")}function p(){var e=window.getComputedStyle(c),t={};return t.position=e.position,t.width=c.offsetWidth,t.height=c.offsetHeight,t.top=e.top,t.right=e.right,t.bottom=e.bottom,t.left=e.left,t.widthCSS=e.width,t.heightCSS=e.height,t}function v(){if(f("storeStyle invoked."),i(c)){var e=p();i(c).style=e}else f("Aborting because element has been uninstalled")}function m(e,t,n){i(e).lastWidth=t,i(e).lastHeight=n}function y(){return 2*o.width+1}function g(){return 2*o.height+1}function w(e){return e+10+y()}function b(e){return e+10+g()}function x(e,t,n){var i=u(e),r=s(e),o=w(t),a=b(n),l=function(e){return 2*e+y()}(t),c=function(e){return 2*e+g()}(n);i.scrollLeft=o,i.scrollTop=a,r.scrollLeft=l,r.scrollTop=c}function E(){var e=i(c).container;if(!e){(e=document.createElement("div")).className=a,e.style.cssText="visibility: hidden; display: inline; width: 0px; height: 0px; z-index: -1; overflow: hidden; margin: 0; padding: 0;",i(c).container=e,function(e){e.className+=" "+a+"_animation_active"}(e),c.appendChild(e);var t=function(){i(c).onRendered&&i(c).onRendered()};l(e,"animationstart",t),i(c).onAnimationStart=t}return e}function S(){if(f("Injecting elements"),i(c)){!function(){var e=i(c).style;if("static"===e.position){c.style.position="relative";var n=function(e,t,n,i){var r=n[i];"auto"!==r&&"0"!==function(e){return e.replace(/[^-\d\.]/g,"")}(r)&&(e.warn("An element that is positioned static has style."+i+"="+r+" which is ignored due to the static positioning. The element will need to be positioned relative, so the style."+i+" will be set to 0. Element: ",t),t.style[i]=0)};n(t,c,e,"top"),n(t,c,e,"right"),n(t,c,e,"bottom"),n(t,c,e,"left")}}();var e=i(c).container;e||(e=E());var n,r,u,s,d=o.width,h=o.height,p="position: absolute; flex: none; overflow: hidden; z-index: -1; visibility: hidden; "+("left: "+(n=(n=-(1+d))?n+"px":"0")+"; top: "+(r=(r=-(1+h))?r+"px":"0")+"; right: "+(s=(s=-d)?s+"px":"0")+"; bottom: "+(u=(u=-h)?u+"px":"0")+";"),v=document.createElement("div"),m=document.createElement("div"),y=document.createElement("div"),g=document.createElement("div"),w=document.createElement("div"),b=document.createElement("div");v.dir="ltr",v.style.cssText="position: absolute; flex: none; overflow: hidden; z-index: -1; visibility: hidden; width: 100%; height: 100%; left: 0px; top: 0px;",v.className=a,m.className=a,m.style.cssText=p,y.style.cssText="position: absolute; flex: none; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;",g.style.cssText="position: absolute; left: 0; top: 0;",w.style.cssText="position: absolute; flex: none; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;",b.style.cssText="position: absolute; width: 200%; height: 200%;",y.appendChild(g),w.appendChild(b),m.appendChild(y),m.appendChild(w),v.appendChild(m),e.appendChild(v),l(y,"scroll",x),l(w,"scroll",S),i(c).onExpandScroll=x,i(c).onShrinkScroll=S}else f("Aborting because element has been uninstalled");function x(){i(c).onExpand&&i(c).onExpand()}function S(){i(c).onShrink&&i(c).onShrink()}}function C(){function o(e,t,n){var i=function(e){return u(e).childNodes[0]}(e),r=w(t),o=b(n);i.style.width=r+"px",i.style.height=o+"px"}function a(a){var u=c.offsetWidth,s=c.offsetHeight;f("Storing current size",u,s),m(c,u,s),n.add(0,(function(){if(i(c))if(l()){if(e.debug)c.offsetWidth===u&&c.offsetHeight===s||t.warn(r.get(c),"Scroll: Size changed before updating detector elements.");o(c,u,s)}else f("Aborting because element container has not been initialized");else f("Aborting because element has been uninstalled")})),n.add(1,(function(){i(c)?l()?x(c,u,s):f("Aborting because element container has not been initialized"):f("Aborting because element has been uninstalled")})),a&&n.add(2,(function(){i(c)?l()?a():f("Aborting because element container has not been initialized"):f("Aborting because element has been uninstalled")}))}function l(){return!!i(c).container}function d(){f("notifyListenersIfNeeded invoked");var e=i(c);return void 0===i(c).lastNotifiedWidth&&e.lastWidth===e.startSize.width&&e.lastHeight===e.startSize.height?f("Not notifying: Size is the same as the start size, and there has been no notification yet."):e.lastWidth===e.lastNotifiedWidth&&e.lastHeight===e.lastNotifiedHeight?f("Not notifying: Size already notified"):(f("Current size not notified, notifying..."),e.lastNotifiedWidth=e.lastWidth,e.lastNotifiedHeight=e.lastHeight,void z(i(c).listeners,(function(e){e(c)})))}function p(){if(f("Scroll detected."),h(c))f("Scroll event fired while unrendered. Ignoring...");else{var e=c.offsetWidth,t=c.offsetHeight;e!==i(c).lastWidth||t!==i(c).lastHeight?(f("Element size changed."),a(d)):f("Element size has not changed ("+e+"x"+t+").")}}if(f("registerListenersAndPositionElements invoked."),i(c)){i(c).onRendered=function(){if(f("startanimation triggered."),h(c))f("Ignoring since element is still unrendered...");else{f("Element rendered.");var e=u(c),t=s(c);0!==e.scrollLeft&&0!==e.scrollTop&&0!==t.scrollLeft&&0!==t.scrollTop||(f("Scrollbars out of sync. Updating detector elements..."),a(d))}},i(c).onExpand=p,i(c).onShrink=p;var v=i(c).style;o(c,v.width,v.height)}else f("Aborting because element has been uninstalled")}function I(){if(f("finalizeDomMutation invoked."),i(c)){var e=i(c).style;m(c,e.width,e.height),x(c,e.width,e.height)}else f("Aborting because element has been uninstalled")}function T(){d(c)}function M(){var e;f("Installing..."),i(c).listeners=[],e=p(),i(c).startSize={width:e.width,height:e.height},f("Element start size",i(c).startSize),n.add(0,v),n.add(1,S),n.add(2,C),n.add(3,I),n.add(4,T)}d||(d=c,c=e,e=null),e=e||{},f("Making detectable..."),!function(e){return!function(e){return e===e.ownerDocument.body||e.ownerDocument.body.contains(e)}(e)||null===window.getComputedStyle(e)}(c)?M():(f("Element is detached"),E(),f("Waiting until element is attached..."),i(c).onRendered=function(){f("Element is now attached"),M()})},addListener:function(e,t){if(!i(e).listeners.push)throw Error("Cannot add listener to an element that is not detectable.");i(e).listeners.push(t)},uninstall:function(e){var t=i(e);t&&(t.onExpandScroll&&c(u(e),"scroll",t.onExpandScroll),t.onShrinkScroll&&c(s(e),"scroll",t.onShrinkScroll),t.onAnimationStart&&c(t.container,"animationstart",t.onAnimationStart),t.container&&e.removeChild(t.container))}}},O=w.forEach;function R(e){return Array.isArray(e)||void 0!==e.length}function L(e){if(Array.isArray(e))return e;var t=[];return O(e,(function(e){t.push(e)})),t}function k(e){return e&&1===e.nodeType}function P(e,t,n){var i=e[t];return null==i&&void 0!==n?n:i}var H=null;"undefined"!=typeof window&&(H=function(e){var t,n;if((e=e||{}).idHandler)t={get:function(t){return e.idHandler.get(t,!0)},set:e.idHandler.set};else{var i=function(e){var t=e.idGenerator,n=e.stateHandler.getState;return{get:function(e){var t=n(e);return t&&void 0!==t.id?t.id:null},set:function(e){var i=n(e);if(!i)throw Error("setId required the element to have a resize detection state.");var r=t.generate();return i.id=r,r}}}({idGenerator:(n=1,{generate:function(){return n++}}),stateHandler:T});t=i}var r=e.reporter;r||(r=function(e){function t(){}var n={log:t,warn:t,error:t};if(!e&&window.console){var i=function(e,t){e[t]=function(){var e=console[t];if(e.apply)e.apply(console,arguments);else for(var n=0;arguments.length>n;n++)e(arguments[n])}};i(n,"log"),i(n,"warn"),i(n,"error")}return n}(!1===r));var o=P(e,"batchProcessor",E({reporter:r})),a={};a.callOnAdd=!!P(e,"callOnAdd",!0),a.debug=!!P(e,"debug",!1);var l,c=function(e){var t={};function n(n){var i=e.get(n);return void 0===i?[]:t[i]||[]}return{get:n,add:function(n,i){var r=e.get(n);t[r]||(t[r]=[]),t[r].push(i)},removeListener:function(e,t){for(var i=n(e),r=0,o=i.length;o>r;++r)if(i[r]===t){i.splice(r,1);break}},removeAllListeners:function(e){var t=n(e);t&&(t.length=0)}}}(t),u=function(e){var t=e.stateHandler.getState;return{isDetectable:function(e){var n=t(e);return n&&!!n.isDetectable},markAsDetectable:function(e){t(e).isDetectable=!0},isBusy:function(e){return!!t(e).busy},markBusy:function(e,n){t(e).busy=!!n}}}({stateHandler:T}),s=P(e,"strategy","object"),d={reporter:r,batchProcessor:o,stateHandler:T,idHandler:t};if("scroll"===s&&(b.isLegacyOpera()?(r.warn("Scroll strategy is not supported on legacy Opera. Changing to object strategy."),s="object"):b.isIE(9)&&(r.warn("Scroll strategy is not supported on IE9. Changing to object strategy."),s="object")),"scroll"===s)l=M(d);else{if("object"!==s)throw Error("Invalid strategy name: "+s);l=function(e){var t=(e=e||{}).reporter,n=e.batchProcessor,i=e.stateHandler.getState;if(!t)throw Error("Missing required dependency: reporter.");function r(e){return i(e).object}return{makeDetectable:function(e,r,o){o||(o=r,r=e,e=null),e=e||{},b.isIE(8)?o(r):function(e,r){var o="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;",a=!1,l=window.getComputedStyle(e),c=e.offsetWidth,u=e.offsetHeight;function s(){function n(){if("static"===l.position){e.style.position="relative";var n=function(e,t,n,i){var r=n[i];"auto"!==r&&"0"!==function(e){return e.replace(/[^-\d\.]/g,"")}(r)&&(e.warn("An element that is positioned static has style."+i+"="+r+" which is ignored due to the static positioning. The element will need to be positioned relative, so the style."+i+" will be set to 0. Element: ",t),t.style[i]=0)};n(t,e,l,"top"),n(t,e,l,"right"),n(t,e,l,"bottom"),n(t,e,l,"left")}}""!==l.position&&(n(),a=!0);var c=document.createElement("object");c.style.cssText=o,c.tabIndex=-1,c.type="text/html",c.setAttribute("aria-hidden","true"),c.onload=function(){a||n(),function e(t,n){t.contentDocument?n(t.contentDocument):setTimeout((function(){e(t,n)}),100)}(this,(function(t){r(e)}))},b.isIE()||(c.data="about:blank"),e.appendChild(c),i(e).object=c,b.isIE()&&(c.data="about:blank")}i(e).startSize={width:c,height:u},n?n.add(s):s()}(r,o)},addListener:function(e,t){if(!r(e))throw Error("Element is not detectable by this strategy.");function n(){t(e)}b.isIE(8)?(i(e).object={proxy:n},e.attachEvent("onresize",n)):r(e).contentDocument.defaultView.addEventListener("resize",n)},uninstall:function(e){b.isIE(8)?e.detachEvent("onresize",i(e).object.proxy):e.removeChild(r(e)),delete i(e).object}}}(d)}var f={};return{listenTo:function(e,n,i){function o(e){var t=c.get(e);O(t,(function(t){t(e)}))}function s(e,t,n){c.add(t,n),e&&n(t)}if(i||(i=n,n=e,e={}),!n)throw Error("At least one element required.");if(!i)throw Error("Listener required.");if(k(n))n=[n];else{if(!R(n))return r.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");n=L(n)}var d=0,h=P(e,"callOnAdd",a.callOnAdd),p=P(e,"onReady",(function(){})),v=P(e,"debug",a.debug);O(n,(function(e){T.getState(e)||(T.initState(e),t.set(e));var a=t.get(e);if(v&&r.log("Attaching listener to element",a,e),!u.isDetectable(e))return v&&r.log(a,"Not detectable."),u.isBusy(e)?(v&&r.log(a,"System busy making it detectable"),s(h,e,i),f[a]=f[a]||[],void f[a].push((function(){++d===n.length&&p()}))):(v&&r.log(a,"Making detectable..."),u.markBusy(e,!0),l.makeDetectable({debug:v},e,(function(e){if(v&&r.log(a,"onElementDetectable"),T.getState(e)){u.markAsDetectable(e),u.markBusy(e,!1),l.addListener(e,o),s(h,e,i);var t=T.getState(e);if(t&&t.startSize)t.startSize.width===e.offsetWidth&&t.startSize.height===e.offsetHeight||o(e);f[a]&&O(f[a],(function(e){e()}))}else v&&r.log(a,"Element uninstalled before being detectable.");delete f[a],++d===n.length&&p()})));v&&r.log(a,"Already detecable, adding listener."),s(h,e,i),d++})),d===n.length&&p()},removeListener:c.removeListener,removeAllListeners:c.removeAllListeners,uninstall:function(e){if(!e)return r.error("At least one element is required.");if(k(e))e=[e];else{if(!R(e))return r.error("Invalid arguments. Must be a DOM element or a collection of DOM elements.");e=L(e)}O(e,(function(e){c.removeAllListeners(e),l.uninstall(e),T.cleanState(e)}))}}}({strategy:"scroll"}));var A=H,W=r({},y.defaultProps);function D(e){var i=e.width,r=e.height,o=e.children,a=t.useRef(null);return c((function(){if(("number"!=typeof i||"number"!=typeof r)&&A){var e=a.current.getResizeNode();return A.listenTo(e,(function(){return a.current.calculateSize()})),function(){return A.uninstall(e)}}}),[i,r]),n.createElement(y,e,(function(e,t){return a.current=t,"function"==typeof o?o(e,t):o}))}D.defaultProps=W,D.PadContent=!0;var j=function(){},N=function(){};if("undefined"!=typeof window){j=window.requestAnimationFrame,N=window.cancelAnimationFrame;for(var B=["ms","moz","webkit","o"],V=0,q=0;4>q&&!j;++q)j=window[B[q]+"RequestAnimationFrame"],N=window[B[q]+"CancelAnimationFrame"]||window[B[q]+"CancelRequestAnimationFrame"];j||(j=function(e){var t=(new Date).getTime(),n=Math.max(0,16-(t-V)),i=window.setTimeout((function(){e(t+n)}),n);return V=t+n,i},N=function(e){clearTimeout(e)})}function _(e,t){var n=t.x,i=t.y,r=Math.sqrt(n*n+i*i);return 0===r?{x:0,y:0}:{x:e*(n/r),y:e*(i/r)}}function F(e,t,n,i){if(i){var r="y"===i?["y","height"]:["x","width"],o=r[0];if(!e[o])return 0;var a=0>e[o]?-1:1;return a*Math.min(a*e[o],Math.sqrt(2*(.5*t[r[1]])*a*n[o]))}"number"==typeof n&&(n=_(n,e));var l={x:F(e,t,n,"x"),y:F(e,t,n,"y")};return l.x===e.x&&l.y===e.y?e:l}function X(e,t,n,i,r,o){if(o){var a="y"===o?["y","height"]:["x","width"],l=a[0],c=a[1],u=t[c],s=Math.min(u-n[c],0),d=e[l];return i&&u>0&&(s=u*Math.ceil(s/u)),d>0?d=0:s>d?d=s:!r&&i&&u>0&&(d=u*Math.round(d/u)),d}var f={x:X(e,t,n,i,r,"x"),y:X(e,t,n,i,r,"y")};return f.x===e.x&&f.y===e.y?e:f}function Y(e,t,n,i,r,o){if(o){var a="y"===o?["y","height"]:["x","width"],l=a[0],c=a[1],u=e[l];if(i&&n[c]>0){var s=u/n[c];u=n[c]*(s=t[l]>.5?Math.ceil(s):-.5>t[l]?Math.floor(s):Math.round(s))}else r[l]&&(u+=.5*t[l]*(t[l]/r[l]));return u}return"number"==typeof r&&(r=_(r,t)),{x:Y(e,t,n,i,r,"x"),y:Y(e,t,n,i,r,"y")}}function G(e,t,n,i){var r=(new Date).getTime(),o=0;if(!t)return{endOffset:e,rate:t,duration:o,startTime:r};var a,l={x:e.x-n.x,y:e.y-n.y},c=Math.sqrt(Math.pow(l.x,2)+Math.pow(l.y,2));if(c){var u=Math.sqrt(.5*Math.pow(a=(i.x*l.x+i.y*l.y)/c,2)+t*c),s=(u-a)/t;0>s&&(u=a,s=0),o=s+u/t}else a=Math.sqrt(Math.pow(i.x,2)+Math.pow(i.y,2)),o=(Math.sqrt(2)+1)*a/t;return{endOffset:e,rate:t,duration:o,startTime:r,points:{x:[n.x,n.x+i.x*(o/3),e.x,e.x],y:[n.y,n.y+i.y*(o/3),e.y,e.y]}}}var U=.025,J=.0025,K={size:{width:0,height:0},contentSize:{width:0,height:0},contentOffset:{x:0,y:0},contentVelocity:{x:0,y:0},drag:null,deceleration:null,options:[!1,!1,!0,!0],pannable:a};function Q(e,t){return function(e,t){var n=e.size,i=e.contentSize,o=e.contentOffset,a=e.contentVelocity,l=e.drag,c=e.deceleration,u=e.options[0],s=U;if(c){var d=c.endOffset;if(d!==X(d,n,i,u,!0)&&o!==X(o,n,i,u,!0)){var f=a;return c.rate!==s&&(f=F(f,n,s),d=Y(o,f,n,u,s)),d=X(d,n,i,u,!0),r({},e,{contentVelocity:f,drag:null,deceleration:G(d,s,o,f)})}}else if(!l){var h=X(o,n,i,u);if(o!==h){var p=Y(h,{x:0,y:0},n,u,s);return r({},e,{drag:null,deceleration:G(p,s,o,a)})}}return e}(function(e,t){switch(t.type){case"setPannable":return function(e,t){return r({},e,{pannable:t.value})}(e,t);case"setOptions":return function(e,t){return r({},e,{options:t.value})}(e,t);case"setSize":return function(e,t){return r({},e,{size:t.value})}(e,t);case"setContentSize":return function(e,t){return r({},e,{contentSize:t.value})}(e,t);case"dragStart":return function(e,t){var n=e.contentOffset,i=e.pannable.velocity,o={x:1,y:1};e.options[1]&&(Math.abs(i.x)>Math.abs(i.y)?o.y=0:o.x=0);return r({},e,{contentVelocity:{x:o.x*i.x,y:o.y*i.y},drag:{direction:o,startOffset:n},deceleration:null})}(e);case"dragMove":return function(e,t){var n=e.contentOffset,i=e.drag,o=e.options,a=e.pannable,l=a.translation,c=a.interval,u=function e(t,n,i,r,o){if(o){var a="y"===o?["y","height","width"]:["x","width","height"],l=a[0],c=a[1],u=a[2],s=t[l],d=Math.min(i[c]-r[c],0),f=.5*Math.min(i[c],i[u]);return s>0?n[l]?f*(1-f/(f+s)):0:d>s?n[l]?d-f*(1-f/(f-s+d)):d:s}var h={x:e(t,n,i,r,"x"),y:e(t,n,i,r,"y")};return h.x===t.x&&h.y===t.y?t:h}({x:i.startOffset.x+i.direction.x*l.x,y:i.startOffset.y+i.direction.y*l.y},{x:o[2],y:o[3]},e.size,e.contentSize);return r({},e,{contentOffset:u,contentVelocity:{x:(u.x-n.x)/c,y:(u.y-n.y)/c},drag:i,deceleration:null})}(e);case"dragEnd":return function(e,t){var n=e.size,i=e.contentOffset,o=e.options[0],a=J,l=e.contentVelocity;o&&(l=F(l,n,a=U));var c=Y(i,l,n,o,a);return r({},e,{contentVelocity:l,drag:null,deceleration:G(c,a,i,l)})}(e);case"dragCancel":return function(e,t){var n=e.contentOffset,i=e.contentVelocity,o=U,a=Y(e.drag.startOffset,{x:0,y:0},e.size,e.options[0],o);return r({},e,{drag:null,deceleration:G(a,o,n,i)})}(e);case"decelerate":return function(e,t){var n=e.deceleration,i=t.now;if(!n)return e;var o=function e(t,n,i){var o=t.duration,a=t.endOffset,l=1;if(o>0&&(l=(n-t.startTime)/o),i){var c,u=("y"===i?["y"]:["x"])[0],s=t.points[u],d=s[0],f=s[1],h=s[2],p=s[3],v=d-3*(d-f)*l+3*(d-2*f+h)*Math.pow(l,2)-(d-3*f+3*h-p)*Math.pow(l,3),m=(-3*(d-f)+6*(d-2*f+h)*l-3*(d-3*f+3*h-p)*Math.pow(l,2))/o;return(c={})[u+"Offset"]=v,c[u+"Velocity"]=m,c}if(0>l||l>=1)return{offset:a,velocity:{x:0,y:0},didEnd:!0};var y=r({},e(t,n,"x"),{},e(t,n,"y"));return{offset:{x:y.xOffset,y:y.yOffset},velocity:{x:y.xVelocity,y:y.yVelocity},didEnd:!1}}(n,i);return r({},e,{contentOffset:o.offset,contentVelocity:o.velocity,drag:null,deceleration:o.didEnd?null:n})}(e,t);case"scrollTo":return Z(e,t);case"scrollToRect":return function(e,t){var n=t.animated,i=function e(t,n,i,r,o){if(o){var a="y"===o?["y","height"]:["x","width"],l=a[0],c=a[1],u=-t[l],s=r[c]-t[c];if("auto"===n[l]){var d=0>s?-1:1;u+=d*Math.max(0,Math.min(d*(i[l]-u),d*s))}else"start"===n[l]?n[l]=0:"center"===n[l]?n[l]=.5:"end"===n[l]&&(n[l]=1),("number"!=typeof n[l]||isNaN(n[l]))&&(n[l]=.5),u+=n[l]*s;return u}"object"!=typeof n&&(n={x:n,y:n});return{x:e(t,n,i,r,"x"),y:e(t,n,i,r,"y")}}(t.rect,t.align,e.contentOffset,e.size);return Z(e,{type:"scrollTo",offset:i,animated:n})}(e,t);default:return e}}(e,t))}function Z(e,t){var n=e.contentOffset,i=e.contentVelocity,o=t.point,a=e.drag,l=e.deceleration,c=t.offset,u=void 0===c?{x:0,y:0}:c,s=t.animated;return o&&(u={x:-o.x,y:-o.y}),u.x===n.x&&u.y===n.y?e:(a&&(s=!1),s?r({},e,{deceleration:G(Y(u,{x:0,y:0},e.size,e.options[0],U),U,n,i)}):(a?a=r({},a,{startOffset:{x:a.startOffset.x+u.x-n.x,y:a.startOffset.y+u.y-n.y}}):l=l?G({x:l.endOffset.x+u.x-n.x,y:l.endOffset.y+u.y-n.y},l.rate,u,i):G(u),r({},e,{contentOffset:u,drag:a,deceleration:l})))}var $=r({width:0,height:0,pagingEnabled:!1,directionalLockEnabled:!1,alwaysBounceX:!0,alwaysBounceY:!0,scrollTo:null,scrollToRect:null,onScroll:function(){},onDragStart:function(){},onDragEnd:function(){},onDecelerationStart:function(){},onDecelerationEnd:function(){},onContentResize:function(){}},h.defaultProps);function ee(e){var o=e.width,a=e.height,l=e.pagingEnabled,d=e.directionalLockEnabled,f=e.alwaysBounceX,v=e.alwaysBounceY,y=e.scrollTo,g=e.scrollToRect,w=e.onScroll,b=e.onDragStart,x=e.onDragEnd,E=e.onDecelerationStart,S=e.onDecelerationEnd,C=e.onContentResize,I=e.children,T=i(e,["width","height","pagingEnabled","directionalLockEnabled","alwaysBounceX","alwaysBounceY","scrollTo","scrollToRect","onScroll","onDragStart","onDragEnd","onDecelerationStart","onDecelerationEnd","onContentResize","children"]),z=T.enabled,M=T.shouldStart,O=t.useReducer(Q,K),R=O[0],L=O[1],k=u(R),P=R.size,H=R.contentSize,A=R.contentOffset,W=R.drag,B=R.deceleration,V=R.pannable,q={size:P,contentSize:H,contentOffset:A,contentVelocity:R.contentVelocity,dragging:!!W,decelerating:!!B},_=k.current,F=t.useCallback((function(e){m(H,e)||L({type:"setContentSize",value:e})}),[H]),X=t.useCallback((function(e){return!(d&&!function(e,t,n){var i=Math.abs(e.x)>Math.abs(e.y)?"width":"height";return n[i]>t[i]}(e.velocity,P,H))&&M(e)}),[M,d,P,H]);c((function(){_.pannable.translation!==V.translation&&(V.translation?L(_.pannable.translation?{type:"dragMove"}:{type:"dragStart"}):_.pannable.translation&&L(z?{type:"dragEnd"}:{type:"dragCancel"})),_.contentSize!==H&&C(H),_.contentOffset!==A&&w(q),_.drag!==W&&(_.drag?W||x(q):b(q)),_.deceleration!==B&&(_.deceleration?B||S(q):E(q))})),c((function(){if(R.deceleration){var e=j((function(){L({type:"decelerate",now:(new Date).getTime()})}));return function(){N(e)}}}),[R]),t.useMemo((function(){L({type:"setSize",value:{width:o,height:a}})}),[o,a]),t.useMemo((function(){L({type:"setOptions",value:[l,d,f,v]})}),[l,d,f,v]),t.useMemo((function(){y&&L(r({type:"scrollTo"},y))}),[y]),t.useMemo((function(){g&&L(r({type:"scrollToRect"},g))}),[g]),T.shouldStart=X;var Y={overflow:"hidden",position:"relative",width:P.width,height:P.height};return T.style&&Object.assign(Y,T.style),T.style=Y,n.createElement(p.Provider,{value:{visibleRect:{x:-A.x,y:-A.y,width:P.width,height:P.height},resizeContent:F}},n.createElement(h,T,(function(e){V!==e&&L({type:"setPannable",value:e});var i=s.create({position:"relative",width:H.width,height:H.height,transformTranslate:[A.x,A.y],willChange:"transform"}),r="function"==typeof I?I(R):I;return t.isValidElement(r)&&r.type.PadContent?(r.props.style&&Object.assign(i,r.props.style),r=t.cloneElement(r,{style:i,ref:r.ref})):r=n.createElement(D,{style:i},r),r})))}function te(e,t,n){if(!t)return t;if(n){var i,o="y"===n?["y","height"]:["x","width"],a=o[0],l=o[1];return(i={})[a]=t[a]-e[a],i[l]=t[l],i}return r({},te(e,t,"x"),{},te(e,t,"y"))}function ne(e,t,n){if(!t)return!0;if(n){var i="y"===n?["y","height"]:["x","width"],r=i[0],o=i[1];return e[r]+e[o]>=t[r]-.25*t[o]&&t[r]+1.25*t[o]>=e[r]}return ne(e,t,"x")&&ne(e,t,"y")}function ie(){}ee.defaultProps=$;function re(e){var o=e.width,a=e.height,l=e.direction,s=e.rowSpacing,d=e.columnSpacing,f=e.itemCount,h=e.itemWidth,v=e.itemHeight,y=e.renderItem,g=e.children,w=i(e,["width","height","direction","rowSpacing","columnSpacing","itemCount","itemWidth","itemHeight","renderItem","children"]),b=t.useMemo((function(){return function(e){var t,n,i=e.itemCount,r={width:e.itemWidth,height:e.itemHeight},o={row:e.rowSpacing,column:e.columnSpacing},a="x"===e.direction?["y","x","height","width","column","row"]:["x","y","width","height","row","column"],l=a[0],c=a[1],u=a[2],s=a[3],d=a[4],f=a[5],h={width:e.width,height:e.height}[u],p=0,v=0,m=0,y=[];"number"!=typeof h?(m=i,0===r[u]?h=0:(h=i*r[u],i>1&&(h+=(i-1)*o[f]))):0===r[u]?m=i:(m=1,h>r[u]&&(m+=Math.floor((h-r[u])/(r[u]+o[f]))));m>0&&(v=Math.ceil(i/m));for(var g=0;v>g;g++){g>0&&(p+=o[d]);for(var w=0;m>w;w++){var b,x,E=w+g*m,S=0;if(m>1&&(S+=Math.round(w*((h-r[u])/(m-1)))),E>=i)break;y.push(((x={rect:(b={},b[l]=S,b[c]=p,b[u]=r[u],b[s]=r[s],b)})[d+"Index"]=g,x[f+"Index"]=w,x.itemIndex=E,x))}p+=r[s]}return{size:(t={},t[u]=h,t[s]=p,t),count:(n={},n[d]=v,n[f]=m,n),layoutList:y}}({direction:l,width:o,height:a,rowSpacing:s,columnSpacing:d,itemCount:f,itemWidth:h,itemHeight:v})}),[l,o,a,s,d,f,h,v]),x=u(b),E=t.useContext(p),S=b.size,C=b.layoutList,I=x.current,T=t.useCallback((function(){}),[]);c((function(){E.resizeContent(S)}),[]),c((function(){m(I.size,S)||E.resizeContent(S)}));var z={position:"relative"};S&&(z.width=S.width,z.height=S.height),w.style&&Object.assign(z,w.style),w.style=z;var M=C.map((function(e){return function(e){var i=e.rect,o=e.itemIndex,a=e.visibleRect,l=e.needsRender,c=e.Item,u=!1,s=y(e),d="GridContent_"+o,f={position:"absolute",left:i.x,top:i.y,width:i.width,height:i.height};return t.isValidElement(s)&&s.type===c&&(void 0!==s.props.forceRender&&(u=s.props.forceRender),s.key&&(d=s.key),s=s.props.children),l||u?(t.isValidElement(s)?(s.props.style&&Object.assign(f,s.props.style),s=t.cloneElement(s,{style:f,ref:s.ref})):s=n.createElement("div",{style:f},s),n.createElement(p.Provider,{key:d,value:r({},E,{visibleRect:a,resizeContent:T})},s)):null}(r({},e,{visibleRect:te(e.rect,E.visibleRect),needsRender:ne(e.rect,E.visibleRect),Item:ie}))}));return"function"==typeof g&&g(b),n.createElement("div",w,M)}function oe(){}re.defaultProps={width:null,height:null,direction:"y",rowSpacing:0,columnSpacing:0,itemCount:0,itemWidth:0,itemHeight:0,renderItem:function(){return null}},re.PadContent=!0;function ae(e){var o=e.width,a=e.height,l=e.direction,s=e.spacing,d=e.itemCount,f=e.estimatedItemWidth,h=e.estimatedItemHeight,v=e.renderItem,g=e.children,w=i(e,["width","height","direction","spacing","itemCount","estimatedItemWidth","estimatedItemHeight","renderItem","children"]),b=t.useState([]),x=b[0],E=b[1],S=t.useState({}),C=S[0],I=S[1],T=t.useMemo((function(){return function(e,t,n){var i,r=e.spacing,o=e.itemCount,a=e.estimatedItemWidth,l=e.estimatedItemHeight,c={width:e.width,height:e.height},u="x"===e.direction?["y","x","height","width"]:["x","y","width","height"],s=u[0],d=u[1],f=u[2],h=u[3],p=0,v=0,m=[],y={};"number"==typeof c[f]&&(y[f]=c[f]);for(var g=0;o>g;g++){var w,b=t[g]||null,x=n[b]||null,E=((w={})[s]=0,w[d]=v,w);x?Object.assign(E,x):(E[f]=void 0!==y[f]?y[f]:"function"==typeof a?a(g):a,E[h]="function"==typeof l?l(g):l),m.push({rect:E,itemIndex:g,itemHash:b,itemSize:x}),E[h]>0&&(v+=E[h],o-1>g&&(v+=r)),E[f]>p&&(p=E[f])}return{size:(i={},i[f]=p,i[h]=v,i),fixed:y,layoutList:m}}({width:o,height:a,direction:l,spacing:s,itemCount:d,estimatedItemWidth:f,estimatedItemHeight:h},x,C)}),[o,a,l,s,d,f,h,x,C]),z=u(T),M=t.useContext(p),O=T.size,R=T.fixed,L=T.layoutList,k=z.current,P=[];c((function(){M.resizeContent(O)}),[]),c((function(){m(k.size,O)||M.resizeContent(O)}));var H={position:"relative"};O&&(H.width=O.width,H.height=O.height),w.style&&Object.assign(H,w.style),w.style=H;var A=L.map((function(e){return function(e){var i,o=e.rect,a=e.itemIndex,l=e.itemSize,c=e.visibleRect,u=e.needsRender,s=e.Item,d=!1,f=v(e),h="ListContent_"+a,g={position:"absolute",left:o.x,top:o.y,width:o.width,height:o.height};t.isValidElement(f)&&f.type===s&&(void 0!==f.props.forceRender&&(d=f.props.forceRender),f.key&&(h=f.key),void 0!==f.props.hash&&(i=f.props.hash),f=f.props.children),void 0===i&&(i=h);var w=!u&&!d;if(l||-1===P.indexOf(i)||(w=!0),P[a]=i,w)return null;var b,x={};return l?Object.assign(x,l):("number"==typeof R.width&&(x.width=R.width),"number"==typeof R.height&&(x.height=R.height)),t.isValidElement(f)&&f.type.PadContent?(f.props.style&&Object.assign(g,f.props.style),"number"==typeof f.props.width&&(x.width=f.props.width),"number"==typeof f.props.height&&(x.height=f.props.height),f=t.cloneElement(f,r({},x,{style:g,ref:f.ref}))):f=n.createElement(y,r({},x,{style:g}),f),n.createElement(p.Provider,{key:h,value:r({},M,{visibleRect:c,resizeContent:(b=i,function(e){I((function(t){var n;return m(t[b],e)?t:r({},t,((n={})[b]=e,n))}))})})},f)}(r({},e,{visibleRect:te(e.rect,M.visibleRect),needsRender:ne(e.rect,M.visibleRect),Item:oe}))}));return function(e,t){if(e===t)return!0;if(!e||!t)return!1;if(e.length!==t.length)return!1;for(var n=0;e.length>n;n++)if(e[n]!==t[n])return!1;return!0}(x,P)||E(P),"function"==typeof g&&g(T),n.createElement("div",w,A)}ae.defaultProps={width:null,height:null,direction:"y",spacing:0,itemCount:0,estimatedItemWidth:0,estimatedItemHeight:0,renderItem:function(){return null}},ae.PadContent=!0;function le(e){var o=e.width,a=e.height,l=e.onResize,s=e.children,d=i(e,["width","height","onResize","children"]),f=t.useState(null),h=f[0],p=f[1],y=u(h),g=t.useRef(null),w=y.current,b=t.useCallback((function(){var e=v(g.current);p(e)}),[]);c((function(){m(w,h)||h&&l(h),h||b()})),c((function(){if(("number"!=typeof o||"number"!=typeof a)&&A){var e=g.current;return A.listenTo(e,(function(){return b()})),function(){return A.uninstall(e)}}}),[o,a]),t.useMemo((function(){var e=null;"number"==typeof o&&"number"==typeof a&&(e={width:o,height:a}),p(e)}),[o,a]),d.style=r({width:ce(o),height:ce(a)},d.style);var x=null;return h&&(x="function"==typeof s?s(h):s),n.createElement("div",r({},d,{ref:g}),x)}function ce(e){return null==e||""===e?"100%":e}le.defaultProps={width:null,height:null,onResize:function(){}};var ue={mouseEntered:!1,loopCount:1,loopOffset:0,loopWidth:0,scrollTo:null,options:["x",!0],pad:K};function se(e,t){switch(t.type){case"setMouseEntered":return function(e,t){return r({},e,{mouseEntered:t.value})}(e,t);case"setPad":return function(e,t){var n=r({},e,{pad:t.value});return n=de(n=function(e,t){var n,i=e.loopCount,o=e.loopOffset,a=e.options,l=a[0],c=e.pad,u=c.contentOffset,s=c.size,d=c.contentSize;if(a[1]){var f=function(e,t,n,i,r){var o;if(1===i)return[e,0];var a="y"===r?["height","y","x"]:["width","x","y"],l=a[0],c=a[1],u=a[2],s=n[l],d=t[l],f=s/i,h=.5*(s-f-d),p=0,v=d-s,m=e[c],y=0;if(p-=h,m>=(v+=h)&&p>=m)return[e,0];v>m?y=Math.floor((p-m)/f):m>p&&(y=-Math.floor((m-v)/f));return[(o={},o[c]=m+=f*y,o[u]=e[u],o),y]}(u,s,d,i,l),h=f[0],p=f[1];u!==h&&((n=n||r({},e)).loopOffset=o+p,n.scrollTo={offset:h,animated:!1})}return n||e}(n))}(e,t);case"setOptions":return function(e,t){var n=r({},e,{options:t.value});return n=de(n)}(e,t);case"setScrollTo":return function(e,t){return r({},e,{scrollTo:t.value})}(e,t);case"playNext":return function(e,t){var n=e.pad,i=function(e,t,n,i,r){var o,a="y"===r?["height","y","x"]:["width","x","y"],l=a[0],c=a[1],u=a[2],s=t[l],d=Math.min(s-n[l],0),f=e[c];i&&s>0&&(d=s*Math.ceil(d/s));f=f>d?Math.max(d,f-s):0;return(o={})[c]=f,o[u]=e[u],o}(n.contentOffset,n.size,n.contentSize,n.pagingEnabled,e.options[0]);return r({},e,{scrollTo:{offset:i,animated:!0}})}(e);default:return e}}function de(e,t){var n=e.options,i=e.pad;return r({},e,{},function(e,t,n,i,r){var o="y"===r?"height":"width",a=e[o],l=t[o],c=l/n;if(!i||0===l||0===a)return{loopCount:1,loopOffset:0,loopWidth:c};return{loopCount:2+Math.floor(a/c),loopWidth:c}}(i.size,i.contentSize,e.loopCount,n[1],n[0]))}var fe=r({direction:"x",loop:!0,autoplayEnabled:!0,autoplayInterval:5e3},ee.defaultProps,{pagingEnabled:!0,directionalLockEnabled:!0});function he(e){var r=e.direction,o=e.loop,a=e.autoplayEnabled,l=e.autoplayInterval,c=e.children,u=i(e,["direction","loop","autoplayEnabled","autoplayInterval","children"]),s=u.scrollTo,d=u.onMouseEnter,f=u.onMouseLeave,h=t.useReducer(se,ue),p=h[0],v=h[1],m=p.mouseEntered,y=p.loopCount,g=p.loopOffset,w=p.scrollTo,b=p.pad,x=t.useCallback((function(e){v({type:"setMouseEntered",value:!0}),d&&d(e)}),[d]),E=t.useCallback((function(e){v({type:"setMouseEntered",value:!1}),f&&f(e)}),[f]);return t.useEffect((function(){if(a&&!m&&!b.drag&&!b.deceleration){var e=setTimeout((function(){v({type:"playNext"})}),l);return function(){clearTimeout(e)}}}),[a,l,m,b.drag,b.deceleration]),t.useMemo((function(){v({type:"setOptions",value:[r,o]})}),[o,r]),t.useMemo((function(){v({type:"setScrollTo",value:s})}),[s]),u.scrollTo=w,"x"===r?u.alwaysBounceY=!1:u.alwaysBounceX=!1,a&&(u.onMouseEnter=x,u.onMouseLeave=E),n.createElement(ee,u,(function(e){b!==e&&v({type:"setPad",value:e});var t="function"==typeof c?c(p):c;return n.createElement(ae,{direction:r,itemCount:y,renderItem:function(e){return n.createElement(e.Item,{key:e.itemIndex+g,hash:"loop"},t)}})}))}var pe={activeIndex:0,itemCount:0,scrollTo:null,player:ue};function ve(e,t){switch(t.type){case"setPlayer":return function(e,t){var n=t.value,i=n.options[0],o=n.pad,a=o.contentOffset,l=o.size,c=o.contentSize,u=function(e,t,n){var i=e["y"===n?"height":"width"],r=0;i>0&&(r=Math.ceil(t/i));return r}(l,n.loopWidth,i),s=0;if(u>0){var d=function(e,t,n,i){var r="y"===i?["height","y"]:["width","x"],o=r[0],a=r[1],l=t[o],c=0;if(l>0){c=Math.round(-Math.max(Math.min(l-n[o],0),Math.min(e[a],0))/l)}return c}(a,l,c,i);s=d%u}return r({},e,{player:n,itemCount:u,activeIndex:s})}(e,t);case"setScrollTo":return function(e,t){return r({},e,{scrollTo:t.value})}(e,t);case"scrollToIndex":return function(e,t){var n=e.activeIndex,i=e.player.options[0],o=e.player.pad,a=o.contentOffset,l=o.size,c=t.animated,u=t.index;if(0===e.itemCount)return e;"function"==typeof u&&(u=u(e));if(u===n)return e;var s=function(e,t,n,i){var r,o="y"===i?["height","y","x"]:["width","x","y"],a=o[1],l=o[2];return(r={})[a]=t[a]-e*n[o[0]],r[l]=t[l],r}(u-n,a,l,i);return r({},e,{scrollTo:{offset:s,animated:c}})}(e,t);default:return e}}var me=r({itemCount:0,renderItem:function(){return null},onActiveIndexChange:function(){},scrollToIndex:null},he.defaultProps=fe);function ye(e){var o=e.itemCount,a=e.renderItem,l=e.onActiveIndexChange,s=e.scrollToIndex,d=e.children,f=i(e,["itemCount","renderItem","onActiveIndexChange","scrollToIndex","children"]),h=f.width,p=f.height,v=f.direction,m=f.scrollTo,y=t.useReducer(ve,pe),g=y[0],w=y[1],b=u(g),x=g.activeIndex,E=g.scrollTo,S=g.player,C={activeIndex:x,itemCount:g.itemCount},I=b.current;c((function(){I.activeIndex!==x&&l(C)})),t.useMemo((function(){w({type:"setScrollTo",value:m})}),[m]),t.useMemo((function(){s&&w(r({type:"scrollToIndex"},s))}),[s]),f.scrollTo=E;var T="function"==typeof d?d(C):d;return n.createElement(t.Fragment,null,n.createElement(he,f,(function(e){return S!==e&&w({type:"setPlayer",value:e}),n.createElement(re,{width:h,height:p,itemWidth:h,itemHeight:p,direction:v,itemCount:o,renderItem:a})})),T)}ye.defaultProps=me;var ge={scrollToRect:null,scrolling:!1,pad:K};function we(e,t){switch(t.type){case"setPad":return function(e,t){return r({},e,{pad:t.value})}(e,t);case"setScrollToRect":return function(e,t){return r({},e,{scrollToRect:t.value})}(e,t);case"scrollToIndex":return function(e,t){var n=t.list,i=t.index,o=void 0===i?0:i,a=n.box,l=n.body,c={x:0,y:0,width:0,height:0};a&&(c=a.layoutList[1].rect);if(l){var u=l.layoutList[o];u&&(c={x:c.x+u.rect.x,y:c.y+u.rect.y,width:u.rect.width,height:u.rect.height})}return r({},e,{scrollToRect:{rect:c,align:t.align,animated:t.animated},scrolling:!0})}(e,t);case"endScrolling":return function(e,t){return r({},e,{scrolling:!1})}(e);default:return e}}var be=r({direction:"y",spacing:0,itemCount:0,estimatedItemWidth:0,estimatedItemHeight:0,renderItem:function(){return null},renderHeader:function(){return null},renderFooter:function(){return null},scrollToIndex:null},ee.defaultProps,{directionalLockEnabled:!0});function xe(e){var o=e.direction,a=e.spacing,l=e.itemCount,s=e.estimatedItemWidth,d=e.estimatedItemHeight,f=e.renderItem,h=e.renderHeader,p=e.renderFooter,v=e.scrollToIndex,m=i(e,["direction","spacing","itemCount","estimatedItemWidth","estimatedItemHeight","renderItem","renderHeader","renderFooter","scrollToIndex","children"]),y=m.width,g=m.height,w=m.scrollToRect,b=t.useReducer(we,ge),x=b[0],E=b[1],S=u(x),C=t.useRef({}),I=x.scrollToRect,T=x.scrolling,z=x.pad,M=S.current;return c((function(){M.pad.contentSize!==z.contentSize&&T&&v&&E(r({type:"scrollToIndex"},v,{list:C.current}))})),t.useEffect((function(){M.pad.deceleration!==z.deceleration&&!z.deceleration&&T&&E({type:"endScrolling"})})),t.useMemo((function(){E({type:"setScrollToRect",value:w})}),[w]),t.useMemo((function(){v&&E(r({type:"scrollToIndex"},v,{list:C.current}))}),[v]),m.scrollToRect=I,"x"===o?m.alwaysBounceY=!1:m.alwaysBounceX=!1,n.createElement(ee,m,(function(e){z!==e&&E({type:"setPad",value:e});var t={width:y,height:g,direction:o,itemCount:3,renderItem:function(e){var t=e.itemIndex,i=e.Item;return 0===t?h(e):2===t?p(e):n.createElement(i,{forceRender:!0},n.createElement(ae,{width:y,height:g,direction:o,spacing:a,itemCount:l,estimatedItemWidth:s,estimatedItemHeight:d,renderItem:f},(function(e){C.current.body=e})))}};return n.createElement(ae,t,(function(e){C.current.box=e}))}))}xe.defaultProps=be,e.AutoResizing=le,e.Carousel=ye,e.GeneralContent=D,e.GridContent=re,e.Infinite=xe,e.ItemContent=y,e.ListContent=ae,e.Pad=ee,e.Pannable=h,e.Player=he,Object.defineProperty(e,"__esModule",{value:!0})}));

es/carousel/Carousel.js

@@ -15,4 +15,4 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
   },
-  onSlideChange: function onSlideChange() {},
-  slideTo: null
+  onActiveIndexChange: function onActiveIndexChange() {},
+  scrollToIndex: null
 }, Player.defaultProps);
@@ -23,6 +23,6 @@
       renderItem = props.renderItem,
-      onSlideChange = props.onSlideChange,
-      slideTo = props.slideTo,
+      onActiveIndexChange = props.onActiveIndexChange,
+      scrollToIndex = props.scrollToIndex,
       children = props.children,
-      playerProps = _objectWithoutPropertiesLoose(props, ["itemCount", "renderItem", "onSlideChange", "slideTo", "children"]);
+      playerProps = _objectWithoutPropertiesLoose(props, ["itemCount", "renderItem", "onActiveIndexChange", "scrollToIndex", "children"]);
 
@@ -41,49 +41,46 @@ var width = playerProps.width,
       itemCount = state.itemCount,
-      scrollTo = state.scrollTo;
+      scrollTo = state.scrollTo,
+      player = state.player;
+  var output = {
+    activeIndex: activeIndex,
+    itemCount: itemCount
+  };
   var prevState = prevStateRef.current;
   useIsomorphicLayoutEffect(function () {
     if (prevState.activeIndex !== activeIndex) {
-      onSlideChange({
-        activeIndex: activeIndex,
-        itemCount: itemCount
-      });
+      onActiveIndexChange(output);
     }
   });
   useMemo(function () {
-    if (playerScrollTo) {
-      dispatch({
-        type: 'setScrollTo',
-        value: playerScrollTo
-      });
-    }
+    dispatch({
+      type: 'setScrollTo',
+      value: playerScrollTo
+    });
   }, [playerScrollTo]);
   useMemo(function () {
-    if (slideTo) {
+    if (scrollToIndex) {
       dispatch(_extends({
-        type: 'slideTo'
-      }, slideTo));
+        type: 'scrollToIndex'
+      }, scrollToIndex));
     }
-  }, [slideTo]);
-  var gridProps = {
-    width: width,
-    height: height,
-    itemWidth: width,
-    itemHeight: height,
-    direction: direction,
-    itemCount: gridItemCount,
-    renderItem: renderItem
-  };
+  }, [scrollToIndex]);
   playerProps.scrollTo = scrollTo;
-  var element = typeof children === 'function' ? children({
-    activeIndex: activeIndex,
-    itemCount: itemCount
-  }) : children;
-  return React.createElement(Fragment, null, React.createElement(Player, playerProps, function (player) {
-    if (state.player !== player) {
+  var element = typeof children === 'function' ? children(output) : children;
+  return React.createElement(Fragment, null, React.createElement(Player, playerProps, function (nextPlayer) {
+    if (player !== nextPlayer) {
       dispatch({
         type: 'setPlayer',
-        value: player
+        value: nextPlayer
       });
     }
 
+    var gridProps = {
+      width: width,
+      height: height,
+      itemWidth: width,
+      itemHeight: height,
+      direction: direction,
+      itemCount: gridItemCount,
+      renderItem: renderItem
+    };
     return React.createElement(GridContent, gridProps);
@@ -90,0 +87,0 @@ }), element);

es/carousel/carouselReducer.js

@@ -17,4 +17,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-    case 'slideTo':
-      return slideToReducer(state, action);
+    case 'scrollToIndex':
+      return scrollToIndexReducer(state, action);
 
@@ -56,3 +56,3 @@ default:
 
-function slideToReducer(state, action) {
+function scrollToIndexReducer(state, action) {
   var activeIndex = state.activeIndex,
@@ -73,6 +73,3 @@ itemCount = state.itemCount;
   if (typeof index === 'function') {
-    index = index({
-      activeIndex: activeIndex,
-      itemCount: itemCount
-    });
+    index = index(state);
   }
@@ -79,0 +76,0 @@

es/carousel/Player.js

@@ -37,6 +37,4 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
       loopOffset = state.loopOffset,
-      scrollTo = state.scrollTo;
-  var _state$pad = state.pad,
-      drag = _state$pad.drag,
-      deceleration = _state$pad.deceleration;
+      scrollTo = state.scrollTo,
+      pad = state.pad;
   var onPadMouseEnter = useCallback(function (evt) {
@@ -63,3 +61,3 @@ dispatch({
   useEffect(function () {
-    if (!autoplayEnabled || mouseEntered || drag || deceleration) {
+    if (!autoplayEnabled || mouseEntered || pad.drag || pad.deceleration) {
       return;
@@ -76,3 +74,3 @@ }
     };
-  }, [autoplayEnabled, autoplayInterval, mouseEntered, drag, deceleration]);
+  }, [autoplayEnabled, autoplayInterval, mouseEntered, pad.drag, pad.deceleration]);
   useMemo(function () {
@@ -85,9 +83,8 @@ dispatch({
   useMemo(function () {
-    if (padScrollTo) {
-      dispatch({
-        type: 'setScrollTo',
-        value: padScrollTo
-      });
-    }
+    dispatch({
+      type: 'setScrollTo',
+      value: padScrollTo
+    });
   }, [padScrollTo]);
+  padProps.scrollTo = scrollTo;
 
@@ -105,8 +102,7 @@ if (direction === 'x') {
 
-  padProps.scrollTo = scrollTo;
-  return React.createElement(Pad, padProps, function (pad) {
-    if (state.pad !== pad) {
+  return React.createElement(Pad, padProps, function (nextPad) {
+    if (pad !== nextPad) {
       dispatch({
         type: 'setPad',
-        value: pad
+        value: nextPad
       });
@@ -113,0 +109,0 @@ }

es/GridContent.js

@@ -74,3 +74,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     var element = renderItem(attrs);
-    var key = String(itemIndex);
+    var key = 'GridContent_' + itemIndex;
     var itemStyle = {
@@ -77,0 +77,0 @@ position: 'absolute',

es/index.js

@@ -9,2 +9,3 @@ import Pad from './Pad';
 export * from './carousel';
+export * from './infinite';
 export { Pad, Pannable, GeneralContent, GridContent, ListContent, ItemContent, AutoResizing };

es/ListContent.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { isValidElement, cloneElement, useState, useContext, useMemo, useCallback } from 'react';
+import React, { isValidElement, cloneElement, useState, useContext, useMemo } from 'react';
 import PadContext from './PadContext';
@@ -64,11 +64,2 @@ import ItemContent from './ItemContent';
   var nextItemHashList = [];
-  var resizeContent = useCallback(function (itemHash) {
-    return function (itemSize) {
-      setItemSizeDict(function (itemSizeDict) {
-        var _extends2;
-
-        return isEqualToSize(itemSizeDict[itemHash], itemSize) ? itemSizeDict : _extends({}, itemSizeDict, (_extends2 = {}, _extends2[itemHash] = itemSize, _extends2));
-      });
-    };
-  }, []);
   useIsomorphicLayoutEffect(function () {
@@ -86,2 +77,3 @@ context.resizeContent(size);
         itemIndex = attrs.itemIndex,
+        itemSize = attrs.itemSize,
         visibleRect = attrs.visibleRect,
@@ -92,3 +84,3 @@ needsRender = attrs.needsRender,
     var element = renderItem(attrs);
-    var key = String(itemIndex);
+    var key = "ListContent_" + itemIndex;
     var hash;
@@ -123,3 +115,2 @@ var itemStyle = {
 
-    var itemSize = itemSizeDict[hash];
     var skipRender = !needsRender && !forceRender;
@@ -140,4 +131,3 @@
     if (itemSize) {
-      sizeProps.width = itemSize.width;
-      sizeProps.height = itemSize.height;
+      Object.assign(sizeProps, itemSize);
     } else {
@@ -171,7 +161,17 @@ if (typeof fixed.width === 'number') {
     } else {
-      element = React.createElement(ItemContent, _extends({
+      element = React.createElement(ItemContent, _extends({}, sizeProps, {
         style: itemStyle
-      }, sizeProps), element);
+      }), element);
     }
 
+    function resizeContent(itemHash) {
+      return function (itemSize) {
+        setItemSizeDict(function (itemSizeDict) {
+          var _extends2;
+
+          return isEqualToSize(itemSizeDict[itemHash], itemSize) ? itemSizeDict : _extends({}, itemSizeDict, (_extends2 = {}, _extends2[itemHash] = itemSize, _extends2));
+        });
+      };
+    }
+
     return React.createElement(PadContext.Provider, {
@@ -208,3 +208,3 @@ key: key,
 
-  if (itemHashList.join() !== nextItemHashList.join()) {
+  if (!isEqualToArray(itemHashList, nextItemHashList)) {
     setItemHashList(nextItemHashList);
@@ -221,3 +221,3 @@ }
 ListContent.defaultProps = defaultListContentProps;
-ListContent.PadContext = true;
+ListContent.PadContent = true;
 export default ListContent;
@@ -230,3 +230,5 @@
       spacing = props.spacing,
-      itemCount = props.itemCount;
+      itemCount = props.itemCount,
+      estimatedItemWidth = props.estimatedItemWidth,
+      estimatedItemHeight = props.estimatedItemHeight;
   var size = {
@@ -236,6 +238,2 @@ width: props.width,
   };
-  var estimatedItemSize = {
-    width: props.estimatedItemWidth,
-    height: props.estimatedItemHeight
-  };
 
@@ -258,13 +256,24 @@ var _ref = direction === 'x' ? ['y', 'x', 'height', 'width'] : ['x', 'y', 'width', 'height'],
   for (var itemIndex = 0; itemIndex < itemCount; itemIndex++) {
-    var _ref2, _rect;
+    var _rect;
 
-    var itemHash = itemHashList[itemIndex];
-    var itemSize = itemSizeDict[itemHash] || (_ref2 = {}, _ref2[width] = fixed[width] === undefined ? estimatedItemSize[width] : fixed[width], _ref2[height] = estimatedItemSize[height], _ref2);
+    var itemHash = itemHashList[itemIndex] || null;
+    var itemSize = itemSizeDict[itemHash] || null;
+    var rect = (_rect = {}, _rect[x] = 0, _rect[y] = sizeHeight, _rect);
+
+    if (itemSize) {
+      Object.assign(rect, itemSize);
+    } else {
+      rect[width] = fixed[width] !== undefined ? fixed[width] : typeof estimatedItemWidth === 'function' ? estimatedItemWidth(itemIndex) : estimatedItemWidth;
+      rect[height] = typeof estimatedItemHeight === 'function' ? estimatedItemHeight(itemIndex) : estimatedItemHeight;
+    }
+
     layoutList.push({
-      rect: (_rect = {}, _rect[x] = 0, _rect[y] = sizeHeight, _rect[width] = itemSize[width], _rect[height] = itemSize[height], _rect),
-      itemIndex: itemIndex
+      rect: rect,
+      itemIndex: itemIndex,
+      itemHash: itemHash,
+      itemSize: itemSize
     });
 
-    if (itemSize[height] > 0) {
-      sizeHeight += itemSize[height];
+    if (rect[height] > 0) {
+      sizeHeight += rect[height];
 
@@ -276,4 +285,4 @@ if (itemIndex < itemCount - 1) {
 
-    if (sizeWidth < itemSize[width]) {
-      sizeWidth = itemSize[width];
+    if (sizeWidth < rect[width]) {
+      sizeWidth = rect[width];
     }
@@ -287,2 +296,24 @@ }
   };
+}
+
+function isEqualToArray(a1, a2) {
+  if (a1 === a2) {
+    return true;
+  }
+
+  if (!a1 || !a2) {
+    return false;
+  }
+
+  if (a1.length !== a2.length) {
+    return false;
+  }
+
+  for (var idx = 0; idx < a1.length; idx++) {
+    if (a1[idx] !== a2[idx]) {
+      return false;
+    }
+  }
+
+  return true;
 }

es/Pad.js

 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { isValidElement, cloneElement, useMemo, useCallback, useReducer } from 'react';
-import { reducer, initialState } from './padReducer';
 import Pannable from './Pannable';
@@ -12,2 +11,4 @@ import PadContext from './PadContext';
 import { requestAnimationFrame, cancelAnimationFrame } from './utils/animationFrame';
+import { isEqualToSize } from './utils/geometry';
+import { reducer, initialState } from './padReducer';
 
@@ -62,10 +63,21 @@ var defaultPadProps = _extends({
       drag = state.drag,
-      deceleration = state.deceleration;
+      deceleration = state.deceleration,
+      pannable = state.pannable;
+  var output = {
+    size: size,
+    contentSize: contentSize,
+    contentOffset: contentOffset,
+    contentVelocity: contentVelocity,
+    dragging: !!drag,
+    decelerating: !!deceleration
+  };
   var prevState = prevStateRef.current;
-  var resizeContent = useCallback(function (contentSize) {
-    dispatch({
-      type: 'setContentSize',
-      value: contentSize
-    });
-  }, []);
+  var resizeContent = useCallback(function (nextContentSize) {
+    if (!isEqualToSize(contentSize, nextContentSize)) {
+      dispatch({
+        type: 'setContentSize',
+        value: nextContentSize
+      });
+    }
+  }, [contentSize]);
   var shouldPannableStart = useCallback(function (evt) {
@@ -79,4 +91,4 @@ if (directionalLockEnabled && !shouldDragStart(evt.velocity, size, contentSize)) {
   useIsomorphicLayoutEffect(function () {
-    if (prevState.pannable.translation !== state.pannable.translation) {
-      if (state.pannable.translation) {
+    if (prevState.pannable.translation !== pannable.translation) {
+      if (pannable.translation) {
         if (prevState.pannable.translation) {
@@ -104,11 +116,2 @@ dispatch({
 
-    var output = {
-      size: size,
-      contentSize: contentSize,
-      contentOffset: contentOffset,
-      contentVelocity: contentVelocity,
-      dragging: !!drag,
-      decelerating: !!deceleration
-    };
-
     if (prevState.contentSize !== contentSize) {
@@ -206,7 +209,7 @@ onContentResize(contentSize);
     }
-  }, React.createElement(Pannable, pannableProps, function (pannable) {
-    if (state.pannable !== pannable) {
+  }, React.createElement(Pannable, pannableProps, function (nextPannable) {
+    if (pannable !== nextPannable) {
       dispatch({
         type: 'setPannable',
-        value: pannable
+        value: nextPannable
       });
@@ -213,0 +216,0 @@ }

es/padReducer.js

@@ -100,3 +100,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
         drag: null,
-        deceleration: createDeceleration(contentOffset, nextContentVelocity, decelerationEndOffset, decelerationRate)
+        deceleration: createDeceleration(decelerationEndOffset, decelerationRate, contentOffset, nextContentVelocity)
       });
@@ -115,3 +115,3 @@ }
         drag: null,
-        deceleration: createDeceleration(contentOffset, contentVelocity, _decelerationEndOffset, decelerationRate)
+        deceleration: createDeceleration(_decelerationEndOffset, decelerationRate, contentOffset, contentVelocity)
       });
@@ -228,3 +228,3 @@ }
     drag: null,
-    deceleration: createDeceleration(contentOffset, nextContentVelocity, decelerationEndOffset, decelerationRate)
+    deceleration: createDeceleration(decelerationEndOffset, decelerationRate, contentOffset, nextContentVelocity)
   });
@@ -247,3 +247,3 @@ }
     drag: null,
-    deceleration: createDeceleration(contentOffset, contentVelocity, decelerationEndOffset, decelerationRate)
+    deceleration: createDeceleration(decelerationEndOffset, decelerationRate, contentOffset, contentVelocity)
   });
@@ -260,31 +260,12 @@ }
 
-  if (deceleration.startTime + deceleration.duration <= moveTime) {
-    return _extends({}, state, {
-      contentOffset: deceleration.endOffset,
-      contentVelocity: {
-        x: 0,
-        y: 0
-      },
-      drag: null,
-      deceleration: null
-    });
-  }
-
   var _calculateDeceleratio = calculateDeceleration(deceleration, moveTime),
-      xOffset = _calculateDeceleratio.xOffset,
-      yOffset = _calculateDeceleratio.yOffset,
-      xVelocity = _calculateDeceleratio.xVelocity,
-      yVelocity = _calculateDeceleratio.yVelocity;
+      contentOffset = _calculateDeceleratio.offset,
+      contentVelocity = _calculateDeceleratio.velocity,
+      didEnd = _calculateDeceleratio.didEnd;
 
   return _extends({}, state, {
-    contentOffset: {
-      x: xOffset,
-      y: yOffset
-    },
-    contentVelocity: {
-      x: xVelocity,
-      y: yVelocity
-    },
+    contentOffset: contentOffset,
+    contentVelocity: contentVelocity,
     drag: null,
-    deceleration: deceleration
+    deceleration: didEnd ? null : deceleration
   });
@@ -297,8 +278,7 @@ }
       contentVelocity = state.contentVelocity,
-      drag = state.drag,
-      deceleration = state.deceleration,
       _state$options6 = state.options,
       pagingEnabled = _state$options6[0];
-  var point = action.point,
-      animated = action.animated;
+  var point = action.point;
+  var drag = state.drag,
+      deceleration = state.deceleration;
   var _action$offset = action.offset,
@@ -308,3 +288,4 @@ offset = _action$offset === void 0 ? {
     y: 0
-  } : _action$offset;
+  } : _action$offset,
+      animated = action.animated;
 
@@ -318,13 +299,13 @@ if (point) {
 
-  if (drag || !animated) {
-    if (offset.x === contentOffset.x && offset.y === contentOffset.y) {
-      return state;
-    }
+  if (offset.x === contentOffset.x && offset.y === contentOffset.y) {
+    return state;
+  }
 
-    var nextState = _extends({}, state, {
-      contentOffset: offset
-    });
+  if (drag) {
+    animated = false;
+  }
 
+  if (!animated) {
     if (drag) {
-      nextState.drag = _extends({}, drag, {
+      drag = _extends({}, drag, {
         startOffset: {
@@ -335,12 +316,18 @@ x: drag.startOffset.x + offset.x - contentOffset.x,
       });
+    } else {
+      if (deceleration) {
+        deceleration = createDeceleration({
+          x: deceleration.endOffset.x + offset.x - contentOffset.x,
+          y: deceleration.endOffset.y + offset.y - contentOffset.y
+        }, deceleration.rate, offset, contentVelocity);
+      } else {
+        deceleration = createDeceleration(offset);
+      }
     }
 
-    if (deceleration) {
-      nextState.deceleration = createDeceleration(offset, contentVelocity, {
-        x: deceleration.endOffset.x + offset.x - contentOffset.x,
-        y: deceleration.endOffset.y + offset.y - contentOffset.y
-      }, deceleration.rate);
-    }
-
-    return nextState;
+    return _extends({}, state, {
+      contentOffset: offset,
+      drag: drag,
+      deceleration: deceleration
+    });
   }
@@ -353,4 +340,3 @@
   return _extends({}, state, {
-    drag: null,
-    deceleration: createDeceleration(contentOffset, contentVelocity, decelerationEndOffset, DECELERATION_RATE_STRONG)
+    deceleration: createDeceleration(decelerationEndOffset, DECELERATION_RATE_STRONG, contentOffset, contentVelocity)
   });
@@ -357,0 +343,0 @@ }

es/Pannable.js

@@ -45,2 +45,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
       interval = state.interval;
+  var output = {
+    target: target,
+    translation: translation,
+    velocity: velocity,
+    interval: interval
+  };
   var prevState = prevStateRef.current;
@@ -176,9 +182,2 @@ useIsomorphicLayoutEffect(function () {
   useIsomorphicLayoutEffect(function () {
-    var output = {
-      target: target,
-      translation: translation,
-      velocity: velocity,
-      interval: interval
-    };
-
     if (prevState.translation !== translation) {
@@ -185,0 +184,0 @@ if (translation) {

es/utils/geometry.js

@@ -6,7 +6,11 @@ export function isEqualToSize(s1, s2) {
 
-  if (s1 && s2 && s1.width === s2.width && s1.height === s2.height) {
-    return true;
+  if (!s1 || !s2) {
+    return false;
   }
 
-  return false;
+  if (s1.width !== s2.width || s1.height !== s2.height) {
+    return false;
+  }
+
+  return true;
 }

es/utils/motion.js

@@ -171,2 +171,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 export function calculateDeceleration(deceleration, moveTime, name) {
+  var points = deceleration.points,
+      duration = deceleration.duration,
+      startTime = deceleration.startTime,
+      endOffset = deceleration.endOffset;
+  var t = 1;
+
+  if (duration > 0) {
+    t = (moveTime - startTime) / duration;
+  }
+
   if (name) {
@@ -178,6 +188,2 @@ var _ref7;
 
-    var points = deceleration.points,
-        duration = deceleration.duration,
-        startTime = deceleration.startTime;
-    var t = Math.max(0, Math.min((moveTime - startTime) / duration, 1));
     var _points$x = points[x],
@@ -193,5 +199,44 @@ p0 = _points$x[0],
 
-  return _extends({}, calculateDeceleration(deceleration, moveTime, 'x'), {}, calculateDeceleration(deceleration, moveTime, 'y'));
+  if (t < 0 || 1 <= t) {
+    return {
+      offset: endOffset,
+      velocity: {
+        x: 0,
+        y: 0
+      },
+      didEnd: true
+    };
+  }
+
+  var _calculateDeceleratio = _extends({}, calculateDeceleration(deceleration, moveTime, 'x'), {}, calculateDeceleration(deceleration, moveTime, 'y')),
+      xOffset = _calculateDeceleratio.xOffset,
+      yOffset = _calculateDeceleratio.yOffset,
+      xVelocity = _calculateDeceleratio.xVelocity,
+      yVelocity = _calculateDeceleratio.yVelocity;
+
+  return {
+    offset: {
+      x: xOffset,
+      y: yOffset
+    },
+    velocity: {
+      x: xVelocity,
+      y: yVelocity
+    },
+    didEnd: false
+  };
 }
-export function createDeceleration(startOffset, startVelocity, endOffset, rate) {
+export function createDeceleration(endOffset, rate, startOffset, startVelocity) {
+  var startTime = new Date().getTime();
+  var duration = 0;
+
+  if (!rate) {
+    return {
+      endOffset: endOffset,
+      rate: rate,
+      duration: duration,
+      startTime: startTime
+    };
+  }
+
   var s = {
@@ -203,3 +248,2 @@ x: endOffset.x - startOffset.x,
   var vm;
-  var duration;
 
@@ -222,6 +266,2 @@ if (sm) {
 
-  if (duration <= 0) {
-    return null;
-  }
-
   var points = {
@@ -232,8 +272,8 @@ x: [startOffset.x, startOffset.x + startVelocity.x * (duration / 3.0), endOffset.x, endOffset.x],
   return {
-    points: points,
+    endOffset: endOffset,
+    rate: rate,
     duration: duration,
-    startTime: new Date().getTime(),
-    endOffset: endOffset,
-    rate: rate
+    startTime: startTime,
+    points: points
   };
 }

lib/carousel/Carousel.js

@@ -31,4 +31,4 @@ "use strict";
   },
-  onSlideChange: function onSlideChange() {},
-  slideTo: null
+  onActiveIndexChange: function onActiveIndexChange() {},
+  scrollToIndex: null
 }, _Player["default"].defaultProps);
@@ -39,6 +39,6 @@
       renderItem = props.renderItem,
-      onSlideChange = props.onSlideChange,
-      slideTo = props.slideTo,
+      onActiveIndexChange = props.onActiveIndexChange,
+      scrollToIndex = props.scrollToIndex,
       children = props.children,
-      playerProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["itemCount", "renderItem", "onSlideChange", "slideTo", "children"]);
+      playerProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["itemCount", "renderItem", "onActiveIndexChange", "scrollToIndex", "children"]);
   var width = playerProps.width,
@@ -56,49 +56,46 @@ height = playerProps.height,
       itemCount = state.itemCount,
-      scrollTo = state.scrollTo;
+      scrollTo = state.scrollTo,
+      player = state.player;
+  var output = {
+    activeIndex: activeIndex,
+    itemCount: itemCount
+  };
   var prevState = prevStateRef.current;
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
     if (prevState.activeIndex !== activeIndex) {
-      onSlideChange({
-        activeIndex: activeIndex,
-        itemCount: itemCount
-      });
+      onActiveIndexChange(output);
     }
   });
   (0, _react.useMemo)(function () {
-    if (playerScrollTo) {
-      dispatch({
-        type: 'setScrollTo',
-        value: playerScrollTo
-      });
-    }
+    dispatch({
+      type: 'setScrollTo',
+      value: playerScrollTo
+    });
   }, [playerScrollTo]);
   (0, _react.useMemo)(function () {
-    if (slideTo) {
+    if (scrollToIndex) {
       dispatch((0, _extends2["default"])({
-        type: 'slideTo'
-      }, slideTo));
+        type: 'scrollToIndex'
+      }, scrollToIndex));
     }
-  }, [slideTo]);
-  var gridProps = {
-    width: width,
-    height: height,
-    itemWidth: width,
-    itemHeight: height,
-    direction: direction,
-    itemCount: gridItemCount,
-    renderItem: renderItem
-  };
+  }, [scrollToIndex]);
   playerProps.scrollTo = scrollTo;
-  var element = typeof children === 'function' ? children({
-    activeIndex: activeIndex,
-    itemCount: itemCount
-  }) : children;
-  return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(_Player["default"], playerProps, function (player) {
-    if (state.player !== player) {
+  var element = typeof children === 'function' ? children(output) : children;
+  return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(_Player["default"], playerProps, function (nextPlayer) {
+    if (player !== nextPlayer) {
       dispatch({
         type: 'setPlayer',
-        value: player
+        value: nextPlayer
       });
     }
 
+    var gridProps = {
+      width: width,
+      height: height,
+      itemWidth: width,
+      itemHeight: height,
+      direction: direction,
+      itemCount: gridItemCount,
+      renderItem: renderItem
+    };
     return _react["default"].createElement(_GridContent["default"], gridProps);
@@ -105,0 +102,0 @@ }), element);

lib/carousel/carouselReducer.js

@@ -29,4 +29,4 @@ "use strict";
 
-    case 'slideTo':
-      return slideToReducer(state, action);
+    case 'scrollToIndex':
+      return scrollToIndexReducer(state, action);
 
@@ -68,3 +68,3 @@ default:
 
-function slideToReducer(state, action) {
+function scrollToIndexReducer(state, action) {
   var activeIndex = state.activeIndex,
@@ -85,6 +85,3 @@ itemCount = state.itemCount;
   if (typeof index === 'function') {
-    index = index({
-      activeIndex: activeIndex,
-      itemCount: itemCount
-    });
+    index = index(state);
   }
@@ -91,0 +88,0 @@

lib/carousel/Player.js

@@ -50,6 +50,4 @@ "use strict";
       loopOffset = state.loopOffset,
-      scrollTo = state.scrollTo;
-  var _state$pad = state.pad,
-      drag = _state$pad.drag,
-      deceleration = _state$pad.deceleration;
+      scrollTo = state.scrollTo,
+      pad = state.pad;
   var onPadMouseEnter = (0, _react.useCallback)(function (evt) {
@@ -76,3 +74,3 @@ dispatch({
   (0, _react.useEffect)(function () {
-    if (!autoplayEnabled || mouseEntered || drag || deceleration) {
+    if (!autoplayEnabled || mouseEntered || pad.drag || pad.deceleration) {
       return;
@@ -89,3 +87,3 @@ }
     };
-  }, [autoplayEnabled, autoplayInterval, mouseEntered, drag, deceleration]);
+  }, [autoplayEnabled, autoplayInterval, mouseEntered, pad.drag, pad.deceleration]);
   (0, _react.useMemo)(function () {
@@ -98,9 +96,8 @@ dispatch({
   (0, _react.useMemo)(function () {
-    if (padScrollTo) {
-      dispatch({
-        type: 'setScrollTo',
-        value: padScrollTo
-      });
-    }
+    dispatch({
+      type: 'setScrollTo',
+      value: padScrollTo
+    });
   }, [padScrollTo]);
+  padProps.scrollTo = scrollTo;
 
@@ -118,8 +115,7 @@ if (direction === 'x') {
 
-  padProps.scrollTo = scrollTo;
-  return _react["default"].createElement(_Pad["default"], padProps, function (pad) {
-    if (state.pad !== pad) {
+  return _react["default"].createElement(_Pad["default"], padProps, function (nextPad) {
+    if (pad !== nextPad) {
       dispatch({
         type: 'setPad',
-        value: pad
+        value: nextPad
       });
@@ -126,0 +122,0 @@ }

lib/GridContent.js

@@ -89,3 +89,3 @@ "use strict";
     var element = renderItem(attrs);
-    var key = String(itemIndex);
+    var key = 'GridContent_' + itemIndex;
     var itemStyle = {
@@ -92,0 +92,0 @@ position: 'absolute',

lib/index.js

@@ -50,2 +50,10 @@ "use strict";
   exports[key] = _carousel[key];
+});
+
+var _infinite = require("./infinite");
+
+Object.keys(_infinite).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  exports[key] = _infinite[key];
 });

lib/ListContent.js

@@ -81,11 +81,2 @@ "use strict";
   var nextItemHashList = [];
-  var resizeContent = (0, _react.useCallback)(function (itemHash) {
-    return function (itemSize) {
-      setItemSizeDict(function (itemSizeDict) {
-        var _extends2;
-
-        return (0, _geometry.isEqualToSize)(itemSizeDict[itemHash], itemSize) ? itemSizeDict : (0, _extends3["default"])({}, itemSizeDict, (_extends2 = {}, _extends2[itemHash] = itemSize, _extends2));
-      });
-    };
-  }, []);
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
@@ -103,2 +94,3 @@ context.resizeContent(size);
         itemIndex = attrs.itemIndex,
+        itemSize = attrs.itemSize,
         visibleRect = attrs.visibleRect,
@@ -109,3 +101,3 @@ needsRender = attrs.needsRender,
     var element = renderItem(attrs);
-    var key = String(itemIndex);
+    var key = "ListContent_" + itemIndex;
     var hash;
@@ -140,3 +132,2 @@ var itemStyle = {
 
-    var itemSize = itemSizeDict[hash];
     var skipRender = !needsRender && !forceRender;
@@ -157,4 +148,3 @@
     if (itemSize) {
-      sizeProps.width = itemSize.width;
-      sizeProps.height = itemSize.height;
+      Object.assign(sizeProps, itemSize);
     } else {
@@ -188,7 +178,17 @@ if (typeof fixed.width === 'number') {
     } else {
-      element = _react["default"].createElement(_ItemContent["default"], (0, _extends3["default"])({
+      element = _react["default"].createElement(_ItemContent["default"], (0, _extends3["default"])({}, sizeProps, {
         style: itemStyle
-      }, sizeProps), element);
+      }), element);
     }
 
+    function resizeContent(itemHash) {
+      return function (itemSize) {
+        setItemSizeDict(function (itemSizeDict) {
+          var _extends2;
+
+          return (0, _geometry.isEqualToSize)(itemSizeDict[itemHash], itemSize) ? itemSizeDict : (0, _extends3["default"])({}, itemSizeDict, (_extends2 = {}, _extends2[itemHash] = itemSize, _extends2));
+        });
+      };
+    }
+
     return _react["default"].createElement(_PadContext["default"].Provider, {
@@ -225,3 +225,3 @@ key: key,
 
-  if (itemHashList.join() !== nextItemHashList.join()) {
+  if (!isEqualToArray(itemHashList, nextItemHashList)) {
     setItemHashList(nextItemHashList);
@@ -238,3 +238,3 @@ }
 ListContent.defaultProps = defaultListContentProps;
-ListContent.PadContext = true;
+ListContent.PadContent = true;
 var _default = ListContent;
@@ -248,3 +248,5 @@ exports["default"] = _default;
       spacing = props.spacing,
-      itemCount = props.itemCount;
+      itemCount = props.itemCount,
+      estimatedItemWidth = props.estimatedItemWidth,
+      estimatedItemHeight = props.estimatedItemHeight;
   var size = {
@@ -254,6 +256,2 @@ width: props.width,
   };
-  var estimatedItemSize = {
-    width: props.estimatedItemWidth,
-    height: props.estimatedItemHeight
-  };
 
@@ -276,13 +274,24 @@ var _ref = direction === 'x' ? ['y', 'x', 'height', 'width'] : ['x', 'y', 'width', 'height'],
   for (var itemIndex = 0; itemIndex < itemCount; itemIndex++) {
-    var _ref2, _rect;
+    var _rect;
 
-    var itemHash = itemHashList[itemIndex];
-    var itemSize = itemSizeDict[itemHash] || (_ref2 = {}, _ref2[width] = fixed[width] === undefined ? estimatedItemSize[width] : fixed[width], _ref2[height] = estimatedItemSize[height], _ref2);
+    var itemHash = itemHashList[itemIndex] || null;
+    var itemSize = itemSizeDict[itemHash] || null;
+    var rect = (_rect = {}, _rect[x] = 0, _rect[y] = sizeHeight, _rect);
+
+    if (itemSize) {
+      Object.assign(rect, itemSize);
+    } else {
+      rect[width] = fixed[width] !== undefined ? fixed[width] : typeof estimatedItemWidth === 'function' ? estimatedItemWidth(itemIndex) : estimatedItemWidth;
+      rect[height] = typeof estimatedItemHeight === 'function' ? estimatedItemHeight(itemIndex) : estimatedItemHeight;
+    }
+
     layoutList.push({
-      rect: (_rect = {}, _rect[x] = 0, _rect[y] = sizeHeight, _rect[width] = itemSize[width], _rect[height] = itemSize[height], _rect),
-      itemIndex: itemIndex
+      rect: rect,
+      itemIndex: itemIndex,
+      itemHash: itemHash,
+      itemSize: itemSize
     });
 
-    if (itemSize[height] > 0) {
-      sizeHeight += itemSize[height];
+    if (rect[height] > 0) {
+      sizeHeight += rect[height];
 
@@ -294,4 +303,4 @@ if (itemIndex < itemCount - 1) {
 
-    if (sizeWidth < itemSize[width]) {
-      sizeWidth = itemSize[width];
+    if (sizeWidth < rect[width]) {
+      sizeWidth = rect[width];
     }
@@ -305,2 +314,24 @@ }
   };
+}
+
+function isEqualToArray(a1, a2) {
+  if (a1 === a2) {
+    return true;
+  }
+
+  if (!a1 || !a2) {
+    return false;
+  }
+
+  if (a1.length !== a2.length) {
+    return false;
+  }
+
+  for (var idx = 0; idx < a1.length; idx++) {
+    if (a1[idx] !== a2[idx]) {
+      return false;
+    }
+  }
+
+  return true;
 }

lib/Pad.js

@@ -16,4 +16,2 @@ "use strict";
 
-var _padReducer = require("./padReducer");
-
 var _Pannable = _interopRequireDefault(require("./Pannable"));
@@ -33,2 +31,6 @@
 
+var _geometry = require("./utils/geometry");
+
+var _padReducer = require("./padReducer");
+
 var defaultPadProps = (0, _extends2["default"])({
@@ -81,10 +83,21 @@ width: 0,
       drag = state.drag,
-      deceleration = state.deceleration;
+      deceleration = state.deceleration,
+      pannable = state.pannable;
+  var output = {
+    size: size,
+    contentSize: contentSize,
+    contentOffset: contentOffset,
+    contentVelocity: contentVelocity,
+    dragging: !!drag,
+    decelerating: !!deceleration
+  };
   var prevState = prevStateRef.current;
-  var resizeContent = (0, _react.useCallback)(function (contentSize) {
-    dispatch({
-      type: 'setContentSize',
-      value: contentSize
-    });
-  }, []);
+  var resizeContent = (0, _react.useCallback)(function (nextContentSize) {
+    if (!(0, _geometry.isEqualToSize)(contentSize, nextContentSize)) {
+      dispatch({
+        type: 'setContentSize',
+        value: nextContentSize
+      });
+    }
+  }, [contentSize]);
   var shouldPannableStart = (0, _react.useCallback)(function (evt) {
@@ -98,4 +111,4 @@ if (directionalLockEnabled && !shouldDragStart(evt.velocity, size, contentSize)) {
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
-    if (prevState.pannable.translation !== state.pannable.translation) {
-      if (state.pannable.translation) {
+    if (prevState.pannable.translation !== pannable.translation) {
+      if (pannable.translation) {
         if (prevState.pannable.translation) {
@@ -123,11 +136,2 @@ dispatch({
 
-    var output = {
-      size: size,
-      contentSize: contentSize,
-      contentOffset: contentOffset,
-      contentVelocity: contentVelocity,
-      dragging: !!drag,
-      decelerating: !!deceleration
-    };
-
     if (prevState.contentSize !== contentSize) {
@@ -225,7 +229,7 @@ onContentResize(contentSize);
     }
-  }, _react["default"].createElement(_Pannable["default"], pannableProps, function (pannable) {
-    if (state.pannable !== pannable) {
+  }, _react["default"].createElement(_Pannable["default"], pannableProps, function (nextPannable) {
+    if (pannable !== nextPannable) {
       dispatch({
         type: 'setPannable',
-        value: pannable
+        value: nextPannable
       });
@@ -232,0 +236,0 @@ }

lib/padReducer.js

@@ -113,3 +113,3 @@ "use strict";
         drag: null,
-        deceleration: (0, _motion.createDeceleration)(contentOffset, nextContentVelocity, decelerationEndOffset, decelerationRate)
+        deceleration: (0, _motion.createDeceleration)(decelerationEndOffset, decelerationRate, contentOffset, nextContentVelocity)
       });
@@ -128,3 +128,3 @@ }
         drag: null,
-        deceleration: (0, _motion.createDeceleration)(contentOffset, contentVelocity, _decelerationEndOffset, decelerationRate)
+        deceleration: (0, _motion.createDeceleration)(_decelerationEndOffset, decelerationRate, contentOffset, contentVelocity)
       });
@@ -241,3 +241,3 @@ }
     drag: null,
-    deceleration: (0, _motion.createDeceleration)(contentOffset, nextContentVelocity, decelerationEndOffset, decelerationRate)
+    deceleration: (0, _motion.createDeceleration)(decelerationEndOffset, decelerationRate, contentOffset, nextContentVelocity)
   });
@@ -260,3 +260,3 @@ }
     drag: null,
-    deceleration: (0, _motion.createDeceleration)(contentOffset, contentVelocity, decelerationEndOffset, decelerationRate)
+    deceleration: (0, _motion.createDeceleration)(decelerationEndOffset, decelerationRate, contentOffset, contentVelocity)
   });
@@ -273,31 +273,12 @@ }
 
-  if (deceleration.startTime + deceleration.duration <= moveTime) {
-    return (0, _extends2["default"])({}, state, {
-      contentOffset: deceleration.endOffset,
-      contentVelocity: {
-        x: 0,
-        y: 0
-      },
-      drag: null,
-      deceleration: null
-    });
-  }
-
   var _calculateDeceleratio = (0, _motion.calculateDeceleration)(deceleration, moveTime),
-      xOffset = _calculateDeceleratio.xOffset,
-      yOffset = _calculateDeceleratio.yOffset,
-      xVelocity = _calculateDeceleratio.xVelocity,
-      yVelocity = _calculateDeceleratio.yVelocity;
+      contentOffset = _calculateDeceleratio.offset,
+      contentVelocity = _calculateDeceleratio.velocity,
+      didEnd = _calculateDeceleratio.didEnd;
 
   return (0, _extends2["default"])({}, state, {
-    contentOffset: {
-      x: xOffset,
-      y: yOffset
-    },
-    contentVelocity: {
-      x: xVelocity,
-      y: yVelocity
-    },
+    contentOffset: contentOffset,
+    contentVelocity: contentVelocity,
     drag: null,
-    deceleration: deceleration
+    deceleration: didEnd ? null : deceleration
   });
@@ -310,8 +291,7 @@ }
       contentVelocity = state.contentVelocity,
-      drag = state.drag,
-      deceleration = state.deceleration,
       _state$options6 = state.options,
       pagingEnabled = _state$options6[0];
-  var point = action.point,
-      animated = action.animated;
+  var point = action.point;
+  var drag = state.drag,
+      deceleration = state.deceleration;
   var _action$offset = action.offset,
@@ -321,3 +301,4 @@ offset = _action$offset === void 0 ? {
     y: 0
-  } : _action$offset;
+  } : _action$offset,
+      animated = action.animated;
 
@@ -331,13 +312,13 @@ if (point) {
 
-  if (drag || !animated) {
-    if (offset.x === contentOffset.x && offset.y === contentOffset.y) {
-      return state;
-    }
+  if (offset.x === contentOffset.x && offset.y === contentOffset.y) {
+    return state;
+  }
 
-    var nextState = (0, _extends2["default"])({}, state, {
-      contentOffset: offset
-    });
+  if (drag) {
+    animated = false;
+  }
 
+  if (!animated) {
     if (drag) {
-      nextState.drag = (0, _extends2["default"])({}, drag, {
+      drag = (0, _extends2["default"])({}, drag, {
         startOffset: {
@@ -348,12 +329,18 @@ x: drag.startOffset.x + offset.x - contentOffset.x,
       });
+    } else {
+      if (deceleration) {
+        deceleration = (0, _motion.createDeceleration)({
+          x: deceleration.endOffset.x + offset.x - contentOffset.x,
+          y: deceleration.endOffset.y + offset.y - contentOffset.y
+        }, deceleration.rate, offset, contentVelocity);
+      } else {
+        deceleration = (0, _motion.createDeceleration)(offset);
+      }
     }
 
-    if (deceleration) {
-      nextState.deceleration = (0, _motion.createDeceleration)(offset, contentVelocity, {
-        x: deceleration.endOffset.x + offset.x - contentOffset.x,
-        y: deceleration.endOffset.y + offset.y - contentOffset.y
-      }, deceleration.rate);
-    }
-
-    return nextState;
+    return (0, _extends2["default"])({}, state, {
+      contentOffset: offset,
+      drag: drag,
+      deceleration: deceleration
+    });
   }
@@ -366,4 +353,3 @@
   return (0, _extends2["default"])({}, state, {
-    drag: null,
-    deceleration: (0, _motion.createDeceleration)(contentOffset, contentVelocity, decelerationEndOffset, DECELERATION_RATE_STRONG)
+    deceleration: (0, _motion.createDeceleration)(decelerationEndOffset, DECELERATION_RATE_STRONG, contentOffset, contentVelocity)
   });
@@ -370,0 +356,0 @@ }

lib/Pannable.js

@@ -62,2 +62,8 @@ "use strict";
       interval = state.interval;
+  var output = {
+    target: target,
+    translation: translation,
+    velocity: velocity,
+    interval: interval
+  };
   var prevState = prevStateRef.current;
@@ -193,9 +199,2 @@ (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
-    var output = {
-      target: target,
-      translation: translation,
-      velocity: velocity,
-      interval: interval
-    };
-
     if (prevState.translation !== translation) {
@@ -202,0 +201,0 @@ if (translation) {

lib/utils/geometry.js

@@ -11,7 +11,11 @@ "use strict";
 
-  if (s1 && s2 && s1.width === s2.width && s1.height === s2.height) {
-    return true;
+  if (!s1 || !s2) {
+    return false;
   }
 
-  return false;
+  if (s1.width !== s2.width || s1.height !== s2.height) {
+    return false;
+  }
+
+  return true;
 }

lib/utils/motion.js

@@ -187,2 +187,12 @@ "use strict";
 function calculateDeceleration(deceleration, moveTime, name) {
+  var points = deceleration.points,
+      duration = deceleration.duration,
+      startTime = deceleration.startTime,
+      endOffset = deceleration.endOffset;
+  var t = 1;
+
+  if (duration > 0) {
+    t = (moveTime - startTime) / duration;
+  }
+
   if (name) {
@@ -194,6 +204,2 @@ var _ref7;
 
-    var points = deceleration.points,
-        duration = deceleration.duration,
-        startTime = deceleration.startTime;
-    var t = Math.max(0, Math.min((moveTime - startTime) / duration, 1));
     var _points$x = points[x],
@@ -209,6 +215,45 @@ p0 = _points$x[0],
 
-  return (0, _extends2["default"])({}, calculateDeceleration(deceleration, moveTime, 'x'), {}, calculateDeceleration(deceleration, moveTime, 'y'));
+  if (t < 0 || 1 <= t) {
+    return {
+      offset: endOffset,
+      velocity: {
+        x: 0,
+        y: 0
+      },
+      didEnd: true
+    };
+  }
+
+  var _calculateDeceleratio = (0, _extends2["default"])({}, calculateDeceleration(deceleration, moveTime, 'x'), {}, calculateDeceleration(deceleration, moveTime, 'y')),
+      xOffset = _calculateDeceleratio.xOffset,
+      yOffset = _calculateDeceleratio.yOffset,
+      xVelocity = _calculateDeceleratio.xVelocity,
+      yVelocity = _calculateDeceleratio.yVelocity;
+
+  return {
+    offset: {
+      x: xOffset,
+      y: yOffset
+    },
+    velocity: {
+      x: xVelocity,
+      y: yVelocity
+    },
+    didEnd: false
+  };
 }
 
-function createDeceleration(startOffset, startVelocity, endOffset, rate) {
+function createDeceleration(endOffset, rate, startOffset, startVelocity) {
+  var startTime = new Date().getTime();
+  var duration = 0;
+
+  if (!rate) {
+    return {
+      endOffset: endOffset,
+      rate: rate,
+      duration: duration,
+      startTime: startTime
+    };
+  }
+
   var s = {
@@ -220,3 +265,2 @@ x: endOffset.x - startOffset.x,
   var vm;
-  var duration;
 
@@ -239,6 +283,2 @@ if (sm) {
 
-  if (duration <= 0) {
-    return null;
-  }
-
   var points = {
@@ -249,8 +289,8 @@ x: [startOffset.x, startOffset.x + startVelocity.x * (duration / 3.0), endOffset.x, endOffset.x],
   return {
-    points: points,
+    endOffset: endOffset,
+    rate: rate,
     duration: duration,
-    startTime: new Date().getTime(),
-    endOffset: endOffset,
-    rate: rate
+    startTime: startTime,
+    points: points
   };
 }

package.json

 {
   "name": "react-pannable",
-  "version": "2.3.0",
+  "version": "3.0.0",
   "description": "Flexible and Customizable Layouts for Scrolling Content with React",
@@ -75,8 +75,8 @@ "keywords": [
     "@babel/preset-env": "^7.7.4",
-    "@typescript-eslint/eslint-plugin": "^2.9.0",
-    "@typescript-eslint/parser": "^2.9.0",
+    "@typescript-eslint/eslint-plugin": "^2.10.0",
+    "@typescript-eslint/parser": "^2.10.0",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
     "coveralls": "^3.0.9",
-    "eslint": "^6.7.1",
+    "eslint": "^6.7.2",
     "eslint-config-react-app": "^5.0.2",
@@ -86,3 +86,3 @@ "eslint-plugin-flowtype": "^3.13.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.14.3",
+    "eslint-plugin-react": "^7.17.0",
     "eslint-plugin-react-hooks": "^1.7.0",
@@ -93,3 +93,3 @@ "jest": "^24.9.0",
     "rimraf": "^3.0.0",
-    "rollup": "^1.27.5",
+    "rollup": "^1.27.8",
     "rollup-plugin-babel": "^4.3.3",
@@ -100,4 +100,4 @@ "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-terser": "^5.1.2",
-    "typescript": "^3.7.2"
+    "typescript": "^3.7.3"
   }
 }

README.md

@@ -6,3 +6,3 @@ # react-pannable
 [![npm version](https://img.shields.io/npm/v/react-pannable.svg)](https://www.npmjs.com/package/react-pannable)
-![npm license](https://img.shields.io/npm/l/react-pannable.svg?style=flat)
+![npm license](https://img.shields.io/npm/l/react-pannable.svg)
 
@@ -19,2 +19,4 @@ ## Getting Started
 
+#### [`<Infinite />`](/packages/pannable/docs/infinite.md) - Used to display a long list of data
+
 #### [`<Carousel />`](/packages/pannable/docs/carousel.md) - Used to play a number of looping items in sequence
@@ -37,7 +39,11 @@
 
+Some `Infinite` demos
+
+- [Infinit Scrolling Content](https://n43.github.io/react-pannable/?path=/story/infinite--infinit-scrolling-content)
+
 Some `Carousel` demos
 
-- [Pad with Autoplayer](https://n43.github.io/react-pannable/?path=/story/carousel--pad-with-autoplayer)
 - [Horizontal Carousel](https://n43.github.io/react-pannable/?path=/story/carousel--horizontal-carousel)
 - [Vertical Carousel](https://n43.github.io/react-pannable/?path=/story/carousel--vertical-carousel)
+- [Pad with Autoplayer](https://n43.github.io/react-pannable/?path=/story/carousel--pad-with-autoplayer)
 
@@ -44,0 +50,0 @@ Some `Pad` demos

src/carousel/Carousel.js

@@ -11,4 +11,4 @@ import React, { Fragment, useMemo, useReducer } from 'react';
   renderItem: () => null,
-  onSlideChange: () => {},
-  slideTo: null,
+  onActiveIndexChange: () => {},
+  scrollToIndex: null,
   ...Player.defaultProps,
@@ -21,4 +21,4 @@ };
     renderItem,
-    onSlideChange,
-    slideTo,
+    onActiveIndexChange,
+    scrollToIndex,
     children,
@@ -31,3 +31,4 @@ ...playerProps
 
-  const { activeIndex, itemCount, scrollTo } = state;
+  const { activeIndex, itemCount, scrollTo, player } = state;
+  const output = { activeIndex, itemCount };
   const prevState = prevStateRef.current;
@@ -37,3 +38,3 @@
     if (prevState.activeIndex !== activeIndex) {
-      onSlideChange({ activeIndex, itemCount });
+      onActiveIndexChange(output);
     }
@@ -43,29 +44,14 @@ });
   useMemo(() => {
-    if (playerScrollTo) {
-      dispatch({ type: 'setScrollTo', value: playerScrollTo });
-    }
+    dispatch({ type: 'setScrollTo', value: playerScrollTo });
   }, [playerScrollTo]);
 
   useMemo(() => {
-    if (slideTo) {
-      dispatch({ type: 'slideTo', ...slideTo });
+    if (scrollToIndex) {
+      dispatch({ type: 'scrollToIndex', ...scrollToIndex });
     }
-  }, [slideTo]);
+  }, [scrollToIndex]);
 
-  const gridProps = {
-    width,
-    height,
-    itemWidth: width,
-    itemHeight: height,
-    direction,
-    itemCount: gridItemCount,
-    renderItem,
-  };
-
   playerProps.scrollTo = scrollTo;
 
-  const element =
-    typeof children === 'function'
-      ? children({ activeIndex, itemCount })
-      : children;
+  const element = typeof children === 'function' ? children(output) : children;
 
@@ -75,7 +61,17 @@ return (
       <Player {...playerProps}>
-        {player => {
-          if (state.player !== player) {
-            dispatch({ type: 'setPlayer', value: player });
+        {nextPlayer => {
+          if (player !== nextPlayer) {
+            dispatch({ type: 'setPlayer', value: nextPlayer });
           }
 
+          const gridProps = {
+            width,
+            height,
+            itemWidth: width,
+            itemHeight: height,
+            direction,
+            itemCount: gridItemCount,
+            renderItem,
+          };
+
           return <GridContent {...gridProps} />;
@@ -82,0 +78,0 @@ }}

src/carousel/carouselReducer.js

@@ -16,4 +16,4 @@ import { initialState as playerInitialState } from './playerReducer';
       return setScrollToReducer(state, action);
-    case 'slideTo':
-      return slideToReducer(state, action);
+    case 'scrollToIndex':
+      return scrollToIndexReducer(state, action);
     default:
@@ -54,3 +54,3 @@ return state;
 
-function slideToReducer(state, action) {
+function scrollToIndexReducer(state, action) {
   const { activeIndex, itemCount } = state;
@@ -67,3 +67,3 @@ const [direction] = state.player.options;
   if (typeof index === 'function') {
-    index = index({ activeIndex, itemCount });
+    index = index(state);
   }
@@ -70,0 +70,0 @@

src/carousel/Player.js

@@ -26,7 +26,6 @@ import React, { useCallback, useMemo, useReducer, useEffect } from 'react';
   const { scrollTo: padScrollTo, onMouseEnter, onMouseLeave } = padProps;
-
   const [state, dispatch] = useReducer(reducer, initialState);
-  const { mouseEntered, loopCount, loopOffset, scrollTo } = state;
-  const { drag, deceleration } = state.pad;
 
+  const { mouseEntered, loopCount, loopOffset, scrollTo, pad } = state;
+
   const onPadMouseEnter = useCallback(
@@ -55,3 +54,3 @@ evt => {
   useEffect(() => {
-    if (!autoplayEnabled || mouseEntered || drag || deceleration) {
+    if (!autoplayEnabled || mouseEntered || pad.drag || pad.deceleration) {
       return;
@@ -67,3 +66,9 @@ }
     };
-  }, [autoplayEnabled, autoplayInterval, mouseEntered, drag, deceleration]);
+  }, [
+    autoplayEnabled,
+    autoplayInterval,
+    mouseEntered,
+    pad.drag,
+    pad.deceleration,
+  ]);
 
@@ -75,7 +80,7 @@ useMemo(() => {
   useMemo(() => {
-    if (padScrollTo) {
-      dispatch({ type: 'setScrollTo', value: padScrollTo });
-    }
+    dispatch({ type: 'setScrollTo', value: padScrollTo });
   }, [padScrollTo]);
 
+  padProps.scrollTo = scrollTo;
+
   if (direction === 'x') {
@@ -92,9 +97,7 @@ padProps.alwaysBounceY = false;
 
-  padProps.scrollTo = scrollTo;
-
   return (
     <Pad {...padProps}>
-      {pad => {
-        if (state.pad !== pad) {
-          dispatch({ type: 'setPad', value: pad });
+      {nextPad => {
+        if (pad !== nextPad) {
+          dispatch({ type: 'setPad', value: nextPad });
         }
@@ -101,0 +104,0 @@

src/GridContent.js

@@ -87,3 +87,3 @@ import React, {
 
-    let key = String(itemIndex);
+    let key = 'GridContent_' + itemIndex;
     const itemStyle = {
@@ -90,0 +90,0 @@ position: 'absolute',

src/index.js

@@ -10,2 +10,3 @@ import Pad from './Pad';
 export * from './carousel';
+export * from './infinite';
 export {
@@ -12,0 +13,0 @@ Pad,

src/ListContent.js

@@ -7,3 +7,2 @@ import React, {
   useMemo,
-  useCallback,
 } from 'react';
@@ -79,17 +78,6 @@ import PadContext from './PadContext';
 
-  const resizeContent = useCallback(
-    itemHash => itemSize => {
-      setItemSizeDict(itemSizeDict =>
-        isEqualToSize(itemSizeDict[itemHash], itemSize)
-          ? itemSizeDict
-          : { ...itemSizeDict, [itemHash]: itemSize }
-      );
-    },
-
-    []
-  );
-
   useIsomorphicLayoutEffect(() => {
     context.resizeContent(size);
   }, []);
+
   useIsomorphicLayoutEffect(() => {
@@ -102,7 +90,7 @@ if (!isEqualToSize(prevLayout.size, size)) {
   function buildItem(attrs) {
-    const { rect, itemIndex, visibleRect, needsRender, Item } = attrs;
+    const { rect, itemIndex, itemSize, visibleRect, needsRender, Item } = attrs;
     let forceRender = false;
     let element = renderItem(attrs);
 
-    let key = String(itemIndex);
+    let key = `ListContent_` + itemIndex;
     let hash;
@@ -135,3 +123,2 @@ const itemStyle = {
 
-    const itemSize = itemSizeDict[hash];
     let skipRender = !needsRender && !forceRender;
@@ -152,4 +139,3 @@
     if (itemSize) {
-      sizeProps.width = itemSize.width;
-      sizeProps.height = itemSize.height;
+      Object.assign(sizeProps, itemSize);
     } else {
@@ -182,3 +168,3 @@ if (typeof fixed.width === 'number') {
       element = (
-        <ItemContent style={itemStyle} {...sizeProps}>
+        <ItemContent {...sizeProps} style={itemStyle}>
           {element}
@@ -189,2 +175,12 @@ </ItemContent>
 
+    function resizeContent(itemHash) {
+      return function(itemSize) {
+        setItemSizeDict(itemSizeDict =>
+          isEqualToSize(itemSizeDict[itemHash], itemSize)
+            ? itemSizeDict
+            : { ...itemSizeDict, [itemHash]: itemSize }
+        );
+      };
+    }
+
     return (
@@ -221,3 +217,3 @@ <PadContext.Provider
 
-  if (itemHashList.join() !== nextItemHashList.join()) {
+  if (!isEqualToArray(itemHashList, nextItemHashList)) {
     setItemHashList(nextItemHashList);
@@ -234,3 +230,3 @@ }
 ListContent.defaultProps = defaultListContentProps;
-ListContent.PadContext = true;
+ListContent.PadContent = true;
 
@@ -240,8 +236,10 @@ export default ListContent;
 function calculateLayout(props, itemHashList, itemSizeDict) {
-  const { direction, spacing, itemCount } = props;
+  const {
+    direction,
+    spacing,
+    itemCount,
+    estimatedItemWidth,
+    estimatedItemHeight,
+  } = props;
   const size = { width: props.width, height: props.height };
-  const estimatedItemSize = {
-    width: props.estimatedItemWidth,
-    height: props.estimatedItemHeight,
-  };
 
@@ -263,22 +261,27 @@ const [x, y, width, height] =
   for (let itemIndex = 0; itemIndex < itemCount; itemIndex++) {
-    const itemHash = itemHashList[itemIndex];
-    let itemSize = itemSizeDict[itemHash] || {
-      [width]:
-        fixed[width] === undefined ? estimatedItemSize[width] : fixed[width],
-      [height]: estimatedItemSize[height],
-    };
+    const itemHash = itemHashList[itemIndex] || null;
+    const itemSize = itemSizeDict[itemHash] || null;
+    const rect = { [x]: 0, [y]: sizeHeight };
 
-    layoutList.push({
-      rect: {
-        [x]: 0,
-        [y]: sizeHeight,
-        [width]: itemSize[width],
-        [height]: itemSize[height],
-      },
-      itemIndex,
-    });
+    if (itemSize) {
+      Object.assign(rect, itemSize);
+    } else {
+      rect[width] =
+        fixed[width] !== undefined
+          ? fixed[width]
+          : typeof estimatedItemWidth === 'function'
+          ? estimatedItemWidth(itemIndex)
+          : estimatedItemWidth;
 
-    if (itemSize[height] > 0) {
-      sizeHeight += itemSize[height];
+      rect[height] =
+        typeof estimatedItemHeight === 'function'
+          ? estimatedItemHeight(itemIndex)
+          : estimatedItemHeight;
+    }
 
+    layoutList.push({ rect, itemIndex, itemHash, itemSize });
+
+    if (rect[height] > 0) {
+      sizeHeight += rect[height];
+
       if (itemIndex < itemCount - 1) {
@@ -288,4 +291,4 @@ sizeHeight += spacing;
     }
-    if (sizeWidth < itemSize[width]) {
-      sizeWidth = itemSize[width];
+    if (sizeWidth < rect[width]) {
+      sizeWidth = rect[width];
     }
@@ -300,1 +303,20 @@ }
 }
+
+function isEqualToArray(a1, a2) {
+  if (a1 === a2) {
+    return true;
+  }
+  if (!a1 || !a2) {
+    return false;
+  }
+  if (a1.length !== a2.length) {
+    return false;
+  }
+  for (let idx = 0; idx < a1.length; idx++) {
+    if (a1[idx] !== a2[idx]) {
+      return false;
+    }
+  }
+
+  return true;
+}

src/Pad.js

@@ -8,3 +8,2 @@ import React, {
 } from 'react';
-import { reducer, initialState } from './padReducer';
 import Pannable from './Pannable';
@@ -20,2 +19,4 @@ import PadContext from './PadContext';
 } from './utils/animationFrame';
+import { isEqualToSize } from './utils/geometry';
+import { reducer, initialState } from './padReducer';
 
@@ -70,8 +71,22 @@ const defaultPadProps = {
     deceleration,
+    pannable,
   } = state;
+  const output = {
+    size,
+    contentSize,
+    contentOffset,
+    contentVelocity,
+    dragging: !!drag,
+    decelerating: !!deceleration,
+  };
   const prevState = prevStateRef.current;
 
-  const resizeContent = useCallback(contentSize => {
-    dispatch({ type: 'setContentSize', value: contentSize });
-  }, []);
+  const resizeContent = useCallback(
+    nextContentSize => {
+      if (!isEqualToSize(contentSize, nextContentSize)) {
+        dispatch({ type: 'setContentSize', value: nextContentSize });
+      }
+    },
+    [contentSize]
+  );
 
@@ -93,4 +108,4 @@ const shouldPannableStart = useCallback(
   useIsomorphicLayoutEffect(() => {
-    if (prevState.pannable.translation !== state.pannable.translation) {
-      if (state.pannable.translation) {
+    if (prevState.pannable.translation !== pannable.translation) {
+      if (pannable.translation) {
         if (prevState.pannable.translation) {
@@ -110,11 +125,2 @@ dispatch({ type: 'dragMove' });
 
-    const output = {
-      size,
-      contentSize,
-      contentOffset,
-      contentVelocity,
-      dragging: !!drag,
-      decelerating: !!deceleration,
-    };
-
     if (prevState.contentSize !== contentSize) {
@@ -209,5 +215,5 @@ onContentResize(contentSize);
       <Pannable {...pannableProps}>
-        {pannable => {
-          if (state.pannable !== pannable) {
-            dispatch({ type: 'setPannable', value: pannable });
+        {nextPannable => {
+          if (pannable !== nextPannable) {
+            dispatch({ type: 'setPannable', value: nextPannable });
           }
@@ -214,0 +220,0 @@

src/padReducer.js

@@ -123,6 +123,6 @@ import { initialState as pannableInitialState } from './pannableReducer';
         deceleration: createDeceleration(
+          decelerationEndOffset,
+          decelerationRate,
           contentOffset,
-          nextContentVelocity,
-          decelerationEndOffset,
-          decelerationRate
+          nextContentVelocity
         ),
@@ -152,6 +152,6 @@ };
         deceleration: createDeceleration(
+          decelerationEndOffset,
+          decelerationRate,
           contentOffset,
-          contentVelocity,
-          decelerationEndOffset,
-          decelerationRate
+          contentVelocity
         ),
@@ -277,6 +277,6 @@ };
     deceleration: createDeceleration(
+      decelerationEndOffset,
+      decelerationRate,
       contentOffset,
-      nextContentVelocity,
-      decelerationEndOffset,
-      decelerationRate
+      nextContentVelocity
     ),
@@ -308,6 +308,6 @@ };
     deceleration: createDeceleration(
+      decelerationEndOffset,
+      decelerationRate,
       contentOffset,
-      contentVelocity,
-      decelerationEndOffset,
-      decelerationRate
+      contentVelocity
     ),
@@ -324,23 +324,15 @@ };
   }
-  if (deceleration.startTime + deceleration.duration <= moveTime) {
-    return {
-      ...state,
-      contentOffset: deceleration.endOffset,
-      contentVelocity: { x: 0, y: 0 },
-      drag: null,
-      deceleration: null,
-    };
-  }
 
-  const { xOffset, yOffset, xVelocity, yVelocity } = calculateDeceleration(
-    deceleration,
-    moveTime
-  );
+  const {
+    offset: contentOffset,
+    velocity: contentVelocity,
+    didEnd,
+  } = calculateDeceleration(deceleration, moveTime);
 
   return {
     ...state,
-    contentOffset: { x: xOffset, y: yOffset },
-    contentVelocity: { x: xVelocity, y: yVelocity },
+    contentOffset,
+    contentVelocity,
     drag: null,
-    deceleration,
+    deceleration: didEnd ? null : deceleration,
   };
@@ -354,8 +346,7 @@ }
     contentVelocity,
-    drag,
-    deceleration,
     options: [pagingEnabled],
   } = state;
-  const { point, animated } = action;
-  let { offset = { x: 0, y: 0 } } = action;
+  const { point } = action;
+  let { drag, deceleration } = state;
+  let { offset = { x: 0, y: 0 }, animated } = action;
 
@@ -365,12 +356,12 @@ if (point) {
   }
+  if (offset.x === contentOffset.x && offset.y === contentOffset.y) {
+    return state;
+  }
+  if (drag) {
+    animated = false;
+  }
 
-  if (drag || !animated) {
-    if (offset.x === contentOffset.x && offset.y === contentOffset.y) {
-      return state;
-    }
-
-    const nextState = { ...state, contentOffset: offset };
-
+  if (!animated) {
     if (drag) {
-      nextState.drag = {
+      drag = {
         ...drag,
@@ -382,16 +373,24 @@ startOffset: {
       };
+    } else {
+      if (deceleration) {
+        deceleration = createDeceleration(
+          {
+            x: deceleration.endOffset.x + offset.x - contentOffset.x,
+            y: deceleration.endOffset.y + offset.y - contentOffset.y,
+          },
+          deceleration.rate,
+          offset,
+          contentVelocity
+        );
+      } else {
+        deceleration = createDeceleration(offset);
+      }
     }
-    if (deceleration) {
-      nextState.deceleration = createDeceleration(
-        offset,
-        contentVelocity,
-        {
-          x: deceleration.endOffset.x + offset.x - contentOffset.x,
-          y: deceleration.endOffset.y + offset.y - contentOffset.y,
-        },
-        deceleration.rate
-      );
-    }
 
-    return nextState;
+    return {
+      ...state,
+      contentOffset: offset,
+      drag,
+      deceleration,
+    };
   }
@@ -409,8 +408,7 @@
     ...state,
-    drag: null,
     deceleration: createDeceleration(
+      decelerationEndOffset,
+      DECELERATION_RATE_STRONG,
       contentOffset,
-      contentVelocity,
-      decelerationEndOffset,
-      DECELERATION_RATE_STRONG
+      contentVelocity
     ),
@@ -417,0 +415,0 @@ };

src/Pannable.js

@@ -36,2 +36,3 @@ import React, { useRef, useMemo, useReducer } from 'react';
   const { target, translation, velocity, interval } = state;
+  const output = { target, translation, velocity, interval };
   const prevState = prevStateRef.current;
@@ -157,4 +158,2 @@
   useIsomorphicLayoutEffect(() => {
-    const output = { target, translation, velocity, interval };
-
     if (prevState.translation !== translation) {
@@ -161,0 +160,0 @@ if (translation) {

src/utils/geometry.js

@@ -5,7 +5,10 @@ export function isEqualToSize(s1, s2) {
   }
-  if (s1 && s2 && s1.width === s2.width && s1.height === s2.height) {
-    return true;
+  if (!s1 || !s2) {
+    return false;
   }
+  if (s1.width !== s2.width || s1.height !== s2.height) {
+    return false;
+  }
 
-  return false;
+  return true;
 }

src/utils/motion.js

@@ -176,6 +176,11 @@ function getAcc(rate, { x, y }) {
 export function calculateDeceleration(deceleration, moveTime, name) {
+  const { points, duration, startTime, endOffset } = deceleration;
+  let t = 1;
+
+  if (duration > 0) {
+    t = (moveTime - startTime) / duration;
+  }
+
   if (name) {
     const [x] = name === 'y' ? ['y'] : ['x'];
-    const { points, duration, startTime } = deceleration;
-    const t = Math.max(0, Math.min((moveTime - startTime) / duration, 1));
     const [p0, p1, p2, p3] = points[x];
@@ -196,14 +201,35 @@ const offsetX =
 
-  return {
+  if (t < 0 || 1 <= t) {
+    return {
+      offset: endOffset,
+      velocity: { x: 0, y: 0 },
+      didEnd: true,
+    };
+  }
+
+  const { xOffset, yOffset, xVelocity, yVelocity } = {
     ...calculateDeceleration(deceleration, moveTime, 'x'),
     ...calculateDeceleration(deceleration, moveTime, 'y'),
   };
+
+  return {
+    offset: { x: xOffset, y: yOffset },
+    velocity: { x: xVelocity, y: yVelocity },
+    didEnd: false,
+  };
 }
 
 export function createDeceleration(
+  endOffset,
+  rate,
   startOffset,
-  startVelocity,
-  endOffset,
-  rate
+  startVelocity
 ) {
+  const startTime = new Date().getTime();
+  let duration = 0;
+
+  if (!rate) {
+    return { endOffset, rate, duration, startTime };
+  }
+
   const s = {
@@ -216,3 +242,2 @@ x: endOffset.x - startOffset.x,
   let vm;
-  let duration;
 
@@ -236,6 +261,2 @@ if (sm) {
 
-  if (duration <= 0) {
-    return null;
-  }
-
   const points = {
@@ -256,9 +277,3 @@ x: [
 
-  return {
-    points,
-    duration,
-    startTime: new Date().getTime(),
-    endOffset,
-    rate,
-  };
+  return { endOffset, rate, duration, startTime, points };
 }

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

441556

increased by7.54%

Number of package files

91

increased by10.98%

Lines of code

11980

increased by9.19%

Number of lines in readme file

66

increased by10%

No dependency changes