@shopgate/engage/product/components/MediaSlider/index.js

Shopgate's ENGAGE library.

import React from 'react';
import PropTypes from 'prop-types';
import { SurroundPortals, Swiper } from '@shopgate/engage/components';
import { PRODUCT_MEDIA } from '@shopgate/pwa-common-commerce/product';
import { MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO } from "../../constants";
import MediaImage from "./components/MediaImage";
import MediaVideo from "./components/MediaVideo";
import connect from "./connector";
import { container } from "./style";
import { jsx as _jsx } from "react/jsx-runtime";
const typeRenders = {
  [MEDIA_TYPE_IMAGE]: MediaImage,
  [MEDIA_TYPE_VIDEO]: MediaVideo
};

/**
 * The product media slider component.
 * @returns {JSX.Element}
 */
const MediaSlider = ({
  navigate,
  featuredMedia,
  media,
  'aria-hidden': ariaHidden,
  renderPlaceholder,
  className,
  paginationType
}) => {
  let currentSlide = 0;

  /**
   * @param {number} slide slide
   */
  const setCurrentSlide = slide => {
    currentSlide = slide;
  };

  /** Handle click */
  const handleSlideClick = () => {
    if (!media.length) {
      return;
    }
    navigate(currentSlide);
  };
  if (!Array.isArray(media) || media.length === 0) {
    return renderPlaceholder(featuredMedia);
  }
  return /*#__PURE__*/_jsx("div", {
    className: container,
    children: /*#__PURE__*/_jsx(SurroundPortals, {
      portalName: PRODUCT_MEDIA,
      children: media && /*#__PURE__*/_jsx(Swiper, {
        paginationType: paginationType,
        loop: media.length > 1,
        indicators: true,
        onSlideChange: setCurrentSlide,
        disabled: media.length === 1,
        controls: media.some(m => m.type === MEDIA_TYPE_VIDEO),
        className: className,
        "aria-hidden": ariaHidden,
        children: media.map(singleMedia => {
          const Type = typeRenders[singleMedia.type];
          return /*#__PURE__*/_jsx(Swiper.Item, {
            children: /*#__PURE__*/_jsx(Type, {
              media: singleMedia,
              onClick: handleSlideClick
            })
          }, Object.values(singleMedia).join('_'));
        })
      })
    })
  });
};
MediaSlider.defaultProps = {
  'aria-hidden': null,
  className: null,
  featuredMedia: null,
  paginationType: null,
  media: null,
  renderPlaceholder: featuredMedia => /*#__PURE__*/_jsx(MediaImage, {
    ...featuredMedia
  })
};
export default connect(MediaSlider);