cometchat-react-ui-kit2/dist/Chats/CometChatConversationsWithMessages/index.js

CometChat UI Kit for React App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CometChatConversationsWithMessages = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var styles = _interopRequireWildcard(require("./style"));
var _CometChatConversations = require("../CometChatConversations");
var _Chats = require("../../Chats");
var _ = require("../../../");
var _hooks = require("./hooks");
var _chat = require("@cometchat-pro/chat");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
/**
 *
 * @version 1.0.0
 * @author CometChat
 * @description CometChatConversationsWithMessages is a container component that wraps and
 * formats CometChatConversations and CometChatMessages component, with no behavior of its own.
 *
 */

var CometChatConversationsWithMessages = function CometChatConversationsWithMessages(props) {
  var _conversationsConfigu, _conversationsConfigu2, _activeConversation$c3, _activeConversation$c4;
  /**
   * Props destructuring
   */
  var user = props.user,
    group = props.group,
    messageText = props.messageText,
    style = props.style,
    isMobileView = props.isMobileView,
    conversationsConfiguration = props.conversationsConfiguration,
    messagesConfiguration = props.messagesConfiguration,
    theme = props.theme;

  /**
   * Component internal state
   */
  var _useState = (0, _react.useState)(null),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    activeConversation = _useState2[0],
    setActiveConversation = _useState2[1];
  var conversationRef = (0, _react.useRef)();

  /**
   * Component private scoping
   */
  var _conversationsConfiguration = new _.ConversationsConfiguration(conversationsConfiguration !== null && conversationsConfiguration !== void 0 ? conversationsConfiguration : {});
  var _messagesConfiguration = new _.MessagesConfiguration(messagesConfiguration !== null && messagesConfiguration !== void 0 ? messagesConfiguration : {});
  var _theme = new _.CometChatTheme(theme !== null && theme !== void 0 ? theme : {});

  /**
   * Component internal handlers/methods 
   */
  var onConversationClickHandler = function onConversationClickHandler(data) {
    setActiveConversation(data);
  };
  var updateMessageList = function updateMessageList(conversation, activeConversation) {
    var _activeConversation$c, _conversation$convers, _activeConversation$c2, _conversation$convers2;
    if ((activeConversation === null || activeConversation === void 0 ? void 0 : (_activeConversation$c = activeConversation.conversationWith) === null || _activeConversation$c === void 0 ? void 0 : _activeConversation$c.uid) == (conversation === null || conversation === void 0 ? void 0 : (_conversation$convers = conversation.conversationWith) === null || _conversation$convers === void 0 ? void 0 : _conversation$convers.uid)) {
      setActiveConversation(null);
    } else if ((activeConversation === null || activeConversation === void 0 ? void 0 : (_activeConversation$c2 = activeConversation.conversationWith) === null || _activeConversation$c2 === void 0 ? void 0 : _activeConversation$c2.guid) == (conversation === null || conversation === void 0 ? void 0 : (_conversation$convers2 = conversation.conversationWith) === null || _conversation$convers2 === void 0 ? void 0 : _conversation$convers2.guid)) {
      setActiveConversation(null);
    } else {
      return;
    }
  };
  var backButtonClickHandler = function backButtonClickHandler() {
    setActiveConversation(null);
  };

  /**
   * Component hooks
   */
  (0, _hooks.Hooks)(onConversationClickHandler, updateMessageList, backButtonClickHandler, conversationRef, activeConversation);

  /**
   * Component template scoping
   */
  var ConversationsBar = /*#__PURE__*/_react["default"].createElement(_CometChatConversations.CometChatConversations, {
    ref: conversationRef,
    title: (0, _.localize)("CHATS"),
    searchPlaceholder: (0, _.localize)("SEARCH"),
    style: new _Chats.ConversationsStyles(_objectSpread(_objectSpread({}, _conversationsConfiguration === null || _conversationsConfiguration === void 0 ? void 0 : _conversationsConfiguration.style), {}, {
      width: isMobileView ? "100%" : (_conversationsConfigu = _conversationsConfiguration === null || _conversationsConfiguration === void 0 ? void 0 : (_conversationsConfigu2 = _conversationsConfiguration.style) === null || _conversationsConfigu2 === void 0 ? void 0 : _conversationsConfigu2.width) !== null && _conversationsConfigu !== void 0 ? _conversationsConfigu : "280px"
    })),
    backButtonIconURL: _conversationsConfiguration === null || _conversationsConfiguration === void 0 ? void 0 : _conversationsConfiguration.backButtonIconURL,
    searchIconURL: _conversationsConfiguration === null || _conversationsConfiguration === void 0 ? void 0 : _conversationsConfiguration.searchIconURL,
    showBackButton: _conversationsConfiguration === null || _conversationsConfiguration === void 0 ? void 0 : _conversationsConfiguration.showBackButton,
    hideSearch: _conversationsConfiguration === null || _conversationsConfiguration === void 0 ? void 0 : _conversationsConfiguration.hideSearch,
    startConversationIconURL: _conversationsConfiguration === null || _conversationsConfiguration === void 0 ? void 0 : _conversationsConfiguration.startConversationIconURL,
    hideStartConversation: _conversationsConfiguration === null || _conversationsConfiguration === void 0 ? void 0 : _conversationsConfiguration.hideStartConversation,
    activeConversation: activeConversation,
    conversationListConfiguration: _conversationsConfiguration === null || _conversationsConfiguration === void 0 ? void 0 : _conversationsConfiguration.conversationListConfiguration,
    theme: _theme
  });

  /**
   * If User or Group changes then prioritize it as props to CometChatMessages
   */
  var _user = activeConversation !== null && activeConversation !== void 0 && (_activeConversation$c3 = activeConversation.conversationWith) !== null && _activeConversation$c3 !== void 0 && _activeConversation$c3.uid ? activeConversation === null || activeConversation === void 0 ? void 0 : activeConversation.conversationWith : null;
  var _group = activeConversation !== null && activeConversation !== void 0 && (_activeConversation$c4 = activeConversation.conversationWith) !== null && _activeConversation$c4 !== void 0 && _activeConversation$c4.guid ? activeConversation === null || activeConversation === void 0 ? void 0 : activeConversation.conversationWith : null;
  if (user) _user = user;
  if (group) _group = group;
  var MessagesBar = /*#__PURE__*/_react["default"].createElement(_.CometChatMessages, {
    user: _user,
    group: _group,
    hideDeletedMessage: _messagesConfiguration === null || _messagesConfiguration === void 0 ? void 0 : _messagesConfiguration.hideDeletedMessage,
    hideCallActionMessage: _messagesConfiguration === null || _messagesConfiguration === void 0 ? void 0 : _messagesConfiguration.hideCallActionMessage,
    hideGroupActionMessage: _messagesConfiguration === null || _messagesConfiguration === void 0 ? void 0 : _messagesConfiguration.hideGroupActionMessage,
    hideEmoji: _messagesConfiguration === null || _messagesConfiguration === void 0 ? void 0 : _messagesConfiguration.hideEmoji,
    emojiIconURL: _messagesConfiguration === null || _messagesConfiguration === void 0 ? void 0 : _messagesConfiguration.emojiIconURL,
    emojiIconTint: _messagesConfiguration === null || _messagesConfiguration === void 0 ? void 0 : _messagesConfiguration.emojiIconTint,
    hideLiveReaction: _messagesConfiguration === null || _messagesConfiguration === void 0 ? void 0 : _messagesConfiguration.hideLiveReaction,
    liveReaction: _messagesConfiguration === null || _messagesConfiguration === void 0 ? void 0 : _messagesConfiguration.liveReaction,
    liveReactionFont: _messagesConfiguration === null || _messagesConfiguration === void 0 ? void 0 : _messagesConfiguration.liveReactionFont,
    liveReactionColor: _messagesConfiguration === null || _messagesConfiguration === void 0 ? void 0 : _messagesConfiguration.liveReactionColor,
    hideAttachment: _messagesConfiguration === null || _messagesConfiguration === void 0 ? void 0 : _messagesConfiguration.hideAttachment,
    messageAlignment: _messagesConfiguration === null || _messagesConfiguration === void 0 ? void 0 : _messagesConfiguration.messageAlignment,
    messageFilterList: _messagesConfiguration === null || _messagesConfiguration === void 0 ? void 0 : _messagesConfiguration.messageFilterList,
    messageHeaderConfiguration: _messagesConfiguration === null || _messagesConfiguration === void 0 ? void 0 : _messagesConfiguration.messageHeaderConfiguration,
    messageListConfiguration: _messagesConfiguration === null || _messagesConfiguration === void 0 ? void 0 : _messagesConfiguration.messageListConfiguration,
    messageComposerConfiguration: _messagesConfiguration === null || _messagesConfiguration === void 0 ? void 0 : _messagesConfiguration.messageComposerConfiguration,
    liveReactionConfiguration: _messagesConfiguration === null || _messagesConfiguration === void 0 ? void 0 : _messagesConfiguration.liveReactionConfiguration,
    theme: _theme
  });
  var getTemplate = function getTemplate() {
    if (isMobileView && (activeConversation || _user || _group)) {
      return MessagesBar;
    } else if (isMobileView && !(activeConversation || _user || _group)) {
      return ConversationsBar;
    } else if (!isMobileView && !(activeConversation || _user || _group)) {
      var _theme$palette, _theme$typography, _theme$palette2;
      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, ConversationsBar, /*#__PURE__*/_react["default"].createElement(_.CometChatDecoratorMessage, {
        text: messageText || (0, _.localize)("NO_CHATS_SELECTED"),
        textColor: _theme === null || _theme === void 0 ? void 0 : (_theme$palette = _theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette.getAccent400(),
        textFont: (0, _.fontHelper)(_theme === null || _theme === void 0 ? void 0 : (_theme$typography = _theme.typography) === null || _theme$typography === void 0 ? void 0 : _theme$typography.heading),
        background: _theme === null || _theme === void 0 ? void 0 : (_theme$palette2 = _theme.palette) === null || _theme$palette2 === void 0 ? void 0 : _theme$palette2.getAccent900()
      }));
    } else if (!isMobileView && (activeConversation || _user || _group)) {
      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, ConversationsBar, MessagesBar);
    }
  };

  /**
   * Component template
   */
  return /*#__PURE__*/_react["default"].createElement("div", {
    style: styles.chatScreenStyle(style),
    className: "cometchat__conversations__with__messages"
  }, getTemplate());
};

/**
 * Component default props types values
 */
exports.CometChatConversationsWithMessages = CometChatConversationsWithMessages;
CometChatConversationsWithMessages.defaultProps = {
  messageText: "",
  user: null,
  group: null
};

/**
 * Component default props types
 */
CometChatConversationsWithMessages.propTypes = {
  user: _propTypes["default"].object,
  group: _propTypes["default"].object,
  isMobileView: _propTypes["default"].bool,
  messageText: _propTypes["default"].string,
  conversationsConfiguration: _propTypes["default"].object,
  messagesConfiguration: _propTypes["default"].object,
  theme: _propTypes["default"].object,
  style: _propTypes["default"].object
};