Socket
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.2.1 to 0.2.2

2

dist/react-pannable.min.js

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

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

10

es/GeneralContent.js

@@ -8,4 +8,4 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";

/*#__PURE__*/
function (_React$Component) {
_inheritsLoose(GeneralContent, _React$Component);
function (_React$PureComponent) {
_inheritsLoose(GeneralContent, _React$PureComponent);

@@ -19,3 +19,3 @@ function GeneralContent() {

_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
_this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
_this.resizeRef = React.createRef();

@@ -97,7 +97,7 @@ return _this;

style: style
}, children);
}, typeof children === 'function' ? children(this) : children);
};
return GeneralContent;
}(React.Component);
}(React.PureComponent);

@@ -104,0 +104,0 @@ GeneralContent.defaultProps = {

268

es/GridContent.js

@@ -0,61 +1,9 @@

import _extends from "@babel/runtime/helpers/esm/extends";
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
import React from 'react';
function calculateDerivedState(count, widthFn, hash, xList, hashDict) {
var shouldUpdateXList = xList.length !== count;
var nextXList = [];
var nextWidth = 0;
var nextHashDict;
var nextState = {};
for (var index = 0; index < count; index++) {
var width = void 0;
if (typeof widthFn === 'number') {
width = widthFn;
} else {
var hashKey = hash({
index: index
});
width = hashDict[hashKey];
if (width === undefined) {
width = widthFn({
index: index
});
if (!nextHashDict) {
nextHashDict = _extends({}, hashDict);
}
nextHashDict[hashKey] = width;
}
}
nextWidth += width;
if (xList[index] !== nextWidth) {
shouldUpdateXList = true;
}
nextXList[index] = nextWidth;
}
if (shouldUpdateXList) {
nextState.xList = nextXList;
}
if (nextHashDict) {
nextState.hashDict = nextHashDict;
}
nextState.width = nextWidth;
return nextState;
}
var GridContent =
/*#__PURE__*/
function (_React$Component) {
_inheritsLoose(GridContent, _React$Component);
function (_React$PureComponent) {
_inheritsLoose(GridContent, _React$PureComponent);

@@ -69,3 +17,3 @@ function GridContent() {

_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
_this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
_this.state = {

@@ -76,4 +24,4 @@ size: {

},
columnHashDict: {},
rowHashDict: {},
widthDict: {},
heightDict: {},
xList: [],

@@ -86,13 +34,13 @@ yList: []

GridContent.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
var pad = props.pad,
columnWidth = props.columnWidth,
var columnWidth = props.columnWidth,
rowHeight = props.rowHeight,
columnCount = props.columnCount,
rowCount = props.rowCount,
rowHash = props.rowHash,
columnHash = props.columnHash;
rowHeightHash = props.rowHeightHash,
columnWidthHash = props.columnWidthHash,
onResize = props.onResize;
var xList = state.xList,
yList = state.yList,
columnHashDict = state.columnHashDict,
rowHashDict = state.rowHashDict,
widthDict = state.widthDict,
heightDict = state.heightDict,
size = state.size;

@@ -103,27 +51,27 @@ var nextState = {};

var rowState = calculateDerivedState(rowCount, rowHeight, rowHash, yList, rowHashDict);
var rowState = calculateDerivedState(rowCount, rowHeight, rowHeightHash, yList, heightDict);
if (rowState.xList) {
nextState.yList = rowState.xList;
if (rowState.originList) {
nextState.yList = rowState.originList;
}
if (rowState.hashDict) {
nextState.rowHashDict = rowState.hashDict;
if (rowState.sizeDict) {
nextState.heightDict = rowState.sizeDict;
}
nextSize.height = rowState.width;
var columnState = calculateDerivedState(columnCount, columnWidth, columnHash, xList, columnHashDict);
nextSize.height = rowState.size;
var columnState = calculateDerivedState(columnCount, columnWidth, columnWidthHash, xList, widthDict);
if (columnState.xList) {
nextState.xList = columnState.xList;
if (columnState.originList) {
nextState.xList = columnState.originList;
}
if (columnState.hashDict) {
nextState.columnHashDict = columnState.hashDict;
if (columnState.sizeDict) {
nextState.widthDict = columnState.sizeDict;
}
nextSize.width = columnState.width;
nextSize.width = columnState.size;
if (nextSize.width !== size.width || nextSize.height !== size.height) {
pad.setContentSize(nextSize);
onResize(nextSize);
nextState.size = nextSize;

@@ -137,15 +85,18 @@ }

_proto.scrollTo = function scrollTo() {};
_proto._needsRenderCell = function _needsRenderCell(_ref) {
var x = _ref.x,
y = _ref.y,
width = _ref.width,
height = _ref.height;
var pad = this.props.pad;
var contentOffset = pad.getContentOffset();
var boundingSize = pad.getSize();
var dx = x + contentOffset.x;
var dy = y + contentOffset.y;
return -0.25 * boundingSize.width < dx + width && dx < 1.25 * boundingSize.width && -0.25 * boundingSize.height < dy + height && dy < 1.25 * boundingSize.height;
_proto.getCellRect = function getCellRect(_ref) {
var rowIndex = _ref.rowIndex,
columnIndex = _ref.columnIndex;
var _this$state = this.state,
xList = _this$state.xList,
yList = _this$state.yList;
var x = xList[columnIndex - 1] || 0;
var y = yList[rowIndex - 1] || 0;
var x2 = xList[columnIndex] || 0;
var y2 = yList[rowIndex] || 0;
return {
x: x,
y: y,
width: x2 - x,
height: y2 - y
};
};

@@ -155,7 +106,14 @@

var _this$props = this.props,
visibleRect = _this$props.visibleRect,
renderCell = _this$props.renderCell,
cellKey = _this$props.cellKey;
var _this$state = this.state,
xList = _this$state.xList,
yList = _this$state.yList;
cellKey = _this$props.cellKey,
children = _this$props.children;
if (typeof children === 'function') {
return children(this);
}
var _this$state2 = this.state,
xList = _this$state2.xList,
yList = _this$state2.yList;
var grids = [];

@@ -165,19 +123,26 @@

for (var columnIndex = 0; columnIndex < xList.length; columnIndex++) {
var x = columnIndex === 0 ? 0 : xList[columnIndex - 1];
var y = rowIndex === 0 ? 0 : yList[rowIndex - 1];
var width = xList[columnIndex] - x;
var height = yList[rowIndex] - y;
var cellRect = this.getCellRect({
rowIndex: rowIndex,
columnIndex: columnIndex
});
if (this._needsRenderCell({
x: x,
y: y,
width: width,
height: height
if (needsRender({
x: cellRect.x,
y: cellRect.y
}, {
width: cellRect.width,
height: cellRect.height
}, {
x: visibleRect.x,
y: visibleRect.y
}, {
width: visibleRect.width,
height: visibleRect.height
})) {
var cellStyle = {
position: 'absolute',
left: x,
top: y,
width: width,
height: height
left: cellRect.x,
top: cellRect.y,
width: cellRect.width,
height: cellRect.width
};

@@ -202,21 +167,17 @@ grids.push(React.createElement("div", {

return GridContent;
}(React.Component);
}(React.PureComponent);
GridContent.defaultProps = {
pad: null,
rowCount: 0,
columnCount: 0,
rowCount: 0,
rowHeight: 0,
columnWidth: 0,
rowHeight: 0,
rowHash: function rowHash(_ref2) {
rowHeightHash: function rowHeightHash(_ref2) {
var rowIndex = _ref2.rowIndex;
return rowIndex;
},
columnHash: function columnHash(_ref3) {
columnWidthHash: function columnWidthHash(_ref3) {
var columnIndex = _ref3.columnIndex;
return columnIndex;
},
renderCell: function renderCell() {
return null;
},
cellKey: function cellKey(_ref4) {

@@ -226,4 +187,75 @@ var columnIndex = _ref4.columnIndex,

return rowIndex + '-' + columnIndex;
},
renderCell: function renderCell() {
return null;
},
visibleRect: {
x: 0,
y: 0,
width: 0,
height: 0
},
onResize: function onResize() {}
};
export { GridContent as default };
function needsRender(origin, size, vOrigin, vSize, name) {
if (name) {
var dOrigin = origin - vOrigin;
return -0.25 * vSize < dOrigin + size && dOrigin < 1.25 * vSize;
}
};
export { GridContent as default };
return needsRender(origin.x, size.width, vOrigin.x, vSize.width, 'x') && needsRender(origin.y, size.height, vOrigin.y, vSize.height, 'y');
}
function calculateDerivedState(count, sizeFn, sizeHashFn, originList, sizeDict) {
var shouldUpdateOriginList = originList.length !== count;
var nextOriginList = [];
var nextSize = 0;
var nextSizeDict;
var nextState = {};
for (var index = 0; index < count; index++) {
var size = void 0;
if (typeof sizeFn === 'number') {
size = sizeFn;
} else {
var sizeHash = sizeHashFn({
index: index
});
size = sizeDict[sizeHash];
if (size === undefined) {
size = sizeFn({
index: index
});
if (!nextSizeDict) {
nextSizeDict = _extends({}, sizeDict);
}
nextSizeDict[sizeHash] = size;
}
}
nextSize += size;
if (originList[index] !== nextSize) {
shouldUpdateOriginList = true;
}
nextOriginList[index] = nextSize;
}
if (shouldUpdateOriginList) {
nextState.originList = nextOriginList;
}
if (nextSizeDict) {
nextState.sizeDict = nextSizeDict;
}
nextState.size = nextSize;
return nextState;
}

51

es/Pad.js

@@ -9,8 +9,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";

import { requestAnimationFrame, cancelAnimationFrame } from './utils/animationFrame';
import { getAdjustedContentOffset, getAdjustedPagingOffset, getAdjustedPagingVelocity, getDecelerationEndOffset, calculateDeceleration } from './utils/motion';
import { getAdjustedContentOffset, getAdjustedPagingOffset, getAdjustedPagingVelocity, getDecelerationEndOffset, calculateDeceleration, calculateRectOffset } from './utils/motion';
var Pad =
/*#__PURE__*/
function (_React$Component) {
_inheritsLoose(Pad, _React$Component);
function (_React$PureComponent) {
_inheritsLoose(Pad, _React$PureComponent);

@@ -20,3 +20,3 @@ function Pad(props) {

_this = _React$Component.call(this, props) || this;
_this = _React$PureComponent.call(this, props) || this;

@@ -381,8 +381,29 @@ _this._onDragStart = function (_ref) {

_proto.scrollToRect = function scrollToRect(_ref18) {
var rect = _ref18.rect,
_ref18$align = _ref18.align,
align = _ref18$align === void 0 ? 'auto' : _ref18$align,
animated = _ref18.animated;
var _this$state = this.state,
contentOffset = _this$state.contentOffset,
size = _this$state.size;
var offset = calculateRectOffset({
x: rect.x,
y: rect.y
}, {
width: rect.width,
height: rect.height
}, align, contentOffset, size);
this.scrollTo({
offset: offset,
animated: animated
});
};
_proto._decelerate = function _decelerate(interval) {
this.setState(function (_ref18) {
var contentVelocity = _ref18.contentVelocity,
contentOffset = _ref18.contentOffset,
decelerationEndOffset = _ref18.decelerationEndOffset,
decelerationRate = _ref18.decelerationRate;
this.setState(function (_ref19) {
var contentVelocity = _ref19.contentVelocity,
contentOffset = _ref19.contentOffset,
decelerationEndOffset = _ref19.decelerationEndOffset,
decelerationRate = _ref19.decelerationRate;

@@ -414,6 +435,6 @@ if (!decelerationEndOffset) {

var _this$state = this.state,
size = _this$state.size,
contentSize = _this$state.contentSize,
contentOffset = _this$state.contentOffset;
var _this$state2 = this.state,
size = _this$state2.size,
contentSize = _this$state2.contentSize,
contentOffset = _this$state2.contentOffset;
var boundingStyles = StyleSheet.create(_extends({

@@ -444,7 +465,7 @@ overflow: 'hidden',

style: contentStyles
}, React.isValidElement(children) ? children : children(this)));
}, typeof children === 'function' ? children(this) : children));
};
return Pad;
}(React.Component);
}(React.PureComponent);

@@ -451,0 +472,0 @@ Pad.defaultProps = {

8

es/Pannable.js

@@ -10,4 +10,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";

/*#__PURE__*/
function (_React$Component) {
_inheritsLoose(Pannable, _React$Component);
function (_React$PureComponent) {
_inheritsLoose(Pannable, _React$PureComponent);

@@ -21,3 +21,3 @@ function Pannable() {

_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
_this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
_this.state = {

@@ -322,3 +322,3 @@ target: null,

return Pannable;
}(React.Component);
}(React.PureComponent);

@@ -325,0 +325,0 @@ Pannable.defaultProps = {

46

es/utils/motion.js

@@ -38,4 +38,4 @@ export function getAdjustedContentOffset(offset, size, cSize, name) {

var redirect = acc > 0 ? 1 : -1;
return redirect * Math.min(Math.abs(velocity), Math.sqrt(redirect * acc * size));
var direction = acc < 0 ? -1 : 1;
return direction * Math.min(Math.abs(velocity), Math.sqrt(direction * acc * size));
}

@@ -74,4 +74,4 @@

var dist = offsetEnd - offset;
var redirect = acc > 0 ? 1 : -1;
var velocityH = redirect * Math.sqrt(0.5 * velocity * velocity + acc * dist);
var direction = acc < 0 ? -1 : 1;
var velocityH = direction * Math.sqrt(0.5 * velocity * velocity + acc * dist);
var timeH = acc ? (velocityH - velocity) / acc : 0;

@@ -109,2 +109,40 @@ var time = acc ? (2 * velocityH - velocity) / acc : 0;

};
}
export function calculateRectOffset(rOrigin, rSize, align, offset, size, name) {
if (name) {
var nOffset;
if (align === 'auto') {
var direction = size < rSize ? -1 : 1;
nOffset = -rOrigin + direction * Math.max(0, Math.min(direction * (rOrigin + offset), direction * (size - rSize)));
} else {
if (align === 'start') {
align = 0;
} else if (align === 'center') {
align = 0.5;
} else if (align === 'end') {
align = 1;
}
if (typeof align !== 'number' || isNaN(align)) {
align = 0.5;
}
nOffset = -rOrigin + align * (size - rSize);
}
return nOffset;
}
if (typeof align !== 'object') {
align = {
x: align,
y: align
};
}
return {
x: calculateRectOffset(rOrigin.x, rSize.width, align.x, offset.x, size.width, 'x'),
y: calculateRectOffset(rOrigin.y, rSize.height, align.y, offset.y, size.height, 'y')
};
}

10

lib/GeneralContent.js

@@ -18,4 +18,4 @@ "use strict";

/*#__PURE__*/
function (_React$Component) {
(0, _inheritsLoose2.default)(GeneralContent, _React$Component);
function (_React$PureComponent) {
(0, _inheritsLoose2.default)(GeneralContent, _React$PureComponent);

@@ -29,3 +29,3 @@ function GeneralContent() {

_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
_this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
_this.resizeRef = _react.default.createRef();

@@ -111,7 +111,7 @@ return _this;

style: style
}, children);
}, typeof children === 'function' ? children(this) : children);
};
return GeneralContent;
}(_react.default.Component);
}(_react.default.PureComponent);

@@ -118,0 +118,0 @@ exports.default = GeneralContent;

268

lib/GridContent.js

@@ -8,64 +8,12 @@ "use strict";

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
function calculateDerivedState(count, widthFn, hash, xList, hashDict) {
var shouldUpdateXList = xList.length !== count;
var nextXList = [];
var nextWidth = 0;
var nextHashDict;
var nextState = {};
for (var index = 0; index < count; index++) {
var width = void 0;
if (typeof widthFn === 'number') {
width = widthFn;
} else {
var hashKey = hash({
index: index
});
width = hashDict[hashKey];
if (width === undefined) {
width = widthFn({
index: index
});
if (!nextHashDict) {
nextHashDict = (0, _extends2.default)({}, hashDict);
}
nextHashDict[hashKey] = width;
}
}
nextWidth += width;
if (xList[index] !== nextWidth) {
shouldUpdateXList = true;
}
nextXList[index] = nextWidth;
}
if (shouldUpdateXList) {
nextState.xList = nextXList;
}
if (nextHashDict) {
nextState.hashDict = nextHashDict;
}
nextState.width = nextWidth;
return nextState;
}
var GridContent =
/*#__PURE__*/
function (_React$Component) {
(0, _inheritsLoose2.default)(GridContent, _React$Component);
function (_React$PureComponent) {
(0, _inheritsLoose2.default)(GridContent, _React$PureComponent);

@@ -79,3 +27,3 @@ function GridContent() {

_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
_this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
_this.state = {

@@ -86,4 +34,4 @@ size: {

},
columnHashDict: {},
rowHashDict: {},
widthDict: {},
heightDict: {},
xList: [],

@@ -96,41 +44,41 @@ yList: []

GridContent.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
var pad = props.pad,
columnWidth = props.columnWidth,
var columnWidth = props.columnWidth,
rowHeight = props.rowHeight,
columnCount = props.columnCount,
rowCount = props.rowCount,
rowHash = props.rowHash,
columnHash = props.columnHash;
rowHeightHash = props.rowHeightHash,
columnWidthHash = props.columnWidthHash,
onResize = props.onResize;
var xList = state.xList,
yList = state.yList,
columnHashDict = state.columnHashDict,
rowHashDict = state.rowHashDict,
widthDict = state.widthDict,
heightDict = state.heightDict,
size = state.size;
var nextState = {};
var nextSize = (0, _extends2.default)({}, size);
var rowState = calculateDerivedState(rowCount, rowHeight, rowHash, yList, rowHashDict);
var rowState = calculateDerivedState(rowCount, rowHeight, rowHeightHash, yList, heightDict);
if (rowState.xList) {
nextState.yList = rowState.xList;
if (rowState.originList) {
nextState.yList = rowState.originList;
}
if (rowState.hashDict) {
nextState.rowHashDict = rowState.hashDict;
if (rowState.sizeDict) {
nextState.heightDict = rowState.sizeDict;
}
nextSize.height = rowState.width;
var columnState = calculateDerivedState(columnCount, columnWidth, columnHash, xList, columnHashDict);
nextSize.height = rowState.size;
var columnState = calculateDerivedState(columnCount, columnWidth, columnWidthHash, xList, widthDict);
if (columnState.xList) {
nextState.xList = columnState.xList;
if (columnState.originList) {
nextState.xList = columnState.originList;
}
if (columnState.hashDict) {
nextState.columnHashDict = columnState.hashDict;
if (columnState.sizeDict) {
nextState.widthDict = columnState.sizeDict;
}
nextSize.width = columnState.width;
nextSize.width = columnState.size;
if (nextSize.width !== size.width || nextSize.height !== size.height) {
pad.setContentSize(nextSize);
onResize(nextSize);
nextState.size = nextSize;

@@ -144,15 +92,18 @@ }

_proto.scrollTo = function scrollTo() {};
_proto._needsRenderCell = function _needsRenderCell(_ref) {
var x = _ref.x,
y = _ref.y,
width = _ref.width,
height = _ref.height;
var pad = this.props.pad;
var contentOffset = pad.getContentOffset();
var boundingSize = pad.getSize();
var dx = x + contentOffset.x;
var dy = y + contentOffset.y;
return -0.25 * boundingSize.width < dx + width && dx < 1.25 * boundingSize.width && -0.25 * boundingSize.height < dy + height && dy < 1.25 * boundingSize.height;
_proto.getCellRect = function getCellRect(_ref) {
var rowIndex = _ref.rowIndex,
columnIndex = _ref.columnIndex;
var _this$state = this.state,
xList = _this$state.xList,
yList = _this$state.yList;
var x = xList[columnIndex - 1] || 0;
var y = yList[rowIndex - 1] || 0;
var x2 = xList[columnIndex] || 0;
var y2 = yList[rowIndex] || 0;
return {
x: x,
y: y,
width: x2 - x,
height: y2 - y
};
};

@@ -162,7 +113,14 @@

var _this$props = this.props,
visibleRect = _this$props.visibleRect,
renderCell = _this$props.renderCell,
cellKey = _this$props.cellKey;
var _this$state = this.state,
xList = _this$state.xList,
yList = _this$state.yList;
cellKey = _this$props.cellKey,
children = _this$props.children;
if (typeof children === 'function') {
return children(this);
}
var _this$state2 = this.state,
xList = _this$state2.xList,
yList = _this$state2.yList;
var grids = [];

@@ -172,19 +130,26 @@

for (var columnIndex = 0; columnIndex < xList.length; columnIndex++) {
var x = columnIndex === 0 ? 0 : xList[columnIndex - 1];
var y = rowIndex === 0 ? 0 : yList[rowIndex - 1];
var width = xList[columnIndex] - x;
var height = yList[rowIndex] - y;
var cellRect = this.getCellRect({
rowIndex: rowIndex,
columnIndex: columnIndex
});
if (this._needsRenderCell({
x: x,
y: y,
width: width,
height: height
if (needsRender({
x: cellRect.x,
y: cellRect.y
}, {
width: cellRect.width,
height: cellRect.height
}, {
x: visibleRect.x,
y: visibleRect.y
}, {
width: visibleRect.width,
height: visibleRect.height
})) {
var cellStyle = {
position: 'absolute',
left: x,
top: y,
width: width,
height: height
left: cellRect.x,
top: cellRect.y,
width: cellRect.width,
height: cellRect.width
};

@@ -209,22 +174,18 @@ grids.push(_react.default.createElement("div", {

return GridContent;
}(_react.default.Component);
}(_react.default.PureComponent);
exports.default = GridContent;
GridContent.defaultProps = {
pad: null,
rowCount: 0,
columnCount: 0,
rowCount: 0,
rowHeight: 0,
columnWidth: 0,
rowHeight: 0,
rowHash: function rowHash(_ref2) {
rowHeightHash: function rowHeightHash(_ref2) {
var rowIndex = _ref2.rowIndex;
return rowIndex;
},
columnHash: function columnHash(_ref3) {
columnWidthHash: function columnWidthHash(_ref3) {
var columnIndex = _ref3.columnIndex;
return columnIndex;
},
renderCell: function renderCell() {
return null;
},
cellKey: function cellKey(_ref4) {

@@ -234,3 +195,74 @@ var columnIndex = _ref4.columnIndex,

return rowIndex + '-' + columnIndex;
},
renderCell: function renderCell() {
return null;
},
visibleRect: {
x: 0,
y: 0,
width: 0,
height: 0
},
onResize: function onResize() {}
};
function needsRender(origin, size, vOrigin, vSize, name) {
if (name) {
var dOrigin = origin - vOrigin;
return -0.25 * vSize < dOrigin + size && dOrigin < 1.25 * vSize;
}
};
return needsRender(origin.x, size.width, vOrigin.x, vSize.width, 'x') && needsRender(origin.y, size.height, vOrigin.y, vSize.height, 'y');
}
function calculateDerivedState(count, sizeFn, sizeHashFn, originList, sizeDict) {
var shouldUpdateOriginList = originList.length !== count;
var nextOriginList = [];
var nextSize = 0;
var nextSizeDict;
var nextState = {};
for (var index = 0; index < count; index++) {
var size = void 0;
if (typeof sizeFn === 'number') {
size = sizeFn;
} else {
var sizeHash = sizeHashFn({
index: index
});
size = sizeDict[sizeHash];
if (size === undefined) {
size = sizeFn({
index: index
});
if (!nextSizeDict) {
nextSizeDict = (0, _extends2.default)({}, sizeDict);
}
nextSizeDict[sizeHash] = size;
}
}
nextSize += size;
if (originList[index] !== nextSize) {
shouldUpdateOriginList = true;
}
nextOriginList[index] = nextSize;
}
if (shouldUpdateOriginList) {
nextState.originList = nextOriginList;
}
if (nextSizeDict) {
nextState.sizeDict = nextSizeDict;
}
nextState.size = nextSize;
return nextState;
}

49

lib/Pad.js

@@ -28,4 +28,4 @@ "use strict";

/*#__PURE__*/
function (_React$Component) {
(0, _inheritsLoose2.default)(Pad, _React$Component);
function (_React$PureComponent) {
(0, _inheritsLoose2.default)(Pad, _React$PureComponent);

@@ -35,3 +35,3 @@ function Pad(props) {

_this = _React$Component.call(this, props) || this;
_this = _React$PureComponent.call(this, props) || this;

@@ -396,8 +396,29 @@ _this._onDragStart = function (_ref) {

_proto.scrollToRect = function scrollToRect(_ref18) {
var rect = _ref18.rect,
_ref18$align = _ref18.align,
align = _ref18$align === void 0 ? 'auto' : _ref18$align,
animated = _ref18.animated;
var _this$state = this.state,
contentOffset = _this$state.contentOffset,
size = _this$state.size;
var offset = (0, _motion.calculateRectOffset)({
x: rect.x,
y: rect.y
}, {
width: rect.width,
height: rect.height
}, align, contentOffset, size);
this.scrollTo({
offset: offset,
animated: animated
});
};
_proto._decelerate = function _decelerate(interval) {
this.setState(function (_ref18) {
var contentVelocity = _ref18.contentVelocity,
contentOffset = _ref18.contentOffset,
decelerationEndOffset = _ref18.decelerationEndOffset,
decelerationRate = _ref18.decelerationRate;
this.setState(function (_ref19) {
var contentVelocity = _ref19.contentVelocity,
contentOffset = _ref19.contentOffset,
decelerationEndOffset = _ref19.decelerationEndOffset,
decelerationRate = _ref19.decelerationRate;

@@ -428,6 +449,6 @@ if (!decelerationEndOffset) {

boundingProps = (0, _objectWithoutPropertiesLoose2.default)(_this$props2, ["width", "height", "contentWidth", "contentHeight", "scrollEnabled", "pagingEnabled", "directionalLockEnabled", "style", "children"]);
var _this$state = this.state,
size = _this$state.size,
contentSize = _this$state.contentSize,
contentOffset = _this$state.contentOffset;
var _this$state2 = this.state,
size = _this$state2.size,
contentSize = _this$state2.contentSize,
contentOffset = _this$state2.contentOffset;

@@ -461,7 +482,7 @@ var boundingStyles = _StyleSheet.default.create((0, _extends2.default)({

style: contentStyles
}, _react.default.isValidElement(children) ? children : children(this)));
}, typeof children === 'function' ? children(this) : children));
};
return Pad;
}(_react.default.Component);
}(_react.default.PureComponent);

@@ -468,0 +489,0 @@ exports.default = Pad;

8

lib/Pannable.js

@@ -22,4 +22,4 @@ "use strict";

/*#__PURE__*/
function (_React$Component) {
(0, _inheritsLoose2.default)(Pannable, _React$Component);
function (_React$PureComponent) {
(0, _inheritsLoose2.default)(Pannable, _React$PureComponent);

@@ -33,3 +33,3 @@ function Pannable() {

_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
_this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
_this.state = {

@@ -335,3 +335,3 @@ target: null,

return Pannable;
}(_react.default.Component);
}(_react.default.PureComponent);

@@ -338,0 +338,0 @@ exports.default = Pannable;

48

lib/utils/motion.js

@@ -9,2 +9,3 @@ "use strict";

exports.calculateDeceleration = calculateDeceleration;
exports.calculateRectOffset = calculateRectOffset;

@@ -49,4 +50,4 @@ function getAdjustedContentOffset(offset, size, cSize, name) {

var redirect = acc > 0 ? 1 : -1;
return redirect * Math.min(Math.abs(velocity), Math.sqrt(redirect * acc * size));
var direction = acc < 0 ? -1 : 1;
return direction * Math.min(Math.abs(velocity), Math.sqrt(direction * acc * size));
}

@@ -87,4 +88,4 @@

var dist = offsetEnd - offset;
var redirect = acc > 0 ? 1 : -1;
var velocityH = redirect * Math.sqrt(0.5 * velocity * velocity + acc * dist);
var direction = acc < 0 ? -1 : 1;
var velocityH = direction * Math.sqrt(0.5 * velocity * velocity + acc * dist);
var timeH = acc ? (velocityH - velocity) / acc : 0;

@@ -122,2 +123,41 @@ var time = acc ? (2 * velocityH - velocity) / acc : 0;

};
}
function calculateRectOffset(rOrigin, rSize, align, offset, size, name) {
if (name) {
var nOffset;
if (align === 'auto') {
var direction = size < rSize ? -1 : 1;
nOffset = -rOrigin + direction * Math.max(0, Math.min(direction * (rOrigin + offset), direction * (size - rSize)));
} else {
if (align === 'start') {
align = 0;
} else if (align === 'center') {
align = 0.5;
} else if (align === 'end') {
align = 1;
}
if (typeof align !== 'number' || isNaN(align)) {
align = 0.5;
}
nOffset = -rOrigin + align * (size - rSize);
}
return nOffset;
}
if (typeof align !== 'object') {
align = {
x: align,
y: align
};
}
return {
x: calculateRectOffset(rOrigin.x, rSize.width, align.x, offset.x, size.width, 'x'),
y: calculateRectOffset(rOrigin.y, rSize.height, align.y, offset.y, size.height, 'y')
};
}

2

package.json
{
"name": "react-pannable",
"version": "0.2.1",
"version": "0.2.2",
"description": "",

@@ -5,0 +5,0 @@ "keywords": [

36

README.md

@@ -64,2 +64,4 @@ # react-pannable

type Size = { width: number, height: number };
type Rect = { x: number, y: number, width: number, height: number };
type Align = 'auto' | 'center' | 'start' | 'end' | number;
type PadEvent = {

@@ -95,2 +97,6 @@ contentOffset: Point,

##### scrollToRect({ rect: Rect, align: Align, animated: boolean })
Scrolls a specific area of the content so that it is visible.
### GeneralContent

@@ -112,4 +118,34 @@

### GridContent
`GridContent` provides grid layout of content.
```js
type Size = { width: number, height: number };
type Rect = { x: number, y: number, width: number, height: number };
```
#### Prop Types
| Property | Type | DefaultValue | Description |
| :-------------- | :-------------: | :---------------------------------------------------------: | :------------------------------------------------------------ |
| rowCount | number | 0 | the number of rows. |
| columnCount | number | 0 | the number of columns. |
| rowHeight | number,function | 0 | the height of the specified row. |
| columnWidth | number,function | 0 | the width of the specified column. |
| rowHeightHash | function | ({ rowIndex }) => rowIndex | the hash of the row's height. |
| columnWidthHash | function | ({ columnIndex }) => columnIndex | the hash of the column's width. |
| cellKey | function | ({ columnIndex, rowIndex }) => rowIndex + '-' + columnIndex | the key of the specified cell. |
| renderCell | function | () => null | the renderer of the specified cell. |
| 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) => element` |
#### Public Methods
##### getCellRect({ rowIndex: number, columnIndex: number })
Returns the area of cell at the specified indexes.
## License
[MIT License](./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