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

carespace-chat-ui React component

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

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

require("./image.css");

var _reactModalImage = _interopRequireDefault(require("react-modal-image"));

var _expand = _interopRequireDefault(require("./../../../assets/expand.svg"));

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

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["default"].createElement("div", {
    className: "card-container-out"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "card sc-message--image"
  }, !!url && settings.openingMode === 'BLANK' && /*#__PURE__*/_react["default"].createElement("a", {
    href: url,
    target: "__blank"
  }, /*#__PURE__*/_react["default"].createElement("img", {
    src: url,
    alt: "Avatar",
    style: {
      width: '100%'
    }
  })), !!url && (!settings.openingMode || settings.openingMode === 'MODAL') && /*#__PURE__*/_react["default"].createElement("div", {
    className: "image-container"
  }, /*#__PURE__*/_react["default"].createElement(_reactModalImage["default"], {
    small: url,
    large: url
  }), /*#__PURE__*/_react["default"].createElement("a", {
    onClick: handleClick,
    target: "__blank",
    className: "expand"
  }, /*#__PURE__*/_react["default"].createElement("img", {
    src: _expand["default"]
  })))));
};

var _default = ImageMessage;
exports["default"] = _default;
module.exports = exports.default;