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

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

/**** Libraries ****/
import React from 'react';
import { Box } from "../Layout";
import { Icon } from '@zohodesk/icons';
import ListContainer from "./ListContainer";
import { ListItemWithIconDefaultProps } from "./props/defaultProps";
import { ListItemWithIcon_Props } from "./props/propTypes";
/**** CSS ****/

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

const ListItemWithIcon = props => {
  let {
    size,
    active,
    highlight,
    value,
    iconName,
    iconSize,
    autoHover,
    palette,
    iconClass,
    dataId,
    dataSelectorId,
    title,
    needTick,
    isLink,
    href,
    target,
    needBorder,
    isDisabled,
    disableTitle,
    a11y,
    customClass,
    customProps,
    needMultiLineText,
    getRef,
    onClick,
    onMouseEnter,
    index,
    id
  } = 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;
  const listA11y = {
    ariaHidden: true,
    role: 'option',
    ...a11y
  };
  let {
    ariaHidden
  } = listA11y;
  let dataIdString = dataId ? `${dataId.replace("'", '_')}` : value.toLowerCase().replace("'", '_');
  return /*#__PURE__*/React.createElement(ListContainer, {
    a11y: listA11y,
    size: size,
    palette: palette,
    highlight: highlight,
    isDisabled: isDisabled,
    active: active,
    autoHover: autoHover,
    needTick: needTick,
    needBorder: needBorder,
    customClass: customClass,
    dataId: dataIdString,
    dataSelectorId: dataSelectorId,
    isLink: isLink,
    href: href,
    target: target,
    onClick: handleClick,
    onMouseOver: handleMouseEnter,
    eleRef: handleRef,
    disableTitle: disableTitle,
    title: null,
    customProps: ListItemProps,
    ...ContainerProps
  }, iconName && /*#__PURE__*/React.createElement(Box, {
    "aria-hidden": true,
    className: style.iconBox,
    dataId: dataId ? `${dataId}_Icon` : `${value.toLowerCase().replace("'", '_')}_Icon`
  }, /*#__PURE__*/React.createElement(Icon, {
    iconClass: iconClass,
    name: iconName,
    size: iconSize
  })), iconClass && !iconName ? /*#__PURE__*/React.createElement("span", {
    className: iconClass
  }) : null, value && /*#__PURE__*/React.createElement(Box, {
    flexible: true,
    shrink: true,
    className: needMultiLineText ? style.multiLineValue : style.value,
    "data-title": isDisabled ? null : title,
    dataId: `${dataIdString}_Text`
  }, value), 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);
};

export default ListItemWithIcon;
ListItemWithIcon.defaultProps = ListItemWithIconDefaultProps;
ListItemWithIcon.propTypes = ListItemWithIcon_Props; // if (__DOCS__) {
//   ListItemWithIcon.docs = {
//     componentGroup: 'Molecule',
//     folderName: 'Style Guide'
//   };
// }