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

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

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(fullName = '') {
    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", _extends({
      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'
//   };
// }