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

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

import React from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import { getInitial } from "../utils/getInitial";
import AvatarSize from "../Provider/AvatarSize";
import style from "./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
*/

/*
eslint css-modules/no-unused-class: [2, { markAsUsed: ['circle', 'square',
'small','medium','xmedium',"xsmall", "large", "xlarge", "primary", "secondary",
"info","default"] }]
*/

export default class Avatar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoaded: false
    };
    this.putInvalidImageURLJSON = this.putInvalidImageURLJSON.bind(this);
    this.putValidImageURLJSON = this.putValidImageURLJSON.bind(this);
    this.getInitialByFullName = this.getInitialByFullName.bind(this);
  }

  componentDidUpdate(prevProps, prevState) {
    let {
      src
    } = this.props;
    let {
      isLoaded
    } = this.state;

    if (prevProps.src !== src) {
      this.setState({
        isLoaded: !isLoaded
      });
    }
  }

  putInvalidImageURLJSON() {
    const {
      src,
      alternateSrc
    } = this.props;
    let {
      isLoaded
    } = this.state;
    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;
    this.setState({
      isLoaded: !isLoaded
    });
  }

  putValidImageURLJSON() {
    const {
      src
    } = this.props;
    let {
      isLoaded
    } = this.state;
    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;
      this.setState({
        isLoaded: !isLoaded
      });
    }
  }
  /* this will cause error if user name already have some space need to move firstName lastName user preference pattern*/


  getInitialByFullName() {
    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]);
  } // componentDidMount() {
  //   const { src } = this.props;
  //   const validImgArr = Avatar.validImageURLs;
  //   if (validImgArr.indexOf(src) === -1) {
  //     let _validImgArr = [...validImgArr];
  //     _validImgArr.push(src);
  //   }
  // }


  render() {
    let {
      src,
      name,
      size,
      palette,
      onClick,
      title,
      shape,
      needTitle,
      dataId,
      initial,
      needBorder,
      borderOnActive,
      borderOnHover,
      textPalette,
      customClass,
      alternateSrc,
      isAnimate,
      dataSelectorId,
      customProps,
      needInnerBorder,
      needDefaultBorder
    } = this.props;
    let {
      AvatarProps = {}
    } = customProps;
    let textStyle = textPalette ? style[textPalette] : palette === 'secondary' ? style.white : style.black;
    let shapeStyle = shape === 'circle' ? 'circle' : `square_${size}`;
    initial = initial || this.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: this.putInvalidImageURLJSON,
      onLoad: this.putValidImageURLJSON,
      src: showAlternateAvatar ? alternateSrc : src,
      alt: name
    }), showDefaultBorder ? null : /*#__PURE__*/React.createElement("span", {
      className: `${style.shadow} ${textStyle} `
    })));
  }

}
Avatar.defaultProps = defaultProps;
Avatar.propTypes = propTypes;
Avatar.invalidImageURLs = [];
Avatar.validImageURLs = []; // if (__DOCS__) {
//   Avatar.docs = {
//     componentGroup: 'Avatar Group',
//     folderName: 'Style Guide'
//   };
// }