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

Shopgate's ENGAGE library.

function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}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;}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}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,{Component}from'react';import PropTypes from'prop-types';import isEqual from'lodash/isEqual';import classnames from'classnames';import{logger}from'@shopgate/pwa-core';import appConfig,{themeConfig}from'@shopgate/pwa-common/helpers/config';import Image from'@shopgate/pwa-common/components/Image';import PlaceholderIcon from'@shopgate/pwa-ui-shared/icons/PlaceholderIcon';import SurroundPortals from'@shopgate/pwa-common/components/SurroundPortals';import{withWidgetSettings}from"../../../core/hocs/withWidgetSettings";import{PORTAL_PRODUCT_IMAGE}from"../../../components/constants";import ProductImagePlaceholder from"./ProductImagePlaceholder";import styles from"./style";import connect from"./connector";var colors=themeConfig.colors;/**
 * The product image component.
 * This component will behave like the core Image component with the additional
 * feature of showing a placeholder in case no src property has been passed
 * or the given source image cannot be loaded.
 */var ProductImage=/*#__PURE__*/function(_Component){/**
   * Component constructor
   * @param {Object} props The component properties
   */function ProductImage(props){var _this2;_classCallCheck(this,ProductImage);_this2=_callSuper(this,ProductImage,[props]);/**
   * Triggered when the image could not be loaded for some reason.
   */_defineProperty(_this2,"imageLoadingFailed",function(){_this2.setState({showPlaceholder:true,imageLoadingFailed:true});});/**
   * Sets the image ratio based on width and height.
   * @return {number} The image ratio.
   */_defineProperty(_this2,"getImageRatio",function(){if(_this2.props.ratio){var _this2$props$ratio2=_slicedToArray(_this2.props.ratio,2),x=_this2$props$ratio2[0],y=_this2$props$ratio2[1];return(y/x).toFixed(3);}var _this2$props$resoluti=_this2.props.resolutions[_this2.props.resolutions.length-1],width=_this2$props$resoluti.width,height=_this2$props$resoluti.height;return(height/width).toFixed(3);});logger.assert(!props.srcmap,'Use of srcmap prop is deprecated. Use resolutions instead');var showPlaceholder=!props.src&&(props.srcmap===null||props.srcmap.length===0);_this2.state={showPlaceholder:showPlaceholder,imageLoadingFailed:false};return _this2;}/**
   * Called when the component props change.
   * @param {Object} nextProps The new component properties
   */_inherits(ProductImage,_Component);return _createClass(ProductImage,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){// Disable the placeholder to give the real image a new chance to load.
// If we do not have a src property set then just show the placeholder instead.
var showPlaceholder=!nextProps.src&&(!nextProps.srcmap||nextProps.srcmap.length===0);this.setState({showPlaceholder:showPlaceholder});}/**
   * Should component update given the new props?
   * @param {Object} nextProps The next component props.
   * @param {Object} nextState The next state.
   * @return {boolean} Update or not.
   */},{key:"shouldComponentUpdate",value:function shouldComponentUpdate(nextProps,nextState){return!isEqual(this.props,nextProps)||!isEqual(this.state,nextState);}},{key:"render",value:/**
   * Renders the component.
   * @returns {JSX.Element}
   */function render(){var _this$props=this.props,noBackground=_this$props.noBackground,className=_this$props.className,placeholderSrc=_this$props.placeholderSrc;var showInnerShadow=this.props.widgetSettings.showInnerShadow;if(typeof showInnerShadow==='undefined'){showInnerShadow=!appConfig.hideProductImageShadow;}if(this.state.imageLoadingFailed||this.state.showPlaceholder){// Image is not present or could not be loaded, show a placeholder.
return React.createElement(SurroundPortals,{portalName:PORTAL_PRODUCT_IMAGE},React.createElement("div",{className:classnames(styles.placeholderContainer(this.getImageRatio()),_defineProperty(_defineProperty({},styles.innerShadow,showInnerShadow),className,!!className))},placeholderSrc?React.createElement(ProductImagePlaceholder,{src:placeholderSrc,showInnerShadow:showInnerShadow,noBackground:noBackground}):React.createElement("div",{"aria-hidden":true,className:styles.placeholderContent,"data-test-id":"placeHolder"},React.createElement(PlaceholderIcon,{className:styles.placeholder}))));}// Return the actual image.
return React.createElement(SurroundPortals,{portalName:PORTAL_PRODUCT_IMAGE,portalProps:{src:this.props.src,resolutions:this.props.resolutions}},React.createElement("div",{className:"".concat(className," engage__product__product-image")},React.createElement(Image,_extends({},this.props,{className:showInnerShadow?styles.innerShadow:'',backgroundColor:noBackground?'transparent':colors.light,onError:this.imageLoadingFailed,"aria-hidden":!this.props.alt}))));}}]);}(Component);/**
   * See Image component manual for detailed description about the component property types.
   */_defineProperty(ProductImage,"defaultProps",{alt:null,animating:true,className:null,forcePlaceholder:false,highestResolutionLoaded:function highestResolutionLoaded(){},noBackground:false,ratio:null,resolutions:[{width:50,height:50,blur:2},{width:440,height:440}],src:null,srcmap:null,placeholderSrc:null,widgetSettings:{}});export{ProductImage as UnwrappedProductImage};export default connect(withWidgetSettings(ProductImage,'@shopgate/engage/product/ProductImage'));