@zohodesk/components/es/v1/DropDown/DropDownItem.js

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

import React, { useRef } from 'react';
import { DropDownItem_propTypes } from "./props/propTypes";
import { DropDownItem_defaultProps } from "./props/defaultProps";
import style from "../../DropDown/DropDownItem.module.css";
export default function DropDownItem(props) {
  let {
    value,
    active,
    children,
    hightlight,
    dataId,
    customClass = '',
    index,
    getRef,
    onClick,
    id,
    onHover
  } = props;
  const eleRef = useRef(null);

  function getReference(ele) {
    eleRef.current = ele;
    getRef && getRef(ele, index);
  }

  function getSelectedElement() {
    return eleRef.current ? eleRef.current : null;
  }

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

  function handleHover(e) {
    onHover && onHover(id, value, index, e);
  }

  return /*#__PURE__*/React.createElement("div", {
    className: `${style.list} ${customClass} ${active ? style.listActive : hightlight ? style.listHover : ''} ${children && children[1] ? style.padding : ''}`,
    onClick: handleClick,
    onMouseOver: handleHover,
    ref: getReference,
    "data-id": dataId,
    "data-test-id": dataId
  }, children && children[0] ? /*#__PURE__*/React.createElement("span", {
    className: style.children
  }, " ", children[0], " ") : children !== undefined ? /*#__PURE__*/React.createElement("span", {
    className: style.children
  }, " ", children, " ") : null, value ? /*#__PURE__*/React.createElement("span", {
    className: style.value
  }, value) : '', children && children[1] ? /*#__PURE__*/React.createElement("span", {
    className: style.user
  }, " ", children[1], " ") : '');
}
DropDownItem.propTypes = DropDownItem_propTypes;
DropDownItem.defaultProps = DropDownItem_defaultProps;