@shopgate/engage/components/SheetList/index.js

Shopgate's ENGAGE library.

import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import List from '@shopgate/pwa-common/components/List';
import Item from "./components/Item";
import styles from "./style";

/**
 * The SheetList component.
 * Styled sheet for List component
 */
import { jsx as _jsx } from "react/jsx-runtime";
let SheetList = /*#__PURE__*/function (_Component) {
  function SheetList() {
    return _Component.apply(this, arguments) || this;
  }
  _inheritsLoose(SheetList, _Component);
  var _proto = SheetList.prototype;
  /**
   * Renders the component.
   * @returns {JSX}
   */
  _proto.render = function render() {
    const {
      children,
      className,
      hasImages,
      testId
    } = this.props;
    if (!React.Children.count(children)) {
      return null;
    }
    const itemClasses = {
      [styles.item]: true,
      [styles.itemWithImage]: hasImages
    };
    return /*#__PURE__*/_jsx(List, {
      className: `${className} engage__sheet-list`,
      role: "listbox",
      children: React.Children.map(children, (child, index) => {
        if (! /*#__PURE__*/React.isValidElement(child)) {
          return null;
        }
        // The key for each child.
        const key = `child-${index}`;
        // Selected state for the child.
        const {
          isSelected
        } = child.props;
        const childClasses = {
          [styles.itemSelected]: isSelected,
          [styles.itemNotLast]: !isSelected
        };
        return /*#__PURE__*/_jsx(List.Item, {
          className: classNames(itemClasses, childClasses, isSelected ? 'engage__sheet-list__selected-item' : 'engage__sheet-list__item'),
          isSelected: isSelected,
          tabIndex: 0,
          children: /*#__PURE__*/_jsx("div", {
            className: styles.innerContainer,
            "data-test-id": testId,
            children: child
          })
        }, key);
      })
    });
  };
  return SheetList;
}(Component);
SheetList.Item = Item;
SheetList.defaultProps = {
  children: null,
  className: null,
  hasImages: false,
  testId: null
};
export default SheetList;