@wix/design-system
Version:
@wix/design-system
99 lines • 4.05 kB
JavaScript
import React from 'react';
import { st, classes } from './AvatarGroup.st.css.js';
import Avatar from '../Avatar';
import Text from '../Text';
import Divider from '../Divider';
import { dataHooks } from './constants';
const avatarSizeMap = {
medium: 'size30',
small: 'size24',
tiny: 'size18',
};
const tinySizeMaxIndicatorCount = 9;
const getRandomColorPattern = () => {
const patternColor = [
'A1',
'A2',
'A3',
'A4',
'A5',
'A6',
'A1',
'A2',
'A3',
'A4',
'A5',
'A6',
];
const firstIndex = Math.floor(Math.random() * 6); // get random number between 0 to 5
const lastIndex = firstIndex + 6;
return patternColor.slice(firstIndex, lastIndex);
};
const myPatternColors = getRandomColorPattern();
const getAvatarColor = ({ index, color }) => {
let colorIndex = index;
if (color) {
return color;
}
while (colorIndex > 5) {
colorIndex = colorIndex - 6;
}
return myPatternColors[colorIndex];
};
const setAvatarCompPropsArr = (items, avatarSize, itemsMaxLength) => {
// gets the items prop from avatarGroup component and set it with the proper prop for avatar component such as size, shape etc.
const avatarItems = items.map((item, index) => {
const { ariaLabel, color, imgProps, name, text, placeholder, title } = item;
const size = avatarSizeMap[avatarSize];
const shape = 'circle';
const avatarColor = getAvatarColor({ index, color });
return {
size,
shape,
ariaLabel,
color: avatarColor,
imgProps,
name,
text,
placeholder,
title,
};
});
const avatars = avatarItemsLengthHandler(avatarItems, avatarItems.length, itemsMaxLength, avatarSize);
return avatars;
};
const avatarItemsLengthHandler = (items, itemsLength, maxItems, avatarSize) => {
const remainingAvatarsCount = itemsLength - maxItems + 1;
const moreItemAvatar = {
text: `${avatarSize === 'tiny' && remainingAvatarsCount > tinySizeMaxIndicatorCount ? tinySizeMaxIndicatorCount : remainingAvatarsCount}+`,
size: avatarSizeMap[avatarSize],
isMoreItem: true,
};
if (itemsLength > maxItems && maxItems >= 2) {
items.length = maxItems;
items[maxItems - 1] = moreItemAvatar;
}
return items;
};
const MoreIndicator = ({ text, size }) => (React.createElement("div", { "data-hook": dataHooks.avatarGroupMoreItem, className: st(classes.moreIndicatorCircle, { size }) },
React.createElement(Text, { secondary: true, weight: "normal", className: classes.moreIndicatorText }, text)));
/** AvatarGroup */
const AvatarGroup = ({ dataHook, className, type = 'stretched', items = [], maxItems = 5, size = 'medium', showDivider = false, }) => {
const itemsMaxLength = maxItems < 2 ? 2 : maxItems;
const avatarCompArr = setAvatarCompPropsArr(items, size, itemsMaxLength);
return (React.createElement("div", { className: st(classes.root, { size, type }, className), "data-hook": dataHook }, avatarCompArr.map((item, index) => {
const key = `${Object.values(item)}`;
if (item.isMoreItem) {
return (React.createElement("div", { key: key, className: classes.avatarContainer },
React.createElement(MoreIndicator, { text: item.text, size: size })));
}
const shouldIncludeDivider = index === 0 && showDivider && avatarCompArr.length > 1;
return (React.createElement(React.Fragment, { key: key },
React.createElement("div", { className: classes.avatarContainer },
React.createElement(Avatar, { ...item, dataHook: dataHooks.avatarGroupItem })),
shouldIncludeDivider && (React.createElement(Divider, { direction: "vertical", className: st(classes.divider, { size, type }) }))));
})));
};
AvatarGroup.displayName = 'AvatarGroup';
export default AvatarGroup;
//# sourceMappingURL=AvatarGroup.js.map