react-smart-scroller - npm Package Compare versions

Comparing version 1.1.16 to 1.1.17

dist/react-smart-scroller.cjs.development.js

@@ -1161,3 +1161,2 @@ 'use strict';
       var scrollValue = -checkedPage * overflowRef.offsetWidth;
-      console.log(position, scrollValue);
       overflowRef.style.transform = "translate(" + scrollValue + "px)";
@@ -1164,0 +1163,0 @@ this.setState({

dist/react-smart-scroller.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}Object.defineProperty(exports,"__esModule",{value:!0});var e,n=t(require("react")),o=t(require("styled-components"));function r(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function i(t,e,n){return e&&r(t.prototype,e),n&&r(t,n),t}function s(){return(s=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t}).apply(this,arguments)}function l(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,t.__proto__=e}function a(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function u(t,e){return e||(e=t.slice(0)),t.raw=e,t}!function(t){t[t.One=1]="One",t[t.Two=2]="Two",t[t.Three=3]="Three",t[t.Four=4]="Four"}(e||(e={}));var c=function(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];return e.every(Boolean)},d=function(){},h=function(t){return t?Number(t.toString().replace("px","")):void 0},f=function(t,n,o,r,i){var l={top:0,right:0,bottom:0,left:0};if(!(t||n||o||r||i))return l;if(!t)return s({},l,{right:h(o),left:h(n),top:h(r),bottom:h(i)});var a=t.toString().split(" "),u=a.length,c=a.map(h);switch(u){case e.One:var d=c[0];return{top:d,right:d,bottom:d,left:d};case e.Two:var f=c[0],v=c[1];return{top:f,right:v,bottom:f,left:v};case e.Three:var p=c[1];return{top:c[0],right:p,bottom:c[2],left:p};case e.Four:default:return{top:c[0],right:c[1],bottom:c[2],left:c[3]}}},v=function(){return"undefined"==typeof window},p=function(t){return!v()&&navigator.userAgent.includes(t)},g=function(){return p("Mac")},m=function(){return p("Android")||p("iPhone")||p("iPad")};function w(){var t=u(["\n    position: absolute;\n"]);return w=function(){return t},t}function C(){var t=u(["\n    position: relative;\n    background-color: ",";\n    cursor: pointer;\n    width: 10px;\n    height: 100%;\n"]);return C=function(){return t},t}function b(){var t=u(["\n    position: absolute;\n    cursor: pointer;\n    right: 0;\n    height: 100%;\n    background-color: ",";\n    top: 0;\n    width: 10px;\n    display: flex;\n    justify-content: center;\n"]);return b=function(){return t},t}function M(){var t=u(["\n    box-sizing: border-box;\n"]);return M=function(){return t},t}function x(){var t=u(["\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    overflow-x: hidden;\n    overflow-y: scroll;\n    margin-right: -20px;\n    -webkit-overflow-scrolling: touch;\n"]);return x=function(){return t},t}var y=function(t){function e(e){var o;return(o=t.call(this,e)||this).state={scrollContainerHeight:0,deltaYOrigin:0,deltaY:0,thumbWidth:0,trackWidth:0,scrollHeight:0,scrollTop:0,padding:o.trackPadding,ratio:1},o.overflowContainerRef=n.createRef(),o.thumbRef=n.createRef(),o.trackRef=n.createRef(),o.measureContainers=o.measureContainers.bind(a(o)),o.onMouseDown=o.onMouseDown.bind(a(o)),o.onMouseDrag=o.onMouseDrag.bind(a(o)),o.onOverflowContentScroll=o.onOverflowContentScroll.bind(a(o)),o.deleteMouseMoveEvent=o.deleteMouseMoveEvent.bind(a(o)),o.onScrollbarClick=o.onScrollbarClick.bind(a(o)),o.onOverflowContentMouseDown=o.onOverflowContentMouseDown.bind(a(o)),o.onOverflowContentDrag=o.onOverflowContentDrag.bind(a(o)),o.deleteOverflowMouseMoveEvent=o.deleteOverflowMouseMoveEvent.bind(a(o)),o}l(e,t);var o=e.prototype;return o.componentDidMount=function(){window.addEventListener("resize",this.measureContainers),window.addEventListener("mouseup",this.deleteMouseMoveEvent),window.addEventListener("transitionend",this.measureContainers),window.addEventListener("mouseup",this.deleteOverflowMouseMoveEvent),window.addEventListener("load",this.measureContainers)},o.componentWillUnmount=function(){window.removeEventListener("resize",this.measureContainers),window.removeEventListener("mouseup",this.deleteMouseMoveEvent),window.removeEventListener("transitionend",this.measureContainers),window.removeEventListener("mouseup",this.deleteOverflowMouseMoveEvent),window.removeEventListener("load",this.measureContainers)},o.setStartPosition=function(){var t=this.props.startAt,e=this.overflowContainerRef.current,n=this.startElement;this.measureContainers(),e&&n&&(e.scrollTop=n.offsetTop-(t&&t.center?(e.clientHeight-n.clientHeight)/2:0))},o.scrollContainerReducedHeight=function(t){var e=this.state.padding;return t-(e.top+e.bottom)},o.measureContainers=function(t){var e=this,n=this.overflowContainerRef.current,o=this.thumbRef.current,r=this.trackRef.current,i=c(n,o,r);if(i){var s=this.scrollContainerReducedHeight(n.clientHeight);this.setState({scrollContainerHeight:s,thumbWidth:o.offsetWidth,trackWidth:r.clientWidth,scrollHeight:n.scrollHeight,ratio:(s-o.offsetHeight)/(n.scrollHeight-n.clientHeight)},(function(){t&&"load"===t.type&&e.setStartPosition()}))}if(i&&o.offsetTop+o.offsetHeight>n.clientHeight){var l=n.clientHeight-o.offsetHeight;n.scroll(0,n.scrollHeight),o.style.top=l+"px"}},o.onMouseDown=function(t){t.preventDefault();var e=this.thumbRef.current;e&&this.overflowContainerRef.current&&this.setState({deltaYOrigin:e.offsetTop,deltaY:t.clientY+this.state.padding.top}),window.addEventListener("mousemove",this.onMouseDrag)},o.onScrollbarClick=function(t){var e=t.clientY,n=this.state.padding,o=this.thumbRef.current,r=this.overflowContainerRef.current;if(c(o,r,e>=(h(o.style.top)||0)+r.getBoundingClientRect().top+n.top,e<=(h(o.style.top)||0)+r.getBoundingClientRect().top+o.offsetHeight+n.top))return null;var i=(r.scrollHeight-r.clientHeight)/(this.state.scrollContainerHeight-o.offsetHeight),s=r.getBoundingClientRect().top+o.offsetHeight/2+n.top;return r.scroll({top:i*(e-s),left:0,behavior:"smooth"})},o.deleteMouseMoveEvent=function(){window.removeEventListener("mousemove",this.onMouseDrag)},o.deleteOverflowMouseMoveEvent=function(){window.removeEventListener("mousemove",this.onOverflowContentDrag)},o.onMouseDrag=function(t){var e=this.state,n=this.overflowContainerRef.current,o=this.thumbRef.current,r=e.scrollContainerHeight-o.offsetHeight,i=t.clientY-e.deltaY+e.deltaYOrigin+e.padding.top,s=i>=0&&i<=r,l=c(Boolean(this.overflowContainerRef.current),Boolean(this.thumbRef.current));if(l&&!s){var a=i>0?n.scrollHeight-n.offsetHeight:0;o.style.top=(i<0?0:r)+"px",n.scroll(0,a)}l&&s&&(n.scroll(0,(n.scrollHeight-n.offsetHeight)/r*i),o.style.top=i+"px")},o.onOverflowContentScroll=function(){var t=this.thumbRef.current,e=this.overflowContainerRef.current;e&&t&&(t.style.top=e.scrollTop*this.state.ratio+"px")},o.onOverflowContentMouseDown=function(t){t.preventDefault();var e=this.overflowContainerRef.current;e&&this.setState({deltaY:t.clientY,scrollTop:e.scrollTop}),window.addEventListener("mousemove",this.onOverflowContentDrag)},o.onOverflowContentDrag=function(t){var e=this.state,n=this.overflowContainerRef.current;n&&0!==t.clientY&&n.scroll(0,e.scrollTop-(t.clientY-e.deltaY))},o.renderThumb=function(){var t=this.state,e=t.scrollContainerHeight,o=Number((100*e/t.scrollHeight).toFixed(0))*e/100+"px";return this.props.thumb?n.cloneElement(this.props.thumb,{ref:this.thumbRef,onMouseDown:this.onMouseDown,style:s({top:0,position:"relative",cursor:"pointer"},this.props.thumb.props.style)}):n.createElement(S,{ref:this.thumbRef,onMouseDown:this.onMouseDown,style:{height:o}})},o.renderScrollbar=function(){var t=!m()&&this.shouldRenderScrollbar;return n.createElement(O,{ref:this.trackRef,onClick:this.onScrollbarClick,style:s({color:"#bdc3c7",right:this.rightOffset,display:t?"flex":"none"},this.props.trackProps)},n.createElement(D,null,this.renderThumb()))},o.renderChildren=function(){var t=this,e=this.props.numCols,o=this.props.spacing/2,r=this.props.children;return n.Children.map(r,(function(i,l){var a=l!==n.Children.count(r)-1?"paddingBottom: "+o+"px":void 0,u=0!==l?"paddingTop: "+o+"px":void 0,c=e?"calc(100% / "+e+")":"auto",d=n.cloneElement(r[l],{style:s({display:"flex"},r[l].props.style)});return n.createElement(R,{id:"react-smart-scroller-"+l,style:{padding:o+"px 0",height:c,paddingTop:u,paddingBottom:a,marginRight:t.contentMargin}},d)}))},o.render=function(){var t=this.props,e=t.draggable;return n.createElement("div",{style:t.style},n.createElement(E,{style:{cursor:e?"pointer":"unset"},ref:this.overflowContainerRef,onScroll:this.onOverflowContentScroll,onMouseDown:e?this.onOverflowContentMouseDown:d},this.renderChildren()),this.renderScrollbar())},i(e,[{key:"shouldRenderScrollbar",get:function(){var t=this.overflowContainerRef.current,e=this.props.numCols;return!e&&t?t.clientHeight<t.scrollHeight:!(t&&t.children.length<=e)}},{key:"trackPadding",get:function(){var t=this.props.trackProps;return t?f(t.padding,t.paddingLeft,t.paddingRight,t.paddingTop,t.paddingBottom):{top:0,right:0,bottom:0,left:0}}},{key:"contentMargin",get:function(){var t=this.state,e=t.thumbWidth,n=t.trackWidth,o=n>e?n:e,r=g()?o+20:o;return!m()&&this.shouldRenderScrollbar?r+10+"px":"20px"}},{key:"rightOffset",get:function(){return this.state.thumbWidth>this.state.trackWidth?(this.state.thumbWidth-this.state.trackWidth)/2:0}},{key:"startElement",get:function(){if(this.props.startAt)return document.getElementById("react-smart-scroller-"+this.props.startAt.startIndex)}}]),e}(n.Component),E=o.div(x()),R=o.div(M()),O=o.div(b(),"#bdc3c7"),S=o.div(C(),"#2ecc71"),D=o.div(w());function k(){var t=u(["\n    position: relative;\n    left: 0;\n    background-color: ",";\n    cursor: pointer;\n    width: 100px;\n    height: 10px;\n"]);return k=function(){return t},t}function L(){var t=u(["\n    position: absolute;\n    cursor: pointer;\n    left: 0;\n    width: 100%;\n    background-color: ",";\n    bottom: 0;\n    height: 10px;\n    display: flex;\n    align-items: center;\n"]);return L=function(){return t},t}function W(){var t=u(["\n    flex: 0 0 auto;\n    box-sizing: border-box;\n"]);return W=function(){return t},t}function H(){var t=u(["\n    display: flex;\n    overflow-x: scroll;\n    overflow-y: hidden;\n    margin-bottom: -20px;\n    -webkit-overflow-scrolling: touch;\n"]);return H=function(){return t},t}var P=function(t){function e(e){var o;return(o=t.call(this,e)||this).state={scrollContainerWidth:0,deltaXOrigin:0,deltaX:0,thumbHeight:0,trackHeight:0,scrollWidth:0,scrollLeft:0,padding:o.trackPadding,ratio:1},o.overflowContainerRef=n.createRef(),o.thumbRef=n.createRef(),o.trackRef=n.createRef(),o.measureContainers=o.measureContainers.bind(a(o)),o.onMouseDown=o.onMouseDown.bind(a(o)),o.onMouseDrag=o.onMouseDrag.bind(a(o)),o.onOverflowContentScroll=o.onOverflowContentScroll.bind(a(o)),o.deleteMouseMoveEvent=o.deleteMouseMoveEvent.bind(a(o)),o.onScrollbarClick=o.onScrollbarClick.bind(a(o)),o.onOverflowContentDrag=o.onOverflowContentDrag.bind(a(o)),o.onOverflowContentMouseDown=o.onOverflowContentMouseDown.bind(a(o)),o.deleteOverflowMouseMoveEvent=o.deleteOverflowMouseMoveEvent.bind(a(o)),o}l(e,t);var o=e.prototype;return o.componentDidMount=function(){window.addEventListener("resize",this.measureContainers),window.addEventListener("mouseup",this.deleteMouseMoveEvent),window.addEventListener("transitionend",this.measureContainers),window.addEventListener("mouseup",this.deleteOverflowMouseMoveEvent),window.addEventListener("load",this.measureContainers)},o.componentWillUnmount=function(){window.removeEventListener("resize",this.measureContainers),window.removeEventListener("mouseup",this.deleteMouseMoveEvent),window.removeEventListener("transitionend",this.measureContainers),window.removeEventListener("mouseup",this.deleteOverflowMouseMoveEvent),window.removeEventListener("load",this.measureContainers)},o.scrollContainerReducedWidth=function(t){var e=this.state.padding;return t-(e.left+e.right)},o.setStartPosition=function(){var t=this.props.startAt,e=this.overflowContainerRef.current,n=this.startElement;this.measureContainers(),e&&n&&(e.scrollLeft=n.offsetLeft-(t&&t.center?(e.clientWidth-n.clientWidth)/2:0))},o.measureContainers=function(t){var e=this,n=this.overflowContainerRef.current,o=this.thumbRef.current,r=this.trackRef.current,i=c(n,o,r);if(i){var s=this.scrollContainerReducedWidth(n.clientWidth);this.setState({scrollContainerWidth:s,thumbHeight:o.offsetHeight,trackHeight:r.clientHeight,scrollWidth:n.scrollWidth,ratio:(s-o.offsetWidth)/(n.scrollWidth-n.clientWidth)},(function(){t&&"load"===t.type&&e.setStartPosition()}))}if(i&&o.offsetLeft+o.clientWidth>n.clientWidth){var l=n.clientWidth-o.clientWidth;n.scroll(n.scrollWidth,0),o.style.left=l+"px"}},o.onMouseDown=function(t){t.preventDefault(),this.thumbRef.current&&this.setState({deltaXOrigin:this.thumbRef.current.offsetLeft,deltaX:t.clientX+this.state.padding.left}),window.addEventListener("mousemove",this.onMouseDrag)},o.onScrollbarClick=function(t){var e=t.clientX,n=this.thumbRef.current,o=this.overflowContainerRef.current;if(c(n,o,e>=n.offsetLeft+o.getBoundingClientRect().left,e<=n.offsetLeft+o.getBoundingClientRect().left+n.offsetWidth))return null;var r=(o.scrollWidth-o.clientWidth)/(this.state.scrollContainerWidth-n.offsetWidth),i=o.getBoundingClientRect().left+n.offsetWidth/2+this.state.padding.left;return o.scroll({left:r*(e-i),top:0,behavior:"smooth"})},o.deleteMouseMoveEvent=function(){window.removeEventListener("mousemove",this.onMouseDrag)},o.deleteOverflowMouseMoveEvent=function(){window.removeEventListener("mousemove",this.onOverflowContentDrag)},o.onMouseDrag=function(t){var e=this.state,n=this.overflowContainerRef.current,o=this.thumbRef.current,r=e.scrollContainerWidth-o.offsetWidth,i=t.clientX-e.deltaX+e.deltaXOrigin,s=i>=0&&i<=r,l=c(Boolean(this.overflowContainerRef.current),Boolean(this.thumbRef.current));if(l&&!s){var a=i>0?n.scrollWidth-n.clientWidth:0;o.style.left=(i<0?0:r)+"px",n.scroll(a,0)}l&&s&&(n.scroll((n.scrollWidth-n.clientWidth)/r*i,0),o.style.left=i+"px")},o.onOverflowContentScroll=function(){var t=this.thumbRef.current,e=this.overflowContainerRef.current;e&&t&&(t.style.left=e.scrollLeft*this.state.ratio+"px")},o.onOverflowContentMouseDown=function(t){t.preventDefault();var e=this.overflowContainerRef.current;e&&this.setState({deltaX:t.clientX,scrollLeft:e.scrollLeft}),window.addEventListener("mousemove",this.onOverflowContentDrag)},o.onOverflowContentDrag=function(t){var e=this.state,n=this.overflowContainerRef.current;n&&0!==t.clientX&&n.scroll(e.scrollLeft-(t.clientX-e.deltaX),0)},o.renderChildren=function(){var t=this,e=this.props.numCols,o=this.props.spacing/2,r=this.props.children;return n.Children.map(r,(function(i,s){var l=s!==n.Children.count(r)-1?"paddingRight: "+o+"px":void 0;return n.createElement(X,{id:"react-smart-scroller-"+s,style:{padding:"0 "+o+"px",flexBasis:e?"calc(100% / "+e+")":"unset",paddingRight:l,paddingLeft:0!==s?"paddingLeft: "+o+"px":void 0,marginBottom:t.contentMargin}},i)}))},o.renderThumb=function(){var t=this.state,e=t.scrollContainerWidth,o=Number((100*e/t.scrollWidth).toFixed(0))*e/100+"px";return this.props.thumb?n.cloneElement(this.props.thumb,{ref:this.thumbRef,onMouseDown:this.onMouseDown,style:s({left:0,position:"relative",cursor:"pointer"},this.props.thumb.props.style)}):n.createElement(I,{ref:this.thumbRef,onMouseDown:this.onMouseDown,style:{width:o}})},o.renderScrollbar=function(){var t=!m()&&this.shouldRenderScrollbar&&!this.props.pagination;return n.createElement(V,{ref:this.trackRef,onClick:this.onScrollbarClick,style:s({color:"#bdc3c7",bottom:this.bottomOffset,display:t?"flex":"none"},this.props.trackProps)},this.renderThumb())},o.render=function(){var t=this.props,e=t.draggable;return n.createElement("div",{style:t.style},n.createElement(T,{ref:this.overflowContainerRef,onScroll:this.onOverflowContentScroll,onMouseDown:e?this.onOverflowContentMouseDown:d,style:{cursor:e?"pointer":"unset"}},this.renderChildren()),this.renderScrollbar())},i(e,[{key:"shouldRenderScrollbar",get:function(){var t=this.overflowContainerRef.current,e=this.props.numCols;return!e&&t?t.clientWidth<t.scrollWidth:!(t&&t.children.length<=e)}},{key:"trackPadding",get:function(){var t=this.props.trackProps;return t?f(t.padding,t.paddingLeft,t.paddingRight,t.paddingTop,t.paddingBottom):{top:0,right:0,bottom:0,left:0}}},{key:"contentMargin",get:function(){var t=this.state,e=t.thumbHeight,n=t.trackHeight,o=n>e?n:e,r=g()?o+20:o;return!m()&&this.shouldRenderScrollbar?r+10+"px":"20px"}},{key:"bottomOffset",get:function(){return this.state.thumbHeight>this.state.trackHeight?(this.state.thumbHeight-this.state.trackHeight)/2:0}},{key:"startElement",get:function(){if(this.props.startAt)return document.getElementById("react-smart-scroller-"+this.props.startAt.startIndex)}}]),e}(n.Component);P.defaultProps={spacing:0,vertical:!1,draggable:!1,pagination:!1};var T=o.div(H()),X=o.div(W()),V=o.div(L(),"#bdc3c7"),I=o.div(k(),"#2ecc71");function B(){var t=u(["\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    margin: 0 3px;\n    cursor: pointer;\n"]);return B=function(){return t},t}function Y(){var t=u(["\n    border: solid ",";\n    border-width: 0 2px 2px 0;\n    display: inline-block;\n    padding: 6px;\n    transform: rotate(-45deg);\n    -webkit-transform: rotate(-45deg);\n    cursor: pointer;\n"]);return Y=function(){return t},t}function z(){var t=u(["\n    border: solid ",";\n    border-width: 0 2px 2px 0;\n    display: inline-block;\n    padding: 6px;\n    transform: rotate(135deg);\n    -webkit-transform: rotate(135deg);\n    cursor: pointer;\n"]);return z=function(){return t},t}function A(){var t=u(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 40px;\n"]);return A=function(){return t},t}function j(){var t=u(["\n    flex: 0 0 auto;\n    box-sizing: border-box;\n    width: 100%;\n"]);return j=function(){return t},t}function N(){var t=u(["\n    display: flex;\n    position: relative;\n"]);return N=function(){return t},t}function _(){var t=u(["\n    display: flex;\n    flex-direction: column;\n"]);return _=function(){return t},t}var F=function(t){function e(e){var o;return(o=t.call(this,e)||this).state={paginationIndex:0,numberOfViews:0,scrollValue:0,children:o.props.children,deltaX:0,scrollLeft:0,dragScroll:0,deltaY:0,horizontal:!1,lockedMove:!1},o.overflowContainerRef=n.createRef(),o.onNext=o.onNext.bind(a(o)),o.onPrevious=o.onPrevious.bind(a(o)),o.onDotClick=o.onDotClick.bind(a(o)),o.onTouchMove=o.onTouchMove.bind(a(o)),o.onTouchStart=o.onTouchStart.bind(a(o)),o.updatePosition=o.updatePosition.bind(a(o)),o.setStartPosition=o.setStartPosition.bind(a(o)),o.onOverflowContentDrag=o.onOverflowContentDrag.bind(a(o)),o.onOverflowContentMouseDown=o.onOverflowContentMouseDown.bind(a(o)),o.deleteOverflowMouseMoveEvent=o.deleteOverflowMouseMoveEvent.bind(a(o)),o}l(e,t);var o=e.prototype;return o.componentDidMount=function(){this.setState({numberOfViews:this.numberOfViews}),window.addEventListener("resize",this.updatePosition),window.addEventListener("touchstart",this.onTouchStart),window.addEventListener("touchmove",this.onTouchMove,{passive:!1}),window.addEventListener("touchend",this.deleteOverflowMouseMoveEvent),window.addEventListener("load",this.setStartPosition)},o.componentWillUnmount=function(){window.removeEventListener("resize",this.updatePosition),window.removeEventListener("touchstart",this.onTouchStart),window.removeEventListener("mousemove",this.onOverflowContentDrag),window.removeEventListener("mouseup",this.deleteOverflowMouseMoveEvent),window.removeEventListener("touchmove",this.onTouchMove),window.removeEventListener("touchend",this.deleteOverflowMouseMoveEvent),window.removeEventListener("load",this.setStartPosition)},o.setStartPosition=function(){var t=this.props,e=t.startAt,o=t.children,r=this.overflowContainerRef.current,i=this.props.numCols||1;if(r){var s=Math.ceil((e?e.startIndex:0)/i),l=n.Children.count(o),a=Math.ceil(l/i)-1,u=s<0?0:s>a?a:s,c=-u*r.offsetWidth;r.style.transform="translate("+c+"px)",this.setState({paginationIndex:u,scrollValue:c})}},o.updatePosition=function(){var t=this.props.children,e=this.overflowContainerRef.current,o=this.props.numCols||1,r=this.state.paginationIndex;if(e){var i=Math.ceil(r/o),s=n.Children.count(t),l=Math.ceil(s/o)-1,a=i<0?0:i>l?l:i,u=-a*e.offsetWidth;console.log(r,u),e.style.transform="translate("+u+"px)",this.setState({paginationIndex:a,scrollValue:u})}},o.onNext=function(){var t=this.overflowContainerRef.current,e=this.state,n=e.paginationIndex,o=e.scrollValue,r=this.props.paginationConfig;if(t&&n===this.numberOfViews-1&&r&&r.infinite)return t.style.transform="translate(0px)",this.setState({paginationIndex:0,scrollValue:0});if(t&&n<this.numberOfViews-1){var i=o-t.offsetWidth,s=n+1;return t.style.transform="translate("+i+"px)",this.setState({paginationIndex:s,scrollValue:i})}},o.onPrevious=function(){var t=this.overflowContainerRef.current,e=this.state,n=e.paginationIndex,o=e.scrollValue,r=this.props.paginationConfig;if(t&&0===n&&r&&r.infinite){var i=this.numberOfViews-1,s=i*t.offsetWidth;return t.style.transform="translate(-"+s+"px)",this.setState({paginationIndex:i,scrollValue:-s})}if(t&&n>0){var l=n-1,a=o+t.offsetWidth;return t.style.transform="translate("+a+"px)",this.setState({paginationIndex:l,scrollValue:a})}},o.onDotClick=function(t){var e=this.overflowContainerRef.current;if(e&&t!==this.state.paginationIndex){var n=-t*e.clientWidth;e.style.transform="translate("+n+"px)",this.setState({paginationIndex:t,scrollValue:n})}},o.onOverflowContentMouseDown=function(t){t.preventDefault();var e=this.overflowContainerRef.current,n=this.props.paginationConfig;e&&n&&n.draggable&&(e.style.transition="unset",e.style.transform="translate("+this.state.scrollValue+"px)",this.setState({deltaX:t.clientX,scrollLeft:this.state.scrollValue,dragScroll:this.state.scrollValue}),window.addEventListener("mousemove",this.onOverflowContentDrag),window.addEventListener("mouseup",this.deleteOverflowMouseMoveEvent))},o.onOverflowContentDrag=function(t){var e=this.state,n=this.overflowContainerRef.current,o=e.scrollLeft+(t.clientX-e.deltaX);n&&0!==t.clientX&&(n.style.transform="translate("+o+"px)",this.setState({dragScroll:o}))},o.onTouchStart=function(t){var e=this.state.scrollValue,n=t.touches.item(0),o=this.overflowContainerRef.current;this.setState({deltaX:n.clientX,scrollLeft:e,dragScroll:e,deltaY:n.clientY,horizontal:!1,lockedMove:!1}),o&&(o.style.transition="unset")},o.onTouchMove=function(t){var e=this.state,n=e.deltaX,o=e.scrollLeft,r=e.deltaY,i=e.horizontal,s=e.lockedMove,l=t.touches.item(0),a=this.overflowContainerRef.current,u=o+(l.clientX-n),c=this.props.paginationConfig,d=c&&c.minOffsetToChangeSlide||50;if(!i&&s)return null;Math.abs(l.clientY-r)>d&&!s&&this.setState({horizontal:!1,lockedMove:!0}),Math.abs(l.clientX-n)>d&&!s&&this.setState({horizontal:!0,lockedMove:!0}),Math.abs(l.clientX-n)>d&&t.preventDefault(),a&&0!==l.clientX&&(a.style.transform="translate("+u+"px)",this.setState({dragScroll:u}))},o.deleteOverflowMouseMoveEvent=function(){var t=this.overflowContainerRef.current,e=this.state,n=e.dragScroll,o=e.paginationIndex,r=e.scrollLeft,i=this.props.paginationConfig,s=i&&i.minOffsetToChangeSlide||150,l=i&&i.transitionTime||1;if(t&&-r+n<-s){var a=o===this.childrenCount-1,u=a?o*t.clientWidth:(o+1)*t.clientWidth;t.style.transition="all "+l+"s",t.style.transform="translate(-"+u+"px)",this.setState({paginationIndex:a?o:o+1,scrollValue:-u})}if(t&&-r+n>s){var d=0===o,h=d?0:(o-1)*t.clientWidth;t.style.transition="all "+l+"s",t.style.transform="translate(-"+h+"px)",this.setState({paginationIndex:d?o:o-1,scrollValue:-h})}c(t,-r+n>-s,-r+n<s)&&(t.style.transition="all "+l+"s",t.style.transform="translate(-"+o*t.clientWidth+"px)"),window.removeEventListener("mousemove",this.onOverflowContentDrag),window.removeEventListener("mouseup",this.deleteOverflowMouseMoveEvent)},o.renderChildren=function(){var t=this.props.numCols,e=this.props.spacing/2,o=this.props.children;return n.Children.map(o,(function(r,i){var s=i!==n.Children.count(o)-1?"paddingRight: "+e+"px":void 0;return n.createElement(G,{id:"react-smart-scroller-"+i,style:{padding:"0 "+e+"px",flexBasis:t?"calc(100% / "+t+")":"unset",paddingRight:s,paddingLeft:0!==i?"paddingLeft: "+e+"px":void 0}},r)}))},o.renderDots=function(){var t=this,e=this.props.paginationConfig;return Array.from(Array(this.numberOfViews)).map((function(o,r){return n.createElement(Z,{key:r,style:{backgroundColor:t.state.paginationIndex===r?e&&e.activeDotColor||"#2ecc71":e&&e.unactiveDotsColor||"#bdc3c7"},onClick:function(){return t.onDotClick(r)}})}))},o.renderPagination=function(){var t=this.props.renderPagination;return t?t({selectedDot:this.state.paginationIndex,onPrev:this.onPrevious,onNext:this.onNext,childrenCount:this.childrenCount,onDotClick:this.onDotClick}):n.createElement(J,null,n.createElement(K,{onClick:this.onPrevious}),this.renderDots(),n.createElement(Q,{onClick:this.onNext}))},o.render=function(){var t=this.props,e=t.paginationConfig;return n.createElement(U,{style:t.style},n.createElement(q,{ref:this.overflowContainerRef,style:{transition:"all "+(e&&e.transitionTime||1)+"s",flex:1},onMouseDown:m()?d:this.onOverflowContentMouseDown},this.renderChildren()),this.renderPagination())},i(e,[{key:"childrenCount",get:function(){return n.Children.count(this.props.children)}},{key:"numberOfViews",get:function(){return Math.ceil(this.childrenCount/(this.props.numCols||1))}}]),e}(n.Component),U=o.div(_()),q=o.div(N()),G=o.div(j()),J=o.div(A()),K=o.div(z(),"#000000"),Q=o.div(Y(),"#000000"),Z=o.div(B());function $(){var t=u(["\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    position: relative;\n"]);return $=function(){return t},t}var tt=function(t){function e(){return t.apply(this,arguments)||this}l(e,t);var o=e.prototype;return o.renderMain=function(){return n.createElement(this.props.pagination?F:this.props.vertical?y:P,Object.assign({},this.props))},o.render=function(){return v()?null:n.createElement(et,null,this.renderMain())},e}(n.Component),et=o.div($());exports.ReactSmartScroller=tt;
+"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}Object.defineProperty(exports,"__esModule",{value:!0});var e,n=t(require("react")),o=t(require("styled-components"));function r(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function i(t,e,n){return e&&r(t.prototype,e),n&&r(t,n),t}function s(){return(s=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t}).apply(this,arguments)}function l(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,t.__proto__=e}function a(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function u(t,e){return e||(e=t.slice(0)),t.raw=e,t}!function(t){t[t.One=1]="One",t[t.Two=2]="Two",t[t.Three=3]="Three",t[t.Four=4]="Four"}(e||(e={}));var c=function(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];return e.every(Boolean)},d=function(){},h=function(t){return t?Number(t.toString().replace("px","")):void 0},f=function(t,n,o,r,i){var l={top:0,right:0,bottom:0,left:0};if(!(t||n||o||r||i))return l;if(!t)return s({},l,{right:h(o),left:h(n),top:h(r),bottom:h(i)});var a=t.toString().split(" "),u=a.length,c=a.map(h);switch(u){case e.One:var d=c[0];return{top:d,right:d,bottom:d,left:d};case e.Two:var f=c[0],v=c[1];return{top:f,right:v,bottom:f,left:v};case e.Three:var p=c[1];return{top:c[0],right:p,bottom:c[2],left:p};case e.Four:default:return{top:c[0],right:c[1],bottom:c[2],left:c[3]}}},v=function(){return"undefined"==typeof window},p=function(t){return!v()&&navigator.userAgent.includes(t)},g=function(){return p("Mac")},m=function(){return p("Android")||p("iPhone")||p("iPad")};function w(){var t=u(["\n    position: absolute;\n"]);return w=function(){return t},t}function C(){var t=u(["\n    position: relative;\n    background-color: ",";\n    cursor: pointer;\n    width: 10px;\n    height: 100%;\n"]);return C=function(){return t},t}function b(){var t=u(["\n    position: absolute;\n    cursor: pointer;\n    right: 0;\n    height: 100%;\n    background-color: ",";\n    top: 0;\n    width: 10px;\n    display: flex;\n    justify-content: center;\n"]);return b=function(){return t},t}function M(){var t=u(["\n    box-sizing: border-box;\n"]);return M=function(){return t},t}function x(){var t=u(["\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    overflow-x: hidden;\n    overflow-y: scroll;\n    margin-right: -20px;\n    -webkit-overflow-scrolling: touch;\n"]);return x=function(){return t},t}var y=function(t){function e(e){var o;return(o=t.call(this,e)||this).state={scrollContainerHeight:0,deltaYOrigin:0,deltaY:0,thumbWidth:0,trackWidth:0,scrollHeight:0,scrollTop:0,padding:o.trackPadding,ratio:1},o.overflowContainerRef=n.createRef(),o.thumbRef=n.createRef(),o.trackRef=n.createRef(),o.measureContainers=o.measureContainers.bind(a(o)),o.onMouseDown=o.onMouseDown.bind(a(o)),o.onMouseDrag=o.onMouseDrag.bind(a(o)),o.onOverflowContentScroll=o.onOverflowContentScroll.bind(a(o)),o.deleteMouseMoveEvent=o.deleteMouseMoveEvent.bind(a(o)),o.onScrollbarClick=o.onScrollbarClick.bind(a(o)),o.onOverflowContentMouseDown=o.onOverflowContentMouseDown.bind(a(o)),o.onOverflowContentDrag=o.onOverflowContentDrag.bind(a(o)),o.deleteOverflowMouseMoveEvent=o.deleteOverflowMouseMoveEvent.bind(a(o)),o}l(e,t);var o=e.prototype;return o.componentDidMount=function(){window.addEventListener("resize",this.measureContainers),window.addEventListener("mouseup",this.deleteMouseMoveEvent),window.addEventListener("transitionend",this.measureContainers),window.addEventListener("mouseup",this.deleteOverflowMouseMoveEvent),window.addEventListener("load",this.measureContainers)},o.componentWillUnmount=function(){window.removeEventListener("resize",this.measureContainers),window.removeEventListener("mouseup",this.deleteMouseMoveEvent),window.removeEventListener("transitionend",this.measureContainers),window.removeEventListener("mouseup",this.deleteOverflowMouseMoveEvent),window.removeEventListener("load",this.measureContainers)},o.setStartPosition=function(){var t=this.props.startAt,e=this.overflowContainerRef.current,n=this.startElement;this.measureContainers(),e&&n&&(e.scrollTop=n.offsetTop-(t&&t.center?(e.clientHeight-n.clientHeight)/2:0))},o.scrollContainerReducedHeight=function(t){var e=this.state.padding;return t-(e.top+e.bottom)},o.measureContainers=function(t){var e=this,n=this.overflowContainerRef.current,o=this.thumbRef.current,r=this.trackRef.current,i=c(n,o,r);if(i){var s=this.scrollContainerReducedHeight(n.clientHeight);this.setState({scrollContainerHeight:s,thumbWidth:o.offsetWidth,trackWidth:r.clientWidth,scrollHeight:n.scrollHeight,ratio:(s-o.offsetHeight)/(n.scrollHeight-n.clientHeight)},(function(){t&&"load"===t.type&&e.setStartPosition()}))}if(i&&o.offsetTop+o.offsetHeight>n.clientHeight){var l=n.clientHeight-o.offsetHeight;n.scroll(0,n.scrollHeight),o.style.top=l+"px"}},o.onMouseDown=function(t){t.preventDefault();var e=this.thumbRef.current;e&&this.overflowContainerRef.current&&this.setState({deltaYOrigin:e.offsetTop,deltaY:t.clientY+this.state.padding.top}),window.addEventListener("mousemove",this.onMouseDrag)},o.onScrollbarClick=function(t){var e=t.clientY,n=this.state.padding,o=this.thumbRef.current,r=this.overflowContainerRef.current;if(c(o,r,e>=(h(o.style.top)||0)+r.getBoundingClientRect().top+n.top,e<=(h(o.style.top)||0)+r.getBoundingClientRect().top+o.offsetHeight+n.top))return null;var i=(r.scrollHeight-r.clientHeight)/(this.state.scrollContainerHeight-o.offsetHeight),s=r.getBoundingClientRect().top+o.offsetHeight/2+n.top;return r.scroll({top:i*(e-s),left:0,behavior:"smooth"})},o.deleteMouseMoveEvent=function(){window.removeEventListener("mousemove",this.onMouseDrag)},o.deleteOverflowMouseMoveEvent=function(){window.removeEventListener("mousemove",this.onOverflowContentDrag)},o.onMouseDrag=function(t){var e=this.state,n=this.overflowContainerRef.current,o=this.thumbRef.current,r=e.scrollContainerHeight-o.offsetHeight,i=t.clientY-e.deltaY+e.deltaYOrigin+e.padding.top,s=i>=0&&i<=r,l=c(Boolean(this.overflowContainerRef.current),Boolean(this.thumbRef.current));if(l&&!s){var a=i>0?n.scrollHeight-n.offsetHeight:0;o.style.top=(i<0?0:r)+"px",n.scroll(0,a)}l&&s&&(n.scroll(0,(n.scrollHeight-n.offsetHeight)/r*i),o.style.top=i+"px")},o.onOverflowContentScroll=function(){var t=this.thumbRef.current,e=this.overflowContainerRef.current;e&&t&&(t.style.top=e.scrollTop*this.state.ratio+"px")},o.onOverflowContentMouseDown=function(t){t.preventDefault();var e=this.overflowContainerRef.current;e&&this.setState({deltaY:t.clientY,scrollTop:e.scrollTop}),window.addEventListener("mousemove",this.onOverflowContentDrag)},o.onOverflowContentDrag=function(t){var e=this.state,n=this.overflowContainerRef.current;n&&0!==t.clientY&&n.scroll(0,e.scrollTop-(t.clientY-e.deltaY))},o.renderThumb=function(){var t=this.state,e=t.scrollContainerHeight,o=Number((100*e/t.scrollHeight).toFixed(0))*e/100+"px";return this.props.thumb?n.cloneElement(this.props.thumb,{ref:this.thumbRef,onMouseDown:this.onMouseDown,style:s({top:0,position:"relative",cursor:"pointer"},this.props.thumb.props.style)}):n.createElement(S,{ref:this.thumbRef,onMouseDown:this.onMouseDown,style:{height:o}})},o.renderScrollbar=function(){var t=!m()&&this.shouldRenderScrollbar;return n.createElement(O,{ref:this.trackRef,onClick:this.onScrollbarClick,style:s({color:"#bdc3c7",right:this.rightOffset,display:t?"flex":"none"},this.props.trackProps)},n.createElement(D,null,this.renderThumb()))},o.renderChildren=function(){var t=this,e=this.props.numCols,o=this.props.spacing/2,r=this.props.children;return n.Children.map(r,(function(i,l){var a=l!==n.Children.count(r)-1?"paddingBottom: "+o+"px":void 0,u=0!==l?"paddingTop: "+o+"px":void 0,c=e?"calc(100% / "+e+")":"auto",d=n.cloneElement(r[l],{style:s({display:"flex"},r[l].props.style)});return n.createElement(R,{id:"react-smart-scroller-"+l,style:{padding:o+"px 0",height:c,paddingTop:u,paddingBottom:a,marginRight:t.contentMargin}},d)}))},o.render=function(){var t=this.props,e=t.draggable;return n.createElement("div",{style:t.style},n.createElement(E,{style:{cursor:e?"pointer":"unset"},ref:this.overflowContainerRef,onScroll:this.onOverflowContentScroll,onMouseDown:e?this.onOverflowContentMouseDown:d},this.renderChildren()),this.renderScrollbar())},i(e,[{key:"shouldRenderScrollbar",get:function(){var t=this.overflowContainerRef.current,e=this.props.numCols;return!e&&t?t.clientHeight<t.scrollHeight:!(t&&t.children.length<=e)}},{key:"trackPadding",get:function(){var t=this.props.trackProps;return t?f(t.padding,t.paddingLeft,t.paddingRight,t.paddingTop,t.paddingBottom):{top:0,right:0,bottom:0,left:0}}},{key:"contentMargin",get:function(){var t=this.state,e=t.thumbWidth,n=t.trackWidth,o=n>e?n:e,r=g()?o+20:o;return!m()&&this.shouldRenderScrollbar?r+10+"px":"20px"}},{key:"rightOffset",get:function(){return this.state.thumbWidth>this.state.trackWidth?(this.state.thumbWidth-this.state.trackWidth)/2:0}},{key:"startElement",get:function(){if(this.props.startAt)return document.getElementById("react-smart-scroller-"+this.props.startAt.startIndex)}}]),e}(n.Component),E=o.div(x()),R=o.div(M()),O=o.div(b(),"#bdc3c7"),S=o.div(C(),"#2ecc71"),D=o.div(w());function k(){var t=u(["\n    position: relative;\n    left: 0;\n    background-color: ",";\n    cursor: pointer;\n    width: 100px;\n    height: 10px;\n"]);return k=function(){return t},t}function L(){var t=u(["\n    position: absolute;\n    cursor: pointer;\n    left: 0;\n    width: 100%;\n    background-color: ",";\n    bottom: 0;\n    height: 10px;\n    display: flex;\n    align-items: center;\n"]);return L=function(){return t},t}function W(){var t=u(["\n    flex: 0 0 auto;\n    box-sizing: border-box;\n"]);return W=function(){return t},t}function H(){var t=u(["\n    display: flex;\n    overflow-x: scroll;\n    overflow-y: hidden;\n    margin-bottom: -20px;\n    -webkit-overflow-scrolling: touch;\n"]);return H=function(){return t},t}var P=function(t){function e(e){var o;return(o=t.call(this,e)||this).state={scrollContainerWidth:0,deltaXOrigin:0,deltaX:0,thumbHeight:0,trackHeight:0,scrollWidth:0,scrollLeft:0,padding:o.trackPadding,ratio:1},o.overflowContainerRef=n.createRef(),o.thumbRef=n.createRef(),o.trackRef=n.createRef(),o.measureContainers=o.measureContainers.bind(a(o)),o.onMouseDown=o.onMouseDown.bind(a(o)),o.onMouseDrag=o.onMouseDrag.bind(a(o)),o.onOverflowContentScroll=o.onOverflowContentScroll.bind(a(o)),o.deleteMouseMoveEvent=o.deleteMouseMoveEvent.bind(a(o)),o.onScrollbarClick=o.onScrollbarClick.bind(a(o)),o.onOverflowContentDrag=o.onOverflowContentDrag.bind(a(o)),o.onOverflowContentMouseDown=o.onOverflowContentMouseDown.bind(a(o)),o.deleteOverflowMouseMoveEvent=o.deleteOverflowMouseMoveEvent.bind(a(o)),o}l(e,t);var o=e.prototype;return o.componentDidMount=function(){window.addEventListener("resize",this.measureContainers),window.addEventListener("mouseup",this.deleteMouseMoveEvent),window.addEventListener("transitionend",this.measureContainers),window.addEventListener("mouseup",this.deleteOverflowMouseMoveEvent),window.addEventListener("load",this.measureContainers)},o.componentWillUnmount=function(){window.removeEventListener("resize",this.measureContainers),window.removeEventListener("mouseup",this.deleteMouseMoveEvent),window.removeEventListener("transitionend",this.measureContainers),window.removeEventListener("mouseup",this.deleteOverflowMouseMoveEvent),window.removeEventListener("load",this.measureContainers)},o.scrollContainerReducedWidth=function(t){var e=this.state.padding;return t-(e.left+e.right)},o.setStartPosition=function(){var t=this.props.startAt,e=this.overflowContainerRef.current,n=this.startElement;this.measureContainers(),e&&n&&(e.scrollLeft=n.offsetLeft-(t&&t.center?(e.clientWidth-n.clientWidth)/2:0))},o.measureContainers=function(t){var e=this,n=this.overflowContainerRef.current,o=this.thumbRef.current,r=this.trackRef.current,i=c(n,o,r);if(i){var s=this.scrollContainerReducedWidth(n.clientWidth);this.setState({scrollContainerWidth:s,thumbHeight:o.offsetHeight,trackHeight:r.clientHeight,scrollWidth:n.scrollWidth,ratio:(s-o.offsetWidth)/(n.scrollWidth-n.clientWidth)},(function(){t&&"load"===t.type&&e.setStartPosition()}))}if(i&&o.offsetLeft+o.clientWidth>n.clientWidth){var l=n.clientWidth-o.clientWidth;n.scroll(n.scrollWidth,0),o.style.left=l+"px"}},o.onMouseDown=function(t){t.preventDefault(),this.thumbRef.current&&this.setState({deltaXOrigin:this.thumbRef.current.offsetLeft,deltaX:t.clientX+this.state.padding.left}),window.addEventListener("mousemove",this.onMouseDrag)},o.onScrollbarClick=function(t){var e=t.clientX,n=this.thumbRef.current,o=this.overflowContainerRef.current;if(c(n,o,e>=n.offsetLeft+o.getBoundingClientRect().left,e<=n.offsetLeft+o.getBoundingClientRect().left+n.offsetWidth))return null;var r=(o.scrollWidth-o.clientWidth)/(this.state.scrollContainerWidth-n.offsetWidth),i=o.getBoundingClientRect().left+n.offsetWidth/2+this.state.padding.left;return o.scroll({left:r*(e-i),top:0,behavior:"smooth"})},o.deleteMouseMoveEvent=function(){window.removeEventListener("mousemove",this.onMouseDrag)},o.deleteOverflowMouseMoveEvent=function(){window.removeEventListener("mousemove",this.onOverflowContentDrag)},o.onMouseDrag=function(t){var e=this.state,n=this.overflowContainerRef.current,o=this.thumbRef.current,r=e.scrollContainerWidth-o.offsetWidth,i=t.clientX-e.deltaX+e.deltaXOrigin,s=i>=0&&i<=r,l=c(Boolean(this.overflowContainerRef.current),Boolean(this.thumbRef.current));if(l&&!s){var a=i>0?n.scrollWidth-n.clientWidth:0;o.style.left=(i<0?0:r)+"px",n.scroll(a,0)}l&&s&&(n.scroll((n.scrollWidth-n.clientWidth)/r*i,0),o.style.left=i+"px")},o.onOverflowContentScroll=function(){var t=this.thumbRef.current,e=this.overflowContainerRef.current;e&&t&&(t.style.left=e.scrollLeft*this.state.ratio+"px")},o.onOverflowContentMouseDown=function(t){t.preventDefault();var e=this.overflowContainerRef.current;e&&this.setState({deltaX:t.clientX,scrollLeft:e.scrollLeft}),window.addEventListener("mousemove",this.onOverflowContentDrag)},o.onOverflowContentDrag=function(t){var e=this.state,n=this.overflowContainerRef.current;n&&0!==t.clientX&&n.scroll(e.scrollLeft-(t.clientX-e.deltaX),0)},o.renderChildren=function(){var t=this,e=this.props.numCols,o=this.props.spacing/2,r=this.props.children;return n.Children.map(r,(function(i,s){var l=s!==n.Children.count(r)-1?"paddingRight: "+o+"px":void 0;return n.createElement(X,{id:"react-smart-scroller-"+s,style:{padding:"0 "+o+"px",flexBasis:e?"calc(100% / "+e+")":"unset",paddingRight:l,paddingLeft:0!==s?"paddingLeft: "+o+"px":void 0,marginBottom:t.contentMargin}},i)}))},o.renderThumb=function(){var t=this.state,e=t.scrollContainerWidth,o=Number((100*e/t.scrollWidth).toFixed(0))*e/100+"px";return this.props.thumb?n.cloneElement(this.props.thumb,{ref:this.thumbRef,onMouseDown:this.onMouseDown,style:s({left:0,position:"relative",cursor:"pointer"},this.props.thumb.props.style)}):n.createElement(I,{ref:this.thumbRef,onMouseDown:this.onMouseDown,style:{width:o}})},o.renderScrollbar=function(){var t=!m()&&this.shouldRenderScrollbar&&!this.props.pagination;return n.createElement(V,{ref:this.trackRef,onClick:this.onScrollbarClick,style:s({color:"#bdc3c7",bottom:this.bottomOffset,display:t?"flex":"none"},this.props.trackProps)},this.renderThumb())},o.render=function(){var t=this.props,e=t.draggable;return n.createElement("div",{style:t.style},n.createElement(T,{ref:this.overflowContainerRef,onScroll:this.onOverflowContentScroll,onMouseDown:e?this.onOverflowContentMouseDown:d,style:{cursor:e?"pointer":"unset"}},this.renderChildren()),this.renderScrollbar())},i(e,[{key:"shouldRenderScrollbar",get:function(){var t=this.overflowContainerRef.current,e=this.props.numCols;return!e&&t?t.clientWidth<t.scrollWidth:!(t&&t.children.length<=e)}},{key:"trackPadding",get:function(){var t=this.props.trackProps;return t?f(t.padding,t.paddingLeft,t.paddingRight,t.paddingTop,t.paddingBottom):{top:0,right:0,bottom:0,left:0}}},{key:"contentMargin",get:function(){var t=this.state,e=t.thumbHeight,n=t.trackHeight,o=n>e?n:e,r=g()?o+20:o;return!m()&&this.shouldRenderScrollbar?r+10+"px":"20px"}},{key:"bottomOffset",get:function(){return this.state.thumbHeight>this.state.trackHeight?(this.state.thumbHeight-this.state.trackHeight)/2:0}},{key:"startElement",get:function(){if(this.props.startAt)return document.getElementById("react-smart-scroller-"+this.props.startAt.startIndex)}}]),e}(n.Component);P.defaultProps={spacing:0,vertical:!1,draggable:!1,pagination:!1};var T=o.div(H()),X=o.div(W()),V=o.div(L(),"#bdc3c7"),I=o.div(k(),"#2ecc71");function B(){var t=u(["\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    margin: 0 3px;\n    cursor: pointer;\n"]);return B=function(){return t},t}function Y(){var t=u(["\n    border: solid ",";\n    border-width: 0 2px 2px 0;\n    display: inline-block;\n    padding: 6px;\n    transform: rotate(-45deg);\n    -webkit-transform: rotate(-45deg);\n    cursor: pointer;\n"]);return Y=function(){return t},t}function z(){var t=u(["\n    border: solid ",";\n    border-width: 0 2px 2px 0;\n    display: inline-block;\n    padding: 6px;\n    transform: rotate(135deg);\n    -webkit-transform: rotate(135deg);\n    cursor: pointer;\n"]);return z=function(){return t},t}function A(){var t=u(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 40px;\n"]);return A=function(){return t},t}function j(){var t=u(["\n    flex: 0 0 auto;\n    box-sizing: border-box;\n    width: 100%;\n"]);return j=function(){return t},t}function N(){var t=u(["\n    display: flex;\n    position: relative;\n"]);return N=function(){return t},t}function _(){var t=u(["\n    display: flex;\n    flex-direction: column;\n"]);return _=function(){return t},t}var F=function(t){function e(e){var o;return(o=t.call(this,e)||this).state={paginationIndex:0,numberOfViews:0,scrollValue:0,children:o.props.children,deltaX:0,scrollLeft:0,dragScroll:0,deltaY:0,horizontal:!1,lockedMove:!1},o.overflowContainerRef=n.createRef(),o.onNext=o.onNext.bind(a(o)),o.onPrevious=o.onPrevious.bind(a(o)),o.onDotClick=o.onDotClick.bind(a(o)),o.onTouchMove=o.onTouchMove.bind(a(o)),o.onTouchStart=o.onTouchStart.bind(a(o)),o.updatePosition=o.updatePosition.bind(a(o)),o.setStartPosition=o.setStartPosition.bind(a(o)),o.onOverflowContentDrag=o.onOverflowContentDrag.bind(a(o)),o.onOverflowContentMouseDown=o.onOverflowContentMouseDown.bind(a(o)),o.deleteOverflowMouseMoveEvent=o.deleteOverflowMouseMoveEvent.bind(a(o)),o}l(e,t);var o=e.prototype;return o.componentDidMount=function(){this.setState({numberOfViews:this.numberOfViews}),window.addEventListener("resize",this.updatePosition),window.addEventListener("touchstart",this.onTouchStart),window.addEventListener("touchmove",this.onTouchMove,{passive:!1}),window.addEventListener("touchend",this.deleteOverflowMouseMoveEvent),window.addEventListener("load",this.setStartPosition)},o.componentWillUnmount=function(){window.removeEventListener("resize",this.updatePosition),window.removeEventListener("touchstart",this.onTouchStart),window.removeEventListener("mousemove",this.onOverflowContentDrag),window.removeEventListener("mouseup",this.deleteOverflowMouseMoveEvent),window.removeEventListener("touchmove",this.onTouchMove),window.removeEventListener("touchend",this.deleteOverflowMouseMoveEvent),window.removeEventListener("load",this.setStartPosition)},o.setStartPosition=function(){var t=this.props,e=t.startAt,o=t.children,r=this.overflowContainerRef.current,i=this.props.numCols||1;if(r){var s=Math.ceil((e?e.startIndex:0)/i),l=n.Children.count(o),a=Math.ceil(l/i)-1,u=s<0?0:s>a?a:s,c=-u*r.offsetWidth;r.style.transform="translate("+c+"px)",this.setState({paginationIndex:u,scrollValue:c})}},o.updatePosition=function(){var t=this.props.children,e=this.overflowContainerRef.current,o=this.props.numCols||1;if(e){var r=Math.ceil(this.state.paginationIndex/o),i=n.Children.count(t),s=Math.ceil(i/o)-1,l=r<0?0:r>s?s:r,a=-l*e.offsetWidth;e.style.transform="translate("+a+"px)",this.setState({paginationIndex:l,scrollValue:a})}},o.onNext=function(){var t=this.overflowContainerRef.current,e=this.state,n=e.paginationIndex,o=e.scrollValue,r=this.props.paginationConfig;if(t&&n===this.numberOfViews-1&&r&&r.infinite)return t.style.transform="translate(0px)",this.setState({paginationIndex:0,scrollValue:0});if(t&&n<this.numberOfViews-1){var i=o-t.offsetWidth,s=n+1;return t.style.transform="translate("+i+"px)",this.setState({paginationIndex:s,scrollValue:i})}},o.onPrevious=function(){var t=this.overflowContainerRef.current,e=this.state,n=e.paginationIndex,o=e.scrollValue,r=this.props.paginationConfig;if(t&&0===n&&r&&r.infinite){var i=this.numberOfViews-1,s=i*t.offsetWidth;return t.style.transform="translate(-"+s+"px)",this.setState({paginationIndex:i,scrollValue:-s})}if(t&&n>0){var l=n-1,a=o+t.offsetWidth;return t.style.transform="translate("+a+"px)",this.setState({paginationIndex:l,scrollValue:a})}},o.onDotClick=function(t){var e=this.overflowContainerRef.current;if(e&&t!==this.state.paginationIndex){var n=-t*e.clientWidth;e.style.transform="translate("+n+"px)",this.setState({paginationIndex:t,scrollValue:n})}},o.onOverflowContentMouseDown=function(t){t.preventDefault();var e=this.overflowContainerRef.current,n=this.props.paginationConfig;e&&n&&n.draggable&&(e.style.transition="unset",e.style.transform="translate("+this.state.scrollValue+"px)",this.setState({deltaX:t.clientX,scrollLeft:this.state.scrollValue,dragScroll:this.state.scrollValue}),window.addEventListener("mousemove",this.onOverflowContentDrag),window.addEventListener("mouseup",this.deleteOverflowMouseMoveEvent))},o.onOverflowContentDrag=function(t){var e=this.state,n=this.overflowContainerRef.current,o=e.scrollLeft+(t.clientX-e.deltaX);n&&0!==t.clientX&&(n.style.transform="translate("+o+"px)",this.setState({dragScroll:o}))},o.onTouchStart=function(t){var e=this.state.scrollValue,n=t.touches.item(0),o=this.overflowContainerRef.current;this.setState({deltaX:n.clientX,scrollLeft:e,dragScroll:e,deltaY:n.clientY,horizontal:!1,lockedMove:!1}),o&&(o.style.transition="unset")},o.onTouchMove=function(t){var e=this.state,n=e.deltaX,o=e.scrollLeft,r=e.deltaY,i=e.horizontal,s=e.lockedMove,l=t.touches.item(0),a=this.overflowContainerRef.current,u=o+(l.clientX-n),c=this.props.paginationConfig,d=c&&c.minOffsetToChangeSlide||50;if(!i&&s)return null;Math.abs(l.clientY-r)>d&&!s&&this.setState({horizontal:!1,lockedMove:!0}),Math.abs(l.clientX-n)>d&&!s&&this.setState({horizontal:!0,lockedMove:!0}),Math.abs(l.clientX-n)>d&&t.preventDefault(),a&&0!==l.clientX&&(a.style.transform="translate("+u+"px)",this.setState({dragScroll:u}))},o.deleteOverflowMouseMoveEvent=function(){var t=this.overflowContainerRef.current,e=this.state,n=e.dragScroll,o=e.paginationIndex,r=e.scrollLeft,i=this.props.paginationConfig,s=i&&i.minOffsetToChangeSlide||150,l=i&&i.transitionTime||1;if(t&&-r+n<-s){var a=o===this.childrenCount-1,u=a?o*t.clientWidth:(o+1)*t.clientWidth;t.style.transition="all "+l+"s",t.style.transform="translate(-"+u+"px)",this.setState({paginationIndex:a?o:o+1,scrollValue:-u})}if(t&&-r+n>s){var d=0===o,h=d?0:(o-1)*t.clientWidth;t.style.transition="all "+l+"s",t.style.transform="translate(-"+h+"px)",this.setState({paginationIndex:d?o:o-1,scrollValue:-h})}c(t,-r+n>-s,-r+n<s)&&(t.style.transition="all "+l+"s",t.style.transform="translate(-"+o*t.clientWidth+"px)"),window.removeEventListener("mousemove",this.onOverflowContentDrag),window.removeEventListener("mouseup",this.deleteOverflowMouseMoveEvent)},o.renderChildren=function(){var t=this.props.numCols,e=this.props.spacing/2,o=this.props.children;return n.Children.map(o,(function(r,i){var s=i!==n.Children.count(o)-1?"paddingRight: "+e+"px":void 0;return n.createElement(G,{id:"react-smart-scroller-"+i,style:{padding:"0 "+e+"px",flexBasis:t?"calc(100% / "+t+")":"unset",paddingRight:s,paddingLeft:0!==i?"paddingLeft: "+e+"px":void 0}},r)}))},o.renderDots=function(){var t=this,e=this.props.paginationConfig;return Array.from(Array(this.numberOfViews)).map((function(o,r){return n.createElement(Z,{key:r,style:{backgroundColor:t.state.paginationIndex===r?e&&e.activeDotColor||"#2ecc71":e&&e.unactiveDotsColor||"#bdc3c7"},onClick:function(){return t.onDotClick(r)}})}))},o.renderPagination=function(){var t=this.props.renderPagination;return t?t({selectedDot:this.state.paginationIndex,onPrev:this.onPrevious,onNext:this.onNext,childrenCount:this.childrenCount,onDotClick:this.onDotClick}):n.createElement(J,null,n.createElement(K,{onClick:this.onPrevious}),this.renderDots(),n.createElement(Q,{onClick:this.onNext}))},o.render=function(){var t=this.props,e=t.paginationConfig;return n.createElement(U,{style:t.style},n.createElement(q,{ref:this.overflowContainerRef,style:{transition:"all "+(e&&e.transitionTime||1)+"s",flex:1},onMouseDown:m()?d:this.onOverflowContentMouseDown},this.renderChildren()),this.renderPagination())},i(e,[{key:"childrenCount",get:function(){return n.Children.count(this.props.children)}},{key:"numberOfViews",get:function(){return Math.ceil(this.childrenCount/(this.props.numCols||1))}}]),e}(n.Component),U=o.div(_()),q=o.div(N()),G=o.div(j()),J=o.div(A()),K=o.div(z(),"#000000"),Q=o.div(Y(),"#000000"),Z=o.div(B());function $(){var t=u(["\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    position: relative;\n"]);return $=function(){return t},t}var tt=function(t){function e(){return t.apply(this,arguments)||this}l(e,t);var o=e.prototype;return o.renderMain=function(){return n.createElement(this.props.pagination?F:this.props.vertical?y:P,Object.assign({},this.props))},o.render=function(){return v()?null:n.createElement(et,null,this.renderMain())},e}(n.Component),et=o.div($());exports.ReactSmartScroller=tt;
 //# sourceMappingURL=react-smart-scroller.cjs.production.min.js.map

dist/react-smart-scroller.esm.js

@@ -1155,3 +1155,2 @@ import React from 'react';
       var scrollValue = -checkedPage * overflowRef.offsetWidth;
-      console.log(position, scrollValue);
       overflowRef.style.transform = "translate(" + scrollValue + "px)";
@@ -1158,0 +1157,0 @@ this.setState({

dist/react-smart-scroller.umd.development.js

@@ -1161,3 +1161,2 @@ (function (global, factory) {
         var scrollValue = -checkedPage * overflowRef.offsetWidth;
-        console.log(position, scrollValue);
         overflowRef.style.transform = "translate(" + scrollValue + "px)";
@@ -1164,0 +1163,0 @@ this.setState({

dist/react-smart-scroller.umd.production.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("styled-components")):"function"==typeof define&&define.amd?define(["exports","react","styled-components"],e):e((t=t||self)["react-smart-scroller"]={},t.React,t.styled)}(this,(function(t,e,n){"use strict";function o(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function r(t,e,n){return e&&o(t.prototype,e),n&&o(t,n),t}function i(){return(i=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t}).apply(this,arguments)}function s(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,t.__proto__=e}function l(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function a(t,e){return e||(e=t.slice(0)),t.raw=e,t}var u;e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e,n=n&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n,function(t){t[t.One=1]="One",t[t.Two=2]="Two",t[t.Three=3]="Three",t[t.Four=4]="Four"}(u||(u={}));var c=function(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];return e.every(Boolean)},d=function(){},h=function(t){return t?Number(t.toString().replace("px","")):void 0},f=function(t,e,n,o,r){var s={top:0,right:0,bottom:0,left:0};if(!(t||e||n||o||r))return s;if(!t)return i({},s,{right:h(n),left:h(e),top:h(o),bottom:h(r)});var l=t.toString().split(" "),a=l.length,c=l.map(h);switch(a){case u.One:var d=c[0];return{top:d,right:d,bottom:d,left:d};case u.Two:var f=c[0],v=c[1];return{top:f,right:v,bottom:f,left:v};case u.Three:var p=c[1];return{top:c[0],right:p,bottom:c[2],left:p};case u.Four:default:return{top:c[0],right:c[1],bottom:c[2],left:c[3]}}},v=function(){return"undefined"==typeof window},p=function(t){return!v()&&navigator.userAgent.includes(t)},g=function(){return p("Mac")},m=function(){return p("Android")||p("iPhone")||p("iPad")};function w(){var t=a(["\n    position: absolute;\n"]);return w=function(){return t},t}function C(){var t=a(["\n    position: relative;\n    background-color: ",";\n    cursor: pointer;\n    width: 10px;\n    height: 100%;\n"]);return C=function(){return t},t}function b(){var t=a(["\n    position: absolute;\n    cursor: pointer;\n    right: 0;\n    height: 100%;\n    background-color: ",";\n    top: 0;\n    width: 10px;\n    display: flex;\n    justify-content: center;\n"]);return b=function(){return t},t}function M(){var t=a(["\n    box-sizing: border-box;\n"]);return M=function(){return t},t}function y(){var t=a(["\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    overflow-x: hidden;\n    overflow-y: scroll;\n    margin-right: -20px;\n    -webkit-overflow-scrolling: touch;\n"]);return y=function(){return t},t}var x=function(t){function n(n){var o;return(o=t.call(this,n)||this).state={scrollContainerHeight:0,deltaYOrigin:0,deltaY:0,thumbWidth:0,trackWidth:0,scrollHeight:0,scrollTop:0,padding:o.trackPadding,ratio:1},o.overflowContainerRef=e.createRef(),o.thumbRef=e.createRef(),o.trackRef=e.createRef(),o.measureContainers=o.measureContainers.bind(l(o)),o.onMouseDown=o.onMouseDown.bind(l(o)),o.onMouseDrag=o.onMouseDrag.bind(l(o)),o.onOverflowContentScroll=o.onOverflowContentScroll.bind(l(o)),o.deleteMouseMoveEvent=o.deleteMouseMoveEvent.bind(l(o)),o.onScrollbarClick=o.onScrollbarClick.bind(l(o)),o.onOverflowContentMouseDown=o.onOverflowContentMouseDown.bind(l(o)),o.onOverflowContentDrag=o.onOverflowContentDrag.bind(l(o)),o.deleteOverflowMouseMoveEvent=o.deleteOverflowMouseMoveEvent.bind(l(o)),o}s(n,t);var o=n.prototype;return o.componentDidMount=function(){window.addEventListener("resize",this.measureContainers),window.addEventListener("mouseup",this.deleteMouseMoveEvent),window.addEventListener("transitionend",this.measureContainers),window.addEventListener("mouseup",this.deleteOverflowMouseMoveEvent),window.addEventListener("load",this.measureContainers)},o.componentWillUnmount=function(){window.removeEventListener("resize",this.measureContainers),window.removeEventListener("mouseup",this.deleteMouseMoveEvent),window.removeEventListener("transitionend",this.measureContainers),window.removeEventListener("mouseup",this.deleteOverflowMouseMoveEvent),window.removeEventListener("load",this.measureContainers)},o.setStartPosition=function(){var t=this.props.startAt,e=this.overflowContainerRef.current,n=this.startElement;this.measureContainers(),e&&n&&(e.scrollTop=n.offsetTop-(t&&t.center?(e.clientHeight-n.clientHeight)/2:0))},o.scrollContainerReducedHeight=function(t){var e=this.state.padding;return t-(e.top+e.bottom)},o.measureContainers=function(t){var e=this,n=this.overflowContainerRef.current,o=this.thumbRef.current,r=this.trackRef.current,i=c(n,o,r);if(i){var s=this.scrollContainerReducedHeight(n.clientHeight);this.setState({scrollContainerHeight:s,thumbWidth:o.offsetWidth,trackWidth:r.clientWidth,scrollHeight:n.scrollHeight,ratio:(s-o.offsetHeight)/(n.scrollHeight-n.clientHeight)},(function(){t&&"load"===t.type&&e.setStartPosition()}))}if(i&&o.offsetTop+o.offsetHeight>n.clientHeight){var l=n.clientHeight-o.offsetHeight;n.scroll(0,n.scrollHeight),o.style.top=l+"px"}},o.onMouseDown=function(t){t.preventDefault();var e=this.thumbRef.current;e&&this.overflowContainerRef.current&&this.setState({deltaYOrigin:e.offsetTop,deltaY:t.clientY+this.state.padding.top}),window.addEventListener("mousemove",this.onMouseDrag)},o.onScrollbarClick=function(t){var e=t.clientY,n=this.state.padding,o=this.thumbRef.current,r=this.overflowContainerRef.current;if(c(o,r,e>=(h(o.style.top)||0)+r.getBoundingClientRect().top+n.top,e<=(h(o.style.top)||0)+r.getBoundingClientRect().top+o.offsetHeight+n.top))return null;var i=(r.scrollHeight-r.clientHeight)/(this.state.scrollContainerHeight-o.offsetHeight),s=r.getBoundingClientRect().top+o.offsetHeight/2+n.top;return r.scroll({top:i*(e-s),left:0,behavior:"smooth"})},o.deleteMouseMoveEvent=function(){window.removeEventListener("mousemove",this.onMouseDrag)},o.deleteOverflowMouseMoveEvent=function(){window.removeEventListener("mousemove",this.onOverflowContentDrag)},o.onMouseDrag=function(t){var e=this.state,n=this.overflowContainerRef.current,o=this.thumbRef.current,r=e.scrollContainerHeight-o.offsetHeight,i=t.clientY-e.deltaY+e.deltaYOrigin+e.padding.top,s=i>=0&&i<=r,l=c(Boolean(this.overflowContainerRef.current),Boolean(this.thumbRef.current));if(l&&!s){var a=i>0?n.scrollHeight-n.offsetHeight:0;o.style.top=(i<0?0:r)+"px",n.scroll(0,a)}l&&s&&(n.scroll(0,(n.scrollHeight-n.offsetHeight)/r*i),o.style.top=i+"px")},o.onOverflowContentScroll=function(){var t=this.thumbRef.current,e=this.overflowContainerRef.current;e&&t&&(t.style.top=e.scrollTop*this.state.ratio+"px")},o.onOverflowContentMouseDown=function(t){t.preventDefault();var e=this.overflowContainerRef.current;e&&this.setState({deltaY:t.clientY,scrollTop:e.scrollTop}),window.addEventListener("mousemove",this.onOverflowContentDrag)},o.onOverflowContentDrag=function(t){var e=this.state,n=this.overflowContainerRef.current;n&&0!==t.clientY&&n.scroll(0,e.scrollTop-(t.clientY-e.deltaY))},o.renderThumb=function(){var t=this.state,n=t.scrollContainerHeight,o=Number((100*n/t.scrollHeight).toFixed(0))*n/100+"px";return this.props.thumb?e.cloneElement(this.props.thumb,{ref:this.thumbRef,onMouseDown:this.onMouseDown,style:i({top:0,position:"relative",cursor:"pointer"},this.props.thumb.props.style)}):e.createElement(S,{ref:this.thumbRef,onMouseDown:this.onMouseDown,style:{height:o}})},o.renderScrollbar=function(){var t=!m()&&this.shouldRenderScrollbar;return e.createElement(O,{ref:this.trackRef,onClick:this.onScrollbarClick,style:i({color:"#bdc3c7",right:this.rightOffset,display:t?"flex":"none"},this.props.trackProps)},e.createElement(D,null,this.renderThumb()))},o.renderChildren=function(){var t=this,n=this.props.numCols,o=this.props.spacing/2,r=this.props.children;return e.Children.map(r,(function(s,l){var a=l!==e.Children.count(r)-1?"paddingBottom: "+o+"px":void 0,u=0!==l?"paddingTop: "+o+"px":void 0,c=n?"calc(100% / "+n+")":"auto",d=e.cloneElement(r[l],{style:i({display:"flex"},r[l].props.style)});return e.createElement(R,{id:"react-smart-scroller-"+l,style:{padding:o+"px 0",height:c,paddingTop:u,paddingBottom:a,marginRight:t.contentMargin}},d)}))},o.render=function(){var t=this.props,n=t.draggable;return e.createElement("div",{style:t.style},e.createElement(E,{style:{cursor:n?"pointer":"unset"},ref:this.overflowContainerRef,onScroll:this.onOverflowContentScroll,onMouseDown:n?this.onOverflowContentMouseDown:d},this.renderChildren()),this.renderScrollbar())},r(n,[{key:"shouldRenderScrollbar",get:function(){var t=this.overflowContainerRef.current,e=this.props.numCols;return!e&&t?t.clientHeight<t.scrollHeight:!(t&&t.children.length<=e)}},{key:"trackPadding",get:function(){var t=this.props.trackProps;return t?f(t.padding,t.paddingLeft,t.paddingRight,t.paddingTop,t.paddingBottom):{top:0,right:0,bottom:0,left:0}}},{key:"contentMargin",get:function(){var t=this.state,e=t.thumbWidth,n=t.trackWidth,o=n>e?n:e,r=g()?o+20:o;return!m()&&this.shouldRenderScrollbar?r+10+"px":"20px"}},{key:"rightOffset",get:function(){return this.state.thumbWidth>this.state.trackWidth?(this.state.thumbWidth-this.state.trackWidth)/2:0}},{key:"startElement",get:function(){if(this.props.startAt)return document.getElementById("react-smart-scroller-"+this.props.startAt.startIndex)}}]),n}(e.Component),E=n.div(y()),R=n.div(M()),O=n.div(b(),"#bdc3c7"),S=n.div(C(),"#2ecc71"),D=n.div(w());function k(){var t=a(["\n    position: relative;\n    left: 0;\n    background-color: ",";\n    cursor: pointer;\n    width: 100px;\n    height: 10px;\n"]);return k=function(){return t},t}function L(){var t=a(["\n    position: absolute;\n    cursor: pointer;\n    left: 0;\n    width: 100%;\n    background-color: ",";\n    bottom: 0;\n    height: 10px;\n    display: flex;\n    align-items: center;\n"]);return L=function(){return t},t}function W(){var t=a(["\n    flex: 0 0 auto;\n    box-sizing: border-box;\n"]);return W=function(){return t},t}function H(){var t=a(["\n    display: flex;\n    overflow-x: scroll;\n    overflow-y: hidden;\n    margin-bottom: -20px;\n    -webkit-overflow-scrolling: touch;\n"]);return H=function(){return t},t}var P=function(t){function n(n){var o;return(o=t.call(this,n)||this).state={scrollContainerWidth:0,deltaXOrigin:0,deltaX:0,thumbHeight:0,trackHeight:0,scrollWidth:0,scrollLeft:0,padding:o.trackPadding,ratio:1},o.overflowContainerRef=e.createRef(),o.thumbRef=e.createRef(),o.trackRef=e.createRef(),o.measureContainers=o.measureContainers.bind(l(o)),o.onMouseDown=o.onMouseDown.bind(l(o)),o.onMouseDrag=o.onMouseDrag.bind(l(o)),o.onOverflowContentScroll=o.onOverflowContentScroll.bind(l(o)),o.deleteMouseMoveEvent=o.deleteMouseMoveEvent.bind(l(o)),o.onScrollbarClick=o.onScrollbarClick.bind(l(o)),o.onOverflowContentDrag=o.onOverflowContentDrag.bind(l(o)),o.onOverflowContentMouseDown=o.onOverflowContentMouseDown.bind(l(o)),o.deleteOverflowMouseMoveEvent=o.deleteOverflowMouseMoveEvent.bind(l(o)),o}s(n,t);var o=n.prototype;return o.componentDidMount=function(){window.addEventListener("resize",this.measureContainers),window.addEventListener("mouseup",this.deleteMouseMoveEvent),window.addEventListener("transitionend",this.measureContainers),window.addEventListener("mouseup",this.deleteOverflowMouseMoveEvent),window.addEventListener("load",this.measureContainers)},o.componentWillUnmount=function(){window.removeEventListener("resize",this.measureContainers),window.removeEventListener("mouseup",this.deleteMouseMoveEvent),window.removeEventListener("transitionend",this.measureContainers),window.removeEventListener("mouseup",this.deleteOverflowMouseMoveEvent),window.removeEventListener("load",this.measureContainers)},o.scrollContainerReducedWidth=function(t){var e=this.state.padding;return t-(e.left+e.right)},o.setStartPosition=function(){var t=this.props.startAt,e=this.overflowContainerRef.current,n=this.startElement;this.measureContainers(),e&&n&&(e.scrollLeft=n.offsetLeft-(t&&t.center?(e.clientWidth-n.clientWidth)/2:0))},o.measureContainers=function(t){var e=this,n=this.overflowContainerRef.current,o=this.thumbRef.current,r=this.trackRef.current,i=c(n,o,r);if(i){var s=this.scrollContainerReducedWidth(n.clientWidth);this.setState({scrollContainerWidth:s,thumbHeight:o.offsetHeight,trackHeight:r.clientHeight,scrollWidth:n.scrollWidth,ratio:(s-o.offsetWidth)/(n.scrollWidth-n.clientWidth)},(function(){t&&"load"===t.type&&e.setStartPosition()}))}if(i&&o.offsetLeft+o.clientWidth>n.clientWidth){var l=n.clientWidth-o.clientWidth;n.scroll(n.scrollWidth,0),o.style.left=l+"px"}},o.onMouseDown=function(t){t.preventDefault(),this.thumbRef.current&&this.setState({deltaXOrigin:this.thumbRef.current.offsetLeft,deltaX:t.clientX+this.state.padding.left}),window.addEventListener("mousemove",this.onMouseDrag)},o.onScrollbarClick=function(t){var e=t.clientX,n=this.thumbRef.current,o=this.overflowContainerRef.current;if(c(n,o,e>=n.offsetLeft+o.getBoundingClientRect().left,e<=n.offsetLeft+o.getBoundingClientRect().left+n.offsetWidth))return null;var r=(o.scrollWidth-o.clientWidth)/(this.state.scrollContainerWidth-n.offsetWidth),i=o.getBoundingClientRect().left+n.offsetWidth/2+this.state.padding.left;return o.scroll({left:r*(e-i),top:0,behavior:"smooth"})},o.deleteMouseMoveEvent=function(){window.removeEventListener("mousemove",this.onMouseDrag)},o.deleteOverflowMouseMoveEvent=function(){window.removeEventListener("mousemove",this.onOverflowContentDrag)},o.onMouseDrag=function(t){var e=this.state,n=this.overflowContainerRef.current,o=this.thumbRef.current,r=e.scrollContainerWidth-o.offsetWidth,i=t.clientX-e.deltaX+e.deltaXOrigin,s=i>=0&&i<=r,l=c(Boolean(this.overflowContainerRef.current),Boolean(this.thumbRef.current));if(l&&!s){var a=i>0?n.scrollWidth-n.clientWidth:0;o.style.left=(i<0?0:r)+"px",n.scroll(a,0)}l&&s&&(n.scroll((n.scrollWidth-n.clientWidth)/r*i,0),o.style.left=i+"px")},o.onOverflowContentScroll=function(){var t=this.thumbRef.current,e=this.overflowContainerRef.current;e&&t&&(t.style.left=e.scrollLeft*this.state.ratio+"px")},o.onOverflowContentMouseDown=function(t){t.preventDefault();var e=this.overflowContainerRef.current;e&&this.setState({deltaX:t.clientX,scrollLeft:e.scrollLeft}),window.addEventListener("mousemove",this.onOverflowContentDrag)},o.onOverflowContentDrag=function(t){var e=this.state,n=this.overflowContainerRef.current;n&&0!==t.clientX&&n.scroll(e.scrollLeft-(t.clientX-e.deltaX),0)},o.renderChildren=function(){var t=this,n=this.props.numCols,o=this.props.spacing/2,r=this.props.children;return e.Children.map(r,(function(i,s){var l=s!==e.Children.count(r)-1?"paddingRight: "+o+"px":void 0;return e.createElement(X,{id:"react-smart-scroller-"+s,style:{padding:"0 "+o+"px",flexBasis:n?"calc(100% / "+n+")":"unset",paddingRight:l,paddingLeft:0!==s?"paddingLeft: "+o+"px":void 0,marginBottom:t.contentMargin}},i)}))},o.renderThumb=function(){var t=this.state,n=t.scrollContainerWidth,o=Number((100*n/t.scrollWidth).toFixed(0))*n/100+"px";return this.props.thumb?e.cloneElement(this.props.thumb,{ref:this.thumbRef,onMouseDown:this.onMouseDown,style:i({left:0,position:"relative",cursor:"pointer"},this.props.thumb.props.style)}):e.createElement(I,{ref:this.thumbRef,onMouseDown:this.onMouseDown,style:{width:o}})},o.renderScrollbar=function(){var t=!m()&&this.shouldRenderScrollbar&&!this.props.pagination;return e.createElement(V,{ref:this.trackRef,onClick:this.onScrollbarClick,style:i({color:"#bdc3c7",bottom:this.bottomOffset,display:t?"flex":"none"},this.props.trackProps)},this.renderThumb())},o.render=function(){var t=this.props,n=t.draggable;return e.createElement("div",{style:t.style},e.createElement(T,{ref:this.overflowContainerRef,onScroll:this.onOverflowContentScroll,onMouseDown:n?this.onOverflowContentMouseDown:d,style:{cursor:n?"pointer":"unset"}},this.renderChildren()),this.renderScrollbar())},r(n,[{key:"shouldRenderScrollbar",get:function(){var t=this.overflowContainerRef.current,e=this.props.numCols;return!e&&t?t.clientWidth<t.scrollWidth:!(t&&t.children.length<=e)}},{key:"trackPadding",get:function(){var t=this.props.trackProps;return t?f(t.padding,t.paddingLeft,t.paddingRight,t.paddingTop,t.paddingBottom):{top:0,right:0,bottom:0,left:0}}},{key:"contentMargin",get:function(){var t=this.state,e=t.thumbHeight,n=t.trackHeight,o=n>e?n:e,r=g()?o+20:o;return!m()&&this.shouldRenderScrollbar?r+10+"px":"20px"}},{key:"bottomOffset",get:function(){return this.state.thumbHeight>this.state.trackHeight?(this.state.thumbHeight-this.state.trackHeight)/2:0}},{key:"startElement",get:function(){if(this.props.startAt)return document.getElementById("react-smart-scroller-"+this.props.startAt.startIndex)}}]),n}(e.Component);P.defaultProps={spacing:0,vertical:!1,draggable:!1,pagination:!1};var T=n.div(H()),X=n.div(W()),V=n.div(L(),"#bdc3c7"),I=n.div(k(),"#2ecc71");function B(){var t=a(["\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    margin: 0 3px;\n    cursor: pointer;\n"]);return B=function(){return t},t}function Y(){var t=a(["\n    border: solid ",";\n    border-width: 0 2px 2px 0;\n    display: inline-block;\n    padding: 6px;\n    transform: rotate(-45deg);\n    -webkit-transform: rotate(-45deg);\n    cursor: pointer;\n"]);return Y=function(){return t},t}function z(){var t=a(["\n    border: solid ",";\n    border-width: 0 2px 2px 0;\n    display: inline-block;\n    padding: 6px;\n    transform: rotate(135deg);\n    -webkit-transform: rotate(135deg);\n    cursor: pointer;\n"]);return z=function(){return t},t}function A(){var t=a(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 40px;\n"]);return A=function(){return t},t}function j(){var t=a(["\n    flex: 0 0 auto;\n    box-sizing: border-box;\n    width: 100%;\n"]);return j=function(){return t},t}function N(){var t=a(["\n    display: flex;\n    position: relative;\n"]);return N=function(){return t},t}function _(){var t=a(["\n    display: flex;\n    flex-direction: column;\n"]);return _=function(){return t},t}var F=function(t){function n(n){var o;return(o=t.call(this,n)||this).state={paginationIndex:0,numberOfViews:0,scrollValue:0,children:o.props.children,deltaX:0,scrollLeft:0,dragScroll:0,deltaY:0,horizontal:!1,lockedMove:!1},o.overflowContainerRef=e.createRef(),o.onNext=o.onNext.bind(l(o)),o.onPrevious=o.onPrevious.bind(l(o)),o.onDotClick=o.onDotClick.bind(l(o)),o.onTouchMove=o.onTouchMove.bind(l(o)),o.onTouchStart=o.onTouchStart.bind(l(o)),o.updatePosition=o.updatePosition.bind(l(o)),o.setStartPosition=o.setStartPosition.bind(l(o)),o.onOverflowContentDrag=o.onOverflowContentDrag.bind(l(o)),o.onOverflowContentMouseDown=o.onOverflowContentMouseDown.bind(l(o)),o.deleteOverflowMouseMoveEvent=o.deleteOverflowMouseMoveEvent.bind(l(o)),o}s(n,t);var o=n.prototype;return o.componentDidMount=function(){this.setState({numberOfViews:this.numberOfViews}),window.addEventListener("resize",this.updatePosition),window.addEventListener("touchstart",this.onTouchStart),window.addEventListener("touchmove",this.onTouchMove,{passive:!1}),window.addEventListener("touchend",this.deleteOverflowMouseMoveEvent),window.addEventListener("load",this.setStartPosition)},o.componentWillUnmount=function(){window.removeEventListener("resize",this.updatePosition),window.removeEventListener("touchstart",this.onTouchStart),window.removeEventListener("mousemove",this.onOverflowContentDrag),window.removeEventListener("mouseup",this.deleteOverflowMouseMoveEvent),window.removeEventListener("touchmove",this.onTouchMove),window.removeEventListener("touchend",this.deleteOverflowMouseMoveEvent),window.removeEventListener("load",this.setStartPosition)},o.setStartPosition=function(){var t=this.props,n=t.startAt,o=t.children,r=this.overflowContainerRef.current,i=this.props.numCols||1;if(r){var s=Math.ceil((n?n.startIndex:0)/i),l=e.Children.count(o),a=Math.ceil(l/i)-1,u=s<0?0:s>a?a:s,c=-u*r.offsetWidth;r.style.transform="translate("+c+"px)",this.setState({paginationIndex:u,scrollValue:c})}},o.updatePosition=function(){var t=this.props.children,n=this.overflowContainerRef.current,o=this.props.numCols||1,r=this.state.paginationIndex;if(n){var i=Math.ceil(r/o),s=e.Children.count(t),l=Math.ceil(s/o)-1,a=i<0?0:i>l?l:i,u=-a*n.offsetWidth;console.log(r,u),n.style.transform="translate("+u+"px)",this.setState({paginationIndex:a,scrollValue:u})}},o.onNext=function(){var t=this.overflowContainerRef.current,e=this.state,n=e.paginationIndex,o=e.scrollValue,r=this.props.paginationConfig;if(t&&n===this.numberOfViews-1&&r&&r.infinite)return t.style.transform="translate(0px)",this.setState({paginationIndex:0,scrollValue:0});if(t&&n<this.numberOfViews-1){var i=o-t.offsetWidth,s=n+1;return t.style.transform="translate("+i+"px)",this.setState({paginationIndex:s,scrollValue:i})}},o.onPrevious=function(){var t=this.overflowContainerRef.current,e=this.state,n=e.paginationIndex,o=e.scrollValue,r=this.props.paginationConfig;if(t&&0===n&&r&&r.infinite){var i=this.numberOfViews-1,s=i*t.offsetWidth;return t.style.transform="translate(-"+s+"px)",this.setState({paginationIndex:i,scrollValue:-s})}if(t&&n>0){var l=n-1,a=o+t.offsetWidth;return t.style.transform="translate("+a+"px)",this.setState({paginationIndex:l,scrollValue:a})}},o.onDotClick=function(t){var e=this.overflowContainerRef.current;if(e&&t!==this.state.paginationIndex){var n=-t*e.clientWidth;e.style.transform="translate("+n+"px)",this.setState({paginationIndex:t,scrollValue:n})}},o.onOverflowContentMouseDown=function(t){t.preventDefault();var e=this.overflowContainerRef.current,n=this.props.paginationConfig;e&&n&&n.draggable&&(e.style.transition="unset",e.style.transform="translate("+this.state.scrollValue+"px)",this.setState({deltaX:t.clientX,scrollLeft:this.state.scrollValue,dragScroll:this.state.scrollValue}),window.addEventListener("mousemove",this.onOverflowContentDrag),window.addEventListener("mouseup",this.deleteOverflowMouseMoveEvent))},o.onOverflowContentDrag=function(t){var e=this.state,n=this.overflowContainerRef.current,o=e.scrollLeft+(t.clientX-e.deltaX);n&&0!==t.clientX&&(n.style.transform="translate("+o+"px)",this.setState({dragScroll:o}))},o.onTouchStart=function(t){var e=this.state.scrollValue,n=t.touches.item(0),o=this.overflowContainerRef.current;this.setState({deltaX:n.clientX,scrollLeft:e,dragScroll:e,deltaY:n.clientY,horizontal:!1,lockedMove:!1}),o&&(o.style.transition="unset")},o.onTouchMove=function(t){var e=this.state,n=e.deltaX,o=e.scrollLeft,r=e.deltaY,i=e.horizontal,s=e.lockedMove,l=t.touches.item(0),a=this.overflowContainerRef.current,u=o+(l.clientX-n),c=this.props.paginationConfig,d=c&&c.minOffsetToChangeSlide||50;if(!i&&s)return null;Math.abs(l.clientY-r)>d&&!s&&this.setState({horizontal:!1,lockedMove:!0}),Math.abs(l.clientX-n)>d&&!s&&this.setState({horizontal:!0,lockedMove:!0}),Math.abs(l.clientX-n)>d&&t.preventDefault(),a&&0!==l.clientX&&(a.style.transform="translate("+u+"px)",this.setState({dragScroll:u}))},o.deleteOverflowMouseMoveEvent=function(){var t=this.overflowContainerRef.current,e=this.state,n=e.dragScroll,o=e.paginationIndex,r=e.scrollLeft,i=this.props.paginationConfig,s=i&&i.minOffsetToChangeSlide||150,l=i&&i.transitionTime||1;if(t&&-r+n<-s){var a=o===this.childrenCount-1,u=a?o*t.clientWidth:(o+1)*t.clientWidth;t.style.transition="all "+l+"s",t.style.transform="translate(-"+u+"px)",this.setState({paginationIndex:a?o:o+1,scrollValue:-u})}if(t&&-r+n>s){var d=0===o,h=d?0:(o-1)*t.clientWidth;t.style.transition="all "+l+"s",t.style.transform="translate(-"+h+"px)",this.setState({paginationIndex:d?o:o-1,scrollValue:-h})}c(t,-r+n>-s,-r+n<s)&&(t.style.transition="all "+l+"s",t.style.transform="translate(-"+o*t.clientWidth+"px)"),window.removeEventListener("mousemove",this.onOverflowContentDrag),window.removeEventListener("mouseup",this.deleteOverflowMouseMoveEvent)},o.renderChildren=function(){var t=this.props.numCols,n=this.props.spacing/2,o=this.props.children;return e.Children.map(o,(function(r,i){var s=i!==e.Children.count(o)-1?"paddingRight: "+n+"px":void 0;return e.createElement(G,{id:"react-smart-scroller-"+i,style:{padding:"0 "+n+"px",flexBasis:t?"calc(100% / "+t+")":"unset",paddingRight:s,paddingLeft:0!==i?"paddingLeft: "+n+"px":void 0}},r)}))},o.renderDots=function(){var t=this,n=this.props.paginationConfig;return Array.from(Array(this.numberOfViews)).map((function(o,r){return e.createElement(Z,{key:r,style:{backgroundColor:t.state.paginationIndex===r?n&&n.activeDotColor||"#2ecc71":n&&n.unactiveDotsColor||"#bdc3c7"},onClick:function(){return t.onDotClick(r)}})}))},o.renderPagination=function(){var t=this.props.renderPagination;return t?t({selectedDot:this.state.paginationIndex,onPrev:this.onPrevious,onNext:this.onNext,childrenCount:this.childrenCount,onDotClick:this.onDotClick}):e.createElement(J,null,e.createElement(K,{onClick:this.onPrevious}),this.renderDots(),e.createElement(Q,{onClick:this.onNext}))},o.render=function(){var t=this.props,n=t.paginationConfig;return e.createElement(U,{style:t.style},e.createElement(q,{ref:this.overflowContainerRef,style:{transition:"all "+(n&&n.transitionTime||1)+"s",flex:1},onMouseDown:m()?d:this.onOverflowContentMouseDown},this.renderChildren()),this.renderPagination())},r(n,[{key:"childrenCount",get:function(){return e.Children.count(this.props.children)}},{key:"numberOfViews",get:function(){return Math.ceil(this.childrenCount/(this.props.numCols||1))}}]),n}(e.Component),U=n.div(_()),q=n.div(N()),G=n.div(j()),J=n.div(A()),K=n.div(z(),"#000000"),Q=n.div(Y(),"#000000"),Z=n.div(B());function $(){var t=a(["\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    position: relative;\n"]);return $=function(){return t},t}var tt=function(t){function n(){return t.apply(this,arguments)||this}s(n,t);var o=n.prototype;return o.renderMain=function(){return e.createElement(this.props.pagination?F:this.props.vertical?x:P,Object.assign({},this.props))},o.render=function(){return v()?null:e.createElement(et,null,this.renderMain())},n}(e.Component),et=n.div($());t.ReactSmartScroller=tt,Object.defineProperty(t,"__esModule",{value:!0})}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("styled-components")):"function"==typeof define&&define.amd?define(["exports","react","styled-components"],e):e((t=t||self)["react-smart-scroller"]={},t.React,t.styled)}(this,(function(t,e,n){"use strict";function o(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function r(t,e,n){return e&&o(t.prototype,e),n&&o(t,n),t}function i(){return(i=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t}).apply(this,arguments)}function s(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,t.__proto__=e}function l(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function a(t,e){return e||(e=t.slice(0)),t.raw=e,t}var u;e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e,n=n&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n,function(t){t[t.One=1]="One",t[t.Two=2]="Two",t[t.Three=3]="Three",t[t.Four=4]="Four"}(u||(u={}));var c=function(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];return e.every(Boolean)},d=function(){},h=function(t){return t?Number(t.toString().replace("px","")):void 0},f=function(t,e,n,o,r){var s={top:0,right:0,bottom:0,left:0};if(!(t||e||n||o||r))return s;if(!t)return i({},s,{right:h(n),left:h(e),top:h(o),bottom:h(r)});var l=t.toString().split(" "),a=l.length,c=l.map(h);switch(a){case u.One:var d=c[0];return{top:d,right:d,bottom:d,left:d};case u.Two:var f=c[0],v=c[1];return{top:f,right:v,bottom:f,left:v};case u.Three:var p=c[1];return{top:c[0],right:p,bottom:c[2],left:p};case u.Four:default:return{top:c[0],right:c[1],bottom:c[2],left:c[3]}}},v=function(){return"undefined"==typeof window},p=function(t){return!v()&&navigator.userAgent.includes(t)},g=function(){return p("Mac")},m=function(){return p("Android")||p("iPhone")||p("iPad")};function w(){var t=a(["\n    position: absolute;\n"]);return w=function(){return t},t}function C(){var t=a(["\n    position: relative;\n    background-color: ",";\n    cursor: pointer;\n    width: 10px;\n    height: 100%;\n"]);return C=function(){return t},t}function b(){var t=a(["\n    position: absolute;\n    cursor: pointer;\n    right: 0;\n    height: 100%;\n    background-color: ",";\n    top: 0;\n    width: 10px;\n    display: flex;\n    justify-content: center;\n"]);return b=function(){return t},t}function M(){var t=a(["\n    box-sizing: border-box;\n"]);return M=function(){return t},t}function y(){var t=a(["\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    overflow-x: hidden;\n    overflow-y: scroll;\n    margin-right: -20px;\n    -webkit-overflow-scrolling: touch;\n"]);return y=function(){return t},t}var x=function(t){function n(n){var o;return(o=t.call(this,n)||this).state={scrollContainerHeight:0,deltaYOrigin:0,deltaY:0,thumbWidth:0,trackWidth:0,scrollHeight:0,scrollTop:0,padding:o.trackPadding,ratio:1},o.overflowContainerRef=e.createRef(),o.thumbRef=e.createRef(),o.trackRef=e.createRef(),o.measureContainers=o.measureContainers.bind(l(o)),o.onMouseDown=o.onMouseDown.bind(l(o)),o.onMouseDrag=o.onMouseDrag.bind(l(o)),o.onOverflowContentScroll=o.onOverflowContentScroll.bind(l(o)),o.deleteMouseMoveEvent=o.deleteMouseMoveEvent.bind(l(o)),o.onScrollbarClick=o.onScrollbarClick.bind(l(o)),o.onOverflowContentMouseDown=o.onOverflowContentMouseDown.bind(l(o)),o.onOverflowContentDrag=o.onOverflowContentDrag.bind(l(o)),o.deleteOverflowMouseMoveEvent=o.deleteOverflowMouseMoveEvent.bind(l(o)),o}s(n,t);var o=n.prototype;return o.componentDidMount=function(){window.addEventListener("resize",this.measureContainers),window.addEventListener("mouseup",this.deleteMouseMoveEvent),window.addEventListener("transitionend",this.measureContainers),window.addEventListener("mouseup",this.deleteOverflowMouseMoveEvent),window.addEventListener("load",this.measureContainers)},o.componentWillUnmount=function(){window.removeEventListener("resize",this.measureContainers),window.removeEventListener("mouseup",this.deleteMouseMoveEvent),window.removeEventListener("transitionend",this.measureContainers),window.removeEventListener("mouseup",this.deleteOverflowMouseMoveEvent),window.removeEventListener("load",this.measureContainers)},o.setStartPosition=function(){var t=this.props.startAt,e=this.overflowContainerRef.current,n=this.startElement;this.measureContainers(),e&&n&&(e.scrollTop=n.offsetTop-(t&&t.center?(e.clientHeight-n.clientHeight)/2:0))},o.scrollContainerReducedHeight=function(t){var e=this.state.padding;return t-(e.top+e.bottom)},o.measureContainers=function(t){var e=this,n=this.overflowContainerRef.current,o=this.thumbRef.current,r=this.trackRef.current,i=c(n,o,r);if(i){var s=this.scrollContainerReducedHeight(n.clientHeight);this.setState({scrollContainerHeight:s,thumbWidth:o.offsetWidth,trackWidth:r.clientWidth,scrollHeight:n.scrollHeight,ratio:(s-o.offsetHeight)/(n.scrollHeight-n.clientHeight)},(function(){t&&"load"===t.type&&e.setStartPosition()}))}if(i&&o.offsetTop+o.offsetHeight>n.clientHeight){var l=n.clientHeight-o.offsetHeight;n.scroll(0,n.scrollHeight),o.style.top=l+"px"}},o.onMouseDown=function(t){t.preventDefault();var e=this.thumbRef.current;e&&this.overflowContainerRef.current&&this.setState({deltaYOrigin:e.offsetTop,deltaY:t.clientY+this.state.padding.top}),window.addEventListener("mousemove",this.onMouseDrag)},o.onScrollbarClick=function(t){var e=t.clientY,n=this.state.padding,o=this.thumbRef.current,r=this.overflowContainerRef.current;if(c(o,r,e>=(h(o.style.top)||0)+r.getBoundingClientRect().top+n.top,e<=(h(o.style.top)||0)+r.getBoundingClientRect().top+o.offsetHeight+n.top))return null;var i=(r.scrollHeight-r.clientHeight)/(this.state.scrollContainerHeight-o.offsetHeight),s=r.getBoundingClientRect().top+o.offsetHeight/2+n.top;return r.scroll({top:i*(e-s),left:0,behavior:"smooth"})},o.deleteMouseMoveEvent=function(){window.removeEventListener("mousemove",this.onMouseDrag)},o.deleteOverflowMouseMoveEvent=function(){window.removeEventListener("mousemove",this.onOverflowContentDrag)},o.onMouseDrag=function(t){var e=this.state,n=this.overflowContainerRef.current,o=this.thumbRef.current,r=e.scrollContainerHeight-o.offsetHeight,i=t.clientY-e.deltaY+e.deltaYOrigin+e.padding.top,s=i>=0&&i<=r,l=c(Boolean(this.overflowContainerRef.current),Boolean(this.thumbRef.current));if(l&&!s){var a=i>0?n.scrollHeight-n.offsetHeight:0;o.style.top=(i<0?0:r)+"px",n.scroll(0,a)}l&&s&&(n.scroll(0,(n.scrollHeight-n.offsetHeight)/r*i),o.style.top=i+"px")},o.onOverflowContentScroll=function(){var t=this.thumbRef.current,e=this.overflowContainerRef.current;e&&t&&(t.style.top=e.scrollTop*this.state.ratio+"px")},o.onOverflowContentMouseDown=function(t){t.preventDefault();var e=this.overflowContainerRef.current;e&&this.setState({deltaY:t.clientY,scrollTop:e.scrollTop}),window.addEventListener("mousemove",this.onOverflowContentDrag)},o.onOverflowContentDrag=function(t){var e=this.state,n=this.overflowContainerRef.current;n&&0!==t.clientY&&n.scroll(0,e.scrollTop-(t.clientY-e.deltaY))},o.renderThumb=function(){var t=this.state,n=t.scrollContainerHeight,o=Number((100*n/t.scrollHeight).toFixed(0))*n/100+"px";return this.props.thumb?e.cloneElement(this.props.thumb,{ref:this.thumbRef,onMouseDown:this.onMouseDown,style:i({top:0,position:"relative",cursor:"pointer"},this.props.thumb.props.style)}):e.createElement(S,{ref:this.thumbRef,onMouseDown:this.onMouseDown,style:{height:o}})},o.renderScrollbar=function(){var t=!m()&&this.shouldRenderScrollbar;return e.createElement(O,{ref:this.trackRef,onClick:this.onScrollbarClick,style:i({color:"#bdc3c7",right:this.rightOffset,display:t?"flex":"none"},this.props.trackProps)},e.createElement(D,null,this.renderThumb()))},o.renderChildren=function(){var t=this,n=this.props.numCols,o=this.props.spacing/2,r=this.props.children;return e.Children.map(r,(function(s,l){var a=l!==e.Children.count(r)-1?"paddingBottom: "+o+"px":void 0,u=0!==l?"paddingTop: "+o+"px":void 0,c=n?"calc(100% / "+n+")":"auto",d=e.cloneElement(r[l],{style:i({display:"flex"},r[l].props.style)});return e.createElement(R,{id:"react-smart-scroller-"+l,style:{padding:o+"px 0",height:c,paddingTop:u,paddingBottom:a,marginRight:t.contentMargin}},d)}))},o.render=function(){var t=this.props,n=t.draggable;return e.createElement("div",{style:t.style},e.createElement(E,{style:{cursor:n?"pointer":"unset"},ref:this.overflowContainerRef,onScroll:this.onOverflowContentScroll,onMouseDown:n?this.onOverflowContentMouseDown:d},this.renderChildren()),this.renderScrollbar())},r(n,[{key:"shouldRenderScrollbar",get:function(){var t=this.overflowContainerRef.current,e=this.props.numCols;return!e&&t?t.clientHeight<t.scrollHeight:!(t&&t.children.length<=e)}},{key:"trackPadding",get:function(){var t=this.props.trackProps;return t?f(t.padding,t.paddingLeft,t.paddingRight,t.paddingTop,t.paddingBottom):{top:0,right:0,bottom:0,left:0}}},{key:"contentMargin",get:function(){var t=this.state,e=t.thumbWidth,n=t.trackWidth,o=n>e?n:e,r=g()?o+20:o;return!m()&&this.shouldRenderScrollbar?r+10+"px":"20px"}},{key:"rightOffset",get:function(){return this.state.thumbWidth>this.state.trackWidth?(this.state.thumbWidth-this.state.trackWidth)/2:0}},{key:"startElement",get:function(){if(this.props.startAt)return document.getElementById("react-smart-scroller-"+this.props.startAt.startIndex)}}]),n}(e.Component),E=n.div(y()),R=n.div(M()),O=n.div(b(),"#bdc3c7"),S=n.div(C(),"#2ecc71"),D=n.div(w());function k(){var t=a(["\n    position: relative;\n    left: 0;\n    background-color: ",";\n    cursor: pointer;\n    width: 100px;\n    height: 10px;\n"]);return k=function(){return t},t}function L(){var t=a(["\n    position: absolute;\n    cursor: pointer;\n    left: 0;\n    width: 100%;\n    background-color: ",";\n    bottom: 0;\n    height: 10px;\n    display: flex;\n    align-items: center;\n"]);return L=function(){return t},t}function W(){var t=a(["\n    flex: 0 0 auto;\n    box-sizing: border-box;\n"]);return W=function(){return t},t}function H(){var t=a(["\n    display: flex;\n    overflow-x: scroll;\n    overflow-y: hidden;\n    margin-bottom: -20px;\n    -webkit-overflow-scrolling: touch;\n"]);return H=function(){return t},t}var P=function(t){function n(n){var o;return(o=t.call(this,n)||this).state={scrollContainerWidth:0,deltaXOrigin:0,deltaX:0,thumbHeight:0,trackHeight:0,scrollWidth:0,scrollLeft:0,padding:o.trackPadding,ratio:1},o.overflowContainerRef=e.createRef(),o.thumbRef=e.createRef(),o.trackRef=e.createRef(),o.measureContainers=o.measureContainers.bind(l(o)),o.onMouseDown=o.onMouseDown.bind(l(o)),o.onMouseDrag=o.onMouseDrag.bind(l(o)),o.onOverflowContentScroll=o.onOverflowContentScroll.bind(l(o)),o.deleteMouseMoveEvent=o.deleteMouseMoveEvent.bind(l(o)),o.onScrollbarClick=o.onScrollbarClick.bind(l(o)),o.onOverflowContentDrag=o.onOverflowContentDrag.bind(l(o)),o.onOverflowContentMouseDown=o.onOverflowContentMouseDown.bind(l(o)),o.deleteOverflowMouseMoveEvent=o.deleteOverflowMouseMoveEvent.bind(l(o)),o}s(n,t);var o=n.prototype;return o.componentDidMount=function(){window.addEventListener("resize",this.measureContainers),window.addEventListener("mouseup",this.deleteMouseMoveEvent),window.addEventListener("transitionend",this.measureContainers),window.addEventListener("mouseup",this.deleteOverflowMouseMoveEvent),window.addEventListener("load",this.measureContainers)},o.componentWillUnmount=function(){window.removeEventListener("resize",this.measureContainers),window.removeEventListener("mouseup",this.deleteMouseMoveEvent),window.removeEventListener("transitionend",this.measureContainers),window.removeEventListener("mouseup",this.deleteOverflowMouseMoveEvent),window.removeEventListener("load",this.measureContainers)},o.scrollContainerReducedWidth=function(t){var e=this.state.padding;return t-(e.left+e.right)},o.setStartPosition=function(){var t=this.props.startAt,e=this.overflowContainerRef.current,n=this.startElement;this.measureContainers(),e&&n&&(e.scrollLeft=n.offsetLeft-(t&&t.center?(e.clientWidth-n.clientWidth)/2:0))},o.measureContainers=function(t){var e=this,n=this.overflowContainerRef.current,o=this.thumbRef.current,r=this.trackRef.current,i=c(n,o,r);if(i){var s=this.scrollContainerReducedWidth(n.clientWidth);this.setState({scrollContainerWidth:s,thumbHeight:o.offsetHeight,trackHeight:r.clientHeight,scrollWidth:n.scrollWidth,ratio:(s-o.offsetWidth)/(n.scrollWidth-n.clientWidth)},(function(){t&&"load"===t.type&&e.setStartPosition()}))}if(i&&o.offsetLeft+o.clientWidth>n.clientWidth){var l=n.clientWidth-o.clientWidth;n.scroll(n.scrollWidth,0),o.style.left=l+"px"}},o.onMouseDown=function(t){t.preventDefault(),this.thumbRef.current&&this.setState({deltaXOrigin:this.thumbRef.current.offsetLeft,deltaX:t.clientX+this.state.padding.left}),window.addEventListener("mousemove",this.onMouseDrag)},o.onScrollbarClick=function(t){var e=t.clientX,n=this.thumbRef.current,o=this.overflowContainerRef.current;if(c(n,o,e>=n.offsetLeft+o.getBoundingClientRect().left,e<=n.offsetLeft+o.getBoundingClientRect().left+n.offsetWidth))return null;var r=(o.scrollWidth-o.clientWidth)/(this.state.scrollContainerWidth-n.offsetWidth),i=o.getBoundingClientRect().left+n.offsetWidth/2+this.state.padding.left;return o.scroll({left:r*(e-i),top:0,behavior:"smooth"})},o.deleteMouseMoveEvent=function(){window.removeEventListener("mousemove",this.onMouseDrag)},o.deleteOverflowMouseMoveEvent=function(){window.removeEventListener("mousemove",this.onOverflowContentDrag)},o.onMouseDrag=function(t){var e=this.state,n=this.overflowContainerRef.current,o=this.thumbRef.current,r=e.scrollContainerWidth-o.offsetWidth,i=t.clientX-e.deltaX+e.deltaXOrigin,s=i>=0&&i<=r,l=c(Boolean(this.overflowContainerRef.current),Boolean(this.thumbRef.current));if(l&&!s){var a=i>0?n.scrollWidth-n.clientWidth:0;o.style.left=(i<0?0:r)+"px",n.scroll(a,0)}l&&s&&(n.scroll((n.scrollWidth-n.clientWidth)/r*i,0),o.style.left=i+"px")},o.onOverflowContentScroll=function(){var t=this.thumbRef.current,e=this.overflowContainerRef.current;e&&t&&(t.style.left=e.scrollLeft*this.state.ratio+"px")},o.onOverflowContentMouseDown=function(t){t.preventDefault();var e=this.overflowContainerRef.current;e&&this.setState({deltaX:t.clientX,scrollLeft:e.scrollLeft}),window.addEventListener("mousemove",this.onOverflowContentDrag)},o.onOverflowContentDrag=function(t){var e=this.state,n=this.overflowContainerRef.current;n&&0!==t.clientX&&n.scroll(e.scrollLeft-(t.clientX-e.deltaX),0)},o.renderChildren=function(){var t=this,n=this.props.numCols,o=this.props.spacing/2,r=this.props.children;return e.Children.map(r,(function(i,s){var l=s!==e.Children.count(r)-1?"paddingRight: "+o+"px":void 0;return e.createElement(X,{id:"react-smart-scroller-"+s,style:{padding:"0 "+o+"px",flexBasis:n?"calc(100% / "+n+")":"unset",paddingRight:l,paddingLeft:0!==s?"paddingLeft: "+o+"px":void 0,marginBottom:t.contentMargin}},i)}))},o.renderThumb=function(){var t=this.state,n=t.scrollContainerWidth,o=Number((100*n/t.scrollWidth).toFixed(0))*n/100+"px";return this.props.thumb?e.cloneElement(this.props.thumb,{ref:this.thumbRef,onMouseDown:this.onMouseDown,style:i({left:0,position:"relative",cursor:"pointer"},this.props.thumb.props.style)}):e.createElement(I,{ref:this.thumbRef,onMouseDown:this.onMouseDown,style:{width:o}})},o.renderScrollbar=function(){var t=!m()&&this.shouldRenderScrollbar&&!this.props.pagination;return e.createElement(V,{ref:this.trackRef,onClick:this.onScrollbarClick,style:i({color:"#bdc3c7",bottom:this.bottomOffset,display:t?"flex":"none"},this.props.trackProps)},this.renderThumb())},o.render=function(){var t=this.props,n=t.draggable;return e.createElement("div",{style:t.style},e.createElement(T,{ref:this.overflowContainerRef,onScroll:this.onOverflowContentScroll,onMouseDown:n?this.onOverflowContentMouseDown:d,style:{cursor:n?"pointer":"unset"}},this.renderChildren()),this.renderScrollbar())},r(n,[{key:"shouldRenderScrollbar",get:function(){var t=this.overflowContainerRef.current,e=this.props.numCols;return!e&&t?t.clientWidth<t.scrollWidth:!(t&&t.children.length<=e)}},{key:"trackPadding",get:function(){var t=this.props.trackProps;return t?f(t.padding,t.paddingLeft,t.paddingRight,t.paddingTop,t.paddingBottom):{top:0,right:0,bottom:0,left:0}}},{key:"contentMargin",get:function(){var t=this.state,e=t.thumbHeight,n=t.trackHeight,o=n>e?n:e,r=g()?o+20:o;return!m()&&this.shouldRenderScrollbar?r+10+"px":"20px"}},{key:"bottomOffset",get:function(){return this.state.thumbHeight>this.state.trackHeight?(this.state.thumbHeight-this.state.trackHeight)/2:0}},{key:"startElement",get:function(){if(this.props.startAt)return document.getElementById("react-smart-scroller-"+this.props.startAt.startIndex)}}]),n}(e.Component);P.defaultProps={spacing:0,vertical:!1,draggable:!1,pagination:!1};var T=n.div(H()),X=n.div(W()),V=n.div(L(),"#bdc3c7"),I=n.div(k(),"#2ecc71");function B(){var t=a(["\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    margin: 0 3px;\n    cursor: pointer;\n"]);return B=function(){return t},t}function Y(){var t=a(["\n    border: solid ",";\n    border-width: 0 2px 2px 0;\n    display: inline-block;\n    padding: 6px;\n    transform: rotate(-45deg);\n    -webkit-transform: rotate(-45deg);\n    cursor: pointer;\n"]);return Y=function(){return t},t}function z(){var t=a(["\n    border: solid ",";\n    border-width: 0 2px 2px 0;\n    display: inline-block;\n    padding: 6px;\n    transform: rotate(135deg);\n    -webkit-transform: rotate(135deg);\n    cursor: pointer;\n"]);return z=function(){return t},t}function A(){var t=a(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 40px;\n"]);return A=function(){return t},t}function j(){var t=a(["\n    flex: 0 0 auto;\n    box-sizing: border-box;\n    width: 100%;\n"]);return j=function(){return t},t}function N(){var t=a(["\n    display: flex;\n    position: relative;\n"]);return N=function(){return t},t}function _(){var t=a(["\n    display: flex;\n    flex-direction: column;\n"]);return _=function(){return t},t}var F=function(t){function n(n){var o;return(o=t.call(this,n)||this).state={paginationIndex:0,numberOfViews:0,scrollValue:0,children:o.props.children,deltaX:0,scrollLeft:0,dragScroll:0,deltaY:0,horizontal:!1,lockedMove:!1},o.overflowContainerRef=e.createRef(),o.onNext=o.onNext.bind(l(o)),o.onPrevious=o.onPrevious.bind(l(o)),o.onDotClick=o.onDotClick.bind(l(o)),o.onTouchMove=o.onTouchMove.bind(l(o)),o.onTouchStart=o.onTouchStart.bind(l(o)),o.updatePosition=o.updatePosition.bind(l(o)),o.setStartPosition=o.setStartPosition.bind(l(o)),o.onOverflowContentDrag=o.onOverflowContentDrag.bind(l(o)),o.onOverflowContentMouseDown=o.onOverflowContentMouseDown.bind(l(o)),o.deleteOverflowMouseMoveEvent=o.deleteOverflowMouseMoveEvent.bind(l(o)),o}s(n,t);var o=n.prototype;return o.componentDidMount=function(){this.setState({numberOfViews:this.numberOfViews}),window.addEventListener("resize",this.updatePosition),window.addEventListener("touchstart",this.onTouchStart),window.addEventListener("touchmove",this.onTouchMove,{passive:!1}),window.addEventListener("touchend",this.deleteOverflowMouseMoveEvent),window.addEventListener("load",this.setStartPosition)},o.componentWillUnmount=function(){window.removeEventListener("resize",this.updatePosition),window.removeEventListener("touchstart",this.onTouchStart),window.removeEventListener("mousemove",this.onOverflowContentDrag),window.removeEventListener("mouseup",this.deleteOverflowMouseMoveEvent),window.removeEventListener("touchmove",this.onTouchMove),window.removeEventListener("touchend",this.deleteOverflowMouseMoveEvent),window.removeEventListener("load",this.setStartPosition)},o.setStartPosition=function(){var t=this.props,n=t.startAt,o=t.children,r=this.overflowContainerRef.current,i=this.props.numCols||1;if(r){var s=Math.ceil((n?n.startIndex:0)/i),l=e.Children.count(o),a=Math.ceil(l/i)-1,u=s<0?0:s>a?a:s,c=-u*r.offsetWidth;r.style.transform="translate("+c+"px)",this.setState({paginationIndex:u,scrollValue:c})}},o.updatePosition=function(){var t=this.props.children,n=this.overflowContainerRef.current,o=this.props.numCols||1;if(n){var r=Math.ceil(this.state.paginationIndex/o),i=e.Children.count(t),s=Math.ceil(i/o)-1,l=r<0?0:r>s?s:r,a=-l*n.offsetWidth;n.style.transform="translate("+a+"px)",this.setState({paginationIndex:l,scrollValue:a})}},o.onNext=function(){var t=this.overflowContainerRef.current,e=this.state,n=e.paginationIndex,o=e.scrollValue,r=this.props.paginationConfig;if(t&&n===this.numberOfViews-1&&r&&r.infinite)return t.style.transform="translate(0px)",this.setState({paginationIndex:0,scrollValue:0});if(t&&n<this.numberOfViews-1){var i=o-t.offsetWidth,s=n+1;return t.style.transform="translate("+i+"px)",this.setState({paginationIndex:s,scrollValue:i})}},o.onPrevious=function(){var t=this.overflowContainerRef.current,e=this.state,n=e.paginationIndex,o=e.scrollValue,r=this.props.paginationConfig;if(t&&0===n&&r&&r.infinite){var i=this.numberOfViews-1,s=i*t.offsetWidth;return t.style.transform="translate(-"+s+"px)",this.setState({paginationIndex:i,scrollValue:-s})}if(t&&n>0){var l=n-1,a=o+t.offsetWidth;return t.style.transform="translate("+a+"px)",this.setState({paginationIndex:l,scrollValue:a})}},o.onDotClick=function(t){var e=this.overflowContainerRef.current;if(e&&t!==this.state.paginationIndex){var n=-t*e.clientWidth;e.style.transform="translate("+n+"px)",this.setState({paginationIndex:t,scrollValue:n})}},o.onOverflowContentMouseDown=function(t){t.preventDefault();var e=this.overflowContainerRef.current,n=this.props.paginationConfig;e&&n&&n.draggable&&(e.style.transition="unset",e.style.transform="translate("+this.state.scrollValue+"px)",this.setState({deltaX:t.clientX,scrollLeft:this.state.scrollValue,dragScroll:this.state.scrollValue}),window.addEventListener("mousemove",this.onOverflowContentDrag),window.addEventListener("mouseup",this.deleteOverflowMouseMoveEvent))},o.onOverflowContentDrag=function(t){var e=this.state,n=this.overflowContainerRef.current,o=e.scrollLeft+(t.clientX-e.deltaX);n&&0!==t.clientX&&(n.style.transform="translate("+o+"px)",this.setState({dragScroll:o}))},o.onTouchStart=function(t){var e=this.state.scrollValue,n=t.touches.item(0),o=this.overflowContainerRef.current;this.setState({deltaX:n.clientX,scrollLeft:e,dragScroll:e,deltaY:n.clientY,horizontal:!1,lockedMove:!1}),o&&(o.style.transition="unset")},o.onTouchMove=function(t){var e=this.state,n=e.deltaX,o=e.scrollLeft,r=e.deltaY,i=e.horizontal,s=e.lockedMove,l=t.touches.item(0),a=this.overflowContainerRef.current,u=o+(l.clientX-n),c=this.props.paginationConfig,d=c&&c.minOffsetToChangeSlide||50;if(!i&&s)return null;Math.abs(l.clientY-r)>d&&!s&&this.setState({horizontal:!1,lockedMove:!0}),Math.abs(l.clientX-n)>d&&!s&&this.setState({horizontal:!0,lockedMove:!0}),Math.abs(l.clientX-n)>d&&t.preventDefault(),a&&0!==l.clientX&&(a.style.transform="translate("+u+"px)",this.setState({dragScroll:u}))},o.deleteOverflowMouseMoveEvent=function(){var t=this.overflowContainerRef.current,e=this.state,n=e.dragScroll,o=e.paginationIndex,r=e.scrollLeft,i=this.props.paginationConfig,s=i&&i.minOffsetToChangeSlide||150,l=i&&i.transitionTime||1;if(t&&-r+n<-s){var a=o===this.childrenCount-1,u=a?o*t.clientWidth:(o+1)*t.clientWidth;t.style.transition="all "+l+"s",t.style.transform="translate(-"+u+"px)",this.setState({paginationIndex:a?o:o+1,scrollValue:-u})}if(t&&-r+n>s){var d=0===o,h=d?0:(o-1)*t.clientWidth;t.style.transition="all "+l+"s",t.style.transform="translate(-"+h+"px)",this.setState({paginationIndex:d?o:o-1,scrollValue:-h})}c(t,-r+n>-s,-r+n<s)&&(t.style.transition="all "+l+"s",t.style.transform="translate(-"+o*t.clientWidth+"px)"),window.removeEventListener("mousemove",this.onOverflowContentDrag),window.removeEventListener("mouseup",this.deleteOverflowMouseMoveEvent)},o.renderChildren=function(){var t=this.props.numCols,n=this.props.spacing/2,o=this.props.children;return e.Children.map(o,(function(r,i){var s=i!==e.Children.count(o)-1?"paddingRight: "+n+"px":void 0;return e.createElement(G,{id:"react-smart-scroller-"+i,style:{padding:"0 "+n+"px",flexBasis:t?"calc(100% / "+t+")":"unset",paddingRight:s,paddingLeft:0!==i?"paddingLeft: "+n+"px":void 0}},r)}))},o.renderDots=function(){var t=this,n=this.props.paginationConfig;return Array.from(Array(this.numberOfViews)).map((function(o,r){return e.createElement(Z,{key:r,style:{backgroundColor:t.state.paginationIndex===r?n&&n.activeDotColor||"#2ecc71":n&&n.unactiveDotsColor||"#bdc3c7"},onClick:function(){return t.onDotClick(r)}})}))},o.renderPagination=function(){var t=this.props.renderPagination;return t?t({selectedDot:this.state.paginationIndex,onPrev:this.onPrevious,onNext:this.onNext,childrenCount:this.childrenCount,onDotClick:this.onDotClick}):e.createElement(J,null,e.createElement(K,{onClick:this.onPrevious}),this.renderDots(),e.createElement(Q,{onClick:this.onNext}))},o.render=function(){var t=this.props,n=t.paginationConfig;return e.createElement(U,{style:t.style},e.createElement(q,{ref:this.overflowContainerRef,style:{transition:"all "+(n&&n.transitionTime||1)+"s",flex:1},onMouseDown:m()?d:this.onOverflowContentMouseDown},this.renderChildren()),this.renderPagination())},r(n,[{key:"childrenCount",get:function(){return e.Children.count(this.props.children)}},{key:"numberOfViews",get:function(){return Math.ceil(this.childrenCount/(this.props.numCols||1))}}]),n}(e.Component),U=n.div(_()),q=n.div(N()),G=n.div(j()),J=n.div(A()),K=n.div(z(),"#000000"),Q=n.div(Y(),"#000000"),Z=n.div(B());function $(){var t=a(["\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    position: relative;\n"]);return $=function(){return t},t}var tt=function(t){function n(){return t.apply(this,arguments)||this}s(n,t);var o=n.prototype;return o.renderMain=function(){return e.createElement(this.props.pagination?F:this.props.vertical?x:P,Object.assign({},this.props))},o.render=function(){return v()?null:e.createElement(et,null,this.renderMain())},n}(e.Component),et=n.div($());t.ReactSmartScroller=tt,Object.defineProperty(t,"__esModule",{value:!0})}));
 //# sourceMappingURL=react-smart-scroller.umd.production.min.js.map

package.json

 {
   "name": "react-smart-scroller",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "description": "React-smart-scroller is a library that allows you to create highly customizable horizontal or vertical scroller in easy way. You can modify track styles or pass your own thumb (own component)",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Worsened metrics

Total package byte prevSize

808587

decreased by-0.1%

Lines of code

7511

decreased by-0.05%

No dependency changes