@metamask/design-system-react-native/dist/components/AvatarFavicon/AvatarFavicon.mjs

Design System React Native

function $importDefault(module) {
    if (module?.__esModule) {
        return module.default;
    }
    return module;
}
import $React, { useState } from "react";
const React = $importDefault($React);
import { AvatarFaviconSize, AvatarBaseShape } from "../../types/index.mjs";
import { AvatarBase } from "../AvatarBase/index.mjs";
import { ImageOrSvg } from "../temp-components/ImageOrSvg/index.mjs";
export const AvatarFavicon = ({ src, size = AvatarFaviconSize.Md, name, fallbackText, fallbackTextProps, twClassName, imageOrSvgProps, ...props }) => {
    const [finalFallbackText, setFallbackText] = useState('');
    const backupFallbackText = fallbackText || name?.[0] || '';
    const onImageErrorHandler = (e) => {
        setFallbackText(backupFallbackText);
        imageOrSvgProps?.onImageError?.(e);
    };
    const onSvgErrorHandler = (e) => {
        setFallbackText(backupFallbackText);
        imageOrSvgProps?.onSvgError?.(e);
    };
    return (<AvatarBase size={size} shape={AvatarBaseShape.Circle} fallbackText={finalFallbackText} fallbackTextProps={fallbackTextProps} twClassName={twClassName} {...props}>
      {src && (<ImageOrSvg src={src} width={'100%'} height={'100%'} {...imageOrSvgProps} imageProps={{
                resizeMode: 'contain',
                ...imageOrSvgProps?.imageProps,
            }} onImageError={onImageErrorHandler} onSvgError={onSvgErrorHandler}/>)}
    </AvatarBase>);
};
//# sourceMappingURL=AvatarFavicon.mjs.map