@shopgate/engage/category/components/CategoryImage/index.js

Shopgate's ENGAGE library.

import React, { useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import { Image } from '@shopgate/engage/components';
import connect from "./connector";

/**
 * The CategoryImage component
 * @param {Object} props The component props.
 * @returns {JSX.Element}
 */
import { jsx as _jsx } from "react/jsx-runtime";
const CategoryImage = ({
  className,
  src,
  placeholderSrc
}) => {
  const [showPlaceholder, setShowPlaceholder] = useState(!src);
  const onImageError = useCallback(() => {
    setShowPlaceholder(true);
  }, [setShowPlaceholder]);
  if (!showPlaceholder) {
    return /*#__PURE__*/_jsx(Image, {
      className: className,
      src: src,
      onError: onImageError
    });
  }
  if (!placeholderSrc) {
    return null;
  }
  return /*#__PURE__*/_jsx(Image, {
    className: className,
    src: placeholderSrc
  }, "placeholder");
};
CategoryImage.defaultProps = {
  src: null,
  placeholderSrc: null,
  className: null
};
export default connect(CategoryImage);