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

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

import React from 'react';
import Radio from "../Radio/Radio";
import { Box } from "../Layout";
import ListContainer from "./ListContainer";
import { ListItemWithRadioDefaultProps } from "./props/defaultProps";
import { ListItemWithRadio_Props } from "./props/propTypes";
import style from "../../ListItem/ListItem.module.css";

const ListItemWithRadio = props => {
  let {
    size,
    active,
    highlight,
    value,
    checked,
    autoHover,
    palette,
    id,
    dataId,
    dataSelectorId,
    title,
    isDisabled,
    disableTitle,
    a11y,
    customClass,
    customProps,
    needMultiLineText,
    getRef,
    onClick,
    onHover,
    index
  } = props;
  let {
    ListItemProps = {},
    ContainerProps = {}
  } = customProps;
  const listA11y = {
    role: 'option',
    ...a11y
  };

  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);
  }

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

export default ListItemWithRadio;
ListItemWithRadio.defaultProps = ListItemWithRadioDefaultProps;
ListItemWithRadio.propTypes = ListItemWithRadio_Props; // if (__DOCS__) {
//   ListItemWithRadio.docs = {
//     componentGroup: 'Molecule',
//     folderName: 'Style Guide'
//   };
// }