@1771technologies/lytenyte-pro
Version:
Blazingly fast headless React data grid with 100s of features.
32 lines (31 loc) • 1.37 kB
JavaScript
import { useEffect } from "react";
import { autoUpdate, computePosition, flip, offset } from "../../../external/floating-ui.js";
import { transformOrigin } from "../../dialog/transform-origin.js";
export function useSubmenuPosition({ placement = "right-start", shiftPadding, sideOffset = 2, alignOffset = 0, sub, root, }) {
useEffect(() => {
if (!sub || !open || !root)
return;
const middleware = [offset({ alignmentAxis: alignOffset, mainAxis: sideOffset })];
const flipMw = flip({
crossAxis: true,
});
if (placement.includes("-"))
middleware.push(flipMw);
else
middleware.push(flipMw);
middleware.push(transformOrigin({ arrowHeight: 0, arrowWidth: 0 }));
const clean = autoUpdate(root, sub, async () => {
const pos = await computePosition(root, sub, {
strategy: "fixed",
placement: placement,
middleware,
});
const x = pos.middlewareData.transformOrigin.x;
const y = pos.middlewareData.transformOrigin.y;
sub.style.transformOrigin = `${x} ${y}`;
sub.style.top = `${pos.y}px`;
sub.style.left = `${pos.x}px`;
});
return () => clean();
}, [alignOffset, placement, root, shiftPadding, sideOffset, sub]);
}