@metamask/design-system-react-native
Version:
1 lines • 3.06 kB
Source Map (JSON)
{"version":3,"file":"AvatarToken.cjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AAGxC,iDAA+D;AAC/D,wDAA2C;AAC3C,wEAA2D;AAIpD,MAAM,WAAW,GAAG,CAAC,EAC1B,GAAG,EACH,IAAI,GAAG,uBAAe,CAAC,EAAE,EACzB,IAAI,EACJ,YAAY,EACZ,iBAAiB,EACjB,WAAW,EACX,eAAe,EACf,GAAG,KAAK,EACS,EAAE,EAAE;IACrB,MAAM,CAAC,iBAAiB,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAS,EAAE,CAAC,CAAC;IAElE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC3D,MAAM,mBAAmB,GAAG,CAC1B,CAA4C,EAC5C,EAAE;QACF,eAAe,CAAC,kBAAkB,CAAC,CAAC;QACpC,eAAe,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,CAAQ,EAAE,EAAE;QACrC,eAAe,CAAC,kBAAkB,CAAC,CAAC;QACpC,eAAe,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,uBAAU,CACT,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,uBAAe,CAAC,MAAM,CAAC,CAC9B,YAAY,CAAC,CAAC,iBAAiB,CAAC,CAChC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,GAAG,IAAI,CACN,CAAC,uBAAU,CACT,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,KAAK,CAAC,CAAC,MAAM,CAAC,CACd,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,IAAI,eAAe,CAAC,CACpB,UAAU,CAAC,CAAC;gBACV,UAAU,EAAE,SAAS;gBACrB,GAAG,eAAe,EAAE,UAAU;aAC/B,CAAC,CACF,YAAY,CAAC,CAAC,mBAAmB,CAAC,CAClC,UAAU,CAAC,CAAC,iBAAiB,CAAC,EAC9B,CACH,CACH;IAAA,EAAE,uBAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AAlDW,QAAA,WAAW,eAkDtB","sourcesContent":["import React, { useState } from 'react';\nimport type { ImageErrorEventData, NativeSyntheticEvent } from 'react-native';\n\nimport { AvatarTokenSize, AvatarBaseShape } from '../../types';\nimport { AvatarBase } from '../AvatarBase';\nimport { ImageOrSvg } from '../temp-components/ImageOrSvg';\n\nimport type { AvatarTokenProps } from './AvatarToken.types';\n\nexport const AvatarToken = ({\n src,\n size = AvatarTokenSize.Md,\n name,\n fallbackText,\n fallbackTextProps,\n twClassName,\n imageOrSvgProps,\n ...props\n}: AvatarTokenProps) => {\n const [finalFallbackText, setFallbackText] = useState<string>('');\n\n const backupFallbackText = fallbackText || name?.[0] || '';\n const onImageErrorHandler = (\n e: NativeSyntheticEvent<ImageErrorEventData>,\n ) => {\n setFallbackText(backupFallbackText);\n imageOrSvgProps?.onImageError?.(e);\n };\n\n const onSvgErrorHandler = (e: Error) => {\n setFallbackText(backupFallbackText);\n imageOrSvgProps?.onSvgError?.(e);\n };\n\n return (\n <AvatarBase\n size={size}\n shape={AvatarBaseShape.Circle}\n fallbackText={finalFallbackText}\n fallbackTextProps={fallbackTextProps}\n twClassName={twClassName}\n {...props}\n >\n {src && (\n <ImageOrSvg\n src={src}\n width={'100%'}\n height={'100%'}\n {...imageOrSvgProps}\n imageProps={{\n resizeMode: 'contain',\n ...imageOrSvgProps?.imageProps,\n }}\n onImageError={onImageErrorHandler}\n onSvgError={onSvgErrorHandler}\n />\n )}\n </AvatarBase>\n );\n};\n"]}