Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-pannable

Package Overview
Dependencies
Maintainers
1
Versions
105
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-pannable - npm Package Compare versions

Comparing version 0.4.2 to 0.4.3

2

dist/react-pannable.min.js

@@ -1,1 +0,1 @@

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

187

es/carousel/Player.js

@@ -0,1 +1,3 @@

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";

@@ -15,18 +17,33 @@ import React from 'react';

_this._onPadScroll = function (_ref) {
var contentOffset = _ref.contentOffset,
size = _ref.size,
dragging = _ref.dragging;
var direction = _this.props.direction;
_this._onPadScroll = function (evt) {
var contentOffset = evt.contentOffset,
size = evt.size,
dragging = evt.dragging,
decelerating = evt.decelerating;
var _this$props = _this.props,
direction = _this$props.direction,
onScroll = _this$props.onScroll;
var _ref2 = direction === 'horizontal' ? ['x', 'width'] : ['y', 'height'],
x = _ref2[0],
width = _ref2[1];
var _ref = direction === 'horizontal' ? ['x', 'width'] : ['y', 'height'],
x = _ref[0],
width = _ref[1];
var activeIndex = Math.abs(Math.floor(contentOffset[x] / size[width]));
var nextState = {
activeIndex: activeIndex
};
_this.setState({
activeIndex: activeIndex,
dragging: dragging
});
if (_this.state.dragging !== dragging) {
nextState.dragging = dragging;
}
if (_this.state.decelerating !== decelerating) {
nextState.decelerating = decelerating;
}
_this.setState(nextState);
if (onScroll) {
onScroll(evt);
}
};

@@ -39,10 +56,13 @@

_direction = props.direction;
var pageCount = 0;
if (_direction === 'horizontal') {
pageCount = _width ? Math.round(contentWidth / _width) : 0;
} else {
pageCount = height ? Math.round(contentHeight / height) : 0;
}
var pageCount = calculatePageCount({
direction: _direction,
size: {
width: _width,
height: height
},
contentSize: {
width: contentWidth,
height: contentHeight
}
});
_this.state = {

@@ -52,21 +72,13 @@ pageCount: pageCount,

dragging: false,
prevDragging: false
decelerating: false
};
_this.padRef = React.createRef();
return _this;
}
} // static getDerivedStateFromProps(props, state) {
// const { dragging, prevDragging } = state;
// let nextState = {};
// return nextState;
// }
Player.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
var dragging = state.dragging,
prevDragging = state.prevDragging;
var nextState = {};
if (prevDragging !== dragging) {
nextState.dragging = dragging;
nextState.prevDragging = dragging;
}
return nextState;
};
var _proto = Player.prototype;

@@ -83,28 +95,29 @@

