@revenuecat/purchases-ui-js
Version:
Web components for Paywalls. Powered by RevenueCat
98 lines (97 loc) • 3.54 kB
JavaScript
import { px } from "../../utils/base-utils";
const ALIGNMENT_MAP = Object.freeze({
leading: "flex-start",
top: "flex-start",
center: "center",
trailing: "flex-end",
bottom: "flex-end",
});
const DISTRIBUTION_MAP = Object.freeze({
space_between: "space-between",
space_around: "space-around",
space_evenly: "space-evenly",
start: "flex-start",
center: "center",
end: "flex-end",
});
export function mapFixedWidthBounds(width) {
if (width.type !== "fixed") {
return {};
}
const value = px(width.value);
return { "min-width": value, "max-width": value };
}
export function mapFixedHeightBounds(height) {
if (height.type !== "fixed") {
return {};
}
const value = px(height.value);
return { "min-height": value, "max-height": value };
}
export function mapDimension(dimension) {
if (dimension.type === "zlayer") {
return {};
}
const direction = dimension.type === "vertical" ? "column" : "row";
const justify = DISTRIBUTION_MAP[dimension.distribution] || "center";
const align = ALIGNMENT_MAP[dimension.alignment] || "center";
return {
"flex-direction": direction,
"justify-content": justify,
"align-items": align,
};
}
const Z_ALIGNMENT_MAP = Object.freeze({
top_leading: { justifyContent: "flex-start", alignItems: "flex-start" },
top: { justifyContent: "center", alignItems: "flex-start" },
top_trailing: { justifyContent: "flex-end", alignItems: "flex-start" },
leading: { justifyContent: "flex-start", alignItems: "center" },
center: { justifyContent: "center", alignItems: "center" },
trailing: { justifyContent: "flex-end", alignItems: "center" },
bottom_leading: { justifyContent: "flex-start", alignItems: "flex-end" },
bottom: { justifyContent: "center", alignItems: "flex-end" },
bottom_trailing: { justifyContent: "flex-end", alignItems: "flex-end" },
});
export function mapLayerAlignment(alignment) {
return Z_ALIGNMENT_MAP[alignment];
}
export function mapBadge(badge, parentBorderWidth) {
if (badge == null) {
return {};
}
const { style, alignment } = badge;
const isTop = alignment.startsWith("top");
const isLeading = alignment.endsWith("leading");
const isTrailing = alignment.endsWith("trailing");
const isCenter = !isLeading && !isTrailing;
const offset = parentBorderWidth ?? 0;
if (style === "overlay") {
const translateX = isCenter ? "translateX(-50%)" : "";
const translateY = isTop ? "translateY(-50%)" : "translateY(50%)";
return {
"z-index": 10,
position: "absolute",
width: "max-content",
top: isTop ? px(-offset / 2) : "initial",
bottom: !isTop ? px(-offset / 2) : "initial",
left: isLeading ? px(-offset) : isCenter ? "50%" : "initial",
right: isTrailing ? px(-offset) : "initial",
transform: `${translateX} ${translateY}`,
};
}
if (style === "nested") {
return {
"z-index": 10,
position: "absolute",
inset: 0,
display: "flex",
top: isTop ? px(offset) : "initial",
bottom: !isTop ? px(offset) : "initial",
left: isLeading ? px(offset) : isCenter ? "50%" : "initial",
right: isTrailing ? px(offset) : "initial",
transform: isCenter ? "translateX(-50%)" : "initial",
};
}
// Not supported yet.
return {};
}