@shopgate/engage/product/components/Media/MediaImage.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;}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useState,useEffect}from'react';import PropTypes from'prop-types';import classnames from'classnames';import Image from'@shopgate/pwa-common/components/Image';import appConfig from'@shopgate/pwa-common/helpers/config';import{SurroundPortals}from"../../../components";import{PORTAL_PRODUCT_IMAGE}from"../../../components/constants";import{useWidgetSettings}from"../../../core";import{defaultProps,propTypes}from"./props";import MediaPlaceholder from"./MediaPlaceholder";import{innerShadow}from"./style";/**
 * The featured image component.
 * @returns {JSX}
 */var MediaImage=function MediaImage(_ref){var url=_ref.url,altText=_ref.altText,className=_ref.className,resolutions=_ref.resolutions;var _useState=useState(!url),_useState2=_slicedToArray(_useState,2),placeholder=_useState2[0],setPlaceholderEnabled=_useState2[1];var _useWidgetSettings=useWidgetSettings('@shopgate/engage/product/MediaImage'),_useWidgetSettings$sh=_useWidgetSettings.showInnerShadow,showInnerShadow=_useWidgetSettings$sh===void 0?!appConfig.hideProductImageShadow:_useWidgetSettings$sh;useEffect(function(){return setPlaceholderEnabled(!url);},[url]);var classes=classnames(className,_defineProperty({},innerShadow,showInnerShadow));if(placeholder){return React.createElement(SurroundPortals,{portalName:PORTAL_PRODUCT_IMAGE},React.createElement(MediaPlaceholder,{className:classes}));}return React.createElement(SurroundPortals,{portalName:PORTAL_PRODUCT_IMAGE,portalProps:{src:url,resolutions:resolutions}},React.createElement(Image,{src:url,resolutions:resolutions,alt:altText,className:classes,backgroundColor:"transparent",onError:function onError(){return setPlaceholderEnabled(true);},animating:true}));};MediaImage.defaultProps={url:defaultProps.url,altText:defaultProps.altText,className:defaultProps.className,resolutions:undefined};export default MediaImage;