@trendyol-js/react-carousel - npm Package Compare versions

Comparing version 3.0.0-beta.2 to 3.0.0-beta.3

CHANGELOG.md

@@ -0,1 +1,8 @@
+-   # [Carousel] triggerClickOn prop
+    Triggers onClick handlers of carousel items if swipe amount smaller than `triggerClickOn`.
+
+```jsx
+<Carousel triggerClickOn={5} />
+```
+
 -   # [Carousel] Navigation Thumbnail Feature
@@ -2,0 +9,0 @@ Enables item to item navigation.

dist/cjs/index.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,r=function(){return(r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};function i(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}var o="styles-module_carousel-base__3keqD",s="styles-module_item-provider__YgMwz",a="styles-module_item-container__a8zaY",l="styles-module_item-tracker__3bypy",u="styles-module_carousel-arrow__26sRw";i(".styles-module_carousel-base__3keqD {\n\twidth: 100%;\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\n}\n\n.styles-module_item-provider__YgMwz {\n\toverflow: hidden;\n\twidth: 100%;\n\tcursor: pointer;\n}\n\n.styles-module_item-container__a8zaY img {\n\t-webkit-user-select: none;\n\t        user-select: none;\n\t-webkit-user-drag: none;\n}\n\n.styles-module_item-tracker__3bypy {\n\theight: 100%;\n\tdisplay: flex;\n}\n\n.styles-module_carousel-arrow__26sRw {\n\tz-index: 1;\n}\n");var c,f=function(e){return n.createElement("button",{className:u,onClick:e.onClick,"data-direction":e.direction})};!function(e){e[e.Right=-1]="Right",e[e.Left=1]="Left"}(c||(c={}));var d=function(){function e(e,t){this.arr=e,this.currentIndex=t}return e.prototype.next=function(){var e=this.currentIndex,t=this.arr;return this.currentIndex=e<t.length-1?e+1:0,this.current()},e.prototype.prev=function(){var e=this.currentIndex,t=this.arr;return this.currentIndex=e>0&&e<t.length?e-1:t.length-1,this.current()},e.prototype.current=function(){return this.arr[this.currentIndex]},e}(),h=function(e,t,n){return n*e*t},m=function(e,t,n,r){var i=e>t;return n?{left:i,right:i}:{left:i&&0!==r,right:i&&r+t<e}},v=function(e,t,n){if(!n)return e;for(var r=Array.from(e),i=new d(e,0),o=0;o<t;o++)r.unshift(i.prev());return r};function g(e){return e.nativeEvent instanceof MouseEvent?e.nativeEvent.pageX:e.nativeEvent instanceof TouchEvent?e.nativeEvent.changedTouches[0].pageX:0}function p(e,t,n,r,i){if(n&&n.length<t.length)return v(t,r,i);var o=e.map((function(e){return t.find((function(t){return e.key===t.key}))}));return o.some((function(e){return void 0===e}))?v(t,r,i):o}var y=function(e){var i=t.useState(200),o=i[0],u=i[1],f=t.useCallback((function(t){if(null!==t){var n=t.getBoundingClientRect().width/e.show;u(n),e.widthCallBack(n)}}),[o]);e.responsive&&function(e){var n=t.useState(window.innerWidth),r=n[0],i=n[1];t.useLayoutEffect((function(){var t=function(){var t=r-window.innerWidth;i(window.innerWidth),e(t)};return window.addEventListener("resize",t),function(){return window.removeEventListener("resize",t)}}),[])}((function(e){u(o-e)}));var d=t.useState({initial:e.transform,start:0,isDown:!1,drag:0,finished:!0,pointers:!0}),h=d[0],m=d[1],v=function(t){t.persist(),m(r(r({},h),{isDown:!0,start:g(t),initial:e.transform,finished:!1}))},p=function(t){if(t.persist(),!h.finished){if(Math.abs(h.drag)<o*e.swipeOn)return e.dragCallback(e.transform),m({initial:e.transform,start:0,isDown:!1,drag:0,finished:!0,pointers:!0});e.slideCallback(h.drag>0?c.Right:c.Left),m(r(r({},h),{drag:0,isDown:!1,finished:!0,pointers:!0}))}},y=function(e){if(e.persist(),h.isDown){var t=g(e);m(r(r({},h),{drag:h.start-t,pointers:!1}))}},w=e.swiping?{onTouchCancel:p,onTouchEnd:p,onTouchMove:y,onTouchStart:v,onMouseDown:v,onMouseLeave:p,onMouseUp:p,onMouseMove:y}:{};return n.createElement("div",{ref:f,className:s},n.createElement("div",r({"data-testid":"trackList"},w,{className:l,style:{transform:"translateX("+(e.transform-h.drag)+"px)",transition:"transform "+e.transition+"s ease 0s",width:o*e.items.length}}),e.items.map((function(e,t){return n.createElement("div",{key:t,style:{width:o,pointerEvents:h.pointers?"all":"none"},className:a},e)}))))},w={children:[],show:1,slide:1,transition:.5,swiping:!1,swipeOn:1,responsive:!1,infinite:!0,className:"",useArrowKeys:!1,a11y:{},dynamic:!1,paginationCallback:null,pageCount:0,rightArrow:null,leftArrow:null,autoSwipe:null,navigation:null},_="styles-module_carousel-navigation__1g_vs";i(".styles-module_carousel-navigation__1g_vs {\n\tdisplay: flex;\n\tposition: absolute;\n\tbottom: 0;\n}\n");var b=function(e){var t=e.items,r=e.current,i=e.onClick,o=e.factory;return n.createElement("div",{className:_},t.map((function(e,t){return n.createElement("div",{onMouseOver:function(){return i(t)},key:t},o(r===t))})))},k="styles-module_sliderBase__swkx1",L="styles-module_slider__o0fqa",E="styles-module_sliding__3T6T6";i(".styles-module_sliderBase__swkx1 {\n\twidth: 100%;\n\tposition: relative;\n}\n\n.styles-module_slider__o0fqa {\n\tdisplay: flex;\n\toverflow-x: auto;\n\tscrollbar-width: none; /* Firefox 64 */\n\t-ms-overflow-style: none; /* Internet Explorer 11 */\n}\n\n.styles-module_slider__o0fqa::-webkit-scrollbar {\n\t/** WebKit */\n\tdisplay: none;\n}\n\n.styles-module_slider__o0fqa > * {\n\tflex: 0 0 auto;\n}\n\n.styles-module_sliding__3T6T6 > * {\n\tpointer-events: none;\n}\n");exports.Carousel=function(e){var i,s,a,l,u=r(r({},w),e),g=v(u.children,u.navigation?u.children.length-1:u.slide,u.infinite),_=t.useState(g),k=_[0],L=_[1],E=t.useRef(g),C=t.useState(0),x=C[0],R=C[1],S=t.useState({transform:0,transition:0,isSliding:!1}),M=S[0],T=S[1],N=t.useState(0),I=N[0],A=N[1],D=t.useState(m(u.children.length,u.show,u.infinite,I)),W=D[0],z=D[1],O=(a=e.children,l=t.useRef(),t.useEffect((function(){l.current=a})),l.current),X=t.useState(0),q=X[0],B=X[1],j=t.useRef(!1),K=t.useRef(null),Y=t.useRef(),P="function"==typeof u.navigation;u.dynamic&&t.useEffect((function(){var e=p(E.current,u.children,O,u.slide,u.infinite);L(e),E.current=e,q<u.pageCount&&O&&(null==O?void 0:O.length)<u.children.length&&(F(c.Right),B(q+1))}),[u.children]),t.useEffect((function(){U()}),[]);var U=function(){clearTimeout(Y.current),K&&"number"==typeof u.autoSwipe&&u.autoSwipe>u.transition&&(Y.current=setTimeout((function(){K.current&&K.current.click()}),u.autoSwipe))},F=function(e,t){if(!(M.isSliding||e===c.Right&&!W.right||e===c.Left&&!W.left)){if(u.paginationCallback&&e===c.Right&&q<u.pageCount-1&&!j.current)return j.current=!0,void u.paginationCallback(e);var n=u.children,r=function(e,t,n,r){var i=e-r*t;return i<0?n+i:n<=i?i-n:i}(I,u.slide,n.length,e),i="number"==typeof t?t-I:-1*e,o=u.infinite?P?function(e,t,n,r,i,o){var s=function(e,t,n){var r=e+t>=n.length?e+t-n.length:e+t;return r<0?n.length+r:r}(n,i,e),a=Math.floor(t.length/2),l=new d(e,s),u=Array.from(t);switch(+o){case c.Left:for(var f=0;f<a;f++){var h=a-(Math.abs(i)+f)-r;(h<0||!u[h])&&u.unshift(l.current()),l.prev()}break;case c.Right:for(f=0;f<a;f++)u[a+i+f+r]||u.push(l.current()),l.next()}return u}(n,k,r,u.show,i,e):function(e,t,n,r,i,o){var s=new d(e,n),a=Array.from(t);switch(+o){case c.Left:for(var l=i;l>=0;l--)(i-l<0||!a[l-i])&&a.unshift(s.current()),s.prev();break;case c.Right:for(l=0;l<r+i;l++)a[2*i+l]||a.push(s.current()),s.next()}return a}(n,k,r,u.show,u.slide,e):k;u.infinite&&e===c.Right&&(L(o),E.current=o),T({transform:M.transform+Math.abs(i)*h(x,u.slide,e),transition:u.transition,isSliding:!0}),A(P&&"number"==typeof t?t:r),z(m(n.length,u.show,u.infinite,r)),setTimeout((function(){if(u.infinite){var n=P?function(e,t,n){return n===c.Left?e.slice(0,t):e.slice(t)}(e===c.Right?E.current:o,function(e,t,n,r){return"number"==typeof e?r===c.Right?e-t+1:n:-1*r}(t,r,i,e),e):function(e,t,n){return n===c.Left?e.slice(0,-1*t):e.slice(t)}(e===c.Right?E.current:o,u.slide,e);L(n),E.current=n}T({transform:u.infinite?h(x,u.navigation?u.children.length-1:u.slide,c.Right):M.transform+h(x,u.slide,e),transition:0,isSliding:!1}),U()}),1e3*u.transition),j.current=!1}};return n.createElement("div",r({},u.a11y,{"data-testid":"carousel",tabIndex:0},u.useArrowKeys?{onKeyDown:function(e){37===e.keyCode?F(c.Left):39===e.keyCode&&F(c.Right)}}:{},{className:o+" "+u.className}),W.left&&n.createElement("div",{onClick:function(){return F(c.Left)}},null!==(i=u.leftArrow)&&void 0!==i?i:n.createElement(f,{direction:"left"})),n.createElement(y,r({},u,{transition:M.transition,items:E.current,transform:M.transform,slideCallback:function(e){F(e)},dragCallback:function(e){T({transform:e,transition:u.transition,isSliding:!1}),setTimeout((function(){return T(r(r({},M),{transition:0}))}),1e3*u.transition)},widthCallBack:function(e){R(e),T({transform:u.infinite?h(e,u.navigation?u.children.length-1:u.slide,c.Right):0,transition:0,isSliding:!1})}})),W.right&&n.createElement("div",{onClick:function(){return F(c.Right)},ref:K},null!==(s=u.rightArrow)&&void 0!==s?s:n.createElement(f,{direction:"right"})),P&&n.createElement(b,{factory:u.navigation,items:u.children,current:I,onClick:function(e){I!==e&&F(e>I?c.Right:c.Left,e)}}))},exports.ScrollingCarousel=function(e){var r=e.children,i=e.className,o=e.leftIcon,s=e.rightIcon,a=t.useRef(null),l=t.useState(!1),u=l[0],f=l[1],d=t.useState({startX:0,scrollLeft:0}),h=d[0],m=d[1],v=function(){var e=a.current;return{left:!!e&&e.scrollLeft>0,right:!!e&&e.scrollWidth>e.scrollLeft+e.offsetWidth}},g=t.useState(v()),p=g[0],y=g[1],w=function(e){y(v())},_=t.useCallback((function(e){null!==e&&(Object.defineProperty(a,"current",{value:e}),y(v()),e.addEventListener("scroll",w))}),[a,r]),b=function(e){f(!1),y(v()),a.current.classList.remove(E)},C=function(e){var t=function(e){for(var t,n,r=a.current,i=e===c.Left?r.scrollLeft+r.offsetWidth:r.scrollLeft,o=0,s=0,l=Array.from(r.children);s<l.length;s++){var u=l[s],f=(t=u,n=void 0,n=getComputedStyle(t),t.offsetWidth+(parseInt(n.marginLeft,10)||0)+(parseInt(n.marginRight,10)||0));if((o+=f)>=i){var d=e===c.Left?o-i:f;return(r.offsetWidth-d)*e}}return r.offsetWidth}(e),n=a.current.scrollLeft;x(500,t,n)},x=function(e,t,n){for(var r=0,i=0;r<=e;i++)window.setTimeout(R,r,i*t/100+n),r+=e/100},R=function(e){a.current.scrollLeft=e},S=function(e,t,r){return n.createElement("div",{"data-arrow":t,onClick:function(){return C(e)}},null!=r?r:n.createElement("button",null))};return n.createElement("div",{className:k+" "+i,"data-testid":"carousel"},p.left&&S(c.Right,"left",o),p.right&&S(c.Left,"right",s),n.createElement("div",{ref:_,onMouseDown:function(e){f(!0),m({startX:e.pageX-a.current.offsetLeft,scrollLeft:a.current.scrollLeft})},onMouseLeave:b,onMouseUp:b,onMouseMove:function(e){if(u){e.preventDefault(),a.current.classList.add(E);var t=e.pageX-a.current.offsetLeft-h.startX;a.current.scrollLeft=h.scrollLeft-t}},className:L},r))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,r=function(){return(r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};function i(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}var o="styles-module_carousel-base__3keqD",s="styles-module_item-provider__YgMwz",a="styles-module_item-container__a8zaY",l="styles-module_item-tracker__3bypy",u="styles-module_carousel-arrow__26sRw";i(".styles-module_carousel-base__3keqD {\n\twidth: 100%;\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\n}\n\n.styles-module_item-provider__YgMwz {\n\toverflow: hidden;\n\twidth: 100%;\n\tcursor: pointer;\n}\n\n.styles-module_item-container__a8zaY img {\n\t-webkit-user-select: none;\n\t        user-select: none;\n\t-webkit-user-drag: none;\n}\n\n.styles-module_item-tracker__3bypy {\n\theight: 100%;\n\tdisplay: flex;\n}\n\n.styles-module_carousel-arrow__26sRw {\n\tz-index: 1;\n}\n");var c,f=function(e){return n.createElement("button",{className:u,onClick:e.onClick,"data-direction":e.direction})};!function(e){e[e.Right=-1]="Right",e[e.Left=1]="Left"}(c||(c={}));var d=function(){function e(e,t){this.arr=e,this.currentIndex=t}return e.prototype.next=function(){var e=this.currentIndex,t=this.arr;return this.currentIndex=e<t.length-1?e+1:0,this.current()},e.prototype.prev=function(){var e=this.currentIndex,t=this.arr;return this.currentIndex=e>0&&e<t.length?e-1:t.length-1,this.current()},e.prototype.current=function(){return this.arr[this.currentIndex]},e}(),h=function(e,t,n){return n*e*t},m=function(e,t,n,r){var i=e>t;return n?{left:i,right:i}:{left:i&&0!==r,right:i&&r+t<e}},v=function(e,t,n){if(!n)return e;for(var r=Array.from(e),i=new d(e,0),o=0;o<t;o++)r.unshift(i.prev());return r};function g(e){return e.nativeEvent instanceof MouseEvent?e.nativeEvent.pageX:e.nativeEvent instanceof TouchEvent?e.nativeEvent.changedTouches[0].pageX:0}function p(e,t,n,r,i){if(n&&n.length<t.length)return v(t,r,i);var o=e.map((function(e){return t.find((function(t){return e.key===t.key}))}));return o.some((function(e){return void 0===e}))?v(t,r,i):o}var y=function(e){var i=t.useState(200),o=i[0],u=i[1],f=t.useCallback((function(t){if(null!==t){var n=t.getBoundingClientRect().width/e.show;u(n),e.widthCallBack(n)}}),[o]);e.responsive&&function(e){var n=t.useState(window.innerWidth),r=n[0],i=n[1];t.useLayoutEffect((function(){var t=function(){var t=r-window.innerWidth;i(window.innerWidth),e(t)};return window.addEventListener("resize",t),function(){return window.removeEventListener("resize",t)}}),[])}((function(e){u(o-e)}));var d=t.useState({initial:e.transform,start:0,isDown:!1,drag:0,finished:!0,pointers:!0}),h=d[0],m=d[1],v=function(t){t.persist(),m(r(r({},h),{isDown:!0,start:g(t),initial:e.transform,finished:!1}))},p=function(t){if(t.persist(),!h.finished){if(Math.abs(h.drag)<o*e.swipeOn)return e.dragCallback(e.transform),m({initial:e.transform,start:0,isDown:!1,drag:0,finished:!0,pointers:!0});e.slideCallback(h.drag>0?c.Right:c.Left),m(r(r({},h),{drag:0,isDown:!1,finished:!0,pointers:!0}))}},y=function(t){if(t.persist(),h.isDown){var n=g(t);m(r(r({},h),{drag:h.start-n,pointers:Math.abs(h.start-n)<e.triggerClickOn}))}},w=e.swiping?{onTouchCancel:p,onTouchEnd:p,onTouchMove:y,onTouchStart:v,onMouseDown:v,onMouseLeave:p,onMouseUp:p,onMouseMove:y}:{};return n.createElement("div",{ref:f,className:s},n.createElement("div",r({"data-testid":"trackList"},w,{className:l,style:{transform:"translateX("+(e.transform-h.drag)+"px)",transition:"transform "+e.transition+"s ease 0s",width:o*e.items.length}}),e.items.map((function(e,t){return n.createElement("div",{key:t,style:{width:o,pointerEvents:h.pointers?"all":"none"},className:a},e)}))))},w={children:[],show:1,slide:1,transition:.5,swiping:!1,swipeOn:1,responsive:!1,infinite:!0,className:"",useArrowKeys:!1,a11y:{},dynamic:!1,paginationCallback:null,pageCount:0,rightArrow:null,leftArrow:null,autoSwipe:null,navigation:null,triggerClickOn:Number.MIN_SAFE_INTEGER},_="styles-module_carousel-navigation__1g_vs";i(".styles-module_carousel-navigation__1g_vs {\n\tdisplay: flex;\n\tposition: absolute;\n\tbottom: 0;\n}\n");var b=function(e){var t=e.items,r=e.current,i=e.onClick,o=e.factory;return n.createElement("div",{className:_},t.map((function(e,t){return n.createElement("div",{onMouseOver:function(){return i(t)},key:t},o(r===t))})))},k="styles-module_sliderBase__swkx1",E="styles-module_slider__o0fqa",L="styles-module_sliding__3T6T6";i(".styles-module_sliderBase__swkx1 {\n\twidth: 100%;\n\tposition: relative;\n}\n\n.styles-module_slider__o0fqa {\n\tdisplay: flex;\n\toverflow-x: auto;\n\tscrollbar-width: none; /* Firefox 64 */\n\t-ms-overflow-style: none; /* Internet Explorer 11 */\n}\n\n.styles-module_slider__o0fqa::-webkit-scrollbar {\n\t/** WebKit */\n\tdisplay: none;\n}\n\n.styles-module_slider__o0fqa > * {\n\tflex: 0 0 auto;\n}\n\n.styles-module_sliding__3T6T6 > * {\n\tpointer-events: none;\n}\n");exports.Carousel=function(e){var i,s,a,l,u=r(r({},w),e),g=v(u.children,u.navigation?u.children.length-1:u.slide,u.infinite),_=t.useState(g),k=_[0],E=_[1],L=t.useRef(g),C=t.useState(0),x=C[0],R=C[1],S=t.useState({transform:0,transition:0,isSliding:!1}),M=S[0],T=S[1],N=t.useState(0),I=N[0],A=N[1],D=t.useState(m(u.children.length,u.show,u.infinite,I)),O=D[0],W=D[1],z=(a=e.children,l=t.useRef(),t.useEffect((function(){l.current=a})),l.current),X=t.useState(0),q=X[0],B=X[1],j=t.useRef(!1),K=t.useRef(null),Y=t.useRef(),P="function"==typeof u.navigation;u.dynamic&&t.useEffect((function(){var e=p(L.current,u.children,z,u.slide,u.infinite);E(e),L.current=e,q<u.pageCount&&z&&(null==z?void 0:z.length)<u.children.length&&(U(c.Right),B(q+1))}),[u.children]),t.useEffect((function(){F()}),[]);var F=function(){clearTimeout(Y.current),K&&"number"==typeof u.autoSwipe&&u.autoSwipe>u.transition&&(Y.current=setTimeout((function(){K.current&&K.current.click()}),u.autoSwipe))},U=function(e,t){if(!(M.isSliding||e===c.Right&&!O.right||e===c.Left&&!O.left)){if(u.paginationCallback&&e===c.Right&&q<u.pageCount-1&&!j.current)return j.current=!0,void u.paginationCallback(e);var n=u.children,r=function(e,t,n,r){var i=e-r*t;return i<0?n+i:n<=i?i-n:i}(I,u.slide,n.length,e),i="number"==typeof t?t-I:-1*e,o=u.infinite?P?function(e,t,n,r,i,o){var s=function(e,t,n){var r=e+t>=n.length?e+t-n.length:e+t;return r<0?n.length+r:r}(n,i,e),a=Math.floor(t.length/2),l=new d(e,s),u=Array.from(t);switch(+o){case c.Left:for(var f=0;f<a;f++){var h=a-(Math.abs(i)+f)-r;(h<0||!u[h])&&u.unshift(l.current()),l.prev()}break;case c.Right:for(f=0;f<a;f++)u[a+i+f+r]||u.push(l.current()),l.next()}return u}(n,k,r,u.show,i,e):function(e,t,n,r,i,o){var s=new d(e,n),a=Array.from(t);switch(+o){case c.Left:for(var l=i;l>=0;l--)(i-l<0||!a[l-i])&&a.unshift(s.current()),s.prev();break;case c.Right:for(l=0;l<r+i;l++)a[2*i+l]||a.push(s.current()),s.next()}return a}(n,k,r,u.show,u.slide,e):k;u.infinite&&e===c.Right&&(E(o),L.current=o),T({transform:M.transform+Math.abs(i)*h(x,u.slide,e),transition:u.transition,isSliding:!0}),A(P&&"number"==typeof t?t:r),W(m(n.length,u.show,u.infinite,r)),setTimeout((function(){if(u.infinite){var n=P?function(e,t,n){return n===c.Left?e.slice(0,t):e.slice(t)}(e===c.Right?L.current:o,function(e,t,n,r){return"number"==typeof e?r===c.Right?e-t+1:n:-1*r}(t,r,i,e),e):function(e,t,n){return n===c.Left?e.slice(0,-1*t):e.slice(t)}(e===c.Right?L.current:o,u.slide,e);E(n),L.current=n}T({transform:u.infinite?h(x,u.navigation?u.children.length-1:u.slide,c.Right):M.transform+h(x,u.slide,e),transition:0,isSliding:!1}),F()}),1e3*u.transition),j.current=!1}};return n.createElement("div",r({},u.a11y,{"data-testid":"carousel",tabIndex:0},u.useArrowKeys?{onKeyDown:function(e){37===e.keyCode?U(c.Left):39===e.keyCode&&U(c.Right)}}:{},{className:o+" "+u.className}),O.left&&n.createElement("div",{onClick:function(){return U(c.Left)}},null!==(i=u.leftArrow)&&void 0!==i?i:n.createElement(f,{direction:"left"})),n.createElement(y,r({},u,{transition:M.transition,items:L.current,transform:M.transform,slideCallback:function(e){U(e)},dragCallback:function(e){T({transform:e,transition:u.transition,isSliding:!1}),setTimeout((function(){return T(r(r({},M),{transition:0}))}),1e3*u.transition)},widthCallBack:function(e){R(e),T({transform:u.infinite?h(e,u.navigation?u.children.length-1:u.slide,c.Right):0,transition:0,isSliding:!1})}})),O.right&&n.createElement("div",{onClick:function(){return U(c.Right)},ref:K},null!==(s=u.rightArrow)&&void 0!==s?s:n.createElement(f,{direction:"right"})),P&&n.createElement(b,{factory:u.navigation,items:u.children,current:I,onClick:function(e){I!==e&&U(e>I?c.Right:c.Left,e)}}))},exports.ScrollingCarousel=function(e){var r=e.children,i=e.className,o=e.leftIcon,s=e.rightIcon,a=t.useRef(null),l=t.useState(!1),u=l[0],f=l[1],d=t.useState({startX:0,scrollLeft:0}),h=d[0],m=d[1],v=function(){var e=a.current;return{left:!!e&&e.scrollLeft>0,right:!!e&&e.scrollWidth>e.scrollLeft+e.offsetWidth}},g=t.useState(v()),p=g[0],y=g[1],w=function(e){y(v())},_=t.useCallback((function(e){null!==e&&(Object.defineProperty(a,"current",{value:e}),y(v()),e.addEventListener("scroll",w))}),[a,r]),b=function(e){f(!1),y(v()),a.current.classList.remove(L)},C=function(e){var t=function(e){for(var t,n,r=a.current,i=e===c.Left?r.scrollLeft+r.offsetWidth:r.scrollLeft,o=0,s=0,l=Array.from(r.children);s<l.length;s++){var u=l[s],f=(t=u,n=void 0,n=getComputedStyle(t),t.offsetWidth+(parseInt(n.marginLeft,10)||0)+(parseInt(n.marginRight,10)||0));if((o+=f)>=i){var d=e===c.Left?o-i:f;return(r.offsetWidth-d)*e}}return r.offsetWidth}(e),n=a.current.scrollLeft;x(500,t,n)},x=function(e,t,n){for(var r=0,i=0;r<=e;i++)window.setTimeout(R,r,i*t/100+n),r+=e/100},R=function(e){a.current.scrollLeft=e},S=function(e,t,r){return n.createElement("div",{"data-arrow":t,onClick:function(){return C(e)}},null!=r?r:n.createElement("button",null))};return n.createElement("div",{className:k+" "+i,"data-testid":"carousel"},p.left&&S(c.Right,"left",o),p.right&&S(c.Left,"right",s),n.createElement("div",{ref:_,onMouseDown:function(e){f(!0),m({startX:e.pageX-a.current.offsetLeft,scrollLeft:a.current.scrollLeft})},onMouseLeave:b,onMouseUp:b,onMouseMove:function(e){if(u){e.preventDefault(),a.current.classList.add(L);var t=e.pageX-a.current.offsetLeft-h.startX;a.current.scrollLeft=h.scrollLeft-t}},className:E},r))};

dist/es/index.js

@@ -1,1 +0,1 @@
-import t,{useRef as n,useEffect as e,useState as r,useLayoutEffect as i,useCallback as o}from"react";var s=function(){return(s=Object.assign||function(t){for(var n,e=1,r=arguments.length;e<r;e++)for(var i in n=arguments[e])Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i]);return t}).apply(this,arguments)};function a(t,n){void 0===n&&(n={});var e=n.insertAt;if(t&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===e&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=t:i.appendChild(document.createTextNode(t))}}var l="styles-module_carousel-base__3keqD",u="styles-module_item-provider__YgMwz",c="styles-module_item-container__a8zaY",f="styles-module_item-tracker__3bypy",d="styles-module_carousel-arrow__26sRw";a(".styles-module_carousel-base__3keqD {\n\twidth: 100%;\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\n}\n\n.styles-module_item-provider__YgMwz {\n\toverflow: hidden;\n\twidth: 100%;\n\tcursor: pointer;\n}\n\n.styles-module_item-container__a8zaY img {\n\t-webkit-user-select: none;\n\t        user-select: none;\n\t-webkit-user-drag: none;\n}\n\n.styles-module_item-tracker__3bypy {\n\theight: 100%;\n\tdisplay: flex;\n}\n\n.styles-module_carousel-arrow__26sRw {\n\tz-index: 1;\n}\n");var h,m=function(n){return t.createElement("button",{className:d,onClick:n.onClick,"data-direction":n.direction})};!function(t){t[t.Right=-1]="Right",t[t.Left=1]="Left"}(h||(h={}));var v=function(){function t(t,n){this.arr=t,this.currentIndex=n}return t.prototype.next=function(){var t=this.currentIndex,n=this.arr;return this.currentIndex=t<n.length-1?t+1:0,this.current()},t.prototype.prev=function(){var t=this.currentIndex,n=this.arr;return this.currentIndex=t>0&&t<n.length?t-1:n.length-1,this.current()},t.prototype.current=function(){return this.arr[this.currentIndex]},t}(),g=function(t,n,e){return e*t*n},p=function(t,n,e,r){var i=t>n;return e?{left:i,right:i}:{left:i&&0!==r,right:i&&r+n<t}},w=function(t,n,e){if(!e)return t;for(var r=Array.from(t),i=new v(t,0),o=0;o<n;o++)r.unshift(i.prev());return r};function y(t){return t.nativeEvent instanceof MouseEvent?t.nativeEvent.pageX:t.nativeEvent instanceof TouchEvent?t.nativeEvent.changedTouches[0].pageX:0}function _(t,n,e,r,i){if(e&&e.length<n.length)return w(n,r,i);var o=t.map((function(t){return n.find((function(n){return t.key===n.key}))}));return o.some((function(t){return void 0===t}))?w(n,r,i):o}var b=function(n){var e=r(200),a=e[0],l=e[1],d=o((function(t){if(null!==t){var e=t.getBoundingClientRect().width/n.show;l(e),n.widthCallBack(e)}}),[a]);n.responsive&&function(t){var n=r(window.innerWidth),e=n[0],o=n[1];i((function(){var n=function(){var n=e-window.innerWidth;o(window.innerWidth),t(n)};return window.addEventListener("resize",n),function(){return window.removeEventListener("resize",n)}}),[])}((function(t){l(a-t)}));var m=r({initial:n.transform,start:0,isDown:!1,drag:0,finished:!0,pointers:!0}),v=m[0],g=m[1],p=function(t){t.persist(),g(s(s({},v),{isDown:!0,start:y(t),initial:n.transform,finished:!1}))},w=function(t){if(t.persist(),!v.finished){if(Math.abs(v.drag)<a*n.swipeOn)return n.dragCallback(n.transform),g({initial:n.transform,start:0,isDown:!1,drag:0,finished:!0,pointers:!0});n.slideCallback(v.drag>0?h.Right:h.Left),g(s(s({},v),{drag:0,isDown:!1,finished:!0,pointers:!0}))}},_=function(t){if(t.persist(),v.isDown){var n=y(t);g(s(s({},v),{drag:v.start-n,pointers:!1}))}},b=n.swiping?{onTouchCancel:w,onTouchEnd:w,onTouchMove:_,onTouchStart:p,onMouseDown:p,onMouseLeave:w,onMouseUp:w,onMouseMove:_}:{};return t.createElement("div",{ref:d,className:u},t.createElement("div",s({"data-testid":"trackList"},b,{className:f,style:{transform:"translateX("+(n.transform-v.drag)+"px)",transition:"transform "+n.transition+"s ease 0s",width:a*n.items.length}}),n.items.map((function(n,e){return t.createElement("div",{key:e,style:{width:a,pointerEvents:v.pointers?"all":"none"},className:c},n)}))))},L={children:[],show:1,slide:1,transition:.5,swiping:!1,swipeOn:1,responsive:!1,infinite:!0,className:"",useArrowKeys:!1,a11y:{},dynamic:!1,paginationCallback:null,pageCount:0,rightArrow:null,leftArrow:null,autoSwipe:null,navigation:null},k="styles-module_carousel-navigation__1g_vs";a(".styles-module_carousel-navigation__1g_vs {\n\tdisplay: flex;\n\tposition: absolute;\n\tbottom: 0;\n}\n");var E=function(n){var e=n.items,r=n.current,i=n.onClick,o=n.factory;return t.createElement("div",{className:k},e.map((function(n,e){return t.createElement("div",{onMouseOver:function(){return i(e)},key:e},o(r===e))})))},x=function(i){var o,a,u,c,f=s(s({},L),i),d=w(f.children,f.navigation?f.children.length-1:f.slide,f.infinite),y=r(d),k=y[0],x=y[1],C=n(d),R=r(0),M=R[0],T=R[1],S=r({transform:0,transition:0,isSliding:!1}),N=S[0],I=S[1],A=r(0),D=A[0],W=A[1],z=r(p(f.children.length,f.show,f.infinite,D)),X=z[0],B=z[1],O=(u=i.children,c=n(),e((function(){c.current=u})),c.current),q=r(0),K=q[0],Y=q[1],j=n(!1),P=n(null),U=n(),F="function"==typeof f.navigation;f.dynamic&&e((function(){var t=_(C.current,f.children,O,f.slide,f.infinite);x(t),C.current=t,K<f.pageCount&&O&&(null==O?void 0:O.length)<f.children.length&&(H(h.Right),Y(K+1))}),[f.children]),e((function(){G()}),[]);var G=function(){clearTimeout(U.current),P&&"number"==typeof f.autoSwipe&&f.autoSwipe>f.transition&&(U.current=setTimeout((function(){P.current&&P.current.click()}),f.autoSwipe))},H=function(t,n){if(!(N.isSliding||t===h.Right&&!X.right||t===h.Left&&!X.left)){if(f.paginationCallback&&t===h.Right&&K<f.pageCount-1&&!j.current)return j.current=!0,void f.paginationCallback(t);var e=f.children,r=function(t,n,e,r){var i=t-r*n;return i<0?e+i:e<=i?i-e:i}(D,f.slide,e.length,t),i="number"==typeof n?n-D:-1*t,o=f.infinite?F?function(t,n,e,r,i,o){var s=function(t,n,e){var r=t+n>=e.length?t+n-e.length:t+n;return r<0?e.length+r:r}(e,i,t),a=Math.floor(n.length/2),l=new v(t,s),u=Array.from(n);switch(+o){case h.Left:for(var c=0;c<a;c++){var f=a-(Math.abs(i)+c)-r;(f<0||!u[f])&&u.unshift(l.current()),l.prev()}break;case h.Right:for(c=0;c<a;c++)u[a+i+c+r]||u.push(l.current()),l.next()}return u}(e,k,r,f.show,i,t):function(t,n,e,r,i,o){var s=new v(t,e),a=Array.from(n);switch(+o){case h.Left:for(var l=i;l>=0;l--)(i-l<0||!a[l-i])&&a.unshift(s.current()),s.prev();break;case h.Right:for(l=0;l<r+i;l++)a[2*i+l]||a.push(s.current()),s.next()}return a}(e,k,r,f.show,f.slide,t):k;f.infinite&&t===h.Right&&(x(o),C.current=o),I({transform:N.transform+Math.abs(i)*g(M,f.slide,t),transition:f.transition,isSliding:!0}),W(F&&"number"==typeof n?n:r),B(p(e.length,f.show,f.infinite,r)),setTimeout((function(){if(f.infinite){var e=F?function(t,n,e){return e===h.Left?t.slice(0,n):t.slice(n)}(t===h.Right?C.current:o,function(t,n,e,r){return"number"==typeof t?r===h.Right?t-n+1:e:-1*r}(n,r,i,t),t):function(t,n,e){return e===h.Left?t.slice(0,-1*n):t.slice(n)}(t===h.Right?C.current:o,f.slide,t);x(e),C.current=e}I({transform:f.infinite?g(M,f.navigation?f.children.length-1:f.slide,h.Right):N.transform+g(M,f.slide,t),transition:0,isSliding:!1}),G()}),1e3*f.transition),j.current=!1}};return t.createElement("div",s({},f.a11y,{"data-testid":"carousel",tabIndex:0},f.useArrowKeys?{onKeyDown:function(t){37===t.keyCode?H(h.Left):39===t.keyCode&&H(h.Right)}}:{},{className:l+" "+f.className}),X.left&&t.createElement("div",{onClick:function(){return H(h.Left)}},null!==(o=f.leftArrow)&&void 0!==o?o:t.createElement(m,{direction:"left"})),t.createElement(b,s({},f,{transition:N.transition,items:C.current,transform:N.transform,slideCallback:function(t){H(t)},dragCallback:function(t){I({transform:t,transition:f.transition,isSliding:!1}),setTimeout((function(){return I(s(s({},N),{transition:0}))}),1e3*f.transition)},widthCallBack:function(t){T(t),I({transform:f.infinite?g(t,f.navigation?f.children.length-1:f.slide,h.Right):0,transition:0,isSliding:!1})}})),X.right&&t.createElement("div",{onClick:function(){return H(h.Right)},ref:P},null!==(a=f.rightArrow)&&void 0!==a?a:t.createElement(m,{direction:"right"})),F&&t.createElement(E,{factory:f.navigation,items:f.children,current:D,onClick:function(t){D!==t&&H(t>D?h.Right:h.Left,t)}}))},C="styles-module_sliderBase__swkx1",R="styles-module_slider__o0fqa",M="styles-module_sliding__3T6T6";a(".styles-module_sliderBase__swkx1 {\n\twidth: 100%;\n\tposition: relative;\n}\n\n.styles-module_slider__o0fqa {\n\tdisplay: flex;\n\toverflow-x: auto;\n\tscrollbar-width: none; /* Firefox 64 */\n\t-ms-overflow-style: none; /* Internet Explorer 11 */\n}\n\n.styles-module_slider__o0fqa::-webkit-scrollbar {\n\t/** WebKit */\n\tdisplay: none;\n}\n\n.styles-module_slider__o0fqa > * {\n\tflex: 0 0 auto;\n}\n\n.styles-module_sliding__3T6T6 > * {\n\tpointer-events: none;\n}\n");var T=function(e){var i=e.children,s=e.className,a=e.leftIcon,l=e.rightIcon,u=n(null),c=r(!1),f=c[0],d=c[1],m=r({startX:0,scrollLeft:0}),v=m[0],g=m[1],p=function(){var t=u.current;return{left:!!t&&t.scrollLeft>0,right:!!t&&t.scrollWidth>t.scrollLeft+t.offsetWidth}},w=r(p()),y=w[0],_=w[1],b=function(t){_(p())},L=o((function(t){null!==t&&(Object.defineProperty(u,"current",{value:t}),_(p()),t.addEventListener("scroll",b))}),[u,i]),k=function(t){d(!1),_(p()),u.current.classList.remove(M)},E=function(t){var n=function(t){for(var n,e,r=u.current,i=t===h.Left?r.scrollLeft+r.offsetWidth:r.scrollLeft,o=0,s=0,a=Array.from(r.children);s<a.length;s++){var l=a[s],c=(n=l,e=void 0,e=getComputedStyle(n),n.offsetWidth+(parseInt(e.marginLeft,10)||0)+(parseInt(e.marginRight,10)||0));if((o+=c)>=i){var f=t===h.Left?o-i:c;return(r.offsetWidth-f)*t}}return r.offsetWidth}(t),e=u.current.scrollLeft;x(500,n,e)},x=function(t,n,e){for(var r=0,i=0;r<=t;i++)window.setTimeout(T,r,i*n/100+e),r+=t/100},T=function(t){u.current.scrollLeft=t},S=function(n,e,r){return t.createElement("div",{"data-arrow":e,onClick:function(){return E(n)}},null!=r?r:t.createElement("button",null))};return t.createElement("div",{className:C+" "+s,"data-testid":"carousel"},y.left&&S(h.Right,"left",a),y.right&&S(h.Left,"right",l),t.createElement("div",{ref:L,onMouseDown:function(t){d(!0),g({startX:t.pageX-u.current.offsetLeft,scrollLeft:u.current.scrollLeft})},onMouseLeave:k,onMouseUp:k,onMouseMove:function(t){if(f){t.preventDefault(),u.current.classList.add(M);var n=t.pageX-u.current.offsetLeft-v.startX;u.current.scrollLeft=v.scrollLeft-n}},className:R},i))};export{x as Carousel,T as ScrollingCarousel};
+import t,{useRef as n,useEffect as e,useState as r,useLayoutEffect as i,useCallback as o}from"react";var s=function(){return(s=Object.assign||function(t){for(var n,e=1,r=arguments.length;e<r;e++)for(var i in n=arguments[e])Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i]);return t}).apply(this,arguments)};function a(t,n){void 0===n&&(n={});var e=n.insertAt;if(t&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===e&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=t:i.appendChild(document.createTextNode(t))}}var l="styles-module_carousel-base__3keqD",u="styles-module_item-provider__YgMwz",c="styles-module_item-container__a8zaY",f="styles-module_item-tracker__3bypy",d="styles-module_carousel-arrow__26sRw";a(".styles-module_carousel-base__3keqD {\n\twidth: 100%;\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\toutline: none;\n\tposition: relative;\n}\n\n.styles-module_item-provider__YgMwz {\n\toverflow: hidden;\n\twidth: 100%;\n\tcursor: pointer;\n}\n\n.styles-module_item-container__a8zaY img {\n\t-webkit-user-select: none;\n\t        user-select: none;\n\t-webkit-user-drag: none;\n}\n\n.styles-module_item-tracker__3bypy {\n\theight: 100%;\n\tdisplay: flex;\n}\n\n.styles-module_carousel-arrow__26sRw {\n\tz-index: 1;\n}\n");var h,m=function(n){return t.createElement("button",{className:d,onClick:n.onClick,"data-direction":n.direction})};!function(t){t[t.Right=-1]="Right",t[t.Left=1]="Left"}(h||(h={}));var v=function(){function t(t,n){this.arr=t,this.currentIndex=n}return t.prototype.next=function(){var t=this.currentIndex,n=this.arr;return this.currentIndex=t<n.length-1?t+1:0,this.current()},t.prototype.prev=function(){var t=this.currentIndex,n=this.arr;return this.currentIndex=t>0&&t<n.length?t-1:n.length-1,this.current()},t.prototype.current=function(){return this.arr[this.currentIndex]},t}(),g=function(t,n,e){return e*t*n},p=function(t,n,e,r){var i=t>n;return e?{left:i,right:i}:{left:i&&0!==r,right:i&&r+n<t}},w=function(t,n,e){if(!e)return t;for(var r=Array.from(t),i=new v(t,0),o=0;o<n;o++)r.unshift(i.prev());return r};function y(t){return t.nativeEvent instanceof MouseEvent?t.nativeEvent.pageX:t.nativeEvent instanceof TouchEvent?t.nativeEvent.changedTouches[0].pageX:0}function _(t,n,e,r,i){if(e&&e.length<n.length)return w(n,r,i);var o=t.map((function(t){return n.find((function(n){return t.key===n.key}))}));return o.some((function(t){return void 0===t}))?w(n,r,i):o}var b=function(n){var e=r(200),a=e[0],l=e[1],d=o((function(t){if(null!==t){var e=t.getBoundingClientRect().width/n.show;l(e),n.widthCallBack(e)}}),[a]);n.responsive&&function(t){var n=r(window.innerWidth),e=n[0],o=n[1];i((function(){var n=function(){var n=e-window.innerWidth;o(window.innerWidth),t(n)};return window.addEventListener("resize",n),function(){return window.removeEventListener("resize",n)}}),[])}((function(t){l(a-t)}));var m=r({initial:n.transform,start:0,isDown:!1,drag:0,finished:!0,pointers:!0}),v=m[0],g=m[1],p=function(t){t.persist(),g(s(s({},v),{isDown:!0,start:y(t),initial:n.transform,finished:!1}))},w=function(t){if(t.persist(),!v.finished){if(Math.abs(v.drag)<a*n.swipeOn)return n.dragCallback(n.transform),g({initial:n.transform,start:0,isDown:!1,drag:0,finished:!0,pointers:!0});n.slideCallback(v.drag>0?h.Right:h.Left),g(s(s({},v),{drag:0,isDown:!1,finished:!0,pointers:!0}))}},_=function(t){if(t.persist(),v.isDown){var e=y(t);g(s(s({},v),{drag:v.start-e,pointers:Math.abs(v.start-e)<n.triggerClickOn}))}},b=n.swiping?{onTouchCancel:w,onTouchEnd:w,onTouchMove:_,onTouchStart:p,onMouseDown:p,onMouseLeave:w,onMouseUp:w,onMouseMove:_}:{};return t.createElement("div",{ref:d,className:u},t.createElement("div",s({"data-testid":"trackList"},b,{className:f,style:{transform:"translateX("+(n.transform-v.drag)+"px)",transition:"transform "+n.transition+"s ease 0s",width:a*n.items.length}}),n.items.map((function(n,e){return t.createElement("div",{key:e,style:{width:a,pointerEvents:v.pointers?"all":"none"},className:c},n)}))))},k={children:[],show:1,slide:1,transition:.5,swiping:!1,swipeOn:1,responsive:!1,infinite:!0,className:"",useArrowKeys:!1,a11y:{},dynamic:!1,paginationCallback:null,pageCount:0,rightArrow:null,leftArrow:null,autoSwipe:null,navigation:null,triggerClickOn:Number.MIN_SAFE_INTEGER},L="styles-module_carousel-navigation__1g_vs";a(".styles-module_carousel-navigation__1g_vs {\n\tdisplay: flex;\n\tposition: absolute;\n\tbottom: 0;\n}\n");var E=function(n){var e=n.items,r=n.current,i=n.onClick,o=n.factory;return t.createElement("div",{className:L},e.map((function(n,e){return t.createElement("div",{onMouseOver:function(){return i(e)},key:e},o(r===e))})))},C=function(i){var o,a,u,c,f=s(s({},k),i),d=w(f.children,f.navigation?f.children.length-1:f.slide,f.infinite),y=r(d),L=y[0],C=y[1],x=n(d),R=r(0),M=R[0],T=R[1],N=r({transform:0,transition:0,isSliding:!1}),S=N[0],I=N[1],A=r(0),D=A[0],W=A[1],O=r(p(f.children.length,f.show,f.infinite,D)),z=O[0],X=O[1],B=(u=i.children,c=n(),e((function(){c.current=u})),c.current),q=r(0),K=q[0],Y=q[1],j=n(!1),F=n(null),P=n(),U="function"==typeof f.navigation;f.dynamic&&e((function(){var t=_(x.current,f.children,B,f.slide,f.infinite);C(t),x.current=t,K<f.pageCount&&B&&(null==B?void 0:B.length)<f.children.length&&(H(h.Right),Y(K+1))}),[f.children]),e((function(){G()}),[]);var G=function(){clearTimeout(P.current),F&&"number"==typeof f.autoSwipe&&f.autoSwipe>f.transition&&(P.current=setTimeout((function(){F.current&&F.current.click()}),f.autoSwipe))},H=function(t,n){if(!(S.isSliding||t===h.Right&&!z.right||t===h.Left&&!z.left)){if(f.paginationCallback&&t===h.Right&&K<f.pageCount-1&&!j.current)return j.current=!0,void f.paginationCallback(t);var e=f.children,r=function(t,n,e,r){var i=t-r*n;return i<0?e+i:e<=i?i-e:i}(D,f.slide,e.length,t),i="number"==typeof n?n-D:-1*t,o=f.infinite?U?function(t,n,e,r,i,o){var s=function(t,n,e){var r=t+n>=e.length?t+n-e.length:t+n;return r<0?e.length+r:r}(e,i,t),a=Math.floor(n.length/2),l=new v(t,s),u=Array.from(n);switch(+o){case h.Left:for(var c=0;c<a;c++){var f=a-(Math.abs(i)+c)-r;(f<0||!u[f])&&u.unshift(l.current()),l.prev()}break;case h.Right:for(c=0;c<a;c++)u[a+i+c+r]||u.push(l.current()),l.next()}return u}(e,L,r,f.show,i,t):function(t,n,e,r,i,o){var s=new v(t,e),a=Array.from(n);switch(+o){case h.Left:for(var l=i;l>=0;l--)(i-l<0||!a[l-i])&&a.unshift(s.current()),s.prev();break;case h.Right:for(l=0;l<r+i;l++)a[2*i+l]||a.push(s.current()),s.next()}return a}(e,L,r,f.show,f.slide,t):L;f.infinite&&t===h.Right&&(C(o),x.current=o),I({transform:S.transform+Math.abs(i)*g(M,f.slide,t),transition:f.transition,isSliding:!0}),W(U&&"number"==typeof n?n:r),X(p(e.length,f.show,f.infinite,r)),setTimeout((function(){if(f.infinite){var e=U?function(t,n,e){return e===h.Left?t.slice(0,n):t.slice(n)}(t===h.Right?x.current:o,function(t,n,e,r){return"number"==typeof t?r===h.Right?t-n+1:e:-1*r}(n,r,i,t),t):function(t,n,e){return e===h.Left?t.slice(0,-1*n):t.slice(n)}(t===h.Right?x.current:o,f.slide,t);C(e),x.current=e}I({transform:f.infinite?g(M,f.navigation?f.children.length-1:f.slide,h.Right):S.transform+g(M,f.slide,t),transition:0,isSliding:!1}),G()}),1e3*f.transition),j.current=!1}};return t.createElement("div",s({},f.a11y,{"data-testid":"carousel",tabIndex:0},f.useArrowKeys?{onKeyDown:function(t){37===t.keyCode?H(h.Left):39===t.keyCode&&H(h.Right)}}:{},{className:l+" "+f.className}),z.left&&t.createElement("div",{onClick:function(){return H(h.Left)}},null!==(o=f.leftArrow)&&void 0!==o?o:t.createElement(m,{direction:"left"})),t.createElement(b,s({},f,{transition:S.transition,items:x.current,transform:S.transform,slideCallback:function(t){H(t)},dragCallback:function(t){I({transform:t,transition:f.transition,isSliding:!1}),setTimeout((function(){return I(s(s({},S),{transition:0}))}),1e3*f.transition)},widthCallBack:function(t){T(t),I({transform:f.infinite?g(t,f.navigation?f.children.length-1:f.slide,h.Right):0,transition:0,isSliding:!1})}})),z.right&&t.createElement("div",{onClick:function(){return H(h.Right)},ref:F},null!==(a=f.rightArrow)&&void 0!==a?a:t.createElement(m,{direction:"right"})),U&&t.createElement(E,{factory:f.navigation,items:f.children,current:D,onClick:function(t){D!==t&&H(t>D?h.Right:h.Left,t)}}))},x="styles-module_sliderBase__swkx1",R="styles-module_slider__o0fqa",M="styles-module_sliding__3T6T6";a(".styles-module_sliderBase__swkx1 {\n\twidth: 100%;\n\tposition: relative;\n}\n\n.styles-module_slider__o0fqa {\n\tdisplay: flex;\n\toverflow-x: auto;\n\tscrollbar-width: none; /* Firefox 64 */\n\t-ms-overflow-style: none; /* Internet Explorer 11 */\n}\n\n.styles-module_slider__o0fqa::-webkit-scrollbar {\n\t/** WebKit */\n\tdisplay: none;\n}\n\n.styles-module_slider__o0fqa > * {\n\tflex: 0 0 auto;\n}\n\n.styles-module_sliding__3T6T6 > * {\n\tpointer-events: none;\n}\n");var T=function(e){var i=e.children,s=e.className,a=e.leftIcon,l=e.rightIcon,u=n(null),c=r(!1),f=c[0],d=c[1],m=r({startX:0,scrollLeft:0}),v=m[0],g=m[1],p=function(){var t=u.current;return{left:!!t&&t.scrollLeft>0,right:!!t&&t.scrollWidth>t.scrollLeft+t.offsetWidth}},w=r(p()),y=w[0],_=w[1],b=function(t){_(p())},k=o((function(t){null!==t&&(Object.defineProperty(u,"current",{value:t}),_(p()),t.addEventListener("scroll",b))}),[u,i]),L=function(t){d(!1),_(p()),u.current.classList.remove(M)},E=function(t){var n=function(t){for(var n,e,r=u.current,i=t===h.Left?r.scrollLeft+r.offsetWidth:r.scrollLeft,o=0,s=0,a=Array.from(r.children);s<a.length;s++){var l=a[s],c=(n=l,e=void 0,e=getComputedStyle(n),n.offsetWidth+(parseInt(e.marginLeft,10)||0)+(parseInt(e.marginRight,10)||0));if((o+=c)>=i){var f=t===h.Left?o-i:c;return(r.offsetWidth-f)*t}}return r.offsetWidth}(t),e=u.current.scrollLeft;C(500,n,e)},C=function(t,n,e){for(var r=0,i=0;r<=t;i++)window.setTimeout(T,r,i*n/100+e),r+=t/100},T=function(t){u.current.scrollLeft=t},N=function(n,e,r){return t.createElement("div",{"data-arrow":e,onClick:function(){return E(n)}},null!=r?r:t.createElement("button",null))};return t.createElement("div",{className:x+" "+s,"data-testid":"carousel"},y.left&&N(h.Right,"left",a),y.right&&N(h.Left,"right",l),t.createElement("div",{ref:k,onMouseDown:function(t){d(!0),g({startX:t.pageX-u.current.offsetLeft,scrollLeft:u.current.scrollLeft})},onMouseLeave:L,onMouseUp:L,onMouseMove:function(t){if(f){t.preventDefault(),u.current.classList.add(M);var n=t.pageX-u.current.offsetLeft-v.startX;u.current.scrollLeft=v.scrollLeft-n}},className:R},i))};export{C as Carousel,T as ScrollingCarousel};

dist/types/components/carousel/index.d.ts

@@ -25,2 +25,3 @@ import { FunctionComponent, ReactElement } from 'react';
     navigation?: null | ((selected: boolean) => ReactElement);
+    triggerClickOn?: number;
 }
@@ -27,0 +28,0 @@ export interface CarouselState {

dist/types/components/item/index.d.ts

@@ -17,2 +17,3 @@ import { FunctionComponent } from 'react';
     infinite: boolean;
+    triggerClickOn: number;
 }

package.json

 {
 	"name": "@trendyol-js/react-carousel",
-	"version": "3.0.0-beta.2",
+	"version": "3.0.0-beta.3",
 	"description": "Lightweight carousel component for react",
@@ -5,0 +5,0 @@ "main": "dist/cjs/index.js",

No alert changes

Improved metrics

Total package byte prevSize

72126

0.53%

Lines of code

1096

0.18%

No dependency changes