bear-react-vertical-marquee
Version:
Most modern vertical marquee with hardware accelerated transitions for ReactJS
1,031 lines (1,027 loc) • 33.3 kB
JavaScript
var yt = Object.defineProperty;
var xt = (a, o, r) => o in a ? yt(a, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : a[o] = r;
var b = (a, o, r) => (xt(a, typeof o != "symbol" ? o + "" : o, r), r);
import * as F from "react";
import Me from "react";
var O = {}, _t = {
get exports() {
return O;
},
set exports(a) {
O = a;
}
}, $ = {};
/**
* @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 ke;
function Rt() {
if (ke)
return $;
ke = 1;
var a = Me, o = Symbol.for("react.element"), r = Symbol.for("react.fragment"), s = Object.prototype.hasOwnProperty, m = a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, _ = { key: !0, ref: !0, __self: !0, __source: !0 };
function f(y, d, x) {
var h, T = {}, P = null, S = null;
x !== void 0 && (P = "" + x), d.key !== void 0 && (P = "" + d.key), d.ref !== void 0 && (S = d.ref);
for (h in d)
s.call(d, h) && !_.hasOwnProperty(h) && (T[h] = d[h]);
if (y && y.defaultProps)
for (h in d = y.defaultProps, d)
T[h] === void 0 && (T[h] = d[h]);
return { $$typeof: o, type: y, key: P, ref: S, props: T, _owner: m.current };
}
return $.Fragment = r, $.jsx = f, $.jsxs = f, $;
}
var W = {};
/**
* @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 je;
function Et() {
return je || (je = 1, process.env.NODE_ENV !== "production" && function() {
var a = Me, o = Symbol.for("react.element"), r = Symbol.for("react.portal"), s = Symbol.for("react.fragment"), m = Symbol.for("react.strict_mode"), _ = Symbol.for("react.profiler"), f = Symbol.for("react.provider"), y = Symbol.for("react.context"), d = Symbol.for("react.forward_ref"), x = Symbol.for("react.suspense"), h = Symbol.for("react.suspense_list"), T = Symbol.for("react.memo"), P = Symbol.for("react.lazy"), S = Symbol.for("react.offscreen"), se = Symbol.iterator, $e = "@@iterator";
function We(e) {
if (e === null || typeof e != "object")
return null;
var t = se && e[se] || e[$e];
return typeof t == "function" ? t : null;
}
var k = a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
function R(e) {
{
for (var t = arguments.length, n = new Array(t > 1 ? t - 1 : 0), i = 1; i < t; i++)
n[i - 1] = arguments[i];
Ue("error", e, n);
}
}
function Ue(e, t, n) {
{
var i = k.ReactDebugCurrentFrame, l = i.getStackAddendum();
l !== "" && (t += "%s", n = n.concat([l]));
var v = n.map(function(c) {
return String(c);
});
v.unshift("Warning: " + t), Function.prototype.apply.call(console[e], console, v);
}
}
var Ye = !1, Le = !1, Ve = !1, qe = !1, Be = !1, ue;
ue = Symbol.for("react.module.reference");
function Ge(e) {
return !!(typeof e == "string" || typeof e == "function" || e === s || e === _ || Be || e === m || e === x || e === h || qe || e === S || Ye || Le || Ve || typeof e == "object" && e !== null && (e.$$typeof === P || e.$$typeof === T || e.$$typeof === f || e.$$typeof === y || e.$$typeof === d || // 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 === ue || e.getModuleId !== void 0));
}
function Je(e, t, n) {
var i = e.displayName;
if (i)
return i;
var l = t.displayName || t.name || "";
return l !== "" ? n + "(" + l + ")" : n;
}
function ce(e) {
return e.displayName || "Context";
}
function C(e) {
if (e == null)
return null;
if (typeof e.tag == "number" && R("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 s:
return "Fragment";
case r:
return "Portal";
case _:
return "Profiler";
case m:
return "StrictMode";
case x:
return "Suspense";
case h:
return "SuspenseList";
}
if (typeof e == "object")
switch (e.$$typeof) {
case y:
var t = e;
return ce(t) + ".Consumer";
case f:
var n = e;
return ce(n._context) + ".Provider";
case d:
return Je(e, e.render, "ForwardRef");
case T:
var i = e.displayName || null;
return i !== null ? i : C(e.type) || "Memo";
case P: {
var l = e, v = l._payload, c = l._init;
try {
return C(c(v));
} catch {
return null;
}
}
}
return null;
}
var w = Object.assign, N = 0, le, fe, de, ve, me, he, pe;
function ge() {
}
ge.__reactDisabledLog = !0;
function Ke() {
{
if (N === 0) {
le = console.log, fe = console.info, de = console.warn, ve = console.error, me = console.group, he = console.groupCollapsed, pe = 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
});
}
N++;
}
}
function ze() {
{
if (N--, N === 0) {
var e = {
configurable: !0,
enumerable: !0,
writable: !0
};
Object.defineProperties(console, {
log: w({}, e, {
value: le
}),
info: w({}, e, {
value: fe
}),
warn: w({}, e, {
value: de
}),
error: w({}, e, {
value: ve
}),
group: w({}, e, {
value: me
}),
groupCollapsed: w({}, e, {
value: he
}),
groupEnd: w({}, e, {
value: pe
})
});
}
N < 0 && R("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
}
}
var Z = k.ReactCurrentDispatcher, Q;
function G(e, t, n) {
{
if (Q === void 0)
try {
throw Error();
} catch (l) {
var i = l.stack.trim().match(/\n( *(at )?)/);
Q = i && i[1] || "";
}
return `
` + Q + e;
}
}
var ee = !1, J;
{
var He = typeof WeakMap == "function" ? WeakMap : Map;
J = new He();
}
function be(e, t) {
if (!e || ee)
return "";
{
var n = J.get(e);
if (n !== void 0)
return n;
}
var i;
ee = !0;
var l = Error.prepareStackTrace;
Error.prepareStackTrace = void 0;
var v;
v = Z.current, Z.current = null, Ke();
try {
if (t) {
var c = function() {
throw Error();
};
if (Object.defineProperty(c.prototype, "props", {
set: function() {
throw Error();
}
}), typeof Reflect == "object" && Reflect.construct) {
try {
Reflect.construct(c, []);
} catch (A) {
i = A;
}
Reflect.construct(e, [], c);
} else {
try {
c.call();
} catch (A) {
i = A;
}
e.call(c.prototype);
}
} else {
try {
throw Error();
} catch (A) {
i = A;
}
e();
}
} catch (A) {
if (A && i && typeof A.stack == "string") {
for (var u = A.stack.split(`
`), E = i.stack.split(`
`), p = u.length - 1, g = E.length - 1; p >= 1 && g >= 0 && u[p] !== E[g]; )
g--;
for (; p >= 1 && g >= 0; p--, g--)
if (u[p] !== E[g]) {
if (p !== 1 || g !== 1)
do
if (p--, g--, g < 0 || u[p] !== E[g]) {
var I = `
` + u[p].replace(" at new ", " at ");
return e.displayName && I.includes("<anonymous>") && (I = I.replace("<anonymous>", e.displayName)), typeof e == "function" && J.set(e, I), I;
}
while (p >= 1 && g >= 0);
break;
}
}
} finally {
ee = !1, Z.current = v, ze(), Error.prepareStackTrace = l;
}
var D = e ? e.displayName || e.name : "", Se = D ? G(D) : "";
return typeof e == "function" && J.set(e, Se), Se;
}
function Xe(e, t, n) {
return be(e, !1);
}
function Ze(e) {
var t = e.prototype;
return !!(t && t.isReactComponent);
}
function K(e, t, n) {
if (e == null)
return "";
if (typeof e == "function")
return be(e, Ze(e));
if (typeof e == "string")
return G(e);
switch (e) {
case x:
return G("Suspense");
case h:
return G("SuspenseList");
}
if (typeof e == "object")
switch (e.$$typeof) {
case d:
return Xe(e.render);
case T:
return K(e.type, t, n);
case P: {
var i = e, l = i._payload, v = i._init;
try {
return K(v(l), t, n);
} catch {
}
}
}
return "";
}
var z = Object.prototype.hasOwnProperty, ye = {}, xe = k.ReactDebugCurrentFrame;
function H(e) {
if (e) {
var t = e._owner, n = K(e.type, e._source, t ? t.type : null);
xe.setExtraStackFrame(n);
} else
xe.setExtraStackFrame(null);
}
function Qe(e, t, n, i, l) {
{
var v = Function.call.bind(z);
for (var c in e)
if (v(e, c)) {
var u = void 0;
try {
if (typeof e[c] != "function") {
var E = Error((i || "React class") + ": " + n + " type `" + c + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[c] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
throw E.name = "Invariant Violation", E;
}
u = e[c](t, c, i, n, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
} catch (p) {
u = p;
}
u && !(u instanceof Error) && (H(l), R("%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).", i || "React class", n, c, typeof u), H(null)), u instanceof Error && !(u.message in ye) && (ye[u.message] = !0, H(l), R("Failed %s type: %s", n, u.message), H(null));
}
}
}
var et = Array.isArray;
function te(e) {
return et(e);
}
function tt(e) {
{
var t = typeof Symbol == "function" && Symbol.toStringTag, n = t && e[Symbol.toStringTag] || e.constructor.name || "Object";
return n;
}
}
function rt(e) {
try {
return _e(e), !1;
} catch {
return !0;
}
}
function _e(e) {
return "" + e;
}
function Re(e) {
if (rt(e))
return R("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", tt(e)), _e(e);
}
var M = k.ReactCurrentOwner, nt = {
key: !0,
ref: !0,
__self: !0,
__source: !0
}, Ee, Te, re;
re = {};
function at(e) {
if (z.call(e, "ref")) {
var t = Object.getOwnPropertyDescriptor(e, "ref").get;
if (t && t.isReactWarning)
return !1;
}
return e.ref !== void 0;
}
function ot(e) {
if (z.call(e, "key")) {
var t = Object.getOwnPropertyDescriptor(e, "key").get;
if (t && t.isReactWarning)
return !1;
}
return e.key !== void 0;
}
function it(e, t) {
if (typeof e.ref == "string" && M.current && t && M.current.stateNode !== t) {
var n = C(M.current.type);
re[n] || (R('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', C(M.current.type), e.ref), re[n] = !0);
}
}
function st(e, t) {
{
var n = function() {
Ee || (Ee = !0, R("%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)", t));
};
n.isReactWarning = !0, Object.defineProperty(e, "key", {
get: n,
configurable: !0
});
}
}
function ut(e, t) {
{
var n = function() {
Te || (Te = !0, R("%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)", t));
};
n.isReactWarning = !0, Object.defineProperty(e, "ref", {
get: n,
configurable: !0
});
}
}
var ct = function(e, t, n, i, l, v, c) {
var u = {
// This tag allows us to uniquely identify this as a React Element
$$typeof: o,
// Built-in properties that belong on the element
type: e,
key: t,
ref: n,
props: c,
// Record the component responsible for creating this element.
_owner: v
};
return u._store = {}, Object.defineProperty(u._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: !1
}), Object.defineProperty(u, "_self", {
configurable: !1,
enumerable: !1,
writable: !1,
value: i
}), Object.defineProperty(u, "_source", {
configurable: !1,
enumerable: !1,
writable: !1,
value: l
}), Object.freeze && (Object.freeze(u.props), Object.freeze(u)), u;
};
function lt(e, t, n, i, l) {
{
var v, c = {}, u = null, E = null;
n !== void 0 && (Re(n), u = "" + n), ot(t) && (Re(t.key), u = "" + t.key), at(t) && (E = t.ref, it(t, l));
for (v in t)
z.call(t, v) && !nt.hasOwnProperty(v) && (c[v] = t[v]);
if (e && e.defaultProps) {
var p = e.defaultProps;
for (v in p)
c[v] === void 0 && (c[v] = p[v]);
}
if (u || E) {
var g = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
u && st(c, g), E && ut(c, g);
}
return ct(e, u, E, l, i, M.current, c);
}
}
var ne = k.ReactCurrentOwner, Ie = k.ReactDebugCurrentFrame;
function j(e) {
if (e) {
var t = e._owner, n = K(e.type, e._source, t ? t.type : null);
Ie.setExtraStackFrame(n);
} else
Ie.setExtraStackFrame(null);
}
var ae;
ae = !1;
function oe(e) {
return typeof e == "object" && e !== null && e.$$typeof === o;
}
function Pe() {
{
if (ne.current) {
var e = C(ne.current.type);
if (e)
return `
Check the render method of \`` + e + "`.";
}
return "";
}
}
function ft(e) {
{
if (e !== void 0) {
var t = e.fileName.replace(/^.*[\\\/]/, ""), n = e.lineNumber;
return `
Check your code at ` + t + ":" + n + ".";
}
return "";
}
}
var Ce = {};
function dt(e) {
{
var t = Pe();
if (!t) {
var n = typeof e == "string" ? e : e.displayName || e.name;
n && (t = `
Check the top-level render call using <` + n + ">.");
}
return t;
}
}
function Ae(e, t) {
{
if (!e._store || e._store.validated || e.key != null)
return;
e._store.validated = !0;
var n = dt(t);
if (Ce[n])
return;
Ce[n] = !0;
var i = "";
e && e._owner && e._owner !== ne.current && (i = " It was passed a child from " + C(e._owner.type) + "."), j(e), R('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', n, i), j(null);
}
}
function we(e, t) {
{
if (typeof e != "object")
return;
if (te(e))
for (var n = 0; n < e.length; n++) {
var i = e[n];
oe(i) && Ae(i, t);
}
else if (oe(e))
e._store && (e._store.validated = !0);
else if (e) {
var l = We(e);
if (typeof l == "function" && l !== e.entries)
for (var v = l.call(e), c; !(c = v.next()).done; )
oe(c.value) && Ae(c.value, t);
}
}
}
function vt(e) {
{
var t = e.type;
if (t == null || typeof t == "string")
return;
var n;
if (typeof t == "function")
n = t.propTypes;
else if (typeof t == "object" && (t.$$typeof === d || // Note: Memo only checks outer props here.
// Inner props are checked in the reconciler.
t.$$typeof === T))
n = t.propTypes;
else
return;
if (n) {
var i = C(t);
Qe(n, e.props, "prop", i, e);
} else if (t.PropTypes !== void 0 && !ae) {
ae = !0;
var l = C(t);
R("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", l || "Unknown");
}
typeof t.getDefaultProps == "function" && !t.getDefaultProps.isReactClassApproved && R("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
}
}
function mt(e) {
{
for (var t = Object.keys(e.props), n = 0; n < t.length; n++) {
var i = t[n];
if (i !== "children" && i !== "key") {
j(e), R("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", i), j(null);
break;
}
}
e.ref !== null && (j(e), R("Invalid attribute `ref` supplied to `React.Fragment`."), j(null));
}
}
function Oe(e, t, n, i, l, v) {
{
var c = Ge(e);
if (!c) {
var u = "";
(e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (u += " 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 E = ft(l);
E ? u += E : u += Pe();
var p;
e === null ? p = "null" : te(e) ? p = "array" : e !== void 0 && e.$$typeof === o ? (p = "<" + (C(e.type) || "Unknown") + " />", u = " Did you accidentally export a JSX literal instead of a component?") : p = typeof e, R("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", p, u);
}
var g = lt(e, t, n, l, v);
if (g == null)
return g;
if (c) {
var I = t.children;
if (I !== void 0)
if (i)
if (te(I)) {
for (var D = 0; D < I.length; D++)
we(I[D], e);
Object.freeze && Object.freeze(I);
} else
R("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
we(I, e);
}
return e === s ? mt(g) : vt(g), g;
}
}
function ht(e, t, n) {
return Oe(e, t, n, !0);
}
function pt(e, t, n) {
return Oe(e, t, n, !1);
}
var gt = pt, bt = ht;
W.Fragment = s, W.jsx = gt, W.jsxs = bt;
}()), W;
}
(function(a) {
process.env.NODE_ENV === "production" ? a.exports = Rt() : a.exports = Et();
})(_t);
function De(a) {
const {
data: o
} = a;
let r = o ?? [], s = r == null ? void 0 : r.length;
const m = Tt(
r
), _ = m.length, f = 1, y = f, d = 0, x = _ - 1;
return {
info: {
formatElement: m,
sourceTotal: s,
// 來源總數
// 從0開始
element: {
total: _,
firstIndex: 0,
lastIndex: _ - 1
},
// 0為實際一開始的位置(往前為負數), 結束值為最後結束位置
actual: {
minIndex: d,
maxIndex: x,
firstIndex: Math.ceil(f),
lastIndex: Math.ceil(s + y - 1)
},
// 總頁數
pageTotal: s
}
};
}
function Tt(a = []) {
const o = [];
let r = 0;
const s = 1, m = a.length, _ = a.length - s;
for (const d of a.slice(-s))
o[r] = {
actualIndex: r,
matchIndex: s + _ + r,
inPage: m,
isClone: !0,
element: d.text
}, r += 1;
let f = r, y = 0;
for (const [d, x] of a.entries())
o[r] = {
actualIndex: r,
matchIndex: r,
sourceIndex: d,
inPage: y + 1,
isClone: !1,
onClick: x.onClick,
element: x.text
}, r += 1, y += 1;
for (const d of a.slice(0, s))
o[r] = {
actualIndex: r,
matchIndex: f,
inPage: 1,
isClone: !0,
element: d.text
}, r += 1, f += 1;
return o;
}
function X(a) {
var o = new Error(a);
return o.source = "ulid", o;
}
var ie = "0123456789ABCDEFGHJKMNPQRSTVWXYZ", V = ie.length, Ne = Math.pow(2, 48) - 1, It = 10, Pt = 16;
function Ct(a) {
var o = Math.floor(a() * V);
return o === V && (o = V - 1), ie.charAt(o);
}
function At(a, o) {
if (isNaN(a))
throw new Error(a + " must be a number");
if (a > Ne)
throw X("cannot encode time greater than " + Ne);
if (a < 0)
throw X("time must be positive");
if (Number.isInteger(a) === !1)
throw X("time must be an integer");
for (var r = void 0, s = ""; o > 0; o--)
r = a % V, s = ie.charAt(r) + s, a = (a - r) / V;
return s;
}
function wt(a, o) {
for (var r = ""; a > 0; a--)
r = Ct(o) + r;
return r;
}
function Ot() {
var a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1, o = arguments[1];
o || (o = typeof window < "u" ? window : null);
var r = o && (o.crypto || o.msCrypto);
if (r)
return function() {
var m = new Uint8Array(1);
return r.getRandomValues(m), m[0] / 255;
};
try {
var s = require("crypto");
return function() {
return s.randomBytes(1).readUInt8() / 255;
};
} catch {
}
if (a) {
try {
console.error("secure crypto unusable, falling back to insecure Math.random()!");
} catch {
}
return function() {
return Math.random();
};
}
throw X("secure crypto unusable, insecure Math.random not allowed");
}
function St(a) {
return a || (a = Ot()), function(r) {
return isNaN(r) && (r = Date.now()), At(r, It) + wt(Pt, a);
};
}
var kt = St();
const q = [
"color: #fff",
"display: block",
"line-height: 20px",
"padding-right: 8px"
];
function B(a, o, r) {
console.log(`%c ${a}`, o, r);
}
function jt(a, o) {
const r = q.concat([
"background-color: #007bff"
]).join(";");
B(a, r, o);
}
function Dt(a, o) {
const r = q.concat([
"background-color: #28a745"
]).join(";");
B(a, r, o);
}
function Fe(a, o) {
const r = q.concat([
"background-color: #17a2b8"
]).join(";");
B(a, r, o);
}
function Nt(a, o) {
const r = q.concat([
"background-color: #ffc107"
]).join(";");
B(a, r, o);
}
function Mt(a, o) {
const r = q.concat([
"background-color: #ec2127"
]).join(";");
B(a, r, o);
}
function Ft(a, o = !1) {
const r = document.getElementById("console");
if (r) {
const s = /* @__PURE__ */ new Date(), m = [s.getMinutes(), s.getSeconds()].join("");
r.value = `${m}: ${a}
${r.value}`;
} else
o && Fe("mobile", a);
}
const U = {
primary: jt,
success: Dt,
info: Fe,
warning: Nt,
danger: Mt,
printInText: Ft
}, Y = {
root: "bear-react-vertical-marquee__root",
content: "bear-react-vertical-marquee__content",
container: "bear-react-vertical-marquee__container",
slideItem: "bear-react-vertical-marquee__slide-item",
slideItemText: "bear-react-vertical-marquee__slide-item-text",
testNumber: "bear-react-vertical-marquee__test-number",
cloneIconGroup: "bear-react-vertical-marquee__clone-icon-group"
};
const L = {
componentDidMount: !0,
componentWillUnmount: !0,
shouldComponentUpdate: !0,
checkAndAutoPlay: !0,
onTransitionend: !0,
goToActualIndex: !0
};
class $t extends F.Component {
constructor(r) {
super(r);
b(this, "_verticalMarqueeId", kt().toLowerCase());
b(this, "timer");
b(this, "activePage", 0);
// real page location
b(this, "activeActualIndex", 0);
// real item index location
b(this, "info", {
formatElement: [],
sourceTotal: 0,
// Total number of sources
// 從0開始
element: {
total: 0,
firstIndex: 0,
lastIndex: 0
},
// 0 is the actual starting position (a negative number forward), and the ending value is the last ending position
actual: {
minIndex: 0,
maxIndex: 0,
firstIndex: 1,
lastIndex: 1
},
// 總頁數
pageTotal: 0
});
// Ref
b(this, "rootRef", F.createRef());
b(this, "containerRef", F.createRef());
b(this, "slideItemRefs", F.createRef());
b(this, "pageRefs", F.createRef());
/**
* browser focus check auto play
* @private
*/
b(this, "_onWindowFocus", () => {
this._checkAndAutoPlay();
});
/**
* browser blur clean auto play timer
* @private
*/
b(this, "_onWindowBlur", () => {
this.timer && clearTimeout(this.timer);
});
/**
* Check and autoplay feature
*/
b(this, "_checkAndAutoPlay", () => {
const { autoPlayTime: r } = this.props;
this.props.isDebug && L.checkAndAutoPlay && U.printInText(`[_checkAndAutoPlay] autoPlayTime: ${r}`), this.timer && clearTimeout(this.timer), r > 0 && this.info.pageTotal > 1 && (this.timer = setTimeout(() => {
this.toNext();
}, r));
});
/**
* get next page
*/
b(this, "getNextPage", () => this.activePage + 1);
/**
* Get virtual index
*/
b(this, "checkActualIndexInRange", (r) => r <= this.info.actual.maxIndex && r >= this.info.actual.minIndex);
/**
* go to next page
*/
b(this, "toNext", () => {
var s;
const r = (s = this.info) != null && s.formatElement ? this.info.formatElement : [];
r[this.activeActualIndex].isClone ? (this.goToActualIndex(r[this.activeActualIndex].matchIndex, !1), this.goToActualIndex(this.activeActualIndex)) : this.goToActualIndex(this.activeActualIndex + 1);
});
/**
* go to page
* ex: slideView: 2, slideGroup: 2, total: 4
* page1 -> (1-1) * 2) + 1 + (firstIndex -1) = 1
*/
b(this, "goToPage", (r, s = !0) => {
this.goToActualIndex(r - 1 + 1 + (this.info.actual.firstIndex - 1), s);
});
/**
* Get the target item distance width(px)
* @param slideIndex
*/
b(this, "_getMoveDistance", (r) => {
if (this.slideItemRefs.current) {
const s = this.slideItemRefs.current[r];
if (s)
return -s.offsetTop;
}
return 0;
});
/**
* Go to the actual location
*/
b(this, "goToActualIndex", (r, s = !0) => {
var _, f, y;
const { moveTime: m } = this.props;
if (this.props.isDebug && L.goToActualIndex && U.printInText(`[goToActualIndex] slideIndex: ${r}, isUseAnimation: ${s}`), Math.ceil(r) !== r)
throw Error(`slideIndex(${r}) can't has floating .xx`);
if (this.checkActualIndexInRange(r)) {
this.activeActualIndex = r, this.activePage = 1, typeof this.info.formatElement[this.activeActualIndex] < "u" && (this.activePage = this.info.formatElement[this.activeActualIndex].inPage);
const d = this._getMoveDistance(this.activeActualIndex), x = (_ = this.containerRef) == null ? void 0 : _.current;
x && (x.style.visibility = "visible", x.style.transitionDuration = s ? `${m}ms` : "0ms", x.style.transform = `translate(0px, ${d}px)`);
const h = (f = this.rootRef) == null ? void 0 : f.current;
h && (this.activePage === 1 ? h.setAttribute("data-position", this.activePage === this.info.pageTotal ? "hidden" : "first") : h.setAttribute("data-position", this.activePage === this.info.pageTotal ? "last" : ""));
const T = (y = this.slideItemRefs) == null ? void 0 : y.current;
T && T.forEach((P, S) => {
S === this.activeActualIndex ? P.setAttribute("data-active", "true") : P && P.removeAttribute("data-active");
}), this._checkAndAutoPlay();
}
});
this.slideItemRefs.current = [], this.pageRefs.current = [];
const { info: s } = De(r);
this.info = s;
}
componentDidMount() {
var s;
this.props.isDebug && L.componentDidMount && U.printInText("[componentDidMount]"), ((s = this.containerRef) == null ? void 0 : s.current) && (this.info.pageTotal > 0 && this.goToPage(1, !1), window.addEventListener("focus", this._onWindowFocus, !1), window.addEventListener("blur", this._onWindowBlur, !1));
}
componentWillUnmount() {
this.props.isDebug && L.componentWillUnmount && U.printInText("[componentWillUnmount]"), this.timer && clearTimeout(this.timer);
}
/***
* Optimized rendering
* @param nextProps
* @param nextState
*/
shouldComponentUpdate(r, s) {
const { data: m, ..._ } = this.props, { data: f, ...y } = r, d = m == null ? void 0 : m.map((h) => h.key).join("_"), x = f == null ? void 0 : f.map((h) => h.key).join("_");
if (d !== x) {
this.props.isDebug && L.shouldComponentUpdate && U.printInText("[shouldComponentUpdate] true");
const { info: h } = De(r);
this.info = h;
const T = this;
return setTimeout(() => {
T.goToPage(1, !1);
}, 0), !0;
}
return !1;
}
render() {
const { style: r, className: s, isDebug: m, isGPURender: _ } = this.props;
return /* @__PURE__ */ O.jsx(
"div",
{
"data-vertial-marquee-id": this._verticalMarqueeId,
style: r,
className: [s, Y.root].join(" ").trim(),
"data-gpu-render": _ ? "true" : void 0,
"data-actual": `${this.info.actual.minIndex},${this.info.actual.firstIndex}-${this.info.actual.lastIndex},${this.info.actual.maxIndex}`,
"data-debug": m ? "true" : void 0,
ref: this.rootRef,
children: /* @__PURE__ */ O.jsx("div", { className: Y.content, children: /* @__PURE__ */ O.jsx(
"ul",
{
ref: this.containerRef,
className: Y.container,
children: this.info.formatElement.map((f, y) => /* @__PURE__ */ O.jsx(
"li",
{
className: Y.slideItem,
ref: (d) => (this.slideItemRefs.current[y] = d, !1),
"data-active": f.actualIndex === this.activeActualIndex ? !0 : void 0,
"data-actual": f.actualIndex,
"data-match": f.isClone ? f.matchIndex : void 0,
"data-page": f.inPage,
"data-source": f.sourceIndex,
"data-is-clone": f.isClone ? !0 : void 0,
"data-click": typeof f.onClick < "u",
onClick: f.onClick,
children: /* @__PURE__ */ O.jsx("div", { className: Y.slideItemText, dangerouslySetInnerHTML: { __html: f.element } })
},
`vertical-marquee_${y}`
))
}
) })
}
);
}
}
b($t, "defaultProps", {
data: void 0,
moveTime: 500,
isEnableAutoPlay: !0,
isGPURender: !0,
isDebug: !1,
autoPlayTime: 5e3
});
export {
$t as default,
Y as elClassName
};