react-slideshow-image
Version:
An image slideshow with react
3 lines (2 loc) • 11.2 kB
JavaScript
;function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=e(n),r=e(require("resize-observer-polyfill")),i=require("@tweenjs/tween.js");function a(){return(a=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var c=function(e,n){return n&&n<t.Children.count(e)?n:0},o={linear:i.Easing.Linear.None,ease:i.Easing.Quadratic.InOut,"ease-in":i.Easing.Quadratic.In,"ease-out":i.Easing.Quadratic.Out,cubic:i.Easing.Cubic.InOut,"cubic-in":i.Easing.Cubic.In,"cubic-out":i.Easing.Cubic.Out},u=function(e){return e?o[e]:o.linear},l=function(e,n,r){var i=e.prevArrow,c=n<=0&&!e.infinite,o={"data-type":"prev","aria-label":"Previous Slide",disabled:c,onClick:r};return i?t.cloneElement(i,a({className:(i.props.className||"")+" nav "+(c?"disabled":"")},o)):t.createElement("button",Object.assign({type:"button",className:"nav default-nav "+(c?"disabled":"")},o),t.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24"},t.createElement("path",{d:"M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"})))},s=function(e,n,r,i){var c=e.nextArrow,o=e.infinite,u=1;i?u=null==i?void 0:i.settings.slidesToScroll:"slidesToScroll"in e&&(u=e.slidesToScroll||1);var l=n>=t.Children.count(e.children)-u&&!o,s={"data-type":"next","aria-label":"Next Slide",disabled:l,onClick:r};return c?t.cloneElement(c,a({className:(c.props.className||"")+" nav "+(l?"disabled":"")},s)):t.createElement("button",Object.assign({type:"button",className:"nav default-nav "+(l?"disabled":"")},s),t.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24"},t.createElement("path",{d:"M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"})))},f=function(e,n,r,i){var c=e.indicators,o=1;i?o=null==i?void 0:i.settings.slidesToScroll:"slidesToScroll"in e&&(o=e.slidesToScroll||1);var u=Math.ceil(t.Children.count(e.children)/o);return t.createElement("ul",{className:"indicators"},Array.from({length:u},(function(e,i){var u={"data-key":i,"aria-label":"Go to slide "+(i+1),onClick:r},l=Math.floor((n+o-1)/o)===i;return"function"==typeof c?function(e,n,r,i){return t.cloneElement(i,a({className:i.props.className+" "+(e?"active":""),key:n},r))}(l,i,u,c(i)):function(e,n,r){return t.createElement("li",{key:n},t.createElement("button",Object.assign({type:"button",className:"each-slideshow-indicator "+(e?"active":"")},r)))}(l,i,u)})))},d={duration:5e3,transitionDuration:1e3,defaultIndex:0,infinite:!0,autoplay:!0,indicators:!1,arrows:!0,pauseOnHover:!0,easing:"linear",canSwipe:!0,cssClass:"",responsive:[]},v=t.forwardRef((function(e,a){var o=n.useState(c(e.children,e.defaultIndex)),d=o[0],v=o[1],p=n.useRef(null),h=n.useRef(null),m=n.useRef(new i.Group),y=n.useRef(),g=n.useRef(),w=n.useMemo((function(){return t.Children.count(e.children)}),[e.children]),E=n.useCallback((function(){if(h.current&&p.current){var e=p.current.clientWidth;h.current.style.width=e*w+"px";for(var n=0;n<h.current.children.length;n++){var t=h.current.children[n];t&&(t.style.width=e+"px",t.style.left=n*-e+"px",t.style.display="block")}}}),[p,h,w]),b=n.useCallback((function(){p.current&&(g.current=new r((function(e){e&&E()})),g.current.observe(p.current))}),[p,E]),T=n.useCallback((function(){var n=e.children,r=e.duration,i=e.infinite;e.autoplay&&t.Children.count(n)>1&&(i||d<t.Children.count(n)-1)&&(y.current=setTimeout(S,r))}),[e,d]);n.useEffect((function(){return b(),function(){m.current.removeAll(),clearTimeout(y.current),C()}}),[b,m]),n.useEffect((function(){clearTimeout(y.current),T()}),[d,e.autoplay,T]),n.useEffect((function(){E()}),[w,E]),n.useImperativeHandle(a,(function(){return{goNext:function(){S()},goBack:function(){k()},goTo:function(e,n){null!=n&&n.skipTransition?v(e):O(e)}}}));var C=function(){g.current&&p.current&&g.current.unobserve(p.current)},x=function(){e.pauseOnHover&&clearTimeout(y.current)},S=function(){var n=e.children;(e.infinite||d!==t.Children.count(n)-1)&&N((d+1)%t.Children.count(n))},k=function(){(e.infinite||0!==d)&&N(0===d?t.Children.count(e.children)-1:d-1)},M=function(e){"prev"===e.currentTarget.dataset.type?k():S()},N=function(n){if(!m.current.getAll().length){var t;null!=(t=h.current)&&t.children[n]||(n=0),clearTimeout(y.current),function e(){requestAnimationFrame(e),m.current.update()}();var r=new i.Tween({opacity:0,scale:1},m.current).to({opacity:1,scale:e.scale},e.transitionDuration).onUpdate((function(e){h.current&&(h.current.children[n].style.opacity=e.opacity,h.current.children[d].style.opacity=1-e.opacity,h.current.children[d].style.transform="scale("+e.scale+")")}));r.easing(u(e.easing)),r.onStart((function(){"function"==typeof e.onStartChange&&e.onStartChange(d,n)})),r.onComplete((function(){h.current&&(v(n),h.current.children[d].style.transform="scale(1)"),"function"==typeof e.onChange&&e.onChange(d,n)})),r.start()}},O=function(e){e!==d&&N(e)};return t.createElement("div",{dir:"ltr","aria-roledescription":"carousel"},t.createElement("div",{className:"react-slideshow-container "+(e.cssClass||""),onMouseEnter:x,onMouseOver:x,onMouseLeave:function(){e.pauseOnHover&&e.autoplay&&(y.current=setTimeout((function(){return S()}),e.duration))}},e.arrows&&l(e,d,M),t.createElement("div",{className:"react-slideshow-fadezoom-wrapper "+e.cssClass,ref:p},t.createElement("div",{className:"react-slideshow-fadezoom-images-wrap",ref:h},(t.Children.map(e.children,(function(e){return e}))||[]).map((function(e,n){return t.createElement("div",{style:{opacity:n===d?"1":"0",zIndex:n===d?"1":"0"},"data-index":n,key:n,"aria-roledescription":"slide","aria-hidden":n===d?"false":"true"},e)})))),e.arrows&&s(e,d,M)),e.indicators&&f(e,d,(function(e){var n=e.currentTarget;n.dataset.key&&parseInt(n.dataset.key)!==d&&O(parseInt(n.dataset.key))})))}));v.defaultProps=d;var p=t.forwardRef((function(e,n){return t.createElement(v,Object.assign({},e,{scale:1,ref:n}))}));p.defaultProps=d;var h=t.forwardRef((function(e,n){return t.createElement(v,Object.assign({},e,{ref:n}))}));h.defaultProps=d;var m=t.forwardRef((function(e,a){var o,d=n.useState(c(e.children,e.defaultIndex)),v=d[0],p=d[1],h=n.useState(0),m=h[0],y=h[1],g=n.useRef(null),w=n.useRef(null),E=n.useRef(new i.Group),b=n.useMemo((function(){return function(e,n){if("undefined"!=typeof window&&Array.isArray(n))return n.find((function(n){return n.breakpoint<=e}))}(m,e.responsive)}),[m,e.responsive]),T=n.useMemo((function(){return b?b.settings.slidesToScroll:e.slidesToScroll||1}),[b,e.slidesToScroll]),C=n.useMemo((function(){return b?b.settings.slidesToShow:e.slidesToShow||1}),[b,e.slidesToShow]),x=n.useMemo((function(){return t.Children.count(e.children)}),[e.children]),S=n.useMemo((function(){return m/C}),[m,C]),k=n.useRef(),M=n.useRef(),N=!1,O=0,R=e.vertical?"translateY":"translateX",A=e.vertical?"clientY":"clientX",I=e.vertical?"pageY":"pageX",j=n.useCallback((function(){if(w.current){var n=e.vertical?"height":"width";w.current.style[n]=m*w.current.children.length+"px",e.vertical&&g.current&&(g.current.style[n]=m+"px");for(var t=0;t<w.current.children.length;t++){var r=w.current.children[t];r&&(e.vertical||(r.style[n]=S+"px"),r.style.display="block")}}}),[m,S]),H=n.useCallback((function(){g.current&&(M.current=new r((function(e){e&&U()})),M.current.observe(g.current))}),[g]),z=n.useCallback((function(){e.autoplay&&(e.infinite||v<x-1)&&(k.current=setTimeout(D,e.duration))}),[e,x,v]);n.useEffect((function(){j()}),[m,j]),n.useEffect((function(){return H(),function(){E.current.removeAll(),clearTimeout(k.current),P()}}),[g,H,E]),n.useEffect((function(){clearTimeout(k.current),z()}),[v,m,e.autoplay,z]),n.useImperativeHandle(a,(function(){return{goNext:function(){D()},goBack:function(){F()},goTo:function(e,n){null!=n&&n.skipTransition?p(e):G(e)}}}));var P=function(){M&&g.current&&M.current.unobserve(g.current)},q=function(){e.pauseOnHover&&clearTimeout(k.current)},B=function(n){var t;if(e.canSwipe&&N&&(t=window.TouchEvent&&n.nativeEvent instanceof TouchEvent?n.nativeEvent.touches[0][I]:n.nativeEvent[A])&&o){var r=S*(v+_()),i=t-o;if(!e.infinite&&v===x-T&&i<0)return;if(!e.infinite&&0===v&&i>0)return;w.current.style.transform=R+"(-"+(r-=O=i)+"px)"}},D=function(){if(e.infinite||v!==x-T){var n=L(v+T);Y(n)}},F=function(){if(e.infinite||0!==v){var n=v-T;n%T&&(n=Math.ceil(n/T)*T),Y(n)}},G=function(e){Y(L(e))},L=function(e){return e<x&&e+T>x&&(x-T)%T?x-T:e},Q=function(e){"next"===e.currentTarget.dataset.type?D():F()},U=function(){var n=e.vertical?"clientHeight":"clientWidth";e.vertical?w.current&&y(w.current.children[0][n]):g.current&&y(g.current[n])},W=function(n){e.canSwipe&&(o=window.TouchEvent&&n.nativeEvent instanceof TouchEvent?n.nativeEvent.touches[0][I]:n.nativeEvent[A],clearTimeout(k.current),N=!0)},X=function(){e.canSwipe&&(N=!1,Math.abs(O)/m>.2?O<0?D():F():Math.abs(O)>0&&Y(v,300))},Y=function(n,t){var r=t||e.transitionDuration,a=v,c=E.current.getAll();if(g.current){var o=g.current[e.vertical?"clientHeight":"clientWidth"]/C;if(!c.length){clearTimeout(k.current);var l={margin:-o*(a+_())+O},s=new i.Tween(l,E.current).to({margin:-o*(n+_())},r).onUpdate((function(e){w.current&&(w.current.style.transform=R+"("+e.margin+"px)")}));s.easing(u(e.easing)),function e(){requestAnimationFrame(e),E.current.update()}();var f=n;f<0?f=x-T:f>=x&&(f=0),s.onStart((function(){"function"==typeof e.onStartChange&&e.onStartChange(v,f)})),s.onComplete((function(){O=0,"function"==typeof e.onChange&&e.onChange(v,f),p(f)})),s.start()}}},_=function(){return e.infinite?C:0},Z={transform:R+"(-"+(v+_())*S+"px)"};return t.createElement("div",{dir:"ltr","aria-roledescription":"carousel"},t.createElement("div",{className:"react-slideshow-container",onMouseEnter:q,onMouseOver:q,onMouseLeave:function(){N?X():e.pauseOnHover&&e.autoplay&&(k.current=setTimeout(D,e.duration))},onMouseDown:W,onMouseUp:X,onMouseMove:B,onTouchStart:W,onTouchEnd:X,onTouchCancel:X,onTouchMove:B},e.arrows&&l(e,v,Q),t.createElement("div",{className:"react-slideshow-wrapper slide "+(e.cssClass||""),ref:g},t.createElement("div",{className:"images-wrap "+(e.vertical?"vertical":"horizontal"),style:Z,ref:w},e.infinite&&t.Children.toArray(e.children).slice(-C).map((function(e,n){return t.createElement("div",{"data-index":n-C,"aria-roledescription":"slide","aria-hidden":"true",key:n-C},e)})),(t.Children.map(e.children,(function(e){return e}))||[]).map((function(e,n){var r=function(e){return e<v+C&&e>=v}(n);return t.createElement("div",{"data-index":n,key:n,className:r?"active":"","aria-roledescription":"slide","aria-hidden":r?"false":"true"},e)})),function(){if(e.infinite||C!==T)return t.Children.toArray(e.children).slice(0,C).map((function(e,n){return t.createElement("div",{"data-index":x+n,"aria-roledescription":"slide","aria-hidden":"true",key:x+n},e)}))}())),e.arrows&&s(e,v,Q,b)),!!e.indicators&&f(e,v,(function(e){var n=e.currentTarget;if(n.dataset.key){var t=parseInt(n.dataset.key);G(t*T)}}),b))}));m.defaultProps=d,exports.Fade=p,exports.Slide=m,exports.Zoom=h;
//# sourceMappingURL=react-slideshow-image.cjs.production.min.js.map