@shopgate/engage/product/components/Media/MediaImage.js

Shopgate's ENGAGE library.

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.Element}
 */
import { jsx as _jsx } from "react/jsx-runtime";
const MediaImage = ({
  url,
  altText,
  className,
  resolutions
}) => {
  const [placeholder, setPlaceholderEnabled] = useState(!url);
  const {
    showInnerShadow = !appConfig.hideProductImageShadow
  } = useWidgetSettings('@shopgate/engage/product/MediaImage');
  useEffect(() => setPlaceholderEnabled(!url), [url]);
  const classes = classnames(className, {
    [innerShadow]: showInnerShadow
  });
  if (placeholder) {
    return /*#__PURE__*/_jsx(SurroundPortals, {
      portalName: PORTAL_PRODUCT_IMAGE,
      children: /*#__PURE__*/_jsx(MediaPlaceholder, {
        className: classes
      })
    });
  }
  return /*#__PURE__*/_jsx(SurroundPortals, {
    portalName: PORTAL_PRODUCT_IMAGE,
    portalProps: {
      src: url,
      resolutions
    },
    children: /*#__PURE__*/_jsx(Image, {
      src: url,
      resolutions: resolutions,
      alt: altText,
      className: classes,
      backgroundColor: "transparent",
      onError: () => setPlaceholderEnabled(true),
      animating: true
    })
  });
};
MediaImage.defaultProps = {
  url: defaultProps.url,
  altText: defaultProps.altText,
  className: defaultProps.className,
  resolutions: undefined
};
export default MediaImage;