@ebay/ui-core-react 8.5.1 → 8.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ebay-carousel/index.js +1 -1
- package/package.json +1 -1
package/ebay-carousel/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Z=require("../tslib.es6-C4EgNkz1.js"),s=require("react"),q=require("classnames"),ee=require("../icon-C-bWGO-9.js"),W=require("../debounce-BQsYxxOL.js"),le=require("react-dom");require("../array.polyfill.flat-5BAolFdk.js");const ae=require("../reduced-motion-CMIhlQVx.js"),ce=require("../forwardRef-DBQKIlPy.js"),ie={prev:"chevronLeft16",next:"chevronRight16"},ue={prev:"LEFT",next:"RIGHT"},Y=({type:e,label:n,hidden:t,disabled:r,onClick:a})=>{const c=l=>{a(l,{direction:ue[e]})};return s.createElement("button",{className:q("carousel__control",`carousel__control--${e}`),"aria-label":n,"aria-disabled":r,disabled:r,onClick:c},s.createElement(ee.EbayIcon,{className:q("icon",`icon--carousel-${e}`),focusable:!1,name:ie[e],"aria-hidden":t}))};function fe(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 de=e=>getComputedStyle(e).overflowX!=="visible",I=(e,n)=>{if(!e.length)return 0;const t=e[e.length-1];return Math.max(t.right-n,0)||0},he=(e,n,t)=>e.length&&Math.min(e[n].left,I(e,t))||0,me=(e,n,t,r,a,c)=>s.Children.map(e,(l,u)=>{const{style:f={}}=l.props;let i;if(t){const o=t+t%1;i=`calc(${100/o}% - ${(o-1)*c/o}px)`}const d=t?u%t===0:!0;return s.cloneElement(l,{slideWidth:r,offset:a,ref:o=>{n.current[u]=o},className:d?"carousel__snap-point":l.props.className,style:Object.assign(Object.assign({},f),{width:i||f.width,marginRight:c&&u!==s.Children.count(e)-1?`${c}px`:f.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},ye=(e,n,t=e)=>{if(n)return Math.ceil(t/n)},Ee=e=>e==="LEFT"?-1:1,ge=(e,n,t,r,a)=>{let c=n,l;if(e==="LEFT"&&c===0)c=t.length-1;else{do{const u=Ee(e);l=t[c+=u]}while(l&&l.fullyVisible);if(e==="LEFT"&&!a){const u=l.right-r;do l=t[--c];while(l&&l.left>=u);c+=1}}return te(c,t,a)},pe=(e,n,t,r=1,a)=>{let c;if(e>=I(n,t)-a)c=n.length-1;else{const l=n.length;let u=0,f=Math.ceil(l/r)-1;for(;f-u>1;){const o=Math.floor((u+f)/2);e>n[o*r].left?u=o:f=o}const i=Math.abs(e-n[u*r].left),d=Math.abs(e-n[f*r].left);c=te((i>d?f:u)*r,n,r)}return c};function be({direction:e,nextIndex:n,currentIndex:t,itemsRef:r,slideWidth:a,gap:c,onAnimationStart:l,onAnimationEnd:u}){if(e==="RIGHT"&&n<t){let i=r.current[t].element.closest("ul");i.style.transition="none";const d=I(r.current,a)+a+c;for(let o=t;o>n;o--)r.current[o].element.style.transform=`translateX(${-d}px)`;i.style.transform=`translate3d(${a+c}px, 0, 0)`,l(),requestAnimationFrame(()=>{i.style.transition="",i.style.transform="translate3d(0, 0, 0)",i=null}),i.addEventListener("transitionend",()=>{requestAnimationFrame(()=>{for(let o=t;o>n;o--)r.current[o].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 d=I(r.current,a)+a+c;for(let o=t;o<n;o++)r.current[o].element.style.transform=`translateX(${d}px)`;i.style.transform=`translate3d(${-d}px, 0, 0)`,l(),requestAnimationFrame(()=>{i.style.transition="",i.style.transform=`translate3d(${-d+a+c}px, 0, 0)`,i=null}),i.addEventListener("transitionend",()=>{requestAnimationFrame(()=>{for(let o=t;o<n;o++)r.current[o].element.style.transform="";u()})},{once:!0})}}const ve=(e,n)=>{let t,r,a;return function c(){const{scrollLeft:l}=e;if(a!==l){a=l,t=setTimeout(()=>{r=requestAnimationFrame(c)},90);return}n(a)}(),()=>{clearTimeout(t),cancelAnimationFrame(r)}},Se=typeof window<"u"&&"scrollBehavior"in document.body.style;function ne(e,n,t){if(Se)return e.scrollTo({left:n}),ve(e,t);let r,a,c=requestAnimationFrame(o=>{const{scrollLeft:L}=e,x=n-L,R=450;(function w(p){const b=p-o;if(b>R)return e.scrollLeft=n,l(),t();e.scrollLeft=Te(b/R)*x+L,c=requestAnimationFrame(w)})(o)});return e.addEventListener("touchstart",u),l;function l(){cancelAnimationFrame(c),r===void 0?i():(a&&a(),d())}function u(){l(),r=e.scrollLeft,e.addEventListener("touchend",f)}function f(){d(),r===e.scrollLeft&&(a=ne(e,n,t))}function i(){e.removeEventListener("touchstart",u)}function d(){e.removeEventListener("touchend",f)}}function Te(e){return e<.5?2*e*e:-1+(4-2*e)*e}const Ce=({gap:e=16,itemsPerSlide:n,slideWidth:t,offset:r,activeIndex:a,nextControlDisabled:c,isAutoplayEnabled:l,className:u,itemsRef:f,children:i,onSetActiveIndex:d,onScroll:o})=>{const[L,x]=s.useState(0),[R,w]=s.useState(!1),[p,b]=s.useState(!1),m=s.useRef(null),v=s.useRef(null);s.useEffect(()=>{if(!s.Children.count(i)||!m.current)return;if(R){w(!1);return}const E=m.current;de(E)
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Z=require("../tslib.es6-C4EgNkz1.js"),s=require("react"),q=require("classnames"),ee=require("../icon-C-bWGO-9.js"),W=require("../debounce-BQsYxxOL.js"),le=require("react-dom");require("../array.polyfill.flat-5BAolFdk.js");const ae=require("../reduced-motion-CMIhlQVx.js"),ce=require("../forwardRef-DBQKIlPy.js"),ie={prev:"chevronLeft16",next:"chevronRight16"},ue={prev:"LEFT",next:"RIGHT"},Y=({type:e,label:n,hidden:t,disabled:r,onClick:a})=>{const c=l=>{a(l,{direction:ue[e]})};return s.createElement("button",{className:q("carousel__control",`carousel__control--${e}`),"aria-label":n,"aria-disabled":r,disabled:r,onClick:c},s.createElement(ee.EbayIcon,{className:q("icon",`icon--carousel-${e}`),focusable:!1,name:ie[e],"aria-hidden":t}))};function fe(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 de=e=>getComputedStyle(e).overflowX!=="visible",I=(e,n)=>{if(!e.length)return 0;const t=e[e.length-1];return Math.max(t.right-n,0)||0},he=(e,n,t)=>e.length&&Math.min(e[n].left,I(e,t))||0,me=(e,n,t,r,a,c)=>s.Children.map(e,(l,u)=>{const{style:f={}}=l.props;let i;if(t){const o=t+t%1;i=`calc(${100/o}% - ${(o-1)*c/o}px)`}const d=t?u%t===0:!0;return s.cloneElement(l,{slideWidth:r,offset:a,ref:o=>{n.current[u]=o},className:d?"carousel__snap-point":l.props.className,style:Object.assign(Object.assign({},f),{width:i||f.width,marginRight:c&&u!==s.Children.count(e)-1?`${c}px`:f.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},ye=(e,n,t=e)=>{if(n)return Math.ceil(t/n)},Ee=e=>e==="LEFT"?-1:1,ge=(e,n,t,r,a)=>{let c=n,l;if(e==="LEFT"&&c===0)c=t.length-1;else{do{const u=Ee(e);l=t[c+=u]}while(l&&l.fullyVisible);if(e==="LEFT"&&!a){const u=l.right-r;do l=t[--c];while(l&&l.left>=u);c+=1}}return te(c,t,a)},pe=(e,n,t,r=1,a)=>{let c;if(e>=I(n,t)-a)c=n.length-1;else{const l=n.length;let u=0,f=Math.ceil(l/r)-1;for(;f-u>1;){const o=Math.floor((u+f)/2);e>n[o*r].left?u=o:f=o}const i=Math.abs(e-n[u*r].left),d=Math.abs(e-n[f*r].left);c=te((i>d?f:u)*r,n,r)}return c};function be({direction:e,nextIndex:n,currentIndex:t,itemsRef:r,slideWidth:a,gap:c,onAnimationStart:l,onAnimationEnd:u}){if(e==="RIGHT"&&n<t){let i=r.current[t].element.closest("ul");i.style.transition="none";const d=I(r.current,a)+a+c;for(let o=t;o>n;o--)r.current[o].element.style.transform=`translateX(${-d}px)`;i.style.transform=`translate3d(${a+c}px, 0, 0)`,l(),requestAnimationFrame(()=>{i.style.transition="",i.style.transform="translate3d(0, 0, 0)",i=null}),i.addEventListener("transitionend",()=>{requestAnimationFrame(()=>{for(let o=t;o>n;o--)r.current[o].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 d=I(r.current,a)+a+c;for(let o=t;o<n;o++)r.current[o].element.style.transform=`translateX(${d}px)`;i.style.transform=`translate3d(${-d}px, 0, 0)`,l(),requestAnimationFrame(()=>{i.style.transition="",i.style.transform=`translate3d(${-d+a+c}px, 0, 0)`,i=null}),i.addEventListener("transitionend",()=>{requestAnimationFrame(()=>{for(let o=t;o<n;o++)r.current[o].element.style.transform="";u()})},{once:!0})}}const ve=(e,n)=>{let t,r,a;return function c(){const{scrollLeft:l}=e;if(a!==l){a=l,t=setTimeout(()=>{r=requestAnimationFrame(c)},90);return}n(a)}(),()=>{clearTimeout(t),cancelAnimationFrame(r)}},Se=typeof window<"u"&&"scrollBehavior"in document.body.style;function ne(e,n,t){if(Se)return e.scrollTo({left:n}),ve(e,t);let r,a,c=requestAnimationFrame(o=>{const{scrollLeft:L}=e,x=n-L,R=450;(function w(p){const b=p-o;if(b>R)return e.scrollLeft=n,l(),t();e.scrollLeft=Te(b/R)*x+L,c=requestAnimationFrame(w)})(o)});return e.addEventListener("touchstart",u),l;function l(){cancelAnimationFrame(c),r===void 0?i():(a&&a(),d())}function u(){l(),r=e.scrollLeft,e.addEventListener("touchend",f)}function f(){d(),r===e.scrollLeft&&(a=ne(e,n,t))}function i(){e.removeEventListener("touchstart",u)}function d(){e.removeEventListener("touchend",f)}}function Te(e){return e<.5?2*e*e:-1+(4-2*e)*e}const Ce=({gap:e=16,itemsPerSlide:n,slideWidth:t,offset:r,activeIndex:a,nextControlDisabled:c,isAutoplayEnabled:l,className:u,itemsRef:f,children:i,onSetActiveIndex:d,onScroll:o})=>{const[L,x]=s.useState(0),[R,w]=s.useState(!1),[p,b]=s.useState(!1),m=s.useRef(null),v=s.useRef(null);s.useEffect(()=>{if(!s.Children.count(i)||!m.current)return;if(R){w(!1);return}const E=m.current;if(de(E))return b(!0),ne(E,r,()=>b(!1));x(r)},[r]);const y=s.useCallback(()=>{const _=m.current.scrollLeft,E=pe(_,f.current,t,n,e);E!==a&&(w(!0),d(E),o({index:E}))},[m.current,t,a,d]),M=()=>{v.current&&clearTimeout(v.current),v.current=setTimeout(()=>{p||y()},640)};return s.createElement("div",{className:q("carousel__viewport",{"carousel__viewport--mask":!c&&!l},u)},s.createElement("ul",{className:"carousel__list",ref:m,onScroll:M,style:{transform:`translate3d(${-L}px, 0, 0)`}},me(i,f,n,t,r,e)))},Le=le.flushSync||(e=>e()),Re=e=>{var{gap:n=16,index:t=0,itemsPerSlide:r,a11yPreviousText:a,a11yNextText:c,a11yPauseText:l,a11yPlayText:u,autoplay:f,onScroll:i=()=>{},onNext:d=()=>{},onPrevious:o=()=>{},onSlide:L=()=>{},onPlay:x=()=>{},onPause:R=()=>{},className:w,children:p}=e,b=Z.__rest(e,["gap","index","itemsPerSlide","a11yPreviousText","a11yNextText","a11yPauseText","a11yPlayText","autoplay","onScroll","onNext","onPrevious","onSlide","onPlay","onPause","className","children"]);const[m,v]=s.useState(t),[y,M]=s.useState(0),[_,E]=s.useState(0),[k,D]=s.useState(!1),F=s.useRef(null),S=s.useRef([]),O=s.Children.count(p),T=Math.floor(r)||void 0,j=O<=T,g=!!f,re=j||_===0&&!g,H=j||_===I(S.current,y)&&!g,V=()=>{if(!F.current)return;const{width:h}=F.current.getBoundingClientRect();M(h)};s.useEffect(()=>(window.addEventListener("resize",W.debounce(V,16)),()=>{window.removeEventListener("resize",W.debounce(V,16))}),[]);const[G,X]=s.useState(!1);s.useEffect(()=>{G||E(he(S.current,m,y))},[m,y,G]),s.useEffect(()=>{t>=0&&t<=O-1&&v(t)},[t]),s.useEffect(()=>{S.current=S.current.splice(0,O)},[p]),s.useEffect(()=>{const{width:h}=F.current.getBoundingClientRect();M(h)},[F.current]);const A=ae.useReducedMotion(),[N,U]=s.useState(A);s.useEffect(()=>{U(A)},[A]);const se=h=>{U(!N),N?x(h):R(h)},J=s.useRef(m);J.current=m;const K=(h,C)=>{const P=J.current,z=ge(h,P,S.current,y,C),oe=ye(P,C,z);L({slide:oe}),g&&be({direction:h,nextIndex:z,currentIndex:P,itemsRef:S,slideWidth:y,gap:n,onAnimationStart:()=>X(!0),onAnimationEnd:()=>X(!1)}),Le(()=>v(z))};s.useEffect(()=>{if(!g||N||k)return;const C=setInterval(()=>{K("RIGHT",T)},typeof f=="number"?f:4e3);return()=>clearInterval(C)},[g,N,T,k]);const Q=(h,{direction:C})=>{K(C,T),C==="LEFT"?o(h):d(h)},$=()=>D(!0),B=()=>D(!1);return s.createElement("div",Object.assign({className:q("carousel",w,{"carousel--slides":T,"carousel--peek":T%1===0,carousel__autoplay:g})},b),s.createElement("div",{ref:F,className:"carousel__container",onFocusCapture:$,onMouseEnter:$,onTouchStartCapture:$,onBlurCapture:B,onMouseLeave:B,onTouchEndCapture:B},s.createElement(Y,{label:a,type:"prev",disabled:re,onClick:Q}),s.createElement(Ce,{itemsRef:S,offset:_,gap:n,itemsPerSlide:T,nextControlDisabled:H,isAutoplayEnabled:g,activeIndex:m,onScroll:i,onSetActiveIndex:v,slideWidth:y},p),s.createElement(Y,{type:"next",label:c,disabled:H,onClick:Q}),g?s.createElement("button",{className:"carousel__playback",type:"button",onClick:se,"aria-label":N?u:l},s.createElement(ee.EbayIcon,{name:N?"play24":"pause24"})):null))},we=e=>{var{slideWidth:n,offset:t,forwardedRef:r,children:a}=e,c=Z.__rest(e,["slideWidth","offset","forwardedRef","children"]);const l=s.useRef(null),[u,f]=s.useState(!1);return s.useImperativeHandle(r,()=>{if(!l.current)return;const{left:i,right:d}=fe(l.current),o=i===void 0||i-t>=-.01&&d-t<=n+.01;return f(o),{element:l.current,left:i,right:d,fullyVisible:o}},[n,t]),s.createElement("li",Object.assign({},c,{ref:l,"aria-hidden":!u}),a)},_e=ce.withForwardRef(we);exports.EbayCarousel=Re;exports.EbayCarouselItem=_e;
|