@zohodesk/components/es/ListItem/ListContainer.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); }

/**** Libraries ****/
import React, { useCallback } from 'react';
import { Container } from "../Layout";
import CssProvider from "../Provider/CssProvider";
import style from "./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,
    align
  } = props;
  const responsiveFunc = useCallback(({
    mediaQueryOR,
    isTouchDevice
  }) => {
    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, _extends({
    role: role,
    "data-a11y-inset-focus": insetFocus,
    "aria-selected": ariaSelected,
    "aria-label": ariaLabel,
    isCover: false,
    align: align,
    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'
//   };
// }