UNPKG

@primer/react-brand

Version:

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

114 lines (113 loc) 3.15 kB
import { useTabs as e } from "../hooks/useTabs.js"; import t, { useCallback as n, useEffect as r, useMemo as i, useRef as a } from "react"; //#region src/MediaPlaylist/useMediaPlaylist.ts function o({ children: t, components: o, defaultSelectedIndex: s, onChange: u, selectedIndex: d }) { let { headingChild: f, items: p } = i(() => c(t, o), [t, o]), m = p.length, h = l(s, m), g = typeof d == "number" && Number.isFinite(d) ? l(d, m) : null, _ = g ?? h, v = _ === null ? void 0 : String(_), y = m > 3, b = a(null), x = a([]), S = a(!1), C = n((e) => { let t = b.current, n = x.current[e]; !t || !n || typeof t.scrollTo != "function" || t.scrollTo({ top: Math.max(0, n.offsetTop - t.offsetTop), behavior: "smooth" }); }, []), { activeTab: w, activateTab: T, getTabListProps: E, getTabPanelProps: D, getTabProps: O } = e({ defaultTab: v, onTabActivate: n((e) => { let t = Number(e); if (!Number.isNaN(t)) { if (y && C(t), S.current) { S.current = !1; return; } u?.(t); } }, [ y, u, C ]), orientation: "vertical" }), k = w === null ? _ : l(Number(w), m), A = k === null ? 1 : k + 1; r(() => { if (g === null) return; let e = String(g); w !== e && (S.current = !0, T(e)); }, [ T, w, g ]), r(() => { k === null || w === String(k) || (S.current = !0, T(String(k))); }, [ T, k, w ]); let j = n((e, t) => { e.preventDefault(); let n = l(t - 1, m); n !== null && (C(n), w !== String(n) && T(String(n))); }, [ T, w, m, C ]), M = n((e) => w === String(e), [w]), N = n((e, t) => { x.current[e] = t; }, []); return { activeIndex: k, currentItemPage: A, getPaginationAttributes: n((e, t) => { switch (t.type) { case "PREV": return { "aria-label": "Previous video" }; case "NEXT": return { "aria-label": "Next video" }; case "NUM": { let n = { "aria-label": `Video ${e}` }; return t.selected && (n["aria-current"] = "step"), n; } case "BREAK": return {}; } }, []), getTabListProps: E, getTabPanelProps: D, getTabProps: O, handlePageChange: j, hasOverflowItems: y, headingChild: f, isItemSelected: M, items: p, setItemRef: N, tabListRef: b }; } var s = (e) => (n) => t.isValidElement(n) && n.type === e; function c(e, n) { let r = s(n.Heading), i = s(n.Item), a = s(n.ItemHeading), o = s(n.ItemContent), c = s(n.ItemMedia), l = { headingChild: null, items: [] }; for (let n of t.Children.toArray(e)) { if (r(n)) { l.headingChild = n; continue; } if (!i(n)) continue; let e = t.Children.toArray(n.props.children), s = { heading: null, content: null, media: null }; for (let t of e) a(t) && (s.heading = t), o(t) && (s.content = t), c(t) && (s.media = t); !s.heading || !s.content || !s.media || l.items.push({ className: n.props.className, content: s.content, heading: s.heading, media: s.media, thumbnail: n.props.thumbnail }); } return l; } var l = (e, t) => t < 1 ? null : Math.min(Math.max(Number.isFinite(e) ? Math.trunc(e) : 0, 0), t - 1); //#endregion export { o as useMediaPlaylist }; //# sourceMappingURL=useMediaPlaylist.js.map