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

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

import React from 'react';
import { DropDownItem_propTypes } from "./props/propTypes";
import { DropDownItem_defaultProps } from "./props/defaultProps";
import style from "./DropDownItem.module.css";
export default class DropDownItem extends React.Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
    this.getRef = this.getRef.bind(this);
    this.getSelectedElement = this.getSelectedElement.bind(this);
    this.onHover = this.onHover.bind(this);
  }

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

  getSelectedElement() {
    return this.ele ? this.ele : null;
  }

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

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

  render() {
    let {
      value,
      active,
      children,
      hightlight,
      dataId,
      customClass = ''
    } = this.props;
    return /*#__PURE__*/React.createElement("div", {
      className: `${style.list} ${customClass} ${active ? style.listActive : hightlight ? style.listHover : ''} ${children && children[1] ? style.padding : ''}`,
      onClick: this.onClick,
      onMouseOver: this.onHover,
      ref: this.getRef,
      "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;