@revenuecat/purchases-ui-js
Version:
Web components for Paywalls. Powered by RevenueCat
34 lines (33 loc) • 1.52 kB
JavaScript
import { getActiveStateProps, getLinearGradientAngle, getMaskPath, getMaskStyle, getSizeStyle, prefixObject, stringifyStyles, } from "../../utils/style-utils";
/**
* Generates comprehensive styles for image components by combining gradient and size styles
* @param props - Image component properties including gradient, mask and size
* @returns Object containing image style variables and gradient style variables
*/
export const getImageComponentStyles = (props) => {
const { size, overrides, componentState, zStackChildStyles } = props;
const imageStyles = {
"--height": "unset",
"--width": "unset",
"--clip-path": "none",
"--border-end-start-radius": "unset",
"--border-end-end-radius": "unset",
"--border-start-start-radius": "unset",
"--border-start-end-radius": "unset",
"--position": "relative",
"--inset": "0",
"--transform": "initial",
};
const activeStateProps = getActiveStateProps(overrides, componentState);
Object.assign(imageStyles, zStackChildStyles);
Object.assign(imageStyles, getSizeStyle({ ...size, ...activeStateProps }));
Object.assign(imageStyles, getMaskStyle(props.mask_shape));
const prefixedImageStyles = prefixObject(imageStyles, "image");
const maskPath = getMaskPath(props);
const linearGradientAngle = getLinearGradientAngle(props);
return {
imageStyles: stringifyStyles(prefixedImageStyles),
maskPath,
linearGradientAngle,
};
};