@primer/react-brand
Version:
Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.
83 lines (82 loc) • 3.52 kB
JavaScript
import e from "../../node_modules/clsx/dist/clsx.js";
import { RiverStoryScrollProvider as t } from "./RiverStoryScrollProvider.js";
import n from "./RiverStoryScroll.module.js";
import { RiverStoryScrollResponder as r } from "./RiverStoryScrollResponder.js";
import { RiverStoryScrollTracker as i } from "./RiverStoryScrollTracker.js";
import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river-story-scroll/colors-with-modes-omPmv64b.css';/* empty css */
import a, { useEffect as o, useRef as s } from "react";
import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
//#region src/river/RiverStoryScroll/RiverStoryScroll.tsx
function d({ children: d, disabled: f }) {
let p = s(null), m = s(null), [h, g] = a.useState(!1), [_, v] = a.useState([]), y = a.Children.map(d, (t) => {
if (a.isValidElement(t)) return a.cloneElement(t, { className: e(n["RiverStoryScroll__internal-river"], !f && n["RiverStoryScroll__content-stack"]) });
}), b = y ? Array(y.length).fill(!1) : [];
return o(() => {
let e = window.matchMedia("(prefers-reduced-motion: reduce)");
g(e.matches);
let t = (e) => {
g(e.matches);
};
return e.addEventListener("change", t), () => {
e.removeEventListener("change", t);
};
}, []), o(() => {
f || h || !m.current || v(Array.from(m.current.querySelectorAll("img, video")).map((e) => e instanceof HTMLImageElement ? {
type: "image",
src: e.src
} : {
type: "video",
src: e.querySelector("source")?.src || ""
}));
}, [f, h]), f || h ? /* @__PURE__ */ l(c, { children: d }) : /* @__PURE__ */ l("div", {
className: e(n.RiverStoryScroll, n["RiverStoryScroll--enabled"]),
children: /* @__PURE__ */ u(t, {
initialStates: b,
className: n.RiverStoryScroll__inner,
children: [/* @__PURE__ */ l("div", {
className: n["RiverStoryScroll__visual-container"],
ref: p,
children: /* @__PURE__ */ u("div", {
className: e(n["RiverStoryScroll__visual-container-inner"], n["RiverStoryScroll__visual--below"]),
children: [
/* @__PURE__ */ l("div", { className: n["RiverStoryScroll__visual-cover"] }),
_.map((e, t) => /* @__PURE__ */ u(r, {
className: n["RiverStoryScroll__visual-scroll-responder"],
index: t,
children: [e.type === "video" && /* @__PURE__ */ l("video", {
playsInline: !0,
muted: !0,
preload: "auto",
className: n.RiverStoryScroll__image,
children: /* @__PURE__ */ l("source", {
src: e.src,
type: "video/mp4; codecs=avc1.4d002a"
})
}), e.type === "image" && /* @__PURE__ */ l("img", {
className: n.RiverStoryScroll__image,
src: `${e.src}`,
alt: ""
})]
}, t)),
/* @__PURE__ */ l("div", {
className: n.RiverStoryScroll__pagination,
children: _.map((e, t) => /* @__PURE__ */ l("div", { className: n["RiverStoryScroll__pagination-dot"] }, t))
})
]
})
}), /* @__PURE__ */ l("div", {
ref: m,
className: e(n["RiverStoryScroll__content-container"], n["RiverStoryScroll__content-container--below"]),
children: a.Children.map(y, (e, t) => /* @__PURE__ */ l(i, {
location: "below",
index: t,
className: n.RiverStoryScroll__tracker,
children: e
}, t))
})]
})
});
}
//#endregion
export { d as RiverStoryScroll };
//# sourceMappingURL=RiverStoryScroll.js.map