@shopgate/pwa-common 7.30.0-alpha.6 → 7.30.0-alpha.8

package/components/Image/Image.js

@@ -1,4 +1,16 @@
-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;/**
+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";
+const {
+  colors: themeColors
+} = themeConfig;
+
+/**
  * Calculates the Greatest Common Divisor (GCD) of two numbers using the Euclidean algorithm.
  *
  * @param {number} a - The first number (must be a positive integer).
@@ -9,32 +21,177 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * gcd(1920, 1080); // Returns 120
  * gcd(10, 15);     // Returns 5
  * gcd(100, 25);    // Returns 25
- */var gcd=function gcd(a,b){return b===0?a:gcd(b,a%b);};/**
+ */
+const gcd = (a, b) => b === 0 ? a : gcd(b, a % b);
+
+/**
  * The image component.
  * @param {Object} props The components props.
  * @returns {JSX.Element}
- */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(!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,sources.preview]);/**
+ */
+const Image = ({
+  alt,
+  backgroundColor,
+  className,
+  classNameImg,
+  forcePlaceholder: parentRendersPlaceholder,
+  highestResolutionLoaded,
+  onError,
+  onLoad,
+  ratio,
+  resolutions,
+  src,
+  lazy,
+  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.
+  const sources = useMemo(() => {
+    // Create a preview source when resolutions array has more than one element
+    const 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)
+    const 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
+    };
+  }, [resolutions, src]);
+  const imgRef = useRef(null);
+  const [isInView, setIsInView] = useState(!lazy);
+
+  // Effect to create an Intersection Observer to enable lazy loading of preview images
+  useEffect(() => {
+    if (!lazy || !sources.preview) return undefined;
+
+    // Intersection Observer to check if the image is in (or near) the viewport
+    const observer = new IntersectionObserver(([entry]) => {
+      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 () => {
+      // disconnect the observer when the component is unmounted
+      observer.disconnect();
+    };
+  }, [lazy, sources.preview]);
+
+  /**
    * Handles the onLoad event of the image.
-   */var handleOnLoad=useCallback(function(e){highestResolutionLoaded();onLoad(e);},[highestResolutionLoaded,onLoad]);/**
+   */
+  const handleOnLoad = useCallback(e => {
+    highestResolutionLoaded();
+    onLoad(e);
+  }, [highestResolutionLoaded, onLoad]);
+
+  /**
    * Handles the onError event of the image.
-   */var handleOnError=useCallback(function(e){onError(e);},[onError]);/**
+   */
+  const handleOnError = useCallback(e => {
+    onError(e);
+  }, [onError]);
+
+  /**
    * Memoized calculation of aspect ratio and CSS padding-hack ratio for responsive elements.
    *
    * Returns n object containing:
    * - `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),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,'common__image__container')},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);
+   */
+  const {
+    aspectRatio,
+    paddingHackRatio
+  } = useMemo(() => {
+    let width;
+    let height;
+    if (ratio) {
+      [width, height] = ratio;
+    } else {
+      ({
+        width,
+        height
+      } = resolutions[resolutions.length - 1]);
+    }
+    const divisor = gcd(width, height);
+    return {
+      aspectRatio: `${width / divisor} / ${height / divisor}`,
+      paddingHackRatio: `${(height / width * 100).toFixed(3)}%`
+    };
+  }, [ratio, resolutions]);
+  if (unwrapped) {
+    if (!(src && !parentRendersPlaceholder)) return null;
+    return /*#__PURE__*/React.createElement(ImageInner, {
+      ref: imgRef,
+      src: sources.main,
+      className: classNames(classNameImg),
+      style: {
+        aspectRatio,
+        ...(isInView && sources.preview && {
+          backgroundImage: `url(${sources.preview})`,
+          backgroundSize: 'contain',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center'
+        })
+      },
+      alt: alt,
+      lazy: lazy,
+      onLoad: handleOnLoad,
+      onError: handleOnError
+    });
+  }
+  const containerStyle = styles.container(backgroundColor, paddingHackRatio);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(containerStyle, className, 'common__image__container')
+  }, src && !parentRendersPlaceholder && /*#__PURE__*/React.createElement(ImageInner, {
+    ref: imgRef,
+    src: sources.main,
+    className: classNames(classNameImg),
+    style: {
+      aspectRatio,
+      ...(isInView && sources.preview && {
+        backgroundImage: `url(${sources.preview})`,
+        backgroundSize: 'contain',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center'
+      })
+    },
+    alt: alt,
+    lazy: lazy,
+    onLoad: handleOnLoad,
+    onError: handleOnError
+  }));
+};
+const 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 /*#__PURE__*/memo(Image);

