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