@zohodesk/dot/es/v1/list/status/StatusListItem/StatusListItem.js

In this Library, we Provide Some Basic Components to Build Your Application

/**** Libraries ****/
import React, { useRef } from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import { Container, Box } from '@zohodesk/components/es/v1/Layout';
/**** Components ****/

import { Icon } from '@zohodesk/icons';
import CssProvider from '@zohodesk/components/es/Provider/CssProvider';
/**** CSS ****/

import style from "../../../../list/status/StatusListItem/StatusListItem.module.css";
export default function StatusListItem(props) {
  let {
    size,
    active,
    highlight,
    value,
    autoHover,
    palette,
    title,
    disableTitle,
    needTick,
    isLink,
    href,
    target,
    needBorder,
    isDisabled,
    bulletColor,
    a11y,
    needMultiLineText,
    index,
    getRef,
    id,
    onClick,
    onMouseEnter,
    customClass,
    children
  } = props;
  let options = {};
  let {
    role,
    ariaSelected,
    ariaHidden = true,
    ariaLabel,
    insetFocus = true
  } = a11y;

  if (isLink) {
    options.href = href;
    options.target = `_${target}`;
  }

  const element = useRef(null);

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

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

  function handleMouseEnter(e) {
    onMouseEnter && onMouseEnter(id, value, index, e);
  }

  return /*#__PURE__*/React.createElement(Container, {
    role: role,
    "aria-selected": ariaSelected,
    "aria-label": ariaLabel,
    "data-a11y-inset-focus": insetFocus,
    isCover: false,
    align: "baseline",
    alignBox: "row",
    className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''} ${needTick ? style.withTick : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? style.withBorder : ''} ${customClass}`,
    dataId: String(value).replace("'", '_'),
    onClick: !isDisabled && handleClick,
    onMouseEnter: handleMouseEnter,
    eleRef: getReference,
    tagName: isLink ? 'a' : 'li',
    "data-title": isDisabled ? disableTitle : null,
    tabindex: isDisabled ? '-1' : '0',
    ...options,
    ...a11y
  }, /*#__PURE__*/React.createElement(Box, {
    className: `${style.statusType} ${style[bulletColor]}`
  }), /*#__PURE__*/React.createElement(Box, {
    flexible: true,
    shrink: true
  }, /*#__PURE__*/React.createElement(Container, {
    alignBox: "row",
    align: needMultiLineText ? 'top' : 'vertical'
  }, /*#__PURE__*/React.createElement(Box, {
    "data-title": isDisabled ? null : title,
    shrink: true,
    className: needMultiLineText ? style.multiLineValue : style.value
  }, value), /*#__PURE__*/React.createElement(Box, null, children && children))), needTick && active ? /*#__PURE__*/React.createElement("div", {
    className: style.tickIcon,
    "aria-hidden": ariaHidden
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "ZD-ticknew",
    size: "8"
  })) : null);
}
StatusListItem.defaultProps = defaultProps;
StatusListItem.propTypes = propTypes;