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

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

/**** Libraries ****/
import React, { useCallback } from 'react';
import { Container } from "../Layout";
import CssProvider from "../../Provider/CssProvider";
import style from "../../ListItem/ListItem.module.css";
import { ListContainerDefaultProps } from "./props/defaultProps";
import { ListContainer_Props } from "./props/propTypes";
import { useResponsiveReceiver } from "../../Responsive/CustomResponsive";

const ListContainer = props => {
  const {
    size,
    active,
    highlight,
    autoHover,
    palette,
    title,
    disableTitle,
    needTick,
    isLink,
    href,
    target,
    needBorder,
    isDisabled,
    children,
    dataId,
    dataSelectorId,
    a11y,
    customClass,
    customProps,
    onClick,
    onMouseEnter,
    onMouseOver,
    eleRef
  } = props;
  const responsiveFunc = useCallback(_ref => {
    let {
      mediaQueryOR,
      isTouchDevice
    } = _ref;
    return {
      mobileToTab: mediaQueryOR([{
        maxWidth: 700
      }]),
      isTouchDevice: isTouchDevice
    };
  }, []);
  const {
    mobileToTab,
    isTouchDevice
  } = useResponsiveReceiver('Helmet', responsiveFunc);
  const {
    role,
    ariaSelected,
    ariaLabel,
    insetFocus = true,
    ...a11yAttributes
  } = a11y;
  const options = {};

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

  if (active) {
    options['data-selected'] = active;
  }

  if (!isDisabled && !isLink) {
    options.tabindex = '0';
  }

  return /*#__PURE__*/React.createElement(Container, {
    role: role,
    "data-a11y-inset-focus": insetFocus,
    "aria-selected": ariaSelected,
    "aria-label": ariaLabel,
    isCover: false,
    align: "vertical",
    alignBox: "row",
    className: `${style.list} ${style[size]} ${mobileToTab && isTouchDevice ? style.responsiveHeight : ''} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} ${needTick ? style[`${size}withTick`] : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? active ? style.activewithBorder : style.withBorder : ''} ${customClass}`,
    dataId: dataId,
    dataSelectorId: dataSelectorId,
    onClick: !isDisabled && onClick,
    onMouseEnter: onMouseEnter,
    onMouseOver: onMouseOver,
    eleRef: eleRef,
    tagName: isLink ? 'a' : 'li',
    "data-title": isDisabled ? disableTitle : title,
    ...options,
    ...customProps,
    ...a11yAttributes
  }, children);
};

ListContainer.defaultProps = ListContainerDefaultProps;
ListContainer.propTypes = ListContainer_Props;
export default ListContainer; // if (__DOCS__) {
//   ListContainer.docs = {
//     componentGroup: 'Molecule',
//     folderName: 'Style Guide'
//   };
// }