@metamask/design-system-react-native
Version:
51 lines • 2.94 kB
JavaScript
function $importDefault(module) {
if (module?.__esModule) {
return module.default;
}
return module;
}
import { useTailwind } from "@metamask/design-system-twrnc-preset";
import $React, { useCallback } from "react";
const React = $importDefault($React);
import { View } from "react-native/index.js";
import { AvatarGroupSize, AvatarGroupVariant } from "../../types/index.mjs";
import { AvatarAccount } from "../AvatarAccount/index.mjs";
import { AvatarBase, AvatarBaseShape } from "../AvatarBase/index.mjs";
import { AvatarFavicon } from "../AvatarFavicon/index.mjs";
import { AvatarNetwork } from "../AvatarNetwork/index.mjs";
import { AvatarToken } from "../AvatarToken/index.mjs";
import { TextColor } from "../Text/index.mjs";
import { MAP_AVATARGROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT, TWCLASSMAP_AVATARGROUP_SIZE_SPACEBETWEENAVATARS } from "./AvatarGroup.constants.mjs";
export const AvatarGroup = ({ variant, avatarPropsArr, size = AvatarGroupSize.Md, max = 4, isReverse = false, overflowTextProps, style, twClassName, ...props }) => {
const tw = useTailwind();
const overflowCounter = avatarPropsArr.length - max;
const shouldRenderOverflowCounter = overflowCounter > 0;
const twContainerClassNames = `
${isReverse ? 'flex-row-reverse' : 'flex-row'}
${TWCLASSMAP_AVATARGROUP_SIZE_SPACEBETWEENAVATARS[size]}
`;
const renderAvatarList = useCallback(() => avatarPropsArr.slice(0, max).map((avatarProps, index) => {
switch (variant) {
case AvatarGroupVariant.Account:
return (<AvatarAccount key={`avatar-${index}`} {...avatarProps} size={size} hasBorder/>);
case AvatarGroupVariant.Favicon:
return (<AvatarFavicon key={`avatar-${index}`} {...avatarProps} size={size} hasBorder/>);
case AvatarGroupVariant.Network:
return (<AvatarNetwork key={`avatar-${index}`} {...avatarProps} size={size} hasBorder/>);
case AvatarGroupVariant.Token:
return (<AvatarToken key={`avatar-${index}`} {...avatarProps} size={size} hasBorder/>);
default:
throw new Error(`Invalid Avatar Variant: ${String(variant)}. Expected one of: ${Object.values(AvatarGroupVariant).join(', ')}`);
}
}), [avatarPropsArr, max, size, variant]);
return (<View style={[tw `${twContainerClassNames}`, style]} {...props}>
{renderAvatarList()}
{shouldRenderOverflowCounter && (<AvatarBase twClassName="bg-icon-default" hasBorder fallbackText={`+${overflowCounter}`} fallbackTextProps={{
variant: MAP_AVATARGROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT[size],
color: TextColor.PrimaryInverse,
}} size={size} shape={variant === AvatarGroupVariant.Network
? AvatarBaseShape.Square
: AvatarBaseShape.Circle} {...overflowTextProps}/>)}
</View>);
};
//# sourceMappingURL=AvatarGroup.mjs.map