@zohodesk/components/lib/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 = _interopRequireDefault(require("react"));

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.module.css"));

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

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 _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 _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 _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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

/*
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"] }]
*/
var Avatar = /*#__PURE__*/function (_React$Component) {
  _inherits(Avatar, _React$Component);

  var _super = _createSuper(Avatar);

  function Avatar(props) {
    var _this;

    _classCallCheck(this, Avatar);

    _this = _super.call(this, props);
    _this.state = {
      isLoaded: false
    };
    _this.putInvalidImageURLJSON = _this.putInvalidImageURLJSON.bind(_assertThisInitialized(_this));
    _this.putValidImageURLJSON = _this.putValidImageURLJSON.bind(_assertThisInitialized(_this));
    _this.getInitialByFullName = _this.getInitialByFullName.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(Avatar, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState) {
      var src = this.props.src;
      var isLoaded = this.state.isLoaded;

      if (prevProps.src !== src) {
        this.setState({
          isLoaded: !isLoaded
        });
      }
    }
  }, {
    key: "putInvalidImageURLJSON",
    value: function putInvalidImageURLJSON() {
      var _this$props = this.props,
          src = _this$props.src,
          alternateSrc = _this$props.alternateSrc;
      var isLoaded = this.state.isLoaded;

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

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

  }, {
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          src = _this$props2.src,
          name = _this$props2.name,
          size = _this$props2.size,
          palette = _this$props2.palette,
          onClick = _this$props2.onClick,
          title = _this$props2.title,
          shape = _this$props2.shape,
          needTitle = _this$props2.needTitle,
          dataId = _this$props2.dataId,
          initial = _this$props2.initial,
          needBorder = _this$props2.needBorder,
          borderOnActive = _this$props2.borderOnActive,
          borderOnHover = _this$props2.borderOnHover,
          textPalette = _this$props2.textPalette,
          customClass = _this$props2.customClass,
          alternateSrc = _this$props2.alternateSrc,
          isAnimate = _this$props2.isAnimate,
          dataSelectorId = _this$props2.dataSelectorId,
          customProps = _this$props2.customProps,
          needInnerBorder = _this$props2.needInnerBorder,
          needDefaultBorder = _this$props2.needDefaultBorder;
      var _customProps$AvatarPr = customProps.AvatarProps,
          AvatarProps = _customProps$AvatarPr === void 0 ? {} : _customProps$AvatarPr;
      var textStyle = textPalette ? _AvatarModule["default"][textPalette] : palette === 'secondary' ? _AvatarModule["default"].white : _AvatarModule["default"].black;
      var shapeStyle = shape === 'circle' ? 'circle' : "square_".concat(size);
      initial = initial || this.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: this.putInvalidImageURLJSON,
        onLoad: this.putValidImageURLJSON,
        src: showAlternateAvatar ? alternateSrc : src,
        alt: name
      }), showDefaultBorder ? null : /*#__PURE__*/_react["default"].createElement("span", {
        className: "".concat(_AvatarModule["default"].shadow, " ").concat(textStyle, " ")
      })));
    }
  }]);

  return Avatar;
}(_react["default"].Component);

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