import { cva, type VariantProps } from "class-variance-authority"; import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useMemo, useState, } from "react"; import { Image, type ImageProps, Text, View } from "react-native"; import { withUniwind } from "uniwind"; import { cn } from "@/lib/utils"; // Types type AvatarSize = NonNullable["size"]>; type AvatarImageStatus = "idle" | "loading" | "loaded" | "error"; type AvatarImageKeyStatus = { status: AvatarImageStatus; srcKey: string; }; type AvatarContextValue = { size: AvatarSize; imageKeyStatus: AvatarImageKeyStatus; setImageKeyStatus: (status: AvatarImageKeyStatus) => void; }; type AvatarProps = React.ComponentProps & VariantProps & { children?: React.ReactNode; }; type AvatarImageProps = ImageProps; type AvatarFallbackProps = React.ComponentProps & { children?: React.ReactNode; }; type AvatarBadgeProps = React.ComponentProps & { children?: React.ReactNode; }; type ClassNameElement = React.ReactElement<{ className?: string }>; // Context const AvatarContext = createContext(null); const useAvatarContext = () => { const context = useContext(AvatarContext); if (!context) { throw new Error("Avatar components must be used within an Avatar"); } return context; }; const StyledImage = withUniwind(Image); // Components export const Avatar = ({ children, className, size = "default", ...props }: AvatarProps) => { const [imageKeyStatus, _setImageKeyStatus] = useState({ srcKey: "", status: "idle", }); const setImageKeyStatus = useCallback((payload: AvatarImageKeyStatus) => { _setImageKeyStatus((prev) => { const isSameKey = payload.srcKey === prev.srcKey; if (prev.status === "loaded" && isSameKey) { return prev; } return payload; }); }, []); const ctx = useMemo( () => ({ imageKeyStatus, setImageKeyStatus, size: size ?? "default", }), [imageKeyStatus, size, setImageKeyStatus] ); return ( {children} ); }; export const AvatarImage = ({ alt, className, onError, onLoad, onLoadStart, source, src, ...props }: AvatarImageProps) => { const { setImageKeyStatus } = useAvatarContext(); const resolvedSource = source ?? (src ? { uri: src } : undefined); const resolvedSourceKey = JSON.stringify(resolvedSource); if (!resolvedSource) { return null; } return ( { setImageKeyStatus({ srcKey: resolvedSourceKey, status: "error" }); onError?.(event); }} onLoad={(event) => { setImageKeyStatus({ srcKey: resolvedSourceKey, status: "loaded" }); onLoad?.(event); }} onLoadStart={() => { setImageKeyStatus({ srcKey: resolvedSourceKey, status: "loading" }); onLoadStart?.(); }} source={resolvedSource} {...props} /> ); }; export const AvatarFallback = ({ children, className, ...props }: AvatarFallbackProps) => { const { imageKeyStatus, size } = useAvatarContext(); if (imageKeyStatus.status === "loaded") { return null; } return ( {Children.map(children, (child) => { if (typeof child === "string") { return ( {child} ); } return child; })} ); }; export const AvatarBadge = ({ children, className, ...props }: AvatarBadgeProps) => { const { size } = useAvatarContext(); return ( {Children.map(children, (child) => { if (!isValidElement(child)) { return child; } const element = child as ClassNameElement; return cloneElement(element, { className: cn( size === "sm" ? "size-1.5" : "size-2", "text-primary-foreground", element.props.className ), }); })} ); }; export const AvatarGroup = ({ children, className, ...props }: React.ComponentProps) => { return ( {Children.map(children, (child, index) => { if (!isValidElement(child)) { return child; } const element = child as ClassNameElement; const overlapClassName = index > 0 ? "-ml-2" : undefined; return cloneElement(element, { className: cn( overlapClassName, "border-background border-2", element.props.className ), }); })} ); }; export const AvatarGroupCount = ({ children, className, ...props }: React.ComponentProps & { children?: React.ReactNode; }) => { return ( {Children.map(children, (child) => { if (typeof child === "string") { return ( {child} ); } return child; })} ); }; // Styles const avatarVariants = cva( "border-border relative flex shrink-0 items-center justify-center rounded-full border", { defaultVariants: { size: "default", }, variants: { size: { default: "size-8", lg: "size-10", sm: "size-6", }, }, } ); const avatarBadgeVariants = cva( "border-background bg-primary absolute z-10 flex items-center justify-center rounded-full border-2", { defaultVariants: { size: "default", }, variants: { size: { default: "right-0 bottom-0 size-2.5", lg: "right-0 bottom-0 size-3", sm: "right-0 bottom-0 size-2", }, }, } );