@adyen/adyen-platform-experience-web
Version:
214 lines (213 loc) • 7.62 kB
JavaScript
import { useState as f, useRef as d, useLayoutEffect as U, useEffect as W, useCallback as Y } from "../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
import w from "../../components/internal/Popover/utils/utils.js";
import { PopoverContainerPosition as t, PopoverContainerVariant as A } from "../../components/internal/Popover/types.js";
import { isRefObject as P } from "../../primitives/reactive/reflex/helpers.js";
import Z from "../useReflex.js";
const $ = [
t.BOTTOM_RIGHT,
t.BOTTOM_LEFT,
t.TOP_RIGHT,
t.TOP_LEFT
], y = 5, N = 4, z = 10, X = ({
position: v,
variant: l,
offset: a,
additionalStyle: u,
fixedPositioning: O,
fullWidth: E,
fitPosition: m,
forceFixed: n,
popover: p,
targetElement: M
}) => {
let o = 0, r = 0;
const _ = l === A.TOOLTIP, G = p.clientHeight, C = p.clientWidth, I = p.firstChild, h = I.offsetHeight, b = I.offsetWidth, g = document.body.getBoundingClientRect(), e = M.getBoundingClientRect(), F = g.x + (g.width - b) / 2, k = e.x + (e.width - b) / 2, x = e.y + (e.height - h) / 2, i = window.scrollX, H = window.scrollY;
switch (v) {
case t.BOTTOM:
o = E ? F : _ ? k : e.x, r = e.y + e.height + a[1], !O && !n && (E || (o += i), r += H);
break;
case t.TOP:
o = _ ? k : e.x, r = e.y - (G + a[0]), !O && !n && (o += i, r += H - I.clientHeight + G);
break;
case t.RIGHT:
o = e.x + e.width + a[2], r = _ ? x : e.y - e.height / 2, !O && !n && (o += i, r += H);
break;
case t.LEFT:
o = e.x - (C + a[3]), r = _ ? x : e.y - e.height / 2, !O && !n && (o += i, r += H);
break;
case t.BOTTOM_LEFT:
o = m ? e.x : 5, r = e.y + e.height + a[1], !O && !n && (o += i, r += H);
break;
case t.BOTTOM_RIGHT:
o = m ? e.x : -5, r = e.y + e.height + a[1], !O && !n && (o = m ? e.x + i : i - (g.width - e.right), r += H);
break;
case t.TOP_LEFT:
o = m ? e.x : y, r = e.y - G, !O && !n && (o += i, r += H - I.clientHeight + G);
break;
case t.TOP_RIGHT:
o = m ? e.x : -y, r = e.y - G, !O && !n && (o = m ? e.x + i : o + i, r += H - I.clientHeight + G);
break;
}
const c = {};
if (u) {
const L = !!u.maxY && r + p?.clientHeight > u.maxY, s = !!u.minY && r < u.minY;
if (L && u.maxY) {
const T = e.y + e.height + 8, R = Math.max(0, u.maxY - T);
R > 20 && (c.height = `${R}px`), c["overflow-y"] = "scroll";
}
if (s && u.minY && r) {
const T = p.offsetHeight ?? p.clientHeight, R = Math.max(0, T - (u.minY - r));
c.height = `${R}px`, R && (c["overflow-y"] = "scroll");
}
s && (r = u.minY ?? 0);
}
return {
inset: v === t.TOP_RIGHT || v === t.BOTTOM_RIGHT ? "0 0 auto auto" : "0 auto auto 0",
margin: "0",
position: O || n ? "fixed" : "absolute",
transform: `translate3d(${o}px, ${r}px, 0)`,
visibility: "hidden",
...c
};
}, et = (v, l, a, u, O, E, m, n, p, M, o, r) => {
const [_, G] = f(!0), [C, I] = f(n ? !n : !!u), [h, b] = f(u || t.TOP), [g, e] = f([]), F = d(null), k = d(h), x = d(null);
U(() => {
k.current = h;
}, [h]), W(() => {
if (p) return;
let c = null;
const B = () => {
c && cancelAnimationFrame(c), c = requestAnimationFrame(() => {
c = null;
const L = F.current;
if (!L || !l.current) return;
const s = l.current.getBoundingClientRect(), T = x.current;
if (T && T.x === s.x && T.y === s.y)
return;
x.current = { x: s.x, y: s.y };
const R = X({
variant: a,
offset: v,
additionalStyle: M,
fixedPositioning: p,
fullWidth: m,
fitPosition: n,
forceFixed: !C,
popover: L,
position: k.current,
targetElement: l.current
});
L.style.transform = R.transform;
});
};
return window.addEventListener("scroll", B, { passive: !0, capture: !0 }), () => {
window.removeEventListener("scroll", B, { capture: !0 }), c && cancelAnimationFrame(c);
};
}, [p, l, a, v, M, m, n, C]);
const i = Y(
(c) => {
const B = document.documentElement.clientWidth, L = l.current?.getBoundingClientRect();
if (c.intersectionRatio === 1) return I(!0);
if (!_ && c.intersectionRatio !== 1) {
if (g && g.length === (n ? 8 : 4)) {
const s = g.reduce((T, R) => R[1] > T[1] ? R : T, g[0]);
return b(s[0]), I(!0);
}
switch (I(!1), h) {
case t.TOP:
e((s) => [...s, [t.TOP, c.intersectionRatio]]), b(t.BOTTOM);
break;
case t.BOTTOM:
e((s) => [...s, [t.BOTTOM, c.intersectionRatio]]), b(
n ? (L?.x || 0) > B / 2 ? t.BOTTOM_RIGHT : t.BOTTOM_LEFT : t.RIGHT
);
break;
case t.BOTTOM_LEFT:
e((s) => [...s, [t.BOTTOM_LEFT, c.intersectionRatio]]), b(n ? t.TOP_LEFT : t.RIGHT);
break;
case t.BOTTOM_RIGHT:
e((s) => [...s, [t.BOTTOM_RIGHT, c.intersectionRatio]]), b(n ? t.TOP_RIGHT : t.RIGHT);
break;
case t.TOP_LEFT:
e((s) => [...s, [t.TOP_LEFT, c.intersectionRatio]]), b(n ? t.BOTTOM_LEFT : t.RIGHT);
break;
case t.TOP_RIGHT:
e((s) => [...s, [t.TOP_RIGHT, c.intersectionRatio]]), b(n ? t.BOTTOM_RIGHT : t.RIGHT);
break;
case t.RIGHT:
e((s) => [...s, [t.RIGHT, c.intersectionRatio]]), b(t.LEFT);
break;
case t.LEFT:
e((s) => [...s, [t.LEFT, c.intersectionRatio]]), b(t.TOP);
break;
}
}
},
[l, _, g, n, h]
), H = d(i);
return W(() => {
w(H.current).remove(), H.current = i;
}, [i]), Z(
Y(
(c, B) => {
if (F.current = c ?? null, B && (!u || n) && w(i).observer.unobserve(B), c && l.current) {
if ((!u || n) && w(i).observer.observe(c), !(c instanceof Element)) return;
const s = {
...X({
variant: a,
offset: v,
additionalStyle: M,
fixedPositioning: p,
fullWidth: m,
fitPosition: n,
forceFixed: !C,
popover: c,
position: h,
targetElement: l.current
}),
...C && { visibility: "visible" },
...E && {
"min-width": "fit-content",
width: `${l.current.clientWidth}px`
}
};
if (c.setAttribute(
"style",
Object.entries(s).map((T) => T.join(":")).join(";")
), _ && G(!1), a && a === A.TOOLTIP && O && P(O) && (O.current?.setAttribute("data-popover-placement", h), $.includes(h))) {
const T = l.current.getBoundingClientRect(), R = c.firstChild, j = R.offsetWidth, D = T.x + (T.width - j) / 2, V = R.offsetHeight, q = h === t.BOTTOM_RIGHT || h === t.BOTTOM_LEFT ? V + N : N;
O.current?.setAttribute(
"style",
`transform: translate3d(${D}px, -${q}px, 0) rotate(45deg); inset: 0 0 auto auto`
);
}
if (a && a === A.TOOLTIP && r && P(r) && $.includes(h)) {
const T = document.documentElement.clientWidth;
r.current?.setAttribute("style", `max-width: ${T - z}px`);
}
}
},
[
u,
n,
l,
i,
a,
v,
M,
p,
m,
h,
C,
E,
_,
O,
r
]
),
o
);
};
export {
et as default
};