@azfar_razzaq/react-infinite-carousel
Version:
This package provides a react component to render an infinite carousel
364 lines (363 loc) • 12.4 kB
JavaScript
(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)}})();
import ae, { useRef as U, useState as J, useEffect as Q, useLayoutEffect as se } from "react";
var W = { exports: {} }, A = {};
/**
* @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 K;
function ce() {
if (K) return A;
K = 1;
var u = Symbol.for("react.transitional.element"), d = Symbol.for("react.fragment");
function m(l, n, a) {
var E = null;
if (a !== void 0 && (E = "" + a), n.key !== void 0 && (E = "" + n.key), "key" in n) {
a = {};
for (var v in n)
v !== "key" && (a[v] = n[v]);
} else a = n;
return n = a.ref, {
$$typeof: u,
type: l,
key: E,
ref: n !== void 0 ? n : null,
props: a
};
}
return A.Fragment = d, A.jsx = m, A.jsxs = m, A;
}
var P = {};
/**
* @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 ee;
function ue() {
return ee || (ee = 1, process.env.NODE_ENV !== "production" && function() {
function u(e) {
if (e == null) return null;
if (typeof e == "function")
return e.$$typeof === h ? null : e.displayName || e.name || null;
if (typeof e == "string") return e;
switch (e) {
case k:
return "Fragment";
case L:
return "Profiler";
case C:
return "StrictMode";
case Y:
return "Suspense";
case D:
return "SuspenseList";
case b:
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 j:
return "Portal";
case $:
return (e.displayName || "Context") + ".Provider";
case N:
return (e._context.displayName || "Context") + ".Consumer";
case F:
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 : u(e.type) || "Memo";
case i:
r = e._payload, e = e._init;
try {
return u(e(r));
} catch {
}
}
return null;
}
function d(e) {
return "" + e;
}
function m(e) {
try {
d(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
), d(e);
}
}
function l(e) {
if (e === k) return "<>";
if (typeof e == "object" && e !== null && e.$$typeof === i)
return "<...>";
try {
var r = u(e);
return r ? "<" + r + ">" : "<...>";
} catch {
return "<...>";
}
}
function n() {
var e = w.A;
return e === null ? null : e.getOwner();
}
function a() {
return Error("react-stack-top-frame");
}
function E(e) {
if (V.call(e, "key")) {
var r = Object.getOwnPropertyDescriptor(e, "key").get;
if (r && r.isReactWarning) return !1;
}
return e.key !== void 0;
}
function v(e, r) {
function t() {
B || (B = !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 y() {
var e = u(this.type);
return G[e] || (G[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 x(e, r, t, s, p, f, I, q) {
return t = f.ref, e = {
$$typeof: R,
type: e,
key: r,
props: f,
_owner: p
}, (t !== void 0 ? t : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: y
}) : 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: I
}), Object.defineProperty(e, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: q
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function _(e, r, t, s, p, f, I, q) {
var c = r.children;
if (c !== void 0)
if (s)
if (ne(c)) {
for (s = 0; s < c.length; s++)
g(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 g(c);
if (V.call(r, "key")) {
c = u(e);
var O = Object.keys(r).filter(function(oe) {
return oe !== "key";
});
s = 0 < O.length ? "{key: someKey, " + O.join(": ..., ") + ": ...}" : "{key: someKey}", Z[c + s] || (O = 0 < O.length ? "{" + O.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,
O,
c
), Z[c + s] = !0);
}
if (c = null, t !== void 0 && (m(t), c = "" + t), E(r) && (m(r.key), c = "" + r.key), "key" in r) {
t = {};
for (var z in r)
z !== "key" && (t[z] = r[z]);
} else t = r;
return c && v(
t,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), x(
e,
c,
f,
p,
n(),
t,
I,
q
);
}
function g(e) {
typeof e == "object" && e !== null && e.$$typeof === R && e._store && (e._store.validated = 1);
}
var T = ae, R = Symbol.for("react.transitional.element"), j = Symbol.for("react.portal"), k = Symbol.for("react.fragment"), C = Symbol.for("react.strict_mode"), L = Symbol.for("react.profiler"), N = Symbol.for("react.consumer"), $ = Symbol.for("react.context"), F = Symbol.for("react.forward_ref"), Y = Symbol.for("react.suspense"), D = Symbol.for("react.suspense_list"), o = Symbol.for("react.memo"), i = Symbol.for("react.lazy"), b = Symbol.for("react.activity"), h = Symbol.for("react.client.reference"), w = T.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, V = Object.prototype.hasOwnProperty, ne = Array.isArray, M = console.createTask ? console.createTask : function() {
return null;
};
T = {
"react-stack-bottom-frame": function(e) {
return e();
}
};
var B, G = {}, X = T["react-stack-bottom-frame"].bind(
T,
a
)(), H = M(l(a)), Z = {};
P.Fragment = k, P.jsx = function(e, r, t, s, p) {
var f = 1e4 > w.recentlyCreatedOwnerStacks++;
return _(
e,
r,
t,
!1,
s,
p,
f ? Error("react-stack-top-frame") : X,
f ? M(l(e)) : H
);
}, P.jsxs = function(e, r, t, s, p) {
var f = 1e4 > w.recentlyCreatedOwnerStacks++;
return _(
e,
r,
t,
!0,
s,
p,
f ? Error("react-stack-top-frame") : X,
f ? M(l(e)) : H
);
};
}()), P;
}
var re;
function ie() {
return re || (re = 1, process.env.NODE_ENV === "production" ? W.exports = ce() : W.exports = ue()), W.exports;
}
var S = ie();
const te = (u = [], d) => [...u].sort((n, a) => n.breakpoint - a.breakpoint).find((n) => d <= n.breakpoint)?.numOfCopies;
function fe(u) {
const {
durationPerClone: d = 10,
animationDirection: m = "rtl",
hoverSpeedFactor: l = 1,
numOfCopies: n,
responsiveClones: a,
className: E,
fade: v
} = u, y = U(null), x = U(null), _ = U(null), g = typeof window > "u" ? 1024 : window.innerWidth, T = te(a, g), [R, j] = J(() => T ?? n ?? 2), [k, C] = J(() => !T && typeof n != "number"), L = d * R;
Q(() => {
if (!a?.length) return;
const o = () => {
const b = te(
a,
window.innerWidth
) ?? (typeof n == "number" ? n : null);
b !== null ? (C(!1), j(b)) : C(!0);
};
return o(), window.addEventListener("resize", o, { passive: !0 }), () => window.removeEventListener("resize", o);
}, [a, n]), se(() => {
if (!k || !_.current || !x.current) return;
const o = () => {
const b = _.current.offsetWidth, h = x.current.scrollWidth;
if (h === 0) return;
const w = Math.max(2, Math.ceil(b / h) + 1);
w !== R && j(w);
};
o();
const i = new ResizeObserver(o);
return i.observe(_.current), () => i.disconnect();
}, [k, R]);
const [N, $] = J(!1);
Q(() => {
const o = y.current?.getAnimations()[0];
o && (N ? l === 0 ? o.pause() : (o.playbackRate = l, o.play()) : (o.playbackRate = 1, o.play()));
}, [N, l]);
const F = (o, i) => /* @__PURE__ */ S.jsx(
"div",
{
ref: i ? x : void 0,
className: "marquee-lane",
children: u.itemType === "images" ? u.images_links.map((b, h) => /* @__PURE__ */ S.jsx("img", { src: b, className: E }, `img-${o}-${h}`)) : /* @__PURE__ */ S.jsx("span", { className: E, children: u.text })
},
`lane-${o}`
), Y = Array.from(
{ length: R },
(o, i) => F(i, i === 0)
), D = m === "ltr" ? "track--ltr" : "";
return /* @__PURE__ */ S.jsx(
"div",
{
ref: _,
style: v ? {
"--fade-px": `${v}px`
} : void 0,
className: "carousel-container",
children: /* @__PURE__ */ S.jsxs(
"div",
{
ref: y,
className: `track ${D}`,
style: {
"--marquee-duration": `${L}s`
},
onMouseEnter: () => $(!0),
onMouseLeave: () => $(!1),
children: [
Y,
Y
]
},
R
)
}
);
}
export {
fe as default
};