@shopgate/engage/product/components/RelationsSlider/RelationsSliderContent.js

Shopgate's ENGAGE library.

import React, { useEffect, memo } from 'react';
import PropTypes from 'prop-types';
import { Swiper, Card } from '@shopgate/engage/components';
import ProductCard from "../ProductCard";
import RelationsSheet from "./RelationsSheet";
import { useWidgetSettings, useCurrentProduct } from "../../../core";
import connect from "./RelationsSlider.connector";
import { WIDGET_ID } from "./constants";
import * as styles from "./style";

/**
 * @param {Object} props The component props.
 * @returns {JSX}
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const RelationsSliderContent = /*#__PURE__*/memo(({
  products: {
    products,
    productsCount
  },
  getRelations
}) => {
  const {
    headline,
    hidePrice,
    hideRating,
    titleRows,
    showMoreButton,
    type,
    slidesPerView = 2.3
  } = useWidgetSettings(WIDGET_ID);
  const {
    productId
  } = useCurrentProduct();
  useEffect(() => {
    getRelations();
  }, [getRelations]);
  if (products.length === 0) {
    return null;
  }
  return /*#__PURE__*/_jsxs("div", {
    className: styles.container,
    children: [!!headline && /*#__PURE__*/_jsx("h3", {
      className: styles.headline,
      children: headline
    }), !!showMoreButton && productsCount > 10 && /*#__PURE__*/_jsx(RelationsSheet, {
      limit: 100,
      productId: productId,
      type: type
    }), /*#__PURE__*/_jsx(Swiper, {
      slidesPerView: slidesPerView,
      classNames: {
        container: styles.sliderContainer
      },
      children: products.map(product => /*#__PURE__*/_jsx(Swiper.Item, {
        className: styles.sliderItem,
        children: /*#__PURE__*/_jsx(Card, {
          className: styles.card,
          children: /*#__PURE__*/_jsx(ProductCard, {
            product: product,
            hidePrice: hidePrice,
            hideName: false,
            hideRating: hideRating,
            titleRows: titleRows
          })
        })
      }, product.id))
    })]
  });
});
RelationsSliderContent.defaultProps = {
  products: {
    products: [],
    productsCount: 0
  }
};
export default connect(RelationsSliderContent);