@ebay/ui-core-react/ebay-carousel/index.js

Skin components build off React

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ee=require("../tslib.es6-C4EgNkz1.js"),s=require("react"),A=require("classnames"),le=require("../icons/ebay-icon-chevron-left-16/index.js"),ae=require("../icons/ebay-icon-chevron-right-16/index.js"),Y=require("../debounce-BQsYxxOL.js"),ce=require("../icons/ebay-icon-pause-24/index.js"),ie=require("../icons/ebay-icon-play-24/index.js"),ue=require("react-dom");require("../array.polyfill.flat-5BAolFdk.js");const fe=require("../reduced-motion-CMIhlQVx.js"),M=require("makeup-focusables"),de=require("../forwardRef-DBQKIlPy.js"),he={prev:"LEFT",next:"RIGHT"},Z=({type:e,label:n,hidden:t,disabled:r,onClick:a})=>{const c=u=>{r||a(u,{direction:he[e]})},o=e==="prev"?le.EbayIconChevronLeft16:ae.EbayIconChevronRight16;return s.createElement("button",{className:A("carousel__control",`carousel__control--${e}`),"aria-label":n,"aria-disabled":r,onClick:c},s.createElement(o,{className:A("icon",`icon--carousel-${e}`),focusable:!1,"aria-hidden":t}))};function me(e){const n=e.parentElement,t=n?n.firstElementChild.getBoundingClientRect().left:0,{left:r,right:a}=e.getBoundingClientRect();return{left:r-t,right:a-t}}const be=e=>getComputedStyle(e).overflowX!=="visible",N=(e,n)=>{if(!e.length)return 0;const t=e[e.length-1];return Math.max(t.right-n,0)||0},ye=(e,n,t)=>e.length&&Math.min(e[n].left,N(e,t))||0,Ee=(e,n,t,r,a,c)=>s.Children.map(e,(o,u)=>{const{style:d={}}=o.props;let i;if(t){const l=t+t%1;i=`calc(${100/l}% - ${(l-1)*c/l}px)`}const f=t?u%t===0:!0;return s.cloneElement(o,{slideWidth:r,offset:a,ref:l=>{n.current[u]=l},className:f?"carousel__snap-point":o.props.className,style:Object.assign(Object.assign({},d),{width:i||d.width,marginRight:c&&u!==s.Children.count(e)-1?`${c}px`:d.marginRight})})}),te=(e,n,t)=>{if(e>0){let r=e;return r%=n.length||1,r-=r%(t||1),r=Math.abs(r),r}return 0},ge=(e,n,t=e)=>{if(n)return Math.ceil(t/n)},pe=e=>e==="LEFT"?-1:1,ve=(e,n,t,r,a)=>{let c=n,o;if(e==="LEFT"&&c===0)c=t.length-1;else{do{const u=pe(e);o=t[c+=u]}while(o&&o.fullyVisible);if(e==="LEFT"&&!a){const u=o.right-r;do o=t[--c];while(o&&o.left>=u);c+=1}}return te(c,t,a)},Ce=(e,n,t,r=1,a)=>{let c;if(e>=N(n,t)-a)c=n.length-1;else{const o=n.length;let u=0,d=Math.ceil(o/r)-1;for(;d-u>1;){const l=Math.floor((u+d)/2);e>n[l*r].left?u=l:d=l}const i=Math.abs(e-n[u*r].left),f=Math.abs(e-n[d*r].left);c=te((i>f?d:u)*r,n,r)}return c};function Se({direction:e,nextIndex:n,currentIndex:t,itemsRef:r,slideWidth:a,gap:c,onAnimationStart:o,onAnimationEnd:u}){if(e==="RIGHT"&&n<t){let i=r.current[t].element.closest("ul");i.style.transition="none";const f=N(r.current,a)+a+c;for(let l=t;l>n;l--)r.current[l].element.style.transform=`translateX(${-f}px)`;i.style.transform=`translate3d(${a+c}px, 0, 0)`,o(),requestAnimationFrame(()=>{i.style.transition="",i.style.transform="translate3d(0, 0, 0)",i=null}),i.addEventListener("transitionend",()=>{requestAnimationFrame(()=>{for(let l=t;l>n;l--)r.current[l].element.style.transform="";u()})},{once:!0})}else if(e==="LEFT"&&n>t){let i=r.current[t].element.closest("ul");i.style.transition="none";const f=N(r.current,a)+a+c;for(let l=t;l<n;l++)r.current[l].element.style.transform=`translateX(${f}px)`;i.style.transform=`translate3d(${-f}px, 0, 0)`,o(),requestAnimationFrame(()=>{i.style.transition="",i.style.transform=`translate3d(${-f+a+c}px, 0, 0)`,i=null}),i.addEventListener("transitionend",()=>{requestAnimationFrame(()=>{for(let l=t;l<n;l++)r.current[l].element.style.transform="";u()})},{once:!0})}}const Te=(e,n)=>{let t,r,a;return(function c(){const{scrollLeft:o}=e;if(a!==o){a=o,t=setTimeout(()=>{r=requestAnimationFrame(c)},90);return}n(a)})(),()=>{clearTimeout(t),cancelAnimationFrame(r)}},_e=typeof window<"u"&&"scrollBehavior"in document.body.style;function ne(e,n,t){if(_e)return e.scrollTo({left:n}),Te(e,t);let r,a,c=requestAnimationFrame(l=>{const{scrollLeft:_}=e,w=n-_,L=450;(function I(g){const p=g-l;if(p>L)return e.scrollLeft=n,o(),t();e.scrollLeft=Le(p/L)*w+_,c=requestAnimationFrame(I)})(l)});return e.addEventListener("touchstart",u),o;function o(){cancelAnimationFrame(c),r===void 0?i():(a&&a(),f())}function u(){o(),r=e.scrollLeft,e.addEventListener("touchend",d)}function d(){f(),r===e.scrollLeft&&(a=ne(e,n,t))}function i(){e.removeEventListener("touchstart",u)}function f(){e.removeEventListener("touchend",d)}}function Le(e){return e<.5?2*e*e:-1+(4-2*e)*e}const Ie=({gap:e=16,itemsPerSlide:n,slideWidth:t,offset:r,activeIndex:a,nextControlDisabled:c,isAutoplayEnabled:o,className:u,itemsRef:d,children:i,onSetActiveIndex:f,onScroll:l})=>{const[_,w]=s.useState(0),[L,I]=s.useState(!1),[g,p]=s.useState(!1),m=s.useRef(null),v=s.useRef(null);s.useEffect(()=>{if(!s.Children.count(i)||!m.current)return;if(L){I(!1);return}const y=m.current;if(be(y))return p(!0),ne(y,r,()=>p(!1));w(r)},[r]);const b=s.useCallback(()=>{const R=m.current.scrollLeft,y=Ce(R,d.current,t,n,e);y!==a&&(I(!0),f(y),l({index:y}))},[m.current,t,a,f]),F=()=>{v.current&&clearTimeout(v.current),v.current=setTimeout(()=>{g||b()},640)};return s.createElement("div",{className:A("carousel__viewport",{"carousel__viewport--mask":!c&&!o},u)},s.createElement("ul",{className:"carousel__list",ref:m,onScroll:F,style:{transform:`translate3d(${-_}px, 0, 0)`}},Ee(i,d,n,t,r,e)))},Re=ue.flushSync||(e=>e()),xe=e=>{var{gap:n=16,index:t=0,itemsPerSlide:r,a11yPreviousText:a,a11yNextText:c,a11yPauseText:o,a11yPlayText:u,autoplay:d,onScroll:i=()=>{},onNext:f=()=>{},onPrevious:l=()=>{},onSlide:_=()=>{},onPlay:w=()=>{},onPause:L=()=>{},className:I,children:g}=e,p=ee.__rest(e,["gap","index","itemsPerSlide","a11yPreviousText","a11yNextText","a11yPauseText","a11yPlayText","autoplay","onScroll","onNext","onPrevious","onSlide","onPlay","onPause","className","children"]);const[m,v]=s.useState(t),[b,F]=s.useState(0),[R,y]=s.useState(0),[k,D]=s.useState(!1),q=s.useRef(null),C=s.useRef([]),O=s.Children.count(g),S=Math.floor(r)||void 0,H=O<=S,E=!!d,re=H||R===0&&!E,V=H||R===N(C.current,b)&&!E,G=()=>{if(!q.current)return;const{width:h}=q.current.getBoundingClientRect();F(h)};s.useEffect(()=>(window.addEventListener("resize",Y.debounce(G,16)),()=>{window.removeEventListener("resize",Y.debounce(G,16))}),[]);const[X,U]=s.useState(!1);s.useEffect(()=>{X||y(ye(C.current,m,b))},[m,b,X]),s.useEffect(()=>{t>=0&&t<=O-1&&v(t)},[t]),s.useEffect(()=>{C.current=C.current.splice(0,O)},[g]),s.useEffect(()=>{const{width:h}=q.current.getBoundingClientRect();F(h)},[q.current]);const P=fe.useReducedMotion(),[x,J]=s.useState(P);s.useEffect(()=>{J(P)},[P]);const se=h=>{J(!x),x?w(h):L(h)},K=s.useRef(m);K.current=m;const Q=(h,T)=>{const j=K.current,z=ve(h,j,C.current,b,T),oe=ge(j,T,z);_({slide:oe}),E&&Se({direction:h,nextIndex:z,currentIndex:j,itemsRef:C,slideWidth:b,gap:n,onAnimationStart:()=>U(!0),onAnimationEnd:()=>U(!1)}),Re(()=>v(z))};s.useEffect(()=>{if(!E||x||k)return;const T=setInterval(()=>{Q("RIGHT",S)},typeof d=="number"?d:4e3);return()=>clearInterval(T)},[E,x,S,k]);const W=(h,{direction:T})=>{Q(T,S),T==="LEFT"?l(h):f(h)},$=()=>D(!0),B=()=>D(!1);return s.createElement("div",Object.assign({className:A("carousel",I,{"carousel--slides":S,"carousel--peek":S%1===0,carousel__autoplay:E}),role:"group"},p),s.createElement("div",{ref:q,className:"carousel__container",onFocusCapture:$,onMouseEnter:$,onTouchStartCapture:$,onBlurCapture:B,onMouseLeave:B,onTouchEndCapture:B},s.createElement(Z,{label:a,type:"prev",disabled:re,onClick:W}),s.createElement(Ie,{itemsRef:C,offset:R,gap:n,itemsPerSlide:S,nextControlDisabled:V,isAutoplayEnabled:E,activeIndex:m,onScroll:i,onSetActiveIndex:v,slideWidth:b},g),s.createElement(Z,{type:"next",label:c,disabled:V,onClick:W}),E?s.createElement("button",{className:"carousel__playback",type:"button",onClick:se,"aria-label":x?u:o},x?s.createElement(ie.EbayIconPlay24,null):s.createElement(ce.EbayIconPause24,null)):null))},{default:we=M}=M?.default?.__esModule?M.default:M,qe=e=>{var{slideWidth:n,offset:t,forwardedRef:r,children:a}=e,c=ee.__rest(e,["slideWidth","offset","forwardedRef","children"]);const o=s.useRef(null),[u,d]=s.useState(!1);return s.useImperativeHandle(r,()=>{if(!o.current)return;const{left:i,right:f}=me(o.current),l=i===void 0||i-t>=-.01&&f-t<=n+.01;return d(l),{element:o.current,left:i,right:f,fullyVisible:l}},[n,t]),s.useEffect(()=>{if(o.current){const i=we(o.current);for(const f of i)u?f.hasAttribute("data-carousel-tabindex")?f.setAttribute("tabindex",f.getAttribute("data-carousel-tabindex")):f.removeAttribute("tabindex"):f.setAttribute("tabindex","-1")}},[u]),s.createElement("li",Object.assign({},c,{ref:o,"aria-hidden":!u}),a)},Ne=de.withForwardRef(qe);exports.EbayCarousel=xe;exports.EbayCarouselItem=Ne;