_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
var _this$props = this.props,
direction = _this$props.direction,
width = _this$props.width,
height = _this$props.height,
contentWidth = _this$props.contentWidth,
contentHeight = _this$props.contentHeight,
autoplayEnabled = _this$props.autoplayEnabled;
var _this$props2 = this.props,
direction = _this$props2.direction,
width = _this$props2.width,
height = _this$props2.height,
contentWidth = _this$props2.contentWidth,
contentHeight = _this$props2.contentHeight,
autoplayEnabled = _this$props2.autoplayEnabled;
var _this$state = this.state,
pageCount = _this$state.pageCount,
activeIndex = _this$state.activeIndex,
dragging = _this$state.dragging;
dragging = _this$state.dragging,
decelerating = _this$state.decelerating;
if ((prevProps.width !== width || prevProps.contentWidth !== contentWidth) && direction === 'horizontal') {
this.setState({
pageCount: width ? Math.round(contentWidth / width) : 0
});
}
if (prevProps.direction !== direction || prevProps.width !== width || prevProps.contentWidth !== contentWidth || prevProps.height !== height || prevProps.contentHeight !== contentHeight) {
var padDt = direction === 'horizontal' ? width : height;
var contentDt = direction === 'horizontal' ? contentWidth : contentHeight;
var nextPageCount = padDt ? Math.round(contentDt / padDt) : 0;
if ((prevProps.height !== height || prevProps.contentHeight !== contentHeight) && direction !== 'horizontal') {
this.setState({
pageCount: height ? Math.round(contentHeight / height) : 0
});
if (nextPageCount !== pageCount) {
this.setState({
pageCount: nextPageCount
});
}
}
if (prevProps.autoplayEnabled !== autoplayEnabled) {
if (autoplayEnabled) {
if (prevProps.autoplayEnabled !== autoplayEnabled || prevState.dragging !== dragging) {
if (autoplayEnabled && !dragging) {
this.play();

@@ -116,14 +129,4 @@ } else {

if (prevState.dragging !== dragging) {
if (autoplayEnabled) {
if (!dragging) {
this.play();
} else {
this.pause();
}
}
}
if (prevState.activeIndex !== activeIndex) {
if (pageCount === activeIndex + 1) {
if (prevState.activeIndex !== activeIndex || prevState.decelerating !== decelerating) {
if (!decelerating && pageCount === activeIndex + 1) {
this.pause();

@@ -145,3 +148,4 @@ }

var autoplayDelay = this.props.autoplayDelay;
var autoplayInterval = this.props.autoplayInterval;
console.log('play');

@@ -155,3 +159,3 @@ if (this._autoplayTimer) {

_this2.play();
}, autoplayDelay);
}, autoplayInterval);
};

@@ -167,6 +171,6 @@

_proto.setFrame = function setFrame(index) {
var _this$props2 = this.props,
direction = _this$props2.direction,
width = _this$props2.width,
height = _this$props2.height;
var _this$props3 = this.props,
direction = _this$props3.direction,
width = _this$props3.width,
height = _this$props3.height;
var pad = this.padRef.current;

@@ -195,17 +199,15 @@ var contentOffset = pad.getContentOffset();

_proto.render = function render() {
var _this$props3 = this.props,
width = _this$props3.width,
height = _this$props3.height,
contentWidth = _this$props3.contentWidth,
contentHeight = _this$props3.contentHeight,
children = _this$props3.children;
return React.createElement(Pad, {
ref: this.padRef,
width: width,
height: height,
contentWidth: contentWidth,
contentHeight: contentHeight,
var _this$props4 = this.props,
direction = _this$props4.direction,
autoplayEnabled = _this$props4.autoplayEnabled,
autoplayInterval = _this$props4.autoplayInterval,
children = _this$props4.children,
padProps = _objectWithoutPropertiesLoose(_this$props4, ["direction", "autoplayEnabled", "autoplayInterval", "children"]);
return React.createElement(Pad, _extends({
ref: this.padRef
}, padProps, {
pagingEnabled: true,
onScroll: this._onPadScroll
}, typeof children === 'function' ? children(this.padRef.current) : children);
}), typeof children === 'function' ? children(this) : children);
};

@@ -217,11 +219,14 @@

Player.defaultProps = {
children: null,
width: 0,
height: 0,
contentWidth: 0,
contentHeight: 0,
direction: 'vertical',
autoplayEnabled: true,
autoplayDelay: 3000
autoplayInterval: 3000
};
export { Player as default };
export { Player as default };
function calculatePageCount(_ref2) {
var direction = _ref2.direction,
size = _ref2.size,
contentSize = _ref2.contentSize;
var dt = direction === 'horizontal' ? 'width' : 'height';
return size[dt] ? Math.round(contentSize[dt] / size[dt]) : 0;
}

188

lib/carousel/Player.js

@@ -8,2 +8,6 @@ "use strict";

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

@@ -25,18 +29,33 @@

_this._onPadScroll = function (_ref) {
var contentOffset = _ref.contentOffset,
size = _ref.size,
dragging = _ref.dragging;
var direction = _this.props.direction;
_this._onPadScroll = function (evt) {
var contentOffset = evt.contentOffset,
size = evt.size,
dragging = evt.dragging,
decelerating = evt.decelerating;
var _this$props = _this.props,
direction = _this$props.direction,
onScroll = _this$props.onScroll;
var _ref2 = direction === 'horizontal' ? ['x', 'width'] : ['y', 'height'],
x = _ref2[0],
width = _ref2[1];
var _ref = direction === 'horizontal' ? ['x', 'width'] : ['y', 'height'],
x = _ref[0],
width = _ref[1];
var activeIndex = Math.abs(Math.floor(contentOffset[x] / size[width]));
var nextState = {
activeIndex: activeIndex
};
_this.setState({
activeIndex: activeIndex,
dragging: dragging
});
if (_this.state.dragging !== dragging) {
nextState.dragging = dragging;
}
if (_this.state.decelerating !== decelerating) {
nextState.decelerating = decelerating;
}
_this.setState(nextState);
if (onScroll) {
onScroll(evt);
}
};

@@ -49,10 +68,13 @@

_direction = props.direction;
var pageCount = 0;
if (_direction === 'horizontal') {
pageCount = _width ? Math.round(contentWidth / _width) : 0;
} else {
pageCount = height ? Math.round(contentHeight / height) : 0;
}
var pageCount = calculatePageCount({
direction: _direction,
size: {
width: _width,
height: height
},
contentSize: {
width: contentWidth,
height: contentHeight
}
});
_this.state = {

@@ -62,21 +84,13 @@ pageCount: pageCount,

dragging: false,
prevDragging: false
decelerating: false
};
_this.padRef = _react.default.createRef();
return _this;
}
} // static getDerivedStateFromProps(props, state) {
// const { dragging, prevDragging } = state;
// let nextState = {};
// return nextState;
// }
Player.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
var dragging = state.dragging,
prevDragging = state.prevDragging;
var nextState = {};
if (prevDragging !== dragging) {
nextState.dragging = dragging;
nextState.prevDragging = dragging;
}
return nextState;
};
var _proto = Player.prototype;

@@ -93,28 +107,29 @@

_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
var _this$props = this.props,
direction = _this$props.direction,
width = _this$props.width,
height = _this$props.height,
contentWidth = _this$props.contentWidth,
contentHeight = _this$props.contentHeight,
autoplayEnabled = _this$props.autoplayEnabled;
var _this$props2 = this.props,
direction = _this$props2.direction,
width = _this$props2.width,
height = _this$props2.height,
contentWidth = _this$props2.contentWidth,
contentHeight = _this$props2.contentHeight,
autoplayEnabled = _this$props2.autoplayEnabled;
var _this$state = this.state,
pageCount = _this$state.pageCount,
activeIndex = _this$state.activeIndex,
dragging = _this$state.dragging;
dragging = _this$state.dragging,
decelerating = _this$state.decelerating;
if ((prevProps.width !== width || prevProps.contentWidth !== contentWidth) && direction === 'horizontal') {
this.setState({
pageCount: width ? Math.round(contentWidth / width) : 0
});
}
if (prevProps.direction !== direction || prevProps.width !== width || prevProps.contentWidth !== contentWidth || prevProps.height !== height || prevProps.contentHeight !== contentHeight) {
var padDt = direction === 'horizontal' ? width : height;
var contentDt = direction === 'horizontal' ? contentWidth : contentHeight;
var nextPageCount = padDt ? Math.round(contentDt / padDt) : 0;
if ((prevProps.height !== height || prevProps.contentHeight !== contentHeight) && direction !== 'horizontal') {
this.setState({
pageCount: height ? Math.round(contentHeight / height) : 0
});
if (nextPageCount !== pageCount) {
this.setState({
pageCount: nextPageCount
});
}
}
if (prevProps.autoplayEnabled !== autoplayEnabled) {
if (autoplayEnabled) {
if (prevProps.autoplayEnabled !== autoplayEnabled || prevState.dragging !== dragging) {
if (autoplayEnabled && !dragging) {
this.play();

@@ -126,14 +141,4 @@ } else {

if (prevState.dragging !== dragging) {
if (autoplayEnabled) {
if (!dragging) {
this.play();
} else {
this.pause();
}
}
}
if (prevState.activeIndex !== activeIndex) {
if (pageCount === activeIndex + 1) {
if (prevState.activeIndex !== activeIndex || prevState.decelerating !== decelerating) {
if (!decelerating && pageCount === activeIndex + 1) {
this.pause();

@@ -155,3 +160,4 @@ }

var autoplayDelay = this.props.autoplayDelay;
var autoplayInterval = this.props.autoplayInterval;
console.log('play');

@@ -165,3 +171,3 @@ if (this._autoplayTimer) {

_this2.play();
}, autoplayDelay);
}, autoplayInterval);
};

@@ -177,6 +183,6 @@

_proto.setFrame = function setFrame(index) {
var _this$props2 = this.props,
direction = _this$props2.direction,
width = _this$props2.width,
height = _this$props2.height;
var _this$props3 = this.props,
direction = _this$props3.direction,
width = _this$props3.width,
height = _this$props3.height;
var pad = this.padRef.current;

@@ -205,17 +211,14 @@ var contentOffset = pad.getContentOffset();

_proto.render = function render() {
var _this$props3 = this.props,
width = _this$props3.width,
height = _this$props3.height,
contentWidth = _this$props3.contentWidth,
contentHeight = _this$props3.contentHeight,
children = _this$props3.children;
return _react.default.createElement(_Pad.default, {
ref: this.padRef,
width: width,
height: height,
contentWidth: contentWidth,
contentHeight: contentHeight,
var _this$props4 = this.props,
direction = _this$props4.direction,
autoplayEnabled = _this$props4.autoplayEnabled,
autoplayInterval = _this$props4.autoplayInterval,
children = _this$props4.children,
padProps = (0, _objectWithoutPropertiesLoose2.default)(_this$props4, ["direction", "autoplayEnabled", "autoplayInterval", "children"]);
return _react.default.createElement(_Pad.default, (0, _extends2.default)({
ref: this.padRef
}, padProps, {
pagingEnabled: true,
onScroll: this._onPadScroll
}, typeof children === 'function' ? children(this.padRef.current) : children);
}), typeof children === 'function' ? children(this) : children);
};

@@ -228,10 +231,13 @@

Player.defaultProps = {
children: null,
width: 0,
height: 0,
contentWidth: 0,
contentHeight: 0,
direction: 'vertical',
autoplayEnabled: true,
autoplayDelay: 3000
};
autoplayInterval: 3000
};
function calculatePageCount(_ref2) {
var direction = _ref2.direction,
size = _ref2.size,
contentSize = _ref2.contentSize;
var dt = direction === 'horizontal' ? 'width' : 'height';
return size[dt] ? Math.round(contentSize[dt] / size[dt]) : 0;
}

6

package.json
{
"name": "react-pannable",
"version": "0.4.2",
"version": "0.4.3",
"description": "",

@@ -40,6 +40,4 @@ "keywords": [

"clean": "rimraf lib dist es coverage",
"prepare": "yarn clean && yarn build",
"lint": "eslint src",
"pretest": "yarn lint",
"test": "jest"
"prepare": "yarn clean && yarn build"
},

@@ -46,0 +44,0 @@ "peerDependencies": {

93

README.md

@@ -104,5 +104,20 @@ # react-pannable

### AutoResizing
`AutoResizing` automatically fills the size of the bounding view.
```js
type Size = { width: number, height: number };
```
#### Prop Types
| Property | Type | DefaultValue | Description |
| :------- | :----: | :----------: | :------------------------------------------------------------------------------------ |
| width | number | -1 | The width of the content. If you set `-1`, it fills the width of the bounding view. |
| height | number | -1 | The height of the content. If you set `-1`, it fills the height of the bounding view. |
### GeneralContent
`GeneralContent` automatically adjusts the size of content.
`GeneralContent` automatically fits the size of the content.

@@ -115,7 +130,7 @@ ```js

| Property | Type | DefaultValue | Description |
| :------- | :------: | :----------: | :-------------------------------------------------------------------------------------------- |
| width | number | -1 | The width of the content. If you set this property to `-1`, it shrinks the content's width. |
| height | number | -1 | The height of the content. If you set this property to `-1`, it shrinks the content's height. |
| onResize | function | () => {} | Callback invoked when the content resize.:`(size: Size) => void` |
| Property | Type | DefaultValue | Description |
| :------- | :------: | :----------: | :----------------------------------------------------------------------------- |
| width | number | -1 | The width of the content. If you set `-1`, it fits the width of the content. |
| height | number | -1 | The height of the content. If you set `-1`, it fits the height of the content. |
| onResize | function | () => {} | Callback invoked when the content resize.:`(size: Size) => void` |

@@ -142,15 +157,15 @@ ### GridContent

| Property | Type | DefaultValue | Description |
| :------------ | :---------------------: | :---------------------------------: | :-------------------------------------------------------------------------------------------- |
| direction | 'vertical','horizontal' | 'vertical' | The direction of the grid. |
| width | number | -1 | The width of the content. If you set this property to `-1`, it shrinks the content's width. |
| height | number | -1 | The height of the content. If you set this property to `-1`, it shrinks the content's height. |
| rowSpacing | number | 0 | The minimum spacing to use between rows of items in the grid. |
| columnSpacing | number | 0 | The minimum spacing to use between columns of items in the grid. |
| itemCount | number | 0 | The number of items. |
| itemWidth | number | 0 | The width of the item. |
| itemHeight | number | 0 | The height of the item. |
| renderItem | function | () => null | The renderer of the item.:`(attrs: LayoutAttrs) => element` |
| visibleRect | Rect | { x: 0, y: 0, width: 0, height: 0 } | The area of the visible content. |
| onResize | function | () => {} | Callback invoked when the content resize.:`(size: Size) => void` |
| Property | Type | DefaultValue | Description |
| :------------ | :---------------------: | :---------------------------------: | :----------------------------------------------------------------------------- |
| direction | 'vertical','horizontal' | 'vertical' | The direction of the grid. |
| width | number | -1 | The width of the content. If you set `-1`, it fits the width of the content. |
| height | number | -1 | The height of the content. If you set `-1`, it fits the height of the content. |
| rowSpacing | number | 0 | The minimum spacing to use between rows of items in the grid. |
| columnSpacing | number | 0 | The minimum spacing to use between columns of items in the grid. |
| itemCount | number | 0 | The number of items. |
| itemWidth | number | 0 | The width of the item. |
| itemHeight | number | 0 | The height of the item. |
| renderItem | function | () => null | The renderer of the item.:`(attrs: LayoutAttrs) => element` |
| visibleRect | Rect | { x: 0, y: 0, width: 0, height: 0 } | The area of the visible content. |
| onResize | function | () => {} | Callback invoked when the content resize.:`(size: Size) => void` |

@@ -182,14 +197,14 @@ #### Public Methods

| Property | Type | DefaultValue | Description |
| :------------------ | :---------------------: | :---------------------------------: | :-------------------------------------------------------------------------------------------- |
| direction | 'vertical','horizontal' | 'vertical' | The direction of the list. |
| width | number | -1 | The width of the content. If you set this property to `-1`, it shrinks the content's width. |
| height | number | -1 | The height of the content. If you set this property to `-1`, it shrinks the content's height. |
| spacing | number | 0 | The minimum spacing to use between items in the list. |
| itemCount | number | 0 | The number of items. |
| estimatedItemWidth | number | 0 | The estimated width of the item. |
| estimatedItemHeight | number | 0 | The estimated height of the item. |
| renderItem | function | () => null | The renderer of the item.:`(attrs: LayoutAttrs) => element` |
| visibleRect | Rect | { x: 0, y: 0, width: 0, height: 0 } | The area of the visible content. |
| onResize | function | () => {} | Callback invoked when the content resize.:`(size: Size) => void` |
| Property | Type | DefaultValue | Description |
| :------------------ | :---------------------: | :---------------------------------: | :----------------------------------------------------------------------------- |
| direction | 'vertical','horizontal' | 'vertical' | The direction of the list. |
| width | number | -1 | The width of the content. If you set `-1`, it fits the width of the content. |
| height | number | -1 | The height of the content. If you set `-1`, it fits the height of the content. |
| spacing | number | 0 | The minimum spacing to use between items in the list. |
| itemCount | number | 0 | The number of items. |
| estimatedItemWidth | number | 0 | The estimated width of the item. |
| estimatedItemHeight | number | 0 | The estimated height of the item. |
| renderItem | function | () => null | The renderer of the item.:`(attrs: LayoutAttrs) => element` |
| visibleRect | Rect | { x: 0, y: 0, width: 0, height: 0 } | The area of the visible content. |
| onResize | function | () => {} | Callback invoked when the content resize.:`(size: Size) => void` |

@@ -204,3 +219,3 @@ #### Public Methods

`ItemContent` adjusts the size of content by hash property.
`ItemContent` fits the size of the content by hash.

@@ -213,9 +228,9 @@ ```js

| Property | Type | DefaultValue | Description |
| :------------ | :------: | :----------: | :-------------------------------------------------------------------------------------------- |
| width | number | -1 | The width of the content. If you set this property to `-1`, it shrinks the content's width. |
| height | number | -1 | The height of the content. If you set this property to `-1`, it shrinks the content's height. |
| hash | string | 'Item' | The hash of the content. if this property changes, the content size recalculates. |
| getSizeByHash | function | () => null | The content size getter by hash.:`(hash: string) => Size` |
| onResize | function | () => {} | Callback invoked when the content resize.:`(size: Size, hash: string) => void` |
| Property | Type | DefaultValue | Description |
| :------------ | :------: | :----------: | :-------------------------------------------------------------------------------- |
| width | number | -1 | The width of the content. If you set `-1`, it fits the width of the content. |
| height | number | -1 | The height of the content. If you set `-1`, it fits the height of the content. |
| hash | string | 'Item' | The hash of the content. if this property changes, the content size recalculates. |
| getSizeByHash | function | () => null | The content size getter by hash.:`(hash: string) => Size` |
| onResize | function | () => {} | Callback invoked when the content resize.:`(size: Size, hash: string) => void` |

@@ -222,0 +237,0 @@ ## License

dist/react-pannable.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc