@zohodesk/components/es/v1/Avatar/Avatar.js

In this Package, we Provide Some Basic Components to Build Web App

import React, { useState } from 'react';
import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import { getInitial } from "../../utils/getInitial";
import AvatarSize from "../../Provider/AvatarSize";
import style from "../../Avatar/Avatar.module.css";
/*
1. need to change name into firstName lastName
2. pattern support via context as well as props
3. prop high priority to arrange firstName lastName
4. team pass name as lastName and pass pattern via prop
*/

function Avatar(props) {
  let {
    src,
    name,
    size,
    palette,
    onClick,
    title,
    shape,
    needTitle,
    dataId,
    initial,
    needBorder,
    borderOnActive,
    borderOnHover,
    textPalette,
    customClass,
    alternateSrc,
    isAnimate,
    dataSelectorId,
    customProps,
    needInnerBorder,
    needDefaultBorder
  } = props;
  let {
    AvatarProps = {}
  } = customProps;
  const [isLoaded, setLoaded] = useState(false);

  const putInvalidImageURLJSON = () => {
    let _validImgArr = [...Avatar.validImageURLs];
    let _invalidImgArr = [...Avatar.invalidImageURLs]; // if (alternateSrc) {
    //   _validImgArr.push(alternateSrc);
    // }

    const validIndex = _validImgArr.indexOf(src);

    if (validIndex !== -1) {
      _validImgArr.splice(validIndex, 1);
    }

    _invalidImgArr.push(src);

    Avatar.invalidImageURLs = _invalidImgArr;
    Avatar.validImageURLs = _validImgArr;
    setLoaded(isLoaded => !isLoaded);
  };

  const putValidImageURLJSON = () => {
    const validImgArr = Avatar.validImageURLs;
    const invalidImgArr = Avatar.invalidImageURLs;

    if (src && validImgArr.indexOf(src) === -1 && invalidImgArr.indexOf(src) === -1) {
      let _validImgArr = [...validImgArr];

      _validImgArr.push(src);

      Avatar.validImageURLs = _validImgArr;
      setLoaded(isLoaded => !isLoaded);
    }
  };
  /* this will cause error if user name already have some space need to move firstName lastName user preference pattern*/


  const getInitialByFullName = function () {
    let fullName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
    fullName = (fullName || '').trim();
    let nameList = fullName.split(' ');

    if (nameList.length === 1) {
      return getInitial('', nameList[0]);
    }

    return getInitial(nameList[0], nameList[1]);
  };

  useEffectCallOnlyAfterState(() => {
    setLoaded(isLoaded => !isLoaded);
  }, [src]);
  let textStyle = textPalette ? style[textPalette] : palette === 'secondary' ? style.white : style.black;
  let shapeStyle = shape === 'circle' ? 'circle' : `square_${size}`;
  initial = initial || getInitialByFullName(name);
  let isInvalidImageList = Avatar.invalidImageURLs.indexOf(src) !== -1; //let isValidImageList = Avatar.validImageURLs.indexOf(src) !== -1;

  let showAvatar = src && !isInvalidImageList;
  let showInitial = !showAvatar || showAvatar && isInvalidImageList;
  const showAlternateAvatar = alternateSrc ? showInitial : false;
  let border = borderOnHover || onClick;
  let showDefaultBorder = src && !isInvalidImageList && needDefaultBorder;
  let borderStyle = (showDefaultBorder || !src || !showAvatar || showInitial) && needBorder ? `${style.border} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ` : '';
  borderStyle = showAlternateAvatar ? '' : borderStyle;
  return /*#__PURE__*/React.createElement("div", {
    className: `${style.avatar} ${style[size]} ${AvatarSize(size)} ${style[shapeStyle]} ${style[palette]} ${textStyle} ${borderStyle} ${customClass ? customClass : ''}`,
    "data-title": needTitle ? title ? title : name : null,
    "data-id": dataId,
    "data-test-id": dataId,
    onClick: onClick,
    "data-selector-id": dataSelectorId,
    tabIndex: onClick ? 0 : null,
    ...AvatarProps
  }, showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
    className: `${style.initial}`,
    "data-id": `${dataId}_AvatarInitial`,
    "data-test-id": `${dataId}_AvatarInitial`,
    "data-selector-id": `${dataSelectorId}_AvatarInitial`
  }, initial), (showAvatar || showAlternateAvatar) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
    className: `${style.image} ${isAnimate ? style.animate : ''} ${needInnerBorder ? style.innerBorder : ''}`,
    "data-id": `${dataId}_AvatarImg`,
    "data-test-id": `${dataId}_AvatarImg`,
    "data-selector-id": `${dataSelectorId}_AvatarImg`,
    name: name,
    onError: putInvalidImageURLJSON,
    onLoad: putValidImageURLJSON,
    src: showAlternateAvatar ? alternateSrc : src,
    alt: name
  }), showDefaultBorder ? null : /*#__PURE__*/React.createElement("span", {
    className: `${style.shadow} ${textStyle} `
  })));
}

export default Avatar;
Avatar.defaultProps = defaultProps;
Avatar.propTypes = propTypes;
Avatar.invalidImageURLs = [];
Avatar.validImageURLs = [];