@metamask/design-system-react
Version:
Design system react ui components
22 lines • 1.32 kB
JavaScript
function $importDefault(module) {
if (module?.__esModule) {
return module.default;
}
return module;
}
import $React, { forwardRef, useState } from "react";
const React = $importDefault($React);
import { AvatarNetworkSize, AvatarBaseShape } from "../../types/index.mjs";
import { AvatarBase } from "../AvatarBase/index.mjs";
export const AvatarNetwork = forwardRef(({ src, name = '', fallbackText, fallbackTextProps, className, size = AvatarNetworkSize.Md, imageProps, ...props }, ref) => {
const [finalFallbackText, setFinalFallbackText] = useState('');
const backupFallbackText = fallbackText || name?.[0] || '';
const altText = name || 'Network logo'; // TBC: Add localization for default text
const onErrorHandler = (e) => {
setFinalFallbackText(backupFallbackText);
imageProps?.onError?.(e);
};
return (React.createElement(AvatarBase, { ref: ref, shape: AvatarBaseShape.Square, size: size, className: className, fallbackText: src ? finalFallbackText : backupFallbackText, fallbackTextProps: fallbackTextProps, ...props }, src && (React.createElement("img", { src: src, alt: altText, className: "size-full object-contain", ...imageProps, onError: onErrorHandler }))));
});
AvatarNetwork.displayName = 'AvatarNetwork';
//# sourceMappingURL=AvatarNetwork.mjs.map