@metamask/design-system-react
Version:
Design system react ui components
1 lines • 9.35 kB
Source Map (JSON)
{"version":3,"file":"AvatarGroup.mjs","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, useCallback } from 'react';\n\nimport { AvatarGroupSize, AvatarGroupVariant } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport type { AvatarAccountProps } from '../AvatarAccount';\nimport { AvatarAccount } from '../AvatarAccount';\nimport type { AvatarBaseSize } from '../AvatarBase';\nimport { AvatarBase, AvatarBaseShape } from '../AvatarBase';\nimport type { AvatarFaviconProps } from '../AvatarFavicon';\nimport { AvatarFavicon } from '../AvatarFavicon';\nimport type { AvatarNetworkProps } from '../AvatarNetwork';\nimport { AvatarNetwork } from '../AvatarNetwork';\nimport type { AvatarTokenProps } from '../AvatarToken';\nimport { AvatarToken } from '../AvatarToken';\nimport { TextColor } from '../Text';\n\nimport {\n AVATAR_GROUP_SIZE_ISREVERSE_NEGATIVESPACEBETWEENAVATARS_MAP,\n AVATAR_GROUP_SIZE_NEGATIVESPACEBETWEENAVATARS_MAP,\n AVATAR_GROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT_MAP,\n} from './AvatarGroup.constants';\nimport type { AvatarGroupProps } from './AvatarGroup.types';\n\nexport const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(\n (\n {\n variant,\n avatarPropsArr,\n size = AvatarGroupSize.Md,\n max = 4,\n isReverse = false,\n overflowTextProps,\n style,\n className,\n ...props\n },\n ref,\n ) => {\n const overflowCounter = avatarPropsArr.length - max;\n const shouldRenderOverflowCounter = overflowCounter > 0;\n const negativeSpaceBetweenAvatarsTwClassName = isReverse\n ? AVATAR_GROUP_SIZE_ISREVERSE_NEGATIVESPACEBETWEENAVATARS_MAP[size]\n : AVATAR_GROUP_SIZE_NEGATIVESPACEBETWEENAVATARS_MAP[size];\n const containerClassNames = twMerge(\n // Base style\n 'inline-flex',\n // Reverse style\n isReverse ? 'flex-row-reverse' : 'flex-row',\n className,\n );\n const avatarListContainerClassNames = twMerge(\n // Base style\n 'flex',\n // Reverse style\n isReverse ? 'flex-row-reverse' : 'flex-row',\n );\n const overflowTextContainerClassNames = twMerge(\n // Base style\n 'bg-icon-default',\n // Negative spacing\n negativeSpaceBetweenAvatarsTwClassName,\n );\n\n const renderAvatarList = useCallback(\n () =>\n avatarPropsArr.slice(0, max).map((avatarProps, index) => {\n switch (variant) {\n case AvatarGroupVariant.Account:\n return (\n <AvatarAccount\n hasBorder\n key={`avatar-${index}`}\n {...(avatarProps as AvatarAccountProps)}\n size={size as unknown as AvatarBaseSize}\n className={`${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`}\n style={{\n zIndex: index + 1,\n ...avatarProps.style,\n }}\n />\n );\n case AvatarGroupVariant.Favicon:\n return (\n <AvatarFavicon\n hasBorder\n key={`avatar-${index}`}\n {...(avatarProps as AvatarFaviconProps)}\n size={size as unknown as AvatarBaseSize}\n className={`${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`}\n style={{\n zIndex: index + 1,\n ...avatarProps.style,\n }}\n />\n );\n case AvatarGroupVariant.Network:\n return (\n <AvatarNetwork\n hasBorder\n key={`avatar-${index}`}\n {...(avatarProps as AvatarNetworkProps)}\n size={size as unknown as AvatarBaseSize}\n className={`${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`}\n style={{\n zIndex: index + 1,\n ...avatarProps.style,\n }}\n />\n );\n case AvatarGroupVariant.Token:\n return (\n <AvatarToken\n hasBorder\n key={`avatar-${index}`}\n {...(avatarProps as AvatarTokenProps)}\n size={size as unknown as AvatarBaseSize}\n className={`${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`}\n style={{\n zIndex: index + 1,\n ...avatarProps.style,\n }}\n />\n );\n default:\n throw new Error(\n `Invalid Avatar Variant: ${String(variant)}. Expected one of: ${Object.values(AvatarGroupVariant).join(', ')}`,\n );\n }\n }),\n [avatarPropsArr, max, size],\n );\n\n return (\n <div ref={ref} {...props} style={style} className={containerClassNames}>\n <div className={avatarListContainerClassNames}>\n {renderAvatarList()}\n </div>\n {shouldRenderOverflowCounter && (\n <AvatarBase\n className={overflowTextContainerClassNames}\n style={{\n zIndex: avatarPropsArr.length,\n }}\n hasBorder\n fallbackText={`+${overflowCounter}`}\n fallbackTextProps={{\n variant: AVATAR_GROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT_MAP[size],\n color: TextColor.PrimaryInverse,\n }}\n size={size}\n shape={\n variant === AvatarGroupVariant.Network\n ? AvatarBaseShape.Square\n : AvatarBaseShape.Circle\n }\n {...overflowTextProps}\n />\n )}\n </div>\n );\n },\n);\n"]}