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

Shopgate's ENGAGE library.

function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}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";var typeRenders=_defineProperty(_defineProperty({},MEDIA_TYPE_IMAGE,MediaImage),MEDIA_TYPE_VIDEO,MediaVideo);/**
 * The product media slider component.
 * @returns {JSX}
 */var MediaSlider=function MediaSlider(_ref){var navigate=_ref.navigate,featuredMedia=_ref.featuredMedia,media=_ref.media,ariaHidden=_ref['aria-hidden'],renderPlaceholder=_ref.renderPlaceholder,className=_ref.className;var currentSlide=0;/**
   * @param {number} slide slide
   */var setCurrentSlide=function setCurrentSlide(slide){currentSlide=slide;};/** Handle click */var handleSlideClick=function handleSlideClick(){if(!media.length){return;}navigate(currentSlide);};if(!Array.isArray(media)||media.length===0){return renderPlaceholder(featuredMedia);}return React.createElement("div",{className:container},React.createElement(SurroundPortals,{portalName:PRODUCT_MEDIA},media&&React.createElement(Swiper,{loop:media.length>1,indicators:true,onSlideChange:setCurrentSlide,disabled:media.length===1,controls:media.some(function(m){return m.type===MEDIA_TYPE_VIDEO;}),className:className,"aria-hidden":ariaHidden},media.map(function(singleMedia){var Type=typeRenders[singleMedia.type];return React.createElement(Swiper.Item,{key:Object.values(singleMedia).join('_')},React.createElement(Type,{media:singleMedia,onClick:handleSlideClick}));}))));};MediaSlider.defaultProps={'aria-hidden':null,className:null,featuredMedia:null,media:null,renderPlaceholder:function renderPlaceholder(featuredMedia){return React.createElement(MediaImage,featuredMedia);}};export default connect(MediaSlider);