@zhou96/marquee
Version:
A React marquee component
685 lines (682 loc) • 22.6 kB
JavaScript
import Ye, { useRef as Ae, useState as z, useMemo as Fe, useEffect as pr } from "react";
var ie = { exports: {} }, Y = {};
/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var $e;
function hr() {
if ($e) return Y;
$e = 1;
var D = Ye, S = Symbol.for("react.element"), A = Symbol.for("react.fragment"), y = Object.prototype.hasOwnProperty, C = D.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, O = { key: !0, ref: !0, __self: !0, __source: !0 };
function R(_, c, m) {
var d, g = {}, E = null, x = null;
m !== void 0 && (E = "" + m), c.key !== void 0 && (E = "" + c.key), c.ref !== void 0 && (x = c.ref);
for (d in c) y.call(c, d) && !O.hasOwnProperty(d) && (g[d] = c[d]);
if (_ && _.defaultProps) for (d in c = _.defaultProps, c) g[d] === void 0 && (g[d] = c[d]);
return { $$typeof: S, type: _, key: E, ref: x, props: g, _owner: C.current };
}
return Y.Fragment = A, Y.jsx = R, Y.jsxs = R, Y;
}
var L = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var We;
function _r() {
return We || (We = 1, process.env.NODE_ENV !== "production" && function() {
var D = Ye, S = Symbol.for("react.element"), A = Symbol.for("react.portal"), y = Symbol.for("react.fragment"), C = Symbol.for("react.strict_mode"), O = Symbol.for("react.profiler"), R = Symbol.for("react.provider"), _ = Symbol.for("react.context"), c = Symbol.for("react.forward_ref"), m = Symbol.for("react.suspense"), d = Symbol.for("react.suspense_list"), g = Symbol.for("react.memo"), E = Symbol.for("react.lazy"), x = Symbol.for("react.offscreen"), M = Symbol.iterator, V = "@@iterator";
function U(e) {
if (e === null || typeof e != "object")
return null;
var r = M && e[M] || e[V];
return typeof r == "function" ? r : null;
}
var b = D.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
function f(e) {
{
for (var r = arguments.length, t = new Array(r > 1 ? r - 1 : 0), n = 1; n < r; n++)
t[n - 1] = arguments[n];
F("error", e, t);
}
}
function F(e, r, t) {
{
var n = b.ReactDebugCurrentFrame, o = n.getStackAddendum();
o !== "" && (r += "%s", t = t.concat([o]));
var u = t.map(function(i) {
return String(i);
});
u.unshift("Warning: " + r), Function.prototype.apply.call(console[e], console, u);
}
}
var $ = !1, N = !1, oe = !1, ue = !1, X = !1, se;
se = Symbol.for("react.module.reference");
function Le(e) {
return !!(typeof e == "string" || typeof e == "function" || e === y || e === O || X || e === C || e === m || e === d || ue || e === x || $ || N || oe || typeof e == "object" && e !== null && (e.$$typeof === E || e.$$typeof === g || e.$$typeof === R || e.$$typeof === _ || e.$$typeof === c || // This needs to include all possible module reference object
// types supported by any Flight configuration anywhere since
// we don't know which Flight build this will end up being used
// with.
e.$$typeof === se || e.getModuleId !== void 0));
}
function Me(e, r, t) {
var n = e.displayName;
if (n)
return n;
var o = r.displayName || r.name || "";
return o !== "" ? t + "(" + o + ")" : t;
}
function le(e) {
return e.displayName || "Context";
}
function T(e) {
if (e == null)
return null;
if (typeof e.tag == "number" && f("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
return e.displayName || e.name || null;
if (typeof e == "string")
return e;
switch (e) {
case y:
return "Fragment";
case A:
return "Portal";
case O:
return "Profiler";
case C:
return "StrictMode";
case m:
return "Suspense";
case d:
return "SuspenseList";
}
if (typeof e == "object")
switch (e.$$typeof) {
case _:
var r = e;
return le(r) + ".Consumer";
case R:
var t = e;
return le(t._context) + ".Provider";
case c:
return Me(e, e.render, "ForwardRef");
case g:
var n = e.displayName || null;
return n !== null ? n : T(e.type) || "Memo";
case E: {
var o = e, u = o._payload, i = o._init;
try {
return T(i(u));
} catch {
return null;
}
}
}
return null;
}
var w = Object.assign, W = 0, ce, fe, de, ve, pe, he, _e;
function ge() {
}
ge.__reactDisabledLog = !0;
function Ve() {
{
if (W === 0) {
ce = console.log, fe = console.info, de = console.warn, ve = console.error, pe = console.group, he = console.groupCollapsed, _e = console.groupEnd;
var e = {
configurable: !0,
enumerable: !0,
value: ge,
writable: !0
};
Object.defineProperties(console, {
info: e,
log: e,
warn: e,
error: e,
group: e,
groupCollapsed: e,
groupEnd: e
});
}
W++;
}
}
function Ue() {
{
if (W--, W === 0) {
var e = {
configurable: !0,
enumerable: !0,
writable: !0
};
Object.defineProperties(console, {
log: w({}, e, {
value: ce
}),
info: w({}, e, {
value: fe
}),
warn: w({}, e, {
value: de
}),
error: w({}, e, {
value: ve
}),
group: w({}, e, {
value: pe
}),
groupCollapsed: w({}, e, {
value: he
}),
groupEnd: w({}, e, {
value: _e
})
});
}
W < 0 && f("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
}
}
var H = b.ReactCurrentDispatcher, Z;
function q(e, r, t) {
{
if (Z === void 0)
try {
throw Error();
} catch (o) {
var n = o.stack.trim().match(/\n( *(at )?)/);
Z = n && n[1] || "";
}
return `
` + Z + e;
}
}
var Q = !1, B;
{
var Ne = typeof WeakMap == "function" ? WeakMap : Map;
B = new Ne();
}
function me(e, r) {
if (!e || Q)
return "";
{
var t = B.get(e);
if (t !== void 0)
return t;
}
var n;
Q = !0;
var o = Error.prepareStackTrace;
Error.prepareStackTrace = void 0;
var u;
u = H.current, H.current = null, Ve();
try {
if (r) {
var i = function() {
throw Error();
};
if (Object.defineProperty(i.prototype, "props", {
set: function() {
throw Error();
}
}), typeof Reflect == "object" && Reflect.construct) {
try {
Reflect.construct(i, []);
} catch (p) {
n = p;
}
Reflect.construct(e, [], i);
} else {
try {
i.call();
} catch (p) {
n = p;
}
e.call(i.prototype);
}
} else {
try {
throw Error();
} catch (p) {
n = p;
}
e();
}
} catch (p) {
if (p && n && typeof p.stack == "string") {
for (var a = p.stack.split(`
`), v = n.stack.split(`
`), s = a.length - 1, l = v.length - 1; s >= 1 && l >= 0 && a[s] !== v[l]; )
l--;
for (; s >= 1 && l >= 0; s--, l--)
if (a[s] !== v[l]) {
if (s !== 1 || l !== 1)
do
if (s--, l--, l < 0 || a[s] !== v[l]) {
var h = `
` + a[s].replace(" at new ", " at ");
return e.displayName && h.includes("<anonymous>") && (h = h.replace("<anonymous>", e.displayName)), typeof e == "function" && B.set(e, h), h;
}
while (s >= 1 && l >= 0);
break;
}
}
} finally {
Q = !1, H.current = u, Ue(), Error.prepareStackTrace = o;
}
var k = e ? e.displayName || e.name : "", P = k ? q(k) : "";
return typeof e == "function" && B.set(e, P), P;
}
function qe(e, r, t) {
return me(e, !1);
}
function Be(e) {
var r = e.prototype;
return !!(r && r.isReactComponent);
}
function J(e, r, t) {
if (e == null)
return "";
if (typeof e == "function")
return me(e, Be(e));
if (typeof e == "string")
return q(e);
switch (e) {
case m:
return q("Suspense");
case d:
return q("SuspenseList");
}
if (typeof e == "object")
switch (e.$$typeof) {
case c:
return qe(e.render);
case g:
return J(e.type, r, t);
case E: {
var n = e, o = n._payload, u = n._init;
try {
return J(u(o), r, t);
} catch {
}
}
}
return "";
}
var I = Object.prototype.hasOwnProperty, ye = {}, Ee = b.ReactDebugCurrentFrame;
function K(e) {
if (e) {
var r = e._owner, t = J(e.type, e._source, r ? r.type : null);
Ee.setExtraStackFrame(t);
} else
Ee.setExtraStackFrame(null);
}
function Je(e, r, t, n, o) {
{
var u = Function.call.bind(I);
for (var i in e)
if (u(e, i)) {
var a = void 0;
try {
if (typeof e[i] != "function") {
var v = Error((n || "React class") + ": " + t + " type `" + i + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[i] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
throw v.name = "Invariant Violation", v;
}
a = e[i](r, i, n, t, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
} catch (s) {
a = s;
}
a && !(a instanceof Error) && (K(o), f("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", n || "React class", t, i, typeof a), K(null)), a instanceof Error && !(a.message in ye) && (ye[a.message] = !0, K(o), f("Failed %s type: %s", t, a.message), K(null));
}
}
}
var Ke = Array.isArray;
function ee(e) {
return Ke(e);
}
function ze(e) {
{
var r = typeof Symbol == "function" && Symbol.toStringTag, t = r && e[Symbol.toStringTag] || e.constructor.name || "Object";
return t;
}
}
function Ge(e) {
try {
return Re(e), !1;
} catch {
return !0;
}
}
function Re(e) {
return "" + e;
}
function be(e) {
if (Ge(e))
return f("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", ze(e)), Re(e);
}
var Te = b.ReactCurrentOwner, Xe = {
key: !0,
ref: !0,
__self: !0,
__source: !0
}, Se, Ce;
function He(e) {
if (I.call(e, "ref")) {
var r = Object.getOwnPropertyDescriptor(e, "ref").get;
if (r && r.isReactWarning)
return !1;
}
return e.ref !== void 0;
}
function Ze(e) {
if (I.call(e, "key")) {
var r = Object.getOwnPropertyDescriptor(e, "key").get;
if (r && r.isReactWarning)
return !1;
}
return e.key !== void 0;
}
function Qe(e, r) {
typeof e.ref == "string" && Te.current;
}
function er(e, r) {
{
var t = function() {
Se || (Se = !0, f("%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://reactjs.org/link/special-props)", r));
};
t.isReactWarning = !0, Object.defineProperty(e, "key", {
get: t,
configurable: !0
});
}
}
function rr(e, r) {
{
var t = function() {
Ce || (Ce = !0, f("%s: `ref` 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://reactjs.org/link/special-props)", r));
};
t.isReactWarning = !0, Object.defineProperty(e, "ref", {
get: t,
configurable: !0
});
}
}
var tr = function(e, r, t, n, o, u, i) {
var a = {
// This tag allows us to uniquely identify this as a React Element
$$typeof: S,
// Built-in properties that belong on the element
type: e,
key: r,
ref: t,
props: i,
// Record the component responsible for creating this element.
_owner: u
};
return a._store = {}, Object.defineProperty(a._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: !1
}), Object.defineProperty(a, "_self", {
configurable: !1,
enumerable: !1,
writable: !1,
value: n
}), Object.defineProperty(a, "_source", {
configurable: !1,
enumerable: !1,
writable: !1,
value: o
}), Object.freeze && (Object.freeze(a.props), Object.freeze(a)), a;
};
function nr(e, r, t, n, o) {
{
var u, i = {}, a = null, v = null;
t !== void 0 && (be(t), a = "" + t), Ze(r) && (be(r.key), a = "" + r.key), He(r) && (v = r.ref, Qe(r, o));
for (u in r)
I.call(r, u) && !Xe.hasOwnProperty(u) && (i[u] = r[u]);
if (e && e.defaultProps) {
var s = e.defaultProps;
for (u in s)
i[u] === void 0 && (i[u] = s[u]);
}
if (a || v) {
var l = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
a && er(i, l), v && rr(i, l);
}
return tr(e, a, v, o, n, Te.current, i);
}
}
var re = b.ReactCurrentOwner, Oe = b.ReactDebugCurrentFrame;
function j(e) {
if (e) {
var r = e._owner, t = J(e.type, e._source, r ? r.type : null);
Oe.setExtraStackFrame(t);
} else
Oe.setExtraStackFrame(null);
}
var te;
te = !1;
function ne(e) {
return typeof e == "object" && e !== null && e.$$typeof === S;
}
function we() {
{
if (re.current) {
var e = T(re.current.type);
if (e)
return `
Check the render method of \`` + e + "`.";
}
return "";
}
}
function ar(e) {
return "";
}
var Pe = {};
function ir(e) {
{
var r = we();
if (!r) {
var t = typeof e == "string" ? e : e.displayName || e.name;
t && (r = `
Check the top-level render call using <` + t + ">.");
}
return r;
}
}
function xe(e, r) {
{
if (!e._store || e._store.validated || e.key != null)
return;
e._store.validated = !0;
var t = ir(r);
if (Pe[t])
return;
Pe[t] = !0;
var n = "";
e && e._owner && e._owner !== re.current && (n = " It was passed a child from " + T(e._owner.type) + "."), j(e), f('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', t, n), j(null);
}
}
function je(e, r) {
{
if (typeof e != "object")
return;
if (ee(e))
for (var t = 0; t < e.length; t++) {
var n = e[t];
ne(n) && xe(n, r);
}
else if (ne(e))
e._store && (e._store.validated = !0);
else if (e) {
var o = U(e);
if (typeof o == "function" && o !== e.entries)
for (var u = o.call(e), i; !(i = u.next()).done; )
ne(i.value) && xe(i.value, r);
}
}
}
function or(e) {
{
var r = e.type;
if (r == null || typeof r == "string")
return;
var t;
if (typeof r == "function")
t = r.propTypes;
else if (typeof r == "object" && (r.$$typeof === c || // Note: Memo only checks outer props here.
// Inner props are checked in the reconciler.
r.$$typeof === g))
t = r.propTypes;
else
return;
if (t) {
var n = T(r);
Je(t, e.props, "prop", n, e);
} else if (r.PropTypes !== void 0 && !te) {
te = !0;
var o = T(r);
f("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", o || "Unknown");
}
typeof r.getDefaultProps == "function" && !r.getDefaultProps.isReactClassApproved && f("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
}
}
function ur(e) {
{
for (var r = Object.keys(e.props), t = 0; t < r.length; t++) {
var n = r[t];
if (n !== "children" && n !== "key") {
j(e), f("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", n), j(null);
break;
}
}
e.ref !== null && (j(e), f("Invalid attribute `ref` supplied to `React.Fragment`."), j(null));
}
}
var ke = {};
function De(e, r, t, n, o, u) {
{
var i = Le(e);
if (!i) {
var a = "";
(e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (a += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
var v = ar();
v ? a += v : a += we();
var s;
e === null ? s = "null" : ee(e) ? s = "array" : e !== void 0 && e.$$typeof === S ? (s = "<" + (T(e.type) || "Unknown") + " />", a = " Did you accidentally export a JSX literal instead of a component?") : s = typeof e, f("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", s, a);
}
var l = nr(e, r, t, o, u);
if (l == null)
return l;
if (i) {
var h = r.children;
if (h !== void 0)
if (n)
if (ee(h)) {
for (var k = 0; k < h.length; k++)
je(h[k], e);
Object.freeze && Object.freeze(h);
} else
f("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
je(h, e);
}
if (I.call(r, "key")) {
var P = T(e), p = Object.keys(r).filter(function(vr) {
return vr !== "key";
}), ae = p.length > 0 ? "{key: someKey, " + p.join(": ..., ") + ": ...}" : "{key: someKey}";
if (!ke[P + ae]) {
var dr = p.length > 0 ? "{" + p.join(": ..., ") + ": ...}" : "{}";
f(`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} />`, ae, P, dr, P), ke[P + ae] = !0;
}
}
return e === y ? ur(l) : or(l), l;
}
}
function sr(e, r, t) {
return De(e, r, t, !0);
}
function lr(e, r, t) {
return De(e, r, t, !1);
}
var cr = lr, fr = sr;
L.Fragment = y, L.jsx = cr, L.jsxs = fr;
}()), L;
}
process.env.NODE_ENV === "production" ? ie.exports = hr() : ie.exports = _r();
var Ie = ie.exports;
const gr = "_container_3y29l_1", mr = "_textContent_3y29l_8", yr = "_animate_3y29l_13", Er = "_animateRight_3y29l_17", G = {
container: gr,
textContent: mr,
animate: yr,
animateRight: Er
}, br = ({
children: D,
className: S = "",
style: A = {},
speed: y = 20,
pauseOnHover: C = !0,
direction: O = "left",
overflowOnly: R = !0
}) => {
const _ = Ae(null), c = Ae(null), [m, d] = z(!1), [g, E] = z(0), [x, M] = z(0), [V, U] = z(!1), b = Fe(() => V && C, [V, C]), f = Fe(() => m ? O === "right" ? G.animateRight : G.animate : "", [m, O]);
return pr(() => {
const F = () => {
if (_.current && c.current) {
const $ = _.current.offsetWidth, N = c.current.offsetWidth;
if (R ? N > $ : !0) {
const X = ($ + N) / y;
M($), E(X), d(!0);
} else
d(!1);
}
};
return F(), window.addEventListener("resize", F), () => window.removeEventListener("resize", F);
}, [y, R]), /* @__PURE__ */ Ie.jsx(
"div",
{
ref: _,
className: `${G.container} ${S}`,
style: A,
onMouseEnter: () => U(!0),
onMouseLeave: () => U(!1),
children: /* @__PURE__ */ Ie.jsx(
"div",
{
ref: c,
className: `${G.textContent} ${f}`,
style: {
...m && {
"--animation-duration": `${g}s`,
"--container-width": x + "px",
animationPlayState: b ? "paused" : "running"
}
},
children: D
}
)
}
);
};
export {
br as Marquee,
br as default
};