saagie-ui/src/react/core/atoms/avatar/Avatar.js

Saagie UI from Saagie Design System

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Icon } from '../icon/Icon';
import { deprecatedProp } from '../../../helpers';

const propTypes = {
  /**
   * Define the number of users.
   * This prop is mostly used by AvatarStack component.
   */
  plus: PropTypes.number,

  /**
   * @deprecated since 0.69.0, use src prop instead.
   * The image source to set for the Avatar component.
   */
  imgUrl: PropTypes.string,

  /**
   * The image source to set for the Avatar component.
   */
  src: PropTypes.string,

  /**
   * The user or group name. It will automagically set initials in the
   * Avatar component.
   */
  name: PropTypes.string,

  /**
   * The icon name, you can find more info about the available names on the dedicated
   * page.
   */
  iconName: PropTypes.string,

  /**
   * The className property allows you to add more classes to the component.
   */
  className: PropTypes.string,

  /**
   * The default class of the component.
   */
  defaultClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),

  /**
   * The avatar size.
   */
  size: PropTypes.oneOf(['', 'sm', 'lg', 'xl']),

  /**
   * The isGroup property will change the avatar shape, this will implicitly
   * inform the user that the avatar component is now part of a group?
   */
  isGroup: PropTypes.bool,

  /**
   * The isStacked property allows multiple Avatar component to stack on each other.
   * This will also add a light border to distinguish the different avatars.
   */
  isStacked: PropTypes.bool,

  /**
   * The isStacked property allows multiple Avatar component to stack on each other.
   * This will also add a dark border to distinguish the different avatars.
   */
  isStackedDark: PropTypes.bool,

  /**
   * The component used for the root node.
   * Either a string to use a DOM element or a component.
   */
  tag: PropTypes.elementType,
};

const defaultProps = {
  plus: undefined,
  imgUrl: '',
  src: '',
  name: '',
  iconName: '',
  className: '',
  defaultClassName: 'sui-a-avatar',
  size: '',
  isGroup: false,
  isStacked: false,
  isStackedDark: false,
  tag: 'div',
};

export const Avatar = React.forwardRef(({
  plus,
  imgUrl,
  src,
  name,
  iconName,
  defaultClassName,
  className,
  size,
  isGroup,
  isStacked,
  isStackedDark,
  tag: Tag,
  ...props
}, ref) => {
  deprecatedProp(imgUrl, 'imgUrl', 'src');

  const classes = classnames(
    defaultClassName,
    size ? `as--${size}` : '',
    isGroup ? 'as--group' : '',
    isStacked ? 'as--stacked' : '',
    isStackedDark ? 'as--stacked as--dark' : '',
    className
  );

  const ContentRender = () => {
    if (plus) {
      return (
        <span>
          +
          {plus}
        </span>
      );
    }

    if (src || imgUrl) {
      return (
        <img data-testid="sui-a-avatar__image" src={src || imgUrl} alt={name} />
      );
    }

    if (iconName) {
      return (
        <Icon data-testid="sui-a-avatar__icon" name={iconName} />
      );
    }

    if (name) {
      const initials = (name || '')
        .split(' ')
        .slice(0, 3)
        .reduce((string, word) => string + word.charAt(0), '');

      return (
        <span>{initials}</span>
      );
    }

    return (
      <Icon data-testid="sui-a-avatar__icon" name={isGroup ? 'users' : 'user'} />
    );
  };

  return (
    <Tag className={classes} data-testid="sui-a-avatar" {...props} title={name} ref={ref}>
      <ContentRender />
    </Tag>
  );
});

Avatar.propTypes = propTypes;
Avatar.defaultProps = defaultProps;