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

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

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireWildcard(require("react"));

var _hooks = require("@zohodesk/hooks");

var _defaultProps = require("./props/defaultProps");

var _propTypes = require("./props/propTypes");

var _getInitial = require("../../utils/getInitial");

var _AvatarSize = _interopRequireDefault(require("../../Provider/AvatarSize"));

var _AvatarModule = _interopRequireDefault(require("../../Avatar/Avatar.module.css"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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); }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

/*
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) {
  var src = props.src,
      name = props.name,
      size = props.size,
      palette = props.palette,
      onClick = props.onClick,
      title = props.title,
      shape = props.shape,
      needTitle = props.needTitle,
      dataId = props.dataId,
      initial = props.initial,
      needBorder = props.needBorder,
      borderOnActive = props.borderOnActive,
      borderOnHover = props.borderOnHover,
      textPalette = props.textPalette,
      customClass = props.customClass,
      alternateSrc = props.alternateSrc,
      isAnimate = props.isAnimate,
      dataSelectorId = props.dataSelectorId,
      customProps = props.customProps,
      needInnerBorder = props.needInnerBorder,
      needDefaultBorder = props.needDefaultBorder;
  var _customProps$AvatarPr = customProps.AvatarProps,
      AvatarProps = _customProps$AvatarPr === void 0 ? {} : _customProps$AvatarPr;

  var _useState = (0, _react.useState)(false),
      _useState2 = _slicedToArray(_useState, 2),
      isLoaded = _useState2[0],
      setLoaded = _useState2[1];

  var putInvalidImageURLJSON = function putInvalidImageURLJSON() {
    var _validImgArr = _toConsumableArray(Avatar.validImageURLs);

    var _invalidImgArr = _toConsumableArray(Avatar.invalidImageURLs); // if (alternateSrc) {
    //   _validImgArr.push(alternateSrc);
    // }


    var validIndex = _validImgArr.indexOf(src);

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

    _invalidImgArr.push(src);

    Avatar.invalidImageURLs = _invalidImgArr;
    Avatar.validImageURLs = _validImgArr;
    setLoaded(function (isLoaded) {
      return !isLoaded;
    });
  };

  var putValidImageURLJSON = function putValidImageURLJSON() {
    var validImgArr = Avatar.validImageURLs;
    var invalidImgArr = Avatar.invalidImageURLs;

    if (src && validImgArr.indexOf(src) === -1 && invalidImgArr.indexOf(src) === -1) {
      var _validImgArr = _toConsumableArray(validImgArr);

      _validImgArr.push(src);

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


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

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

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

  (0, _hooks.useEffectCallOnlyAfterState)(function () {
    setLoaded(function (isLoaded) {
      return !isLoaded;
    });
  }, [src]);
  var textStyle = textPalette ? _AvatarModule["default"][textPalette] : palette === 'secondary' ? _AvatarModule["default"].white : _AvatarModule["default"].black;
  var shapeStyle = shape === 'circle' ? 'circle' : "square_".concat(size);
  initial = initial || getInitialByFullName(name);
  var isInvalidImageList = Avatar.invalidImageURLs.indexOf(src) !== -1; //let isValidImageList = Avatar.validImageURLs.indexOf(src) !== -1;

  var showAvatar = src && !isInvalidImageList;
  var showInitial = !showAvatar || showAvatar && isInvalidImageList;
  var showAlternateAvatar = alternateSrc ? showInitial : false;
  var border = borderOnHover || onClick;
  var showDefaultBorder = src && !isInvalidImageList && needDefaultBorder;
  var borderStyle = (showDefaultBorder || !src || !showAvatar || showInitial) && needBorder ? "".concat(_AvatarModule["default"].border, " ").concat(borderOnActive ? _AvatarModule["default"].borderOnActive : border ? _AvatarModule["default"].borderOnHover : '', " ") : '';
  borderStyle = showAlternateAvatar ? '' : borderStyle;
  return /*#__PURE__*/_react["default"].createElement("div", _extends({
    className: "".concat(_AvatarModule["default"].avatar, " ").concat(_AvatarModule["default"][size], " ").concat((0, _AvatarSize["default"])(size), " ").concat(_AvatarModule["default"][shapeStyle], " ").concat(_AvatarModule["default"][palette], " ").concat(textStyle, " ").concat(borderStyle, " ").concat(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["default"].createElement("span", {
    className: "".concat(_AvatarModule["default"].initial),
    "data-id": "".concat(dataId, "_AvatarInitial"),
    "data-test-id": "".concat(dataId, "_AvatarInitial"),
    "data-selector-id": "".concat(dataSelectorId, "_AvatarInitial")
  }, initial), (showAvatar || showAlternateAvatar) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("img", {
    className: "".concat(_AvatarModule["default"].image, " ").concat(isAnimate ? _AvatarModule["default"].animate : '', " ").concat(needInnerBorder ? _AvatarModule["default"].innerBorder : ''),
    "data-id": "".concat(dataId, "_AvatarImg"),
    "data-test-id": "".concat(dataId, "_AvatarImg"),
    "data-selector-id": "".concat(dataSelectorId, "_AvatarImg"),
    name: name,
    onError: putInvalidImageURLJSON,
    onLoad: putValidImageURLJSON,
    src: showAlternateAvatar ? alternateSrc : src,
    alt: name
  }), showDefaultBorder ? null : /*#__PURE__*/_react["default"].createElement("span", {
    className: "".concat(_AvatarModule["default"].shadow, " ").concat(textStyle, " ")
  })));
}

var _default = Avatar;
exports["default"] = _default;
Avatar.defaultProps = _defaultProps.defaultProps;
Avatar.propTypes = _propTypes.propTypes;
Avatar.invalidImageURLs = [];
Avatar.validImageURLs = [];