@guestbell/react-page-plugins/build/image/Renderer/ImageHtmlRenderer.js

Plugins we use in GuestBell for working with amazing react-page package

import * as React from 'react';
import { iconStyle } from './../common/styles';
import { lazyLoad } from '@react-page/editor';
import classNames from 'classnames';
import { ImageConstraintMode } from '../types/state';
import PaddingComponent from '../../common/utils/PaddingComponent';
import { getPathname, isSamePageUrl } from '../../common/utils/urlUtil';
import { Link } from 'react-router-dom';
var ImageIcon = lazyLoad(function () {
  return import('@mui/icons-material/Landscape');
});
var ImageHtmlRenderer = function ImageHtmlRenderer(props) {
  var isEditMode = props.isEditMode,
    data = props.data;
  var _data$hasMargin = data.hasMargin,
    hasMargin = _data$hasMargin === void 0 ? true : _data$hasMargin;
  if (!data.image && !data.src) {
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
      className: "ory-plugins-content-image-placeholder"
    }, /*#__PURE__*/React.createElement(ImageIcon, {
      style: iconStyle
    })));
  }
  var Image;
  var className = classNames('ory-plugins-content-image', {
    'ory-plugins-content-image--fw': data.constraintMode === undefined || data.constraintMode === ImageConstraintMode.FullWidth,
    'ory-plugins-content-image--small-height': data.constraintMode === ImageConstraintMode.SmallHeight,
    'ory-plugins-content-image--medium-height': data.constraintMode === ImageConstraintMode.MediumHeight,
    'ory-plugins-content-image--big-height': data.constraintMode === ImageConstraintMode.BigHeight
  });
  if (data.image) {
    Image = /*#__PURE__*/React.createElement("img", {
      className: className,
      src: data.image.src,
      srcSet: data.image.srcSet
    });
  } else {
    Image = /*#__PURE__*/React.createElement("img", {
      className: className,
      src: data.src,
      srcSet: data.srcSet
    });
  }
  return /*#__PURE__*/React.createElement(PaddingComponent, {
    state: props.data
  }, /*#__PURE__*/React.createElement("div", {
    className: "ory-plugins-content-image__container",
    style: hasMargin ? undefined : {
      padding: 0
    }
  }, data.href && !isEditMode ? isSamePageUrl(data.href) ? /*#__PURE__*/React.createElement(Link, {
    to: getPathname(data.href)
  }, Image) : /*#__PURE__*/React.createElement("a", {
    href: data.href
  }, Image) : Image));
};
export default ImageHtmlRenderer;
//# sourceMappingURL=ImageHtmlRenderer.js.map