@hakit/components
Version:
A series of components to work with @hakit/core
93 lines (92 loc) • 6.8 kB
JavaScript
import { j as s, a as D } from "../../../emotion-react-jsx-runtime.browser.esm-BErL7L7Y.js";
import { c as H } from "../../../emotion-styled-base.browser.esm-Dyg8Y4aq.js";
import { forwardRef as F, useState as p, useRef as g, useCallback as O, useEffect as y, useMemo as h, Children as w, Fragment as ee } from "react";
function ae() {
return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
}
const re = /* @__PURE__ */ H("div", process.env.NODE_ENV === "production" ? {
target: "erk7x4w0"
} : {
target: "erk7x4w0",
label: "StyledMarquee"
})(process.env.NODE_ENV === "production" ? {
name: "10ku7y1",
styles: 'overflow-x:hidden!important;display:flex!important;flex-direction:row!important;position:relative;width:var(--ha-marquee-width);transform:var(--ha-marquee-transform);&:hover div{animation-play-state:var(--ha-marquee-pause-on-hover);}&:active div{animation-play-state:var(--ha-marquee-pause-on-click);}.overlay{position:absolute;width:100%;height:100%;&::before,&::after{background:linear-gradient(to right, var(--ha-marquee-gradient-color));content:"";height:100%;position:absolute;width:var(--ha-marquee-gradient-width);z-index:2;}&::after{right:0;top:0;transform:rotateZ(180deg);}&::before{left:0;top:0;}}.marquee{flex:0 0 auto;min-width:var(--ha-marquee-min-width);z-index:1;display:flex;flex-direction:row;align-items:center;animation:scroll var(--ha-marquee-duration) linear var(--ha-marquee-delay) var(--ha-marquee-iteration-count);animation-play-state:var(--ha-marquee-play);animation-delay:var(--ha-marquee-delay);animation-direction:var(--ha-marquee-direction);@keyframes scroll{0%{transform:translateX(0%);}100%{transform:translateX(-100%);}}}.initial-child-container{flex:0 0 auto;display:flex;min-width:auto;flex-direction:row;}.child{transform:var(--ha-marquee-transform);&.last-child{padding-right:var(--ha-marquee-padding-right);}}'
} : {
name: "10ku7y1",
styles: 'overflow-x:hidden!important;display:flex!important;flex-direction:row!important;position:relative;width:var(--ha-marquee-width);transform:var(--ha-marquee-transform);&:hover div{animation-play-state:var(--ha-marquee-pause-on-hover);}&:active div{animation-play-state:var(--ha-marquee-pause-on-click);}.overlay{position:absolute;width:100%;height:100%;&::before,&::after{background:linear-gradient(to right, var(--ha-marquee-gradient-color));content:"";height:100%;position:absolute;width:var(--ha-marquee-gradient-width);z-index:2;}&::after{right:0;top:0;transform:rotateZ(180deg);}&::before{left:0;top:0;}}.marquee{flex:0 0 auto;min-width:var(--ha-marquee-min-width);z-index:1;display:flex;flex-direction:row;align-items:center;animation:scroll var(--ha-marquee-duration) linear var(--ha-marquee-delay) var(--ha-marquee-iteration-count);animation-play-state:var(--ha-marquee-play);animation-delay:var(--ha-marquee-delay);animation-direction:var(--ha-marquee-direction);@keyframes scroll{0%{transform:translateX(0%);}100%{transform:translateX(-100%);}}}.initial-child-container{flex:0 0 auto;display:flex;min-width:auto;flex-direction:row;}.child{transform:var(--ha-marquee-transform);&.last-child{padding-right:var(--ha-marquee-padding-right);}}',
toString: ae
}), se = F(function({
style: _ = {},
className: B = "",
autoFill: r = !1,
play: u = !0,
pauseOnHover: x = !1,
pauseOnClick: b = !1,
direction: e = "left",
speed: c = 50,
delay: I = 0,
loop: R = 0,
gradient: G = !1,
gradientColor: N = [255, 255, 255],
gradientWidth: f = 200,
onFinish: T,
onCycleComplete: V,
onMount: S,
children: l
}, Z) {
const [$, Y] = p(0), [v, J] = p(0), [q, z] = p(1), [k, K] = p(!1), L = g(null), t = Z || L, m = g(null), n = g(null), A = g(() => {
}), W = O(() => {
if (m.current && t.current) {
const a = t.current.getBoundingClientRect(), d = m.current.getBoundingClientRect();
let i = a.width, o = d.width;
(e === "up" || e === "down") && (i = a.height, o = d.height), z(r && i && o && o < i ? Math.ceil(i / o) : 1), Y(i), J(o);
}
}, [r, t, e]);
y(() => {
A.current = W;
}, [W]), y(() => {
if (k)
return n.current || (n.current = new ResizeObserver(() => {
A.current();
})), m.current && t.current && (n.current.observe(t.current), n.current.observe(m.current)), () => {
n.current?.disconnect();
};
}, [k, t]), y(() => (K(!0), () => {
n.current && n.current.disconnect();
}), []), y(() => {
typeof S == "function" && S();
}, [S]);
const j = h(() => r ? v * q / c : v < $ ? $ / c : v / c, [r, $, v, q, c]), E = `rgba(${N[0]}, ${N[1]}, ${N[2]}`, P = h(() => ({
..._,
"--ha-marquee-pause-on-hover": !u || x ? "paused" : "running",
"--ha-marquee-pause-on-click": !u || x && !b || b ? "paused" : "running",
"--ha-marquee-width": e === "up" || e === "down" ? "100vh" : "100%",
"--ha-marquee-transform": e === "up" ? "rotate(-90deg)" : e === "down" ? "rotate(90deg)" : "none"
}), [_, u, x, b, e]), Q = h(() => ({
"--ha-marquee-gradient-color": `${E}, 1), ${E}, 0)`,
"--ha-marquee-gradient-width": typeof f == "number" ? `${f}px` : f
}), [E, f]), C = h(() => ({
"--ha-marquee-play": u ? "running" : "paused",
"--ha-marquee-direction": e === "left" ? "normal" : "reverse",
"--ha-marquee-duration": `${j}s`,
"--ha-marquee-delay": `${I}s`,
"--ha-marquee-iteration-count": R > 0 ? `${R}` : "infinite",
"--ha-marquee-min-width": r ? "auto" : "100%",
"--ha-marquee-padding-right": r ? "4rem" : "0"
}), [u, e, j, I, R, r]), M = h(() => ({
"--ha-marquee-transform": e === "up" ? "rotate(90deg)" : e === "down" ? "rotate(-90deg)" : "none"
}), [e]), X = O((a) => [...Array(Number.isFinite(a) && a >= 0 ? a : 0)].map((d, i) => /* @__PURE__ */ s(ee, { children: w.map(l, (o, U) => /* @__PURE__ */ s("div", { style: M, className: `child ${U === w.toArray(l).length - 1 ? "last-child" : ""}`, children: o })) }, i)), [M, l]);
return k ? /* @__PURE__ */ D(re, { ref: t, style: P, className: "marquee-container " + B, children: [
G && /* @__PURE__ */ s("div", { style: Q, className: "overlay" }),
/* @__PURE__ */ D("div", { className: "marquee", style: C, onAnimationIteration: V, onAnimationEnd: T, children: [
/* @__PURE__ */ s("div", { className: "initial-child-container", ref: m, children: w.map(l, (a, d) => /* @__PURE__ */ s("div", { style: M, className: `child ${d === w.toArray(l).length - 1 ? "last-child" : ""}`, children: a })) }),
X(q - 1)
] }),
/* @__PURE__ */ s("div", { className: "marquee", style: C, children: X(q) })
] }) : null;
});
export {
se as Marquee
};
//# sourceMappingURL=Marquee.js.map