@trendyol-js/react-carousel
Advanced tools
Comparing version
@@ -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 s="styles-module_carousel-base__3keqD",o="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}\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),s=0;s<t;s++)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 s=e.map((function(e){return t.find((function(t){return e.key===t.key}))}));return s.some((function(e){return void 0===e}))?v(t,r,i):s}var w=function(e){var i=t.useState(200),s=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)}}),[s]);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(s-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)<s*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}))}},w=function(e){if(e.persist(),h.isDown){var t=g(e);m(r(r({},h),{drag:h.start-t,pointers:!1}))}},y=e.swiping?{onTouchCancel:p,onTouchEnd:p,onTouchMove:w,onTouchStart:v,onMouseDown:v,onMouseLeave:p,onMouseUp:p,onMouseMove:w}:{};return n.createElement("div",{ref:f,className:o},n.createElement("div",r({"":"trackList"},y,{className:l,style:{transform:"translateX("+(e.transform-h.drag)+"px)",transition:"transform "+e.transition+"s ease 0s",width:s*e.items.length}}),e.items.map((function(e,t){return n.createElement("div",{key:t,style:{width:s,pointerEvents:h.pointers?"all":"none"},className:a},e)}))))},y={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},_="styles-module_sliderBase__swkx1",L="styles-module_slider__o0fqa",b="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,o,a,l,u=r(r({},y),e),g=t.useState(v(u.children,u.slide,u.infinite)),_=g[0],L=g[1],b=t.useState(0),k=b[0],E=b[1],C=t.useState({transform:0,transition:0,isSliding:!1}),x=C[0],S=C[1],R=t.useState(0),M=R[0],T=R[1],I=t.useState(m(u.children.length,u.show,u.infinite,M)),N=I[0],D=I[1],A=(a=e.children,l=t.useRef(),t.useEffect((function(){l.current=a})),l.current),W=t.useState(0),z=W[0],X=W[1],q=t.useRef(v(u.children,u.slide,u.infinite)),B=t.useRef(!1);u.dynamic&&t.useEffect((function(){var e=p(q.current,u.children,A,u.slide,u.infinite);L(e),q.current=e,z<u.pageCount&&A&&(null==A?void 0:A.length)<u.children.length&&(O(c.Right),X(z+1))}),[u.children]);var O=function(e){if(!(x.isSliding||e===c.Right&&!N.right||e===c.Left&&!N.left)){if(u.paginationCallback&&e===c.Right&&z<u.pageCount-1&&!B.current)return B.current=!0,void u.paginationCallback(e);var t=u.children,n=function(e,t,n,r){var i=e-r*t;return i<0?n+i:n<=i?i-n:i}(M,u.slide,t.length,e),r=u.infinite?function(e,t,n,r,i,s){var o=new d(e,n),a=Array.from(t);switch(+s){case c.Left:for(var l=i;l>=0;l--)(i-l<0||!a[l-i])&&a.unshift(o.current()),o.prev();break;case c.Right:for(l=0;l<r+i;l++)a[2*i+l]||a.push(o.current()),o.next()}return a}(t,_,n,u.show,u.slide,e):_;u.infinite&&e===c.Right&&(L(r),q.current=r),S({transform:x.transform+h(k,u.slide,e),transition:u.transition,isSliding:!0}),T(n),D(m(t.length,u.show,u.infinite,n)),setTimeout((function(){if(u.infinite){var t=function(e,t,n){return n===c.Left?e.slice(0,-1*t):e.slice(t)}(e===c.Right?q.current:r,u.slide,e);L(t),q.current=t}S({transform:u.infinite?h(k,u.slide,c.Right):x.transform+h(k,u.slide,e),transition:0,isSliding:!1})}),1e3*u.transition),B.current=!1}};return n.createElement("div",r({},u.a11y,{"":"carousel",tabIndex:0},u.useArrowKeys?{onKeyDown:function(e){37===e.keyCode?O(c.Left):39===e.keyCode&&O(c.Right)}}:{},{className:s+" "+u.className}),N.left&&n.createElement("div",{onClick:function(){return O(c.Left)}},null!==(i=u.leftArrow)&&void 0!==i?i:n.createElement(f,{direction:"left"})),n.createElement(w,r({},u,{transition:x.transition,items:q.current,transform:x.transform,slideCallback:function(e){O(e)},dragCallback:function(e){S({transform:e,transition:u.transition,isSliding:!1}),setTimeout((function(){return S(r(r({},x),{transition:0}))}),1e3*u.transition)},widthCallBack:function(e){E(e),S({transform:u.infinite?h(e,u.slide,c.Right):0,transition:0,isSliding:!1})}})),N.right&&n.createElement("div",{onClick:function(){return O(c.Right)}},null!==(o=u.rightArrow)&&void 0!==o?o:n.createElement(f,{direction:"right"})))},exports.ScrollingCarousel=function(e){var r=e.children,i=e.className,s=e.leftIcon,o=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],w=g[1],y=function(e){w(v())},k=t.useCallback((function(e){null!==e&&(Object.defineProperty(a,"current",{value:e}),w(v()),e.addEventListener("scroll",y))}),[a,r]),E=function(e){f(!1),w(v()),a.current.classList.remove(b)},C=function(e){var t=function(e){for(var t,n,r=a.current,i=e===c.Left?r.scrollLeft+r.offsetWidth:r.scrollLeft,s=0,o=0,l=Array.from(r.children);o<l.length;o++){var u=l[o],f=(t=u,n=void 0,n=getComputedStyle(t),t.offsetWidth+(parseInt(n.marginLeft,10)||0)+(parseInt(n.marginRight,10)||0));if((s+=f)>=i){var d=e===c.Left?s-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(S,r,i*t/100+n),r+=e/100},S=function(e){a.current.scrollLeft=e},R=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:_+" "+i,"":"carousel"},p.left&&R(c.Right,"left",s),p.right&&R(c.Left,"right",o),n.createElement("div",{ref:k,onMouseDown:function(e){f(!0),m({startX:e.pageX-a.current.offsetLeft,scrollLeft:a.current.scrollLeft})},onMouseLeave:E,onMouseUp:E,onMouseMove:function(e){if(u){e.preventDefault(),a.current.classList.add(b);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 s="styles-module_carousel-base__3keqD",o="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}\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),s=0;s<t;s++)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 s=e.map((function(e){return t.find((function(t){return e.key===t.key}))}));return s.some((function(e){return void 0===e}))?v(t,r,i):s}var w=function(e){var i=t.useState(200),s=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)}}),[s]);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(s-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)<s*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}))}},w=function(e){if(e.persist(),h.isDown){var t=g(e);m(r(r({},h),{drag:h.start-t,pointers:!1}))}},y=e.swiping?{onTouchCancel:p,onTouchEnd:p,onTouchMove:w,onTouchStart:v,onMouseDown:v,onMouseLeave:p,onMouseUp:p,onMouseMove:w}:{};return n.createElement("div",{ref:f,className:o},n.createElement("div",r({"data-testid":"trackList"},y,{className:l,style:{transform:"translateX("+(e.transform-h.drag)+"px)",transition:"transform "+e.transition+"s ease 0s",width:s*e.items.length}}),e.items.map((function(e,t){return n.createElement("div",{key:t,style:{width:s,pointerEvents:h.pointers?"all":"none"},className:a},e)}))))},y={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},_="styles-module_sliderBase__swkx1",L="styles-module_slider__o0fqa",b="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,o,a,l,u=r(r({},y),e),g=t.useState(v(u.children,u.slide,u.infinite)),_=g[0],L=g[1],b=t.useState(0),k=b[0],E=b[1],C=t.useState({transform:0,transition:0,isSliding:!1}),x=C[0],S=C[1],R=t.useState(0),M=R[0],T=R[1],I=t.useState(m(u.children.length,u.show,u.infinite,M)),N=I[0],D=I[1],A=(a=e.children,l=t.useRef(),t.useEffect((function(){l.current=a})),l.current),W=t.useState(0),z=W[0],X=W[1],q=t.useRef(v(u.children,u.slide,u.infinite)),B=t.useRef(!1);u.dynamic&&t.useEffect((function(){var e=p(q.current,u.children,A,u.slide,u.infinite);L(e),q.current=e,z<u.pageCount&&A&&(null==A?void 0:A.length)<u.children.length&&(O(c.Right),X(z+1))}),[u.children]);var O=function(e){if(!(x.isSliding||e===c.Right&&!N.right||e===c.Left&&!N.left)){if(u.paginationCallback&&e===c.Right&&z<u.pageCount-1&&!B.current)return B.current=!0,void u.paginationCallback(e);var t=u.children,n=function(e,t,n,r){var i=e-r*t;return i<0?n+i:n<=i?i-n:i}(M,u.slide,t.length,e),r=u.infinite?function(e,t,n,r,i,s){var o=new d(e,n),a=Array.from(t);switch(+s){case c.Left:for(var l=i;l>=0;l--)(i-l<0||!a[l-i])&&a.unshift(o.current()),o.prev();break;case c.Right:for(l=0;l<r+i;l++)a[2*i+l]||a.push(o.current()),o.next()}return a}(t,_,n,u.show,u.slide,e):_;u.infinite&&e===c.Right&&(L(r),q.current=r),S({transform:x.transform+h(k,u.slide,e),transition:u.transition,isSliding:!0}),T(n),D(m(t.length,u.show,u.infinite,n)),setTimeout((function(){if(u.infinite){var t=function(e,t,n){return n===c.Left?e.slice(0,-1*t):e.slice(t)}(e===c.Right?q.current:r,u.slide,e);L(t),q.current=t}S({transform:u.infinite?h(k,u.slide,c.Right):x.transform+h(k,u.slide,e),transition:0,isSliding:!1})}),1e3*u.transition),B.current=!1}};return n.createElement("div",r({},u.a11y,{"data-testid":"carousel",tabIndex:0},u.useArrowKeys?{onKeyDown:function(e){37===e.keyCode?O(c.Left):39===e.keyCode&&O(c.Right)}}:{},{className:s+" "+u.className}),N.left&&n.createElement("div",{onClick:function(){return O(c.Left)}},null!==(i=u.leftArrow)&&void 0!==i?i:n.createElement(f,{direction:"left"})),n.createElement(w,r({},u,{transition:x.transition,items:q.current,transform:x.transform,slideCallback:function(e){O(e)},dragCallback:function(e){S({transform:e,transition:u.transition,isSliding:!1}),setTimeout((function(){return S(r(r({},x),{transition:0}))}),1e3*u.transition)},widthCallBack:function(e){E(e),S({transform:u.infinite?h(e,u.slide,c.Right):0,transition:0,isSliding:!1})}})),N.right&&n.createElement("div",{onClick:function(){return O(c.Right)}},null!==(o=u.rightArrow)&&void 0!==o?o:n.createElement(f,{direction:"right"})))},exports.ScrollingCarousel=function(e){var r=e.children,i=e.className,s=e.leftIcon,o=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],w=g[1],y=function(e){w(v())},k=t.useCallback((function(e){null!==e&&(Object.defineProperty(a,"current",{value:e}),w(v()),e.addEventListener("scroll",y))}),[a,r]),E=function(e){f(!1),w(v()),a.current.classList.remove(b)},C=function(e){var t=function(e){for(var t,n,r=a.current,i=e===c.Left?r.scrollLeft+r.offsetWidth:r.scrollLeft,s=0,o=0,l=Array.from(r.children);o<l.length;o++){var u=l[o],f=(t=u,n=void 0,n=getComputedStyle(t),t.offsetWidth+(parseInt(n.marginLeft,10)||0)+(parseInt(n.marginRight,10)||0));if((s+=f)>=i){var d=e===c.Left?s-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(S,r,i*t/100+n),r+=e/100},S=function(e){a.current.scrollLeft=e},R=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:_+" "+i,"data-testid":"carousel"},p.left&&R(c.Right,"left",s),p.right&&R(c.Left,"right",o),n.createElement("div",{ref:k,onMouseDown:function(e){f(!0),m({startX:e.pageX-a.current.offsetLeft,scrollLeft:a.current.scrollLeft})},onMouseLeave:E,onMouseUp:E,onMouseMove:function(e){if(u){e.preventDefault(),a.current.classList.add(b);var t=e.pageX-a.current.offsetLeft-h.startX;a.current.scrollLeft=h.scrollLeft-t}},className:L},r))}; |
@@ -1,2 +0,2 @@ | ||
import t,{useRef as n,useEffect as e,useState as r,useLayoutEffect as i,useCallback as o}from"react"; | ||
import t,{useRef as e,useEffect as n,useState as r,useLayoutEffect as i,useCallback as o}from"react"; | ||
/*! ***************************************************************************** | ||
@@ -15,2 +15,2 @@ Copyright (c) Microsoft Corporation. All rights reserved. | ||
and limitations under the License. | ||
***************************************************************************** */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",c="styles-module_item-provider__YgMwz",u="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}\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 L=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}))}},L=n.swiping?{onTouchCancel:w,onTouchEnd:w,onTouchMove:_,onTouchStart:p,onMouseDown:p,onMouseLeave:w,onMouseUp:w,onMouseMove:_}:{};return t.createElement("div",{ref:d,className:c},t.createElement("div",s({"":"trackList"},L,{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:u},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},b=function(i){var o,a,c,u,f=s(s({},k),i),d=r(w(f.children,f.slide,f.infinite)),y=d[0],b=d[1],E=r(0),x=E[0],C=E[1],R=r({transform:0,transition:0,isSliding:!1}),T=R[0],M=R[1],I=r(0),N=I[0],D=I[1],A=r(p(f.children.length,f.show,f.infinite,N)),S=A[0],W=A[1],z=(c=i.children,u=n(),e((function(){u.current=c})),u.current),X=r(0),B=X[0],q=X[1],O=n(w(f.children,f.slide,f.infinite)),K=n(!1);f.dynamic&&e((function(){var t=_(O.current,f.children,z,f.slide,f.infinite);b(t),O.current=t,B<f.pageCount&&z&&(null==z?void 0:z.length)<f.children.length&&(Y(h.Right),q(B+1))}),[f.children]);var Y=function(t){if(!(T.isSliding||t===h.Right&&!S.right||t===h.Left&&!S.left)){if(f.paginationCallback&&t===h.Right&&B<f.pageCount-1&&!K.current)return K.current=!0,void f.paginationCallback(t);var n=f.children,e=function(t,n,e,r){var i=t-r*n;return i<0?e+i:e<=i?i-e:i}(N,f.slide,n.length,t),r=f.infinite?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}(n,y,e,f.show,f.slide,t):y;f.infinite&&t===h.Right&&(b(r),O.current=r),M({transform:T.transform+g(x,f.slide,t),transition:f.transition,isSliding:!0}),D(e),W(p(n.length,f.show,f.infinite,e)),setTimeout((function(){if(f.infinite){var n=function(t,n,e){return e===h.Left?t.slice(0,-1*n):t.slice(n)}(t===h.Right?O.current:r,f.slide,t);b(n),O.current=n}M({transform:f.infinite?g(x,f.slide,h.Right):T.transform+g(x,f.slide,t),transition:0,isSliding:!1})}),1e3*f.transition),K.current=!1}};return t.createElement("div",s({},f.a11y,{"":"carousel",tabIndex:0},f.useArrowKeys?{onKeyDown:function(t){37===t.keyCode?Y(h.Left):39===t.keyCode&&Y(h.Right)}}:{},{className:l+" "+f.className}),S.left&&t.createElement("div",{onClick:function(){return Y(h.Left)}},null!==(o=f.leftArrow)&&void 0!==o?o:t.createElement(m,{direction:"left"})),t.createElement(L,s({},f,{transition:T.transition,items:O.current,transform:T.transform,slideCallback:function(t){Y(t)},dragCallback:function(t){M({transform:t,transition:f.transition,isSliding:!1}),setTimeout((function(){return M(s(s({},T),{transition:0}))}),1e3*f.transition)},widthCallBack:function(t){C(t),M({transform:f.infinite?g(t,f.slide,h.Right):0,transition:0,isSliding:!1})}})),S.right&&t.createElement("div",{onClick:function(){return Y(h.Right)}},null!==(a=f.rightArrow)&&void 0!==a?a:t.createElement(m,{direction:"right"})))},E="styles-module_sliderBase__swkx1",x="styles-module_slider__o0fqa",C="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 R=function(e){var i=e.children,s=e.className,a=e.leftIcon,l=e.rightIcon,c=n(null),u=r(!1),f=u[0],d=u[1],m=r({startX:0,scrollLeft:0}),v=m[0],g=m[1],p=function(){var t=c.current;return{left:!!t&&t.scrollLeft>0,right:!!t&&t.scrollWidth>t.scrollLeft+t.offsetWidth}},w=r(p()),y=w[0],_=w[1],L=function(t){_(p())},k=o((function(t){null!==t&&(Object.defineProperty(c,"current",{value:t}),_(p()),t.addEventListener("scroll",L))}),[c,i]),b=function(t){d(!1),_(p()),c.current.classList.remove(C)},R=function(t){var n=function(t){for(var n,e,r=c.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],u=(n=l,e=void 0,e=getComputedStyle(n),n.offsetWidth+(parseInt(e.marginLeft,10)||0)+(parseInt(e.marginRight,10)||0));if((o+=u)>=i){var f=t===h.Left?o-i:u;return(r.offsetWidth-f)*t}}return r.offsetWidth}(t),e=c.current.scrollLeft;T(500,n,e)},T=function(t,n,e){for(var r=0,i=0;r<=t;i++)window.setTimeout(M,r,i*n/100+e),r+=t/100},M=function(t){c.current.scrollLeft=t},I=function(n,e,r){return t.createElement("div",{"data-arrow":e,onClick:function(){return R(n)}},null!=r?r:t.createElement("button",null))};return t.createElement("div",{className:E+" "+s,"":"carousel"},y.left&&I(h.Right,"left",a),y.right&&I(h.Left,"right",l),t.createElement("div",{ref:k,onMouseDown:function(t){d(!0),g({startX:t.pageX-c.current.offsetLeft,scrollLeft:c.current.scrollLeft})},onMouseLeave:b,onMouseUp:b,onMouseMove:function(t){if(f){t.preventDefault(),c.current.classList.add(C);var n=t.pageX-c.current.offsetLeft-v.startX;c.current.scrollLeft=v.scrollLeft-n}},className:x},i))};export{b as Carousel,R as ScrollingCarousel}; | ||
***************************************************************************** */var s=function(){return(s=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)};function a(t,e){void 0===e&&(e={});var n=e.insertAt;if(t&&"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=t:i.appendChild(document.createTextNode(t))}}var l="styles-module_carousel-base__3keqD",c="styles-module_item-provider__YgMwz",u="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}\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(e){return t.createElement("button",{className:d,onClick:e.onClick,"data-direction":e.direction})};!function(t){t[t.Right=-1]="Right",t[t.Left=1]="Left"}(h||(h={}));var v=function(){function t(t,e){this.arr=t,this.currentIndex=e}return t.prototype.next=function(){var t=this.currentIndex,e=this.arr;return this.currentIndex=t<e.length-1?t+1:0,this.current()},t.prototype.prev=function(){var t=this.currentIndex,e=this.arr;return this.currentIndex=t>0&&t<e.length?t-1:e.length-1,this.current()},t.prototype.current=function(){return this.arr[this.currentIndex]},t}(),g=function(t,e,n){return n*t*e},p=function(t,e,n,r){var i=t>e;return n?{left:i,right:i}:{left:i&&0!==r,right:i&&r+e<t}},w=function(t,e,n){if(!n)return t;for(var r=Array.from(t),i=new v(t,0),o=0;o<e;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,e,n,r,i){if(n&&n.length<e.length)return w(e,r,i);var o=t.map((function(t){return e.find((function(e){return t.key===e.key}))}));return o.some((function(t){return void 0===t}))?w(e,r,i):o}var L=function(e){var n=r(200),a=n[0],l=n[1],d=o((function(t){if(null!==t){var n=t.getBoundingClientRect().width/e.show;l(n),e.widthCallBack(n)}}),[a]);e.responsive&&function(t){var e=r(window.innerWidth),n=e[0],o=e[1];i((function(){var e=function(){var e=n-window.innerWidth;o(window.innerWidth),t(e)};return window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}),[])}((function(t){l(a-t)}));var m=r({initial:e.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:e.transform,finished:!1}))},w=function(t){if(t.persist(),!v.finished){if(Math.abs(v.drag)<a*e.swipeOn)return e.dragCallback(e.transform),g({initial:e.transform,start:0,isDown:!1,drag:0,finished:!0,pointers:!0});e.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:!1}))}},L=e.swiping?{onTouchCancel:w,onTouchEnd:w,onTouchMove:_,onTouchStart:p,onMouseDown:p,onMouseLeave:w,onMouseUp:w,onMouseMove:_}:{};return t.createElement("div",{ref:d,className:c},t.createElement("div",s({"data-testid":"trackList"},L,{className:f,style:{transform:"translateX("+(e.transform-v.drag)+"px)",transition:"transform "+e.transition+"s ease 0s",width:a*e.items.length}}),e.items.map((function(e,n){return t.createElement("div",{key:n,style:{width:a,pointerEvents:v.pointers?"all":"none"},className:u},e)}))))},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},b=function(i){var o,a,c,u,f=s(s({},k),i),d=r(w(f.children,f.slide,f.infinite)),y=d[0],b=d[1],E=r(0),x=E[0],C=E[1],R=r({transform:0,transition:0,isSliding:!1}),T=R[0],M=R[1],I=r(0),N=I[0],D=I[1],A=r(p(f.children.length,f.show,f.infinite,N)),S=A[0],W=A[1],z=(c=i.children,u=e(),n((function(){u.current=c})),u.current),X=r(0),B=X[0],q=X[1],O=e(w(f.children,f.slide,f.infinite)),K=e(!1);f.dynamic&&n((function(){var t=_(O.current,f.children,z,f.slide,f.infinite);b(t),O.current=t,B<f.pageCount&&z&&(null==z?void 0:z.length)<f.children.length&&(Y(h.Right),q(B+1))}),[f.children]);var Y=function(t){if(!(T.isSliding||t===h.Right&&!S.right||t===h.Left&&!S.left)){if(f.paginationCallback&&t===h.Right&&B<f.pageCount-1&&!K.current)return K.current=!0,void f.paginationCallback(t);var e=f.children,n=function(t,e,n,r){var i=t-r*e;return i<0?n+i:n<=i?i-n:i}(N,f.slide,e.length,t),r=f.infinite?function(t,e,n,r,i,o){var s=new v(t,n),a=Array.from(e);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,y,n,f.show,f.slide,t):y;f.infinite&&t===h.Right&&(b(r),O.current=r),M({transform:T.transform+g(x,f.slide,t),transition:f.transition,isSliding:!0}),D(n),W(p(e.length,f.show,f.infinite,n)),setTimeout((function(){if(f.infinite){var e=function(t,e,n){return n===h.Left?t.slice(0,-1*e):t.slice(e)}(t===h.Right?O.current:r,f.slide,t);b(e),O.current=e}M({transform:f.infinite?g(x,f.slide,h.Right):T.transform+g(x,f.slide,t),transition:0,isSliding:!1})}),1e3*f.transition),K.current=!1}};return t.createElement("div",s({},f.a11y,{"data-testid":"carousel",tabIndex:0},f.useArrowKeys?{onKeyDown:function(t){37===t.keyCode?Y(h.Left):39===t.keyCode&&Y(h.Right)}}:{},{className:l+" "+f.className}),S.left&&t.createElement("div",{onClick:function(){return Y(h.Left)}},null!==(o=f.leftArrow)&&void 0!==o?o:t.createElement(m,{direction:"left"})),t.createElement(L,s({},f,{transition:T.transition,items:O.current,transform:T.transform,slideCallback:function(t){Y(t)},dragCallback:function(t){M({transform:t,transition:f.transition,isSliding:!1}),setTimeout((function(){return M(s(s({},T),{transition:0}))}),1e3*f.transition)},widthCallBack:function(t){C(t),M({transform:f.infinite?g(t,f.slide,h.Right):0,transition:0,isSliding:!1})}})),S.right&&t.createElement("div",{onClick:function(){return Y(h.Right)}},null!==(a=f.rightArrow)&&void 0!==a?a:t.createElement(m,{direction:"right"})))},E="styles-module_sliderBase__swkx1",x="styles-module_slider__o0fqa",C="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 R=function(n){var i=n.children,s=n.className,a=n.leftIcon,l=n.rightIcon,c=e(null),u=r(!1),f=u[0],d=u[1],m=r({startX:0,scrollLeft:0}),v=m[0],g=m[1],p=function(){var t=c.current;return{left:!!t&&t.scrollLeft>0,right:!!t&&t.scrollWidth>t.scrollLeft+t.offsetWidth}},w=r(p()),y=w[0],_=w[1],L=function(t){_(p())},k=o((function(t){null!==t&&(Object.defineProperty(c,"current",{value:t}),_(p()),t.addEventListener("scroll",L))}),[c,i]),b=function(t){d(!1),_(p()),c.current.classList.remove(C)},R=function(t){var e=function(t){for(var e,n,r=c.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],u=(e=l,n=void 0,n=getComputedStyle(e),e.offsetWidth+(parseInt(n.marginLeft,10)||0)+(parseInt(n.marginRight,10)||0));if((o+=u)>=i){var f=t===h.Left?o-i:u;return(r.offsetWidth-f)*t}}return r.offsetWidth}(t),n=c.current.scrollLeft;T(500,e,n)},T=function(t,e,n){for(var r=0,i=0;r<=t;i++)window.setTimeout(M,r,i*e/100+n),r+=t/100},M=function(t){c.current.scrollLeft=t},I=function(e,n,r){return t.createElement("div",{"data-arrow":n,onClick:function(){return R(e)}},null!=r?r:t.createElement("button",null))};return t.createElement("div",{className:E+" "+s,"data-testid":"carousel"},y.left&&I(h.Right,"left",a),y.right&&I(h.Left,"right",l),t.createElement("div",{ref:k,onMouseDown:function(t){d(!0),g({startX:t.pageX-c.current.offsetLeft,scrollLeft:c.current.scrollLeft})},onMouseLeave:b,onMouseUp:b,onMouseMove:function(t){if(f){t.preventDefault(),c.current.classList.add(C);var e=t.pageX-c.current.offsetLeft-v.startX;c.current.scrollLeft=v.scrollLeft-e}},className:x},i))};export{b as Carousel,R as ScrollingCarousel}; |
{ | ||
"name": "@trendyol-js/react-carousel", | ||
"version": "2.0.0", | ||
"version": "2.0.1", | ||
"description": "Lightweight carousel component for react", | ||
@@ -37,3 +37,3 @@ "main": "dist/cjs/index.js", | ||
"authors": [ | ||
"Hasan Genc <hasan.genc@trendyol.com> (https://github.com/hasangenc0)" | ||
"Hasan Genc <hasangenc.istanbul@gmail.com> (https://github.com/hasangenc0)" | ||
], | ||
@@ -40,0 +40,0 @@ "license": "MIT", |
@@ -7,3 +7,2 @@ import peerDepsExternal from 'rollup-plugin-peer-deps-external'; | ||
import { terser } from 'rollup-plugin-terser'; | ||
import replace from '@rollup/plugin-replace'; | ||
@@ -35,3 +34,2 @@ const isProduction = process.env.BUILD === 'production'; | ||
typescript({ useTsconfigDeclarationDir: true }), | ||
isProduction && replace({ 'data-testid': '' }), | ||
isProduction && terser(), | ||
@@ -38,0 +36,0 @@ ], |
63729
10.26%42
16.67%992
-0.2%