@shopgate/engage/product/components/ProductImage/ProductImagePlaceholder.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,{useEffect,useMemo,useState}from'react';import PropTypes from'prop-types';import classnames from'classnames';import PlaceholderIcon from'@shopgate/pwa-ui-shared/icons/PlaceholderIcon';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{useLoadImage}from'@shopgate/engage/core';import styles from"./style";var colors=themeConfig.colors;/**
 * The ProductImagePlaceholder component.
 * @param {Object} props The components props.
 * @returns {JSX}
 */var ProductImagePlaceholder=function ProductImagePlaceholder(_ref){var src=_ref.src,showInnerShadow=_ref.showInnerShadow,noBackground=_ref.noBackground;var _useState=useState(true),_useState2=_slicedToArray(_useState,2),showPlaceholder=_useState2[0],setShowPlaceholder=_useState2[1];var srcLoaded=useLoadImage(src);useEffect(function(){setShowPlaceholder(false);},[srcLoaded]);var contentStyles=useMemo(function(){if(srcLoaded){return{backgroundImage:"url(".concat(src,")"),backgroundSize:'contain',backgroundRepeat:'no-repeat',backgroundPosition:'center',backgroundColor:noBackground?'transparent':colors.light,position:'absolute'};}return{backgroundColor:noBackground?'transparent':colors.light};},[src,noBackground,srcLoaded]);var contentClasses=classnames(styles.placeholderContent,_defineProperty({},styles.innerShadow,showInnerShadow));return React.createElement("div",{className:contentClasses,style:contentStyles,"data-test-id":"placeHolder"},showPlaceholder&&React.createElement(PlaceholderIcon,{className:styles.placeholder}),!showPlaceholder&&' ');};ProductImagePlaceholder.defaultProps={src:null,noBackground:false,showInnerShadow:false};export default ProductImagePlaceholder;