@activecollab/components
Version:
ActiveCollab Components
96 lines • 2.77 kB
JavaScript
import React, { useCallback, useMemo } from "react";
import { StyledMultiAvatar, StyledMultiAvatarInner } from "./Styles";
/**
* @component MultiAvatar
* @description
* The MultiAvatar component is used to represent user, and displays the profile picture, initials or fallback icon.
*
* @prop {url} - The image urls of the MultiAvatar.
* @prop {size} - controls the size of an MultiAvatar (width and height) in pixels.
* @prop {alt} - alt attributes of the imgs.
*
* @example
* <MultiAvatar
* url={["https://faces-img.xcdn.link/image-lorem-face-954.jpg", "https://faces-img.xcdn.link/image-lorem-face-953.jpg"]}
* alt={["Profile picture of John", "Profile picture of Sarah"]} />
*
* @example
* <MultiAvatar
* url={["https://faces-img.xcdn.link/image-lorem-face-954.jpg", "https://faces-img.xcdn.link/image-lorem-face-953.jpg"]}
* alt={["Profile picture of John", "Profile picture of Sarah"]}
* >
* <Badge />
* </MultiAvatar>
*
* @see
* https://system.activecollab.com/?path=/story/components-button-indicators-avatar--avatar
* @see
* https://design.activecollab.com/docs/components/avatar
*/
export const MultiAvatar = _ref => {
let {
url,
alt,
size = 24,
className,
children
} = _ref;
const setSize = useCallback(i => {
switch (url.length) {
case 1:
return {
width: size + "px",
height: size + "px"
};
case 2:
return {
width: size / 2 + "px",
height: size + "px"
};
case 3:
if (i === 0) {
return {
width: size / 2 + "px",
height: size + "px"
};
} else {
return {
width: size / 2 + "px",
height: size / 2 + "px"
};
}
default:
return {
width: size / 2 + "px",
height: size / 2 + "px"
};
}
}, [size, url.length]);
const slicedUrl = useMemo(() => {
if ((url == null ? void 0 : url.length) > 4) {
return url.slice(0, 4);
}
return url;
}, [url]);
return /*#__PURE__*/React.createElement("span", {
className: "tw-relative tw-inline-flex"
}, /*#__PURE__*/React.createElement(StyledMultiAvatar, {
style: {
width: size + "px",
height: size + "px"
},
className: className,
$urlCount: url.length
}, slicedUrl.map((v, i) => /*#__PURE__*/React.createElement(StyledMultiAvatarInner, {
style: setSize(i),
className: "c-multi-avatar__wrapper",
key: "avatar_" + i
}, /*#__PURE__*/React.createElement("img", {
src: v,
alt: alt && alt[i] ? alt[i] : "avatar_" + i,
width: size,
height: size
})))), children);
};
MultiAvatar.displayName = "MultiAvatar";
//# sourceMappingURL=MultiAvatar.js.map