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

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

/**** Libraries ****/
import React from 'react';
import { Box } from "../Layout";
import ListContainer from "./ListContainer";
import { ListItemDefaultProps } from "./props/defaultProps";
import { ListItem_Props } from "./props/propTypes";
/**** Components ****/

import { Icon } from '@zohodesk/icons';
/**** CSS ****/

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

const ListItem = props => {
  let {
    size,
    active,
    highlight,
    value,
    autoHover,
    palette,
    title,
    disableTitle,
    needTick,
    isLink,
    href,
    target,
    needBorder,
    isDisabled,
    children,
    dataId,
    dataSelectorId,
    a11y,
    customClass,
    customProps,
    needMultiLineText,
    getRef,
    index,
    id,
    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 = '',
    customTickIcon = ''
  } = customClass;
  const listA11y = {
    ariaHidden: true,
    role: 'option',
    ...a11y
  };
  let {
    ariaHidden
  } = listA11y;
  let tickIconPalette = style[`${palette}Tick`] ? style[`${palette}Tick`] : '';
  let dataIdString = dataId ? dataId : value ? String(value).replace("'", '_') : 'listItem';
  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,
    dataSelectorId: `${dataSelectorId}`,
    isLink: isLink,
    href: href,
    target: target,
    disableTitle: disableTitle,
    title: title,
    onClick: handleClick,
    onMouseEnter: handleMouseEnter,
    eleRef: handleRef,
    customProps: ListItemProps,
    ...ContainerProps
  }, value ? /*#__PURE__*/React.createElement(Box, {
    shrink: true,
    adjust: true,
    className: needMultiLineText ? style.multiLineValue : style.value
  }, value) : null, children ? /*#__PURE__*/React.createElement(Box, {
    shrink: true,
    adjust: true,
    className: style.children
  }, children) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
    className: `${style.tickIcon} ${tickIconPalette} ${customTickIcon}`,
    "aria-hidden": ariaHidden,
    dataId: `${dataIdString}_tickIcon`,
    dataSelectorId: `${dataSelectorId}_tickIcon`
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "ZD-ticknew",
    size: "8"
  })) : null);
};

export default ListItem;
ListItem.defaultProps = ListItemDefaultProps;
ListItem.propTypes = ListItem_Props; // if (__DOCS__) {
//   ListItem.docs = {
//     componentGroup: 'Molecule',
//     folderName: 'Style Guide'
//   };
// }