cometchat-react-ui-kit2/dist/Users/CometChatUsersWithMessages/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.CometChatUsersWithMessages = 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 _CometChatUsers = require("../CometChatUsers");
var _Users = require("../../Users");
var _ = require("../../../");
var _hooks = require("./hooks");
var _chat = require("@cometchat-pro/chat");
var _UsersStyles = require("../CometChatUsers/UsersStyles");
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 CometChatUsersWithMessages is a container component that wraps and
 * formats CometChatUsers and CometChatMessages component, with no behavior of its own.
 *
 */
var CometChatUsersWithMessages = function CometChatUsersWithMessages(props) {
  var _usersConfiguration$s, _usersConfiguration$s2;
  /**
   * Props destructuring
   */
  var user = props.user,
    messageText = props.messageText,
    style = props.style,
    isMobileView = props.isMobileView,
    usersConfiguration = props.usersConfiguration,
    messagesConfiguration = props.messagesConfiguration,
    theme = props.theme;

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

  /**
   * Component private scoping
   */
  var _usersConfiguration = new _.UsersConfiguration(usersConfiguration !== null && usersConfiguration !== void 0 ? usersConfiguration : {});
  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 onUserClickHandler = function onUserClickHandler(data) {
    setActiveUser(data);
  };
  var backButtonClickHandler = function backButtonClickHandler() {
    setActiveUser(null);
  };

  /**
   * Component hooks
   */
  (0, _hooks.Hooks)(onUserClickHandler, backButtonClickHandler, userRef);

  /**
   * Component template scoping
   */
  var UsersBar = /*#__PURE__*/_react["default"].createElement(_CometChatUsers.CometChatUsers, {
    ref: userRef,
    title: (0, _.localize)("USERS"),
    searchPlaceholder: (0, _.localize)("SEARCH"),
    style: new _UsersStyles.UsersStyles(_objectSpread(_objectSpread({}, _usersConfiguration === null || _usersConfiguration === void 0 ? void 0 : _usersConfiguration.style), {}, {
      width: isMobileView ? "100%" : (_usersConfiguration$s = _usersConfiguration === null || _usersConfiguration === void 0 ? void 0 : (_usersConfiguration$s2 = _usersConfiguration.style) === null || _usersConfiguration$s2 === void 0 ? void 0 : _usersConfiguration$s2.width) !== null && _usersConfiguration$s !== void 0 ? _usersConfiguration$s : "280px"
    })),
    backButtonIconURL: _usersConfiguration === null || _usersConfiguration === void 0 ? void 0 : _usersConfiguration.backButtonIconURL,
    searchIconURL: _usersConfiguration === null || _usersConfiguration === void 0 ? void 0 : _usersConfiguration.searchIconURL,
    showBackButton: _usersConfiguration === null || _usersConfiguration === void 0 ? void 0 : _usersConfiguration.showBackButton,
    hideSearch: _usersConfiguration === null || _usersConfiguration === void 0 ? void 0 : _usersConfiguration.hideSearch,
    activeUser: activeUser,
    userListConfiguration: _usersConfiguration === null || _usersConfiguration === void 0 ? void 0 : _usersConfiguration.userListConfiguration,
    theme: _theme
  });

  /**
   * If User or Group changes then prioritize it as props to CometChatMessages
   */
  var _user = activeUser !== null && activeUser !== void 0 && activeUser.uid ? activeUser : null;
  if (user) _user = user;
  var MessagesBar = /*#__PURE__*/_react["default"].createElement(_.CometChatMessages, {
    user: _user,
    parentMessage: _messagesConfiguration === null || _messagesConfiguration === void 0 ? void 0 : _messagesConfiguration.parentMessage,
    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 && (activeUser || _user)) {
      return MessagesBar;
    } else if (isMobileView && !(activeUser || _user)) {
      return UsersBar;
    } else if (!isMobileView && !(activeUser || _user)) {
      var _theme$palette, _theme$typography, _theme$palette2;
      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, UsersBar, /*#__PURE__*/_react["default"].createElement(_.CometChatDecoratorMessage, {
        text: messageText || (0, _.localize)("SELECT_USER_TO_START"),
        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 && (activeUser || _user)) {
      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, UsersBar, MessagesBar);
    }
  };

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

/**
 * Component default props types values
 */
exports.CometChatUsersWithMessages = CometChatUsersWithMessages;
CometChatUsersWithMessages.defaultProps = {
  messageText: ""
};

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