@zohodesk/components/es/ListItem/ListItemWithCheckBox.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

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React from 'react';
import ListContainer from "./ListContainer";
import { ListItemWithCheckBoxDefaultProps } from "./props/defaultProps";
import { ListItemWithCheckBox_Props } from "./props/propTypes";
import CheckBox from "../CheckBox/CheckBox";
import { Box, Container } from "../Layout";
import { renderNode, isRenderable } from '@zohodesk/utils';
import style from "./ListItem.module.css";
export default class ListItemWithCheckBox extends React.Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
    this.getRef = this.getRef.bind(this);
    this.onHover = this.onHover.bind(this);
  }

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

  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 {
      size,
      active,
      highlight,
      value,
      checked,
      autoHover,
      palette,
      needBorder,
      dataId,
      dataSelectorId,
      title,
      isDisabled,
      disableTitle,
      a11y,
      customClass,
      customProps,
      needMultiLineText,
      secondaryValue,
      renderValueRightPlaceholderNode,
      lhsAlignContent,
      lhsJustifyContent
    } = this.props;
    const listA11y = {
      role: 'option',
      ...a11y
    };
    let {
      ListItemProps = {},
      ContainerProps = {}
    } = customProps;
    let {
      customListItem = '',
      customCheckBox = '',
      customLabel = '',
      customValueRightPlaceholder = ''
    } = customClass;
    const iconBoxDataId = `${dataId ? dataId : value}_checkBox`;
    return /*#__PURE__*/React.createElement(ListContainer, _extends({
      a11y: listA11y,
      size: size,
      palette: palette,
      highlight: highlight,
      isDisabled: isDisabled,
      active: active,
      autoHover: autoHover,
      needBorder: needBorder,
      customClass: customListItem,
      dataId: `${dataId ? dataId : value}_ListItemWithCheckBox`,
      dataSelectorId: dataSelectorId,
      onClick: this.onClick,
      onMouseOver: this.onHover,
      eleRef: this.getRef,
      disableTitle: disableTitle,
      title: null,
      customProps: ListItemProps
    }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
      className: style.contentWrapper
    }, /*#__PURE__*/React.createElement("div", {
      className: `${style.iconBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
      "data-id": iconBoxDataId,
      "data-test-id": iconBoxDataId
    }, /*#__PURE__*/React.createElement(Box, {
      align: lhsAlignContent,
      className: lhsAlignContent !== 'center' ? style.lhsBoxInner : ''
    }, /*#__PURE__*/React.createElement(CheckBox, {
      checked: checked,
      a11y: {
        ariaHidden: true
      },
      customClass: {
        customCheckBox: customCheckBox,
        customLabel: customLabel
      }
    }))), /*#__PURE__*/React.createElement(Box, {
      flexible: true,
      className: `${style.leftBox} ${style.selfAlign_center}`
    }, /*#__PURE__*/React.createElement(Box, {
      className: style.titleBox
    }, value ? /*#__PURE__*/React.createElement(Box, {
      shrink: true,
      adjust: true,
      "data-title": isDisabled ? null : title,
      className: needMultiLineText ? style.multiLineValue : style.value
    }, value) : null, isRenderable(renderValueRightPlaceholderNode) ? /*#__PURE__*/React.createElement(Box, {
      className: customValueRightPlaceholder
    }, renderNode(renderValueRightPlaceholderNode)) : null), secondaryValue ? /*#__PURE__*/React.createElement(Box, {
      "data-title": isDisabled ? null : secondaryValue,
      className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : style.secondaryValue}`
    }, secondaryValue) : null)));
  }

}
ListItemWithCheckBox.defaultProps = ListItemWithCheckBoxDefaultProps;
ListItemWithCheckBox.propTypes = ListItemWithCheckBox_Props; // if (__DOCS__) {
//   ListItemWithCheckBox.docs = {
//     componentGroup: 'Molecule',
//     folderName: 'Style Guide'
//   };
// }