@zohodesk/components/es/v1/ListItem/ListItemWithAvatar.js

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

/**** Libraries ****/
import React, { memo } from 'react';
import { Box } from "../Layout";
import ListContainer from "./ListContainer";
import { ListItemWithAvatarDefaultProps } from "./props/defaultProps";
import { ListItemWithAvatar_Props } from "./props/propTypes";
/**** Components ****/

import Avatar from "../Avatar/Avatar";
import AvatarTeam from "../AvatarTeam/AvatarTeam";
import { Icon } from '@zohodesk/icons';
/**** CSS ****/

import style from "../../ListItem/ListItem.module.css";

const ListItemWithAvatar = props => {
  let {
    size,
    active,
    highlight,
    value,
    name,
    imgSrc,
    autoHover,
    isTeam,
    palette,
    title,
    needTick,
    dataId,
    dataSelectorId,
    initial,
    isDisabled,
    needBorder,
    disableTitle,
    needAvatarTitle,
    avatarPalette,
    a11y,
    customClass,
    customProps,
    needMultiLineText,
    index,
    id,
    getRef,
    onClick,
    onMouseEnter
  } = props;

  function handleRef(ele) {
    getRef && getRef(ele, index, id);
  }

  function handleClick(e) {
    onClick && onClick(id, value, index, e);
  }

  function handleMouseEnter(e) {
    onMouseEnter && onMouseEnter(id, value, index, e);
  }

  let {
    ListItemProps = {},
    ContainerProps = {}
  } = customProps;
  let {
    customListItem = '',
    customAvatar = '',
    customAvatarTeam = ''
  } = customClass;
  const listA11y = {
    ariaHidden: true,
    role: 'option',
    ...a11y
  };
  let {
    ariaHidden
  } = listA11y;
  let isDarkPalette = palette === 'dark';
  let dataIdString = value ? value : dataId;
  return /*#__PURE__*/React.createElement(ListContainer, {
    a11y: listA11y,
    size: size,
    palette: palette,
    highlight: highlight,
    isDisabled: isDisabled,
    active: active,
    autoHover: autoHover,
    needTick: needTick,
    needBorder: needBorder,
    customClass: customListItem,
    dataId: `${dataIdString}_ListItemWithAvatar`,
    dataSelectorId: `${dataSelectorId}`,
    onClick: handleClick,
    onMouseEnter: handleMouseEnter,
    eleRef: handleRef,
    disableTitle: disableTitle,
    title: null,
    customProps: ListItemProps,
    ...ContainerProps
  }, name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
    className: style.leftAvatar
  }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
    name: name,
    size: "small",
    src: imgSrc,
    needTitle: needAvatarTitle,
    textPalette: isDarkPalette ? 'white' : '',
    palette: isDarkPalette ? 'info' : avatarPalette,
    customClass: {
      customAvatar: customAvatar,
      customAvatarTeam: customAvatarTeam
    }
  }) : /*#__PURE__*/React.createElement(Avatar, {
    name: name,
    size: "small",
    src: imgSrc,
    initial: initial,
    textPalette: isDarkPalette ? 'white' : '',
    needTitle: needAvatarTitle,
    palette: isDarkPalette ? 'info' : avatarPalette,
    customClass: customAvatar
  })) : null, value ? /*#__PURE__*/React.createElement(Box, {
    flexible: true,
    shrink: true,
    "data-title": isDisabled ? null : title,
    className: needMultiLineText ? style.multiLineValue : style.value
  }, value) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
    className: style.tickIcon,
    "aria-hidden": ariaHidden,
    dataId: `${dataIdString}_tickIcon`,
    dataSelectorId: `${dataSelectorId}_tickIcon`
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "ZD-ticknew",
    size: "8"
  })) : null);
};

ListItemWithAvatar.defaultProps = ListItemWithAvatarDefaultProps;
ListItemWithAvatar.propTypes = ListItemWithAvatar_Props;
const MemoizedListItemWithAvatar = /*#__PURE__*/memo(ListItemWithAvatar);
MemoizedListItemWithAvatar.propTypes = ListItemWithAvatar_Props;
MemoizedListItemWithAvatar.defaultProps = ListItemWithAvatarDefaultProps;
MemoizedListItemWithAvatar.displayName = 'ListItemWithAvatar';
export default MemoizedListItemWithAvatar;