UNPKG

@azfar_razzaq/react-infinite-carousel

Version:

This package provides a react component to render an infinite carousel

24 lines (23 loc) 9.08 kB
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".carousel-container{width:100%;position:relative;overflow-x:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0px,black var(--fade-px),black calc(100% - var(--fade-px)),transparent 100%);mask-image:linear-gradient(to right,transparent 0px,black var(--fade-px),black calc(100% - var(--fade-px)),transparent 100%);mask-mode:alpha;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.track{display:inline-flex;flex:0 0 auto;width:max-content;white-space:nowrap;animation:scroll var(--marquee-duration, 20s) linear infinite}.track--ltr{animation-direction:reverse}@keyframes scroll{0%{transform:translate(0)}to{transform:translate(-50%)}}.marquee-lane{display:inline-flex;flex:0 0 auto;white-space:nowrap}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})(); (function(u,m){typeof exports=="object"&&typeof module<"u"?module.exports=m(require("react")):typeof define=="function"&&define.amd?define(["react"],m):(u=typeof globalThis<"u"?globalThis:u||self,u.Carousel=m(u.React))})(this,function(u){"use strict";var m={exports:{}},y={};/** * @license React * react-jsx-runtime.production.js * * Copyright (c) Meta Platforms, Inc. and affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */var B;function re(){if(B)return y;B=1;var i=Symbol.for("react.transitional.element"),E=Symbol.for("react.fragment");function R(f,n,a){var v=null;if(a!==void 0&&(v=""+a),n.key!==void 0&&(v=""+n.key),"key"in n){a={};for(var p in n)p!=="key"&&(a[p]=n[p])}else a=n;return n=a.ref,{$$typeof:i,type:f,key:v,ref:n!==void 0?n:null,props:a}}return y.Fragment=E,y.jsx=R,y.jsxs=R,y}var A={};/** * @license React * react-jsx-runtime.development.js * * Copyright (c) Meta Platforms, Inc. and affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */var G;function te(){return G||(G=1,process.env.NODE_ENV!=="production"&&function(){function i(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===x?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case w:return"Fragment";case D:return"Profiler";case Y:return"StrictMode";case F:return"Suspense";case I:return"SuspenseList";case _:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case N:return"Portal";case L:return(e.displayName||"Context")+".Provider";case W:return(e._context.displayName||"Context")+".Consumer";case M:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case o:return r=e.displayName||null,r!==null?r:i(e.type)||"Memo";case l:r=e._payload,e=e._init;try{return i(e(r))}catch{}}return null}function E(e){return""+e}function R(e){try{E(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,s=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",s),E(e)}}function f(e){if(e===w)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===l)return"<...>";try{var r=i(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function n(){var e=O.A;return e===null?null:e.getOwner()}function a(){return Error("react-stack-top-frame")}function v(e){if(H.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function p(e,r){function t(){Z||(Z=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function g(){var e=i(this.type);return Q[e]||(Q[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function j(e,r,t,s,T,d,U,J){return t=d.ref,e={$$typeof:b,type:e,key:r,props:d,_owner:T},(t!==void 0?t:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:g}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:U}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:J}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function k(e,r,t,s,T,d,U,J){var c=r.children;if(c!==void 0)if(s)if(ae(c)){for(s=0;s<c.length;s++)C(c[s]);Object.freeze&&Object.freeze(c)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else C(c);if(H.call(r,"key")){c=i(e);var S=Object.keys(r).filter(function(se){return se!=="key"});s=0<S.length?"{key: someKey, "+S.join(": ..., ")+": ...}":"{key: someKey}",ee[c+s]||(S=0<S.length?"{"+S.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX: let props = %s; <%s {...props} /> React keys must be passed directly to JSX without using spread: let props = %s; <%s key={someKey} {...props} />`,s,c,S,c),ee[c+s]=!0)}if(c=null,t!==void 0&&(R(t),c=""+t),v(r)&&(R(r.key),c=""+r.key),"key"in r){t={};for(var V in r)V!=="key"&&(t[V]=r[V])}else t=r;return c&&p(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),j(e,c,d,T,n(),t,U,J)}function C(e){typeof e=="object"&&e!==null&&e.$$typeof===b&&e._store&&(e._store.validated=1)}var h=u,b=Symbol.for("react.transitional.element"),N=Symbol.for("react.portal"),w=Symbol.for("react.fragment"),Y=Symbol.for("react.strict_mode"),D=Symbol.for("react.profiler"),W=Symbol.for("react.consumer"),L=Symbol.for("react.context"),M=Symbol.for("react.forward_ref"),F=Symbol.for("react.suspense"),I=Symbol.for("react.suspense_list"),o=Symbol.for("react.memo"),l=Symbol.for("react.lazy"),_=Symbol.for("react.activity"),x=Symbol.for("react.client.reference"),O=h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,H=Object.prototype.hasOwnProperty,ae=Array.isArray,z=console.createTask?console.createTask:function(){return null};h={"react-stack-bottom-frame":function(e){return e()}};var Z,Q={},$=h["react-stack-bottom-frame"].bind(h,a)(),K=z(f(a)),ee={};A.Fragment=w,A.jsx=function(e,r,t,s,T){var d=1e4>O.recentlyCreatedOwnerStacks++;return k(e,r,t,!1,s,T,d?Error("react-stack-top-frame"):$,d?z(f(e)):K)},A.jsxs=function(e,r,t,s,T){var d=1e4>O.recentlyCreatedOwnerStacks++;return k(e,r,t,!0,s,T,d?Error("react-stack-top-frame"):$,d?z(f(e)):K)}}()),A}var X;function ne(){return X||(X=1,process.env.NODE_ENV==="production"?m.exports=re():m.exports=te()),m.exports}var P=ne();const q=(i=[],E)=>[...i].sort((n,a)=>n.breakpoint-a.breakpoint).find(n=>E<=n.breakpoint)?.numOfCopies;function oe(i){const{durationPerClone:E=10,animationDirection:R="rtl",hoverSpeedFactor:f=1,numOfCopies:n,responsiveClones:a,className:v,fade:p}=i,g=u.useRef(null),j=u.useRef(null),k=u.useRef(null),C=typeof window>"u"?1024:window.innerWidth,h=q(a,C),[b,N]=u.useState(()=>h??n??2),[w,Y]=u.useState(()=>!h&&typeof n!="number"),D=E*b;u.useEffect(()=>{if(!a?.length)return;const o=()=>{const _=q(a,window.innerWidth)??(typeof n=="number"?n:null);_!==null?(Y(!1),N(_)):Y(!0)};return o(),window.addEventListener("resize",o,{passive:!0}),()=>window.removeEventListener("resize",o)},[a,n]),u.useLayoutEffect(()=>{if(!w||!k.current||!j.current)return;const o=()=>{const _=k.current.offsetWidth,x=j.current.scrollWidth;if(x===0)return;const O=Math.max(2,Math.ceil(_/x)+1);O!==b&&N(O)};o();const l=new ResizeObserver(o);return l.observe(k.current),()=>l.disconnect()},[w,b]);const[W,L]=u.useState(!1);u.useEffect(()=>{const o=g.current?.getAnimations()[0];o&&(W?f===0?o.pause():(o.playbackRate=f,o.play()):(o.playbackRate=1,o.play()))},[W,f]);const M=(o,l)=>P.jsx("div",{ref:l?j:void 0,className:"marquee-lane",children:i.itemType==="images"?i.images_links.map((_,x)=>P.jsx("img",{src:_,className:v},`img-${o}-${x}`)):P.jsx("span",{className:v,children:i.text})},`lane-${o}`),F=Array.from({length:b},(o,l)=>M(l,l===0)),I=R==="ltr"?"track--ltr":"";return P.jsx("div",{ref:k,style:p?{"--fade-px":`${p}px`}:void 0,className:"carousel-container",children:P.jsxs("div",{ref:g,className:`track ${I}`,style:{"--marquee-duration":`${D}s`},onMouseEnter:()=>L(!0),onMouseLeave:()=>L(!1),children:[F,F]},b)})}return oe});