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

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

/**** Libraries ****/
import React from 'react';
import { Box, Container } 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.module.css";
export default class ListItemWithAvatar extends React.PureComponent {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.getRef = this.getRef.bind(this);
    this.handleMouseEnter = this.handleMouseEnter.bind(this);
  }

  getRef(ele) {
    this.ele = ele;
    let {
      index,
      getRef,
      id
    } = this.props;
    getRef && getRef(ele, index, id);
  }

  handleClick(e) {
    let {
      onClick,
      id,
      value,
      index
    } = this.props;
    onClick && onClick(id, value, index, e);
  }

  handleMouseEnter(e) {
    let {
      onMouseEnter,
      id,
      value,
      index
    } = this.props;
    onMouseEnter && onMouseEnter(id, value, index, e);
  }

  render() {
    let {
      size,
      active,
      highlight,
      value,
      name,
      imgSrc,
      autoHover,
      isTeam,
      palette,
      title,
      needTick,
      dataId,
      dataSelectorId,
      initial,
      isDisabled,
      needBorder,
      disableTitle,
      needAvatarTitle,
      avatarPalette,
      a11y,
      customClass,
      customProps,
      needMultiLineText,
      secondaryValue,
      lhsAlignContent
    } = this.props;
    let {
      ListItemProps = {},
      ContainerProps = {},
      AvatarTeamProps = {},
      AvatarProps = {}
    } = 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: this.handleClick,
      onMouseEnter: this.handleMouseEnter,
      eleRef: this.getRef,
      disableTitle: disableTitle,
      title: null,
      customProps: ListItemProps,
      ...ContainerProps
    }, name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
      className: `${style.leftAvatar} ${lhsAlignContent !== 'center' ? `${style.lhsBox}` : ''}`
    }, /*#__PURE__*/React.createElement(Box, {
      align: lhsAlignContent,
      className: style[`lhsBox_${size}`]
    }, 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
      },
      ...AvatarTeamProps
    }) : /*#__PURE__*/React.createElement(Avatar, {
      name: name,
      size: "small",
      src: imgSrc,
      initial: initial,
      textPalette: isDarkPalette ? 'white' : '',
      needTitle: needAvatarTitle,
      palette: isDarkPalette ? 'info' : avatarPalette,
      customClass: customAvatar,
      ...AvatarProps
    }))) : null, /*#__PURE__*/React.createElement(Box, {
      flexible: true,
      shrink: true
    }, /*#__PURE__*/React.createElement(Container, {
      alignBox: "column"
    }, value ? /*#__PURE__*/React.createElement(Box, {
      "data-title": isDisabled ? null : title,
      className: needMultiLineText ? style.multiLineValue : style.value
    }, value) : null, secondaryValue ? /*#__PURE__*/React.createElement(Box, {
      "data-title": isDisabled ? null : secondaryValue,
      className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : style.secondaryValue}`
    }, secondaryValue) : 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; // if (__DOCS__) {
//   ListItemWithAvatar.docs = {
//     componentGroup: 'Molecule',
//     folderName: 'Style Guide'
//   };
// }