@shopgate/pwa-common 7.23.2 → 7.23.4

package/components/Image/Image.js

@@ -1,4 +1,4 @@
-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 _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,{useMemo,useState,useEffect,useRef,useCallback,memo}from'react';import PropTypes from'prop-types';import classNames from'classnames';import noop from'lodash/noop';import{themeConfig}from'@shopgate/engage';import{getFullImageSource}from'@shopgate/engage/core/helpers';import styles from"./style";import ImageInner from"./ImageInner";var themeColors=themeConfig.colors;/**
+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;}import React,{useMemo,useState,useEffect,useRef,useCallback,memo}from'react';import PropTypes from'prop-types';import classNames from'classnames';import noop from'lodash/noop';import{themeConfig}from'@shopgate/engage';import{getFullImageSource}from'@shopgate/engage/core/helpers';import styles from"./style";import ImageInner from"./ImageInner";var themeColors=themeConfig.colors;/**
  * Calculates the Greatest Common Divisor (GCD) of two numbers using the Euclidean algorithm.
  *
  * @param {number} a - The first number (must be a positive integer).
@@ -13,34 +13,22 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * The image component.
  * @param {Object} props The components props.
  * @returns {JSX.Element}
- */var Image=function Image(_ref){var alt=_ref.alt,animating=_ref.animating,backgroundColor=_ref.backgroundColor,className=_ref.className,classNameImg=_ref.classNameImg,parentRendersPlaceholder=_ref.forcePlaceholder,highestResolutionLoaded=_ref.highestResolutionLoaded,onError=_ref.onError,onLoad=_ref.onLoad,ratio=_ref.ratio,resolutions=_ref.resolutions,src=_ref.src,lazy=_ref.lazy,unwrapped=_ref.unwrapped;// Prepare two image sources - a small preview image and a large main image. The idea is to
+ */var Image=function Image(_ref){var alt=_ref.alt,backgroundColor=_ref.backgroundColor,className=_ref.className,classNameImg=_ref.classNameImg,parentRendersPlaceholder=_ref.forcePlaceholder,highestResolutionLoaded=_ref.highestResolutionLoaded,onError=_ref.onError,onLoad=_ref.onLoad,ratio=_ref.ratio,resolutions=_ref.resolutions,src=_ref.src,lazy=_ref.lazy,unwrapped=_ref.unwrapped;// Prepare two image sources - a small preview image and a large main image. The idea is to
 // display an image as soon as possible. Small images might be also available in the cache from
 // the previous page.
 var sources=useMemo(function(){// Create a preview source when resolutions array has more than one element
 var preview=resolutions.length>1?getFullImageSource(src,resolutions[resolutions.length-2]):null;// Create a main source when resolutions array has at least one element (highest resolution)
 var main=resolutions.length>0?getFullImageSource(src,resolutions[resolutions.length-1]):null;return{// Only assign preview source if it is different from the main source. Image swap logic
 // will not run when no preview source is available.
-preview:preview!==main?preview:null,main:main};},[resolutions,src]);var imgRef=useRef(null);var _useState=useState(false),_useState2=_slicedToArray(_useState,2),imageLoaded=_useState2[0],setImageLoaded=_useState2[1];var _useState3=useState(!lazy),_useState4=_slicedToArray(_useState3,2),isInView=_useState4[0],setIsInView=_useState4[1];/**
-   * Determines if the initial image is cached.
-   *
-   * This hook uses the `useMemo` hook to memoize the result. It creates a new
-   * `Image` object, sets its `src` to either the preview or main source, and checks
-   * if the image is complete (cached). The `src` is then reset to an empty string to abort
-   * the image request. The actual request is handled by the img tag.
-   *
-   * @returns {boolean} - Returns `true` if the image is cached, otherwise `false`.
-   */var initialImageCached=useMemo(function(){// The return value of this hook is used to determine if the image should fade in after loading
-// from the server. When the `animating` prop is set to false, the image should not fade in,
-// so we return true to disable the fade-in mechanism.
-if(!animating)return true;var img=new window.Image();img.src=sources.preview||sources.main;var complete=img.complete;img.src='';return complete;},[animating,sources.main,sources.preview]);// Effect to create an Intersection Observer to enable lazy loading of preview images
-useEffect(function(){if(!lazy)return undefined;// Intersection Observer to check if the image is in (or near) the viewport
+preview:preview!==main?preview:null,main:main};},[resolutions,src]);var imgRef=useRef(null);var _useState=useState(!lazy),_useState2=_slicedToArray(_useState,2),isInView=_useState2[0],setIsInView=_useState2[1];// Effect to create an Intersection Observer to enable lazy loading of preview images
+useEffect(function(){if(!lazy||!sources.preview)return undefined;// Intersection Observer to check if the image is in (or near) the viewport
 var observer=new IntersectionObserver(function(_ref2){var _ref3=_slicedToArray(_ref2,1),entry=_ref3[0];if(entry.isIntersecting){setIsInView(true);// stop observing once visible
 observer.unobserve(entry.target);}},// load a bit earlier
 {rootMargin:'100px'});if(imgRef.current){// start observing the image element
 observer.observe(imgRef.current);}return function(){// disconnect the observer when the component is unmounted
-observer.disconnect();};},[lazy]);/**
+observer.disconnect();};},[lazy,sources.preview]);/**
    * Handles the onLoad event of the image.
-   */var handleOnLoad=useCallback(function(e){highestResolutionLoaded();onLoad(e);setImageLoaded(true);},[highestResolutionLoaded,onLoad]);/**
+   */var handleOnLoad=useCallback(function(e){highestResolutionLoaded();onLoad(e);},[highestResolutionLoaded,onLoad]);/**
    * Handles the onError event of the image.
    */var handleOnError=useCallback(function(e){onError(e);},[onError]);/**
    * Memoized calculation of aspect ratio and CSS padding-hack ratio for responsive elements.
@@ -49,4 +37,4 @@ observer.disconnect();};},[lazy]);/**
    * - `aspectRatio` {string} - The aspect ratio in the format `width / height` (e.g., `16 / 9`).
    * - `paddingHackRatio` {string} - The CSS padding-hack ratio as a percentage for older browsers
    * (e.g., `56.250%` for a 16:9 ratio).
-   */var _useMemo=useMemo(function(){var width;var height;if(ratio){var _ratio=_slicedToArray(ratio,2);width=_ratio[0];height=_ratio[1];}else{var _resolutions=resolutions[resolutions.length-1];width=_resolutions.width;height=_resolutions.height;}var divisor=gcd(width,height);return{aspectRatio:"".concat(width/divisor," / ").concat(height/divisor),paddingHackRatio:"".concat((height/width*100).toFixed(3),"%")};},[ratio,resolutions]),aspectRatio=_useMemo.aspectRatio,paddingHackRatio=_useMemo.paddingHackRatio;if(unwrapped){if(!(src&&!parentRendersPlaceholder))return null;return React.createElement(ImageInner,{ref:imgRef,src:sources.main,className:classNames(classNameImg,_defineProperty(_defineProperty({},styles.imageAnimated,animating&&!initialImageCached),styles.imageVisible,animating&&(initialImageCached||imageLoaded))),style:_extends({aspectRatio:aspectRatio},isInView&&sources.preview&&{backgroundImage:"url(".concat(sources.preview,")"),backgroundSize:'cover'}),alt:alt,lazy:lazy,onLoad:handleOnLoad,onError:handleOnError});}var containerStyle=styles.container(backgroundColor,paddingHackRatio);return React.createElement("div",{className:classNames(containerStyle,className)},src&&!parentRendersPlaceholder&&React.createElement(ImageInner,{ref:imgRef,src:sources.main,className:classNames(classNameImg,_defineProperty(_defineProperty({},styles.imageAnimated,animating&&!initialImageCached),styles.imageVisible,animating&&(initialImageCached||imageLoaded))),style:_extends({aspectRatio:aspectRatio},isInView&&sources.preview&&{backgroundImage:"url(".concat(sources.preview,")"),backgroundSize:'cover'}),alt:alt,lazy:lazy,onLoad:handleOnLoad,onError:handleOnError}));};var defaultResolutions=[{width:440,height:440}];Image.defaultProps={alt:null,animating:false,backgroundColor:themeColors.placeholder,className:'',classNameImg:'',forcePlaceholder:false,highestResolutionLoaded:noop,onError:noop,onLoad:noop,ratio:null,resolutions:defaultResolutions,src:null,unwrapped:false,lazy:true};export default memo(Image);
+   */var _useMemo=useMemo(function(){var width;var height;if(ratio){var _ratio=_slicedToArray(ratio,2);width=_ratio[0];height=_ratio[1];}else{var _resolutions=resolutions[resolutions.length-1];width=_resolutions.width;height=_resolutions.height;}var divisor=gcd(width,height);return{aspectRatio:"".concat(width/divisor," / ").concat(height/divisor),paddingHackRatio:"".concat((height/width*100).toFixed(3),"%")};},[ratio,resolutions]),aspectRatio=_useMemo.aspectRatio,paddingHackRatio=_useMemo.paddingHackRatio;if(unwrapped){if(!(src&&!parentRendersPlaceholder))return null;return React.createElement(ImageInner,{ref:imgRef,src:sources.main,className:classNames(classNameImg),style:_extends({aspectRatio:aspectRatio},isInView&&sources.preview&&{backgroundImage:"url(".concat(sources.preview,")"),backgroundSize:'contain',backgroundRepeat:'no-repeat',backgroundPosition:'center'}),alt:alt,lazy:lazy,onLoad:handleOnLoad,onError:handleOnError});}var containerStyle=styles.container(backgroundColor,paddingHackRatio);return React.createElement("div",{className:classNames(containerStyle,className)},src&&!parentRendersPlaceholder&&React.createElement(ImageInner,{ref:imgRef,src:sources.main,className:classNames(classNameImg),style:_extends({aspectRatio:aspectRatio},isInView&&sources.preview&&{backgroundImage:"url(".concat(sources.preview,")"),backgroundSize:'contain',backgroundRepeat:'no-repeat',backgroundPosition:'center'}),alt:alt,lazy:lazy,onLoad:handleOnLoad,onError:handleOnError}));};var defaultResolutions=[{width:440,height:440}];Image.defaultProps={alt:null,backgroundColor:themeColors.placeholder,className:'',classNameImg:'',forcePlaceholder:false,highestResolutionLoaded:noop,onError:noop,onLoad:noop,ratio:null,resolutions:defaultResolutions,src:null,unwrapped:false,lazy:true};export default memo(Image);

