ncore-ui-kit/src/components/avatarGroup/stylesheet.ts

import {
    type ViewStyle,
    StyleSheet
} from "react-native";
import type {
    AvatarGroupSizeConstantType,
    AvatarGroupDynamicStyleType,
    AvatarGroupMeasuresKeys,
    AvatarGroupSizeType
} from "./type";
import type {
    Mutable
} from "../../types";

export const AVATAR_GROUP_SIZES: Record<AvatarGroupSizeType, AvatarGroupMeasuresKeys> = {
    xxSmall: {
        fontSize: "labelSmallSize",
        iconSize: 14,
        size: 24
    },
    xSmall: {
        fontSize: "labelMediumSize",
        iconSize: 18,
        size: 32
    },
    small: {
        fontSize: "labelLargeSize",
        iconSize: 22,
        size: 40
    },
    medium: {
        fontSize: "bodyLargeSize",
        iconSize: 26,
        size: 48
    },
    large: {
        fontSize: "headlineSmallSize",
        iconSize: 32,
        size: 64
    },
    xLarge: {
        fontSize: "headlineMediumSize",
        iconSize: 40,
        size: 80
    },
    xxLarge: {
        fontSize: "displaySmallSize",
        iconSize: 60,
        size: 120
    },
    xxxLarge: {
        fontSize: "displayMediumSize",
        iconSize: 76,
        size: 150
    }
};

export const getAvatarGroupSize = ({
    size
}: AvatarGroupSizeConstantType): AvatarGroupMeasuresKeys => {
    const currentSize = AVATAR_GROUP_SIZES[size];

    return {
        fontSize: currentSize.fontSize,
        iconSize: currentSize.iconSize,
        size: currentSize.size
    };
};

const stylesheet = StyleSheet.create({
    container: {
        flexDirection: "row",
        position: "relative"
    },
    iconContainer: {
        justifyContent: "center",
        alignItems: "center"
    },
    icon: {
    },
    moreAvatarsContainer: {
        justifyContent: "center",
        alignItems: "center"
    }
});

export const useStyles = ({
    avatarBackgroundColor,
    currentSize,
    borderColor,
    isDisabled,
    isLoading,
    avatars,
    borders,
    colors
}: AvatarGroupDynamicStyleType) => {
    const styles = {
        container: {
        } as Mutable<ViewStyle>,
        iconContainer: {
            borderColor: borderColor ? borderColor === "transparent" ? "transparent" : colors.content.border[borderColor] : avatarBackgroundColor ? colors.content.container[avatarBackgroundColor] : colors.content.container.default,
            transform: [{
                translateX: avatars && avatars.length === 1 ? 0 : (currentSize.size / 3) * -1
            }],
            backgroundColor: colors.content.container.subtle,
            borderRadius: currentSize.size / 2,
            borderWidth: borders.subtract,
            height: currentSize.size,
            width: currentSize.size
        } as Mutable<ViewStyle>,
        icon: {
        } as Mutable<ViewStyle>,
        moreAvatarsContainer: {
            borderColor: borderColor ? borderColor === "transparent" ? "transparent" : colors.content.border[borderColor] : avatarBackgroundColor ? colors.content.container[avatarBackgroundColor] : colors.content.container.default,
            backgroundColor: colors.content.container.subtle,
            transform: [{
                translateX: (currentSize.size / 1.5) * -1
            }],
            borderRadius: currentSize.size / 2,
            borderWidth: borders.subtract,
            height: currentSize.size,
            width: currentSize.size
        } as Mutable<ViewStyle>,
        avatar: {
        } as Mutable<ViewStyle>
    };

    if(isDisabled) {
        styles.container.opacity = 0.33;
    }

    if(isLoading) {
        styles.container.opacity = 0.33;
    }

    return styles;
};
export default stylesheet;