package/components/Image/ImageInner.js

@@ -1,6 +1,52 @@
-import React,{forwardRef}from'react';import PropTypes from'prop-types';import classNames from'classnames';import noop from'lodash/noop';import styles from"./style";/**
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import noop from 'lodash/noop';
+import styles from "./style";
+
+/**
  * The ImageInner component renders tha actual image of the Image component.
  * @param {Object} props The component props
  * @param {Function} ref The component reference
  * @returns {JSX.Element}
- */var ImageInner=forwardRef(function(_ref,ref){var src=_ref.src,className=_ref.className,alt=_ref.alt,lazy=_ref.lazy,onLoad=_ref.onLoad,onError=_ref.onError,style=_ref.style;return React.createElement("img",{ref:ref,loading:lazy?'lazy':'eager',src:src,className:classNames(className,styles.image,'common__image'),alt:alt,"aria-label":alt,"aria-hidden":!alt,"data-test-id":"image",onLoad:onLoad,onError:onError,style:style});});ImageInner.propTypes={alt:PropTypes.string,className:PropTypes.string,lazy:PropTypes.bool,onError:PropTypes.func,onLoad:PropTypes.func,src:PropTypes.string,style:PropTypes.shape()};ImageInner.defaultProps={src:null,alt:null,className:null,lazy:false,style:null,onError:noop,onLoad:noop};export default ImageInner;
+ */
+const ImageInner = /*#__PURE__*/forwardRef(({
+  src,
+  className,
+  alt,
+  lazy,
+  onLoad,
+  onError,
+  style
+}, ref) => /*#__PURE__*/React.createElement("img", {
+  ref: ref,
+  loading: lazy ? 'lazy' : 'eager',
+  src: src,
+  className: classNames(className, styles.image, 'common__image'),
+  alt: alt,
+  "aria-label": alt,
+  "aria-hidden": !alt,
+  "data-test-id": "image",
+  onLoad: onLoad,
+  onError: onError,
+  style: style
+}));
+ImageInner.propTypes = {
+  alt: PropTypes.string,
+  className: PropTypes.string,
+  lazy: PropTypes.bool,
+  onError: PropTypes.func,
+  onLoad: PropTypes.func,
+  src: PropTypes.string,
+  style: PropTypes.shape()
+};
+ImageInner.defaultProps = {
+  src: null,
+  alt: null,
+  className: null,
+  lazy: false,
+  style: null,
+  onError: noop,
+  onLoad: noop
+};
+export default ImageInner;

package/components/Image/index.js

@@ -1 +1 @@
-export{default}from"./Image";
+export { default } from "./Image";

package/components/Image/style.js

@@ -1,5 +1,32 @@
-import{css}from'glamor';import{themeColors}from'@shopgate/pwa-common/helpers/config';/**
+import { css } from 'glamor';
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
+
+/**
  * @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',fontSize:0}).toString();export default{container:container,image:image};
+ */
+const container = (background = themeColors.placeholder, paddingTop = '100%') => css({
+  background,
+  position: 'relative',
+  zIndex: 0,
+  ':before': {
+    display: 'block',
+    content: '""',
+    width: '100%',
+    paddingTop
+  }
+}).toString();
+const image = css({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  maxHeight: '100%',
+  WebkitTouchCallout: 'none',
+  fontSize: 0
+}).toString();
+export default {
+  container,
+  image
+};