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

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

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

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

import style from "./StatusListItem.module.css";
export default class StatusListItem extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.getRef = this.getRef.bind(this);
    this.handleMouseEnter = this.handleMouseEnter.bind(this);
  }

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

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

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

  render() {
    let {
      size,
      active,
      highlight,
      value,
      autoHover,
      palette,
      title,
      disableTitle,
      needTick,
      isLink,
      href,
      target,
      needBorder,
      isDisabled,
      bulletColor,
      a11y,
      needMultiLineText,
      customClass,
      children
    } = this.props;
    let options = {};
    let {
      role,
      ariaSelected,
      ariaHidden = true,
      ariaLabel,
      insetFocus = true
    } = a11y;

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

    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 && this.handleClick,
      onMouseEnter: this.handleMouseEnter,
      eleRef: this.getRef,
      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; // if (__DOCS__) {
//   StatusListItem.docs = {
//     componentGroup: 'StatusListItem',
//     folderName: 'List'
//   };
// }