react-scroll-snap-anime-slider/dist/index.module.js

A simple slider/carousel using css style scroll-snap and Popmotion.

import t,{Component as e}from"react";import{value as i,pointer as r,listen as n,inertia as s,tween as o,calc as l,easing as a}from"popmotion";var c=function(t,e){return c=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])},c(t,e)};function d(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function i(){this.constructor=t}c(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}var p=function(){return p=Object.assign||function(t){for(var e,i=1,r=arguments.length;i<r;i++)for(var n in e=arguments[i])Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t},p.apply(this,arguments)};function u(t,e){var i={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(i[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(r=Object.getOwnPropertySymbols(t);n<r.length;n++)e.indexOf(r[n])<0&&Object.prototype.propertyIsEnumerable.call(t,r[n])&&(i[r[n]]=t[r[n]])}return i}var h={slideHeight:0,slideWidth:0,visibleSlides:1,step:1,currentSlide:0,freeScroll:!1,inertiaPower:.4,inertiaStopSpeed:800},f=p(p({},h),{totalSlides:0,updateContext:function(){},subscribers:[],slideTo:function(){}}),v=t.createContext(f);function y(t,e){return t+e}function m(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];for(var i=[],r=0;r<t.length;++r){var n=t[r];null!=n&&"boolean"!=typeof n&&(Array.isArray(n)?i.push(m.apply(void 0,n)):i.push(n))}return i.join(" ").replace(/\s+/g," ").trim()}function x(){for(var t,e,i,r,n=[],s=0;s<arguments.length;s++)n[s]=arguments[s];function o(t,e){var n;if(isNaN(t)&&isNaN(e)&&"number"==typeof t&&"number"==typeof e)return!0;if(t===e)return!0;if("function"==typeof t&&"function"==typeof e||t instanceof Date&&e instanceof Date||t instanceof RegExp&&e instanceof RegExp||t instanceof String&&e instanceof String||t instanceof Number&&e instanceof Number)return t.toString()===e.toString();if(!(t instanceof Object&&e instanceof Object))return!1;if(t.isPrototypeOf(e)||e.isPrototypeOf(t))return!1;if(t.constructor!==e.constructor)return!1;if(t.prototype!==e.prototype)return!1;if(i.indexOf(t)>-1||r.indexOf(e)>-1)return!1;for(n in e){if(e.hasOwnProperty(n)!==t.hasOwnProperty(n))return!1;if(typeof e[n]!=typeof t[n])return!1}for(n in t){if(e.hasOwnProperty(n)!==t.hasOwnProperty(n))return!1;if(typeof e[n]!=typeof t[n])return!1;switch(typeof t[n]){case"object":case"function":if(i.push(t),r.push(e),!o(t[n],e[n]))return!1;i.pop(),r.pop();break;default:if(t[n]!==e[n])return!1}}return!0}if(n.length<1)return!0;for(t=1,e=n.length;t<e;t++)if(i=[],r=[],!o(n[0],n[t]))return!1;return!0}function b(t){return Math.round(1e3*t)/1e3}var g={slider:"slider__T8bxB","slider-tray":"slider-tray__29SRr","css-only":"css-only__i5pKg",slide:"slide__JLMug","slide-inner-padding":"slide-inner-padding__xA7ms","slide-inner-wrapper":"slide-inner-wrapper__2gLNh","fixed-size":"fixed-size__jvUC5","align-center":"align-center__CzoWZ","snap-stop":"snap-stop__Sd4PZ","scroll-snap":"scroll-snap__UJMQj","slider-bar-track":"slider-bar-track__cpvry","slider-bar-thumb":"slider-bar-thumb__aEFEz","slider-bar-dot-group":"slider-bar-dot-group__O5G-9","slider-dot-wrapper":"slider-dot-wrapper__hqKwO","slider-dot":"slider-dot__BE48t",dynamic:"dynamic__FKSSN",active:"active__TNQVn"};!function(t,e){void 0===e&&(e={});var i=e.insertAt;if(t&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===i&&r.firstChild?r.insertBefore(n,r.firstChild):r.appendChild(n),n.styleSheet?n.styleSheet.cssText=t:n.appendChild(document.createTextNode(t))}}(".slider__T8bxB{overflow:hidden;position:relative}.slider-tray__29SRr::-webkit-scrollbar{display:none}.slider-tray__29SRr.css-only__i5pKg{-webkit-overflow-scrolling:touch;display:flex;overflow-x:auto}.slide__JLMug{flex-shrink:0;scroll-snap-align:start;scroll-snap-stop:normal}.slide-inner-padding__xA7ms{position:relative}.slide-inner-wrapper__2gLNh.fixed-size__jvUC5{height:100%;left:0;position:absolute;top:0;width:100%}.slide__JLMug.align-center__CzoWZ{scroll-snap-align:center}.slide__JLMug.snap-stop__Sd4PZ{scroll-snap-stop:always}.slider-tray__29SRr.css-only__i5pKg.scroll-snap__UJMQj{scroll-behavior:smooth;scroll-snap-type:x mandatory}.slider-bar-track__cpvry{background-color:#eee;height:10px;position:relative}.slider-bar-thumb__aEFEz{background-color:#555;height:100%;left:0;position:absolute;top:0}.slider-bar-dot-group__O5G-9{display:flex;justify-content:center;position:relative}.slider-dot-wrapper__hqKwO{cursor:pointer;padding:5px}.slider-dot__BE48t{background-color:#555;border-radius:10rem;height:8px;width:8px}.slider-dot-wrapper__hqKwO:not(.dynamic__FKSSN) .slider-dot__BE48t{background-color:#ddd}.slider-dot-wrapper__hqKwO:not(.dynamic__FKSSN).active__TNQVn .slider-dot__BE48t{background-color:#666}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLm1vZHVsZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGVBRUUsZUFBZ0IsQ0FEaEIsaUJBQ2tCLENBRXBCLHVDQUNFLFlBQWUsQ0FFakIsb0NBR0UsZ0NBQWlDLENBRmpDLFlBQWEsQ0FDYixlQUNtQyxDQUVyQyxjQUNFLGFBQWMsQ0FDZCx1QkFBd0IsQ0FDeEIsdUJBQTBCLENBRTVCLDRCQUNFLGlCQUFvQixDQUV0Qiw4Q0FHRSxXQUFZLENBQ1osTUFBTyxDQUhQLGlCQUFrQixDQUlsQixLQUFNLENBSE4sVUFHUSxDQUVWLGtDQUNFLHdCQUEyQixDQUU3QiwrQkFDRSx1QkFBMEIsQ0FFNUIsdURBQ0Usc0JBQXVCLENBQ3ZCLDRCQUErQixDQUVqQyx5QkFDRSxxQkFBc0IsQ0FFdEIsV0FBWSxDQURaLGlCQUNjLENBRWhCLHlCQUtFLHFCQUFzQixDQUR0QixXQUFZLENBRlosTUFBTyxDQURQLGlCQUFrQixDQUVsQixLQUV3QixDQUUxQiw2QkFDRSxZQUFhLENBQ2Isc0JBQXVCLENBQ3ZCLGlCQUFvQixDQUV0QiwyQkFFRSxjQUFlLENBRGYsV0FDaUIsQ0FFbkIsbUJBSUUscUJBQXNCLENBRHRCLG1CQUFvQixDQUZwQixVQUFXLENBQ1gsU0FFd0IsQ0FFMUIsbUVBQ0UscUJBQXdCLENBRTFCLGlGQUNFLHFCQUF3QiIsImZpbGUiOiJzdHlsZS5tb2R1bGUuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi5zbGlkZXIge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIG92ZXJmbG93OiBoaWRkZW47IH1cblxuLnNsaWRlci10cmF5Ojotd2Via2l0LXNjcm9sbGJhciB7XG4gIGRpc3BsYXk6IG5vbmU7IH1cblxuLnNsaWRlci10cmF5LmNzcy1vbmx5IHtcbiAgZGlzcGxheTogZmxleDtcbiAgb3ZlcmZsb3cteDogYXV0bztcbiAgLXdlYmtpdC1vdmVyZmxvdy1zY3JvbGxpbmc6IHRvdWNoOyB9XG5cbi5zbGlkZSB7XG4gIGZsZXgtc2hyaW5rOiAwO1xuICBzY3JvbGwtc25hcC1hbGlnbjogc3RhcnQ7XG4gIHNjcm9sbC1zbmFwLXN0b3A6IG5vcm1hbDsgfVxuXG4uc2xpZGUtaW5uZXItcGFkZGluZyB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTsgfVxuXG4uc2xpZGUtaW5uZXItd3JhcHBlci5maXhlZC1zaXplIHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBsZWZ0OiAwO1xuICB0b3A6IDA7IH1cblxuLnNsaWRlLmFsaWduLWNlbnRlciB7XG4gIHNjcm9sbC1zbmFwLWFsaWduOiBjZW50ZXI7IH1cblxuLnNsaWRlLnNuYXAtc3RvcCB7XG4gIHNjcm9sbC1zbmFwLXN0b3A6IGFsd2F5czsgfVxuXG4uc2xpZGVyLXRyYXkuY3NzLW9ubHkuc2Nyb2xsLXNuYXAge1xuICBzY3JvbGwtYmVoYXZpb3I6IHNtb290aDtcbiAgc2Nyb2xsLXNuYXAtdHlwZTogeCBtYW5kYXRvcnk7IH1cblxuLnNsaWRlci1iYXItdHJhY2sge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZWVlO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGhlaWdodDogMTBweDsgfVxuXG4uc2xpZGVyLWJhci10aHVtYiB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgbGVmdDogMDtcbiAgdG9wOiAwO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGJhY2tncm91bmQtY29sb3I6ICM1NTU7IH1cblxuLnNsaWRlci1iYXItZG90LWdyb3VwIHtcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTsgfVxuXG4uc2xpZGVyLWRvdC13cmFwcGVyIHtcbiAgcGFkZGluZzogNXB4O1xuICBjdXJzb3I6IHBvaW50ZXI7IH1cblxuLnNsaWRlci1kb3Qge1xuICBoZWlnaHQ6IDhweDtcbiAgd2lkdGg6IDhweDtcbiAgYm9yZGVyLXJhZGl1czogMTByZW07XG4gIGJhY2tncm91bmQtY29sb3I6ICM1NTU7IH1cblxuLnNsaWRlci1kb3Qtd3JhcHBlcjpub3QoLmR5bmFtaWMpIC5zbGlkZXItZG90IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogI2RkZDsgfVxuXG4uc2xpZGVyLWRvdC13cmFwcGVyOm5vdCguZHluYW1pYykuYWN0aXZlIC5zbGlkZXItZG90IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzY2NjsgfVxuIl19 */");var S="rssas";function N(t){return[S+"-"+t,g[t]]}var C=function(e){function i(t){var i=e.call(this,t)||this;return i.updateContext=function(t){i.setState({context:p(p({},i.state.context),t)})},i.state={context:i.extractContextProps(i.props)},i}return d(i,e),i.prototype.extractContextProps=function(t){var e,i=Object.assign({},f);for(e in i)null!=t[e]&&(i[e]=this.props[e]);return i.step=this.validateStep(t),i.updateContext=this.updateContext,i.subscribers=[],i.onSlide=t.onSlide,i.slideMargin=t.slideMargin,i.snapAnimation=t.snapAnimation,i.trayPadding=t.trayPadding,i},i.prototype.compareContextProps=function(t,e){for(var i=0,r=["totalSlides","visibleSlides","step","slideHeight","slideWidth","slideMargin","trayPadding","freeScroll","onSlide","snapAnimation","inertiaPower","inertiaStopSpeed"];i<r.length;i++){var n=r[i];if(t[n]!==e[n])return!1}return!0},i.prototype.validateStep=function(t){return t.step>0?t.step<t.visibleSlides?t.step:t.visibleSlides:1},i.prototype.componentDidUpdate=function(t,e,i){this.compareContextProps(t,this.props)||this.setState({context:this.extractContextProps(this.props)})},i.prototype.render=function(){var e=this.props,i=e.className,r=e.children;e.currentSlide,e.freeScroll,e.slideHeight,e.slideWidth,e.step,e.totalSlides,e.visibleSlides,e.slideMargin,e.onSlide,e.trayPadding,e.inertiaPower,e.snapAnimation,e.inertiaStopSpeed;var n=u(e,["className","children","currentSlide","freeScroll","slideHeight","slideWidth","step","totalSlides","visibleSlides","slideMargin","onSlide","trayPadding","inertiaPower","snapAnimation","inertiaStopSpeed"]);return t.createElement("div",p({},n,{className:m(N("wrapper"),i)}),t.createElement(v.Provider,{value:p({},this.state.context)},r))},i.defaultProps=p({},h),i}(t.Component),Q=function(e){function c(l){var a=e.call(this,l)||this;return a.sliderTrayRef=t.createRef(),a.tempCurrentSlide=0,a.sliderDidSlided=!1,a.onScroll=function(t){var e=a.getTrayState();if(e){for(var i=e.trayWidth,r=e.innerTrayWidth,n=e.slideWidth,s=e.scrollLeft,o=a.context.currentSlide,l=0;l<a.context.subscribers.length;++l)a.context.subscribers[l](r,n,s);a.updateSlideIndex(e),a.context.onSlide&&a.context.onSlide({scrollLeft:s,currentSlide:o,slideWidth:n,trayWidth:i})}},a.onWheel=function(t){var e;if(a.stopAnimeActions(),a.sliderTrayRef.current){var i=a.sliderTrayRef.current;!a.context.freeScroll&&(e=i.classList).add.apply(e,N("scroll-snap"))}},a.onTouchstart=function(t){a.stopTrackingActions()},a.startTracking=function(t){t.preventDefault();var e=a.getScrollMax();if(a.stopTrackingActions(),a.stopAnimeActions(),a.sliderTrayRef.current&&e>0){var s=a.sliderTrayRef.current,o=s.scrollLeft,l=o;a.sliderDidSlided=!1,a.scrollValue=i(o,(function(t){a.sliderDidSlided&&s.scrollTo(t,0)})),a.pointerAction=r({x:0,y:0}).pipe((function(t){var i,r=l-t.x;return 0==t.x||a.sliderDidSlided||(a.sliderDidSlided=!0,!a.context.freeScroll&&(i=s.classList).remove.apply(i,N("scroll-snap"))),r<0?(l=t.x,{x:0,y:t.y}):r>e?(l=e+t.x,{x:e,y:t.y}):{x:r,y:t.y}})).start({update:function(t){a.scrollValue.update(t.x)}}),a.mouseUpAction=n(window.document,"mouseup").start(a.stopTracking),window.addEventListener("touchstart",a.onTouchstart,!1)}},a.stopTracking=function(t){if(a.pointerAction&&a.sliderTrayRef.current){var e=a.sliderTrayRef.current,i=a.getScrollMax(),r=a.scrollValue.get(),n=a.scrollValue.getVelocity(),l=!1,c=a.context.inertiaStopSpeed,d=function(){var t;a.snapAction=void 0,!a.context.freeScroll&&(t=e.classList).add.apply(t,N("scroll-snap"))},p=function(t,e){return o({from:t,to:e,duration:300,ease:a.getEase()}).start({update:function(t){return a.scrollValue.update(t)},complete:d})};if(a.stopTrackingActions(),0===n){if(!a.context.freeScroll){var u=a.getSnapScrollValue(r,n);Math.abs(r-u)>.5?a.snapAction=p(r,u):d()}return}var h=!1,f=s({from:r,velocity:n,power:a.context.inertiaPower,restDelta:.4,timeConstant:500}).while((function(t){return!l})).pipe((function(t){return t<0?(l=!0,0):t>i?(l=!0,i):t})).start({update:function(t){if(h){var e=a.scrollValue.getVelocity();if(a.scrollValue.update(t),Math.abs(e)<c&&!a.context.freeScroll){f.stop(),a.inertiaAction=void 0;var i=a.getSnapScrollValue(t,e);a.snapAction=p(t,i)}}else h=!0},complete:d});a.inertiaAction=f}},a}return d(c,e),c.prototype.getTrayState=function(){if(this.sliderTrayRef.current){var t=this.sliderTrayRef.current,e=t.scrollLeft,i=t.offsetWidth,r=Number(window.getComputedStyle(t).paddingLeft.replace("px","")),n=null==this.context.trayPadding?i:i-2*r,s=n/this.context.visibleSlides;return{trayElement:t,scrollLeft:e,trayWidth:i,innerTrayWidth:n,trayPaddingX:r,slideWidth:s,slideCount:t.childElementCount,currentSlide:Math.round(e/s)}}},c.prototype.updateSlideIndex=function(t){if(void 0===t&&(t=this.getTrayState()),t){var e=t.currentSlide;this.tempCurrentSlide!==e&&(this.tempCurrentSlide=e,this.context.updateContext({currentSlide:this.tempCurrentSlide}))}},c.prototype.slideTo=function(t,e){var i,r=this;void 0===e&&(e=!0);var n=this.getTrayState();if(n){this.stopAnimeActions();var s=n.trayElement,l=n.scrollLeft,a=t*n.slideWidth;!this.context.freeScroll&&(i=s.classList).remove.apply(i,N("scroll-snap")),this.snapAction=o({from:l,to:a,duration:e?300:0,ease:this.getEase()}).start({update:function(t){s.scrollTo(t,0)},complete:function(){var t;r.snapAction=void 0,!r.context.freeScroll&&(t=s.classList).add.apply(t,N("scroll-snap"))}})}},c.prototype.stopTrackingActions=function(){var t,e;null===(t=this.pointerAction)||void 0===t||t.stop(),this.pointerAction=void 0,null===(e=this.mouseUpAction)||void 0===e||e.stop(),this.mouseUpAction=void 0,window.removeEventListener("touchstart",this.onTouchstart,!1)},c.prototype.stopAnimeActions=function(){this.inertiaAction&&(this.inertiaAction.stop(),this.inertiaAction=void 0),this.snapAction&&(this.snapAction.stop(),this.snapAction=void 0)},c.prototype.applyOverdrag=function(t,e){var i=t;return t<0&&(i=l.getValueFromProgress(0,t,.1)),t>e&&(i=l.getValueFromProgress(e,t,.1)),i},c.prototype.getScrollMax=function(){var t=this.getTrayState();return t?t.slideWidth*(t.slideCount-this.context.visibleSlides):0},c.prototype.getSnapScrollValue=function(t,e){var i=t,r=this.getTrayState();if(r){var n=r.slideWidth,s=r.slideCount,o=0;(o=e>0?Math.ceil(t/n):e<0?Math.floor(t/n):Math.round(t/n))<=s&&(i=o*n)}return i},c.prototype.getEase=function(){if(this.context.snapAnimation){if("string"!=typeof this.context.snapAnimation)return a.cubicBezier.apply(a,this.context.snapAnimation);if("easeInOut"===this.context.snapAnimation)return a.easeInOut;if("easeIn"===this.context.snapAnimation)return a.easeIn}return a.easeOut},c.prototype.handleOnClickCapture=function(t){this.sliderDidSlided&&(t.preventDefault(),t.stopPropagation())},c.prototype.componentDidUpdate=function(t,e,i){var r=this;this.context.slideTo=function(t){return r.slideTo(t,!0)}},c.prototype.componentDidMount=function(){var t=this;if(this.sliderTrayRef.current){var e=this.sliderTrayRef.current;this.mouseDownAction=n(e,"mousedown").start(this.startTracking),e.addEventListener("scroll",this.onScroll,!1),e.addEventListener("mousewheel",this.onWheel,!1),e.addEventListener("DOMMouseScroll",this.onWheel,!1)}this.tempCurrentSlide!==this.context.currentSlide&&this.slideTo(this.context.currentSlide,!1),this.context.slideTo=function(e){return t.slideTo(e,!0)}},c.prototype.componentWillUnmount=function(){var t;if(this.sliderTrayRef.current){var e=this.sliderTrayRef.current;this.stopTrackingActions(),this.stopAnimeActions(),null===(t=this.mouseDownAction)||void 0===t||t.stop(),e.removeEventListener("scroll",this.onScroll,!1),e.removeEventListener("mousewheel",this.onWheel,!1),e.removeEventListener("DOMMouseScroll",this.onWheel,!1)}},c.prototype.render=function(){var e=this.props,i=e.children,r=e.className,n=e.trayProps,s=u(e,["children","className","trayProps"]),o={};return this.context.slideMargin&&(o.marginLeft="-"+this.context.slideMargin,o.marginRight="-"+this.context.slideMargin),null!=this.context.trayPadding&&(o.paddingLeft=this.context.trayPadding,o.paddingRight=this.context.trayPadding),t.createElement("div",p({},s,{className:m(N("slider"),r)}),t.createElement("div",p({},n,{className:m(N("slider-tray"),N("css-only"),this.context.freeScroll?"":N("scroll-snap"),null==n?void 0:n.className),style:p(p({},null==n?void 0:n.style),o),ref:this.sliderTrayRef,onClickCapture:this.handleOnClickCapture.bind(this)}),i))},c}(e);Q.contextType=v;var I=function(e){function i(t){var i=e.call(this,t)||this;return i.state={},i}return d(i,e),i.prototype.render=function(){var e=this.props,i=e.children,r=e.style,n=e.className,s=e.innerMarginDivProps,o=e.innerPaddingDivProps,l=e.innerWrapperDivProps,a=u(e,["children","style","className","innerMarginDivProps","innerPaddingDivProps","innerWrapperDivProps"]),c=this.context,d=c.slideHeight,h=c.slideWidth,f=c.visibleSlides,v=d>0&&h>0?d/h*100:0,y=p({width:(f>0?100/f:100)+"%",scrollMargin:null!=this.context.trayPadding&&this.context.visibleSlides%2==0?"0 ".concat(this.context.trayPadding):""},r),x=p({paddingBottom:v>0?v+"%":""},null==o?void 0:o.style),b=p({},null==s?void 0:s.style);null!=this.context.slideMargin&&(b.marginLeft=this.context.slideMargin,b.marginRight=this.context.slideMargin);var g=v>0?N("fixed-size"):"";return t.createElement("div",p({},a,{className:m(N("slide"),null!=this.context.trayPadding&&this.context.visibleSlides%2==1&&N("align-center"),n),style:y}),t.createElement("div",p({},s,{className:m(N("slide-inner-margin")),style:b}),t.createElement("div",p({},o,{className:m(N("slide-inner-padding")),style:x}),t.createElement("div",p({},l,{className:m(N("slide-inner-wrapper"),g,null==l?void 0:l.className)}),i))))},i}(e);I.contextType=v;var L=function(e){function i(){var t=null!==e&&e.apply(this,arguments)||this;return t.className="slider-button",t.ariaLabel="",t.isBack=!0,t.onClick=function(){},t}return d(i,e),i.prototype.handleOnClick=function(t){var e=this.context.currentSlide,i=this.context.step,r=this.context.totalSlides-this.context.visibleSlides,n=e+(t?i:-1*i);n>r?n=r:n<0&&(n=0),e!==n&&this.context.slideTo(n)},i.prototype.render=function(){var e=this,i=this.context,r=i.visibleSlides,n=i.totalSlides,s=i.currentSlide,o=this.props,l=o.className,a=o.disabled,c=o.onClick,d=u(o,["className","disabled","onClick"]),h=m(this.className,l),f=n-r;return null==a&&(this.isBack&&s<=0||!this.isBack&&s>=f)&&(a=!0),t.createElement("button",p({"aria-label":this.ariaLabel,type:"button",disabled:a},d,{className:h,onClick:function(t){c&&"function"==typeof c&&c(t),e.onClick()}}),this.props.children)},i}(t.PureComponent);L.contextType=v;var _=function(t){function e(e){var i=t.call(this,e)||this;return i.className=m(N("slider-button-back"),N(i.className)),i.ariaLabel="previous",i.onClick=function(){return i.handleOnClick(!1)},i}return d(e,t),e}(L),G=function(t){function e(e){var i=t.call(this,e)||this;return i.isBack=!1,i.className=m(N("slider-button-next"),N(i.className)),i.ariaLabel="next",i.onClick=function(){return i.handleOnClick(!0)},i}return d(e,t),e}(L),B=function(t){function e(e){var i=t.call(this,e)||this;return i.slideTo=function(t){var e=i.context.currentSlide,r=i.context.totalSlides-i.context.visibleSlides;t>r?t=r:t<0&&(t=0),e!==t&&i.context.slideTo(t)},i.onScroll=function(t,e,r){var n=r/(i.context.totalSlides*e)*100;i.setState({left:n})},i.state={left:0},i}return d(e,t),e.prototype.componentDidUpdate=function(t,e,i){this.prevContext.subscribers!==this.context.subscribers&&(this.context.subscribers.push(this.onScroll),this.prevContext=this.context)},e.prototype.componentDidMount=function(){var t=this.context,e=t.currentSlide;t.visibleSlides;var i=t.totalSlides;if(this.context.subscribers.push(this.onScroll),this.prevContext=this.context,0!==e){var r=e/i*100;this.setState({left:r})}},e.prototype.componentWillUnmount=function(){var t=this.context.subscribers.indexOf(this.onScroll);t>=0&&this.context.subscribers.splice(t,1)},e}(e);B.contextType=v;var w=function(e){function i(){return null!==e&&e.apply(this,arguments)||this}return d(i,e),i.prototype.render=function(){var e=this.context,i=e.visibleSlides,r=e.totalSlides,n=this.props,s=n.className,o=n.style,l=n.thumbProps,a=n.trackProps,c=u(n,["className","style","thumbProps","trackProps"]),d=i/r*100,h=this.state.left;h<0&&(d+=h,h=0),h+d>100&&(d=100-h);var f={width:d+"%",left:h+"%"},v=m(N("slider-bar"),s);return l&&(f=p(p({},l.style),f)),t.createElement("div",p({},c,{className:v,style:o}),t.createElement("div",p({},a,{className:m(N("slider-bar-track"),null==a?void 0:a.className)}),t.createElement("div",p({},l,{className:m(N("slider-bar-thumb"),null==l?void 0:l.className),style:f}))))},i}(B),U=function(e){function i(){return null!==e&&e.apply(this,arguments)||this}return d(i,e),i.prototype.theDot=function(e,i,r){return t.createElement("div",{className:m(N("slider-dot-wrapper"),i?N("active"):""),onClick:r},t.createElement("div",{key:e,className:m(N("slider-dot"))}))},i.prototype.renderDots=function(t){for(var e=t.visibleSlides,i=t.totalSlides,r=t.currentSlide,n=t.slideTo,s=[],o=r,l=r+e,a=function(t){var e=o<=t&&t<l;s.push(c.theDot(t,e,(function(){return n(t)})))},c=this,d=0;d<i;++d)a(d);return s},i.prototype.render=function(){var e=this.context,i=e.visibleSlides,r=e.totalSlides,n=e.step,s=e.currentSlide,o=this.props;o.children;var l=o.className,a=o.dotGroupProps,c=o.renderDots,d=u(o,["children","className","dotGroupProps","renderDots"]),h={visibleSlides:i,totalSlides:r,step:n,currentSlide:s,left:this.state.left,slideTo:this.slideTo},f=m(N("slider-bar"),l);return t.createElement("div",p({},d,{className:f}),t.createElement("div",p({},a,{className:m(N("slider-bar-dot-group"),null==a?void 0:a.className)}),c?c(h):this.renderDots(h)))},i}(B);function W(e,i){var r=e.visibleSlides,n=e.totalSlides;e.step;for(var s=e.left,o=e.currentSlide,l=e.slideTo,a=[],c=b(r/n),d=b(s/100),p=d+c,u=b(1/n),h=o,f=o+r,v=function(e){var r=b(e/n),s=b(r+u),o=1,c=h<=e&&e<f;if(r<p&&s>d)if(r<=d&&d<=s)o+=(s-d)/u;else if(d<=r&&s<=p)o=2;else if(r<=p&&p<=s){o+=(p-r)/u}a.push(t.createElement(i,{key:e,scale:o,active:c,onClick:function(){l(e)}}))},y=0;y<n;++y)v(y);return a}function A(e){return t.createElement("div",{className:m(N("slider-dot-wrapper"),N("dynamic"),e.active?N("active"):""),onClick:e.onClick},t.createElement("div",{className:m(N("slider-dot"),N("circle")),style:{transform:"scale(".concat(e.scale,")")}}))}function F(t){return W(t,A)}function T(e){return t.createElement("div",{className:m(N("slider-dot-wrapper"),N("dynamic"),e.active?N("active"):""),onClick:e.onClick},t.createElement("div",{className:m(N("slider-dot"),N("circle")),style:{width:"".concat(8*e.scale,"px"),height:"".concat(8,"px")}}))}function Z(t){return W(t,T)}export{_ as ButtonBack,G as ButtonNext,C as Carousel,A as CircleDot,T as PillDot,I as Slide,Q as Slider,U as SliderBarDotGroup,w as SliderBarLine,y as add,m as cn,x as deepCompare,W as renderDotsDynamicByScale,F as renderDotsDynamicCircle,Z as renderDotsDynamicPill,b as round3};