cometchat-react-ui-kit2
Version:
CometChat UI Kit for React App
400 lines (393 loc) • 20.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CometChatMessages = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _chat = require("@cometchat-pro/chat");
var _ = require("..");
var _2 = require("../..");
var _MessageComposerConfiguration = require("../CometChatMessageComposer/MessageComposerConfiguration");
var _MessageListConfiguration = require("../CometChatMessageList/MessageListConfiguration");
var _CometChatMessageConstants = require("../CometChatMessageConstants");
var _hooks = require("./hooks");
var _Shared = require("../../Shared");
var _style = require("./style");
var _emoji = _interopRequireDefault(require("./resources/emoji.svg"));
var _info = _interopRequireDefault(require("./resources/info.svg"));
var _voicecall = _interopRequireDefault(require("./resources/voicecall.svg"));
var _videocall = _interopRequireDefault(require("./resources/videocall.svg"));
var _heart = _interopRequireDefault(require("./resources/heart.png"));
var _CometChatMessages$pr;
var CometChatMessages = function CometChatMessages(props) {
var messageListRef = _react["default"].useRef(null);
var messageComposerRef = _react["default"].useRef(null);
var _React$useState = _react["default"].useState(null),
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
loggedInUser = _React$useState2[0],
setLoggedInUser = _React$useState2[1];
var _React$useState3 = _react["default"].useState(false),
_React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
viewLiveReaction = _React$useState4[0],
setViewLiveReaction = _React$useState4[1];
var _React$useState5 = _react["default"].useState(null),
_React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
liveReactionTemplate = _React$useState6[0],
setLiveReactionTemplate = _React$useState6[1];
var user = props.user,
group = props.group,
liveReactionIconURL = props.liveReactionIconURL,
messageTypes = props.messageTypes,
hideMessageComposer = props.hideMessageComposer,
enableSoundForMessages = props.enableSoundForMessages,
enableSoundForCalls = props.enableSoundForCalls,
customIncomingMessageSound = props.customIncomingMessageSound,
customOutgoingMessageSound = props.customOutgoingMessageSound,
enableTypingIndicator = props.enableTypingIndicator,
style = props.style,
theme = props.theme,
messageHeaderConfiguration = props.messageHeaderConfiguration,
messageListConfiguration = props.messageListConfiguration,
messageComposerConfiguration = props.messageComposerConfiguration,
detailsConfiguration = props.detailsConfiguration;
var _messageListConfiguration = messageListConfiguration || new _MessageListConfiguration.MessageListConfiguration({});
var _theme = new _2.CometChatTheme(theme !== null && theme !== void 0 ? theme : {});
var liveReactionTimeout = 0;
var getSentMessageInputData = function getSentMessageInputData() {
if (user) {
var _messageListConfigura, _messageListConfigura2, _messageListConfigura3, _messageListConfigura4;
var timestamp = (_messageListConfiguration === null || _messageListConfiguration === void 0 ? void 0 : (_messageListConfigura = _messageListConfiguration.sentMessageInputData) === null || _messageListConfigura === void 0 ? void 0 : _messageListConfigura.timestamp) || true,
readReceipt = (_messageListConfiguration === null || _messageListConfiguration === void 0 ? void 0 : (_messageListConfigura2 = _messageListConfiguration.sentMessageInputData) === null || _messageListConfigura2 === void 0 ? void 0 : _messageListConfigura2.readReceipt) || true,
thumbnail = (_messageListConfiguration === null || _messageListConfiguration === void 0 ? void 0 : (_messageListConfigura3 = _messageListConfiguration.sentMessageInputData) === null || _messageListConfigura3 === void 0 ? void 0 : _messageListConfigura3.thumbnail) || false,
title = (_messageListConfiguration === null || _messageListConfiguration === void 0 ? void 0 : (_messageListConfigura4 = _messageListConfiguration.sentMessageInputData) === null || _messageListConfigura4 === void 0 ? void 0 : _messageListConfigura4.title) || false;
return new _2.MessageInputData({
timestamp: timestamp,
readReceipt: readReceipt,
thumbnail: thumbnail,
title: title
});
} else if (group) {
var _messageListConfigura5, _messageListConfigura6, _messageListConfigura7, _messageListConfigura8;
var _timestamp = (_messageListConfiguration === null || _messageListConfiguration === void 0 ? void 0 : (_messageListConfigura5 = _messageListConfiguration.sentMessageInputData) === null || _messageListConfigura5 === void 0 ? void 0 : _messageListConfigura5.timestamp) || true,
_readReceipt = (_messageListConfiguration === null || _messageListConfiguration === void 0 ? void 0 : (_messageListConfigura6 = _messageListConfiguration.sentMessageInputData) === null || _messageListConfigura6 === void 0 ? void 0 : _messageListConfigura6.readReceipt) || true,
_thumbnail = (_messageListConfiguration === null || _messageListConfiguration === void 0 ? void 0 : (_messageListConfigura7 = _messageListConfiguration.sentMessageInputData) === null || _messageListConfigura7 === void 0 ? void 0 : _messageListConfigura7.thumbnail) || true,
_title = (_messageListConfiguration === null || _messageListConfiguration === void 0 ? void 0 : (_messageListConfigura8 = _messageListConfiguration.sentMessageInputData) === null || _messageListConfigura8 === void 0 ? void 0 : _messageListConfigura8.title) || true;
return new _2.MessageInputData({
timestamp: _timestamp,
readReceipt: _readReceipt,
thumbnail: _thumbnail,
title: _title
});
}
};
var getReceivedMessageInputData = function getReceivedMessageInputData() {
if (user) {
var timestamp = _messageListConfiguration.receivedMessageInputData.timestamp || true,
readReceipt = _messageListConfiguration.receivedMessageInputData.readReceipt || true,
thumbnail = _messageListConfiguration.receivedMessageInputData.thumbnail || false,
title = _messageListConfiguration.receivedMessageInputData.title || false;
return new _2.MessageInputData({
timestamp: timestamp,
readReceipt: readReceipt,
thumbnail: thumbnail,
title: title
});
} else if (group) {
var _timestamp2 = _messageListConfiguration.receivedMessageInputData.timestamp || true,
_readReceipt2 = _messageListConfiguration.receivedMessageInputData.readReceipt || false,
_thumbnail2 = _messageListConfiguration.receivedMessageInputData.thumbnail || true,
_title2 = _messageListConfiguration.receivedMessageInputData.title || true;
return new _2.MessageInputData({
timestamp: _timestamp2,
readReceipt: _readReceipt2,
thumbnail: _thumbnail2,
title: _title2
});
}
};
/**
* Preview message before edit
*/
var previewMessageForEdit = function previewMessageForEdit(payload) {
if (payload.status === _CometChatMessageConstants.messageStatus.inprogress) {
if (messageComposerRef && messageComposerRef.current) {
messageComposerRef.current.previewMessageForEdit(payload.message);
}
} else if (messageListRef && messageListRef.current) {
if (payload.status === _CometChatMessageConstants.messageStatus.success) {
messageListRef.current.updateMessage(payload.message, true);
}
}
};
/**
* Draft a message before sending
*/
var draftMessage = function draftMessage(message) {
if (messageComposerRef && messageComposerRef.current) {
messageComposerRef.current.draftMessage(message);
}
};
var addNewMessage = function addNewMessage(payload) {
if (messageListRef && messageListRef.current) {
if (payload.status === _CometChatMessageConstants.messageStatus.inprogress) {
messageListRef.current.addMessage(payload.message);
messageListRef.current.scrollToBottom();
} else if (payload.status === _CometChatMessageConstants.messageStatus.success) {
messageListRef.current.updateMessage(payload.message, true);
}
}
};
var messagesCallback = function messagesCallback(listener, message) {
switch (listener) {
case "onTransientMessageReceived":
onTransientMessageReceived(message);
break;
default:
break;
}
};
var onTransientMessageReceived = function onTransientMessageReceived(message) {
if (message.data.type === _2.MetadataConstants.liveReaction) {
var payload = {
reaction: _heart["default"],
style: {
width: "20px",
height: "20px",
border: "none",
borderRadius: "none",
background: "red"
}
};
shareLiveReaction(payload);
}
};
var clearLiveReaction = function clearLiveReaction() {
clearTimeout(liveReactionTimeout);
setViewLiveReaction(false);
};
var infoHandle = function infoHandle() {};
var voiceCallHandle = function voiceCallHandle() {};
var videoCallHandle = function videoCallHandle() {};
var shareLiveReaction = function shareLiveReaction(payload) {
//if already live reaction in progress
if (liveReactionTimeout) {
return false;
}
setViewLiveReaction(true);
setLiveReactionTemplate(payload);
//set timeout till the next share
liveReactionTimeout = setTimeout(clearLiveReaction, _.messageConstants.liveReactionTimeout);
};
var menuInputData = [];
if (user && user.uid) {
menuInputData.push({
id: _2.UserOptionConstants.voiceCall,
iconURL: _voicecall["default"],
title: "Voicecall",
onClick: voiceCallHandle
}, {
id: _2.UserOptionConstants.videoCall,
iconURL: _videocall["default"],
title: "VideoCall",
onClick: videoCallHandle
}, {
id: _2.UserOptionConstants.viewInformation,
iconURL: _info["default"],
title: "Info",
onClick: infoHandle
});
} else if (group && group.guid) {
menuInputData.push({
id: _2.GroupOptionConstants.voiceCall,
iconURL: _voicecall["default"],
title: "Voicecall",
onClick: voiceCallHandle
}, {
id: _2.GroupOptionConstants.videoCall,
iconURL: _videocall["default"],
title: "VideoCall",
onClick: videoCallHandle
}, {
id: _2.GroupOptionConstants.viewInformation,
iconURL: _info["default"],
title: "Info",
onClick: infoHandle
});
}
_.CometChatMessageEvents.addListener(_.CometChatMessageEvents.onMessageEdit, "onMessageEdit", previewMessageForEdit);
_.CometChatMessageEvents.addListener(_.CometChatMessageEvents.onMessageSent, "messageSent", addNewMessage);
_.CometChatMessageEvents.addListener(_.CometChatMessageEvents.onLiveReaction, "liveReactionId", shareLiveReaction);
/** message composer configurations */
var messageComposerConfig = messageComposerConfiguration || new _MessageComposerConfiguration.MessageComposerConfiguration({});
var _placeholderText = (0, _2.localize)("ENTER_YOUR_MESSAGE_HERE");
var _sendButtonIconURL = messageComposerConfig.sendButtonIconURL;
var _attachmentIconURL = messageComposerConfig.attachmentIconURL;
var _stickerCloseIconURL = messageComposerConfig.stickerCloseIconURL;
var _hideAttachment = messageComposerConfig.hideAttachment;
var _hideLiveReaction = messageComposerConfig.hideLiveReaction;
var _hideEmoji = messageComposerConfig.hideEmoji;
var _emojiIconURL = messageComposerConfig.emojiIconURL;
var _showSendButton = messageComposerConfig.showSendButton;
var _onSendButtonClick = messageComposerConfig.onSendButtonClick;
var _messageTypes = messageComposerConfig.messageTypes;
var _customOutgoingMessageSound = messageComposerConfig.customOutgoingMessageSound;
var _enableSoundForMessages = messageComposerConfig.enableSoundForMessages;
var _excludeMessageTypes = messageComposerConfig.excludeMessageTypes;
var _enableTypingIndicator = messageComposerConfig.enableTypingIndicator;
/**configurations of composer child components */
var _messagePreviewConfiguration = messageComposerConfig.messagePreviewConfiguration;
var _emojiKeyboardConfiguration = messageComposerConfig.emojiKeyboardConfiguration;
var _stickerKeyboardConfiguration = messageComposerConfig.stickerKeyboardConfiguration;
var _createPollConfiguration = messageComposerConfig.createPollConfiguration;
var _actionSheetConfiguration = messageComposerConfig.actionSheetConfiguration;
/**message header configuration */
var messageHeaderConfig = messageHeaderConfiguration || new _2.MessageHeaderConfiguration({});
var _showBackButton = messageHeaderConfig.showBackButton;
var _backButtonIconURL = messageHeaderConfig.backButtonIconURL;
var _options = messageHeaderConfig.options;
var _enableIndicator = messageHeaderConfig.enableTypingIndicator;
var _isMobileView = messageHeaderConfig.isMobile;
var _dataItemConfiguration = messageHeaderConfig.dataItemConfiguration;
/**message list configuuration */
var messageListConfig = messageListConfiguration || new _MessageListConfiguration.MessageListConfiguration({});
var _alignment = messageListConfig.alignment;
var _limit = messageListConfig.limit;
var _messageTypesForList = messageListConfig.messageTypes;
var _customMessageTypes = messageListConfig.customMessageTypes;
var _excludeMessageTypesForList = messageListConfig.excludeMessageTypes;
var _excludeMessageListOptions = messageListConfig.excludeMessageOptions;
var _customOptions = messageListConfig.customOptions;
var _onlyUnread = messageListConfig.onlyUnread;
var _hideMessagesFromBlockedUsers = messageListConfig.hideMessagesFromBlockedUsers;
var _hideDeletedMessages = messageListConfig.hideDeletedMessages;
var _tags = messageListConfig.tags;
var _sentMessageInputData = messageListConfig.sentMessageInputData;
var _receivedMessageInputData = messageListConfig.receivedMessageInputData;
var _loadingIconURL = messageListConfig.loadingIconURL;
var _customView = messageListConfig.customView;
var _emptyText = messageListConfig.emptyText;
var _errorText = messageListConfig.errorText;
var _hideError = messageListConfig.hideError;
var _onErrorCallback = messageListConfig.onErrorCallback;
var _enableSoundForMessagesList = messageListConfig.enableSoundForMessages;
var _customIncomingMessageListSound = messageListConfig.customIncomingMessageSound;
var _customOutgoingMessageListSound = messageListConfig.customOutgoingMessageSound;
var _enableGroupActionMessages = messageListConfig.enableGroupActionMessages;
(0, _hooks.Hooks)(props, setLoggedInUser);
var liveReactionView = viewLiveReaction ? /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.liveReactionWrapperStyle)()
}, /*#__PURE__*/_react["default"].createElement(_.CometChatLiveReactions, {
reaction: liveReactionTemplate.reaction,
style: (0, _style.liveReactionStyle)()
})) : null;
return /*#__PURE__*/_react["default"].createElement("div", {
className: "main__chat",
style: (0, _style.chatWrapperStyle)(style)
}, /*#__PURE__*/_react["default"].createElement(_.CometChatMessageHeader, {
user: user,
group: group,
theme: _theme,
style: (0, _style.messageHeaderStyle)(_theme),
backButtonIconURL: _backButtonIconURL,
showBackButton: _isMobileView && _showBackButton ? true : false,
options: _options || menuInputData,
enableTypingIndicator: _enableIndicator,
dataItemConfiguration: _dataItemConfiguration
}), /*#__PURE__*/_react["default"].createElement(_.CometChatMessageList, {
ref: messageListRef,
user: user,
group: group,
loggedInUser: loggedInUser,
limit: _messageListConfiguration.limit,
onlyUnread: _messageListConfiguration.onlyUnread,
emptyText: _messageListConfiguration.emptyText,
errorText: _messageListConfiguration.errorText,
customView: _messageListConfiguration.customView,
loadingIconURL: _messageListConfiguration.loadingIconURL,
alignment: _messageListConfiguration.alignment,
timeAlignment: _messageListConfiguration.timeAlignment,
tags: _messageListConfiguration.tags,
messageTypes: _messageListConfiguration.messageTypes,
receivedMessageInputData: getReceivedMessageInputData(),
sentMessageInputData: getSentMessageInputData()
// customOptions={[]}
// excludeMessageTypes={[]}
// excludeMessageOptions={[]}
// sentMessageInputData={null}
// receivedMessageInputData={null}
// onErrorCallback={() => {}}
// customIncomingMessageSound="" //url
// onlyUnread={false}
// hodeError={false}
// hideDeletedMessages={false}
// enableSoundForMessages={true}
// showEmojiInLargerSize={false}
// hideMessagesFromBlockedUsers={true}
,
theme: _theme,
style: (0, _style.messageListStyle)(props, _theme)
}), liveReactionView, /*#__PURE__*/_react["default"].createElement(_.CometChatMessageComposer, {
ref: messageComposerRef,
group: group,
user: user,
hideAttachment: _hideAttachment,
attachmentIconURL: _attachmentIconURL,
stickerCloseIconURL: _stickerCloseIconURL,
hideLiveReaction: _hideLiveReaction,
hideEmoji: _hideEmoji,
liveReactionIconURL: liveReactionIconURL,
sendButtonIconURL: _sendButtonIconURL,
onSendButtonClick: _onSendButtonClick,
messageTypes: _messageTypes,
excludeMessageTypes: _excludeMessageTypes,
enableTypingIndicator: _enableTypingIndicator,
enableSoundForMessage: _enableSoundForMessages,
customOutgoingMessageSound: _customOutgoingMessageSound,
showSendButton: _showSendButton,
placeholderText: _placeholderText,
emojiIconURL: _emojiIconURL,
messagePreviewConfiguration: _messagePreviewConfiguration,
emojiKeyboardConfiguration: _emojiKeyboardConfiguration,
stickerKeyboardConfiguration: _stickerKeyboardConfiguration,
createPollConfiguration: _createPollConfiguration,
actionSheetConfiguration: _actionSheetConfiguration,
theme: _theme,
style: (0, _style.messageComposerStyle)(props, _theme)
}));
};
exports.CometChatMessages = CometChatMessages;
CometChatMessages.propTypes = (_CometChatMessages$pr = {
user: _propTypes["default"].object,
group: _propTypes["default"].object,
hideLiveReaction: _propTypes["default"].bool,
liveReactionIconURL: _propTypes["default"].string,
messageTypes: _propTypes["default"].array,
hideMessageComposer: _propTypes["default"].bool
}, (0, _defineProperty2["default"])(_CometChatMessages$pr, "liveReactionIconURL", _propTypes["default"].string), (0, _defineProperty2["default"])(_CometChatMessages$pr, "enableSoundForMessages", _propTypes["default"].bool), (0, _defineProperty2["default"])(_CometChatMessages$pr, "enableSoundForCalls", _propTypes["default"].bool), (0, _defineProperty2["default"])(_CometChatMessages$pr, "customIncomingMessageSound", _propTypes["default"].string), (0, _defineProperty2["default"])(_CometChatMessages$pr, "customOutgoingMessageSound", _propTypes["default"].string), (0, _defineProperty2["default"])(_CometChatMessages$pr, "enableTypingIndicator", _propTypes["default"].bool), (0, _defineProperty2["default"])(_CometChatMessages$pr, "style", _propTypes["default"].object), (0, _defineProperty2["default"])(_CometChatMessages$pr, "messageHeaderConfiguration", _propTypes["default"].object), (0, _defineProperty2["default"])(_CometChatMessages$pr, "messageListConfiguration", _propTypes["default"].object), (0, _defineProperty2["default"])(_CometChatMessages$pr, "messageComposerConfiguration", _propTypes["default"].object), (0, _defineProperty2["default"])(_CometChatMessages$pr, "detailsConfiguration", _propTypes["default"].object), _CometChatMessages$pr);
CometChatMessages.defaultProps = {
user: null,
group: null,
liveReactionIconURL: _heart["default"],
messageTypes: null,
hideMessageComposer: null,
enableSoundForMessages: null,
enableSoundForCalls: null,
customIncomingMessageSound: null,
customOutgoingMessageSound: null,
enableTypingIndicator: null,
style: {
width: "100%",
height: "auto",
border: "none",
borderRadius: "none",
background: "rgb(255,255,255)"
},
messageHeaderConfiguration: null,
messageListConfiguration: null,
messageComposerConfiguration: null,
detailsConfiguration: null
};