@adyen/adyen-platform-experience-web
Version:
107 lines (106 loc) • 4.33 kB
JavaScript
import { PopoverContainerPosition as s, PopoverContainerVariant as C } from "../../components/internal/Popover/types.js";
import F from "../../components/internal/Popover/utils/utils.js";
import { useState as X, useCallback as W, useRef as x, useEffect as G } from "../../external/preact/hooks/dist/hooks.module.js";
import $ from "../useReflex.js";
import { isRefObject as v } from "../../primitives/reactive/reflex/helpers.js";
const A = ({
popover: r,
offset: t,
targetElement: u,
position: O,
variant: o,
fullWidth: I
}) => {
const L = u == null ? void 0 : u.current;
let l = 0, h = 0;
const e = L.getBoundingClientRect(), B = document.body.getBoundingClientRect(), d = r == null ? void 0 : r.firstChild, R = B.left + B.width / 2 - d.offsetWidth / 2, b = e.left + e.width / 2 - d.offsetWidth / 2, T = e.top + e.height / 2 - d.offsetHeight / 2;
switch (O) {
case s.BOTTOM:
l = I ? R : o === C.TOOLTIP ? b + window.scrollX : (e == null ? void 0 : e.left) + window.scrollX, h = (e == null ? void 0 : e.top) + (e == null ? void 0 : e.height) + window.scrollY + t[1];
break;
case s.BOTTOM_LEFT:
l = (e == null ? void 0 : e.right) + window.scrollX - r.clientWidth, h = (e == null ? void 0 : e.top) + (e == null ? void 0 : e.height) + window.scrollY + t[1];
break;
case s.TOP:
l = o === C.TOOLTIP ? b + window.scrollX : e.left + window.scrollX, h = (e == null ? void 0 : e.top) - (d == null ? void 0 : d.clientHeight) + window.scrollY - t[0];
break;
case s.RIGHT:
l = e.left + e.width + window.scrollX + t[2], h = o === C.TOOLTIP ? T + window.scrollY : (e == null ? void 0 : e.top) - (e == null ? void 0 : e.height) / 2 + window.scrollY;
break;
case s.LEFT:
l = (e == null ? void 0 : e.left) - (r == null ? void 0 : r.clientWidth) + window.scrollX - t[3], h = o === C.TOOLTIP ? T + window.scrollY : (e == null ? void 0 : e.top) + window.scrollY - (e == null ? void 0 : e.height) / 2;
break;
}
const w = [l, h, 0];
return `position:absolute;inset:0 auto auto 0;margin: 0;transform: ${w.reduce((i, k, c) => c === 0 ? i + `${k}px,` : c === w.length - 1 ? i + ` ${k}px)` : i + ` ${k}px,`, "translate3d(")};visibility:hidden`;
}, q = (r, t, u, O, o, I, L, l, h) => {
const [e, B] = X(!0), [d, R] = X(l ? !l : !!O), [b, T] = X(O || s.TOP), [w, f] = X([]), i = W(
(c) => {
if (c.intersectionRatio === 1) return R(!0);
if (!e && c.intersectionRatio !== 1) {
if (w && w.length === (l ? 5 : 4)) {
const n = w.reduce((a, m) => m[1] > a[1] ? m : a, w[0]);
T(n[0]), R(!0);
return;
}
switch (R(!1), b) {
case s.TOP:
f((n) => [...n, [s.TOP, c.intersectionRatio]]), T(s.BOTTOM);
break;
case s.BOTTOM:
f((n) => [...n, [s.BOTTOM, c.intersectionRatio]]), T(l ? s.BOTTOM_LEFT : s.RIGHT);
break;
case s.BOTTOM_LEFT:
f((n) => [...n, [s.BOTTOM, c.intersectionRatio]]), T(s.RIGHT);
break;
case s.RIGHT:
f((n) => [...n, [s.RIGHT, c.intersectionRatio]]), T(s.LEFT);
break;
case s.LEFT:
f((n) => [...n, [s.LEFT, c.intersectionRatio]]), T(s.TOP);
break;
}
}
},
[e, w, b, l]
), k = x(i);
return G(() => {
F(k.current).remove(), k.current = i;
}, [i]), $(
W(
(c, n) => {
var a, m;
if (n && (!O || l) && F(i).observer.unobserve(n), c && t.current) {
if ((!O || l) && F(i).observer.observe(c), !(c instanceof Element)) return;
const Y = A({
popover: c,
offset: r,
targetElement: t,
position: b,
variant: u,
fullWidth: L ?? !1
}), M = d ? Y + ";visibility:visible" : Y, H = I ? M + ";min-width:fit-content;width:" + ((a = t.current) == null ? void 0 : a.clientWidth) + "px" : M;
c.setAttribute("style", `${H}`), e && B(!1), u && u === C.TOOLTIP && o && v(o) && ((m = o.current) == null || m.setAttribute("data-popover-placement", b));
}
},
[
r,
t,
b,
O,
u,
i,
d,
e,
I,
o,
L,
l
]
),
h
);
};
export {
q as default
};