@flexnative/avatar/dist/styles.js

React Native Avatar

/**
 * @ Author: Redon Alla
 * @ Create Time: 2024-06-07 23:29:01
 * @ Modified by: Redon Alla
 * @ Modified time: 2025-03-24 21:09:27
 * @ Description: Defines the styling functions for the `Avatar` and `AvatarGroup` components.
 *              This module provides functions to generate style objects based on the provided props and theme.
 */
import { StyleSheet } from 'react-native';
import { AVATAR_SIZES } from './constants';
import { getBackgroundColor, getTextColor } from './utilities';
/**
 * Generates a `StyleSheet` object for an `Avatar` component based on the provided props and theme.
 *
 * @function applyStyle
 * @param {AvatarItemStyleProps} props - The properties used to style the avatar.
 * @param {BaseTheme<any>} theme - The current theme object.
 * @returns {StyleSheet.NamedStyles<any>} A `StyleSheet` object containing the styles for the avatar.
 *
 * @example
 * ```typescript
 * const theme = useThemeState();
 * const styles = applyStyle({ size: 'medium', color: 'primary', radius: 'medium', fillMode: 'solid' }, theme);
 * ```
 */
export default function applyStyle(props, theme) {
    const size = AVATAR_SIZES[props.size] ?? props.size;
    const themeColor = theme.colors[props.color] ?? props.color;
    return StyleSheet.create({
        container: {
            width: size,
            height: size,
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: props.backgroundColor ?? getBackgroundColor(props.fillMode, themeColor, theme.colors[`${props.color}Subtle`]),
            borderColor: props.borderColor || props.color,
            borderRadius: theme.borders.radius[props.radius] ?? props.radius,
            borderWidth: theme.borders.width[props.borderWidth] ?? props.borderWidth,
            borderStyle: 'solid'
        },
        text: {
            fontFamily: 'Medium',
            textAlign: 'center',
            verticalAlign: 'middle',
            color: props.textColor ?? getTextColor(theme.isDark, props.color, themeColor, props.fillMode, theme.colors.black),
            fontSize: size
        },
        icon: {
            fontFamily: 'Icons',
            textAlign: 'center',
            verticalAlign: 'middle',
            color: props.iconColor ?? getTextColor(theme.isDark, props.color, themeColor, props.fillMode, theme.colors.black),
            fontSize: size / 2
        },
    });
}
/**
 * Generates a `StyleSheet` object for an `AvatarGroup` component based on the provided props.
 *
 * @function applyGroupStyle
 * @param {AvatarGroupStyleProps} props - The properties used to style the avatar group.
 * @returns {StyleSheet.NamedStyles<any>} A `StyleSheet` object containing the styles for the avatar group.
 *
 * @example
 * ```typescript
 * const styles = applyGroupStyle({ itemPadding: 8, itemBorderWidth: 2, itemBorderColor: 'primary' });
 * ```
 */
export function applyGroupStyle(props) {
    return StyleSheet.create({
        container: {
            display: 'flex',
            flexDirection: 'row',
            backgroundColor: 'transparent',
            marginStart: props.itemPadding
        },
        item: {
            borderRadius: 50,
            marginStart: -1 * props.itemPadding,
            borderColor: props.itemBorderColor,
            borderWidth: props.itemBorderWidth,
        }
    });
}
//# sourceMappingURL=styles.js.map