cometchat-react-ui-kit2
Version:
CometChat UI Kit for React App
225 lines (212 loc) • 13.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CometChatGroupsWithMessages = 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 _CometChatGroups = require("../CometChatGroups");
var _JoinProtectedGroupConfiguration = require("../CometChatJoinProtectedGroup/JoinProtectedGroupConfiguration");
var _CometChatJoinProtectedGroup = require("../CometChatJoinProtectedGroup");
var _ = require("../../../");
var _Groups = require("../../Groups");
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 CometChatGroupsWithMessages is a container component that wraps and
* formats CometChatGroups and CometChatMessages component, with no behavior of its own.
*
*/
var CometChatGroupsWithMessages = function CometChatGroupsWithMessages(props) {
var _groupsConfiguration$, _groupsConfiguration$2;
/**
* Props destructuring
*/
var group = props.group,
messageText = props.messageText,
style = props.style,
isMobileView = props.isMobileView,
groupsConfiguration = props.groupsConfiguration,
messagesConfiguration = props.messagesConfiguration,
joinProtectedGroupConfiguration = props.joinProtectedGroupConfiguration,
theme = props.theme;
/**
* Component internal state
*/
var _useState = (0, _react.useState)(null),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
activeGroup = _useState2[0],
setActiveGroup = _useState2[1];
var _useState3 = (0, _react.useState)(false),
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
showJoinGroup = _useState4[0],
setShowJoinGroup = _useState4[1];
var groupRef = (0, _react.useRef)();
var _group;
/**
* Component private scoping
*/
var _groupsConfiguration = new _.GroupsConfiguration(groupsConfiguration !== null && groupsConfiguration !== void 0 ? groupsConfiguration : {});
var _messagesConfiguration = new _.MessagesConfiguration(messagesConfiguration !== null && messagesConfiguration !== void 0 ? messagesConfiguration : {});
var _joinProtectedGroupConfiguration = new _JoinProtectedGroupConfiguration.JoinProtectedGroupConfiguration(joinProtectedGroupConfiguration !== null && joinProtectedGroupConfiguration !== void 0 ? joinProtectedGroupConfiguration : {});
var _theme = new _.CometChatTheme(theme !== null && theme !== void 0 ? theme : {});
/**
* Component internal handlers/methods
*/
var onGroupClickHandler = function onGroupClickHandler(data) {
setActiveGroup(data);
setShowJoinGroup(false);
checkHasJoined(data);
};
var backButtonClickHandler = function backButtonClickHandler() {
setActiveGroup(null);
};
var onGroupJoinedHandler = function onGroupJoinedHandler(groupData) {
setShowJoinGroup(false);
_group = groupData;
};
/**
* Component hooks
*/
(0, _hooks.Hooks)(onGroupClickHandler, backButtonClickHandler, groupRef, onGroupJoinedHandler);
/**
*Checks if the loggedInUser is part of the group or not
*/
var checkHasJoined = function checkHasJoined(groupData) {
if (groupData !== null && groupData !== void 0 && groupData.hasJoined) {
_group = groupData;
} else {
if ((groupData === null || groupData === void 0 ? void 0 : groupData.type) === _.GroupTypeConstants["public"]) {
joinGroup(groupData);
} else if ((groupData === null || groupData === void 0 ? void 0 : groupData.type) === _.GroupTypeConstants.password) {
setShowJoinGroup(true);
}
}
};
/**
* JoinGroup Method
*/
var joinGroup = function joinGroup(group) {
var guid = group.guid;
var type = group.type;
_chat.CometChat.joinGroup(guid, type).then(function (response) {
_.CometChatGroupEvents.emit(_.CometChatGroupEvents.onGroupMemberJoin, response);
})["catch"](function (error) {
_.CometChatGroupEvents.emit(_.CometChatGroupEvents.onGroupError, error);
});
};
/**
* If protected Group launch joinGroup
*
*/
var joinGroupComponent = /*#__PURE__*/_react["default"].createElement(_CometChatJoinProtectedGroup.CometChatJoinProtectedGroup, {
title: (0, _.localize)("ENTER_GROUP_PASSWORD"),
joinGroupButtonText: (0, _.localize)("CONTINUE"),
passwordPlaceholderText: (0, _.localize)("GROUP_PASSWORD"),
group: activeGroup,
style: styles.joinProtectedGroupStyles(_theme, _joinProtectedGroupConfiguration)
});
/**
* Component template scoping
*/
var GroupsBar = /*#__PURE__*/_react["default"].createElement(_CometChatGroups.CometChatGroups, {
ref: groupRef,
title: (0, _.localize)("GROUPS"),
searchPlaceholder: (0, _.localize)("SEARCH"),
style: _objectSpread(_objectSpread({}, _groupsConfiguration === null || _groupsConfiguration === void 0 ? void 0 : _groupsConfiguration.style), {}, {
width: isMobileView ? "100%" : (_groupsConfiguration$ = _groupsConfiguration === null || _groupsConfiguration === void 0 ? void 0 : (_groupsConfiguration$2 = _groupsConfiguration.style) === null || _groupsConfiguration$2 === void 0 ? void 0 : _groupsConfiguration$2.width) !== null && _groupsConfiguration$ !== void 0 ? _groupsConfiguration$ : "280px"
}),
backButtonIconURL: _groupsConfiguration === null || _groupsConfiguration === void 0 ? void 0 : _groupsConfiguration.backButtonIconURL,
searchIconURL: _groupsConfiguration === null || _groupsConfiguration === void 0 ? void 0 : _groupsConfiguration.searchIconURL,
showBackButton: _groupsConfiguration === null || _groupsConfiguration === void 0 ? void 0 : _groupsConfiguration.showBackButton,
hideSearch: _groupsConfiguration === null || _groupsConfiguration === void 0 ? void 0 : _groupsConfiguration.hideSearch,
hideCreateGroup: _groupsConfiguration === null || _groupsConfiguration === void 0 ? void 0 : _groupsConfiguration.hideCreateGroup,
createGroupIconURL: _groupsConfiguration === null || _groupsConfiguration === void 0 ? void 0 : _groupsConfiguration.createGroupIconURL,
activeGroup: activeGroup,
groupListConfiguration: _groupsConfiguration === null || _groupsConfiguration === void 0 ? void 0 : _groupsConfiguration.groupListConfiguration,
theme: _theme
});
/**
* If Group changes then prioritize it as props to CometChatMessages
*/
_group = activeGroup !== null && activeGroup !== void 0 && activeGroup.guid ? activeGroup : null;
if (group) _group = group;
var MessagesBar = /*#__PURE__*/_react["default"].createElement(_.CometChatMessages, {
group: _group,
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 && (activeGroup || _group)) {
return MessagesBar;
} else if (isMobileView && !(activeGroup || _group)) {
return GroupsBar;
} else if (!isMobileView && !(activeGroup || _group)) {
var _theme$palette, _theme$typography, _theme$palette2;
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, GroupsBar, /*#__PURE__*/_react["default"].createElement(_.CometChatDecoratorMessage, {
text: messageText || (0, _.localize)("SELECT_GROUP_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 && (activeGroup || _group)) {
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, GroupsBar, showJoinGroup ? joinGroupComponent : MessagesBar);
}
};
/**
* Component template
*/
return /*#__PURE__*/_react["default"].createElement("div", {
style: styles.chatScreenStyle(style),
className: "cometchat__groups__with__messages"
}, getTemplate());
};
/**
* Component default props types values
*/
exports.CometChatGroupsWithMessages = CometChatGroupsWithMessages;
CometChatGroupsWithMessages.defaultProps = {
messageText: ""
};
/**
* Component default props types
*/
CometChatGroupsWithMessages.propTypes = {
group: _propTypes["default"].object,
isMobileView: _propTypes["default"].bool,
messageText: _propTypes["default"].string,
groupsConfiguration: _propTypes["default"].object,
messagesConfiguration: _propTypes["default"].object,
joinProtectedGroupConfiguration: _propTypes["default"].object,
theme: _propTypes["default"].object,
style: _propTypes["default"].object
};