cometchat-react-ui-kit2/dist/Messages/Bubbles/CometChatFileBubble/index.js

CometChat UI Kit for React App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CometChatFileBubble = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _hooks = require("./hooks");
var _downloadIcon = _interopRequireDefault(require("./resources/download-icon.svg"));
var _ = require("../../../");
var _style = require("./style");
/**
 *
 * CometChatTextBubble is UI component for file message bubble.
 *
 * @version 1.0.0
 * @author CometChatTeam
 * @copyright © 2022 CometChat Inc.
 *
 */
var CometChatFileBubble = function CometChatFileBubble(props) {
  var _React$useState = _react["default"].useState(""),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    fileURL = _React$useState2[0],
    setFileURL = _React$useState2[1];
  var _React$useState3 = _react["default"].useState(""),
    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
    title = _React$useState4[0],
    setTitle = _React$useState4[1];
  var _React$useState5 = _react["default"].useState(""),
    _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
    subTitle = _React$useState6[0],
    setSubTitle = _React$useState6[1];
  var theme = new _.CometChatTheme(props.theme) || new _.CometChatTheme({});
  var fileDownload = function fileDownload() {
    fetch(fileURL).then(function (response) {
      return response.blob();
    }).then(function (blob) {
      var blobURL = URL.createObjectURL(blob);
      var a = document.createElement("a");
      a.href = blobURL;
      a.style = "display: none";
      if (title && title.length) a.download = title;
      document.body.appendChild(a);
      a.click();
    })["catch"](function (error) {
      return _.CometChatMessageEvents.emit(_.CometChatMessageEvents.onMessageError, error);
    });
  };
  var fileMessage = function fileMessage() {
    return /*#__PURE__*/_react["default"].createElement("div", {
      style: (0, _style.messageKitFileBubbleBlockStyle)(props, theme),
      className: "message_kit__blocks"
    }, /*#__PURE__*/_react["default"].createElement("div", {
      style: (0, _style.messageFileBubbleBlockStyle)(props),
      className: "message__message-blocks"
    }, /*#__PURE__*/_react["default"].createElement("div", {
      style: (0, _style.messageTitleStyle)(props, theme),
      className: "message__message-title"
    }, title), /*#__PURE__*/_react["default"].createElement("div", {
      style: (0, _style.messageSubTitleStyle)(props, theme),
      className: "message__message-subtitle"
    }, subTitle)), /*#__PURE__*/_react["default"].createElement("button", {
      style: (0, _style.messageFileIconStyle)(props, _downloadIcon["default"], theme),
      className: "message__message-download-icon",
      onClick: fileDownload
    }));
  };
  (0, _hooks.Hooks)(props, setTitle, setSubTitle, setFileURL);
  return fileMessage();
};
exports.CometChatFileBubble = CometChatFileBubble;
CometChatFileBubble.defaultProps = {
  messageObject: null,
  title: "",
  subTitle: "",
  fileURL: "",
  iconURL: "",
  mimeType: "",
  style: {
    width: "",
    height: "",
    border: "",
    titleFont: "400 15px Inter, sans-serif",
    titleColor: "rgb(20,20,20)",
    subTitleFont: "400 12px Inter, sans-serif",
    subTitleColor: "rgb(20,20,20, 0.60)",
    iconTint: "#fff",
    background: "",
    borderRadius: ""
  }
};
CometChatFileBubble.propTypes = {
  messageObject: _propTypes["default"].object,
  iconURL: _propTypes["default"].string,
  fileURL: _propTypes["default"].string,
  title: _propTypes["default"].string,
  subTitle: _propTypes["default"].string,
  mimeType: _propTypes["default"].string,
  style: _propTypes["default"].object
};