@zohodesk/dot/es/avatar/AvatarUser/AvatarUser.js

In this Library, we Provide Some Basic Components to Build Your Application

/**** Libraries ****/
import React from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
/**** Components ****/

import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
import AvatarIcon from "../AvatarIcon/AvatarIcon";
import { Icon } from '@zohodesk/icons';
import style from "./AvatarUser.module.css";
/**** Methods ****/

export default class AvatarUser extends React.Component {
  render() {
    let {
      src,
      alternateSrc,
      name,
      size,
      onClick,
      onDelete,
      title,
      isPaid,
      isPortal,
      isLocked,
      dataId,
      dataSelectorId,
      needTitle,
      needDelete,
      initial,
      palette,
      textPalette,
      customTextClass,
      iconName,
      iconSize,
      iconClass,
      iconColor,
      i18nKeys,
      customProps
    } = this.props;
    let {
      AvatarUserProps = {},
      AvatarIconProps = {},
      AvatarProps = {}
    } = customProps;
    let {
      paidTitle = 'Paid User',
      portalTitle = 'End User',
      lockTitle = 'Locked'
    } = i18nKeys;
    return /*#__PURE__*/React.createElement("div", {
      className: `${style.container} ${style[size]}`,
      "data-id": dataId || name || iconName,
      "data-test-id": dataId || name || iconName,
      "data-selector-id": dataSelectorId,
      ...AvatarUserProps
    }, iconName ? /*#__PURE__*/React.createElement(AvatarIcon, {
      name: iconName,
      iconSize: iconSize,
      size: size,
      iconClass: iconClass,
      dataId: iconName,
      iconColor: iconColor,
      title: title,
      ...AvatarIconProps
    }) : /*#__PURE__*/React.createElement(Avatar, {
      src: src,
      name: name,
      initial: initial,
      title: title,
      onClick: onClick,
      size: size,
      needTitle: needTitle,
      palette: palette,
      textPalette: textPalette,
      customClass: customTextClass,
      alternateSrc: alternateSrc,
      ...AvatarProps
    }), isPaid ? /*#__PURE__*/React.createElement("span", {
      "data-title": paidTitle,
      className: style.paid,
      "data-id": "paidUser",
      "data-test-id": "paidUser"
    }, /*#__PURE__*/React.createElement(Icon, {
      name: "ZD-paiduser"
    })) : null, isPortal ? /*#__PURE__*/React.createElement("span", {
      "data-title": portalTitle,
      className: style.portal,
      "data-id": "portalUser",
      "data-test-id": "portalUser"
    }, /*#__PURE__*/React.createElement(Icon, {
      name: "ZD-globe1"
    })) : null, isLocked ? /*#__PURE__*/React.createElement("span", {
      "data-title": lockTitle,
      className: style.lock,
      "data-id": "locked",
      "data-test-id": "locked"
    }, /*#__PURE__*/React.createElement(Icon, {
      name: "ZD-lock01"
    })) : null, needDelete ? /*#__PURE__*/React.createElement("span", {
      className: style.delete,
      "data-id": "dltContactPhoto",
      "data-test-id": "dltContactPhoto",
      onClick: onDelete
    }, /*#__PURE__*/React.createElement(Icon, {
      name: "ZD-delete2",
      size: "15"
    })) : null);
  }

}
AvatarUser.propTypes = propTypes;
AvatarUser.defaultProps = defaultProps; // if (__DOCS__) {
//   AvatarUser.docs = {
//     componentGroup: 'Avatar Group'
//   };
// }