@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
68 lines (67 loc) • 2.48 kB
JavaScript
"use client";
//#region packages/@mantine/core/src/utils/Floating/FloatingArrow/get-arrow-position-styles.ts
function horizontalSide(placement, arrowY, arrowOffset, arrowPosition) {
if (placement === "center" || arrowPosition === "center") return { top: arrowY };
if (placement === "end") return { bottom: arrowOffset };
if (placement === "start") return { top: arrowOffset };
return {};
}
function verticalSide(placement, arrowX, arrowOffset, arrowPosition, dir) {
if (placement === "center" || arrowPosition === "center") return { left: arrowX };
if (placement === "end") return { [dir === "ltr" ? "right" : "left"]: arrowOffset };
if (placement === "start") return { [dir === "ltr" ? "left" : "right"]: arrowOffset };
return {};
}
const radiusByFloatingSide = {
bottom: "borderTopLeftRadius",
left: "borderTopRightRadius",
right: "borderBottomLeftRadius",
top: "borderBottomRightRadius"
};
function getArrowPositionStyles({ position, arrowSize, arrowOffset, arrowRadius, arrowPosition, arrowX, arrowY, dir }) {
const [side, placement = "center"] = position.split("-");
const baseStyles = {
width: arrowSize,
height: arrowSize,
transform: "rotate(45deg)",
position: "absolute",
[radiusByFloatingSide[side]]: arrowRadius
};
const arrowPlacement = -arrowSize / 2;
if (side === "left") return {
...baseStyles,
...horizontalSide(placement, arrowY, arrowOffset, arrowPosition),
right: arrowPlacement,
borderLeftColor: "transparent",
borderBottomColor: "transparent",
clipPath: "polygon(100% 0, 0 0, 100% 100%)"
};
if (side === "right") return {
...baseStyles,
...horizontalSide(placement, arrowY, arrowOffset, arrowPosition),
left: arrowPlacement,
borderRightColor: "transparent",
borderTopColor: "transparent",
clipPath: "polygon(0 100%, 0 0, 100% 100%)"
};
if (side === "top") return {
...baseStyles,
...verticalSide(placement, arrowX, arrowOffset, arrowPosition, dir),
bottom: arrowPlacement,
borderTopColor: "transparent",
borderLeftColor: "transparent",
clipPath: "polygon(0 100%, 100% 100%, 100% 0)"
};
if (side === "bottom") return {
...baseStyles,
...verticalSide(placement, arrowX, arrowOffset, arrowPosition, dir),
top: arrowPlacement,
borderBottomColor: "transparent",
borderRightColor: "transparent",
clipPath: "polygon(0 100%, 0 0, 100% 0)"
};
return {};
}
//#endregion
exports.getArrowPositionStyles = getArrowPositionStyles;
//# sourceMappingURL=get-arrow-position-styles.cjs.map