@zohodesk/components/es/v1/ListItem/ListItemWithCheckBox.js

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

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 } from "../Layout";
import style from "../../ListItem/ListItem.module.css";

const ListItemWithCheckBox = props => {
  let {
    size,
    active,
    highlight,
    value,
    checked,
    autoHover,
    palette,
    dataId,
    dataSelectorId,
    title,
    isDisabled,
    disableTitle,
    a11y,
    customClass,
    customProps,
    needMultiLineText,
    id,
    index,
    onHover,
    onClick,
    getRef
  } = props;

  function handleRef(ele) {
    getRef && getRef(ele, index);
  }

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

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

  const listA11y = {
    role: 'option',
    ...a11y
  };
  let {
    ListItemProps = {},
    ContainerProps = {}
  } = customProps;
  let {
    customListItem = '',
    customCheckBox = '',
    customLabel = ''
  } = customClass;
  return /*#__PURE__*/React.createElement(ListContainer, {
    a11y: listA11y,
    size: size,
    palette: palette,
    highlight: highlight,
    isDisabled: isDisabled,
    active: active,
    autoHover: autoHover,
    customClass: customListItem,
    dataId: `${dataId ? dataId : value}_ListItemWithCheckBox`,
    dataSelectorId: dataSelectorId,
    onClick: handleClick,
    onMouseOver: handleHover,
    eleRef: handleRef,
    disableTitle: disableTitle,
    title: null,
    customProps: ListItemProps,
    ...ContainerProps
  }, /*#__PURE__*/React.createElement(Box, {
    className: style.iconBox,
    dataId: `${dataId ? dataId : value}_checkBox`
  }, /*#__PURE__*/React.createElement(CheckBox, {
    checked: checked,
    a11y: {
      ariaHidden: true
    },
    customClass: {
      customCheckBox: customCheckBox,
      customLabel: customLabel
    }
  })), /*#__PURE__*/React.createElement(Box, {
    flexible: true,
    shrink: true,
    "data-title": isDisabled ? null : title,
    className: needMultiLineText ? style.multiLineValue : style.value
  }, value));
};

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