@risecx/carespace-chat-ui/es/components/Messages/Image/ImageMessage.js

carespace-chat-ui React component

import React from 'react';
import './image.css';
import ModalImage from 'react-modal-image';
import expandIcon from "./../../../assets/expand.svg";

var ImageMessage = function ImageMessage(props) {
  var _props$data = props.data,
      url = _props$data.url,
      _props$data$settings = _props$data.settings,
      settings = _props$data$settings === void 0 ? {
    openingMode: 'MODAL'
  } : _props$data$settings;

  function handleClick(e) {
    e.preventDefault();
    var settings = {
      openingMode: 'BLANK'
    };
    return settings.openingMode;
  }

  return /*#__PURE__*/React.createElement("div", {
    className: "card-container-out"
  }, /*#__PURE__*/React.createElement("div", {
    className: "card sc-message--image"
  }, !!url && settings.openingMode === 'BLANK' && /*#__PURE__*/React.createElement("a", {
    href: url,
    target: "__blank"
  }, /*#__PURE__*/React.createElement("img", {
    src: url,
    alt: "Avatar",
    style: {
      width: '100%'
    }
  })), !!url && (!settings.openingMode || settings.openingMode === 'MODAL') && /*#__PURE__*/React.createElement("div", {
    className: "image-container"
  }, /*#__PURE__*/React.createElement(ModalImage, {
    small: url,
    large: url
  }), /*#__PURE__*/React.createElement("a", {
    onClick: handleClick,
    target: "__blank",
    className: "expand"
  }, /*#__PURE__*/React.createElement("img", {
    src: expandIcon
  })))));
};

export default ImageMessage;