@mirrormedia/lilith-draft-renderer/lib/website/readr/block-renderers/image-block.js

## Introduction

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ImageBlock = ImageBlock;

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _reactImage = _interopRequireDefault(require("@readr-media/react-image"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const defaultImage = "https://unpkg.com/@mirrormedia/lilith-draft-renderer@1.4.0/lib/public/722f90c535fa64c27555ec6ee5f22393.png";
const Figure = _styledComponents.default.figure`
  width: calc(100% + 40px);
  transform: translateX(-20px);
  ${({
  theme
}) => theme.margin.default};
`;
const FigureCaption = _styledComponents.default.figcaption`
  width: 100%;
  ${({
  theme
}) => theme.fontSize.xs}
  line-height: 20px;
  text-align: justify;
  color: rgba(0, 9, 40, 0.5);
  padding: 0 20px;
  margin: 8px 0 0;

  ${({
  theme
}) => theme.breakpoint.xl} {
    line-height: 24px;
    ${({
  theme
}) => theme.fontSize.sm};
  }
`;
const Anchor = _styledComponents.default.a`
  text-decoration: none;
`;

function ImageBlock(props) {
  const {
    block,
    contentState
  } = props;
  const entityKey = block.getEntityAt(0);
  const entity = contentState.getEntity(entityKey);
  const {
    desc,
    name,
    resized = {},
    resizedWebp = {},
    url
  } = entity.getData();

  let imgBlock = /*#__PURE__*/_react.default.createElement(Figure, null, /*#__PURE__*/_react.default.createElement(_reactImage.default, {
    images: resized,
    imagesWebP: resizedWebp,
    defaultImage: defaultImage,
    alt: name,
    rwd: {
      mobile: '100vw',
      tablet: '608px',
      desktop: '640px',
      default: '100%'
    },
    priority: true
  }), /*#__PURE__*/_react.default.createElement(FigureCaption, null, desc));

  if (url) {
    imgBlock = /*#__PURE__*/_react.default.createElement(Anchor, {
      href: url,
      target: "_blank"
    }, imgBlock);
  }

  return imgBlock;
}