@metamask/design-system-react
Version:
Design system react ui components
76 lines • 4.64 kB
JavaScript
function $importDefault(module) {
if (module?.__esModule) {
return module.default;
}
return module;
}
import $React, { forwardRef, useCallback } from "react";
const React = $importDefault($React);
import { AvatarGroupSize, AvatarGroupVariant } from "../../types/index.mjs";
import { twMerge } from "../../utils/tw-merge.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 { AVATAR_GROUP_SIZE_ISREVERSE_NEGATIVESPACEBETWEENAVATARS_MAP, AVATAR_GROUP_SIZE_NEGATIVESPACEBETWEENAVATARS_MAP, AVATAR_GROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT_MAP } from "./AvatarGroup.constants.mjs";
export const AvatarGroup = forwardRef(({ variant, avatarPropsArr, size = AvatarGroupSize.Md, max = 4, isReverse = false, overflowTextProps, style, className, ...props }, ref) => {
const overflowCounter = avatarPropsArr.length - max;
const shouldRenderOverflowCounter = overflowCounter > 0;
const negativeSpaceBetweenAvatarsTwClassName = isReverse
? AVATAR_GROUP_SIZE_ISREVERSE_NEGATIVESPACEBETWEENAVATARS_MAP[size]
: AVATAR_GROUP_SIZE_NEGATIVESPACEBETWEENAVATARS_MAP[size];
const containerClassNames = twMerge(
// Base style
'inline-flex',
// Reverse style
isReverse ? 'flex-row-reverse' : 'flex-row', className);
const avatarListContainerClassNames = twMerge(
// Base style
'flex',
// Reverse style
isReverse ? 'flex-row-reverse' : 'flex-row');
const overflowTextContainerClassNames = twMerge(
// Base style
'bg-icon-default',
// Negative spacing
negativeSpaceBetweenAvatarsTwClassName);
const renderAvatarList = useCallback(() => avatarPropsArr.slice(0, max).map((avatarProps, index) => {
switch (variant) {
case AvatarGroupVariant.Account:
return (React.createElement(AvatarAccount, { hasBorder: true, key: `avatar-${index}`, ...avatarProps, size: size, className: `${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`, style: {
zIndex: index + 1,
...avatarProps.style,
} }));
case AvatarGroupVariant.Favicon:
return (React.createElement(AvatarFavicon, { hasBorder: true, key: `avatar-${index}`, ...avatarProps, size: size, className: `${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`, style: {
zIndex: index + 1,
...avatarProps.style,
} }));
case AvatarGroupVariant.Network:
return (React.createElement(AvatarNetwork, { hasBorder: true, key: `avatar-${index}`, ...avatarProps, size: size, className: `${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`, style: {
zIndex: index + 1,
...avatarProps.style,
} }));
case AvatarGroupVariant.Token:
return (React.createElement(AvatarToken, { hasBorder: true, key: `avatar-${index}`, ...avatarProps, size: size, className: `${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`, style: {
zIndex: index + 1,
...avatarProps.style,
} }));
default:
throw new Error(`Invalid Avatar Variant: ${String(variant)}. Expected one of: ${Object.values(AvatarGroupVariant).join(', ')}`);
}
}), [avatarPropsArr, max, size]);
return (React.createElement("div", { ref: ref, ...props, style: style, className: containerClassNames },
React.createElement("div", { className: avatarListContainerClassNames }, renderAvatarList()),
shouldRenderOverflowCounter && (React.createElement(AvatarBase, { className: overflowTextContainerClassNames, style: {
zIndex: avatarPropsArr.length,
}, hasBorder: true, fallbackText: `+${overflowCounter}`, fallbackTextProps: {
variant: AVATAR_GROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT_MAP[size],
color: TextColor.PrimaryInverse,
}, size: size, shape: variant === AvatarGroupVariant.Network
? AvatarBaseShape.Square
: AvatarBaseShape.Circle, ...overflowTextProps }))));
});
//# sourceMappingURL=AvatarGroup.mjs.map