package/components/Image/style.js

@@ -2,4 +2,4 @@ import{css}from'glamor';import{themeColors}from'@shopgate/pwa-common/helpers/con
  * @param {string} [background=themeColors.placeholder] The background color.
  * @param {string} [paddingTop='100%'] The padding top value.
  * @returns {string} The compiled class names.
- */var container=function container(){var background=arguments.length>0&&arguments[0]!==undefined?arguments[0]:themeColors.placeholder;var paddingTop=arguments.length>1&&arguments[1]!==undefined?arguments[1]:'100%';return css({background:background,position:'relative',zIndex:0,':before':{display:'block',content:'""',width:'100%',paddingTop:paddingTop}}).toString();};var image=css({position:'absolute',top:0,left:0,width:'100%',maxHeight:'100%',WebkitTouchCallout:'none'}).toString();var imageAnimated=css({opacity:0,transition:'opacity 0.2s ease-in-out'}).toString();var imageVisible=css({opacity:1}).toString();export default{container:container,image:image,imageAnimated:imageAnimated,imageVisible:imageVisible};
+ */var container=function container(){var background=arguments.length>0&&arguments[0]!==undefined?arguments[0]:themeColors.placeholder;var paddingTop=arguments.length>1&&arguments[1]!==undefined?arguments[1]:'100%';return css({background:background,position:'relative',zIndex:0,':before':{display:'block',content:'""',width:'100%',paddingTop:paddingTop}}).toString();};var image=css({position:'absolute',top:0,left:0,width:'100%',maxHeight:'100%',WebkitTouchCallout:'none'}).toString();export default{container:container,image:image};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/pwa-common",
-  "version": "7.23.2",
+  "version": "7.23.4",
   "description": "Common library for the Shopgate Connect PWA.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,7 +17,7 @@
   "dependencies": {
     "@redux-devtools/extension": "^3.3.0",
     "@sentry/browser": "6.0.1",
-    "@shopgate/pwa-benchmark": "7.23.2",
+    "@shopgate/pwa-benchmark": "7.23.4",
     "@virtuous/conductor": "~2.5.0",
     "@virtuous/react-conductor": "~2.5.0",
     "@virtuous/redux-persister": "1.1.0-beta.7",
@@ -43,7 +43,7 @@
     "url-search-params": "^0.10.0"
   },
   "devDependencies": {
-    "@shopgate/pwa-core": "7.23.2",
+    "@shopgate/pwa-core": "7.23.4",
     "@types/react-portal": "^3.0.9",
     "lodash": "^4.17.4",
     "prop-types": "~15.8.1",