cometchat-react-ui-kit2/dist/Messages/CometChatMessageReactions/index.js

CometChat UI Kit for React App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CometChatMessageReactions = 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 _ = require("../..");
var _style = require("./style");
var _this = void 0;
var CometChatMessageReactions = function CometChatMessageReactions(props) {
  var messageObject = props.messageObject,
    loggedInUser = props.loggedInUser,
    updateReaction = props.updateReaction,
    addReactionIconURL = props.addReactionIconURL,
    style = props.style,
    theme = props.theme;
  var _theme = theme || new _.CometChatTheme({});
  var _React$useState = _react["default"].useState([]),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    reactionList = _React$useState2[0],
    setReactionList = _React$useState2[1];
  var reactionRef = _react["default"].useRef([]);
  var getAddReactionButton = function getAddReactionButton() {
    return /*#__PURE__*/_react["default"].createElement("div", {
      key: "-1",
      style: (0, _style.messageAddReactionStyle)(messageObject, loggedInUser, style, _theme),
      className: "reaction__add",
      title: (0, _.localize)("ADD_REACTION")
    }, /*#__PURE__*/_react["default"].createElement(_.CometChatListItem, {
      style: (0, _style.emojiButtonStyle)(style, loggedInUser, messageObject, _theme),
      className: "button__reacttomessage",
      iconURL: addReactionIconURL,
      onItemClick: updateReaction.bind(_this, messageObject)
    }));
  };
  var reactionView = function reactionView(reactionObject, reactionData) {
    var reactionName = "";
    var userList = [];
    var count;
    for (var reaction in reactionObject) {
      reactionName = reaction.replaceAll(":", "");
      var _reactionData = reactionObject[reaction];
      count = Object.keys(_reactionData).length;
      for (var user in _reactionData) {
        userList.push(_reactionData[user]["name"]);
      }
    }
    var reactionTitle = "";
    if (userList.length) {
      reactionTitle = userList.join(",");
      reactionTitle = reactionTitle.concat(" ", (0, _.localize)("REACTED"));
    }
    var Emoji = Object.keys(reactionObject)[0];
    var reactionClassName = "reaction reaction__".concat(reactionName);
    var Count = /*#__PURE__*/_react["default"].createElement("span", {
      style: (0, _style.reactionCountStyle)(loggedInUser, messageObject, reactionData, _theme),
      className: "reaction__count"
    }, count);
    return count >= 1 ? /*#__PURE__*/_react["default"].createElement("div", {
      key: Math.random(),
      style: (0, _style.messageReactionsStyle)(messageObject, loggedInUser, style, reactionData, _theme),
      className: reactionClassName,
      title: reactionTitle
    }, /*#__PURE__*/_react["default"].createElement(_.CometChatListItem, {
      style: (0, _style.reactionListStyle)(),
      text: Emoji,
      onItemClick: updateReaction.bind(_this, messageObject, null, Emoji),
      tail: Count
    })) : null;
  };
  (0, _hooks.Hooks)(messageObject, reactionRef, reactionView, setReactionList);
  return reactionList.length !== null ? /*#__PURE__*/_react["default"].createElement("div", {
    className: "message_kit__reaction_bar",
    style: (0, _style.messageReactionListStyle)()
  }, getAddReactionButton(), reactionList) : null;
};

// Specifies the default values for props:
exports.CometChatMessageReactions = CometChatMessageReactions;
CometChatMessageReactions.defaultProps = {
  messageObject: null,
  loggedInUser: null,
  addReactionIconURL: "",
  style: {
    width: "",
    height: "",
    border: "1px solid rgba(20, 20, 20, 8%)",
    borderRadius: "",
    background: "#F0F0F0"
  }
};
CometChatMessageReactions.propTypes = {
  messageObject: _propTypes["default"].object.isRequired,
  loggedInUser: _propTypes["default"].object.isRequired,
  addReactionIconURL: _propTypes["default"].string,
  style: _propTypes["default"].object
};