@zohodesk/dot/es/v1/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/es/v1/Avatar/Avatar';
import AvatarIcon from "../AvatarIcon/AvatarIcon";
import { Icon } from '@zohodesk/icons';
import style from "../../../avatar/AvatarUser/AvatarUser.module.css";
/**** Methods ****/

export default function AvatarUser(props) {
  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
  } = 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;