@activecollab/components/dist/esm/components/Avatar/Avatar.js

ActiveCollab Components

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["url", "alt", "size", "className", "imgClassName", "children"];
import React, { forwardRef, useState } from "react";
import { StyledAvatar, StyledWrapper } from "./Styles";
import { SkeletonLoader } from "../Loaders";
/**
 * @component Avatar
 * @description
 * The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
 *
 * @prop {url} - The image url of the Avatar.
 * @prop {size} - controls the size of an Avatar (width and height) in pixels.
 * @prop {alt} - alt attribute of the img.
 * @prop {imgClassName} - class name that attaches to img element nested in Wrapper
 *
 * @example
 * <Avatar url="https://faces-img.xcdn.link/image-lorem-face-954.jpg" alt="Profile picture of John" />
 *
 * @example
 * <Avatar
 *   url="https://faces-img.xcdn.link/image-lorem-face-954.jpg"
 *   alt="Profile picture of John">
 *   <Badge size={8} backgroundColor="green" position="bottom-left" />
 * </Avatar>
 *
 * @see
 * https://system.activecollab.com/?path=/story/components-button-indicators-avatar--avatar
 * @see
 * https://design.activecollab.com/docs/components/avatar
 */
export const Avatar = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
      url,
      alt = "Avatar Image",
      size = 24,
      className,
      imgClassName,
      children
    } = _ref,
    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
  const [imageLoaded, setImageLoaded] = useState(false);
  return /*#__PURE__*/React.createElement(StyledWrapper, {
    className: className
  }, children, /*#__PURE__*/React.createElement(StyledAvatar, _extends({
    ref: ref,
    src: url,
    alt: alt,
    width: size,
    height: size,
    onLoad: () => {
      setImageLoaded(true);
    },
    role: "img",
    className: imgClassName,
    style: {
      display: imageLoaded ? "block" : "none"
    }
  }, rest)), !imageLoaded && /*#__PURE__*/React.createElement(SkeletonLoader, {
    "data-testid": "loader",
    style: {
      width: size,
      height: size,
      borderRadius: "100%"
    }
  }));
});
Avatar.displayName = "Avatar";
//# sourceMappingURL=Avatar.js.map