diff --git a/src/components/Chats/CometChatConversationList/ConversationListConfiguration.js b/src/components/Chats/CometChatConversationList/ConversationListConfiguration.js new file mode 100644 index 00000000..1ff4a5d3 --- /dev/null +++ b/src/components/Chats/CometChatConversationList/ConversationListConfiguration.js @@ -0,0 +1,52 @@ +import { ConversationListCustomView } from "../ConversationListCustomView"; +import { ConversationListStyle } from "../"; +import { ConversationListItemConfiguration } from "../../Shared"; + +/** + * @class ConversationListConfiguration + * @param {Number} limit + * @param {String} conversationType + * @param {false} userAndGroupTags + * @param {Array} tags + * @param {Boolean} loadingIconURL + * @param {Object} customView + * @param {false} hideError + * @param {false} enableSoundForMessages + * @param {String} customIncomingMessageSound + * @param {Object} style + * @param {Object} conversationListItemConfiguration + */ +class ConversationListConfiguration { + constructor({ + limit = 30, + conversationType = "both", + userAndGroupTags = false, + tags = [], + loadingIconURL = "", + customView = new ConversationListCustomView({}), + hideError = false, + enableSoundForMessages = false, + customIncomingMessageSound = "", + style = new ConversationListStyle({}), + conversationListItemConfiguration = new ConversationListItemConfiguration( + {} + ), + }) { + this.limit = limit; + this.conversationType = conversationType; + this.userAndGroupTags = userAndGroupTags; + this.tags = tags; + this.loadingIconURL = loadingIconURL; + this.customView = new ConversationListCustomView(customView ?? {}); + this.hideError = hideError; + this.enableSoundForMessages = enableSoundForMessages; + this.customIncomingMessageSound = customIncomingMessageSound; + this.style = new ConversationListStyle(style ?? {}); + this.conversationListItemConfiguration = + new ConversationListItemConfiguration( + conversationListItemConfiguration ?? {} + ); + } +} + +export { ConversationListConfiguration }; diff --git a/src/components/Chats/CometChatConversationList/ConversationListStyle.js b/src/components/Chats/CometChatConversationList/ConversationListStyle.js new file mode 100644 index 00000000..6471d4c2 --- /dev/null +++ b/src/components/Chats/CometChatConversationList/ConversationListStyle.js @@ -0,0 +1,42 @@ +/** + * @class ConversationListStyle + * @description ConversationListStyle class is used for defining the styles for conversation list. + * @param {String} width + * @param {String} height + * @param {String} background + * @param {String} border + * @param {String} borderRadius + * @param {String} loadingIconTint + * @param {String} emptyStateTextFont + * @param {String} emptyStateTextColor + * @param {String} errorStateTextFont + * @param {String} errorStateTextColor + */ + + class ConversationListStyle { + constructor({ + width = "100%", + height = "100%", + background = "", + border = "", + borderRadius = "0", + loadingIconTint = "", + emptyStateTextFont = "", + emptyStateTextColor = "", + errorStateTextFont = "", + errorStateTextColor = "", + }) { + this.width = width; + this.height = height; + this.background = background; + this.border = border; + this.borderRadius = borderRadius; + this.loadingIconTint = loadingIconTint; + this.emptyStateTextFont = emptyStateTextFont; + this.emptyStateTextColor = emptyStateTextColor; + this.errorStateTextFont = errorStateTextFont; + this.errorStateTextColor = errorStateTextColor; + } + } + export { ConversationListStyle }; + \ No newline at end of file diff --git a/src/components/Chats/CometChatConversationList/ConversationListStyles.js b/src/components/Chats/CometChatConversationList/ConversationListStyles.js deleted file mode 100644 index 62aeee9a..00000000 --- a/src/components/Chats/CometChatConversationList/ConversationListStyles.js +++ /dev/null @@ -1,42 +0,0 @@ -/** - * @class ConversationListStyles - * @description ConversationListStyles class is used for defining the styles for conversation list. - * @param {String} width - * @param {String} height - * @param {String} background - * @param {String} border - * @param {String} borderRadius - * @param {String} loadingIconTint - * @param {String} emptyStateTextFont - * @param {String} emptyStateTextColor - * @param {String} errorStateTextFont - * @param {String} errorStateTextColor - */ - -class ConversationListStyles { - - constructor({ - width = "100%", - height = "100%", - background = "", - border = "", - borderRadius = "0", - loadingIconTint = "", - emptyStateTextFont = "", - emptyStateTextColor = "", - errorStateTextFont = "", - errorStateTextColor = "", - }) { - this.width = width; - this.height = height; - this.background = background; - this.border = border; - this.borderRadius = borderRadius; - this.loadingIconTint = loadingIconTint - this.emptyStateTextFont = emptyStateTextFont; - this.emptyStateTextColor = emptyStateTextColor - this.errorStateTextFont = errorStateTextFont; - this.errorStateTextColor = errorStateTextColor; - } -} -export { ConversationListStyles } \ No newline at end of file diff --git a/src/components/Chats/CometChatConversationList/controller.js b/src/components/Chats/CometChatConversationList/controller.js index 8a87e041..a73f5a3a 100644 --- a/src/components/Chats/CometChatConversationList/controller.js +++ b/src/components/Chats/CometChatConversationList/controller.js @@ -1,167 +1,167 @@ import { CometChat } from "@cometchat-pro/chat"; -import { ConversationTypeConstants } from "../../Shared/Constants/UIKitConstants" +import { ConversationTypeConstants } from "../../Shared/Constants/UIKitConstants"; export class ConversationListManager { - conversationRequest = null; + conversationRequest = null; - conversationListenerId = "chatlist_" + new Date().getTime(); - userListenerId = "chatlist_user_" + new Date().getTime(); - groupListenerId = "chatlist_group_" + new Date().getTime(); - - constructor({ - conversationType = "both", - limit = 30, - tags = [], - userAndGroupTags = false - }) { - switch (conversationType) { - case ConversationTypeConstants[ConversationTypeConstants.users]: - this.conversationRequest = new CometChat.ConversationsRequestBuilder() - .setConversationType(conversationType) - .setLimit(limit) - .withTags(tags.length === 0 ? false : true) - .setTags(tags) - .withUserAndGroupTags(userAndGroupTags) - .build(); + conversationListenerId = "chatlist_" + new Date().getTime(); + userListenerId = "chatlist_user_" + new Date().getTime(); + groupListenerId = "chatlist_group_" + new Date().getTime(); - break; - case ConversationTypeConstants[ConversationTypeConstants.groups]: - this.conversationRequest = new CometChat.ConversationsRequestBuilder() - .setConversationType(conversationType) - .setLimit(limit) - .withTags(tags.length === 0 ? false : true) - .setTags(tags) - .withUserAndGroupTags(userAndGroupTags) - .build(); - break; - default: - this.conversationRequest = new CometChat.ConversationsRequestBuilder() - .setLimit(limit) - .withTags(tags.length === 0 ? false : true) - .setTags(tags) - .withUserAndGroupTags(userAndGroupTags) - .build(); + constructor({ + conversationType = "both", + limit = 30, + tags = [], + userAndGroupTags = false, + }) { + switch (conversationType) { + case ConversationTypeConstants[ConversationTypeConstants.users]: + this.conversationRequest = new CometChat.ConversationsRequestBuilder() + .setConversationType(conversationType) + .setLimit(limit) + .withTags(tags.length === 0 ? false : true) + .setTags(tags) + .withUserAndGroupTags(userAndGroupTags) + .build(); - break; - } - } + break; + case ConversationTypeConstants[ConversationTypeConstants.groups]: + this.conversationRequest = new CometChat.ConversationsRequestBuilder() + .setConversationType(conversationType) + .setLimit(limit) + .withTags(tags.length === 0 ? false : true) + .setTags(tags) + .withUserAndGroupTags(userAndGroupTags) + .build(); + break; + default: + this.conversationRequest = new CometChat.ConversationsRequestBuilder() + .setLimit(limit) + .withTags(tags.length === 0 ? false : true) + .setTags(tags) + .withUserAndGroupTags(userAndGroupTags) + .build(); - fetchNextConversation() { - return this.conversationRequest.fetchNext(); - } + break; + } + } - attachListeners(callback) { - CometChat.addUserListener( - this.userListenerId, - new CometChat.UserListener({ - onUserOnline: (onlineUser) => { - callback("onUserOnline", onlineUser); - }, - onUserOffline: (offlineUser) => { - callback("onUserOffline", offlineUser); - }, - }) - ); + fetchNextConversation() { + return this.conversationRequest.fetchNext(); + } - CometChat.addGroupListener( - this.groupListenerId, - new CometChat.GroupListener({ - onGroupMemberScopeChanged: ( - message, - changedUser, - newScope, - oldScope, - changedGroup - ) => { - callback( - "onGroupMemberScopeChanged", - message, - changedUser, - newScope, - oldScope, - changedGroup - ); - }, - onGroupMemberKicked: (message, kickedUser, kickedBy, kickedFrom) => { - callback( - "onGroupMemberKicked", - message, - kickedUser, - kickedBy, - kickedFrom - ); - }, - onGroupMemberLeft: (message, leavingUser, group) => { - callback("onGroupMemberLeft", message, leavingUser, null, group); - }, - onGroupMemberBanned: (message, bannedUser, bannedBy, bannedFrom) => { - callback( - "onGroupMemberBanned", - message, - bannedUser, - bannedBy, - bannedFrom - ); - }, - onMemberAddedToGroup: ( - message, - userAdded, - userAddedBy, - userAddedIn - ) => { - callback( - "onMemberAddedToGroup", - message, - userAdded, - userAddedBy, - userAddedIn - ); - }, - onGroupMemberJoined: (message, joinedUser, joinedGroup) => { - callback( - "onGroupMemberJoined", - message, - joinedUser, - null, - joinedGroup - ); - }, - }) - ); + attachListeners(callback) { + CometChat.addUserListener( + this.userListenerId, + new CometChat.UserListener({ + onUserOnline: (onlineUser) => { + callback("onUserOnline", onlineUser); + }, + onUserOffline: (offlineUser) => { + callback("onUserOffline", offlineUser); + }, + }) + ); - CometChat.addMessageListener( - this.conversationListenerId, - new CometChat.MessageListener({ - onTextMessageReceived: (textMessage) => { - callback("onTextMessageReceived", textMessage); - }, - onMediaMessageReceived: (mediaMessage) => { - callback("onMediaMessageReceived", mediaMessage); - }, - onCustomMessageReceived: (customMessage) => { - callback("onCustomMessageReceived", customMessage); - }, - onMessageDeleted: (deletedMessage) => { - callback("onMessageDeleted", deletedMessage); - }, - onMessageEdited: (editedMessage) => { - callback("onMessageEdited", editedMessage); - }, - onMessagesRead: (messageReceipt) => { - callback("onMessagesRead", messageReceipt); - }, - onTypingStarted: (typingIndicator) => { - callback("onTypingStarted", typingIndicator, true); - }, - onTypingEnded: (typingIndicator) => { - callback("onTypingEnded", typingIndicator, false); - }, - }) - ); - } - removeListeners() { - CometChat.removeMessageListener(this.conversationListenerId); - CometChat.removeUserListener(this.userListenerId); - CometChat.removeGroupListener(this.groupListenerId); - } + CometChat.addGroupListener( + this.groupListenerId, + new CometChat.GroupListener({ + onGroupMemberScopeChanged: ( + message, + changedUser, + newScope, + oldScope, + changedGroup + ) => { + callback( + "onGroupMemberScopeChanged", + message, + changedUser, + newScope, + oldScope, + changedGroup + ); + }, + onGroupMemberKicked: (message, kickedUser, kickedBy, kickedFrom) => { + callback( + "onGroupMemberKicked", + message, + kickedUser, + kickedBy, + kickedFrom + ); + }, + onGroupMemberLeft: (message, leavingUser, group) => { + callback("onGroupMemberLeft", message, leavingUser, null, group); + }, + onGroupMemberBanned: (message, bannedUser, bannedBy, bannedFrom) => { + callback( + "onGroupMemberBanned", + message, + bannedUser, + bannedBy, + bannedFrom + ); + }, + onMemberAddedToGroup: ( + message, + userAdded, + userAddedBy, + userAddedIn + ) => { + callback( + "onMemberAddedToGroup", + message, + userAdded, + userAddedBy, + userAddedIn + ); + }, + onGroupMemberJoined: (message, joinedUser, joinedGroup) => { + callback( + "onGroupMemberJoined", + message, + joinedUser, + null, + joinedGroup + ); + }, + }) + ); + + CometChat.addMessageListener( + this.conversationListenerId, + new CometChat.MessageListener({ + onTextMessageReceived: (textMessage) => { + callback("onTextMessageReceived", textMessage); + }, + onMediaMessageReceived: (mediaMessage) => { + callback("onMediaMessageReceived", mediaMessage); + }, + onCustomMessageReceived: (customMessage) => { + callback("onCustomMessageReceived", customMessage); + }, + onMessageDeleted: (deletedMessage) => { + callback("onMessageDeleted", deletedMessage); + }, + onMessageEdited: (editedMessage) => { + callback("onMessageEdited", editedMessage); + }, + onMessagesRead: (messageReceipt) => { + callback("onMessagesRead", messageReceipt); + }, + onTypingStarted: (typingIndicator) => { + callback("onTypingStarted", typingIndicator, true); + }, + onTypingEnded: (typingIndicator) => { + callback("onTypingEnded", typingIndicator, false); + }, + }) + ); + } + removeListeners() { + CometChat.removeMessageListener(this.conversationListenerId); + CometChat.removeUserListener(this.userListenerId); + CometChat.removeGroupListener(this.groupListenerId); + } } diff --git a/src/components/Chats/CometChatConversationList/hooks.js b/src/components/Chats/CometChatConversationList/hooks.js index 74eb59c4..e5f2dd55 100644 --- a/src/components/Chats/CometChatConversationList/hooks.js +++ b/src/components/Chats/CometChatConversationList/hooks.js @@ -4,70 +4,48 @@ import { ConversationListManager } from "./controller"; import { CometChatConversationEvents } from "../CometChatConversationEvents"; export const Hooks = ( - conversationType, - limit, - tags, - userAndGroupTags, - setConversationList, - conversationCallback, - conversationListManager, - handlers, - callbackData, - loggedInUser, - handleConversations, - confirmDelete + conversationType, + limit, + tags, + userAndGroupTags, + setConversationList, + conversationCallback, + conversationListManager, + loggedInUser, + handleConversations, ) => { - useEffect(() => { - CometChat.getLoggedinUser() - .then((user) => { - loggedInUser.current = { ...user }; - }) - .catch((error) => { - CometChatConversationEvents.emit( - CometChatConversationEvents.onError, - error - ); - }); + useEffect(() => { + CometChat.getLoggedinUser() + .then((user) => { + loggedInUser.current = { ...user }; + }) + .catch((error) => { + CometChatConversationEvents.emit( + CometChatConversationEvents.onError, + error + ); + }); + }, []); - }, []); + useEffect(() => { + try { + conversationListManager.current = new ConversationListManager({ + conversationType: conversationType, + limit: limit, + tags: tags, + userAndGroupTags: userAndGroupTags, + }); + conversationListManager.current?.attachListeners(conversationCallback); + setConversationList([]); + handleConversations(); - useEffect(() => { - try { - conversationListManager.current = new ConversationListManager({ - conversationType: conversationType, - limit: limit, - tags: tags, - userAndGroupTags: userAndGroupTags - }); - conversationListManager.current?.attachListeners(conversationCallback); - setConversationList([]); - handleConversations(); - - return () => { - if (conversationListManager?.current?.removeListeners) { - conversationListManager.current.removeListeners(); - } - }; - } catch (e) { - CometChatConversationEvents.emit( - CometChatConversationEvents.onError, - e - ); - } - }, [ - conversationType, - limit, - tags?.length, - userAndGroupTags - ]); - - useEffect(() => { - try { - const handler = handlers[callbackData?.name]; - - if (handler) return handler(...callbackData?.args); - } catch (e) { - throw (e) - } - }, [callbackData]); + return () => { + if (conversationListManager?.current?.removeListeners) { + conversationListManager.current.removeListeners(); + } + }; + } catch (e) { + CometChatConversationEvents.emit(CometChatConversationEvents.onError, e); + } + }, [conversationType, limit, tags?.length, userAndGroupTags]); }; diff --git a/src/components/Chats/CometChatConversationList/index.js b/src/components/Chats/CometChatConversationList/index.js index 060c54ae..34a12d6e 100644 --- a/src/components/Chats/CometChatConversationList/index.js +++ b/src/components/Chats/CometChatConversationList/index.js @@ -6,21 +6,24 @@ import { Hooks } from "./hooks"; import * as styles from "./style"; import loadingIcon from "./resources/spinner.svg"; import { - CometChatSoundManager, - CometChatConversationListItem, - localize, - CometChatTheme, - ReceiverTypeConstants, - MessageCategoryConstants, - ConversationTypeConstants, - CometChatBackdrop, - CometChatConfirmDialog, - ConversationListItemConfiguration, - ConversationOptionConstants, - ConversationListItemStyles, + CometChatSoundManager, + CometChatConversationListItem, + localize, + CometChatTheme, + ReceiverTypeConstants, + MessageCategoryConstants, + ConversationTypeConstants, + CometChatBackdrop, + CometChatConfirmDialog, + ConversationListItemConfiguration, + ConversationOptionConstants, + ConversationListItemStyle, } from "../../Shared"; import { CometChatConversationEvents } from "../"; -import { ConversationListStyles, CometChatConversationOptions } from "../../Chats"; +import { + ConversationListStyles, + CometChatConversationOptions, +} from "../../Chats"; import { ConversationListCustomView } from "../ConversationListCustomView"; import deleteIcon from "./resources/delete.svg"; @@ -33,1047 +36,1199 @@ import deleteIcon from "./resources/delete.svg"; * */ const ConversationList = React.forwardRef((props, ref) => { + /** + * Props destructuring + */ + const { + activeConversation, + emptyText, + errorText, + conversationType, + limit, + hideError, + tags, + userAndGroupTags, + loadingIconURL, + style, + enableSoundForMessages, + customIncomingMessageSound, + customView, + conversationListItemConfiguration, + theme, + } = props; + + /** + * Component internal state + */ + const loggedInUser = useRef(null); + const conversationListManager = useRef( + new ConversationListManager({ + conversationType: conversationType, + limit: limit, + tags: tags, + userAndGroupTags: userAndGroupTags, + }) + ); + const [conversationList, setConversationList] = useState([]); + const [message, setMessage] = useState(localize("LOADING")); + const [showConfirm, setShowConfirm] = useState({ + show: false, + message: localize("CONFIRM_DELETE_CONVERSATION"), + confirmButtonText: localize("DELETE"), + conversation: null, + onCancel: () => {}, + }); + const activeConversationRef = React.useRef(null); + const callbackDataRef = React.useRef(null); + + /** + * Component private scoping + */ + const _conversationListItemConfiguration = + new ConversationListItemConfiguration( + conversationListItemConfiguration ?? {} + ); + const _theme = new CometChatTheme(theme ?? {}); + activeConversationRef.current = activeConversation; + + /** + * Component internal handlers/methods + */ + + const conversationCallback = (listenerName, ...args) => { + callbackDataRef.current = { name: listenerName, args: [...args] }; + try { + const handler = handlers[callbackDataRef.current?.name]; + + if (handler) return handler(...callbackDataRef.current?.args); + } catch (e) { + throw e; + } + }; + + /** + * Mark the incoming message as delivered + */ + const markMessageAsDelivered = (message) => { + if (message.hasOwnProperty("deliveredAt") === false) { + CometChat.markAsDelivered(message); + } + }; + + /** + * + * If the incoming message is 1-1 conversation, and the conversation type filter is set to groups return false + * If the incoming message is group conversation, and the conversation type filter is set to users return false + * else return true + * + */ + React.useImperativeHandle(ref, () => ({ + resetUnreadCount: resetUnreadCount, + updateLastMessage: updateLastMessage, + updateConversationonEditOrDeleteMessage: + updateConversationonEditOrDeleteMessage, + removeConversation: removeConversation, + deleteConversation: deleteConversation, + updateConversation: updateConversation, + })); + + const filterByConversationType = (message) => { + if (conversationType !== ConversationTypeConstants.both) { + if ( + (conversationType === ConversationTypeConstants.users && + message?.receiverType === ReceiverTypeConstants.group) || + (conversationType === ConversationTypeConstants.groups && + message?.receiverType === ReceiverTypeConstants.user) + ) { + return false; + } + } + return true; + }; + + /** + * + * Converting message object received in the listener callback to conversation object + */ + const getConversationFromMessage = (message) => { + return new Promise((resolve, reject) => { + CometChat.CometChatHelper.getConversationFromMessage(message) + .then((conversation) => { + let conversationKey = conversationList.findIndex( + (c) => c.conversationId === conversation.conversationId + ); + if (conversationKey > -1) { + resolve({ + conversationKey: conversationKey, + conversationId: conversation.conversationId, + conversationType: conversation.conversationType, + conversationWith: conversation.conversationWith, + conversation: conversationList[conversationKey], + conversations: [...conversationList], + }); + } + resolve({ + conversationKey: conversationKey, + conversationId: conversation.conversationId, + conversationType: conversation.conversationType, + conversationWith: conversation.conversationWith, + conversation: conversation, + conversations: [...conversationList], + }); + }) + .catch((error) => { + CometChatConversationEvents.emit( + CometChatConversationEvents.onError, + error + ); + reject(error); + }); + }); + }; + + const getUnreadMessageCount = ( + message, + conversation = {}, + activeConversation = null + ) => { + let unreadMessageCount = conversation?.unreadMessageCount + ? Number(conversation?.unreadMessageCount) + : 0; + + unreadMessageCount = shouldIncrementCount(message) + ? ++unreadMessageCount + : unreadMessageCount; + + unreadMessageCount = + activeConversationRef.current?.conversationId === + conversation?.conversationId + ? 0 + : unreadMessageCount; + + return unreadMessageCount; + }; + + /** + * + * If the message is sent by the logged in user, return false + * If the message has category message or has incrementUnreadCount key in the metadata with value set to true, return true else return false + * + */ + const shouldIncrementCount = (message) => { + if (message?.sender?.uid === loggedInUser?.current?.uid) { + return false; + } + + if ( + message?.category === MessageCategoryConstants.message || + message?.metadata?.incrementUnreadCount === true + ) { + return true; + } + return false; + }; + + /** + * play notification sound for incoming messages + */ + const playNotificationSound = (message) => { /** - * Props destructuring + * If unreadcount is not incremented, don't play notification sound */ - const { - activeConversation, - emptyText, - errorText, - - conversationType, - limit, - hideError, - tags, - userAndGroupTags, - loadingIconURL, - style, - enableSoundForMessages, - customIncomingMessageSound, - customView, - conversationListItemConfiguration, - theme - } = props; - + if (!shouldIncrementCount(message)) { + return false; + } /** - * Component internal state - */ - const loggedInUser = useRef(null); - const conversationListManager = useRef( - new ConversationListManager({ - conversationType: conversationType, - limit: limit, - tags: tags, - userAndGroupTags: userAndGroupTags - }) + * If customIncomingMessageSound url is present then CometChatSoundManager will play this sound + else play the default sound + */ + if ( + enableSoundForMessages && + activeConversation?.conversationType && + activeConversation?.conversationWith + ) { + const receiverType = message.getReceiverType(); + const receiverId = + receiverType === ReceiverTypeConstants.user + ? message?.getSender()?.getUid() + : message?.getReceiverId(); + + if ( + receiverId !== activeConversation?.conversationWith?.uid && + receiverId !== activeConversation?.conversationWith?.guid + ) { + if (customIncomingMessageSound) { + CometChatSoundManager.play(customIncomingMessageSound); + } else { + CometChatSoundManager.play( + CometChatSoundManager.Sound.incomingMessageFromOther + ); + } + } + } + }; + + /** + * + * When a user goes online/ offline + */ + const handleUsers = (user) => { + const conversationKey = conversationList.findIndex( + (eachConversation) => + eachConversation.conversationType && + eachConversation.conversationType === ReceiverTypeConstants.user && + eachConversation.conversationWith && + eachConversation.conversationWith.uid && + eachConversation.conversationWith.uid === user.uid ); - const [conversationList, setConversationList] = useState([]); - const [callbackData, setCallbackData] = useState(null); - const [message, setMessage] = useState(localize("LOADING")); - const [showConfirm, setShowConfirm] = useState({ - show: false, - message: localize("CONFIRM_DELETE_CONVERSATION"), - confirmButtonText: localize("DELETE"), - conversation: null, - onCancel: () => { }, - }) + if (conversationKey > -1) { + let conversations = [...conversationList]; + let conversation = conversations[conversationKey]; + let conversationWith = { + ...conversation.conversationWith, + status: user.getStatus(), + }; + + let newConversation = { + ...conversation, + conversationWith: conversationWith, + }; + conversations.splice(conversationKey, 1, newConversation); + setConversationList(conversations); + } + }; + + /** + * + * When a text message / media message / custom message is received + */ + const handleMessages = (...options) => { + const message = options[0]; /** - * Component private scoping + * marking the incoming messages as read */ - const _conversationListItemConfiguration = new ConversationListItemConfiguration(conversationListItemConfiguration ?? {}); - const _theme = new CometChatTheme(theme ?? {}); - - + markMessageAsDelivered(message); /** - * Component internal handlers/methods + * If the incoming message is 1-1 and the conversation type filter is set to group, return false + * OR + * If the incoming message is group and the conversation type filter is set to "users", return false + * ELSE + * return true */ + if (filterByConversationType() === false) { + return false; + } + CometChat.CometChatHelper.getConversationFromMessage(message) + .then((conversation) => { + setConversationList((prevConversationList) => { + const list = [...prevConversationList]; + + let conversationKey = prevConversationList.findIndex( + (c) => c.conversationId === conversation.conversationId + ); + // const lastMessage = { ...conversation?.lastMessage, ...message, data: {...message.data} }; - const conversationCallback = (listenerName, ...args) => { - setCallbackData({ name: listenerName, args: [...args] }); - }; + if (conversationKey > -1) { + const latestConversation = prevConversationList[conversationKey]; - /** - * Mark the incoming message as delivered - */ - const markMessageAsDelivered = (message) => { - if (message.hasOwnProperty("deliveredAt") === false) { - CometChat.markAsDelivered(message); - } - }; + const lastMessage = { + ...latestConversation?.lastMessage, + ...message, + data: { ...message.data }, + }; + const unreadMessageCount = getUnreadMessageCount( + message, + latestConversation + ); - /** - * - * If the incoming message is 1-1 conversation, and the conversation type filter is set to groups return false - * If the incoming message is group conversation, and the conversation type filter is set to users return false - * else return true - * - */ - React.useImperativeHandle(ref, () => ({ - resetUnreadCount: resetUnreadCount, - updateLastMessage: updateLastMessage, - removeConversation: removeConversation, - deleteConversation: deleteConversation, - updateConversation: updateConversation - })); - - const filterByConversationType = (message) => { - if (conversationType !== ConversationTypeConstants.both) { - if ( - (conversationType === ConversationTypeConstants.users && - message?.receiverType === ReceiverTypeConstants.group) || - (conversationType === ConversationTypeConstants.groups && - message?.receiverType === ReceiverTypeConstants.user) - ) { - return false; - } - } - return true; - }; + const newConversation = { + ...latestConversation, + conversationId: latestConversation.conversationId, + conversationType: latestConversation.conversationType, + conversationWith: { ...latestConversation.conversationWith }, + unreadMessageCount: unreadMessageCount, + lastMessage: { ...lastMessage }, + }; - /** - * - * Converting message object received in the listener callback to conversation object - */ - const getConversationFromMessage = (message) => { - return new Promise((resolve, reject) => { - CometChat.CometChatHelper.getConversationFromMessage(message) - .then((conversation) => { - let conversationKey = conversationList.findIndex( - (c) => c.conversationId === conversation.conversationId - ); - - if (conversationKey > -1) { - resolve({ - conversationKey: conversationKey, - conversationId: conversation.conversationId, - conversationType: conversation.conversationType, - conversationWith: conversation.conversationWith, - conversation: conversationList[conversationKey], - conversations: [...conversationList], - }); - } - - resolve({ - conversationKey: conversationKey, - conversationId: conversation.conversationId, - conversationType: conversation.conversationType, - conversationWith: conversation.conversationWith, - conversation: conversation, - conversations: [...conversationList], - }); - }) - .catch((error) => { - CometChatConversationEvents.emit( - CometChatConversationEvents.onError, - error - ); - reject(error) - }); - }); - }; + //play notification sound + playNotificationSound(message); - const getUnreadMessageCount = (message, conversation = {}) => { - let unreadMessageCount = conversation?.unreadMessageCount ? Number(conversation?.unreadMessageCount) : 0; + list.splice(conversationKey, 1); + list.unshift(newConversation); - unreadMessageCount = shouldIncrementCount(message) ? ++unreadMessageCount : unreadMessageCount; + return [...list]; + } else { + const lastMessage = { + ...conversation?.lastMessage, + ...message, + data: { ...message.data }, + }; + const unreadMessageCount = getUnreadMessageCount( + message, + conversation + ); - return unreadMessageCount; - }; + const newConversation = new CometChat.Conversation( + conversation.conversationId, + conversation.conversationType, + lastMessage, + conversation.conversationWith, + unreadMessageCount + ); - /** - * - * If the message is sent by the logged in user, return false - * If the message has category message or has incrementUnreadCount key in the metadata with value set to true, return true else return false - * - */ - const shouldIncrementCount = (message) => { - if (message?.sender?.uid === loggedInUser?.current?.uid) { - return false; - } + list.unshift(newConversation); - if ( - message?.category === MessageCategoryConstants.message || (message?.metadata?.incrementUnreadCount === true) - ) { - return true; + return [...list]; + } + }); + }) + .catch((error) => + CometChatConversationEvents.emit( + CometChatConversationEvents.onError, + error + ) + ); + }; + + /** + * Listener callback when a message is edited, deleted or updated + */ + const handleMessageActions = (...options) => { + const message = options[0]; + + getConversationFromMessage(message).then((response) => { + setConversationList( + (prevConversationList) => { + const conversations = [...prevConversationList]; + let conversationKey = prevConversationList.findIndex( + (c) => c.conversationId === response.conversation.conversationId + ); + + const latestConversation = prevConversationList[conversationKey]; + if ( + conversationKey > -1 && + latestConversation?.lastMessage?.id === message?.id + ) { + const lastMessage = { + ...latestConversation?.lastMessage, + ...message, + data: { ...message.data }, + }; + const unreadMessageCount = getUnreadMessageCount( + message, + latestConversation + ); + const newConversation = new CometChat.Conversation( + latestConversation.conversationId, + latestConversation.conversationType, + lastMessage, + response.conversationWith, + unreadMessageCount, + latestConversation + ); + conversations.splice(conversationKey, 1, newConversation); + return [...conversations]; + } else { + return [...prevConversationList]; + } } - return false; - }; + // } else { + // const { + // conversationId, + // conversationType, + // conversationWith, + // conversation, + // conversations, + // } = response; + // const lastMessage = { + // ...conversation.lastMessage, ...message, data: { + // ...message.data + // } }; + // const unreadMessageCount = getUnreadMessageCount(message, conversation); + // if (lastMessage.id === message.id) { + // const newConversation = new CometChat.Conversation( + // conversationId, + // conversationType, + // lastMessage, + // conversationWith, + // unreadMessageCount + // ) + // conversations.unshift(newConversation); + // return [...conversations] + // } + // } + ); + }); + }; + + /** + * + * Listener callback when a message is read + */ + const handleMessageReadActions = (...options) => { + const messageReceipt = options[0]; + + let conversationKey = conversationList.findIndex( + (conversation) => + messageReceipt?.receiverType === conversation?.conversationType && + (messageReceipt?.receiver === conversation?.conversationWith?.uid || + messageReceipt?.receiver === conversation?.conversationWith?.guid) + ); - /** - * play notification sound for incoming messages - */ - const playNotificationSound = (message) => { + if (conversationKey > -1) { + const conversations = { ...conversationList }; + const conversation = conversations[conversationKey]; + let unreadMessageCount = getUnreadMessageCount(message, conversation); + + /** + * If the message id in the read receipt is greater than or equal to the lastmessage id, set unreadmessagecount to 0 + */ + if (messageReceipt?.messageId >= conversation?.lastMessage?.id) { + unreadMessageCount = 0; + } + + const newConversation = new CometChat.Conversation( + conversation.conversationId, + conversation.conversationType, + conversation.lastMessage, + conversation.conversationWith, + unreadMessageCount + ); + + conversations.splice(conversationKey, 1, newConversation); + setConversationList(conversations); + } + }; + + /** + * + * Listener callback when a user joins/added to the group + */ + const handleGroupMemberAddition = (...options) => { + const message = options[0]; + const newUser = options[1]; + const group = options[3]; + + getConversationFromMessage(message).then((response) => { + const { + conversationKey, + conversationId, + conversationType, + conversationWith, + conversation, + conversations, + } = response; + + if (conversationKey > -1) { + const lastMessage = { ...conversation.lastMessage, ...message }; + const newConversationWith = { ...conversationWith, ...group }; + const unreadMessageCount = getUnreadMessageCount(message, conversation); + + const newConversation = new CometChat.Conversation( + conversationId, + conversationType, + lastMessage, + newConversationWith, + unreadMessageCount + ); + conversations.splice(conversationKey, 1, newConversation); + setConversationList(conversations); + } else if (loggedInUser?.current?.uid === newUser.uid) { /** - * If unreadcount is not incremented, don't play notification sound + * If the loggedin user is added to the group, add the conversation to the chats list */ - if (!shouldIncrementCount(message)) { - return false; - } - /** - * If customIncomingMessageSound url is present then CometChatSoundManager will play this sound - else play the default sound - */ - if ( - enableSoundForMessages && - activeConversation?.conversationType && - activeConversation?.conversationWith - ) { - const receiverType = message.getReceiverType(); - const receiverId = receiverType === ReceiverTypeConstants.user ? message?.getSender()?.getUid() : message?.getReceiverId(); - - if ( - receiverId !== activeConversation?.conversationWith?.uid && - receiverId !== activeConversation?.conversationWith?.guid - ) { - if (customIncomingMessageSound) { - CometChatSoundManager.play(customIncomingMessageSound); - } else { - CometChatSoundManager.play( - CometChatSoundManager.Sound.incomingMessageFromOther - ); - } - } - } - }; - - /** - * - * When a user goes online/ offline - */ - const handleUsers = (user) => { - const conversationKey = conversationList.findIndex( - (eachConversation) => - eachConversation.conversationType && - eachConversation.conversationType === ReceiverTypeConstants.user && - eachConversation.conversationWith && - eachConversation.conversationWith.uid && - eachConversation.conversationWith.uid === user.uid + const lastMessage = { ...message }; + const newConversationWith = { + ...conversationWith, + ...group, + hasJoined: true, + }; + const unreadMessageCount = getUnreadMessageCount(message, conversation); + + const newConversation = new CometChat.Conversation( + conversationId, + conversationType, + lastMessage, + newConversationWith, + unreadMessageCount ); - if (conversationKey > -1) { - let conversations = [...conversationList]; - let conversation = conversations[conversationKey]; - let conversationWith = { - ...conversation.conversationWith, - status: user.getStatus(), - }; - - let newConversation = { - ...conversation, - conversationWith: conversationWith, - }; - conversations.splice(conversationKey, 1, newConversation); - setConversationList(conversations); - } - }; + conversations.unshift(newConversation); + setConversationList(conversations); + } + }); + }; + + /** + * + * Listener callback when a member is kicked from / has left the group + */ + const handleGroupMemberRemoval = (...options) => { + const message = options[0]; + const removedUser = options[1]; + const group = options[3]; + + getConversationFromMessage(message).then((response) => { + const { + conversationKey, + conversationId, + conversationType, + conversationWith, + conversation, + conversations, + } = response; - /** - * - * When a text message / media message / custom message is received - */ - const handleMessages = (...options) => { - const message = options[0]; + if (conversationKey > -1) { /** - * marking the incoming messages as read + * If the loggedin user is removed from the group, remove the conversation from the chats list */ - markMessageAsDelivered(message); + if (loggedInUser?.current?.uid === removedUser.uid) { + conversations.splice(conversationKey, 1); + setConversationList(conversations); + } else { + const lastMessage = { ...conversation.lastMessage, ...message }; + const newConversationWith = { ...conversationWith, ...group }; + const unreadMessageCount = getUnreadMessageCount( + message, + conversation + ); + + const newConversation = new CometChat.Conversation( + conversationId, + conversationType, + lastMessage, + newConversationWith, + unreadMessageCount + ); + + conversations.splice(conversationKey, 1, newConversation); + setConversationList(conversations); + } + } + }); + }; + + /** + * + * Listener callback when a member is banned from the group + */ + const handleGroupMemberBan = (...options) => { + const message = options[0]; + const removedUser = options[1]; + const group = options[3]; + + getConversationFromMessage(message).then((response) => { + const { + conversationKey, + conversationId, + conversationType, + conversationWith, + conversation, + conversations, + } = response; + + if (conversationKey > -1) { /** - * If the incoming message is 1-1 and the conversation type filter is set to group, return false - * OR - * If the incoming message is group and the conversation type filter is set to "users", return false - * ELSE - * return true + * If the loggedin user is banned from the group, remove the conversation from the chats list */ - if (filterByConversationType() === false) { - return false; + if (loggedInUser?.current?.uid === removedUser.uid) { + conversations.splice(conversationKey, 1); + setConversationList(conversations); + } else { + const lastMessage = { ...conversation.lastMessage, ...message }; + const newConversationWith = { ...conversationWith, ...group }; + const unreadMessageCount = getUnreadMessageCount( + message, + conversation + ); + + const newConversation = new CometChat.Conversation( + conversationId, + conversationType, + lastMessage, + newConversationWith, + unreadMessageCount + ); + + conversations.splice(conversationKey, 1, newConversation); + setConversationList(conversations); } - - getConversationFromMessage(message).then((response) => { - const { - conversationKey, - conversationId, - conversationType, - conversationWith, - conversation, - conversations, - } = response; - - const lastMessage = { ...conversation?.lastMessage, ...message }; - - if (conversationKey > -1) { - const unreadMessageCount = getUnreadMessageCount(message, conversation); - - const newConversation = new CometChat.Conversation( - conversationId, - conversationType, - lastMessage, - conversationWith, - unreadMessageCount - ); - conversations.splice(conversationKey, 1); - conversations.unshift(newConversation); - setConversationList(conversations); - - //play notification sound - playNotificationSound(message); - } else { - const unreadMessageCount = getUnreadMessageCount(message); - const newConversation = new CometChat.Conversation( - conversationId, - conversationType, - lastMessage, - conversationWith, - unreadMessageCount - ); - conversations.unshift(newConversation); - setConversationList(conversations); - - //play notification sound - playNotificationSound(message); - } - }); - }; - - /** - * Listener callback when a message is edited, deleted or updated - */ - const handleMessageActions = (...options) => { - const message = options[0]; - - getConversationFromMessage(message).then((response) => { - const { - conversationKey, - conversationId, - conversationType, - conversationWith, - conversation, - conversations, - } = response; - - if (conversationKey > -1 && conversation.lastMessage.id === message.id) { - const lastMessage = { ...conversation.lastMessage, ...message }; - const unreadMessageCount = getUnreadMessageCount(message, conversation); - - const newConversation = new CometChat.Conversation( - conversationId, - conversationType, - lastMessage, - conversationWith, - unreadMessageCount - ); - conversations.splice(conversationKey, 1, newConversation); - setConversationList(conversations); - } - }); - }; - - /** - * - * Listener callback when a message is read - */ - const handleMessageReadActions = (...options) => { - const messageReceipt = options[0]; - - let conversationKey = conversationList.findIndex( - (conversation) => - messageReceipt?.receiverType === conversation?.conversationType && - (messageReceipt?.receiver === conversation?.conversationWith?.uid || - messageReceipt?.receiver === conversation?.conversationWith?.guid) - ); - - if (conversationKey > -1) { - const conversations = { ...conversationList }; - const conversation = conversations[conversationKey]; - let unreadMessageCount = getUnreadMessageCount(message, conversation); - - /** - * If the message id in the read receipt is greater than or equal to the lastmessage id, set unreadmessagecount to 0 - */ - if (messageReceipt?.messageId >= conversation?.lastMessage?.id) { - unreadMessageCount = 0; - } - - const newConversation = new CometChat.Conversation( - conversation.conversationId, - conversation.conversationType, - conversation.lastMessage, - conversation.conversationWith, - unreadMessageCount - ); - - conversations.splice(conversationKey, 1, newConversation); - setConversationList(conversations); + } + }); + }; + + /** + * + * Listener callback when a group member scope is updated + */ + const handleGroupMemberScopeChange = (...options) => { + const message = options[0]; + const user = options[1]; + const newScope = options[2]; + const group = options[4]; + + getConversationFromMessage(message).then((response) => { + const { + conversationKey, + conversationId, + conversationType, + conversationWith, + conversation, + conversations, + } = response; + + if (conversationKey > -1) { + const lastMessage = { ...conversation.lastMessage, ...message }; + const unreadMessageCount = getUnreadMessageCount(message, conversation); + + if (loggedInUser?.current?.uid === user.uid) { + const newConversationWith = { + ...conversationWith, + ...group, + scope: newScope, + }; + + const newConversation = new CometChat.Conversation( + conversationId, + conversationType, + lastMessage, + newConversationWith, + unreadMessageCount + ); + + conversations.splice(conversationKey, 1); + conversations.unshift(newConversation); + setConversationList(conversations); + } else { + let newConversationWith = { ...conversationWith, ...group }; + + const newConversation = new CometChat.Conversation( + conversationId, + conversationType, + lastMessage, + newConversationWith, + unreadMessageCount + ); + + conversations.splice(conversationKey, 1, newConversation); + setConversationList(conversations); } - }; - - /** - * - * Listener callback when a user joins/added to the group - */ - const handleGroupMemberAddition = (...options) => { - const message = options[0]; - const newUser = options[1]; - const group = options[3]; - - getConversationFromMessage(message).then((response) => { - const { - conversationKey, - conversationId, - conversationType, - conversationWith, - conversation, - conversations, - } = response; - - if (conversationKey > -1) { - const lastMessage = { ...conversation.lastMessage, ...message }; - const newConversationWith = { ...conversationWith, ...group }; - const unreadMessageCount = getUnreadMessageCount(message, conversation); - - const newConversation = new CometChat.Conversation( - conversationId, - conversationType, - lastMessage, - newConversationWith, - unreadMessageCount - ); - conversations.splice(conversationKey, 1, newConversation); - setConversationList(conversations); - } else if (loggedInUser?.current?.uid === newUser.uid) { - /** - * If the loggedin user is added to the group, add the conversation to the chats list - */ - const lastMessage = { ...message }; - const newConversationWith = { - ...conversationWith, - ...group, - hasJoined: true, - }; - const unreadMessageCount = getUnreadMessageCount(message, conversation); - - const newConversation = new CometChat.Conversation( - conversationId, - conversationType, - lastMessage, - newConversationWith, - unreadMessageCount - ); - - conversations.unshift(newConversation); - setConversationList(conversations); - } - }); - }; - - /** - * - * Listener callback when a member is kicked from / has left the group - */ - const handleGroupMemberRemoval = (...options) => { - const message = options[0]; - const removedUser = options[1]; - const group = options[3]; - - getConversationFromMessage(message).then((response) => { - const { - conversationKey, - conversationId, - conversationType, - conversationWith, - conversation, - conversations, - } = response; - - if (conversationKey > -1) { - /** - * If the loggedin user is removed from the group, remove the conversation from the chats list - */ - if (loggedInUser?.current?.uid === removedUser.uid) { - conversations.splice(conversationKey, 1); - setConversationList(conversations); - } else { - const lastMessage = { ...conversation.lastMessage, ...message }; - const newConversationWith = { ...conversationWith, ...group }; - const unreadMessageCount = getUnreadMessageCount( - message, - conversation - ); - - const newConversation = new CometChat.Conversation( - conversationId, - conversationType, - lastMessage, - newConversationWith, - unreadMessageCount - ); - - conversations.splice(conversationKey, 1, newConversation); - setConversationList(conversations); - } - } - }); - }; - - /** - * - * Listener callback when a member is banned from the group - */ - const handleGroupMemberBan = (...options) => { - const message = options[0]; - const removedUser = options[1]; - const group = options[3]; - - getConversationFromMessage(message).then((response) => { - const { - conversationKey, - conversationId, - conversationType, - conversationWith, - conversation, - conversations, - } = response; - - if (conversationKey > -1) { - /** - * If the loggedin user is banned from the group, remove the conversation from the chats list - */ - if (loggedInUser?.current?.uid === removedUser.uid) { - conversations.splice(conversationKey, 1); - setConversationList(conversations); - } else { - const lastMessage = { ...conversation.lastMessage, ...message }; - const newConversationWith = { ...conversationWith, ...group }; - const unreadMessageCount = getUnreadMessageCount( - message, - conversation - ); - - const newConversation = new CometChat.Conversation( - conversationId, - conversationType, - lastMessage, - newConversationWith, - unreadMessageCount - ); - - conversations.splice(conversationKey, 1, newConversation); - setConversationList(conversations); - } - } - }); - }; - - /** - * - * Listener callback when a group member scope is updated - */ - const handleGroupMemberScopeChange = (...options) => { - const message = options[0]; - const user = options[1]; - const newScope = options[2]; - const group = options[4]; - - getConversationFromMessage(message).then((response) => { - const { - conversationKey, - conversationId, - conversationType, - conversationWith, - conversation, - conversations, - } = response; - - if (conversationKey > -1) { - const lastMessage = { ...conversation.lastMessage, ...message }; - const unreadMessageCount = getUnreadMessageCount(message, conversation); - - if (loggedInUser?.current?.uid === user.uid) { - const newConversationWith = { - ...conversationWith, - ...group, - scope: newScope, - }; - - const newConversation = new CometChat.Conversation( - conversationId, - conversationType, - lastMessage, - newConversationWith, - unreadMessageCount - ); - - conversations.splice(conversationKey, 1); - conversations.unshift(newConversation); - setConversationList(conversations); - } else { - let newConversationWith = { ...conversationWith, ...group }; - - const newConversation = new CometChat.Conversation( - conversationId, - conversationType, - lastMessage, - newConversationWith, - unreadMessageCount - ); - - conversations.splice(conversationKey, 1, newConversation); - setConversationList(conversations); - } - } - }); - }; - - /** - * - * Listener callback for typing events - */ - const handleTyping = (...options) => { - const typingData = options[0]; - const typingStarted = options[1]; - const conversations = [...conversationList]; - - let conversationKey = conversations.findIndex( - (conversation) => - conversation?.conversationType === typingData?.receiverType && - ((conversation?.conversationType === ReceiverTypeConstants.user && - conversation.conversationWith?.uid === typingData?.sender?.uid) || - (conversation.conversationType === ReceiverTypeConstants.group && - conversation.conversationWith?.guid === typingData?.receiverId)) - ); + } + }); + }; + + /** + * + * Listener callback for typing events + */ + const handleTyping = (...options) => { + const typingData = options[0]; + const typingStarted = options[1]; + const conversations = [...conversationList]; + + let conversationKey = conversations.findIndex( + (conversation) => + conversation?.conversationType === typingData?.receiverType && + ((conversation?.conversationType === ReceiverTypeConstants.user && + conversation.conversationWith?.uid === typingData?.sender?.uid) || + (conversation.conversationType === ReceiverTypeConstants.group && + conversation.conversationWith?.guid === typingData?.receiverId)) + ); - if (conversationKey > -1) { - let typingIndicatorText = ""; - if (typingStarted) { - typingIndicatorText = - typingData?.receiverType === ReceiverTypeConstants.group - ? `${typingData?.sender?.name} ${localize("IS_TYPING")}` - : localize("IS_TYPING"); - } - - const conversation = conversationList[conversationKey]; - const newConversation = { - ...conversation, - showTypingIndicator: typingStarted, - typingIndicatorText, - }; + if (conversationKey > -1) { + let typingIndicatorText = ""; + if (typingStarted) { + typingIndicatorText = + typingData?.receiverType === ReceiverTypeConstants.group + ? `${typingData?.sender?.name} ${localize("IS_TYPING")}` + : localize("IS_TYPING"); + } + + const conversation = conversationList[conversationKey]; + const newConversation = { + ...conversation, + showTypingIndicator: typingStarted, + typingIndicatorText, + }; + + conversations.splice(conversationKey, 1, newConversation); + setConversationList(conversations); + } + }; + + /** + * + * @param {Object} conversation + * Public method to update the conversation list programmatically + */ + const updateConversation = (conversation) => { + const conversationKey = conversationList.findIndex( + (eachConversation) => + eachConversation.conversationWith && + eachConversation.conversationWith.uid && + eachConversation.conversationWith.uid === + conversation?.conversationWith?.uid + ); - conversations.splice(conversationKey, 1, newConversation); - setConversationList(conversations); + if (conversationKey > -1) { + let conversations = [...conversationList]; + let conversation = conversations[conversationKey]; + let conversationWith = { + ...conversation.conversationWith, + }; + + let newConversation = { + ...conversation, + conversationWith: conversationWith, + }; + conversations.splice(conversationKey, 1, newConversation); + setConversationList(conversations); + } + }; + + const handlers = { + onUserOnline: handleUsers, + onUserOffline: handleUsers, + onTextMessageReceived: handleMessages, + onMediaMessageReceived: handleMessages, + onCustomMessageReceived: handleMessages, + onIncomingCallReceived: handleMessages, + onIncomingCallCancelled: handleMessages, + messageEdited: handleMessageActions, + onMessageDeleted: handleMessageActions, + messageRead: handleMessageReadActions, + onMemberAddedToGroup: handleGroupMemberAddition, + onGroupMemberJoined: handleGroupMemberAddition, + onGroupMemberKicked: handleGroupMemberRemoval, + onGroupMemberLeft: handleGroupMemberRemoval, + onGroupMemberBanned: handleGroupMemberBan, + onGroupMemberScopeChanged: handleGroupMemberScopeChange, + onTypingStarted: handleTyping, + onTypingEnded: handleTyping, + }; + + const handleConversations = () => { + getConversations() + .then((conversations) => { + if (conversationList.length === 0 && conversations.length === 0) { + setMessage("NO_CHATS_FOUND"); + } else { + setMessage(""); } - }; - /** - * - * @param {Object} conversation - * Public method to update the conversation list programmatically - */ - const updateConversation = (conversation) => { - const conversationKey = conversationList.findIndex( - (eachConversation) => - eachConversation.conversationWith && - eachConversation.conversationWith.uid && - eachConversation.conversationWith.uid === conversation?.conversationWith?.uid - ); - - if (conversationKey > -1) { - let conversations = [...conversationList]; - let conversation = conversations[conversationKey]; - let conversationWith = { - ...conversation.conversationWith, - }; - - let newConversation = { - ...conversation, - conversationWith: conversationWith, - }; - conversations.splice(conversationKey, 1, newConversation); - setConversationList(conversations); - } - }; - - const handlers = { - onUserOnline: handleUsers, - onUserOffline: handleUsers, - onTextMessageReceived: handleMessages, - onMediaMessageReceived: handleMessages, - onCustomMessageReceived: handleMessages, - onIncomingCallReceived: handleMessages, - onIncomingCallCancelled: handleMessages, - messageEdited: handleMessageActions, - onMessageDeleted: handleMessageActions, - messageRead: handleMessageReadActions, - onMemberAddedToGroup: handleGroupMemberAddition, - onGroupMemberJoined: handleGroupMemberAddition, - onGroupMemberKicked: handleGroupMemberRemoval, - onGroupMemberLeft: handleGroupMemberRemoval, - onGroupMemberBanned: handleGroupMemberBan, - onGroupMemberScopeChanged: handleGroupMemberScopeChange, - onTypingStarted: handleTyping, - onTypingEnded: handleTyping, - }; - - const handleConversations = () => { - getConversations() - .then((conversations) => { - if (conversationList.length === 0 && conversations.length === 0) { - setMessage("NO_CHATS_FOUND"); - } else { - setMessage(""); - } - - setConversationList((conversationList) => { - return [...conversationList, ...conversations]; - }); - }) - .catch((error) => { - CometChatConversationEvents.emit( - CometChatConversationEvents.onError, - error - ); - setMessage(("SOMETHING_WENT_WRONG")); - }); - }; - - const getConversations = () => { - return new Promise((resolve, reject) => { - conversationListManager?.current - .fetchNextConversation() - .then((conversations) => resolve(conversations)) - .catch((error) => { - CometChatConversationEvents.emit( - CometChatConversationEvents.onError, - error - ); - reject(error) - }); + setConversationList((conversationList) => { + return [...conversationList, ...conversations]; }); - }; - - const handleScroll = (event) => { - const bottom = - Math.round( - event.currentTarget.scrollHeight - event.currentTarget.scrollTop - ) === Math.round(event.currentTarget.clientHeight); - if (bottom) { - handleConversations(); - } - }; - - /** - * reset un read count - */ - const resetUnreadCount = (conversation) => { - const conversations = [...conversationList]; - const conversationKey = conversations.findIndex( - (conversationObject) => - conversationObject.conversationId === conversation.conversationId + }) + .catch((error) => { + CometChatConversationEvents.emit( + CometChatConversationEvents.onError, + error ); - if (conversationKey > -1) { - let conversation = conversations[conversationKey]; - let newConversation = { - ...conversation, - unreadMessageCount: 0, - }; - conversations.splice(conversationKey, 1, newConversation); - setConversationList(conversations); - } - }; - - /** - * update last message - */ - const updateLastMessage = (message) => { - getConversationFromMessage(message).then((response) => { - const { conversationKey, conversations, conversation } = response; - const lastMessage = { ...conversation.lastMessage }; - if (conversationKey > -1) { - let newConversation = { - ...conversation, - lastMessage: lastMessage, - }; - conversations.splice(conversationKey, 1, newConversation); - setConversationList(conversations); - } + setMessage("SOMETHING_WENT_WRONG"); + }); + }; + + const getConversations = () => { + return new Promise((resolve, reject) => { + conversationListManager?.current + .fetchNextConversation() + .then((conversations) => resolve(conversations)) + .catch((error) => { + CometChatConversationEvents.emit( + CometChatConversationEvents.onError, + error + ); + reject(error); }); - }; + }); + }; + + const handleScroll = (event) => { + const bottom = + Math.round( + event.currentTarget.scrollHeight - event.currentTarget.scrollTop + ) === Math.round(event.currentTarget.clientHeight); + if (bottom) { + handleConversations(); + } + }; + + /** + * reset un read count + */ + const resetUnreadCount = (conversation) => { + const conversations = [...conversationList]; + const conversationKey = conversations.findIndex( + (conversationObject) => + conversationObject.conversationId === conversation.conversationId + ); + if (conversationKey > -1) { + let conversation = conversations[conversationKey]; + let newConversation = { + ...conversation, + unreadMessageCount: 0, + }; + conversations.splice(conversationKey, 1, newConversation); + setConversationList(conversations); + } + }; + + // /** + // * update last edited or deleted message + // */ + const updateConversationonEditOrDeleteMessage = (message) => { + getConversationFromMessage(message).then((response) => { + setConversationList((prevConversationList) => { + let conversations = [...prevConversationList]; + let conversationKey = prevConversationList.findIndex( + (c) => c.conversationId === response.conversation.conversationId + ); - /** - * Remove conversation from the conversationlist upon delete - */ - const removeConversation = (conversation) => { - const conversationKey = conversationList.findIndex( - (c) => c.conversationId === conversation.conversationId + const latestConversation = prevConversationList[conversationKey]; + if ( + conversationKey > -1 && + latestConversation?.lastMessage?.id === message.id + ) { + let newConversation = { + ...latestConversation, + lastMessage: { ...message }, + }; + conversations.splice(conversationKey, 1, newConversation); + return [...conversations]; + } else { + return [...prevConversationList]; + } + }); + }); + }; + + /** + * update last message + */ + const updateLastMessage = (message) => { + getConversationFromMessage(message).then((response) => { + setConversationList((prevConversationList) => { + let conversations = [...prevConversationList]; + let conversationKey = prevConversationList.findIndex( + (c) => c.conversationId === response.conversation.conversationId ); if (conversationKey > -1) { - const newConversationList = [...conversationList]; - newConversationList.splice(conversationKey, 1); - setConversationList(newConversationList); + const latestConversation = prevConversationList[conversationKey]; + let newConversation = { + ...latestConversation, + lastMessage: { ...message }, + }; + conversations.splice(conversationKey, 1, newConversation); + return [...conversations]; + } else { + const { conversationKey, conversations, conversation } = response; + let newConversation = { + ...conversation, + lastMessage: { ...message }, + }; + conversations.unshift(conversationKey, 1, newConversation); + return [...conversations]; } - }; - - const deleteConversation = (conversationToBeDeleted) => { - - return new Promise((resolve, reject) => { - const conversationWith = conversationToBeDeleted?.conversationType === ReceiverTypeConstants.group - ? conversationToBeDeleted?.conversationWith?.guid - : conversationToBeDeleted?.conversationWith?.uid; - - CometChat.deleteConversation( - conversationWith, - conversationToBeDeleted?.conversationType - ) - .then((deletedConversation) => { - setShowConfirm({ - ...showConfirm, - show: false - }); - removeConversation(conversationToBeDeleted); - resolve(deletedConversation); - CometChatConversationEvents.emit( - CometChatConversationEvents.onDeleteConversation, - conversationToBeDeleted - ); - }) - - .catch((error) => { - CometChatConversationEvents.emit( - CometChatConversationEvents.onError, - conversationToBeDeleted - ); - reject(error); - }); - }); - }; - - const cancelDelete = () => setShowConfirm({ - ...showConfirm, - show: false + }); }); + }; + + /** + * Remove conversation from the conversationlist upon delete + */ + const removeConversation = (conversation) => { + const conversationKey = conversationList.findIndex( + (c) => c.conversationId === conversation.conversationId + ); - const confirmDelete = (conversation) => { - setShowConfirm({ + if (conversationKey > -1) { + const newConversationList = [...conversationList]; + newConversationList.splice(conversationKey, 1); + setConversationList(newConversationList); + } + }; + + const deleteConversation = (conversationToBeDeleted) => { + return new Promise((resolve, reject) => { + const conversationWith = + conversationToBeDeleted?.conversationType === + ReceiverTypeConstants.group + ? conversationToBeDeleted?.conversationWith?.guid + : conversationToBeDeleted?.conversationWith?.uid; + + CometChat.deleteConversation( + conversationWith, + conversationToBeDeleted?.conversationType + ) + .then((deletedConversation) => { + setShowConfirm({ ...showConfirm, - show: true, - conversation: conversation, - onCancel: cancelDelete + show: false, + }); + removeConversation(conversationToBeDeleted); + resolve(deletedConversation); + CometChatConversationEvents.emit( + CometChatConversationEvents.onDeleteConversation, + conversationToBeDeleted + ); }) - }; - const itemClickhandler = (e) => { - CometChatConversationEvents.emit( - CometChatConversationEvents.onItemClick, - e - ); - }; + .catch((error) => { + CometChatConversationEvents.emit( + CometChatConversationEvents.onError, + conversationToBeDeleted + ); + reject(error); + }); + }); + }; + const cancelDelete = () => + setShowConfirm({ + ...showConfirm, + show: false, + }); - /** - * Component hooks - */ + const confirmDelete = (conversation) => { + setShowConfirm({ + ...showConfirm, + show: true, + conversation: conversation, + onCancel: cancelDelete, + }); + }; - Hooks( - conversationType, - limit, - tags, - userAndGroupTags, - setConversationList, - conversationCallback, - conversationListManager, - handlers, - callbackData, - loggedInUser, - handleConversations, - confirmDelete + const itemClickhandler = (e) => { + CometChatConversationEvents.emit( + CometChatConversationEvents.onItemClick, + e ); + }; + + /** + * Component hooks + */ + + Hooks( + conversationType, + limit, + tags, + userAndGroupTags, + setConversationList, + conversationCallback, + conversationListManager, + loggedInUser, + handleConversations + ); + + /** + * Component template scoping + */ + + const getCustomView = (customView, props) => { + return React.createElement(customView, props); + }; + + const getMessageContainer = () => { + let messageContainer = null; + if ( + conversationList.length === 0 && + message.toLowerCase() === localize("LOADING") + ) { + /**Loading custom view */ + messageContainer = ( +
+ {customView.loading ? ( + getCustomView(customView.loading, props) + ) : ( +
+ )} +
+ ); + } else if ( + conversationList.length === 0 && + message.toLowerCase() === "no chats found" + ) { + /**Empty custom view */ + messageContainer = ( +
+ {customView.empty ? ( + getCustomView(customView.empty, props) + ) : ( +
+ {emptyText} +
+ )} +
+ ); + } else if (!hideError && message.toLowerCase() === "something went wrong") { + /**Error custom view */ + messageContainer = ( +
+ {customView.error ? ( + getCustomView(customView.error, props) + ) : ( +
+ {errorText} +
+ )} +
+ ); + } + return messageContainer; + }; + const renderItems = conversationList.map((conversation) => { + const typingIndicatorText = conversation?.typingIndicatorText + ? conversation?.typingIndicatorText + : ""; + let isActive = + conversation?.conversationId === activeConversation?.conversationId + ? true + : false; /** - * Component template scoping + * Calculate conversations options for child component */ + let conversationOptions = + _conversationListItemConfiguration?.conversationOptions; + if (conversationOptions?.length == 0) { + conversationOptions = [ + new CometChatConversationOptions({ + id: ConversationOptionConstants.delete, + title: localize("DELETE"), + iconURL: deleteIcon, + onClick: () => confirmDelete(conversation), + }), + ]; + } - const getCustomView = (customView, props) => { - return React.createElement(customView, props); - }; - - const getMessageContainer = () => { - let messageContainer = null; - if (conversationList.length === 0 && message.toLowerCase() === localize("LOADING")) { - /**Loading custom view */ - messageContainer = ( -
- {customView.loading ? ( - getCustomView(customView.loading, props) - ) : ( -
- )} -
- ); - } else if (conversationList.length === 0 && message.toLowerCase() === 'no chats found') { - /**Empty custom view */ - messageContainer = ( -
- {customView.empty ? ( - getCustomView(customView.empty, props) - ) : ( -
- {emptyText} -
- )} -
- ); - } else if (!hideError && message.toLowerCase() === 'something went wrong') { - /**Error custom view */ - messageContainer = ( -
- {customView.error ? ( - getCustomView(customView.error, props) - ) : ( -
- {errorText} -
- )} -
- ); + return ( + { - const typingIndicatorText = conversation?.typingIndicatorText - ? conversation?.typingIndicatorText - : ""; - let isActive = - conversation?.conversationId === activeConversation?.conversationId - ? true - : false; - - /** - * Calculate conversations options for child component - */ - let conversationOptions = _conversationListItemConfiguration?.conversationOptions; - if (conversationOptions?.length == 0) { - conversationOptions = [ - new CometChatConversationOptions({ - id: ConversationOptionConstants.delete, - title: localize("DELETE"), - iconURL: deleteIcon, - onClick: () => confirmDelete(conversation), - }), - ]; + conversationOptions={conversationOptions} + style={ + new ConversationListItemStyle({ + ...styles.listItemStyle(style, _theme), + }) } - - return ( - - ); - }); - - - /** - * Component template - */ - return ( - - {getMessageContainer()} -
- {renderItems} -
- - - - + hideDeletedMessages={ + _conversationListItemConfiguration?.hideDeletedMessages + } + hideGroupActions={_conversationListItemConfiguration?.hideGroupActions} + showTypingIndicator={ + _conversationListItemConfiguration?.showTypingIndicator + } + typingIndicatorText={typingIndicatorText} + hideThreadIndicator={ + _conversationListItemConfiguration?.hideThreadIndicator + } + threadIndicatorText={localize("IN_A_THREAD")} + theme={_theme} + onClick={itemClickhandler.bind(this)} + avatarConfiguration={ + _conversationListItemConfiguration?.avatarConfiguration + } + statusIndicatorConfiguration={ + _conversationListItemConfiguration?.statusIndicatorConfiguration + } + badgeCountConfiguration={ + _conversationListItemConfiguration?.badgeCountConfiguration + } + messageReceiptConfiguration={ + _conversationListItemConfiguration?.messageReceiptConfiguration + } + loggedInUser={loggedInUser?.current} + /> ); + }); + + /** + * Component template + */ + return ( + + {getMessageContainer()} +
+ {renderItems} +
+ + + + + ); }); - /** * Component default props */ ConversationList.defaultProps = { - loadingIconURL: loadingIcon, + loadingIconURL: loadingIcon, }; - /** * Component default props types */ ConversationList.propTypes = { - conversationType: PropTypes.oneOf(["users", "groups", "both"]), - limit: PropTypes.number, - hideError: PropTypes.bool, - tags: PropTypes.array, - userAndGroupTags: PropTypes.bool, - emptyText: PropTypes.string, - errorText: PropTypes.string, - loadingIconURL: PropTypes.string, - style: PropTypes.object, - activeConversation: PropTypes.object, - enableSoundForMessages: PropTypes.bool, - customIncomingMessageSound: PropTypes.string, - customView: PropTypes.object, - conversationListItemConfiguration: PropTypes.object, - theme: PropTypes.object + conversationType: PropTypes.oneOf(["users", "groups", "both"]), + limit: PropTypes.number, + hideError: PropTypes.bool, + tags: PropTypes.array, + userAndGroupTags: PropTypes.bool, + emptyText: PropTypes.string, + errorText: PropTypes.string, + loadingIconURL: PropTypes.string, + style: PropTypes.object, + activeConversation: PropTypes.object, + enableSoundForMessages: PropTypes.bool, + customIncomingMessageSound: PropTypes.string, + customView: PropTypes.object, + conversationListItemConfiguration: PropTypes.object, + theme: PropTypes.object, }; -export const CometChatConversationList = React.memo(ConversationList); \ No newline at end of file +export const CometChatConversationList = React.memo(ConversationList); diff --git a/src/components/Chats/CometChatConversationList/style.js b/src/components/Chats/CometChatConversationList/style.js index 8fefd1b0..a6f9768a 100644 --- a/src/components/Chats/CometChatConversationList/style.js +++ b/src/components/Chats/CometChatConversationList/style.js @@ -1,117 +1,117 @@ -import { fontHelper } from "../../Shared"; +import { fontHelper, ConfirmDialogStyle } from "../../Shared"; export const chatsListStyle = (style, theme) => { - return { - width: style?.width, - height: style?.height, - border: style?.border, - background: style?.background || theme?.palette?.getBackground(), - position: "relative", - flexDirection: "column", - display: "flex", - overflowX: "hidden", - overflowY: "scroll", - margin: "0", - padding: "0", - borderRadius: style?.borderRadius, - }; + return { + width: style?.width, + height: style?.height, + border: style?.border, + background: style?.background || theme?.palette?.getBackground(), + position: "relative", + flexDirection: "column", + display: "flex", + overflowX: "hidden", + overflowY: "scroll", + margin: "0", + padding: "0", + borderRadius: style?.borderRadius, + }; }; export const messageContainerStyle = (style) => { - return { - overflow: "hidden", - width: style?.width, - display: "flex", - justifyContent: "center", - alignItems: "center", - position: "absolute", - top: "30%", - zIndex: 1, - }; + return { + overflow: "hidden", + width: style?.width, + display: "flex", + justifyContent: "center", + alignItems: "center", + position: "absolute", + top: "30%", + zIndex: 1, + }; }; export const messageTextStyle = (style, theme, message) => { - let color = { color: theme?.palette?.getAccent400() }; - let font = { font: fontHelper(theme?.typography?.heading) }; - if (message && message?.toLowerCase() === "no_users_found") { - if (style?.emptyTextColor) { - color = { color: style?.emptyTextColor }; - } + let color = { color: theme?.palette?.getAccent400() }; + let font = { font: fontHelper(theme?.typography?.heading) }; + if (message && message?.toLowerCase() === "no_users_found") { + if (style?.emptyTextColor) { + color = { color: style?.emptyTextColor }; + } - if (style?.emptyTextFont) { - font = { font: style?.emptyTextFont }; - } - } else if (message && message?.toLowerCase() === "something_wrong") { - color = { color: theme?.palette?.getError() }; + if (style?.emptyTextFont) { + font = { font: style?.emptyTextFont }; + } + } else if (message && message?.toLowerCase() === "something_wrong") { + color = { color: theme?.palette?.getError() }; - if (style?.errorTextColor) { - color = { color: style?.errorTextColor }; - } + if (style?.errorTextColor) { + color = { color: style?.errorTextColor }; + } - if (style?.errorTextFont) { - font = { font: style?.errorTextFont }; - } + if (style?.errorTextFont) { + font = { font: style?.errorTextFont }; } - return { - minHeight: "36px", - lineHeight: "30px", - wordWrap: "break-word", - padding: "0 16px", - width: "calc(100% - 32px)", - display: "flex", - margin: "0", - justifyContent: "center", - ...color, - ...font, - }; + } + return { + minHeight: "36px", + lineHeight: "30px", + wordWrap: "break-word", + padding: "0 16px", + width: "calc(100% - 32px)", + display: "flex", + margin: "0", + justifyContent: "center", + ...color, + ...font, + }; }; export const messageImgStyle = (style, theme, loadingIconURL) => { - let background = { background: theme?.palette?.getAccent600() }; + let background = { background: theme?.palette?.getAccent600() }; - if (style?.loadingIconTint) { - background = { background: style?.loadingIconTint }; - } - return { - WebkitMask: `url(${loadingIconURL}) center center no-repeat`, - ...background, - margin: "0", - minHeight: "260px", - lineHeight: "30px", - wordWrap: "break-word", - padding: "0 16px", - width: style?.width, - }; + if (style?.loadingIconTint) { + background = { background: style?.loadingIconTint }; + } + return { + WebkitMask: `url(${loadingIconURL}) center center no-repeat`, + ...background, + margin: "0", + minHeight: "260px", + lineHeight: "30px", + wordWrap: "break-word", + padding: "0 16px", + width: style?.width, + }; }; export const listItemStyle = (style, theme) => { - return { - background: style?.background, - activeBackground: theme?.palette?.getAccent50(), - border: `1px solid ${theme?.palette?.getAccent200()}`, - borderRadius: "50%", - titleColor: theme?.palette?.getAccent(), - titleFont: fontHelper(theme?.typography?.title2), - subtitleColor: theme?.palette?.getAccent600(), - subtitleFont: fontHelper(theme?.typography?.subtitle2), - typingIndicatorTextColor: theme?.palette?.getAccent600(), - typingIndicatorTextFont: fontHelper(theme?.typography?.subtitle2), - }; + return { + background: style?.background, + activeBackground: theme?.palette?.getAccent50(), + border: `1px solid ${theme?.palette?.getAccent200()}`, + borderRadius: "50%", + titleColor: theme?.palette?.getAccent(), + titleFont: fontHelper(theme?.typography?.title2), + subtitleColor: theme?.palette?.getAccent600(), + subtitleFont: fontHelper(theme?.typography?.subtitle2), + typingIndicatorTextColor: theme?.palette?.getAccent600(), + typingIndicatorTextFont: fontHelper(theme?.typography?.subtitle2), + }; }; export const DialogStyle = (theme) => { - return { - width: "300px", - height: "225px", - background: theme?.palette?.getAccent900(), - border: theme?.palette?.getAccent50(), - borderRadius: "4px", - confirmButtonTextFont: fontHelper(theme?.typography?.title2), - confirmButtonTextColor: theme?.palette?.getAccent900(), - cancelButtonTextFont: fontHelper(theme?.typography?.title2), - cancelButtonTextColor: theme?.palette?.getAccent(), - titleTextFont: fontHelper(theme?.typography?.heading), - titleTextColor: theme?.palette?.getAccent(), - confirmBackground: theme?.palette?.getError(), - cancelBackground: theme?.palette?.getAccent500(), - messageTextFont: fontHelper(theme?.typography?.caption1), - messageTextColor: theme?.palette?.getAccent500(), - }; -}; \ No newline at end of file + return { + width: "300px", + height: "225px", + background: theme?.palette?.getAccent900(), + border: theme?.palette?.getAccent50(), + borderRadius: "8px", + confirmButtonTextFont: fontHelper(theme?.typography?.title2), + confirmButtonTextColor: theme?.palette?.getAccent900(), + cancelButtonTextFont: fontHelper(theme?.typography?.title2), + cancelButtonTextColor: theme?.palette?.getAccent(), + titleTextFont: fontHelper(theme?.typography?.heading), + titleTextColor: theme?.palette?.getAccent(), + confirmBackground: theme?.palette?.getError(), + cancelBackground: theme?.palette?.getAccent500(), + messageTextFont: fontHelper(theme?.typography?.caption1), + messageTextColor: theme?.palette?.getAccent500(), + }; +}; diff --git a/src/components/Chats/CometChatConversationOptions/index.js b/src/components/Chats/CometChatConversationOptions/index.js index 5ba4ca37..10c4ea66 100644 --- a/src/components/Chats/CometChatConversationOptions/index.js +++ b/src/components/Chats/CometChatConversationOptions/index.js @@ -5,7 +5,7 @@ * @param {String} iconURL * @param {Function} onClick */ -class CometChatConversationOptions { + class CometChatConversationOptions { constructor({ id = "", title = "", diff --git a/src/components/Chats/CometChatConversations/ConversationsConfiguration.js b/src/components/Chats/CometChatConversations/ConversationsConfiguration.js new file mode 100644 index 00000000..e2272651 --- /dev/null +++ b/src/components/Chats/CometChatConversations/ConversationsConfiguration.js @@ -0,0 +1,39 @@ +import { ConversationListConfiguration } from "../../.."; +import { ConversationsStyle } from "../"; + +/** + * @class ConversationsConfiguration + * @param {String} backButtonIconURL + * @param {String} startConversationIconURL + * @param {String} searchIconURL + * @param {String} showBackButton + * @param {Boolean} hideStartConversation + * @param {Boolean} hideSearch + * @param {Object} style + * @param {Object} conversationListConfiguration + */ +class ConversationsConfiguration { + constructor({ + backButtonIconURL = "", + startConversationIconURL = "", + searchIconURL = "", + showBackButton = false, + hideStartConversation = true, + hideSearch = true, + style = new ConversationsStyle({}), + conversationListConfiguration = new ConversationListConfiguration({}), + }) { + this.backButtonIconURL = backButtonIconURL; + this.startConversationIconURL = startConversationIconURL; + this.searchIconURL = searchIconURL; + this.showBackButton = showBackButton; + this.hideStartConversation = hideStartConversation; + this.hideSearch = hideSearch; + this.style = new ConversationsStyle(style ?? {}); + this.conversationListConfiguration = new ConversationListConfiguration( + conversationListConfiguration ?? {} + ); + } +} + +export { ConversationsConfiguration }; diff --git a/src/components/Chats/CometChatConversations/ConversationsStyle.js b/src/components/Chats/CometChatConversations/ConversationsStyle.js new file mode 100644 index 00000000..5862380b --- /dev/null +++ b/src/components/Chats/CometChatConversations/ConversationsStyle.js @@ -0,0 +1,62 @@ +import { BaseStyles } from "../../Shared/Base/BaseStyles"; + +/** + * @class ConversationsStyle + * @description ConversationsStyle class is used for defining the styles for conversations. + * @param {String} width + * @param {String} height + * @param {String} background + * @param {String} border + * @param {String} borderRadius + * @param {String} titleColor + * @param {String} titleFont + * @param {String} backIconTint + * @param {String} searchBorder + * @param {String} startConversationIconTint + * @param {String} searchBorderRadius + * @param {String} searchBackground + * @param {String} searchTextFont + * @param {String} searchTextColor + * @param {String} searchIconTint + */ + +class ConversationsStyle extends BaseStyles { + constructor({ + width = "280px", + height = "100%", + background = "", + border = "", + borderRadius = "0", + + titleFont = "", + titleColor = "", + backIconTint = "", + startConversationIconTint = "", + searchBorder = "", + searchBorderRadius = "8px", + searchBackground = "", + searchTextFont = "", + searchTextColor = "", + searchIconTint = "", + }) { + super({ + width, + height, + background, + border, + borderRadius, + }); + + this.titleColor = titleColor; + this.titleFont = titleFont; + this.backIconTint = backIconTint; + this.searchBorder = searchBorder; + this.startConversationIconTint = startConversationIconTint; + this.searchBorderRadius = searchBorderRadius; + this.searchBackground = searchBackground; + this.searchTextFont = searchTextFont; + this.searchTextColor = searchTextColor; + this.searchIconTint = searchIconTint; + } +} +export { ConversationsStyle }; diff --git a/src/components/Chats/CometChatConversations/ConversationsStyles.js b/src/components/Chats/CometChatConversations/ConversationsStyles.js deleted file mode 100644 index 70c0027d..00000000 --- a/src/components/Chats/CometChatConversations/ConversationsStyles.js +++ /dev/null @@ -1,63 +0,0 @@ -import { BaseStyles } from "../../Shared/Base/BaseStyles"; - -/** - * @class ConversationsStyles - * @description ConversationsStyles class is used for defining the styles for conversations. - * @param {String} width - * @param {String} height - * @param {String} background - * @param {String} border - * @param {String} borderRadius - * @param {String} titleColor - * @param {String} titleFont - * @param {String} backIconTint - * @param {String} searchBorder - * @param {String} startConversationIconTint - * @param {String} searchBorderRadius - * @param {String} searchBackground - * @param {String} searchTextFont - * @param {String} searchTextColor - * @param {String} searchIconTint - */ - -class ConversationsStyles extends BaseStyles { - - constructor({ - width = "280px", - height = "100%", - background = "", - border = "", - borderRadius = "0", - - titleFont = "", - titleColor = "", - backIconTint = "", - startConversationIconTint = "", - searchBorder = "", - searchBorderRadius = "8px", - searchBackground = "", - searchTextFont = "", - searchTextColor = "", - searchIconTint = "", - }) { - super({ - width, - height, - background, - border, - borderRadius - }); - - this.titleColor = titleColor; - this.titleFont = titleFont; - this.backIconTint = backIconTint - this.searchBorder = searchBorder - this.startConversationIconTint = startConversationIconTint - this.searchBorderRadius = searchBorderRadius - this.searchBackground = searchBackground - this.searchTextFont = searchTextFont - this.searchTextColor = searchTextColor - this.searchIconTint = searchIconTint - } -} -export { ConversationsStyles } \ No newline at end of file diff --git a/src/components/Chats/CometChatConversations/index.js b/src/components/Chats/CometChatConversations/index.js index 66c69372..40c58ae4 100644 --- a/src/components/Chats/CometChatConversations/index.js +++ b/src/components/Chats/CometChatConversations/index.js @@ -3,18 +3,18 @@ import PropTypes from "prop-types"; import * as styles from "./style"; import { CometChatConversationList } from "../"; import { - CometChatListBase, - ConversationListConfiguration, - CometChatTheme + CometChatListBase, + ConversationListConfiguration, + CometChatTheme, + CometChatConversationEvents, + CometChatMessageEvents, } from "../../../"; -import { - ConversationsStyles, - ConversationListStyles -} from "../../Chats"; -import { ListBaseStyles } from "../../Shared/PrimaryComponents/CometChatListBase/ListBaseStyles"; +import { ConversationsStyles, ConversationListStyle } from "../../Chats"; +import { ListBaseStyle } from "../../Shared/PrimaryComponents/CometChatListBase/ListBaseStyle"; import backIcon from "./resources/back.svg"; import startConversationIcon from "./resources/new.svg"; import seachIcon from "./resources/search.svg"; +import { messageStatus } from "../../Messages/CometChatMessageConstants"; /** * @@ -26,133 +26,179 @@ import seachIcon from "./resources/search.svg"; */ const CometChatConversations = forwardRef((props, ref) => { + /** + * Props destructuring + */ + const { + activeConversation, + title, + searchPlaceholder, - /** - * Props destructuring - */ - const { - activeConversation, - title, - searchPlaceholder, - - backButtonIconURL, - startConversationIconURL, - searchIconURL, - showBackButton, - hideStartConversation, - hideSearch, - style, - conversationListConfiguration, - theme - } = props; - - /** - * Component internal state - */ - const conversationListRef = React.useRef(null); - - /** - * Component private scoping - */ - const _conversationListConfiguration = new ConversationListConfiguration(conversationListConfiguration ?? {}); - const _theme = new CometChatTheme(theme ?? {});; - - - React.useImperativeHandle(ref, () => ({ - conversationListRef: conversationListRef.current - })); - - /** - * Component internal handlers/methods - */ - - const searchHandler = (searchText) => { - //TODO: search is not implemented - return false; - }; - - /** - * Component template scoping - */ - const getStartConversationButtonElem = () => { - if (hideStartConversation) { - return
; - } - return null; - }; + backButtonIconURL, + startConversationIconURL, + searchIconURL, + showBackButton, + hideStartConversation, + hideSearch, + style, + conversationListConfiguration, + theme, + } = props; + + const updateLastMessage = (payload) => { + if ( + conversationListRef?.current && + payload.status === messageStatus.success + ) { + if (payload?.message?.deletedAt || payload?.message?.editedAt) { + conversationListRef.current.updateConversationonEditOrDeleteMessage( + payload?.message + ); + } else { + conversationListRef.current.updateLastMessage(payload?.message); + } + } + }; + + CometChatMessageEvents.addListener( + CometChatMessageEvents.onMessageSent, + "onMessageSent", + updateLastMessage + ); + + CometChatMessageEvents.addListener( + CometChatMessageEvents.onMessageDelete, + "onMessageDelete", + updateLastMessage + ); + /** + * Component internal state + */ + const conversationListRef = React.useRef(null); + + /** + * Component private scoping + */ + const _conversationListConfiguration = new ConversationListConfiguration( + conversationListConfiguration ?? {} + ); + const _theme = new CometChatTheme(theme ?? {}); + + React.useImperativeHandle(ref, () => ({ + conversationListRef: conversationListRef.current, + })); - /** - * Component template - */ - return ( + React.useImperativeHandle(ref, () => ({ + conversationListRef: conversationListRef.current, + })); + + /** + * Component internal handlers/methods + */ + + const searchHandler = (searchText) => { + //TODO: search is not implemented + return false; + }; + + /** + * Component template scoping + */ + const getStartConversationButtonElem = () => { + if (hideStartConversation) { + return (
- {/* {getStartConversationButtonElem()} */} - - - -
- ); -}) + style={styles.startConversationBtnStyle( + style, + _theme, + startConversationIconURL + )} + > + ); + } + return null; + }; + + /** + * Component template + */ + return ( +
+ {/* {getStartConversationButtonElem()} */} + + + +
+ ); +}); /** * Component default props */ CometChatConversations.defaultProps = { - backButtonIconURL: backIcon, //TODO: This default props will be moved to configuration class when we move configurations in component folder only. - startConversationIconURL: startConversationIcon, - searchIconURL: seachIcon, + backButtonIconURL: backIcon, //TODO: This default props will be moved to configuration class when we move configurations in component folder only. + startConversationIconURL: startConversationIcon, + searchIconURL: seachIcon, }; /** * Component default props types */ CometChatConversations.propTypes = { - title: PropTypes.string, - searchPlaceholder: PropTypes.string, - style: PropTypes.object, - backButtonIconURL: PropTypes.string, - searchIconURL: PropTypes.string, - showBackButton: PropTypes.bool, - hideSearch: PropTypes.bool, - startConversationIconURL: PropTypes.string, - hideStartConversation: PropTypes.bool, - activeConversation: PropTypes.object, //TODO: Figure out way to use PropTypes.objectOf(CometChat.Conversation) - conversationListConfiguration: PropTypes.object, - theme: PropTypes.object + title: PropTypes.string, + searchPlaceholder: PropTypes.string, + style: PropTypes.object, + backButtonIconURL: PropTypes.string, + searchIconURL: PropTypes.string, + showBackButton: PropTypes.bool, + hideSearch: PropTypes.bool, + startConversationIconURL: PropTypes.string, + hideStartConversation: PropTypes.bool, + activeConversation: PropTypes.object, //TODO: Figure out way to use PropTypes.objectOf(CometChat.Conversation) + conversationListConfiguration: PropTypes.object, + theme: PropTypes.object, }; export { CometChatConversations }; diff --git a/src/components/Chats/CometChatConversationsWithMessages/ConversationsWithMessagesStyles.js b/src/components/Chats/CometChatConversationsWithMessages/ConversationsWithMessagesStyles.js index 365c3a9a..a34ad4dd 100644 --- a/src/components/Chats/CometChatConversationsWithMessages/ConversationsWithMessagesStyles.js +++ b/src/components/Chats/CometChatConversationsWithMessages/ConversationsWithMessagesStyles.js @@ -1,7 +1,7 @@ -import { BaseStyles } from "../../Shared/Base/BaseStyles" +import { BaseStyles } from "../../Shared/Base/BaseStyles"; /** - * @class ConversationsWithMessagesStyles - * @description ConversationsWithMessagesStyles class is used for defining the styles for ConversationsWithMessagesStyles. + * @class ConversationsWithMessagesStyle + * @description ConversationsWithMessagesStyle class is used for defining the styles for ConversationsWithMessagesStyle. * @param {String} width * @param {String} height * @param {String} background @@ -11,27 +11,26 @@ import { BaseStyles } from "../../Shared/Base/BaseStyles" * @param {String} messageTextFont */ -class ConversationsWithMessagesStyles extends BaseStyles { +class ConversationsWithMessagesStyle extends BaseStyles { + constructor({ + width = "100vw", + height = "100vh", + background = "", + border = "", + borderRadius = "0", + messageTextColor = "", + messageTextFont = "", + }) { + super({ + width, + height, + background, + border, + borderRadius, + }); - constructor({ - width = "100vw", - height = "100vh", - background = "", - border = "", - borderRadius = "0", - messageTextColor = "", - messageTextFont = "", - }) { - super({ - width, - height, - background, - border, - borderRadius - }); - - this.messageTextColor = messageTextColor; - this.messageTextFont = messageTextFont; - } + this.messageTextColor = messageTextColor; + this.messageTextFont = messageTextFont; + } } -export { ConversationsWithMessagesStyles } \ No newline at end of file +export { ConversationsWithMessagesStyle }; diff --git a/src/components/Shared/PrimaryComponents/CometChatConfiguration/ConversationsWithMessagesConfiguration.js b/src/components/Chats/CometChatConversationsWithMessages/ConversationswithMessagesConfiguration.js similarity index 72% rename from src/components/Shared/PrimaryComponents/CometChatConfiguration/ConversationsWithMessagesConfiguration.js rename to src/components/Chats/CometChatConversationsWithMessages/ConversationswithMessagesConfiguration.js index 7539e51d..22396f05 100644 --- a/src/components/Shared/PrimaryComponents/CometChatConfiguration/ConversationsWithMessagesConfiguration.js +++ b/src/components/Chats/CometChatConversationsWithMessages/ConversationswithMessagesConfiguration.js @@ -1,6 +1,6 @@ -import { ConversationsConfiguration } from "../"; -import { MessagesConfiguration } from "../../../../"; -import { ConversationsWithMessagesStyles } from "../../../Chats"; +import { ConversationsConfiguration } from "../../.."; +import { MessagesConfiguration } from "../../../"; +import { ConversationsWithMessagesStyle } from "../"; /** * @class ConversationsWithMessagesConfiguration @@ -11,12 +11,12 @@ import { ConversationsWithMessagesStyles } from "../../../Chats"; */ class ConversationsWithMessagesConfiguration { constructor({ - style = new ConversationsWithMessagesStyles({}), + style = new ConversationsWithMessagesStyle({}), isMobileView = false, conversationsConfiguration = new ConversationsConfiguration({}), messagesConfiguration = new MessagesConfiguration({}), }) { - this.style = new ConversationsWithMessagesStyles(style ?? {}); + this.style = new ConversationsWithMessagesStyle(style ?? {}); this.isMobileView = isMobileView; this.conversationsConfiguration = new ConversationsConfiguration( conversationsConfiguration ?? {} diff --git a/src/components/Chats/CometChatConversationsWithMessages/index.js b/src/components/Chats/CometChatConversationsWithMessages/index.js index 60ee36a6..7d8c2f46 100644 --- a/src/components/Chats/CometChatConversationsWithMessages/index.js +++ b/src/components/Chats/CometChatConversationsWithMessages/index.js @@ -1,19 +1,19 @@ -import React, { useRef, useState } from "react" +import React, { useRef, useState } from "react"; import PropTypes from "prop-types"; import * as styles from "./style"; import { CometChatConversations } from "../CometChatConversations"; import { - ConversationsWithMessagesStyles, - ConversationsStyles + ConversationsWithMessagesStyles, + ConversationsStyle, } from "../../Chats"; import { - ConversationsConfiguration, - MessagesConfiguration, - CometChatMessages, - CometChatTheme, - CometChatDecoratorMessage, - localize, - fontHelper + ConversationsConfiguration, + MessagesConfiguration, + CometChatMessages, + CometChatTheme, + CometChatDecoratorMessage, + localize, + fontHelper, } from "../../../"; import { Hooks } from "./hooks"; import { CometChat } from "@cometchat-pro/chat"; @@ -28,186 +28,219 @@ import { CometChat } from "@cometchat-pro/chat"; */ const CometChatConversationsWithMessages = (props) => { - /** - * Props destructuring - */ - const { - user, - group, - - messageText, - style, - isMobileView, - conversationsConfiguration, - messagesConfiguration, - theme - } = props; - - /** - * Component internal state - */ - const [activeConversation, setActiveConversation] = useState(null) - const conversationRef = useRef(); - - /** - * Component private scoping - */ - const _conversationsConfiguration = new ConversationsConfiguration(conversationsConfiguration ?? {}); - const _messagesConfiguration = new MessagesConfiguration(messagesConfiguration ?? {}); - const _theme = new CometChatTheme(theme ?? {}); - - /** - * Component internal handlers/methods - */ - const onConversationClickHandler = (data) => { - setActiveConversation(data); + /** + * Props destructuring + */ + const { + user, + group, + + messageText, + style, + isMobileView, + conversationsConfiguration, + messagesConfiguration, + theme, + } = props; + + /** + * Component internal state + */ + const [activeConversation, setActiveConversation] = useState(null); + const conversationRef = useRef(); + + /** + * Component private scoping + */ + const _conversationsConfiguration = new ConversationsConfiguration( + conversationsConfiguration ?? {} + ); + const _messagesConfiguration = new MessagesConfiguration( + messagesConfiguration ?? {} + ); + const _theme = new CometChatTheme(theme ?? {}); + + /** + * Component internal handlers/methods + */ + const onConversationClickHandler = (data) => { + setActiveConversation(data); + }; + + const updateMessageList = (conversation, activeConversation) => { + if ( + activeConversation?.conversationWith?.uid == + conversation?.conversationWith?.uid + ) { + setActiveConversation(null); + } else if ( + activeConversation?.conversationWith?.guid == + conversation?.conversationWith?.guid + ) { + setActiveConversation(null); + } else { + return; } - - const updateMessageList = (conversation, activeConversation) => { - if (activeConversation?.conversationWith?.uid == conversation?.conversationWith?.uid) { - setActiveConversation(null) - } else if (activeConversation?.conversationWith?.guid == conversation?.conversationWith?.guid) { - setActiveConversation(null) - } else { - return - } - } - - const backButtonClickHandler = () => { - setActiveConversation(null); + }; + + const backButtonClickHandler = () => { + setActiveConversation(null); + }; + + /** + * Component hooks + */ + Hooks( + onConversationClickHandler, + updateMessageList, + backButtonClickHandler, + conversationRef, + activeConversation + ); + + /** + * Component template scoping + */ + const ConversationsBar = ( + + ); + + /** + * If User or Group changes then prioritize it as props to CometChatMessages + */ + let _user = activeConversation?.conversationWith?.uid + ? activeConversation?.conversationWith + : null; + let _group = activeConversation?.conversationWith?.guid + ? activeConversation?.conversationWith + : null; + + if (user) _user = user; + if (group) _group = group; + let id; + if (_user) id = _user.uid; if (_group) id = _group.guid; + + + const MessagesBar = ( + + ); + + const getTemplate = () => { + if (isMobileView && (activeConversation || _user || _group)) { + return MessagesBar; + } else if (isMobileView && !(activeConversation || _user || _group)) { + return ConversationsBar; + } else if (!isMobileView && !(activeConversation || _user || _group)) { + return ( + <> + {ConversationsBar} + + + ); + } else if (!isMobileView && (activeConversation || _user || _group)) { + return ( + <> + {ConversationsBar} + {MessagesBar} + + ); } - - - /** - * Component hooks - */ - Hooks( - onConversationClickHandler, - updateMessageList, - backButtonClickHandler, - conversationRef, - activeConversation - ); - - /** - * Component template scoping - */ - const ConversationsBar = ( - - ); - - /** - * If User or Group changes then prioritize it as props to CometChatMessages - */ - let _user = activeConversation?.conversationWith?.uid ? activeConversation?.conversationWith : null; - let _group = activeConversation?.conversationWith?.guid ? activeConversation?.conversationWith : null; - - if (user) _user = user; - if (group) _group = group; - - const MessagesBar = ( - - ); - - const getTemplate = () => { - if (isMobileView && (activeConversation || _user || _group)) { - return MessagesBar; - } else if (isMobileView && !(activeConversation || _user || _group)) { - return ConversationsBar; - } else if (!isMobileView && !(activeConversation || _user || _group)) { - return ( - <> - {ConversationsBar} - - - ); - } else if (!isMobileView && (activeConversation || _user || _group)) { - return ( - <> - {ConversationsBar} - {MessagesBar} - - ); - } - } - - /** - * Component template - */ - return ( -
- {getTemplate()} -
- ) + }; + + /** + * Component template + */ + return ( +
+ {getTemplate()} +
+ ); }; /** * Component default props types values */ CometChatConversationsWithMessages.defaultProps = { - messageText: "", - user: null, - group: null, + messageText: "", + user: null, + group: null, }; /** * Component default props types */ CometChatConversationsWithMessages.propTypes = { - user: PropTypes.object, - group: PropTypes.object, - isMobileView: PropTypes.bool, - messageText: PropTypes.string, - conversationsConfiguration: PropTypes.object, - messagesConfiguration: PropTypes.object, - theme: PropTypes.object, - style: PropTypes.object, + user: PropTypes.object, + group: PropTypes.object, + isMobileView: PropTypes.bool, + messageText: PropTypes.string, + conversationsConfiguration: PropTypes.object, + messagesConfiguration: PropTypes.object, + theme: PropTypes.object, + style: PropTypes.object, }; -export { CometChatConversationsWithMessages }; \ No newline at end of file +export { CometChatConversationsWithMessages }; diff --git a/src/components/Chats/ConversationListCustomView.js b/src/components/Chats/ConversationListCustomView.js index 49a4dc55..6c686f76 100644 --- a/src/components/Chats/ConversationListCustomView.js +++ b/src/components/Chats/ConversationListCustomView.js @@ -5,7 +5,7 @@ * @param {any} empty * @param {any} error */ -class ConversationListCustomView { + class ConversationListCustomView { constructor({ loading = "", empty = "", diff --git a/src/components/Chats/InputData/index.js b/src/components/Chats/InputData/index.js index 72890953..adaa81d8 100644 --- a/src/components/Chats/InputData/index.js +++ b/src/components/Chats/InputData/index.js @@ -6,7 +6,7 @@ * @param {boolean} title * @param {Function} subtitle */ -class InputData { + class InputData { constructor({ id = "", thumbnail = true, diff --git a/src/components/Chats/index.js b/src/components/Chats/index.js index 3cc67c87..d8536daa 100644 --- a/src/components/Chats/index.js +++ b/src/components/Chats/index.js @@ -2,27 +2,36 @@ import { CometChatConversationList } from "./CometChatConversationList"; import { CometChatConversations } from "./CometChatConversations"; import { CometChatConversationEvents } from "./CometChatConversationEvents"; import { conversationType } from "./conversationType"; -import { ConversationInputData } from "./ConversationInputData" +import { ConversationInputData } from "./ConversationInputData"; import { CometChatConversationOptions } from "./CometChatConversationOptions"; import { CometChatConversationsWithMessages } from "./CometChatConversationsWithMessages"; /** * Styles */ -import { ConversationsWithMessagesStyles } from "./CometChatConversationsWithMessages/ConversationsWithMessagesStyles"; -import { ConversationsStyles } from "./CometChatConversations/ConversationsStyles"; -import { ConversationListStyles } from "./CometChatConversationList/ConversationListStyles"; +import { ConversationsWithMessagesStyle } from "./CometChatConversationsWithMessages/ConversationsWithMessagesStyle"; +import { ConversationsStyle } from "./CometChatConversations/ConversationsStyle"; +import { ConversationListStyle } from "./CometChatConversationList/ConversationListStyle"; -export { - CometChatConversationsWithMessages, - CometChatConversations, - CometChatConversationList, - CometChatConversationEvents, - conversationType, - ConversationInputData, - CometChatConversationOptions, +/** + * Configurations + */ +import { ConversationsConfiguration } from "./CometChatConversations/ConversationsConfiguration"; +import { ConversationsWithMessagesConfiguration } from "./CometChatConversationsWithMessages/ConversationsWithMessagesConfiguration"; +import { ConversationListConfiguration } from "./CometChatConversationList/ConversationListConfiguration"; - ConversationsWithMessagesStyles, - ConversationsStyles, - ConversationListStyles -}; \ No newline at end of file +export { + CometChatConversationsWithMessages, + CometChatConversations, + CometChatConversationList, + CometChatConversationEvents, + conversationType, + ConversationInputData, + CometChatConversationOptions, + ConversationsWithMessagesStyle, + ConversationsStyle, + ConversationListStyle, + ConversationsConfiguration, + ConversationsWithMessagesConfiguration, + ConversationListConfiguration, +}; diff --git a/src/components/Groups/CometChatCreateGroup/CreateGroupConfiguration.js b/src/components/Groups/CometChatCreateGroup/CreateGroupConfiguration.js index 01387df7..651a7a97 100644 --- a/src/components/Groups/CometChatCreateGroup/CreateGroupConfiguration.js +++ b/src/components/Groups/CometChatCreateGroup/CreateGroupConfiguration.js @@ -1,4 +1,4 @@ -import { CreateGroupStyles } from "./CreateGroupStyles"; +import { CreateGroupStyle } from "./CreateGroupStyle"; import closeIcon from "./resources/close.svg"; /** @@ -12,17 +12,17 @@ import closeIcon from "./resources/close.svg"; * @param {object} style */ export class CreateGroupConfiguration { - constructor({ - hideCloseButton = false, - closeButtonIconURL = closeIcon, - onClose = null, - onCreateGroup = null, - style = new CreateGroupStyles({}), - }) { - this.hideCloseButton = hideCloseButton; - this.closeButtonIconURL = closeButtonIconURL; - this.onClose = onClose; - this.onCreateGroup = onCreateGroup; - this.style = new CreateGroupStyles(style || {}); - } + constructor({ + hideCloseButton = false, + closeButtonIconURL = closeIcon, + onClose = null, + onCreateGroup = null, + style = new CreateGroupStyle({}), + }) { + this.hideCloseButton = hideCloseButton; + this.closeButtonIconURL = closeButtonIconURL; + this.onClose = onClose; + this.onCreateGroup = onCreateGroup; + this.style = new CreateGroupStyle(style || {}); + } } diff --git a/src/components/Groups/CometChatCreateGroup/CreateGroupStyle.js b/src/components/Groups/CometChatCreateGroup/CreateGroupStyle.js new file mode 100644 index 00000000..1f7e90c1 --- /dev/null +++ b/src/components/Groups/CometChatCreateGroup/CreateGroupStyle.js @@ -0,0 +1,115 @@ +import { BaseStyles } from "../../Shared"; + +/** + * @class CreateGroupStyle + * @description CreateGroupStyle class is used for defining the styles for CreateGroup component + * @param {string} width + * @param {string} height + * @param {string} background + * @param {string} border + * @param {string} borderRadius + * @param {string} boxShadow + * @param {string} closeIconTint + * @param {string} titleTextFont + * @param {string} titleTextColor + * @param {string} errorTextFont + * @param {string} errorTextBackground + * @param {string} errorTextBorderRadius + * @param {string} errorTextBorder + * @param {string} errorTextColor + * @param {string} groupTypeTextFont + * @param {string} groupTypeTextColor + * @param {string} groupTypeTextBackground + * @param {string} groupTypeTextActiveBackground + * @param {string} namePlaceholderTextFont + * @param {string} namePlaceholderTextColor + * @param {string} nameInputBackground + * @param {string} nameInputBorder + * @param {string} nameInputBorderRadius + * @param {string} nameInputBoxShadow + * @param {string} passwordPlaceholderTextFont + * @param {string} passwordPlaceholderTextColor + * @param {string} passwordInputBackground + * @param {string} passwordInputBorder + * @param {string} passwordInputBorderRadius + * @param {string} passwordInputBoxShadow + * @param {string} createGroupButtonTextFont + * @param {string} createGroupButtonTextColor + * @param {string} createGroupButtonBackground + * @param {string} createGroupButtonBorderRadius + */ +export class CreateGroupStyle extends BaseStyles { + constructor({ + width = "", + height = "", + background = "", + border = "", + borderRadius = "", + boxShadow = "", + closeIconTint = "", + titleTextFont = "", + titleTextColor = "", + errorTextFont = "", + errorTextBackground = "", + errorTextBorderRadius = "", + errorTextBorder = "", + errorTextColor = "", + groupTypeTextFont = "", + groupTypeTextColor = "", + groupTypeTextBackground = "", + groupTypeTextActiveBackground = "", + namePlaceholderTextFont = "", + namePlaceholderTextColor = "", + nameInputBackground = "", + nameInputBorder = "", + nameInputBorderRadius = "", + nameInputBoxShadow = "", + passwordPlaceholderTextFont = "", + passwordPlaceholderTextColor = "", + passwordInputBackground = "", + passwordInputBorder = "", + passwordInputBorderRadius = "", + passwordInputBoxShadow = "", + createGroupButtonTextFont = "", + createGroupButtonTextColor = "", + createGroupButtonBackground = "", + createGroupButtonBorderRadius = "", + }) { + super({ + width, + height, + background, + border, + borderRadius, + }); + this.boxShadow = boxShadow; + this.closeIconTint = closeIconTint; + this.titleTextFont = titleTextFont; + this.titleTextColor = titleTextColor; + this.errorTextFont = errorTextFont; + this.errorTextBackground = errorTextBackground; + this.errorTextBorderRadius = errorTextBorderRadius; + this.errorTextBorder = errorTextBorder; + this.errorTextColor = errorTextColor; + this.groupTypeTextFont = groupTypeTextFont; + this.groupTypeTextColor = groupTypeTextColor; + this.groupTypeTextBackground = groupTypeTextBackground; + this.groupTypeTextActiveBackground = groupTypeTextActiveBackground; + this.namePlaceholderTextFont = namePlaceholderTextFont; + this.namePlaceholderTextColor = namePlaceholderTextColor; + this.nameInputBackground = nameInputBackground; + this.nameInputBorder = nameInputBorder; + this.nameInputBorderRadius = nameInputBorderRadius; + this.nameInputBoxShadow = nameInputBoxShadow; + this.passwordPlaceholderTextFont = passwordPlaceholderTextFont; + this.passwordPlaceholderTextColor = passwordPlaceholderTextColor; + this.passwordInputBackground = passwordInputBackground; + this.passwordInputBorder = passwordInputBorder; + this.passwordInputBorderRadius = passwordInputBorderRadius; + this.passwordInputBoxShadow = passwordInputBoxShadow; + this.createGroupButtonTextFont = createGroupButtonTextFont; + this.createGroupButtonTextColor = createGroupButtonTextColor; + this.createGroupButtonBackground = createGroupButtonBackground; + this.createGroupButtonBorderRadius = createGroupButtonBorderRadius; + } +} diff --git a/src/components/Groups/CometChatCreateGroup/CreateGroupStyles.js b/src/components/Groups/CometChatCreateGroup/CreateGroupStyles.js deleted file mode 100644 index a7c9d2c6..00000000 --- a/src/components/Groups/CometChatCreateGroup/CreateGroupStyles.js +++ /dev/null @@ -1,115 +0,0 @@ -import { BaseStyles } from "../../Shared"; - -/** - * @class CreateGroupStyles - * @description CreateGroupStyles class is used for defining the styles for CreateGroup component - * @param {string}width - * @param {string} height - * @param {string} background - * @param {string} border - * @param {string} borderRadius - * @param {string} boxShadow - * @param {string} closeIconTint - * @param {string} titleTextFont - * @param {string} titleTextColor - * @param {string} errorTextFont - * @param {string} errorTextBackground - * @param {string} errorTextBorderRadius - * @param {string} errorTextBorder - * @param {string} errorTextColor - * @param {string} groupTypeTextFont - * @param {string} groupTypeTextColor - * @param {string} groupTypeTextBackground - * @param {string} groupTypeTextActiveBackground - * @param {string} namePlaceholderTextFont - * @param {string} namePlaceholderTextColor - * @param {string} nameInputBackground - * @param {string} nameInputBorder - * @param {string} nameInputBorderRadius - * @param {string} nameInputBoxShadow - * @param {string} passwordPlaceholderTextFont - * @param {string} passwordPlaceholderTextColor - * @param {string} passwordInputBackground - * @param {string} passwordInputBorder - * @param {string} passwordInputBorderRadius - * @param {string} passwordInputBoxShadow - * @param {string} createGroupButtonTextFont - * @param {string} createGroupButtonTextColor - * @param {string} createGroupButtonBackground - * @param {string} createGroupButtonBorderRadius - */ -export class CreateGroupStyles extends BaseStyles { - constructor({ - width = "", - height = "", - background = "", - border = "", - borderRadius = "", - boxShadow = "", - closeIconTint = "", - titleTextFont = "", - titleTextColor = "", - errorTextFont = "", - errorTextBackground = "", - errorTextBorderRadius = "", - errorTextBorder = "", - errorTextColor = "", - groupTypeTextFont = "", - groupTypeTextColor = "", - groupTypeTextBackground = "", - groupTypeTextActiveBackground = "", - namePlaceholderTextFont = "", - namePlaceholderTextColor = "", - nameInputBackground = "", - nameInputBorder = "", - nameInputBorderRadius = "", - nameInputBoxShadow = "", - passwordPlaceholderTextFont = "", - passwordPlaceholderTextColor = "", - passwordInputBackground = "", - passwordInputBorder = "", - passwordInputBorderRadius = "", - passwordInputBoxShadow = "", - createGroupButtonTextFont = "", - createGroupButtonTextColor = "", - createGroupButtonBackground = "", - createGroupButtonBorderRadius = "", - }) { - super({ - width, - height, - background, - border, - borderRadius, - }); - this.boxShadow = boxShadow; - this.closeIconTint = closeIconTint; - this.titleTextFont = titleTextFont; - this.titleTextColor = titleTextColor; - this.errorTextFont = errorTextFont; - this.errorTextBackground = errorTextBackground; - this.errorTextBorderRadius = errorTextBorderRadius; - this.errorTextBorder = errorTextBorder; - this.errorTextColor = errorTextColor; - this.groupTypeTextFont = groupTypeTextFont; - this.groupTypeTextColor = groupTypeTextColor; - this.groupTypeTextBackground = groupTypeTextBackground; - this.groupTypeTextActiveBackground = groupTypeTextActiveBackground; - this.namePlaceholderTextFont = namePlaceholderTextFont; - this.namePlaceholderTextColor = namePlaceholderTextColor; - this.nameInputBackground = nameInputBackground; - this.nameInputBorder = nameInputBorder; - this.nameInputBorderRadius = nameInputBorderRadius; - this.nameInputBoxShadow = nameInputBoxShadow; - this.passwordPlaceholderTextFont = passwordPlaceholderTextFont; - this.passwordPlaceholderTextColor = passwordPlaceholderTextColor; - this.passwordInputBackground = passwordInputBackground; - this.passwordInputBorder = passwordInputBorder; - this.passwordInputBorderRadius = passwordInputBorderRadius; - this.passwordInputBoxShadow = passwordInputBoxShadow; - this.createGroupButtonTextFont = createGroupButtonTextFont; - this.createGroupButtonTextColor = createGroupButtonTextColor; - this.createGroupButtonBackground = createGroupButtonBackground; - this.createGroupButtonBorderRadius = createGroupButtonBorderRadius; - } -} diff --git a/src/components/Groups/CometChatCreateGroup/index.js b/src/components/Groups/CometChatCreateGroup/index.js index 970e4ab2..3c9e9906 100644 --- a/src/components/Groups/CometChatCreateGroup/index.js +++ b/src/components/Groups/CometChatCreateGroup/index.js @@ -1,353 +1,354 @@ import React from "react"; import { CometChat } from "@cometchat-pro/chat"; -import { CreateGroupStyles } from "./CreateGroupStyles"; +import { CreateGroupStyle } from "./CreateGroupStyle"; import PropTypes from "prop-types"; import { - CometChatTheme, - GroupTypeConstants, - CometChatListItem, + CometChatTheme, + GroupTypeConstants, + CometChatListItem, } from "../../Shared"; import { GroupsConstants } from "../../Shared/Constants/UIKitConstants"; import { localize } from "../../Shared"; import { - createGroupWrapperStyle, - createGroupHeader, - createGroupTitleStyle, - closeIconStyle, - createGroupBodyStyle, - createGroupTabContainerStyle, - createGroupTabListStyle, - createGroupTabStyle, - createGroupInput, - createGroupInputName, - createGroupInputPassword, - nameInputStyle, - passwordInputStyle, - errorTextStyle, - errorIconStyle, - errorContainerStyle, - createGroupButton, - createButtonStyle, + createGroupWrapperStyle, + createGroupHeader, + createGroupTitleStyle, + closeIconStyle, + createGroupBodyStyle, + createGroupTabContainerStyle, + createGroupTabListStyle, + createGroupTabStyle, + createGroupInput, + createGroupInputName, + createGroupInputPassword, + nameInputStyle, + passwordInputStyle, + errorTextStyle, + errorIconStyle, + errorContainerStyle, + createGroupButton, + createButtonStyle, } from "./style"; import { CometChatGroupEvents } from "../CometChatGroupEvents"; import warningIcon from "./resources/warning.svg"; +import closeIconURL from "./resources/close.svg"; const CometChatCreateGroup = (props) => { - /** - * Destructuring Props - */ - const { - title, - namePlaceholderText, - passwordPlaceholderText, - hideCloseButton, - closeButtonIconURL, - createGroupButtonText, - onClose, - onCreateGroup, - style, - theme, - } = props; + /** + * Destructuring Props + */ + const { + title, + namePlaceholderText, + passwordPlaceholderText, + hideCloseButton, + closeButtonIconURL, + createGroupButtonText, + onClose, + onCreateGroup, + style, + theme, + } = props; - /** - * Setting Theme - */ - const _theme = new CometChatTheme(theme || {}); + /** + * Setting Theme + */ + const _theme = new CometChatTheme(theme || {}); - /** - * Internal States and properties - */ - const groupTypes = { - public: GroupTypeConstants.public, - private: GroupTypeConstants.private, - password: GroupTypeConstants.password, - }; - const [activeTab, setActiveTab] = React.useState(groupTypes.public); - const [showPasswordInput, setShowPasswordInput] = React.useState(false); - const [error, setError] = React.useState(null); - const [groupNameInput, setGroupNameInput] = React.useState(null); - const [passwordInput, setPasswordInput] = React.useState(null); + /** + * Internal States and properties + */ + const groupTypes = { + public: GroupTypeConstants.public, + private: GroupTypeConstants.private, + password: GroupTypeConstants.password, + }; + const [activeTab, setActiveTab] = React.useState(groupTypes.public); + const [showPasswordInput, setShowPasswordInput] = React.useState(false); + const [error, setError] = React.useState(null); + const [groupNameInput, setGroupNameInput] = React.useState(null); + const [passwordInput, setPasswordInput] = React.useState(null); - /** - * Reset Create Group form - */ - const resetGroupData = () => { - setError(null); - setShowPasswordInput(false); - setGroupNameInput(null); - setPasswordInput(null); - setActiveTab(null); - }; + /** + * Reset Create Group form + */ + const resetGroupData = () => { + setError(null); + setShowPasswordInput(false); + setGroupNameInput(null); + setPasswordInput(null); + setActiveTab(null); + }; - /** - * - * @param {*} errorCode Emits an error event to handle the error occured - */ - const errorHandler = (errorCode) => { - CometChatGroupEvents.emit(CometChatGroupEvents.onGroupError, errorCode); - }; + /** + * + * @param {*} errorCode Emits an error event to handle the error occured + */ + const errorHandler = (errorCode) => { + CometChatGroupEvents.emit(CometChatGroupEvents.onGroupError, errorCode); + }; - /** - * - * @param {*} e - * set Group Name value - */ - const handleGroupNameChange = (e) => { - setGroupNameInput(e.target.value); - }; + /** + * + * @param {*} e + * set Group Name value + */ + const handleGroupNameChange = (e) => { + setGroupNameInput(e.target.value); + }; - /** - * - * @param {*} e - * set Group Password value - */ - const handlePasswordChange = (e) => { - setPasswordInput(e.target.value); - }; + /** + * + * @param {*} e + * set Group Password value + */ + const handlePasswordChange = (e) => { + setPasswordInput(e.target.value); + }; - /** - * When Tab is selected - */ - const onActiveTab = (type) => { - resetGroupData(); - setActiveTab(type); - setShowPasswordInput(type === groupTypes.password ? true : false); - }; + /** + * When Tab is selected + */ + const onActiveTab = (type) => { + resetGroupData(); + setActiveTab(type); + setShowPasswordInput(type === groupTypes.password ? true : false); + }; - /** - * Validates all the group details that were entered before creating the group - * @param - */ - const validate = () => { - if (!groupNameInput) { - setError(localize("GROUP_NAME_BLANK")); - return false; - } - if (!activeTab) { - setError(localize("GROUP_TYPE_BLANK")); - return false; - } - if (activeTab === groupTypes.password) { - if (!passwordInput) { - setError(localize("GROUP_PASSWORD_BLANK")); - return false; - } - } - return true; - }; + /** + * Validates all the group details that were entered before creating the group + * @param + */ + const validate = () => { + if (!groupNameInput) { + setError(localize("GROUP_NAME_BLANK")); + return false; + } + if (!activeTab) { + setError(localize("GROUP_TYPE_BLANK")); + return false; + } + if (activeTab === groupTypes.password) { + if (!passwordInput) { + setError(localize("GROUP_PASSWORD_BLANK")); + return false; + } + } + return true; + }; - /** - * Close create group screen - */ - const closeCreateGroupView = () => { - if (onClose) { - resetGroupData(); - onClose(); - } - }; + /** + * Close create group screen + */ + const closeCreateGroupView = () => { + if (onClose) { + resetGroupData(); + onClose(); + } + }; - /** - * - * @returns new group created by user - */ - const createGroup = () => { - if (!validate()) { - return false; - } - if (onCreateGroup) { - onCreateGroup(); - return false; - } + /** + * + * @returns new group created by user + */ + const createGroup = () => { + if (!validate()) { + return false; + } + if (onCreateGroup) { + onCreateGroup(); + return false; + } - let groupType = activeTab.trim(); - let password = passwordInput; - let guid = GroupsConstants.GROUP_ + new Date().getTime(); - let name = groupNameInput; - let type; - switch (groupType) { - case groupTypes.public: - type = groupTypes.public; - break; - case groupTypes.private: - type = groupTypes.private; - break; - case groupTypes.password: - type = groupTypes.password; - break; - default: - break; - } - let group = new CometChat.Group(guid, name, type, password); - CometChat.createGroup(group) - .then((group) => { - closeCreateGroupView(); - resetGroupData(); - CometChatGroupEvents.emit(CometChatGroupEvents.onGroupCreate, group); - }) - .catch((error) => { - errorHandler(error); - }); - }; + let groupType = activeTab.trim(); + let password = passwordInput; + let guid = GroupsConstants.GROUP_ + new Date().getTime(); + let name = groupNameInput; + let type; + switch (groupType) { + case groupTypes.public: + type = groupTypes.public; + break; + case groupTypes.private: + type = groupTypes.private; + break; + case groupTypes.password: + type = groupTypes.password; + break; + default: + break; + } + let group = new CometChat.Group(guid, name, type, password); + CometChat.createGroup(group) + .then((group) => { + closeCreateGroupView(); + resetGroupData(); + CometChatGroupEvents.emit(CometChatGroupEvents.onGroupCreate, group); + }) + .catch((error) => { + errorHandler(error); + }); + }; - return ( -
-
-

- {title} -

- {!hideCloseButton ? ( - - ) : null} -
-
-
-
- {Object.keys(groupTypes).map((tab) => { - return ( - - ); - })} -
-
-
-
- -
- {showPasswordInput ? ( -
- -
- ) : null} -
- {error ? ( -
-
- { - - } -
{error}
-
-
- ) : null} -
- -
-
-
- ); + return ( +
+
+

+ {title} +

+ {!hideCloseButton ? ( + + ) : null} +
+
+
+
+ {Object.keys(groupTypes).map((tab) => { + return ( + + ); + })} +
+
+
+
+ +
+ {showPasswordInput ? ( +
+ +
+ ) : null} +
+ {error ? ( +
+
+ { + + } +
{error}
+
+
+ ) : null} +
+ +
+
+
+ ); }; CometChatCreateGroup.defaultProps = { - title: localize("NEW__GROUP"), - namePlaceholderText: localize("ENTER_GROUP_NAME"), - passwordPlaceholderText: localize("ENTER_GROUP_PASSWORD"), - hideCloseButton: false, - closeButtonIconURL: "", - createGroupButtonText: localize("CREATE_GROUP"), - onClose: "", - onCreateGroup: "", - style: { - width: "", - height: "", - background: "", - border: "", - borderRadius: "", - boxShadow: "", - closeIconTint: "", - titleTextFont: "", - titleTextColor: "", - errorTextFont: "", - errorTextBackground: "", - errorTextBorderRadius: "", - errorTextBorder: "", - errorTextColor: "", - groupTypeTextFont: "", - groupTypeTextColor: "", - groupTypeTextBackground: "", - groupTypeTextActiveBackground: "", - namePlaceholderTextFont: "", - namePlaceholderTextColor: "", - nameInputBackground: "", - nameInputBorder: "", - nameInputBorderRadius: "", - nameInputBoxShadow: "", - passwordPlaceholderTextFont: "", - passwordPlaceholderTextColor: "", - passwordInputBackground: "", - passwordInputBorder: "", - passwordInputBorderRadius: "", - passwordInputBoxShadow: "", - createGroupButtonTextFont: "", - createGroupButtonTextColor: "", - createGroupButtonBackground: "", - createGroupButtonBorderRadius: "", - }, + title: localize("NEW__GROUP"), + namePlaceholderText: localize("ENTER_GROUP_NAME"), + passwordPlaceholderText: localize("ENTER_GROUP_PASSWORD"), + hideCloseButton: false, + closeButtonIconURL: closeIconURL, + createGroupButtonText: localize("CREATE_GROUP"), + onClose: "", + onCreateGroup: "", + style: { + width: "", + height: "", + background: "", + border: "", + borderRadius: "", + boxShadow: "", + closeIconTint: "", + titleTextFont: "", + titleTextColor: "", + errorTextFont: "", + errorTextBackground: "", + errorTextBorderRadius: "", + errorTextBorder: "", + errorTextColor: "", + groupTypeTextFont: "", + groupTypeTextColor: "", + groupTypeTextBackground: "", + groupTypeTextActiveBackground: "", + namePlaceholderTextFont: "", + namePlaceholderTextColor: "", + nameInputBackground: "", + nameInputBorder: "", + nameInputBorderRadius: "", + nameInputBoxShadow: "", + passwordPlaceholderTextFont: "", + passwordPlaceholderTextColor: "", + passwordInputBackground: "", + passwordInputBorder: "", + passwordInputBorderRadius: "", + passwordInputBoxShadow: "", + createGroupButtonTextFont: "", + createGroupButtonTextColor: "", + createGroupButtonBackground: "", + createGroupButtonBorderRadius: "", + }, }; CometChatCreateGroup.propTypes = { - title: PropTypes.string, - namePlaceholderText: PropTypes.string, - passwordPlaceholderText: PropTypes.string, - hideCloseButton: PropTypes.bool, - closeButtonIconURL: PropTypes.string, - createGroupButtonText: PropTypes.string, - onClose: PropTypes.func, - onCreateGroup: PropTypes.func, - style: PropTypes.object, + title: PropTypes.string, + namePlaceholderText: PropTypes.string, + passwordPlaceholderText: PropTypes.string, + hideCloseButton: PropTypes.bool, + closeButtonIconURL: PropTypes.string, + createGroupButtonText: PropTypes.string, + onClose: PropTypes.func, + onCreateGroup: PropTypes.func, + style: PropTypes.object, }; export { CometChatCreateGroup }; diff --git a/src/components/Groups/CometChatCreateGroup/style.js b/src/components/Groups/CometChatCreateGroup/style.js index a935abe3..94974fb9 100644 --- a/src/components/Groups/CometChatCreateGroup/style.js +++ b/src/components/Groups/CometChatCreateGroup/style.js @@ -1,216 +1,231 @@ import { fontHelper } from "../../Shared"; export const createGroupWrapperStyle = (style, theme) => { - return { - width: style?.width, - height: style?.height, - border: - style?.border || - `1px solid ${theme.palette.accent50[theme.palette.mode]}`, - boxShadow: - style.boxShadow || - `${theme.palette.accent50[theme.palette.mode]} 0 16px 32px, ${ - theme.palette.accent50[theme.palette.mode] - } 0 0 0 1px`, - background: - style?.background || theme.palette.background[theme.palette.mode], - borderRadius: style?.borderRadius, - overflow: "hidden", - position: "fixed", - margin: "0 auto", - cursor: "default", - }; + return { + width: style?.width || "100%", + height: style?.height || "100%", + border: + style?.border || + `1px solid ${theme.palette.accent50[theme.palette.mode]}`, + boxShadow: + style.boxShadow || + `${theme.palette.accent50[theme.palette.mode]} 0 16px 32px, ${ + theme.palette.accent50[theme.palette.mode] + } 0 0 0 1px`, + background: + style?.background || theme.palette.background[theme.palette.mode], + borderRadius: style?.borderRadius, + overflow: "hidden", + position: "fixed", + margin: "auto", + cursor: "default", + }; }; export const createGroupBodyStyle = () => { - return { - display: "flex", - flexDirection: "column", - position: "relative", - width: "100%", - height: "calc(100% - 65px)", - padding: "16px", - }; + return { + display: "flex", + flexDirection: "column", + position: "relative", + width: "100%", + height: "calc(100% - 65px)", + padding: "16px", + }; }; export const closeIconStyle = (style, img, theme) => { - return { - position: "absolute", - width: "24px", - height: "24px", - top: "3%", - right: "3%", - WebkitMask: `url(${img}) center center no-repeat`, - background: style.closeIconTint || theme?.palette?.getPrimary(), - cursor: "pointer", - }; + return { + position: "absolute", + width: "24px", + height: "24px", + top: "3%", + right: "3%", + WebkitMask: `url(${img}) center center no-repeat`, + background: style.closeIconTint || theme?.palette?.getPrimary(), + cursor: "pointer", + zIndex: 1, + }; }; export const createGroupHeader = () => { - return { - padding: "20px", - }; + return { + padding: "20px", + }; }; export const createGroupTitleStyle = (style, theme) => { - return { - margin: "0", - font: style.titleFont || fontHelper(theme.typography.heading), - color: style.titleColor || theme?.palette?.getAccent(), - textAlign: "center", - }; + return { + margin: "0", + font: style?.titleFont || fontHelper(theme?.typography?.heading), + color: style?.titleColor || theme?.palette?.getAccent(), + textAlign: "center", + }; }; export const createGroupTabContainerStyle = (style) => { - return { - borderRadius: "8px", - width: style?.width, - margin: "0", - }; -}; - -export const createGroupTabListStyle = (style) => { - return { - padding: "0", - borderRadius: "8px", - display: "flex", - alignItems: "center", - justifyContent: "center", - margin: "auto", - height: "inherit", - width: "inherit", - background: style?.groupTypeTextBackground, - }; + return { + borderRadius: "8px", + width: style?.width, + margin: "0", + }; +}; + +export const createGroupTabListStyle = (style, theme) => { + return { + height: "inherit", + width: "fit-content", + padding: "0", + borderRadius: "8px", + display: "flex", + alignItems: "center", + justifyContent: "center", + margin: "auto", + background: + style?.groupTypeTextBackground || theme?.palette?.getAccent100(), + font: + fontHelper(theme?.typography?.subtitle2) || "500 13px Inter,sans-serif", + color: theme?.palette?.getAccent() || "rgb(20,20,20)", + }; }; export const createGroupTabStyle = ( - style, - theme, - activeTab, - tab, - isHovering + style, + theme, + activeTab, + tab, + isHovering ) => { - let activeTabStyle; - if (activeTab === tab) { - activeTabStyle = { - background: style?.groupTypeTextActiveBackground, - height: "28px", - boxShadow: `${theme.palette.getAccent50()} 0px 0px 0px 1px`, - borderRadius: "8px", - }; - } - return { - width: "110px", - textFont: style?.groupTypeTextFont, - textColor: style?.groupTypeTextColor, - display: "flex", - alignItems: "center", - justifyContent: "center", - background: isHovering - ? style?.groupTypeTextActiveBackground - : "transparent", - ...activeTabStyle, - }; + let activeTabStyle; + if (activeTab === tab) { + activeTabStyle = { + background: + style?.groupTypeTextActiveBackground || theme?.palette?.getBackground(), + height: "28px", + boxShadow: `${theme?.palette?.getAccent50()} 0px 0px 0px 1px`, + borderRadius: "8px", + }; + } + return { + width: "110px", + textFont: style?.groupTypeTextFont, + textColor: style?.groupTypeTextColor, + display: "flex", + alignItems: "center", + justifyContent: "center", + background: isHovering + ? style?.groupTypeTextActiveBackground || theme?.palette?.getBackground() + : "transparent", + ...activeTabStyle, + }; }; export const createGroupInput = (style) => { - return { - width: style?.width, - border: "none", - outline: "none", - }; + return { + width: style?.width, + border: "none", + outline: "none", + }; }; export const createGroupInputName = () => { - return { - margin: "20px 0px 8px 0px", - padding: "4px 0px", - }; + return { + margin: "20px 0px 8px 0px", + padding: "4px 0px", + }; }; export const createGroupInputPassword = () => { - return { - padding: "4px 0px", - }; + return { + padding: "4px 0px", + }; }; export const nameInputStyle = (style, theme) => { - return { - background: style.nameInputBackground, - border: style.nameInputBorder, - borderRadius: style.nameInputBorderRadius || "8px", - boxShadow: style.nameInputBoxShadow, - width: style?.width, - height: "46px", - outline: "none", - padding: "6px 12px", - }; + return { + background: style?.nameInputBackground || theme?.palette?.getAccent50(), + border: style?.nameInputBorder || "none", + borderRadius: style?.nameInputBorderRadius || "8px", + boxShadow: + style?.nameInputBoxShadow || + `${theme?.palette?.getAccent50()} 0px 0px 0px 1px`, + width: style?.width, + height: "46px", + outline: "none", + padding: "6px 12px", + }; }; export const passwordInputStyle = (style, theme) => { - return { - background: style.passwordInputBackground, - border: style.passwordInputBorder, - borderRadius: style.passwordInputBorderRadius || "8px", - boxShadow: style.passInputBoxShadow, - width: style?.width, - height: "46px", - outline: "none", - padding: "6px 12px", - }; + return { + background: style?.passwordInputBackground || theme?.palette?.getAccent50(), + border: style?.passwordInputBorder || "none", + borderRadius: style?.passwordInputBorderRadius || "8px", + boxShadow: + style?.passInputBoxShadow || + `${theme?.palette?.getAccent50()} 0px 0px 0px 1px`, + width: style?.width, + height: "46px", + outline: "none", + padding: "6px 12px", + }; }; export const errorContainerStyle = (style, theme) => { - return { - width: style?.width, - padding: "10px 0px", - marginTop: "16px", - display: "flex", - justifyContent: "center", - alignItems: "center", - background: style.errorTextBackground || "rgba(255, 59, 48, 0.1)", - border: style?.errorTextBorder || "none", - borderRadius: style?.errorTextBorderRadius || "8px", - }; -}; - -export const errorIconStyle = () => { - return { - iconBackground: "RGB(255, 59, 48)", - iconTint: "white", - iconBackgroundWidth: "38px", - iconBackgroundHeight: "38px", - iconWidth: "24px", - iconHeight: "24px", - margin: "0px 12px", - }; + return { + width: style?.width, + padding: "10px 0px", + marginTop: "16px", + display: "flex", + justifyContent: "center", + alignItems: "center", + background: style?.errorTextBackground || "rgba(255, 59, 48, 0.1)", + border: style?.errorTextBorder || "none", + borderRadius: style?.errorTextBorderRadius || "8px", + }; +}; + +export const errorIconStyle = (theme) => { + return { + iconBackground: theme?.palette?.getError() || "RGB(255, 59, 48)", + iconTint: theme?.palette?.getBackground("light"), + iconBackgroundWidth: "38px", + iconBackgroundHeight: "38px", + iconWidth: "24px", + iconHeight: "24px", + margin: "0px 12px", + }; }; export const errorTextStyle = (style, theme) => { - return { - color: style?.errorTextColor || theme.palette.getError(), - font: style?.errorTextFont || fontHelper(theme.typography.text1), - }; + return { + color: style?.errorTextColor || theme?.palette?.getError(), + font: style?.errorTextFont || fontHelper(theme?.typography?.text1), + }; }; export const createGroupButton = (style) => { - return { - display: "inline-block", - width: "calc(100% - 30px)", - position: "absolute", - bottom: "0", - right: "0", - left: "0", - margin: "16px", - }; + return { + display: "inline-block", + width: "calc(100% - 30px)", + position: "absolute", + bottom: "0", + right: "0", + left: "0", + margin: "16px", + }; }; export const createButtonStyle = (style, theme) => { - return { - width: style?.width, - height: "46px", - outline: "0", - borderRadius: style.createGroupButtonBorderRadius || "8px", - font: style.createGroupButtonTextFont, - color: style.createGroupButtonTextColor, - background: style.createGroupButtonBackground, - }; + return { + width: style?.width, + height: "46px", + outline: "0", + borderRadius: style?.createGroupButtonBorderRadius || "8px", + font: + style?.createGroupButtonTextFont || fontHelper(theme?.typography?.title2), + color: + style?.createGroupButtonTextColor || + theme?.palette?.getAccent900("light"), + background: + style?.createGroupButtonBackground || theme?.palette?.getPrimary(), + border: "none", + }; }; diff --git a/src/components/Groups/CometChatGroupList/GroupListConfiguration.js b/src/components/Groups/CometChatGroupList/GroupListConfiguration.js index 2903b14e..fe8cb071 100644 --- a/src/components/Groups/CometChatGroupList/GroupListConfiguration.js +++ b/src/components/Groups/CometChatGroupList/GroupListConfiguration.js @@ -8,38 +8,40 @@ import { CustomView } from "../../Shared"; * @description GroupListConfiguration class is used for defining the GroupList template. * @param {number} limit * @param {string} searchKeyword - * @param {bool} joinedOnly + * @param {boolean} joinedOnly * @param {array} tags * @param {object} style - * @param {null} customView - * @param {null} hideError + * @param {object} customView + * @param {boolean} hideError * @param {string} loadingIconURL * @param {object} dataItemConfiguration */ export class GroupListConfiguration { - constructor({ - limit = 30, - searchKeyword = "", - joinedOnly = false, - tags = null, - loadingIconURL = loadingIcon, - style = new GroupListStyle({}), - customView = new CustomView({ - loading: "", - empty: "", - error: "", - }), - hideError = false, - dataItemConfiguration = new DataItemConfiguration({}), - }) { - this.limit = limit; - this.searchKeyword = searchKeyword; - this.joinedOnly = joinedOnly; - this.tags = tags; - this.loadingIconURL = loadingIconURL; - this.style = new GroupListStyle(style || {}); - this.customView = new GroupListStyle(customView || {}); - this.hideError = hideError; - this.dataItemConfiguration = new DataItemConfiguration(dataItemConfiguration || {}); - } + constructor({ + limit = 30, + searchKeyword = "", + joinedOnly = false, + tags = null, + loadingIconURL = loadingIcon, + style = new GroupListStyle({}), + customView = new CustomView({ + loading: "", + empty: "", + error: "", + }), + hideError = false, + dataItemConfiguration = new DataItemConfiguration({}), + }) { + this.limit = limit; + this.searchKeyword = searchKeyword; + this.joinedOnly = joinedOnly; + this.tags = tags; + this.loadingIconURL = loadingIconURL; + this.style = new GroupListStyle(style || {}); + this.customView = new GroupListStyle(customView || {}); + this.hideError = hideError; + this.dataItemConfiguration = new DataItemConfiguration( + dataItemConfiguration || {} + ); + } } diff --git a/src/components/Groups/CometChatGroups/GroupsConfiguration.js b/src/components/Groups/CometChatGroups/GroupsConfiguration.js index 1b97fa2e..db131cb9 100644 --- a/src/components/Groups/CometChatGroups/GroupsConfiguration.js +++ b/src/components/Groups/CometChatGroups/GroupsConfiguration.js @@ -1,46 +1,46 @@ import { CreateGroupConfiguration } from "../CometChatCreateGroup/CreateGroupConfiguration"; import { GroupListConfiguration } from "../CometChatGroupList/GroupListConfiguration"; -import { GroupsStyles } from "./GroupsStyles"; +import { GroupsStyle } from "./GroupsStyle"; import createGroupIcon from "./resources/create.svg"; import backButton from "./resources/back.svg"; import search from "./resources/search.svg"; /** * @class GroupsConfiguration - * @param {String} backButtonIconURL - * @param {Boolean} showBackButton - * @param {String} searchIconURL - * @param {Boolean} hideSearch - * @param {String} createGroupIconURL - * @param {Boolean} hideCreateGroup - * @param {Object} style - * @param {Object} groupListConfiguration - * @param {Object} createGroupConfiguration + * @param {string} backButtonIconURL + * @param {boolean} showBackButton + * @param {string} searchIconURL + * @param {boolean} hideSearch + * @param {string} createGroupIconURL + * @param {boolean} hideCreateGroup + * @param {object} style + * @param {object} groupListConfiguration + * @param {object} createGroupConfiguration */ class GroupsConfiguration { - constructor({ - backButtonIconURL = backButton, - showBackButton = false, - searchIconURL = search, - hideSearch = false, - createGroupIconURL = createGroupIcon, - hideCreateGroup = false, - style = new GroupsStyles({}), - groupListConfiguration = new GroupListConfiguration({}), - createGroupConfiguration = new CreateGroupConfiguration({}), - }) { - this.backButtonIconURL = backButtonIconURL; - this.showBackButton = showBackButton; - this.searchIconURL = searchIconURL; - this.hideSearch = hideSearch; - this.createGroupIconURL = createGroupIconURL; - this.hideCreateGroup = hideCreateGroup; - this.style = new GroupsStyles(style || {}); - groupListConfiguration = - groupListConfiguration || new GroupListConfiguration({}); - createGroupConfiguration = - createGroupConfiguration || new CreateGroupConfiguration({}); - } + constructor({ + backButtonIconURL = backButton, + showBackButton = false, + searchIconURL = search, + hideSearch = false, + createGroupIconURL = createGroupIcon, + hideCreateGroup = false, + style = new GroupsStyle({}), + groupListConfiguration = new GroupListConfiguration({}), + createGroupConfiguration = new CreateGroupConfiguration({}), + }) { + this.backButtonIconURL = backButtonIconURL; + this.showBackButton = showBackButton; + this.searchIconURL = searchIconURL; + this.hideSearch = hideSearch; + this.createGroupIconURL = createGroupIconURL; + this.hideCreateGroup = hideCreateGroup; + this.style = new GroupsStyle(style || {}); + this.groupListConfiguration = + groupListConfiguration || new GroupListConfiguration({}); + this.createGroupConfiguration = + createGroupConfiguration || new CreateGroupConfiguration({}); + } } export { GroupsConfiguration }; diff --git a/src/components/Groups/CometChatGroups/GroupsStyle.js b/src/components/Groups/CometChatGroups/GroupsStyle.js new file mode 100644 index 00000000..1b3d6fbe --- /dev/null +++ b/src/components/Groups/CometChatGroups/GroupsStyle.js @@ -0,0 +1,39 @@ +import { BaseStyles } from "../../Shared"; + +export class GroupsStyle extends BaseStyles { + constructor({ + width = "280px", + height = "", + background = "", + border = "", + borderRadius = "", + titleFont = "", + titleColor = "", + backIconTint = "", + createGroupIconTint = "", + searchBorder = "", + searchBorderRadius = "", + searchBackground = "", + searchTextFont = "", + searchTextColor = "", + searchIconTint = "", + }) { + super({ + width, + height, + background, + border, + borderRadius, + }); + this.titleFont = titleFont; + this.titleColor = titleColor; + this.backIconTint = backIconTint; + this.createGroupIconTint = createGroupIconTint; + this.searchBorder = searchBorder; + this.searchBorderRadius = searchBorderRadius; + this.searchBackground = searchBackground; + this.searchTextColor = searchTextColor; + this.searchTextFont = searchTextFont; + this.searchIconTint = searchIconTint; + } +} diff --git a/src/components/Groups/CometChatGroups/GroupsStyles.js b/src/components/Groups/CometChatGroups/GroupsStyles.js deleted file mode 100644 index 25247d3d..00000000 --- a/src/components/Groups/CometChatGroups/GroupsStyles.js +++ /dev/null @@ -1,40 +0,0 @@ -import { BaseStyles } from "../../Shared"; - -export class GroupsStyles extends BaseStyles { - constructor({ - width = "280px", - height = "", - background = "", - border = "", - borderRadius = "", - titleFont = "", - titleColor = "", - backIconTint = "", - createGroupIconTint = "", - searchBorder = "", - searchBorderRadius = "", - searchBackground = "", - searchTextFont = "", - searchTextColor = "", - searchIconTint = "" - }) { - super({ - width, - height, - background, - border, - borderRadius, - }) - this.titleFont = titleFont; - this.titleColor = titleColor; - this.backIconTint = backIconTint; - this.createGroupIconTint = createGroupIconTint; - this.searchBorder = searchBorder; - this.searchBorderRadius = searchBorderRadius; - this.searchBackground = searchBackground; - this.searchTextColor = searchTextColor; - this.searchTextFont = searchTextFont; - this.searchIconTint = searchIconTint - } - -} \ No newline at end of file diff --git a/src/components/Groups/CometChatGroups/index.js b/src/components/Groups/CometChatGroups/index.js index 7cd333ed..7cf8cd9e 100644 --- a/src/components/Groups/CometChatGroups/index.js +++ b/src/components/Groups/CometChatGroups/index.js @@ -2,11 +2,11 @@ import React from "react"; import PropTypes from "prop-types"; import { - CometChatListBase, - CometChatGroupList, - localize, - CometChatTheme, - CometChatPopover, + CometChatListBase, + CometChatGroupList, + localize, + CometChatTheme, + CometChatPopover, } from "../.."; import { CometChatGroupEvents } from "../.."; @@ -15,12 +15,12 @@ import { GroupListConfiguration } from "../../Groups/CometChatGroupList/GroupLis import { CreateGroupConfiguration } from "../../Groups/CometChatCreateGroup/CreateGroupConfiguration"; import { - containerStyle, - createGroupBtnStyle, - popOverForCreateGroup, - getListBaseStyle, - getListStyle, - getCreateGroupStyle, + containerStyle, + createGroupBtnStyle, + popOverForCreateGroup, + getListBaseStyle, + getListStyle, + getCreateGroupStyle, } from "./style"; import { CometChatCreateGroup } from "../CometChatCreateGroup"; @@ -37,218 +37,217 @@ import { CometChatCreateGroup } from "../CometChatCreateGroup"; */ const Groups = React.forwardRef((props, ref) => { - /** - * Destructuring Props - */ - const { - title, - searchPlaceholder, - activeGroup, - style, - createGroupIconURL, - backButtonIconURL, - searchIconURL, - showBackButtonURL, - hideCreateGroup, - hideSearch, - groupListConfiguration, - createGroupConfiguration, - theme, - } = props; - - - /** - * Component internal state - */ - const groupListRef = React.useRef(null); - const [searchInput, setSearchInput] = React.useState(""); - const [viewCreateGroup, setViewCreateGroup] = React.useState(false); - - const _theme = new CometChatTheme(theme || {}); - const _groupListConfiguration = - groupListConfiguration || new GroupListConfiguration({}); - - const _createGroupConfiguration = - createGroupConfiguration || new CreateGroupConfiguration({}); - - /** - * Public methods - */ - React.useImperativeHandle(ref, () => ({ - groupListRef: groupListRef.current, - })); - - /** - * Triggers addGroup method og groupList - * @param {*} group - */ - const updateGroup = (group) => { - if (groupListRef?.current) { - groupListRef.current.addGroup(group); - } - }; - - /** - * Listener when Group is created successfully - */ - CometChatGroupEvents.addListener( - CometChatGroupEvents.onGroupCreate, - "onGroupCreate", - updateGroup - ); - - /** - * Action to be performed when clicked on close icon of create group modal - */ - const closeCreateGroup = () => { - setViewCreateGroup(false); - }; - - /** - * Action to be performed when clicked on create Group icon - */ - const openCreateGroup = () => { - setViewCreateGroup(true); - }; - - /** - * - * @returns Create Group Modal View - */ - const showCreateGroup = () => { - return viewCreateGroup ? ( - - - - ) : null; - }; - - /** - * - * @returns Create group button - */ - const getCreateGroupButtonElem = () => { - if (!hideCreateGroup) { - return ( -
- ); - } - return null; - }; - - /** - * Handles search - * @param {*} searchText - */ - const searchHandler = (searchText) => { - setSearchInput(searchText); - }; - - /** - * Component Level Return - */ - return ( -
- {getCreateGroupButtonElem()} - - - - {showCreateGroup()} -
- ); + /** + * Destructuring Props + */ + const { + title, + searchPlaceholder, + activeGroup, + style, + createGroupIconURL, + backButtonIconURL, + searchIconURL, + showBackButtonURL, + hideCreateGroup, + hideSearch, + groupListConfiguration, + createGroupConfiguration, + theme, + } = props; + + /** + * Component internal state + */ + const groupListRef = React.useRef(null); + const [searchInput, setSearchInput] = React.useState(""); + const [viewCreateGroup, setViewCreateGroup] = React.useState(false); + + const _theme = new CometChatTheme(theme || {}); + const _groupListConfiguration = + groupListConfiguration || new GroupListConfiguration({}); + + const _createGroupConfiguration = + createGroupConfiguration || new CreateGroupConfiguration({}); + + /** + * Public methods + */ + React.useImperativeHandle(ref, () => ({ + groupListRef: groupListRef.current, + })); + + /** + * Triggers addGroup method og groupList + * @param {*} group + */ + const updateGroup = (group) => { + if (groupListRef?.current) { + groupListRef.current.addGroup(group); + } + }; + + /** + * Listener when Group is created successfully + */ + CometChatGroupEvents.addListener( + CometChatGroupEvents.onGroupCreate, + "onGroupCreate", + updateGroup + ); + + /** + * Action to be performed when clicked on close icon of create group modal + */ + const closeCreateGroup = () => { + setViewCreateGroup(false); + }; + + /** + * Action to be performed when clicked on create Group icon + */ + const openCreateGroup = () => { + setViewCreateGroup(true); + }; + + /** + * + * @returns Create Group Modal View + */ + const showCreateGroup = () => { + return viewCreateGroup ? ( + + + + ) : null; + }; + + /** + * + * @returns Create group button + */ + const getCreateGroupButtonElem = () => { + if (!hideCreateGroup) { + return ( +
+ ); + } + return null; + }; + + /** + * Handles search + * @param {*} searchText + */ + const searchHandler = (searchText) => { + setSearchInput(searchText); + }; + + /** + * Component Level Return + */ + return ( +
+ {getCreateGroupButtonElem()} + + + + {showCreateGroup()} +
+ ); }); /** * Default Props */ Groups.defaultProps = { - title: "Groups", - searchPlaceholder: "Search", - activeGroup: null, - style: { - width: "", - height: "", - border: "", - cornerRadius: "", - background: "", - titleFont: "", - titleColor: "", - backIconTint: "", - createGroupIconTint: "", - searchBorder: "", - searchBorderRadius: "", - searchBackground: "", - searchTextFont: "", - searchTextColor: "", - searchIconTint: "", - }, - createGroupIconURL: null, - backButtonIconURL: null, - searchIconURL: null, - showBackButton: false, - hideCreateGroup: false, - hideSearch: false, - groupListConfiguration: null, - createGroupConfiguration: null, + title: "Groups", + searchPlaceholder: "Search", + activeGroup: null, + style: { + width: "", + height: "", + border: "", + cornerRadius: "", + background: "", + titleFont: "", + titleColor: "", + backIconTint: "", + createGroupIconTint: "", + searchBorder: "", + searchBorderRadius: "", + searchBackground: "", + searchTextFont: "", + searchTextColor: "", + searchIconTint: "", + }, + createGroupIconURL: null, + backButtonIconURL: null, + searchIconURL: null, + showBackButton: false, + hideCreateGroup: false, + hideSearch: false, + groupListConfiguration: null, + createGroupConfiguration: null, }; /** * Props Types */ Groups.propTypes = { - title: PropTypes.string, - searchPlaceholder: PropTypes.string, - activeGroup: PropTypes.object, - style: PropTypes.object, - createGroupIconURL: PropTypes.string, - backButtonIconURL: PropTypes.string, - searchIconURL: PropTypes.string, - showBackButton: PropTypes.bool, - hideCreateGroup: PropTypes.bool, - hideSearch: PropTypes.bool, - groupListConfiguration: PropTypes.object, - createGroupConfiguration: PropTypes.object, + title: PropTypes.string, + searchPlaceholder: PropTypes.string, + activeGroup: PropTypes.object, + style: PropTypes.object, + createGroupIconURL: PropTypes.string, + backButtonIconURL: PropTypes.string, + searchIconURL: PropTypes.string, + showBackButton: PropTypes.bool, + hideCreateGroup: PropTypes.bool, + hideSearch: PropTypes.bool, + groupListConfiguration: PropTypes.object, + createGroupConfiguration: PropTypes.object, }; export const CometChatGroups = React.memo(Groups); diff --git a/src/components/Groups/CometChatGroups/style.js b/src/components/Groups/CometChatGroups/style.js index 635739fe..b07a30c5 100644 --- a/src/components/Groups/CometChatGroups/style.js +++ b/src/components/Groups/CometChatGroups/style.js @@ -1,185 +1,190 @@ import { CometChatLocalize } from "../.."; import { fontHelper } from "../.."; +import { CreateGroupStyle } from "../CometChatCreateGroup/CreateGroupStyle"; +import { PopoverStyle } from "../../Shared"; export const containerStyle = (style) => { - return { - width: style?.width, - height: style?.height, - display: "flex", - flexDirection: "row", - alignItems: "center", - justifyContent: "center", - position: "relative", - border: style.border, - }; + return { + width: style?.width, + height: style?.height, + display: "flex", + flexDirection: "row", + alignItems: "center", + justifyContent: "center", + position: "relative", + border: style.border, + }; }; export const createGroupBtnStyle = (style, createGroupIconURL, theme) => { - const direction = CometChatLocalize.isRTL() - ? { left: "16px" } - : { right: "16px" }; - return { - WebkitMask: `url(${createGroupIconURL}) no-repeat left center`, - backgroundColor: `${ - style.createGroupIconTint || theme?.palette?.getPrimary() - }`, - height: "24px", - width: "24px", - cursor: "pointer", - position: "absolute", - top: "7px", - ...direction, - }; + const direction = CometChatLocalize.isRTL() + ? { left: "16px" } + : { right: "16px" }; + return { + WebkitMask: `url(${createGroupIconURL}) no-repeat left center`, + backgroundColor: `${ + style.createGroupIconTint || theme?.palette?.getPrimary() + }`, + height: "24px", + width: "24px", + cursor: "pointer", + position: "absolute", + top: "7px", + ...direction, + }; }; export const popOverForCreateGroup = (theme) => { - return { - width: "360px", - height:"620px", - position: "fixed", - top: "50%", - left: "50%", - transform: "translate(-50%,-50%)", - boxShadow: `0 0 32px ${theme?.palette?.getAccent300()}`, - }; + return { + ...new PopoverStyle({ + width: "360px", + height: "620px", + background: "", + border: "", + borderRadius: "12px", + activeBackground: "", + boxShadow: `0 0 32px ${theme?.palette?.getAccent300()}`, + }), + transform: "translate(-50%,-50%)", + position: "fixed", + top: "50%", + left: "50%", + }; }; -export const getCreateGroupStyle = ( - _createGroupConfiguration, - theme -) => { - return { - width: _createGroupConfiguration.style.width || "100%", - height: _createGroupConfiguration.style.height || "100%", - background: - _createGroupConfiguration.style.background || - theme.palette.getBackground(), - border: _createGroupConfiguration.style.border || "none", - borderRadius: _createGroupConfiguration.style.borderRadius || "8px", - boxShadow: - _createGroupConfiguration.style.boxShadow || - `${theme.palette.getAccent50()} 0px 0px 0px 1px`, - closeIconTint: - _createGroupConfiguration.style.closeIconTint || - theme.palette.getPrimary(), - titleTextFont: - _createGroupConfiguration.style.titleTextFont || - fontHelper(theme.typography.heading), - titleTextColor: - _createGroupConfiguration.style.titleTextColor || - theme.palette.getAccent(), - errorTextBackground: - _createGroupConfiguration.style.errorTextBackground || - "rgba(255, 59, 48, 0.1)", - errorTextBorder: _createGroupConfiguration.style.errorTextBorder || "none", - errorTextBorderRadius: - _createGroupConfiguration.style.errorTextBorderRadius || "8px", - errorTextColor: - _createGroupConfiguration.style.errorTextColor || - theme.palette.getError(), - errorTextFont: - _createGroupConfiguration.style.errorTextFont || - fontHelper(theme.typography.text1), - groupTypeTextFont: - _createGroupConfiguration.style.groupTypeText || - fontHelper(theme.typography.text2), - groupTypeTextColor: - _createGroupConfiguration.style.groupTypeTextColor || - theme.palette.getAccent(), - groupTypeTextBackground: - _createGroupConfiguration.style.groupTypeBackground || - theme.palette.getAccent100(), - groupTypeTextActiveBackground: - _createGroupConfiguration.style.groupTypeTextActiveBackground || - theme.palette.getBackground(), - namePlaceholderTextFont: - _createGroupConfiguration.style.namePlaceholderTextFont || - fontHelper(theme.typography.subtitle1), - namePlaceholderTextColor: - _createGroupConfiguration.style.namePlaceholderTextColor || - theme.palette.getAccent(), - nameInputBackground: - _createGroupConfiguration.style.nameInputBackground || - theme.palette.getAccent50(), - nameInputBorder: _createGroupConfiguration.style.nameInputBorder || "none", - nameInputBorderRadius: - _createGroupConfiguration.style.nameInputBorderRadius || "8px", - nameInputBoxShadow: - _createGroupConfiguration.style.nameInputBoxShadow || - `${theme.palette.getAccent50()} 0px 0px 0px 1px`, - passwordPlaceholderTextFont: - _createGroupConfiguration.style.passwordPlaceholderTextFont || - fontHelper(theme.typography.subtitle1), - passwordPlaceholderTextColor: - _createGroupConfiguration.style.passwordPlaceholderTextColor || - theme.palette.getAccent(), - passwordInputBackground: - _createGroupConfiguration.style.passwordInputBackground || - theme.palette.getAccent50(), - passwordInputBorder: - _createGroupConfiguration.style.passwordInputBorder || "none", - passwordInputBorderRadius: - _createGroupConfiguration.style.passwordInputBorderRadius || "8px", - passwordInputBoxShadow: - _createGroupConfiguration.style.passwordInputBoxShadow || - `${theme.palette.getAccent50()} 0px 0px 0px 1px`, - createGroupButtonTextFont: - _createGroupConfiguration.style.createGroupButtonTextFont || - fontHelper(theme.typography.title2), - createGroupButtonTextColor: - _createGroupConfiguration.style.createGroupButtonTextColor || - theme.palette.getAccent900("light"), - createGroupButtonBackground: theme.palette.getPrimary(), - createGroupButtonBorderRadius: "8px", - }; +export const getCreateGroupStyle = (_createGroupConfiguration, theme) => { + return new CreateGroupStyle({ + width: _createGroupConfiguration.style.width || "100%", + height: _createGroupConfiguration.style.height || "100%", + background: + _createGroupConfiguration.style.background || + theme.palette.getBackground(), + border: _createGroupConfiguration.style.border || "none", + borderRadius: _createGroupConfiguration.style.borderRadius || "8px", + boxShadow: + _createGroupConfiguration.style.boxShadow || + `${theme.palette.getAccent50()} 0px 0px 0px 1px`, + closeIconTint: + _createGroupConfiguration.style.closeIconTint || + theme.palette.getPrimary(), + titleTextFont: + _createGroupConfiguration.style.titleTextFont || + fontHelper(theme.typography.heading), + titleTextColor: + _createGroupConfiguration.style.titleTextColor || + theme.palette.getAccent(), + errorTextBackground: + _createGroupConfiguration.style.errorTextBackground || + "rgba(255, 59, 48, 0.1)", + errorTextBorder: _createGroupConfiguration.style.errorTextBorder || "none", + errorTextBorderRadius: + _createGroupConfiguration.style.errorTextBorderRadius || "8px", + errorTextColor: + _createGroupConfiguration.style.errorTextColor || + theme.palette.getError(), + errorTextFont: + _createGroupConfiguration.style.errorTextFont || + fontHelper(theme.typography.text1), + groupTypeTextFont: + _createGroupConfiguration.style.groupTypeText || + fontHelper(theme.typography.text2), + groupTypeTextColor: + _createGroupConfiguration.style.groupTypeTextColor || + theme.palette.getAccent(), + groupTypeTextBackground: + _createGroupConfiguration.style.groupTypeBackground || + theme.palette.getAccent100(), + groupTypeTextActiveBackground: + _createGroupConfiguration.style.groupTypeTextActiveBackground || + theme.palette.getBackground(), + namePlaceholderTextFont: + _createGroupConfiguration.style.namePlaceholderTextFont || + fontHelper(theme.typography.subtitle1), + namePlaceholderTextColor: + _createGroupConfiguration.style.namePlaceholderTextColor || + theme.palette.getAccent(), + nameInputBackground: + _createGroupConfiguration.style.nameInputBackground || + theme.palette.getAccent50(), + nameInputBorder: _createGroupConfiguration.style.nameInputBorder || "none", + nameInputBorderRadius: + _createGroupConfiguration.style.nameInputBorderRadius || "8px", + nameInputBoxShadow: + _createGroupConfiguration.style.nameInputBoxShadow || + `${theme.palette.getAccent50()} 0px 0px 0px 1px`, + passwordPlaceholderTextFont: + _createGroupConfiguration.style.passwordPlaceholderTextFont || + fontHelper(theme.typography.subtitle1), + passwordPlaceholderTextColor: + _createGroupConfiguration.style.passwordPlaceholderTextColor || + theme.palette.getAccent(), + passwordInputBackground: + _createGroupConfiguration.style.passwordInputBackground || + theme.palette.getAccent50(), + passwordInputBorder: + _createGroupConfiguration.style.passwordInputBorder || "none", + passwordInputBorderRadius: + _createGroupConfiguration.style.passwordInputBorderRadius || "8px", + passwordInputBoxShadow: + _createGroupConfiguration.style.passwordInputBoxShadow || + `${theme.palette.getAccent50()} 0px 0px 0px 1px`, + createGroupButtonTextFont: + _createGroupConfiguration.style.createGroupButtonTextFont || + fontHelper(theme.typography.title2), + createGroupButtonTextColor: + _createGroupConfiguration.style.createGroupButtonTextColor || + theme.palette.getAccent900("light"), + createGroupButtonBackground: theme.palette.getPrimary(), + createGroupButtonBorderRadius: "8px", + }); }; export const getListBaseStyle = (style, theme) => { - return { - width: "100%", - height: "100%", - border: "0px none", - cornerRadius: style?.cornerRadius, - background: - style.background || theme.palette.background[theme.palette.mode], - titleFont: style?.titleFont || fontHelper(theme.typography.heading), - titleColor: style?.titleColor || theme?.palette?.getAccent(), - backIconTint: style?.backIconTint || theme?.palette?.getPrimary(), - searchBorder: - style?.searchBorder || - "1px solid " + theme.palette.accent50[theme.palette.mode], - searchCornerRadius: style?.searchCornerRadius || "8px", - searchBackground: - style?.searchBackground || theme.palette.accent50[theme.palette.mode], - searchTextColor: - style?.searchTextColor || theme.palette.accent500[theme.palette.mode], - searchIconTint: - style?.searchIconTint || theme.palette.accent500[theme.palette.mode], - searchTextFont: style?.searchTextFont || fontHelper(theme.typography.text1), - }; + return { + width: "100%", + height: "100%", + border: "0px none", + cornerRadius: style?.cornerRadius, + background: + style.background || theme.palette.background[theme.palette.mode], + titleFont: style?.titleFont || fontHelper(theme.typography.heading), + titleColor: style?.titleColor || theme?.palette?.getAccent(), + backIconTint: style?.backIconTint || theme?.palette?.getPrimary(), + searchBorder: + style?.searchBorder || + "1px solid " + theme.palette.accent50[theme.palette.mode], + searchCornerRadius: style?.searchCornerRadius || "8px", + searchBackground: + style?.searchBackground || theme.palette.accent50[theme.palette.mode], + searchTextColor: + style?.searchTextColor || theme.palette.accent500[theme.palette.mode], + searchIconTint: + style?.searchIconTint || theme.palette.accent500[theme.palette.mode], + searchTextFont: style?.searchTextFont || fontHelper(theme.typography.text1), + }; }; export const getListStyle = (_groupListConfiguration, theme) => { - return { - width: _groupListConfiguration.style.width || "100%", - height: _groupListConfiguration.style.height || "100%", - background: _groupListConfiguration.style.background || "transparent", - border: _groupListConfiguration.style.border || "0 none", - borderRadius: _groupListConfiguration.style.borderRadius || "0", - loadingIconTint: - _groupListConfiguration.style.loadingIconTint || - theme.palette.accent600[theme.palette.mode], - emptyTextFont: - _groupListConfiguration.style.emptyTextFont || - fontHelper(theme.typography.heading), - emptyTextColor: - _groupListConfiguration.style.emptyTextColor || - theme.palette.accent400[theme.palette.mode], - errorTextFont: - _groupListConfiguration.style.errorTextFont || - fontHelper(theme.typography.heading), - errorTextColor: - _groupListConfiguration.style.errorTextColor || - theme.palette.accent400[theme.palette.mode], - }; + return { + width: _groupListConfiguration.style.width || "100%", + height: _groupListConfiguration.style.height || "100%", + background: _groupListConfiguration.style.background || "transparent", + border: _groupListConfiguration.style.border || "0 none", + borderRadius: _groupListConfiguration.style.borderRadius || "0", + loadingIconTint: + _groupListConfiguration.style.loadingIconTint || + theme.palette.accent600[theme.palette.mode], + emptyTextFont: + _groupListConfiguration.style.emptyTextFont || + fontHelper(theme.typography.heading), + emptyTextColor: + _groupListConfiguration.style.emptyTextColor || + theme.palette.accent400[theme.palette.mode], + errorTextFont: + _groupListConfiguration.style.errorTextFont || + fontHelper(theme.typography.heading), + errorTextColor: + _groupListConfiguration.style.errorTextColor || + theme.palette.accent400[theme.palette.mode], + }; }; diff --git a/src/components/Groups/CometChatGroupsWithMessages/GroupsWithMessagesConfiguration.js b/src/components/Groups/CometChatGroupsWithMessages/GroupsWithMessagesConfiguration.js index 5f3a9a33..02db0747 100644 --- a/src/components/Groups/CometChatGroupsWithMessages/GroupsWithMessagesConfiguration.js +++ b/src/components/Groups/CometChatGroupsWithMessages/GroupsWithMessagesConfiguration.js @@ -1,35 +1,35 @@ import { GroupsConfiguration, MessagesConfiguration } from "../../../"; -import { GroupsWithMessagesStyles } from "../../Groups"; +import { GroupsWithMessagesStyle } from "../../Groups"; import { JoinProtectedGroupConfiguration } from "../CometChatJoinProtectedGroup/JoinProtectedGroupConfiguration"; /** * @class GroupsWithMessagesConfiguration - * @param {Object} style - * @param {Boolean} isMobileView - * @param {Object} groupsConfiguration - * @param {Object} MessagesConfiguration - * @param {Object} joinProtectedGroupConfiguration + * @param {object} style + * @param {boolean} isMobileView + * @param {object} groupsConfiguration + * @param {object} MessagesConfiguration + * @param {object} joinProtectedGroupConfiguration */ class GroupsWithMessagesConfiguration { - constructor({ - style = new GroupsWithMessagesStyles({}), - isMobileView = false, - groupsConfiguration = new GroupsConfiguration({}), - messagesConfiguration = new MessagesConfiguration({}), - joinProtectedGroupConfiguration = new JoinProtectedGroupConfiguration({}), - }) { - this.style = new GroupsWithMessagesStyles(style ?? {}); - this.isMobileView = isMobileView; - this.groupsConfiguration = new GroupsConfiguration( - groupsConfiguration ?? {} - ); - this.messagesConfiguration = new MessagesConfiguration( - messagesConfiguration ?? {} - ); - this.joinProtectedGroupConfiguration = new JoinProtectedGroupConfiguration( - joinProtectedGroupConfiguration ?? {} - ); - } + constructor({ + style = new GroupsWithMessagesStyle({}), + isMobileView = false, + groupsConfiguration = new GroupsConfiguration({}), + messagesConfiguration = new MessagesConfiguration({}), + joinProtectedGroupConfiguration = new JoinProtectedGroupConfiguration({}), + }) { + this.style = new GroupsWithMessagesStyle(style ?? {}); + this.isMobileView = isMobileView; + this.groupsConfiguration = new GroupsConfiguration( + groupsConfiguration ?? {} + ); + this.messagesConfiguration = new MessagesConfiguration( + messagesConfiguration ?? {} + ); + this.joinProtectedGroupConfiguration = new JoinProtectedGroupConfiguration( + joinProtectedGroupConfiguration ?? {} + ); + } } export { GroupsWithMessagesConfiguration }; diff --git a/src/components/Groups/CometChatGroupsWithMessages/GroupsWithMessagesStyle.js b/src/components/Groups/CometChatGroupsWithMessages/GroupsWithMessagesStyle.js new file mode 100644 index 00000000..344a65f1 --- /dev/null +++ b/src/components/Groups/CometChatGroupsWithMessages/GroupsWithMessagesStyle.js @@ -0,0 +1,36 @@ +import { BaseStyles } from "../../Shared/Base/BaseStyles"; +/** + * @class GroupsWithMessagesStyle + * @description GroupsWithMessagesStyle class is used for defining the styles for GroupsWithMessagesStyle. + * @param {String} width + * @param {String} height + * @param {String} background + * @param {String} border + * @param {String} borderRadius + * @param {String} messageTextColor + * @param {String} messageTextFont + */ + +class GroupsWithMessagesStyle extends BaseStyles { + constructor({ + width = "100vw", + height = "100vh", + background = "", + border = "", + borderRadius = "0", + messageTextColor = "", + messageTextFont = "", + }) { + super({ + width, + height, + background, + border, + borderRadius, + }); + + this.messageTextColor = messageTextColor; + this.messageTextFont = messageTextFont; + } +} +export { GroupsWithMessagesStyle }; diff --git a/src/components/Groups/CometChatGroupsWithMessages/GroupsWithMessagesStyles.js b/src/components/Groups/CometChatGroupsWithMessages/GroupsWithMessagesStyles.js deleted file mode 100644 index 4bb1b7fe..00000000 --- a/src/components/Groups/CometChatGroupsWithMessages/GroupsWithMessagesStyles.js +++ /dev/null @@ -1,37 +0,0 @@ -import { BaseStyles } from "../../Shared/Base/BaseStyles" -/** - * @class GroupsWithMessagesStyles - * @description GroupsWithMessagesStyles class is used for defining the styles for GroupsWithMessagesStyles. - * @param {String} width - * @param {String} height - * @param {String} background - * @param {String} border - * @param {String} borderRadius - * @param {String} messageTextColor - * @param {String} messageTextFont - */ - -class GroupsWithMessagesStyles extends BaseStyles { - - constructor({ - width = "100vw", - height = "100vh", - background = "", - border = "", - borderRadius = "0", - messageTextColor = "", - messageTextFont = "", - }) { - super({ - width, - height, - background, - border, - borderRadius - }); - - this.messageTextColor = messageTextColor; - this.messageTextFont = messageTextFont; - } -} -export { GroupsWithMessagesStyles } \ No newline at end of file diff --git a/src/components/Groups/CometChatGroupsWithMessages/index.js b/src/components/Groups/CometChatGroupsWithMessages/index.js index 6ac32cf4..a9c4d6d6 100644 --- a/src/components/Groups/CometChatGroupsWithMessages/index.js +++ b/src/components/Groups/CometChatGroupsWithMessages/index.js @@ -5,16 +5,16 @@ import { CometChatGroups } from "../CometChatGroups"; import { JoinProtectedGroupConfiguration } from "../CometChatJoinProtectedGroup/JoinProtectedGroupConfiguration"; import { CometChatJoinProtectedGroup } from "../CometChatJoinProtectedGroup"; import { CometChatGroupEvents } from "../../../"; -import { GroupsWithMessagesStyles } from "../../Groups"; + import { - GroupsConfiguration, - MessagesConfiguration, - CometChatMessages, - CometChatTheme, - CometChatDecoratorMessage, - localize, - fontHelper, - GroupTypeConstants, + GroupsConfiguration, + MessagesConfiguration, + CometChatMessages, + CometChatTheme, + CometChatDecoratorMessage, + localize, + fontHelper, + GroupTypeConstants, } from "../../../"; import { Hooks } from "./hooks"; import { CometChat } from "@cometchat-pro/chat"; @@ -28,240 +28,245 @@ import { CometChat } from "@cometchat-pro/chat"; * */ const CometChatGroupsWithMessages = (props) => { - /** - * Props destructuring - */ - const { - group, - messageText, - style, - isMobileView, - groupsConfiguration, - messagesConfiguration, - joinProtectedGroupConfiguration, - theme, - } = props; - - /** - * Component internal state - */ - const [activeGroup, setActiveGroup] = useState(null); - const [showJoinGroup, setShowJoinGroup] = useState(false); - const groupRef = useRef(); - let _group; + /** + * Props destructuring + */ + const { + group, + messageText, + style, + isMobileView, + groupsConfiguration, + messagesConfiguration, + joinProtectedGroupConfiguration, + theme, + } = props; - /** - * Component private scoping - */ - const _groupsConfiguration = new GroupsConfiguration( - groupsConfiguration ?? {} - ); - const _messagesConfiguration = new MessagesConfiguration( - messagesConfiguration ?? {} - ); - const _joinProtectedGroupConfiguration = new JoinProtectedGroupConfiguration(joinProtectedGroupConfiguration ?? {}) - const _theme = new CometChatTheme(theme ?? {}); + /** + * Component internal state + */ + const [activeGroup, setActiveGroup] = useState(null); + const [showJoinGroup, setShowJoinGroup] = useState(false); + const groupRef = useRef(); + let _group; - /** - * Component internal handlers/methods - */ - const onGroupClickHandler = (data) => { - setActiveGroup(data); - setShowJoinGroup(false); - checkHasJoined(data); - }; + /** + * Component private scoping + */ + const _groupsConfiguration = new GroupsConfiguration( + groupsConfiguration ?? {} + ); + const _messagesConfiguration = new MessagesConfiguration( + messagesConfiguration ?? {} + ); + const _joinProtectedGroupConfiguration = new JoinProtectedGroupConfiguration( + joinProtectedGroupConfiguration ?? {} + ); + const _theme = new CometChatTheme(theme ?? {}); - const backButtonClickHandler = () => { - setActiveGroup(null); - }; + /** + * Component internal handlers/methods + */ + const onGroupClickHandler = (data) => { + setActiveGroup(data); + setShowJoinGroup(false); + checkHasJoined(data); + }; - const onGroupJoinedHandler = (groupData) => { - setShowJoinGroup(false); - _group = groupData; - } + const backButtonClickHandler = () => { + setActiveGroup(null); + }; - /** - * Component hooks - */ - Hooks(onGroupClickHandler, backButtonClickHandler, groupRef, onGroupJoinedHandler); + const onGroupJoinedHandler = (groupData) => { + setShowJoinGroup(false); + _group = groupData; + }; + /** + * Component hooks + */ + Hooks( + onGroupClickHandler, + backButtonClickHandler, + groupRef, + onGroupJoinedHandler + ); - /** - *Checks if the loggedInUser is part of the group or not - */ - const checkHasJoined = (groupData) => { - if (groupData?.hasJoined) { - _group = groupData; - } else { - if (groupData?.type === GroupTypeConstants.public) { - joinGroup(groupData); - } else if (groupData?.type === GroupTypeConstants.password) { - setShowJoinGroup(true); - } - } - }; + /** + *Checks if the loggedInUser is part of the group or not + */ + const checkHasJoined = (groupData) => { + if (groupData?.hasJoined) { + _group = groupData; + } else { + if (groupData?.type === GroupTypeConstants.public) { + joinGroup(groupData); + } else if (groupData?.type === GroupTypeConstants.password) { + setShowJoinGroup(true); + } + } + }; - /** - * JoinGroup Method - */ - const joinGroup = (group) => { - let guid = group.guid; - let type = group.type; - + /** + * JoinGroup Method + */ + const joinGroup = (group) => { + let guid = group.guid; + let type = group.type; - CometChat.joinGroup(guid, type) - .then((response) => { - CometChatGroupEvents.emit( - CometChatGroupEvents.onGroupMemberJoin, - response - ); - }) - .catch((error) => { - CometChatGroupEvents.emit(CometChatGroupEvents.onGroupError, error); - - }); - }; + CometChat.joinGroup(guid, type) + .then((response) => { + CometChatGroupEvents.emit( + CometChatGroupEvents.onGroupMemberJoin, + response + ); + }) + .catch((error) => { + CometChatGroupEvents.emit(CometChatGroupEvents.onGroupError, error); + }); + }; - /** - * If protected Group launch joinGroup - * - */ - const joinGroupComponent = ( - - ); + /** + * If protected Group launch joinGroup + * + */ + const joinGroupComponent = ( + + ); - /** - * Component template scoping - */ - const GroupsBar = ( - - ); + /** + * Component template scoping + */ + const GroupsBar = ( + + ); - /** - * If Group changes then prioritize it as props to CometChatMessages - */ - _group = activeGroup?.guid ? activeGroup : null; + /** + * If Group changes then prioritize it as props to CometChatMessages + */ + _group = activeGroup?.guid ? activeGroup : null; - if (group) _group = group; - const MessagesBar = ( - - ); - const getTemplate = () => { - if (isMobileView && (activeGroup || _group)) { - return MessagesBar; - } else if (isMobileView && !(activeGroup || _group)) { - return GroupsBar; - } else if (!isMobileView && !(activeGroup || _group)) { - return ( - <> - {GroupsBar} - - - ); - } else if (!isMobileView && (activeGroup || _group)) { - return ( - <> - {GroupsBar} - {showJoinGroup ? joinGroupComponent : MessagesBar} - - ); - } - }; + if (group) _group = group; + const MessagesBar = ( + + ); + const getTemplate = () => { + if (isMobileView && (activeGroup || _group)) { + return showJoinGroup ? joinGroupComponent : MessagesBar; + } else if (isMobileView && !(activeGroup || _group)) { + return GroupsBar; + } else if (!isMobileView && !(activeGroup || _group)) { + return ( + <> + {GroupsBar} + + + ); + } else if (!isMobileView && (activeGroup || _group)) { + return ( + <> + {GroupsBar} + {showJoinGroup ? joinGroupComponent : MessagesBar} + + ); + } + }; - /** - * Component template - */ - return ( -
- {getTemplate()} -
- ); + /** + * Component template + */ + return ( +
+ {getTemplate()} +
+ ); }; /** * Component default props types values */ CometChatGroupsWithMessages.defaultProps = { - messageText: "", + messageText: "", }; /** * Component default props types */ CometChatGroupsWithMessages.propTypes = { - group: PropTypes.object, - isMobileView: PropTypes.bool, - messageText: PropTypes.string, - groupsConfiguration: PropTypes.object, - messagesConfiguration: PropTypes.object, - joinProtectedGroupConfiguration: PropTypes.object, - theme: PropTypes.object, - style: PropTypes.object, + group: PropTypes.object, + isMobileView: PropTypes.bool, + messageText: PropTypes.string, + groupsConfiguration: PropTypes.object, + messagesConfiguration: PropTypes.object, + joinProtectedGroupConfiguration: PropTypes.object, + theme: PropTypes.object, + style: PropTypes.object, }; -export { CometChatGroupsWithMessages }; \ No newline at end of file +export { CometChatGroupsWithMessages }; diff --git a/src/components/Groups/CometChatGroupsWithMessages/style.js b/src/components/Groups/CometChatGroupsWithMessages/style.js index f89c6aba..ca88a566 100644 --- a/src/components/Groups/CometChatGroupsWithMessages/style.js +++ b/src/components/Groups/CometChatGroupsWithMessages/style.js @@ -1,40 +1,70 @@ import { fontHelper } from "../../Shared"; +import { JoinProtectedGroupStyles } from "../CometChatJoinProtectedGroup/JoinProtectedGroupsStyle"; export const chatScreenStyle = (style) => { - return { - display: "flex", - height: "100vh", - width: "100vw", - border: `none `, - ...style, - }; + return { + display: "flex", + height: "100vh", + width: "100vw", + border: `none `, + ...style, + }; }; -export const joinProtectedGroupStyles = ( - theme, - joinGroupConfiguration -) => { - return { - width: joinGroupConfiguration?.style?.width || "100%", - height:joinGroupConfiguration?.style?.height || "100%", - boxShadow:joinGroupConfiguration?.style?.boxShadow || `${theme?.palette?.getAccent50()} 0px 0px 0px 1px`, - background:joinGroupConfiguration?.style?.background || theme.palette.getBackground(), - border: joinGroupConfiguration?.style?.border ||"none", - borderRadius:joinGroupConfiguration?.style?.borderRadius || "0px", - titleTextFont: joinGroupConfiguration?.style?.titleTextFont || fontHelper(theme?.typography?.heading), - titleTextColor:joinGroupConfiguration?.style?.titleTextColor || theme.palette.getAccent700(), - errorTextFont:joinGroupConfiguration?.style?.errorTextFont || fontHelper(theme.typography.text1), - errorTextColor: joinGroupConfiguration?.style?.errorTextColor || theme.palette.getError(), - passwordTextFont:joinGroupConfiguration?.style?.passwordTextFont || fontHelper(theme.typography.subtitle2), - passwordTextColor:joinGroupConfiguration?.style?.passwordTextColor || theme.palette.getAccent900(), - passwordPlaceholderTextFont:joinGroupConfiguration?.style?.passwordPlaceholderTextFont || fontHelper(theme.typography.subtitle1), - passwordPlaceholderTextColor: joinGroupConfiguration?.style?.passwordPlaceholderTextColor || theme.palette.getAccent(), - passwordInputBackground:joinGroupConfiguration?.style?.passwordInputBackground || theme.palette.getAccent50(), - passwordInputBorder:joinGroupConfiguration?.style?.passwordInputBorder || "none", - passwordInputBorderRadius:joinGroupConfiguration?.style?.passwordInputBorderRadius || "8px", - passwordInputBoxShadow:joinGroupConfiguration?.style?.passwordInputBoxShadow || `${theme.palette.getAccent50()} 0px 0px 0px 1px`, - joinButtonTextFont:joinGroupConfiguration?.style?.joinButtonTextFont || fontHelper(theme.typography.title2), - joinButtonTextColor:joinGroupConfiguration?.style?.joinButtonTextColor || theme.palette.getAccent900("light"), - joinButtonBackground:joinGroupConfiguration?.style?.joinButtonBackground || theme.palette.getPrimary(), - joinButtonBorderRadius:joinGroupConfiguration?.style?.joinButtonBorderRadius || "8px", - }; +export const joinProtectedGroupStyles = (theme, joinGroupConfiguration) => { + return new JoinProtectedGroupStyles({ + width: joinGroupConfiguration?.style?.width || "100%", + height: joinGroupConfiguration?.style?.height || "100%", + boxShadow: + joinGroupConfiguration?.style?.boxShadow || + `${theme?.palette?.getAccent50()} 0px 0px 0px 1px`, + background: + joinGroupConfiguration?.style?.background || + theme.palette.getBackground(), + border: joinGroupConfiguration?.style?.border || "none", + borderRadius: joinGroupConfiguration?.style?.borderRadius || "0px", + titleTextFont: + joinGroupConfiguration?.style?.titleTextFont || + fontHelper(theme?.typography?.heading), + titleTextColor: + joinGroupConfiguration?.style?.titleTextColor || + theme.palette.getAccent700(), + errorTextFont: + joinGroupConfiguration?.style?.errorTextFont || + fontHelper(theme.typography.text1), + errorTextColor: + joinGroupConfiguration?.style?.errorTextColor || theme.palette.getError(), + passwordTextFont: + joinGroupConfiguration?.style?.passwordTextFont || + fontHelper(theme.typography.subtitle2), + passwordTextColor: + joinGroupConfiguration?.style?.passwordTextColor || + theme.palette.getAccent900(), + passwordPlaceholderTextFont: + joinGroupConfiguration?.style?.passwordPlaceholderTextFont || + fontHelper(theme.typography.subtitle1), + passwordPlaceholderTextColor: + joinGroupConfiguration?.style?.passwordPlaceholderTextColor || + theme.palette.getAccent(), + passwordInputBackground: + joinGroupConfiguration?.style?.passwordInputBackground || + theme.palette.getAccent50(), + passwordInputBorder: + joinGroupConfiguration?.style?.passwordInputBorder || "none", + passwordInputBorderRadius: + joinGroupConfiguration?.style?.passwordInputBorderRadius || "8px", + passwordInputBoxShadow: + joinGroupConfiguration?.style?.passwordInputBoxShadow || + `${theme.palette.getAccent50()} 0px 0px 0px 1px`, + joinButtonTextFont: + joinGroupConfiguration?.style?.joinButtonTextFont || + fontHelper(theme.typography.title2), + joinButtonTextColor: + joinGroupConfiguration?.style?.joinButtonTextColor || + theme.palette.getAccent900("light"), + joinButtonBackground: + joinGroupConfiguration?.style?.joinButtonBackground || + theme.palette.getPrimary(), + joinButtonBorderRadius: + joinGroupConfiguration?.style?.joinButtonBorderRadius || "8px", + }); }; diff --git a/src/components/Groups/CometChatJoinProtectedGroup/JoinProtectedGroupConfiguration.js b/src/components/Groups/CometChatJoinProtectedGroup/JoinProtectedGroupConfiguration.js index ce7d5913..e2294cfe 100644 --- a/src/components/Groups/CometChatJoinProtectedGroup/JoinProtectedGroupConfiguration.js +++ b/src/components/Groups/CometChatJoinProtectedGroup/JoinProtectedGroupConfiguration.js @@ -1,4 +1,4 @@ -import { JoinProtectedGroupStyles } from "./JoinProtectedGroupsStyles"; +import { JoinProtectedGroupStyle } from "./JoinProtectedGroupsStyle"; /** * @class JoinProtectedGroupConfiguration @@ -6,7 +6,7 @@ import { JoinProtectedGroupStyles } from "./JoinProtectedGroupsStyles"; * @param {object} style */ export class JoinProtectedGroupConfiguration { - constructor({ style = new JoinProtectedGroupStyles({}) }) { - this.style = new JoinProtectedGroupStyles(style || {}); - } + constructor({ style = new JoinProtectedGroupStyle({}) }) { + this.style = new JoinProtectedGroupStyle(style || {}); + } } diff --git a/src/components/Groups/CometChatJoinProtectedGroup/JoinProtectedGroupsStyle.js b/src/components/Groups/CometChatJoinProtectedGroup/JoinProtectedGroupsStyle.js new file mode 100644 index 00000000..aa48388e --- /dev/null +++ b/src/components/Groups/CometChatJoinProtectedGroup/JoinProtectedGroupsStyle.js @@ -0,0 +1,77 @@ +import { BaseStyles } from "../../Shared/Base/BaseStyles"; + +/** + * @class JoinProtectedGroupStyle + * @description JoinProtectedGroupStyle class is used for defining the styles for JoinProtectedGroup component + * boxShadow + *@param {string} titleTextFont + *@param {string} titleTextColor + *@param {string} errorTextFont + *@param {string} errorTextColor + *@param {string} passwordTextFont + *@param {string} passwordTextColor + *@param {string} passwordPlaceholderTextFont + *@param {string} passwordPlaceholderTextColor + *@param {string} passwordInputBackground + *@param {string} passwordInputBorder + *@param {string} passwordInputBorderRadius + *@param {string} passwordInputBoxShadow + *@param {string} joinButtonTextFont + *@param {string} joinButtonTextColor + *@param {string} joinButtonBackground + *@param {string} joinButtonBorderRadius + */ + +class JoinProtectedGroupStyle extends BaseStyles { + constructor({ + width = "100%", + height = "100%", + background = "", + border = "", + borderRadius = "0", + boxShadow = "", + titleTextFont = "", + titleTextColor = "", + errorTextFont = "", + errorTextColor = "", + passwordTextFont = "", + passwordTextColor = "", + passwordPlaceholderTextFont = "", + passwordPlaceholderTextColor = "", + passwordInputBackground = "", + passwordInputBorder = "", + passwordInputBorderRadius = "", + passwordInputBoxShadow = "", + joinButtonTextFont = "", + joinButtonTextColor = "", + joinButtonBackground = "", + joinButtonBorderRadius = "", + }) { + super({ + width, + height, + background, + border, + borderRadius, + }); + this.boxShadow = boxShadow; + this.titleTextFont = titleTextFont; + this.titleTextColor = titleTextColor; + this.errorTextFont = errorTextFont; + this.errorTextColor = errorTextColor; + this.passwordTextFont = passwordTextFont; + this.passwordTextColor = passwordTextColor; + this.passwordPlaceholderTextFont = passwordPlaceholderTextFont; + this.passwordPlaceholderTextColor = passwordPlaceholderTextColor; + this.passwordInputBackground = passwordInputBackground; + this.passwordInputBorder = passwordInputBorder; + this.passwordInputBorderRadius = passwordInputBorderRadius; + this.passwordInputBoxShadow = passwordInputBoxShadow; + this.joinButtonTextFont = joinButtonTextFont; + this.joinButtonTextColor = joinButtonTextColor; + this.joinButtonBackground = joinButtonBackground; + this.joinButtonBorderRadius = joinButtonBorderRadius; + } +} + +export { JoinProtectedGroupStyle }; diff --git a/src/components/Groups/CometChatJoinProtectedGroup/JoinProtectedGroupsStyles.js b/src/components/Groups/CometChatJoinProtectedGroup/JoinProtectedGroupsStyles.js deleted file mode 100644 index a2112f21..00000000 --- a/src/components/Groups/CometChatJoinProtectedGroup/JoinProtectedGroupsStyles.js +++ /dev/null @@ -1,77 +0,0 @@ -import { BaseStyles } from "../../Shared/Base/BaseStyles"; - -/** - * @class JoinProtectedGroupStyles - * @description JoinProtectedGroupStyles class is used for defining the styles for JoinProtectedGroup component - * boxShadow - *@param {string} titleTextFont - *@param {string} titleTextColor - *@param {string} errorTextFont - *@param {string} errorTextColor - *@param {string} passwordTextFont - *@param {string} passwordTextColor - *@param {string} passwordPlaceholderTextFont - *@param {string} passwordPlaceholderTextColor - *@param {string} passwordInputBackground - *@param {string} passwordInputBorder - *@param {string} passwordInputBorderRadius - *@param {string} passwordInputBoxShadow - *@param {string} joinButtonTextFont - *@param {string} joinButtonTextColor - *@param {string} joinButtonBackground - *@param {string} joinButtonBorderRadius - */ - -class JoinProtectedGroupStyles extends BaseStyles { - constructor({ - width = "100%", - height = "100%", - background = "", - border = "", - borderRadius = "0", - boxShadow = "", - titleTextFont = "", - titleTextColor = "", - errorTextFont = "", - errorTextColor = "", - passwordTextFont = "", - passwordTextColor = "", - passwordPlaceholderTextFont = "", - passwordPlaceholderTextColor = "", - passwordInputBackground = "", - passwordInputBorder = "", - passwordInputBorderRadius = "", - passwordInputBoxShadow = "", - joinButtonTextFont = "", - joinButtonTextColor = "", - joinButtonBackground = "", - joinButtonBorderRadius = "", - }) { - super({ - width, - height, - background, - border, - borderRadius, - }); - this.boxShadow = boxShadow; - this.titleTextFont = titleTextColor; - this.titleTextColor = titleTextFont; - this.errorTextFont = errorTextFont; - this.errorTextColor = errorTextColor; - this.passwordTextFont = passwordTextFont; - this.passwordTextColor = passwordTextColor; - this.passwordPlaceholderTextFont = passwordPlaceholderTextFont; - this.passwordPlaceholderTextColor = passwordPlaceholderTextColor; - this.passwordInputBackground = passwordInputBackground; - this.passwordInputBorder = passwordInputBorder; - this.passwordInputBorderRadius = passwordInputBorderRadius; - this.passwordInputBoxShadow = passwordInputBoxShadow; - this.joinButtonTextFont = joinButtonTextFont; - this.joinButtonTextColor = joinButtonTextColor; - this.joinButtonBackground = joinButtonBackground; - this.joinButtonBorderRadius = joinButtonBorderRadius; - } -} - -export { JoinProtectedGroupStyles }; diff --git a/src/components/Groups/CometChatJoinProtectedGroup/hook.js b/src/components/Groups/CometChatJoinProtectedGroup/hook.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/components/Groups/CometChatJoinProtectedGroup/index.js b/src/components/Groups/CometChatJoinProtectedGroup/index.js index 22cf1602..7f98f63c 100644 --- a/src/components/Groups/CometChatJoinProtectedGroup/index.js +++ b/src/components/Groups/CometChatJoinProtectedGroup/index.js @@ -2,164 +2,175 @@ import React from "react"; import { CometChat } from "@cometchat-pro/chat"; import PropTypes from "prop-types"; import { CometChatTheme, localize } from "../../Shared"; -import { JoinProtectedGroupStyles } from "./JoinProtectedGroupsStyles"; + +import { CometChatMessageHeader, MessageHeaderConfiguration } from "../../../"; import warningIcon from "../CometChatCreateGroup/resources/warning.svg"; import { CometChatListItem } from "../../Shared"; import { - joinGroupContainerStyle, - joinGroupTitleStyle, - joinGroupPasswordInputStyle, - joinGroupButtonStyle, - errorContainerStyle, - errorIconStyle, - errorTextStyle, + joinGroupContainerStyle, + joinGroupTitleStyle, + joinGroupPasswordInputStyle, + joinGroupButtonStyle, + errorContainerStyle, + errorIconStyle, + errorTextStyle, + errorMessageBoxStyle, + joinGroupPasswordInputContainerStyle, + joinGroupProtectedWrapperStyle, + messageHeaderStyle, } from "./style"; import { CometChatGroupEvents } from "../CometChatGroupEvents"; const CometChatJoinProtectedGroup = (props) => { - /** - * Destructuring Props - */ - const { - title, - group, - passwordPlaceholderText, - joinGroupButtonText, - style, - theme, - } = props; - - /** - * Internal states - */ - const [passwordInput, setPasswordInput] = React.useState(null); - const [isError, setError] = React.useState(false); - const [errorText, setErrorText] = React.useState(null); - const _theme = new CometChatTheme(theme || {}); - - /** - * handle password input change - */ - const handleChange = (e) => { - setPasswordInput(e.target.value); - }; - - /** - * - * @returns Performs join group on click - */ - const joinGroup = () => { - if (!passwordInput) { - setError(true); - setErrorText(localize("GROUP_PASSWORD_BLANK")); - return false; - } - - let guid = group?.guid; - let type = group?.type; - let password = passwordInput; - - CometChat.joinGroup(guid, type, password) - .then((response) => { - setError(false); - - CometChatGroupEvents.emit( - CometChatGroupEvents.onGroupMemberJoin, - response - ); - }) - .catch((error) => { - CometChatGroupEvents.emit(CometChatGroupEvents.onGroupError, error); - setError(true); - setErrorText(error.message); - }); - }; - - return ( -
-
- {title} -
- -
- -
- {isError && errorText ? ( -
-
- { - - } -
{errorText}
-
-
- ) : null} - -
- ); + /** + * Destructuring Props + */ + const { + title, + group, + passwordPlaceholderText, + joinGroupButtonText, + messageHeaderConfiguration, + showBackButton, + style, + theme, + } = props; + + /** + * Internal states + */ + const [passwordInput, setPasswordInput] = React.useState(null); + const [isError, setError] = React.useState(false); + const [errorText, setErrorText] = React.useState(null); + const _theme = new CometChatTheme(theme || {}); + + /** + * handle password input change + */ + const handleChange = (e) => { + setPasswordInput(e.target.value); + }; + + /** + * + * @returns Performs join group on click + */ + const joinGroup = () => { + if (!passwordInput) { + setError(true); + setErrorText(localize("GROUP_PASSWORD_BLANK")); + return false; + } + + let guid = group?.guid; + let type = group?.type; + let password = passwordInput; + + CometChat.joinGroup(guid, type, password) + .then((response) => { + setError(false); + + CometChatGroupEvents.emit( + CometChatGroupEvents.onGroupMemberJoin, + response + ); + }) + .catch((error) => { + CometChatGroupEvents.emit(CometChatGroupEvents.onGroupError, error); + setError(true); + setErrorText(error.message); + }); + }; + + return ( +
+
+ {title} +
+ +
+ +
+ {isError && errorText ? ( +
+
+ { + + } +
{errorText}
+
+
+ ) : null} + +
+ ); }; CometChatJoinProtectedGroup.defaultProps = { - title: localize("ENTER_GROUP_PASSWORD"), - group: null, - passwordPlaceholderText: localize("GROUP_PASSWORD"), - joinGroupButtonText: localize("CONTINUE"), - style: { - width: "", - height: "", - boxShadow: "", - background: "", - border: "", - borderRadius: "", - titleTextFont: "", - titleTextColor: "", - errorTextFont: "", - errorTextColor: "", - passwordTextFont: "", - passwordTextColor: "", - passwordPlaceholderTextFont: "", - passwordPlaceholderTextColor: "", - passwordInputBackground: "", - passwordInputBorder: "", - passwordInputBorderRadius: "", - passwordInputBoxShadow: "", - joinButtonTextFont: "", - joinButtonTextColor: "", - joinButtonBackground: "", - joinButtonBorderRadius: "", - }, + title: localize("ENTER_GROUP_PASSWORD"), + group: null, + passwordPlaceholderText: localize("GROUP_PASSWORD"), + joinGroupButtonText: localize("CONTINUE"), + style: { + width: "", + height: "", + boxShadow: "", + background: "", + border: "12px", + borderRadius: "", + titleTextFont: "", + titleTextColor: "", + errorTextFont: "", + errorTextColor: "", + passwordTextFont: "", + passwordTextColor: "", + passwordPlaceholderTextFont: "", + passwordPlaceholderTextColor: "", + passwordInputBackground: "", + passwordInputBorder: "none", + passwordInputBorderRadius: "8px", + passwordInputBoxShadow: "", + joinButtonTextFont: "", + joinButtonTextColor: "", + joinButtonBackground: "", + joinButtonBorderRadius: "8px", + }, }; CometChatJoinProtectedGroup.propTypes = { - title: PropTypes.string, - group: PropTypes.object, - passwordPlaceholderText: PropTypes.string, - joinGroupButtonText: PropTypes.string, - style: PropTypes.object, + title: PropTypes.string, + group: PropTypes.object, + passwordPlaceholderText: PropTypes.string, + joinGroupButtonText: PropTypes.string, + showBackButton: PropTypes.bool, + style: PropTypes.object, }; export { CometChatJoinProtectedGroup }; diff --git a/src/components/Groups/CometChatJoinProtectedGroup/style.js b/src/components/Groups/CometChatJoinProtectedGroup/style.js index 5ac7dbfa..67730b8a 100644 --- a/src/components/Groups/CometChatJoinProtectedGroup/style.js +++ b/src/components/Groups/CometChatJoinProtectedGroup/style.js @@ -1,83 +1,133 @@ -import { fontHelper } from "../.."; +import { fontHelper, BaseStyles } from "../.."; export const joinGroupContainerStyle = (style, theme) => { - return { - margin: "auto", - width: "100%", - height: "100%", - borderRadius: "8px", - zIndex: "3", - display: "flex", - flexDirection: "column", - justifyContent: "center", - alignItems: "center", - background: style?.background || theme.pallete.background[theme.palette.mode] - }; + return { + margin: "auto", + width: style?.width, + height: style?.height, + borderRadius: style?.borderRadius, + border: style.border, + zIndex: "2", + display: "flex", + flexDirection: "column", + justifyContent: "center", + alignItems: "center", + background: style?.background || theme?.pallete?.getBackground(), + }; }; export const joinGroupTitleStyle = (style, theme) => { - return { - - font: style?.titleTextFont, - color: style?.titleTextColor - }; + return { + font: style?.titleTextFont || fontHelper(theme?.typography?.heading), + color: style?.titleTextColor || theme?.palette?.getAccent700(), + }; }; export const joinGroupPasswordInputStyle = (style, theme) => { - return { - width: "320px", - height: "46px", - color: style?.passwordTextFont, - font: style?.passwordTextColor, - background: style?.passwordInputBackground, - border: style?.passwordInputBorder, - borderRadius: style?.passwordInputBorderRadius, - boxShadow: style?.passwordInputBoxShadow, - margin: "38px 0px 16px 0px", - outline: "none", - padding:"6px 12px" - }; + return { + width: style?.width, + height: "46px", + color: style?.passwordTextFont || fontHelper(theme?.typography?.subtitle2), + font: style?.passwordTextColor || theme?.palette?.getAccent900(), + background: style?.passwordInputBackground || theme?.palette?.getAccent50(), + border: style?.passwordInputBorder || "none", + borderRadius: style?.passwordInputBorderRadius || "8px", + boxShadow: + style?.passwordInputBoxShadow || + `${theme?.palette?.getAccent50()} 0px 0px 0px 1px`, + margin: "38px 0px 16px 0px", + outline: "none", + padding: "6px 12px", + }; }; export const joinGroupButtonStyle = (style, theme) => { - return { - width: "320px", - height: "46px", - font: style?.joinButtonTextFont, - color:style?.joinButtonTextColor, - background:style?.joinButtonBackground, - borderRadius: style?.joinButtonBorderRadius - }; + return { + width: style?.width, + height: "46px", + font: style?.joinButtonTextFont || fontHelper(theme?.typography?.title2), + color: style?.joinButtonTextColor || theme?.palette?.getAccent900("light"), + background: style?.joinButtonBackground || theme?.palette?.getPrimary(), + borderRadius: style?.joinButtonBorderRadius, + border: "none", + }; }; export const errorContainerStyle = (style, theme) => { - return { - width: "328px", - height: "60px", - margin: "16px 0px 32px 0px" , - display: "flex", - justifyContent: "center", - alignItems: "center", - background: "rgba(255, 59, 48, 0.1)", - border: "none", - borderRadius: "8px", - }; + return { + width: style?.width, + height: "60px", + margin: "16px 0px 32px 0px", + display: "flex", + justifyContent: "center", + alignItems: "center", + background: "rgba(255, 59, 48, 0.1)", //not in theme + border: "none", + borderRadius: "8px", + }; }; -export const errorIconStyle = () => { - return { - iconBackground: "RGB(255, 59, 48)", - iconTint: "white", - iconBackgroundWidth: "38px", - iconBackgroundHeight: "38px", - iconWidth: "24px", - iconHeight: "24px", - margin: "0px 12px", - }; +export const errorIconStyle = (theme) => { + return { + iconBackground: theme?.palette?.getError() || "RGB(255, 59, 48)", + iconTint: "white", + iconBackgroundWidth: "38px", + iconBackgroundHeight: "38px", + iconWidth: "24px", + iconHeight: "24px", + margin: "0px 12px", + }; }; -export const errorTextStyle = (theme) => { - return { - color: theme.palette.getError(), - font: fontHelper(theme.typography.text1), - }; + +export const errorTextStyle = (style, theme) => { + return { + color: style?.errorTextColor || theme?.palette?.getError(), + font: style?.errorTextFont || fontHelper(theme?.typography?.text1), + }; +}; + +export const joinGroupPasswordInputContainerStyle = (style) => { + return { + width: style?.width, + height: "auto", + margin: "0", + padding: "0", + }; +}; + +export const errorMessageBoxStyle = (style) => { + return { + width: style?.width, + height: "auto", + margin: "0", + padding: "0", + }; +}; + +export const joinGroupProtectedWrapperStyle = () => { + return { + margin: "auto", + width: "343px", + height: "100%", + borderRadius: "8px", + zIndex: "4", + display: "flex", + flexDirection: "column", + justifyContent: "center", + alignItems: "center", + }; +}; + +export const messageHeaderStyle = (theme) => { + return { + ...new BaseStyles({ + width: "100%", + height: "auto", + background: theme?.palette?.getBackground(), + border: "none", + borderRadius: "none", + activeBackground: "none", + }), + backButtonIconTint: theme?.palette?.getPrimary(), + }; }; diff --git a/src/components/Groups/index.js b/src/components/Groups/index.js index 31fc1d3e..b721c882 100644 --- a/src/components/Groups/index.js +++ b/src/components/Groups/index.js @@ -2,26 +2,38 @@ import { CometChatGroupList } from "./CometChatGroupList"; import { CometChatGroupEvents } from "./CometChatGroupEvents"; import { CometChatGroups } from "./CometChatGroups"; import { CometChatGroupsWithMessages } from "./CometChatGroupsWithMessages"; +import { CometChatCreateGroup } from "./CometChatCreateGroup"; +import { CometChatJoinProtectedGroup } from "./CometChatJoinProtectedGroup"; /** * Styles */ - import { GroupsWithMessagesStyles } from "./CometChatGroupsWithMessages/GroupsWithMessagesStyles"; +import { GroupsWithMessagesStyle } from "./CometChatGroupsWithMessages/GroupsWithMessagesStyle"; +import { CreateGroupStyle } from "./CometChatCreateGroup/CreateGroupStyle"; +import { JoinProtectedGroupStyle } from "./CometChatJoinProtectedGroup/JoinProtectedGroupsStyle"; +import { GroupsStyle } from "./CometChatGroups/GroupsStyle"; - /** - * Configurations - */ - import { GroupsConfiguration } from "./CometChatGroups/GroupsConfiguration" - import { GroupsWithMessagesConfiguration } from "./CometChatGroupsWithMessages/GroupsWithMessagesConfiguration" - - export { - CometChatGroupList, - CometChatGroupEvents, - CometChatGroups, - CometChatGroupsWithMessages, - - GroupsWithMessagesStyles, - - GroupsConfiguration, - GroupsWithMessagesConfiguration - } \ No newline at end of file +/** + * Configurations + */ +import { GroupsConfiguration } from "./CometChatGroups/GroupsConfiguration"; +import { GroupsWithMessagesConfiguration } from "./CometChatGroupsWithMessages/GroupsWithMessagesConfiguration"; +import { CreateGroupConfiguration } from "./CometChatCreateGroup/CreateGroupConfiguration"; +import { JoinProtectedGroupConfiguration } from "./CometChatJoinProtectedGroup/JoinProtectedGroupConfiguration"; + +export { + CometChatGroupList, + CometChatGroupEvents, + CometChatGroups, + CometChatGroupsWithMessages, + CometChatCreateGroup, + CometChatJoinProtectedGroup, + GroupsStyle, + JoinProtectedGroupStyle, + CreateGroupStyle, + GroupsWithMessagesStyle, + GroupsConfiguration, + GroupsWithMessagesConfiguration, + CreateGroupConfiguration, + JoinProtectedGroupConfiguration, +}; diff --git a/src/components/Messages/Bubbles/CometChatAudioBubble/AudioBubbleConfiguration.js b/src/components/Messages/Bubbles/CometChatAudioBubble/AudioBubbleConfiguration.js index 175afc26..8978a99b 100644 --- a/src/components/Messages/Bubbles/CometChatAudioBubble/AudioBubbleConfiguration.js +++ b/src/components/Messages/Bubbles/CometChatAudioBubble/AudioBubbleConfiguration.js @@ -1,5 +1,15 @@ -const AudioBubbleConfiguration = function () { - this.style = ""; - }; - - export { AudioBubbleConfiguration }; \ No newline at end of file +import { AudioBubbleStyle } from "../../"; + +/** + * @class AudioBubbleConfiguration + * @description AudioBubbleConfiguration class is used for defining the AudioBubbleConfiguration templates. + * @param {object} style + */ + +class AudioBubbleConfiguration { + constructor({ style = new AudioBubbleStyle({}) }) { + this.style = new AudioBubbleStyle(style ?? {}); + } +} + +export { AudioBubbleConfiguration }; diff --git a/src/components/Messages/Bubbles/CometChatAudioBubble/AudioBubbleStyle.js b/src/components/Messages/Bubbles/CometChatAudioBubble/AudioBubbleStyle.js new file mode 100644 index 00000000..14ff6e16 --- /dev/null +++ b/src/components/Messages/Bubbles/CometChatAudioBubble/AudioBubbleStyle.js @@ -0,0 +1,36 @@ +import { BaseStyles } from "../../../Shared"; + +/** + * @class AudioBubbleStyle + * @description AudioBubbleStyle is used to defining audio bubble style + * @param {String} width + * @param {String} height + * @param {String} border + * @param {String} borderRadius + * @param {String} background + * @param {String} iconTint + */ + +class AudioBubbleStyle extends BaseStyles { + constructor({ + width = "228px", + height = "auto", + background = "", + border = "", + borderRadius = "12px", + + iconTint = "", + }) { + super({ + width, + height, + background, + border, + borderRadius, + }); + + this.iconTint = iconTint; + } +} + +export { AudioBubbleStyle }; diff --git a/src/components/Messages/Bubbles/CometChatDeletedMessageBubble/DeletedBubbleConfiguration.js b/src/components/Messages/Bubbles/CometChatDeletedMessageBubble/DeletedBubbleConfiguration.js index 7e5ff46f..944d07f5 100644 --- a/src/components/Messages/Bubbles/CometChatDeletedMessageBubble/DeletedBubbleConfiguration.js +++ b/src/components/Messages/Bubbles/CometChatDeletedMessageBubble/DeletedBubbleConfiguration.js @@ -1,8 +1,7 @@ +import { DeletedBubbleStyle } from "../.."; class DeletedBubbleConfiguration { - constructor({ - style = {}, - }) { - this.style = style; - }; -} - export { DeletedBubbleConfiguration }; \ No newline at end of file + constructor({ style = new DeletedBubbleStyle({}) }) { + this.style = new DeletedBubbleStyle(style || {}); + } +} +export { DeletedBubbleConfiguration }; diff --git a/src/components/Messages/Bubbles/CometChatDeletedMessageBubble/DeletedBubbleStyle.js b/src/components/Messages/Bubbles/CometChatDeletedMessageBubble/DeletedBubbleStyle.js new file mode 100644 index 00000000..80ec4bb8 --- /dev/null +++ b/src/components/Messages/Bubbles/CometChatDeletedMessageBubble/DeletedBubbleStyle.js @@ -0,0 +1,37 @@ +import { BaseStyles } from "../../../Shared"; + +/** + * @class DeletedBubbleStyle + * @description DeletedBubbleStyle is used to defining delete bubble style + * @param {String} width + * @param {String} height + * @param {String} textFont + * @param {String} textColor + * @param {String} border + * @param {String} borderRadius + * @param {String} background + */ + +class DeletedBubbleStyle extends BaseStyles { + constructor({ + width = "auto", + height = "auto", + background = "", + border = "", + borderRadius = "12px", + textFont = "", + textColor = "", + }) { + super({ + width, + height, + background, + border, + borderRadius, + }); + this.textFont = textFont; + this.textColor = textColor; + } +} + +export { DeletedBubbleStyle }; diff --git a/src/components/Messages/Bubbles/CometChatDocumentBubble/CollaborativeDocumentConfiguration.js b/src/components/Messages/Bubbles/CometChatDocumentBubble/CollaborativeDocumentConfiguration.js index 3767f810..2631405a 100644 --- a/src/components/Messages/Bubbles/CometChatDocumentBubble/CollaborativeDocumentConfiguration.js +++ b/src/components/Messages/Bubbles/CometChatDocumentBubble/CollaborativeDocumentConfiguration.js @@ -1,11 +1,22 @@ -import collaborativeIconURL from "./resources/collaborative-document.svg" +import collaborativeIconURL from "./resources/collaborative-document.svg"; + +import { DocumentBubbleStyle } from "../../"; + +/** + * @class CollaborativeDocumentConfiguration + * @description CollaborativeDocumentConfiguration class is used for defining the CollaborativeDocumentConfiguration templates. + * @param {string} iconURL + * @param {object} style + */ + class CollaborativeDocumentConfiguration { constructor({ - style = {}, - iconURL = collaborativeIconURL + iconURL = collaborativeIconURL, + style = new DocumentBubbleStyle({}), }) { - this.style = style; + this.style = new DocumentBubbleStyle(style ?? {}); this.iconURL = iconURL; - }; -} - export { CollaborativeDocumentConfiguration }; \ No newline at end of file + } +} + +export { CollaborativeDocumentConfiguration }; diff --git a/src/components/Messages/Bubbles/CometChatDocumentBubble/DocumentBubbleStyle.js b/src/components/Messages/Bubbles/CometChatDocumentBubble/DocumentBubbleStyle.js new file mode 100644 index 00000000..ca68acdd --- /dev/null +++ b/src/components/Messages/Bubbles/CometChatDocumentBubble/DocumentBubbleStyle.js @@ -0,0 +1,58 @@ +import { BaseStyles } from "../../../Shared"; + +/** + * @class DocumentBubbleStyle + * @description DocumentBubbleStyle is used to defining file bubble style + * @param {string} width + * @param {string} height + * @param {string} titleFont + * @param {string} border + * @param {string} borderRadius + * @param {string} background + * @param {string} titleColor + * @param {string} subTitleFont + * @param {string} subTitleColor + * @param {string} iconTint + * @param {string} buttonBackground + * @param {string} buttonTextColor + * @param {string} buttonTextFont + * @param {string} dividerTint + */ + +class DocumentBubbleStyle extends BaseStyles { + constructor({ + width = "228px", + height = "auto", + background = "", + border = "", + borderRadius = "8px", + titleFont = "", + titleColor = "", + subTitleFont = "", + subTitleColor = "", + iconTint = "", + buttonBackground = "", + buttonTextColor = "", + buttonTextFont = "", + dividerTint = "", + }) { + super({ + width, + height, + background, + border, + borderRadius, + }); + this.titleFont = titleFont; + this.titleColor = titleColor; + this.subTitleFont = subTitleFont; + this.subTitleColor = subTitleColor; + this.iconTint = iconTint; + this.buttonBackground = buttonBackground; + this.buttonTextColor = buttonTextColor; + this.buttonTextFont = buttonTextFont; + this.dividerTint = dividerTint; + } +} + +export { DocumentBubbleStyle }; diff --git a/src/components/Messages/Bubbles/CometChatFileBubble/FileBubbleConfiguration.js b/src/components/Messages/Bubbles/CometChatFileBubble/FileBubbleConfiguration.js index d3e7bb95..2f5090f8 100644 --- a/src/components/Messages/Bubbles/CometChatFileBubble/FileBubbleConfiguration.js +++ b/src/components/Messages/Bubbles/CometChatFileBubble/FileBubbleConfiguration.js @@ -1,12 +1,18 @@ -import fileIconURL from "../../../Messages/Bubbles/CometChatFileBubble/resources/file-upload.svg" +import fileIconURL from "../../../Messages/Bubbles/CometChatFileBubble/resources/file-upload.svg"; +import { FileBubbleStyle } from "../../"; + +/** + * @class FileBubbleConfiguration + * @description FileBubbleConfiguration class is used for defining the FileBubbleConfiguration templates. + * @param {string} iconURL + * @param {object} style + */ + class FileBubbleConfiguration { - constructor({ - style = {}, - iconURL = fileIconURL - }) { - this.style = style; + constructor({ iconURL = fileIconURL, style = new FileBubbleStyle({}) }) { + this.style = new FileBubbleStyle(style ?? {}); this.iconURL = iconURL; - }; -} - - export { FileBubbleConfiguration }; \ No newline at end of file + } +} + +export { FileBubbleConfiguration }; diff --git a/src/components/Messages/Bubbles/CometChatFileBubble/FileBubbleStyle.js b/src/components/Messages/Bubbles/CometChatFileBubble/FileBubbleStyle.js new file mode 100644 index 00000000..c5ff8938 --- /dev/null +++ b/src/components/Messages/Bubbles/CometChatFileBubble/FileBubbleStyle.js @@ -0,0 +1,46 @@ +import { BaseStyles } from "../../../Shared"; + +/** + * @class FileBubbleStyle + * @description FileBubbleStyle is used to defining file bubble style + * @param {string} width + * @param {string} height + * @param {string} border + * @param {string} borderRadius + * @param {string} background + * @param {string} titleFont + * @param {string} titleColor + * @param {string} subTitleFont + * @param {string} subTitleColor + * @param {string} iconTint + */ + +class FileBubbleStyle extends BaseStyles { + constructor({ + width = "auto", + height = "auto", + background = "", + border = "", + borderRadius = "8px", + titleFont = "", + titleColor = "", + subTitleFont = "", + subTitleColor = "", + iconTint = "", + }) { + super({ + width, + height, + background, + border, + borderRadius, + }); + this.titleFont = titleFont; + this.titleColor = titleColor; + this.subTitleFont = subTitleFont; + this.subTitleColor = subTitleColor; + this.iconTint = iconTint; + } +} + +export { FileBubbleStyle }; diff --git a/src/components/Messages/Bubbles/CometChatImageBubble/ImageBubbleConfiguration.js b/src/components/Messages/Bubbles/CometChatImageBubble/ImageBubbleConfiguration.js index 7e50478f..cf7a6abc 100644 --- a/src/components/Messages/Bubbles/CometChatImageBubble/ImageBubbleConfiguration.js +++ b/src/components/Messages/Bubbles/CometChatImageBubble/ImageBubbleConfiguration.js @@ -1,10 +1,22 @@ +import ImageURL from "./resources/1px.png"; + +import { ImageBubbleStyle } from "../../"; + +/** + * @class ImageBubbleConfiguration + * @description ImageBubbleConfiguration class is used for defining the ImageBubbleConfiguration templates. + * @param {string} overlayImageURL + * @param {object} style + */ + class ImageBubbleConfiguration { constructor({ - style = {}, - + overlayImageURL = ImageURL, + style = new ImageBubbleStyle({}), }) { - this.style = style; - - }; -} - export { ImageBubbleConfiguration }; \ No newline at end of file + this.style = new ImageBubbleStyle(style ?? {}); + this.overlayImageURL = overlayImageURL; + } +} + +export { ImageBubbleConfiguration }; diff --git a/src/components/Messages/Bubbles/CometChatImageBubble/ImageBubbleStyle.js b/src/components/Messages/Bubbles/CometChatImageBubble/ImageBubbleStyle.js new file mode 100644 index 00000000..df3be4a8 --- /dev/null +++ b/src/components/Messages/Bubbles/CometChatImageBubble/ImageBubbleStyle.js @@ -0,0 +1,35 @@ +import { BaseStyles } from "../../../Shared"; + +/** + * @class ImageBubbleStyle + * @description ImageBubbleStyle is used to defining image bubble styles. + * @param {String} width + * @param {String} height + * @param {String} border + * @param {String} borderRadius + * @param {String} background + * @param {String} activityBackground + */ + +class ImageBubbleStyle extends BaseStyles { + constructor({ + width = "100%", + height = "168px", + background = "", + border = "", + borderRadius = "12px", + activityBackground = "", + }) { + super({ + width, + height, + background, + border, + borderRadius, + }); + + this.activityBackground = activityBackground; + } +} + +export { ImageBubbleStyle }; diff --git a/src/components/Messages/Bubbles/CometChatImageBubble/hooks.js b/src/components/Messages/Bubbles/CometChatImageBubble/hooks.js index e6f0396b..f9474fe0 100644 --- a/src/components/Messages/Bubbles/CometChatImageBubble/hooks.js +++ b/src/components/Messages/Bubbles/CometChatImageBubble/hooks.js @@ -126,5 +126,6 @@ export const Hooks = (props, setImageURL, imageURL, setUnsafe) => { props.messageObject, setImageURL, setMessageImageUrl, + setUnsafe, ]); }; diff --git a/src/components/Messages/Bubbles/CometChatMessageBubble/MessageBubbleConfiguration.js b/src/components/Messages/Bubbles/CometChatMessageBubble/MessageBubbleConfiguration.js index 61cb3edf..ee1ca439 100644 --- a/src/components/Messages/Bubbles/CometChatMessageBubble/MessageBubbleConfiguration.js +++ b/src/components/Messages/Bubbles/CometChatMessageBubble/MessageBubbleConfiguration.js @@ -1,23 +1,25 @@ import { DateConfiguration } from "../../../Shared/PrimaryComponents/CometChatConfiguration/DateConfiguration"; -import { - AvatarConfiguration, - MessageReceiptConfiguration +import { + AvatarConfiguration, + MessageReceiptConfiguration, + MessageTimeAlignmentConstants, } from "../../../Shared/"; -import { MessageReactionsConfiguration } from "../../CometChatMessageReactions/MessageReactionsConfiguration"; import { - TextBubbleConfiguration -} from "../CometChatTextBubble/TextBubbleConfiguration" -import { FileBubbleConfiguration } from "../CometChatFileBubble/FileBubbleConfiguration" -import { ImageBubbleConfiguration } from "../CometChatImageBubble/ImageBubbleConfiguration" -import { AudioBubbleConfiguration } from "../../../Messages/Bubbles/CometChatAudioBubble/AudioBubbleConfiguration" -import { VideoBubbleConfiguration } from "../CometChatVideoBubble/VideoBubbleConfiguration" -import { PollBubbleConfiguration } from "../CometChatPollBubble/PollBubbleConfiguration" -import { StickerBubbleConfiguration } from "../CometChatStickerBubble/StickerBubbleConfiguration" -import { DeletedBubbleConfiguration } from "../CometChatDeletedMessageBubble/DeletedBubbleConfiguration" -import { CollaborativeWhiteboardConfiguration } from "../CometChatWhiteboardBubble/CollaborativeWhiteboardConfiguration" -import { CollaborativeDocumentConfiguration } from "../../../Messages/Bubbles/CometChatDocumentBubble/CollaborativeDocumentConfiguration" -import { MessageInputData} from "../../../Shared/InputData/MessageInputData" -import { MessageTimeAlignmentConstants } from "../../../Shared"; + TextBubbleConfiguration, + AudioBubbleConfiguration, + ImageBubbleConfiguration, + VideoBubbleConfiguration, + PollBubbleConfiguration, + FileBubbleConfiguration, + StickerBubbleConfiguration, + CollaborativeWhiteboardConfiguration, + CollaborativeDocumentConfiguration, + DeletedBubbleConfiguration, + MessageReactionsConfiguration, +} from "../../../"; +import { MessageInputData } from "../../../Shared/InputData/MessageInputData"; + +import { MessageBubbleStyle } from "../../"; /** * @class messageBubbleConfiguration @@ -27,7 +29,7 @@ import { MessageTimeAlignmentConstants } from "../../../Shared"; * @param {Object} dateConfiguration * @param {Object} avatarConfiguration * @param {Object} messageReceiptConfiguration - * @param {Object} messageReactionConfiguration + * @param {Object} messageReactionConfiguration * @param {Object} textBubbleConfiguration * @param {Object} fileBubbleConfiguration * @param {Object} imageBubbleConfiguration @@ -38,45 +40,78 @@ import { MessageTimeAlignmentConstants } from "../../../Shared"; * @param {Object} deletedBubbleConfiguration * @param {Object} collaborativeWhiteboardConfiguration * @param {Object} collaborativeDocumentConfiguration + * @param {object} style */ class MessageBubbleConfiguration { - constructor({ - messageBubbleData = new MessageInputData({}), - timeAlignment = MessageTimeAlignmentConstants.bottom, - dateConfiguration = new DateConfiguration({}), - avatarConfiguration = new AvatarConfiguration({}), - messageReceiptConfiguration = new MessageReceiptConfiguration({}), - messageReactionConfiguration = new MessageReactionsConfiguration({}), - textBubbleConfiguration = new TextBubbleConfiguration({}), - fileBubbleConfiguration = new FileBubbleConfiguration({}), - imageBubbleConfiguration = new ImageBubbleConfiguration({}), - audioBubbleConfiguration = new AudioBubbleConfiguration({}), - videoBubbleConfiguration = new VideoBubbleConfiguration({}), - pollBubbleConfiguration = new PollBubbleConfiguration({}), - stickerBubbleConfiguration = new StickerBubbleConfiguration({}), - deletedBubbleConfiguration = new DeletedBubbleConfiguration({}), - collaborativeWhiteboardConfiguration = new CollaborativeWhiteboardConfiguration({}), - collaborativeDocumentConfiguration = new CollaborativeDocumentConfiguration({}) - -}) - { -this.messageBubbleData= new MessageInputData(messageBubbleData || {}); -this.timeAlignment= timeAlignment; -this.DateConfiguration= new DateConfiguration( dateConfiguration || {}); -this.AvatarConfiguration= new AvatarConfiguration( avatarConfiguration || {}); -this.MessageReceiptConfiguration= new MessageReceiptConfiguration( messageReceiptConfiguration || {}); -this.MessageReactionsConfiguration= new MessageReactionsConfiguration( messageReactionConfiguration || {}); -this.TextBubbleConfiguration=new TextBubbleConfiguration( textBubbleConfiguration || {}); -this.FileBubbleConfiguration= new FileBubbleConfiguration( fileBubbleConfiguration || {}); -this.ImageBubbleConfiguration=new ImageBubbleConfiguration( imageBubbleConfiguration || {}); -this.AudioBubbleConfiguration=new AudioBubbleConfiguration( audioBubbleConfiguration || {}); -this.VideoBubbleConfiguration= new VideoBubbleConfiguration( videoBubbleConfiguration || {}); -this.PollBubbleConfiguration=new PollBubbleConfiguration( pollBubbleConfiguration || {}); -this.StickerBubbleConfiguration=new StickerBubbleConfiguration( stickerBubbleConfiguration || {}); -this.DeletedBubbleConfiguration=new DeletedBubbleConfiguration( deletedBubbleConfiguration || {}); -this.CollaborativeWhiteboardBubbleConfiguration=new CollaborativeWhiteboardConfiguration(collaborativeWhiteboardConfiguration || {}); -this.CollaborativeDocumentBubbleConfiguration=new CollaborativeDocumentConfiguration(collaborativeDocumentConfiguration || {} ); -}; + constructor({ + messageBubbleData = new MessageInputData({}), + timeAlignment = MessageTimeAlignmentConstants.bottom, + dateConfiguration = new DateConfiguration({}), + avatarConfiguration = new AvatarConfiguration({}), + messageReceiptConfiguration = new MessageReceiptConfiguration({}), + messageReactionConfiguration = new MessageReactionsConfiguration({}), + textBubbleConfiguration = new TextBubbleConfiguration({}), + fileBubbleConfiguration = new FileBubbleConfiguration({}), + imageBubbleConfiguration = new ImageBubbleConfiguration({}), + audioBubbleConfiguration = new AudioBubbleConfiguration({}), + videoBubbleConfiguration = new VideoBubbleConfiguration({}), + pollBubbleConfiguration = new PollBubbleConfiguration({}), + stickerBubbleConfiguration = new StickerBubbleConfiguration({}), + deletedBubbleConfiguration = new DeletedBubbleConfiguration({}), + collaborativeWhiteboardConfiguration = new CollaborativeWhiteboardConfiguration( + {} + ), + collaborativeDocumentConfiguration = new CollaborativeDocumentConfiguration( + {} + ), + style = new MessageBubbleStyle({}), + }) { + this.messageBubbleData = new MessageInputData(messageBubbleData || {}); + this.timeAlignment = timeAlignment; + this.DateConfiguration = new DateConfiguration(dateConfiguration || {}); + this.AvatarConfiguration = new AvatarConfiguration( + avatarConfiguration || {} + ); + this.MessageReceiptConfiguration = new MessageReceiptConfiguration( + messageReceiptConfiguration || {} + ); + this.MessageReactionsConfiguration = new MessageReactionsConfiguration( + messageReactionConfiguration || {} + ); + this.TextBubbleConfiguration = new TextBubbleConfiguration( + textBubbleConfiguration || {} + ); + this.FileBubbleConfiguration = new FileBubbleConfiguration( + fileBubbleConfiguration || {} + ); + this.ImageBubbleConfiguration = new ImageBubbleConfiguration( + imageBubbleConfiguration || {} + ); + this.AudioBubbleConfiguration = new AudioBubbleConfiguration( + audioBubbleConfiguration || {} + ); + this.VideoBubbleConfiguration = new VideoBubbleConfiguration( + videoBubbleConfiguration || {} + ); + this.PollBubbleConfiguration = new PollBubbleConfiguration( + pollBubbleConfiguration || {} + ); + this.StickerBubbleConfiguration = new StickerBubbleConfiguration( + stickerBubbleConfiguration || {} + ); + this.DeletedBubbleConfiguration = new DeletedBubbleConfiguration( + deletedBubbleConfiguration || {} + ); + this.CollaborativeWhiteboardBubbleConfiguration = + new CollaborativeWhiteboardConfiguration( + collaborativeWhiteboardConfiguration || {} + ); + this.CollaborativeDocumentBubbleConfiguration = + new CollaborativeDocumentConfiguration( + collaborativeDocumentConfiguration || {} + ); + this.style = new MessageBubbleStyle(style || {}); + } } -export { MessageBubbleConfiguration }; \ No newline at end of file +export { MessageBubbleConfiguration }; diff --git a/src/components/Messages/Bubbles/CometChatMessageBubble/MessageBubbleStyle.js b/src/components/Messages/Bubbles/CometChatMessageBubble/MessageBubbleStyle.js index 429cfc8d..5a3dd16d 100644 --- a/src/components/Messages/Bubbles/CometChatMessageBubble/MessageBubbleStyle.js +++ b/src/components/Messages/Bubbles/CometChatMessageBubble/MessageBubbleStyle.js @@ -1,43 +1,45 @@ import { BaseStyles } from "../../../Shared"; /** - * @class MessageBubbleStyles + * @class MessageBubbleStyle * @description MessageBubbleStyle is used to defining message bubble style - * @param {String} width - * @param {String} height - * @param {String} nameTextFont - * @param {String} nameTextColor - * @param {String} border - * @param {String} borderRadius - * @param {String} background - * @param {String} timestampFont - * @param {String} timestampColor + * @param {string} width + * @param {string} height + * @param {string} nameTextFont + * @param {string} nameTextColor + * @param {string} border + * @param {string} borderRadius + * @param {string} background + * @param {string} timestampFont + * @param {string} timestampColor */ -class MessageBubbleStyles extends BaseStyles { - constructor({ - width, - height, - background, - border, - borderRadius, - nameTextFont, - nameTextColor, - timestampFont, - timestampColor, - }) { - super({ - width, - height, - background, - border, - borderRadius, - }); - this.nameTextFont = nameTextFont; - this.nameTextColor = nameTextColor; - this.timestampFont = timestampFont; - this.timestampColor = timestampColor; - } +class MessageBubbleStyle extends BaseStyles { + constructor({ + width = "100%", + height = "auto", + background = "", + border = "", + borderRadius = "12px", + activeBackground = "", + nameTextFont = "", + nameTextColor = "", + timestampFont = "", + timestampColor = "", + }) { + super({ + width, + height, + background, + border, + borderRadius, + activeBackground, + }); + this.nameTextFont = nameTextFont; + this.nameTextColor = nameTextColor; + this.timestampFont = timestampFont; + this.timestampColor = timestampColor; + } } -export { MessageBubbleStyles }; +export { MessageBubbleStyle }; diff --git a/src/components/Messages/Bubbles/CometChatMessageBubble/index.js b/src/components/Messages/Bubbles/CometChatMessageBubble/index.js index 92bf986d..4276cdde 100644 --- a/src/components/Messages/Bubbles/CometChatMessageBubble/index.js +++ b/src/components/Messages/Bubbles/CometChatMessageBubble/index.js @@ -52,9 +52,20 @@ import { translateLabelText, } from "./style"; -import { BaseStyles, AvatarStyles } from "../../../Shared"; +import { BaseStyles, AvatarStyle } from "../../../Shared"; -import { MessageBubbleStyles } from ".."; +import { + TextBubbleStyle, + ImageBubbleStyle, + AudioBubbleStyle, + VideoBubbleStyle, + DeleteBubbleStyle, + DocumentBubbleStyle, + WhiteboardBubbleStyle, + PollBubbleStyle, + FileBubbleStyle, + StickerBubbleStyle, +} from "../../"; import downloadIcon from "./resources/download-icon.svg"; import whiteBoard from "./resources/whiteboard.svg"; @@ -74,6 +85,7 @@ import { PollBubbleConfiguration } from "../CometChatPollBubble/PollBubbleConfig import { StickerBubbleConfiguration } from "../CometChatStickerBubble/StickerBubbleConfiguration"; import { DeletedBubbleConfiguration } from "../CometChatDeletedMessageBubble/DeletedBubbleConfiguration"; import { CollaborativeDocumentConfiguration } from "../CometChatDocumentBubble/CollaborativeDocumentConfiguration"; +import { CollaborativeWhiteboardConfiguration } from "../CometChatWhiteboardBubble/CollaborativeWhiteboardConfiguration"; /** *CometChatMessageBubble handles the display and functionality for all types of messages in a message list. @@ -100,17 +112,52 @@ const CometChatMessageBubble = (props) => { avatarConfiguration, messageReceiptConfiguration, messageReactionsConfiguration, + messageBubbleConfiguration, dateConfiguration, } = props; - const [isHovering, setIsHovering] = React.useState(null); const _theme = new CometChatTheme(theme || {}); - const _avatarConfiguration = avatarConfiguration || new AvatarConfiguration({}); const _messageReactionsConfiguration = messageReactionsConfiguration || new MessageReactionsConfiguration({}); + const _textBubbleConfiguration = + messageBubbleConfiguration.TextBubbleConfiguration || + TextBubbleConfiguration({}); + const _imageBubbleConfiguration = + messageBubbleConfiguration.ImageBubbleConfiguration || + ImageBubbleConfiguration({}); + const _fileBubbleConfiguration = + messageBubbleConfiguration.FileBubbleConfiguration || + FileBubbleConfiguration({}); + const _audioBubbleConfiguration = + messageBubbleConfiguration.AudioBubbleConfiguration || + AudioBubbleConfiguration({}); + const _videoBubbleConfiguration = + messageBubbleConfiguration.VideoBubbleConfiguration || + VideoBubbleConfiguration({}); + + const _deleteBubbledConfiguration = + messageBubbleConfiguration.DeletedBubbleConfiguration || + DeletedBubbleConfiguration({}); + + const _whiteboardBubbleConfiguration = + messageBubbleConfiguration.CollaborativeWhiteboardBubbleConfiguration || + CollaborativeWhiteboardConfiguration({}); + + const _documentBubbleConfiguration = + messageBubbleConfiguration.CollaborativeDocumentBubbleConfiguration || + CollaborativeDocumentConfiguration({}); + + const _pollBubbleConfiguration = + messageBubbleConfiguration.PollBubbleConfiguration || + PollBubbleConfiguration({}); + + const _stickerBubbleConfiguration = + messageBubbleConfiguration.StickerBubbleConfiguration || + StickerBubbleConfiguration({}); + /** * * @returns ID for each Bubble rendered @@ -128,7 +175,7 @@ const CometChatMessageBubble = (props) => { const outerView = `${outerViewWidth} solid ${ _theme.palette.primary[_theme.palette.mode] }`; - let avatarStyle = new AvatarStyles({ + let avatarStyle = new AvatarStyle({ width: _avatarConfiguration?.style?.width, height: _avatarConfiguration?.style?.height, outerViewSpacing: _avatarConfiguration?.style?.outerViewSpacing, @@ -181,6 +228,7 @@ const CometChatMessageBubble = (props) => { * @returns custom Bubble set by The user */ const getCustomView = (customView) => { + //return customView; return React.createElement(customView, { key: messageObject.key, messageBubbleData: messageBubbleData, @@ -255,75 +303,90 @@ const CometChatMessageBubble = (props) => { let textColor; if (alignment === MessageBubbleAlignmentConstants.right) { textColor = { - textColor: _theme.palette.accent900["light"], + textColor: + _textBubbleConfiguration.style.textFont || + _theme.palette.accent900["light"], }; } else { textColor = { - textColor: _theme.palette.accent900["dark"], + textColor: + _textBubbleConfiguration.style.textFont || + _theme.palette.accent900["dark"], }; } + messageStyle = { - ...new BaseStyles({ - width: "", - height: "", + ...new TextBubbleStyle({ + width: _textBubbleConfiguration.style.width, + height: _textBubbleConfiguration.style.height, background: "transparent", - border: "none", - borderRadius: "12px", - activeBackground: "", + border: _textBubbleConfiguration.style.border, + borderRadius: _textBubbleConfiguration.style.borderRadius, + textFont: emojiFont(messageObject.text) + ? emojiFont(messageObject.text) + : _textBubbleConfiguration.style.textFont || + fontHelper(_theme.typography.subtitle1), + ...textColor, + linkPreviewTitleFont: + _textBubbleConfiguration.style.linkPreviewTitleFont || + fontHelper(_theme.typography.title2), + linkPreviewTitleColor: + _textBubbleConfiguration.style.linkPreviewTitleColor || + _theme.palette.accent[_theme.palette.mode], + linkPreviewSubtitleFont: + _textBubbleConfiguration.style.linkPreviewSubtitleFont || + fontHelper(_theme.typography.subtitle2), + linkPreviewSubtitleColor: + _textBubbleConfiguration.style.linkPreviewSubtitleColor || + _theme.palette.accent600[_theme.palette.mode], + linkPreviewBackgroundColor: + _textBubbleConfiguration.style.linkPreviewBackgroundColor || + _theme.palette.background[_theme.palette.mode], }), - textFont: - emojiFont(messageObject.text) || - fontHelper(_theme.typography.subtitle1), - ...textColor, - linkPreviewTitleFont: fontHelper(_theme.typography.title2), - linkPreviewTitleColor: _theme.palette.accent[_theme.palette.mode], - linkPreviewSubtitleFont: fontHelper(_theme.typography.subtitle2), - linkPreviewSubtitleColor: - _theme.palette.accent600[_theme.palette.mode], - linkPreviewBackgroundColor: - _theme.palette.background[_theme.palette.mode], }; return ( ); } + case MessageTypeConstants.image: { messageStyle = { - ...new BaseStyles({ - width: "100%", - height: "168px", - background: "none", - border: "none", - borderRadius: "12px", - activeBackground: "", + ...new ImageBubbleStyle({ + width: _imageBubbleConfiguration.style.width, + height: _imageBubbleConfiguration.style.height, + background: _imageBubbleConfiguration.style.background, + border: _imageBubbleConfiguration.style.border, + borderRadius: _imageBubbleConfiguration.style.borderRadius, + activityBackground: + _imageBubbleConfiguration.style.activityBackground, }), }; return ( ); } case MessageTypeConstants.video: { messageStyle = { - ...new BaseStyles({ - width: "250px", - height: "200px", - background: "none", - border: "none", - borderRadius: "12px", - activeBackground: "", + ...new VideoBubbleStyle({ + width: _videoBubbleConfiguration.style.width, + height: _videoBubbleConfiguration.style.height, + background: + _videoBubbleConfiguration.style.background || "transparent", + border: _videoBubbleConfiguration.style.border, + borderRadius: _videoBubbleConfiguration.style.borderRadius, }), }; return ( @@ -336,13 +399,13 @@ const CometChatMessageBubble = (props) => { } case MessageTypeConstants.audio: { messageStyle = { - ...new BaseStyles({ - width: "250px", - height: "auto", - background: "none", - border: "none", - borderRadius: "12px", - activeBackground: "", + ...new AudioBubbleStyle({ + width: _audioBubbleConfiguration.style.width, + height: _audioBubbleConfiguration.style.height, + background: + _audioBubbleConfiguration.style.background || "transparent", + border: _audioBubbleConfiguration.style.border, + borderRadius: _audioBubbleConfiguration.style.borderRadius, }), iconTint: _theme.palette.primary[_theme.palette.mode], }; @@ -357,19 +420,29 @@ const CometChatMessageBubble = (props) => { case MessageTypeConstants.file: { messageStyle = { - ...new BaseStyles({ - width: "190px", - height: "56px", - background: "transparent", - border: "none", - borderRadius: "12px", - activeBackground: "", + ...new FileBubbleStyle({ + width: _fileBubbleConfiguration.style.width, + height: _fileBubbleConfiguration.style.height, + background: + _fileBubbleConfiguration.style.background || "transparent", + border: _fileBubbleConfiguration.style.border, + borderRadius: _fileBubbleConfiguration.style.borderRadius, + titleFont: + _fileBubbleConfiguration.style.titleFont || + fontHelper(_theme.typography.title2), + subTitleFont: + _fileBubbleConfiguration.style.subTitleFont || + fontHelper(_theme.typography.subtitle2), + iconTint: + _fileBubbleConfiguration.style.iconTint || + _theme.palette.primary[_theme.palette.mode], + titleColor: + _fileBubbleConfiguration.style.titleColor || + _theme.palette.accent[_theme.palette.mode], + subTitleColor: + _fileBubbleConfiguration.style.subTitleColor || + _theme.palette.accent600[_theme.palette.mode], }), - titleFont: fontHelper(_theme.typography.title2), - subTitleFont: fontHelper(_theme.typography.subtitle2), - iconTint: _theme.palette.primary[_theme.palette.mode], - titleColor: _theme.palette.accent[_theme.palette.mode], - subTitleColor: _theme.palette.accent600[_theme.palette.mode], }; return ( { let customMessageStyle = {}; switch (messageObject.type) { case MessageTypeConstants.poll: { - if (alignment === MessageBubbleAlignmentConstants.right) { - customMessageStyle = { - ...new BaseStyles({ - width: "100%", - height: "100%", - background: "transparent", - border: "none", - borderRadius: "12px", - activeBackground: "", - }), - votePercentTextFont: fontHelper(_theme.typography.subtitle1), //not in skecth - votePercentTextColor: - _theme.palette.background[_theme.palette.mode], //not in sketch - pollQuestionTextFont: fontHelper(_theme.typography.subtitle1), - pollQuestionTextColor: _theme.palette.accent[_theme.palette.mode], - pollOptionTextFont: fontHelper(_theme.typography.subtitle1), - pollOptionTextColor: _theme.palette.accent[_theme.palette.mode], - pollOptionsBackground: - _theme.palette.background[_theme.palette.mode], - optionIconTint: - style.optionsIconTint || - _theme.palette.accent500[_theme.palette.mode], - totalVoteCountTextFont: fontHelper(_theme.typography.subtitle2), - totalVoteCountTextColor: - _theme.palette.accent600[_theme.palette.mode], - selectedPollOptionBackground: - style.selectedPollOptionBackground || - _theme.palette.primary[_theme.palette.mode], - }; - } else { + if ( + alignment === MessageBubbleAlignmentConstants.right || + alignment === MessageBubbleAlignmentConstants.left + ) { customMessageStyle = { - ...new BaseStyles({ - width: "100%", - height: "100%", - background: "transparent", - border: "none", - borderRadius: "12px", - activeBackground: "", + ...new PollBubbleStyle({ + width: _pollBubbleConfiguration.style.width, + height: _pollBubbleConfiguration.style.height, + background: + _pollBubbleConfiguration.style.height || "transparent", + border: _pollBubbleConfiguration.style.borde, + borderRadius: _pollBubbleConfiguration.style.borderRadius, + votePercentTextFont: + _pollBubbleConfiguration.style.votePercentTextFont || + fontHelper(_theme.typography.subtitle1), + votePercentTextColor: + _pollBubbleConfiguration.style.votePercentTextColor || + _theme.palette.background[_theme.palette.mode], + pollQuestionTextFont: + _pollBubbleConfiguration.style.pollQuestionTextFont || + fontHelper(_theme.typography.subtitle1), + pollQuestionTextColor: + _pollBubbleConfiguration.style.pollQuestionTextColor || + _theme.palette.accent[_theme.palette.mode], + pollOptionTextFont: + _pollBubbleConfiguration.style.pollOptionTextFont || + fontHelper(_theme.typography.subtitle1), + pollOptionTextColor: + _pollBubbleConfiguration.style.pollOptionTextColor || + _theme.palette.accent[_theme.palette.mode], + pollOptionsBackground: + _pollBubbleConfiguration.style.pollOptionsBackground || + _theme.palette.background[_theme.palette.mode], + optionIconTint: + _pollBubbleConfiguration.style.optionIconTint || + style.optionsIconTint || + _theme.palette.accent500[_theme.palette.mode], + totalVoteCountTextFont: + _pollBubbleConfiguration.style.totalVoteCountTextFont || + fontHelper(_theme.typography.subtitle2), + totalVoteCountTextColor: + _pollBubbleConfiguration.style.totalVoteCountTextColor || + _theme.palette.accent600[_theme.palette.mode], + selectedPollOptionBackground: + _pollBubbleConfiguration.style.selectedPollOptionBackground || + style.selectedPollOptionBackground || + _theme.palette.primary[_theme.palette.mode], }), - background: "transparent", - votePercentTextFont: fontHelper(_theme.typography.subtitle1), - votePercentTextColor: - _theme.palette.background[_theme.palette.mode], - pollQuestionTextColor: _theme.palette.accent[_theme.palette.mode], - pollQuestionTextFont: fontHelper(_theme.typography.subtitle1), - pollOptionTextFont: fontHelper(_theme.typography.subtitle1), - pollOptionTextColor: _theme.palette.accent[_theme.palette.mode], - pollOptionsBackground: - _theme.palette.background[_theme.palette.mode], - totalVoteCountTextFont: fontHelper(_theme.typography.subtitle2), - totalVoteCountTextColor: - _theme.palette.accent600[_theme.palette.mode], - optionIconTint: - style.optionsIconTint || - _theme.palette.accent500[_theme.palette.mode], - pollOptionBorder: "none", - selectedPollOptionBackground: - style.selectedPollOptionBackground || - _theme.palette.primary[_theme.palette.mode], }; } + return ( { loggedInUser={loggedInUser || loggedInUser} theme={_theme} style={customMessageStyle} + pollOptionBubbleConfiguration={ + _pollBubbleConfiguration.pollOptionBubbleConfiguration + } /> ); } @@ -470,13 +536,13 @@ const CometChatMessageBubble = (props) => { alignment === MessageBubbleAlignmentConstants.left ) { customMessageStyle = { - ...new BaseStyles({ - width: "150px", - height: "auto", - background: "transparent", - border: "none", - borderRadius: "12px", - activeBackground: "", + ...new StickerBubbleStyle({ + width: _stickerBubbleConfiguration.style.width, + height: _stickerBubbleConfiguration.style.height, + background: + _stickerBubbleConfiguration.style.background || "transparent", + border: _stickerBubbleConfiguration.style.border, + borderRadius: _stickerBubbleConfiguration.style.borderRadius, }), }; } @@ -489,52 +555,54 @@ const CometChatMessageBubble = (props) => { ); } case MessageTypeConstants.whiteboard: { - if (alignment === MessageBubbleAlignmentConstants.right) { - customMessageStyle = { - ...new BaseStyles({ - width: "228px", - height: "134px", - background: "transparent", - border: "none", - borderRadius: "12px", - activeBackground: "", - }), - titleFont: fontHelper(_theme.typography.title2), - iconTint: _theme.palette.accent700[_theme.palette.mode], - titleColor: _theme.palette.accent[_theme.palette.mode], - subTitleColor: _theme.palette.accent600[_theme.palette.mode], - subTitleFont: fontHelper(_theme.typography.subtitle2), - buttonTextColor: _theme.palette.primary[_theme.palette.mode], - buttonTextFont: fontHelper(_theme.typography.title2), - buttonBackground: "transparent", - }; - } else { + if ( + alignment === MessageBubbleAlignmentConstants.right || + alignment === MessageBubbleAlignmentConstants.left + ) { customMessageStyle = { - ...new BaseStyles({ - width: "228px", - height: "134px", - background: "transparent", - border: "none", - borderRadius: "12px", - activeBackground: "", + ...new WhiteboardBubbleStyle({ + width: _whiteboardBubbleConfiguration.style.width, + height: _whiteboardBubbleConfiguration.style.height, + background: + _whiteboardBubbleConfiguration.style.background || + "transparent", + border: _whiteboardBubbleConfiguration.style.border, + borderRadius: _whiteboardBubbleConfiguration.style.borderRadius, + titleFont: + _whiteboardBubbleConfiguration.style.titleFont || + fontHelper(_theme.typography.title2), + iconTint: + _whiteboardBubbleConfiguration.style.iconTint || + _theme.palette.accent700[_theme.palette.mode], + titleColor: + _whiteboardBubbleConfiguration.style.titleColor || + _theme.palette.accent[_theme.palette.mode], + subTitleColor: + _whiteboardBubbleConfiguration.style.subTitleColor || + _theme.palette.accent600[_theme.palette.mode], + subTitleFont: + _whiteboardBubbleConfiguration.style.subTitleFont || + fontHelper(_theme.typography.subtitle2), + buttonTextColor: + _whiteboardBubbleConfiguration.style.buttonTextColor || + _theme.palette.primary[_theme.palette.mode], + buttonTextFont: + _whiteboardBubbleConfiguration.style.buttonTextFont || + fontHelper(_theme.typography.title2), + buttonBackground: + _whiteboardBubbleConfiguration.style.buttonBackground || + "transparent", }), - titleFont: fontHelper(_theme.typography.title2), - iconTint: _theme.palette.accent700[_theme.palette.mode], - titleColor: _theme.palette.accent[_theme.palette.mode], - subTitleColor: _theme.palette.accent600[_theme.palette.mode], - subTitleFont: fontHelper(_theme.typography.subtitle2), - buttonTextColor: _theme.palette.primary[_theme.palette.mode], - buttonTextFont: fontHelper(_theme.typography.title2), - buttonBackground: "transparent", }; } + return ( { ); } case MessageTypeConstants.document: { - if (alignment === MessageBubbleAlignmentConstants.right) { - customMessageStyle = { - ...new BaseStyles({ - width: "228px", - height: "134px", - background: "transparent", - border: "none", - borderRadius: "12px", - activeBackground: "", - }), - titleFont: fontHelper(_theme.typography.title2), - iconTint: _theme.palette.accent700[_theme.palette.mode], - titleColor: _theme.palette.accent[_theme.palette.mode], - subTitleColor: _theme.palette.accent600[_theme.palette.mode], - subTitleFont: fontHelper(_theme.typography.subtitle2), - buttonTextColor: _theme.palette.primary[_theme.palette.mode], - buttonTextFont: fontHelper(_theme.typography.title2), - buttonBackground: "transparent", - }; - } else { + if ( + alignment === MessageBubbleAlignmentConstants.right || + alignment === MessageBubbleAlignmentConstants.left + ) { customMessageStyle = { - ...new BaseStyles({ - width: "228px", - height: "134px", - background: "transparent", - border: "none", - borderRadius: "12px", - activeBackground: "", + ...new DocumentBubbleStyle({ + width: _documentBubbleConfiguration.style.width, + height: _documentBubbleConfiguration.style.height, + background: + _documentBubbleConfiguration.style.background || + "transparent", + border: _documentBubbleConfiguration.style.border, + borderRadius: _documentBubbleConfiguration.style.borderRadius, }), - titleFont: fontHelper(_theme.typography.title2), - iconTint: _theme.palette.accent700[_theme.palette.mode], - titleColor: _theme.palette.accent[_theme.palette.mode], - subTitleColor: _theme.palette.accent600[_theme.palette.mode], - subTitleFont: fontHelper(_theme.typography.subtitle2), - buttonTextColor: _theme.palette.primary[_theme.palette.mode], - buttonTextFont: fontHelper(_theme.typography.title2), - buttonBackground: "transparent", + titleFont: + _documentBubbleConfiguration.style.titleFont || + fontHelper(_theme.typography.title2), + iconTint: + _documentBubbleConfiguration.style.iconTint || + _theme.palette.accent700[_theme.palette.mode], + titleColor: + _documentBubbleConfiguration.style.titleColor || + _theme.palette.accent[_theme.palette.mode], + subTitleColor: + _documentBubbleConfiguration.style.subTitleColor || + _theme.palette.accent600[_theme.palette.mode], + subTitleFont: + _documentBubbleConfiguration.style.subTitleFont || + fontHelper(_theme.typography.subtitle2), + buttonTextColor: + _documentBubbleConfiguration.style.buttonTextColor || + _theme.palette.primary[_theme.palette.mode], + buttonTextFont: + _documentBubbleConfiguration.style.buttonTextFont || + fontHelper(_theme.typography.title2), + buttonBackground: + _documentBubbleConfiguration.style.buttonBackground || + "transparent", }; } return ( @@ -642,7 +711,7 @@ const CometChatMessageBubble = (props) => { return ( ); }; @@ -662,7 +731,12 @@ const CometChatMessageBubble = (props) => { messageObject={messageObject} loggedInUser={loggedInUser} addReactionIconURL={_messageReactionsConfiguration.addReactionIconURL} - style={reactionsStyle(_theme, alignment, messageObject)} + style={reactionsStyle( + _theme, + alignment, + messageObject, + _messageReactionsConfiguration + )} updateReaction={updateReaction} /> ); diff --git a/src/components/Messages/Bubbles/CometChatMessageBubble/style.js b/src/components/Messages/Bubbles/CometChatMessageBubble/style.js index 70e78b24..37cf4d8e 100644 --- a/src/components/Messages/Bubbles/CometChatMessageBubble/style.js +++ b/src/components/Messages/Bubbles/CometChatMessageBubble/style.js @@ -5,6 +5,8 @@ import { messageBubbleAlignment, } from "../../.."; import { fontHelper } from "../../.."; +import { MenuListStyle } from "../../../Shared"; +import { MessageReactionsStyle } from "../../"; export const translatedTextBlockStyle = (alignment, theme) => { let color = theme.palette.accent900["light"]; @@ -49,30 +51,61 @@ export const translateLabelText = (alignment, theme) => { }; } }; -export const deleteBubbleStyle = (theme) => { +export const deleteBubbleStyle = (theme, deleteBubbledConfiguration) => { return { - width: "100%", - height: "auto", - border: `1px dashed ${theme.palette.accent400[theme.palette.mode]}`, - background: "transparent", - borderRadius: "12px", - textFont: fontHelper(theme.typography.subtitle1), - textColor: theme.palette.accent400[theme.palette.mode], + width: deleteBubbledConfiguration.style.width || "100%", + height: deleteBubbledConfiguration.style.height || "auto", + border: + deleteBubbledConfiguration.style.border || + `1px dashed ${theme.palette.accent400[theme.palette.mode]}`, + background: deleteBubbledConfiguration.style.background || "transparent", + borderRadius: deleteBubbledConfiguration.style.borderRadius || "12px", + textFont: + deleteBubbledConfiguration.style.textFont || + fontHelper(theme.typography.subtitle1), + textColor: + deleteBubbledConfiguration.style.textColor || + theme.palette.accent400[theme.palette.mode], }; }; -export const reactionsStyle = (theme, alignment, messageObject) => { - let iconTint = theme.palette.background[theme.palette.mode]; +export const reactionsStyle = ( + theme, + alignment, + messageObject, + messageReactionsConfiguration +) => { + let addReactionIconTint = + messageReactionsConfiguration.style.addReactionIconTint || + theme.palette.accent300[theme.palette.mode]; if (messageObject?.type !== "text") { - iconTint = theme.palette.accent500[theme.palette.mode]; + addReactionIconTint = + messageReactionsConfiguration.style.addReactionIconTint || + theme.palette.accent500[theme.palette.mode]; } else if (alignment === messageBubbleAlignment.left) { - iconTint = theme.palette.accent500[theme.palette.mode]; + addReactionIconTint = + messageReactionsConfiguration.style.addReactionIconTint || + theme.palette.accent500[theme.palette.mode]; } return { - width: "100%", - height: "auto", - borderRadius: "11px", - iconTint: iconTint, + ...new MessageReactionsStyle({ + width: messageReactionsConfiguration.style.width, + height: messageReactionsConfiguration.style.height, + borderRadius: messageReactionsConfiguration.style.borderRadius, + addReactionIconTint: addReactionIconTint, + border: messageReactionsConfiguration.style.border, + background: messageReactionsConfiguration.style.background, + activeBackground: messageReactionsConfiguration.style.activeBackground, + textFont: + messageReactionsConfiguration.style.textFont || + fontHelper(theme.typography.caption1), + textColor: + messageReactionsConfiguration.style.textColor || + theme.palette.background[theme.palette.mode], + addReactionIconBackground: + messageReactionsConfiguration.style.addReactionIconBackground || + theme.palette.primary[theme.palette.mode], + }), }; }; @@ -100,6 +133,22 @@ export const messageOptionStyle = ( } return { + ...new MenuListStyle({ + width: "auto", + height: "36px", + background: theme.palette.background[theme.palette.mode], + border: `1px solid ${theme.palette.accent200[theme.palette.mode]}`, + borderRadius: "10px", + activeBackground: "none", + + textFont: fontHelper(theme.typography.subtitle1), + textColor: theme.palette.accent600[theme.palette.mode], + iconTint: theme.palette.accent600[theme.palette.mode], + moreIconTint: theme.palette.accent600[theme.palette.mode], + iconBorder: "none", + iconBackground: "none", + iconBorderRadius: "none", + }), position: "absolute", zIndex: "1", display: "flex", @@ -108,13 +157,6 @@ export const messageOptionStyle = ( top: "-28px", ...position, ...direction, - height: "36px", - border: `1px solid ${theme.palette.accent200[theme.palette.mode]}`, - background: theme.palette.background[theme.palette.mode], - moreIconTint: theme.palette.accent600[theme.palette.mode], - textFont: fontHelper(theme.typography.subtitle1), - textColor: theme.palette.accent600[theme.palette.mode], - iconTint: theme.palette.accent600[theme.palette.mode], }; }; @@ -155,7 +197,7 @@ export const messageRightGutterStyle = () => { export const messageBlockStyle = (alignment, style, messageObject, theme) => { let backgroundColor = ""; - let alignItems = "center"; + let alignItems = "flex-end"; if ( messageObject.type === MessageTypeConstants.image || @@ -227,7 +269,7 @@ export const messageKitReceiptStyle = () => { export const messageTimestampStyle = (style, theme) => { return { - color: style.timestampColor || theme.palette.accent[theme.palette.mode], + color: style.timetampColor || theme.palette.accent[theme.palette.mode], font: style.timestampFont || fontHelper(theme.typography.caption2), display: "flex", alignItems: "center", diff --git a/src/components/Messages/Bubbles/CometChatPollBubble/PollBubbleConfiguration.js b/src/components/Messages/Bubbles/CometChatPollBubble/PollBubbleConfiguration.js index d8e575fe..00b8c8cc 100644 --- a/src/components/Messages/Bubbles/CometChatPollBubble/PollBubbleConfiguration.js +++ b/src/components/Messages/Bubbles/CometChatPollBubble/PollBubbleConfiguration.js @@ -1,10 +1,27 @@ -class PollBubbleConfiguration{ +import ImageURL from "./resources/checkmark.svg"; + +import { PollBubbleStyle } from "../../"; +import { PollOptionBubbleConfiguration } from "../../"; + +/** + * @class PollBubbleConfiguration + * @description PollBubbleConfiguration class is used for defining the PollBubbleConfiguration templates. + * @param {string} optionIconURL + * @param {object} style + */ + +class PollBubbleConfiguration { constructor({ - style = {}, - iconURL = "" + optionIconURL = ImageURL, + style = new PollBubbleStyle({}), + pollOptionBubbleConfiguration = new PollOptionBubbleConfiguration({}), }) { - this.style = style; - this.iconURL = iconURL; - }; -} - export { PollBubbleConfiguration }; \ No newline at end of file + this.style = new PollBubbleStyle(style ?? {}); + this.optionIconURL = optionIconURL; + this.pollOptionBubbleConfiguration = new PollOptionBubbleConfiguration( + pollOptionBubbleConfiguration || {} + ); + } +} + +export { PollBubbleConfiguration }; diff --git a/src/components/Messages/Bubbles/CometChatPollBubble/PollBubbleStyle.js b/src/components/Messages/Bubbles/CometChatPollBubble/PollBubbleStyle.js new file mode 100644 index 00000000..f3012594 --- /dev/null +++ b/src/components/Messages/Bubbles/CometChatPollBubble/PollBubbleStyle.js @@ -0,0 +1,68 @@ +import { BaseStyles } from "../../../Shared"; +/** + * @class PollBubbleStyle + * @param {string} height + * @param {string} width + * @param {string} border + * @param {string} background + * @param {string} borderRadius + * @param {string} pollQuestionTextFont + * @param {string} pollQuestionTextColor + * @param {string} pollOptionTextFont + * @param {string} pollOptionTextColor + * @param {string} pollOptionBackground + * @param {string} selectedPollOptionBackgroun + * @param {string} totalVoteCountTextFont + * @param {string} totalVoteCountTextColor + * @param {string} votePercentTextFont + * @param {string} votePercentTextColor + * @param {string} optionsIconTint + * @param {string} optionBorderRadius + * @param {string} optionBorder + */ + +class PollBubbleStyle extends BaseStyles { + constructor({ + pollQuestionTextFont = "", + pollQuestionTextColor = "", + pollOptionTextFont = "", + pollOptionTextColor = "", + pollOptionsBackground = "", + selectedPollOptionBackground = "", + totalVoteCountTextFont = "", + totalVoteCountTextColor = "", + votePercentTextFont = "", + votePercentTextColor = "", + optionsIconTint = "", + optionBorderRadius = "8px", + optionBorder = "none", + + width = "100%", + height = "160px", + border = "", + borderRadius = "12px", + background = "", + }) { + super({ + width, + height, + background, + border, + borderRadius, + }); + this.pollQuestionTextFont = pollQuestionTextFont; + this.pollQuestionTextColor = pollQuestionTextColor; + this.pollOptionTextFont = pollOptionTextFont; + this.pollOptionTextColor = pollOptionTextColor; + this.pollOptionsBackground = pollOptionsBackground; + this.selectedPollOptionBackground = selectedPollOptionBackground; + this.totalVoteCountTextFont = totalVoteCountTextFont; + this.totalVoteCountTextColor = totalVoteCountTextColor; + this.votePercentTextFont = votePercentTextFont; + this.votePercentTextColor = votePercentTextColor; + this.optionsIconTint = optionsIconTint; + this.optionBorderRadius = optionBorderRadius; + this.optionBorder = optionBorder; + } +} +export { PollBubbleStyle }; diff --git a/src/components/Messages/Bubbles/CometChatPollBubble/index.js b/src/components/Messages/Bubbles/CometChatPollBubble/index.js index 3470e422..a2cb9867 100644 --- a/src/components/Messages/Bubbles/CometChatPollBubble/index.js +++ b/src/components/Messages/Bubbles/CometChatPollBubble/index.js @@ -6,7 +6,10 @@ import { CometChatTheme, fontHelper } from "../../.."; import { CometChatPollOptionBubble } from "../"; -import { CometChatMessageEvents } from "../../../"; +import { + CometChatMessageEvents, + PollOptionBubbleConfiguration, +} from "../../../"; import { Hooks } from "./hooks"; @@ -38,6 +41,9 @@ const CometChatPollBubble = (props) => { const [pollId, setPollId] = React.useState(); const theme = new CometChatTheme(props.theme) || new CometChatTheme({}); + const _pollOptionBubbleConfiguration = new PollOptionBubbleConfiguration( + props.pollOptionBubbleConfiguration || {} + ); const getPollOptions = () => { let votePercent = 0; const optionsTemplate = []; @@ -45,17 +51,6 @@ const CometChatPollBubble = (props) => { const fraction = option.count / voteCount; votePercent = fraction.toLocaleString("en", { style: "percent" }); - let backgroundColor = - props.style.background || theme.palette.background[theme.palette.mode]; - if ( - option.hasOwnProperty("voters") && - option.voters.hasOwnProperty(props.loggedInUser?.uid) && - voteCount - ) { - backgroundColor = theme?.palette?.getPrimary(); - } else { - backgroundColor = theme.palette.accent100[theme.palette.mode]; - } optionsTemplate.push( { theme={theme} key={optionKey} style={{ + width: props.style.width, + height: props.style.height, + background: + props.style.background || + theme.palette.background[theme.palette.mode], + border: props.style.optionBorder || "none", + borderRadius: props.style.optionBorderRadius || "8px", + pollOptionTextFont: props.style.pollOptionsFont || + _pollOptionBubbleConfiguration.style.pollOptionTextFont || fontHelper(theme.typography.subtitle1), pollOptionTextColor: props.style.pollOptionsColor || + _pollOptionBubbleConfiguration.style.pollOptionTextColor || theme?.palette?.getAccent(), pollOptionBackground: props.style.pollOptionsBackground, optionIconTint: props.style.iconTint || + _pollOptionBubbleConfiguration.style.iconTint || theme.palette.accent500[theme.palette.mode], selectedPollOptionBackground: - backgroundColor || theme?.palette?.getPrimary(), - pollOptionBorder: props.style.pollOptionBorder, + props.style.selectedPollOptionBackground || + _pollOptionBubbleConfiguration.style + .selectedPollOptionBackground || + theme.palette.primary[theme.palette.mode], votePercentTextFont: props.style.votePercentTextFont || + _pollOptionBubbleConfiguration.style.votePercentTextFont || fontHelper(theme.typography.subtitle1), votePercentTextColor: - props.style.pollOptionsColor || - theme?.palette?.getAccent(), + props.style.votePercentTextColor || + _pollOptionBubbleConfiguration.style.votePercentTextColor || + theme.palette.background[theme.palette.mode], }} loggedInUser={props.loggedInUser} onClick={votingPoll} @@ -114,12 +124,12 @@ const CometChatPollBubble = (props) => { {question}

-
    {getPollOptions()} -
+
{ `${props.style.pollOptionBackground}` || theme.palette.background[theme.palette.mode], margin: "5px 0", - borderRadius: "8px", + borderRadius: props.style.borderRadius || "8px", + border: props.style.border || "none", display: "flex", - width: "100%", + width: props.style.width, minWidth: "220px", cursor: "pointer", position: "relative", @@ -52,9 +53,7 @@ export const answerWrapperStyle = (props, theme) => { return { width: "100%", height: "34px", - color: - props.style.pollOptionTextColor || - theme?.palette?.getAccent(), + color: props.style.pollOptionTextColor || theme?.palette?.getAccent(), display: "flex", alignItems: "center", zIndex: "2", @@ -85,9 +84,7 @@ export const pollOptionTitleStyle = (props, theme) => { marginLeft: "5%", font: props.style.pollOptionTextFont || fontHelper(theme.typography.subtitle1), - color: - props.style.pollOptionTextColor || - theme?.palette?.getAccent(), + color: props.style.pollOptionTextColor || theme?.palette?.getAccent(), whiteSpace: "pre-wrap", wordWrap: "break-word", }; @@ -99,9 +96,7 @@ export const pollOptionPercentTextStyle = (props, theme) => { marginRight: "5%", font: props.style.votePercentTextFont || fontHelper(theme.typography.subtitle1), - color: - props.style.votePercentTextColor || - theme?.palette?.getAccent(), + color: props.style.votePercentTextColor || theme?.palette?.getAccent(), textAlign: "center", }; }; diff --git a/src/components/Messages/Bubbles/CometChatStickerBubble/StickerBubbleConfiguration.js b/src/components/Messages/Bubbles/CometChatStickerBubble/StickerBubbleConfiguration.js index ac0643d5..0d81ae20 100644 --- a/src/components/Messages/Bubbles/CometChatStickerBubble/StickerBubbleConfiguration.js +++ b/src/components/Messages/Bubbles/CometChatStickerBubble/StickerBubbleConfiguration.js @@ -1,10 +1,15 @@ -class StickerBubbleConfiguration{ - constructor({ - style = {}, - - }) { - this.style = style; - }; -} - - export { StickerBubbleConfiguration }; \ No newline at end of file +import { StickerBubbleStyle } from "../../"; + +/** + * @class StickerBubbleConfiguration + * @description StickerBubbleConfiguration class is used for defining the StickerBubbleConfiguration templates. + * @param {object} style + */ + +class StickerBubbleConfiguration { + constructor({ style = new StickerBubbleStyle({}) }) { + this.style = new StickerBubbleStyle(style ?? {}); + } +} + +export { StickerBubbleConfiguration }; diff --git a/src/components/Messages/Bubbles/CometChatStickerBubble/StickerBubbleStyle.js b/src/components/Messages/Bubbles/CometChatStickerBubble/StickerBubbleStyle.js new file mode 100644 index 00000000..12c2c3d7 --- /dev/null +++ b/src/components/Messages/Bubbles/CometChatStickerBubble/StickerBubbleStyle.js @@ -0,0 +1,31 @@ +import { BaseStyles } from "../../../Shared"; + +/** + * @class StickerBubbleStyle + * @description StickerBubbleStyle is used to defining sticker bubble styles. + * @param {string} width + * @param {string} height + * @param {string} border + * @param {string} borderRadius + * @param {string} background + */ + +class StickerBubbleStyle extends BaseStyles { + constructor({ + width = "150px", + height = "auto", + background = "", + border = "", + borderRadius = "12px", + }) { + super({ + width, + height, + background, + border, + borderRadius, + }); + } +} + +export { StickerBubbleStyle }; diff --git a/src/components/Messages/Bubbles/CometChatTextBubble/TextBubbleConfiguration.js b/src/components/Messages/Bubbles/CometChatTextBubble/TextBubbleConfiguration.js index e087edb8..7d97705f 100644 --- a/src/components/Messages/Bubbles/CometChatTextBubble/TextBubbleConfiguration.js +++ b/src/components/Messages/Bubbles/CometChatTextBubble/TextBubbleConfiguration.js @@ -1,10 +1,20 @@ +import { TextBubbleStyle } from "../../"; -class TextBubbleConfiguration{ - constructor({ - style = {}, - - }) { - this.style = style; - }; - } -export { TextBubbleConfiguration }; \ No newline at end of file +/** + * @class TextBubbleConfiguration + * @description TextBubbleConfiguration class is used for defining the TextBubbleConfiguration templates. + * @param {boolean} showEmojiInLargerSize + * @param {object} style + */ + +class TextBubbleConfiguration { + constructor({ + showEmojiInLargerSize = false, + style = new TextBubbleStyle({}), + }) { + this.style = new TextBubbleStyle(style ?? {}); + this.showEmojiInLargerSize = showEmojiInLargerSize; + } +} + +export { TextBubbleConfiguration }; diff --git a/src/components/Messages/Bubbles/CometChatTextBubble/TextBubbleStyle.js b/src/components/Messages/Bubbles/CometChatTextBubble/TextBubbleStyle.js new file mode 100644 index 00000000..5a986a6f --- /dev/null +++ b/src/components/Messages/Bubbles/CometChatTextBubble/TextBubbleStyle.js @@ -0,0 +1,51 @@ +import { BaseStyles } from "../../../Shared"; + +/** + * @class TextBubbleStyle + * @description TextBubbleStyle is used to defining text bubble style + * @param {string} width + * @param {string} height + * @param {string} border + * @param {string} borderRadius + * @param {string} background + * @param {string} textFont + * @param {string} textColor + * @param {string} linkPreviewTitleColor + * @param {string} linkPreviewTitleFont + * @param {string} linkPreviewSubtitleColor + * @param {string} linkPreviewSubtitleFont + * @param {string} textBubbleBackgroundColor + */ + +class TextBubbleStyle extends BaseStyles { + constructor({ + width = "auto", + height = "auto", + background = "", + border = "", + borderRadius = "8px", + + textFont = "", + textColor = "", + linkPreviewTitleColor = "", + linkPreviewTitleFont = "", + linkPreviewSubtitleColor = "", + linkPreviewSubtitleFont = "", + }) { + super({ + width, + height, + background, + border, + borderRadius, + }); + this.textFont = textFont; + this.textColor = textColor; + this.linkPreviewTitleColor = linkPreviewTitleColor; + this.linkPreviewTitleFont = linkPreviewTitleFont; + this.linkPreviewSubtitleColor = linkPreviewSubtitleColor; + this.linkPreviewSubtitleFont = linkPreviewSubtitleFont; + } +} + +export { TextBubbleStyle }; diff --git a/src/components/Messages/Bubbles/CometChatTextBubble/index.js b/src/components/Messages/Bubbles/CometChatTextBubble/index.js index 98fcd663..15e714f0 100644 --- a/src/components/Messages/Bubbles/CometChatTextBubble/index.js +++ b/src/components/Messages/Bubbles/CometChatTextBubble/index.js @@ -22,8 +22,10 @@ import { previewTitleStyle, previewLinkStyle, linkSubtitleStyle, + dangerStyle, } from "./style"; import { Hooks } from "./hooks"; +import { dialogLoadingWrapperStyle } from "../../../Shared/UtilityComponents/CometChatConfirmDialog/style"; const CometChatTextBubble = (props) => { const [linkPreviewData, setLinkPreview] = React.useState(); @@ -32,37 +34,8 @@ const CometChatTextBubble = (props) => { ? new CometChatTheme(props?.theme) : new CometChatTheme({}); - const linkify = (messageText) => { - let outputStr = messageText?.replace( - phoneNumPattern, - "$&" - ); - outputStr = outputStr?.replace( - emailPattern, - "$&" - ); - - const results = outputStr?.match(urlPattern); - - results && - results?.forEach((url) => { - url = url.trim(); - let normalizedURL = url; - if (!url.startsWith("http")) { - normalizedURL = `//${url}`; - } - outputStr = outputStr.replace( - url, - `${url}` - ); - }); - - return outputStr; - }; - function linkPreviewHandler(preview) { const linkObject = preview["links"][0]; - const linkText = linkObject["url"]; return ( @@ -98,6 +71,35 @@ const CometChatTextBubble = (props) => { ); } + const linkify = (messageText) => { + let outputStr = messageText?.replace( + phoneNumPattern, + `$&` + ); + + outputStr = outputStr?.replace( + emailPattern, + `$&` + ); + + const results = outputStr?.match(urlPattern); + + results && + results?.forEach((url) => { + url = url.trim(); + let normalizedURL = url; + if (!url.startsWith("http")) { + normalizedURL = `//${url}`; + } + outputStr = outputStr.replace( + url, + `${url}` + ); + }); + + return outputStr; + }; + Hooks(props, setLinkPreview); const getMessageText = () => { @@ -157,9 +159,6 @@ const CometChatTextBubble = (props) => { } const formatedText = linkify(messageText); - const parseText = () => ( -
- ); return (
{ >

- {parseText()} +

); @@ -182,8 +184,7 @@ const CometChatTextBubble = (props) => { CometChatTextBubble.defaultProps = { messageObject: null, text: "", - linkPreviewTitle: "", - linkPreviewSubtitle: "", + showEmojiInLargerSize: "", style: { width: "", height: "", @@ -203,8 +204,7 @@ CometChatTextBubble.defaultProps = { CometChatTextBubble.propTypes = { messageObject: PropTypes.object, text: PropTypes.string, - linkPreviewTitle: PropTypes.string, - linkPreviewSubtitle: PropTypes.string, + showEmojiInLargerSize: PropTypes.string, style: PropTypes.object, }; diff --git a/src/components/Messages/Bubbles/CometChatTextBubble/style.js b/src/components/Messages/Bubbles/CometChatTextBubble/style.js index 8c72b002..f7d12315 100644 --- a/src/components/Messages/Bubbles/CometChatTextBubble/style.js +++ b/src/components/Messages/Bubbles/CometChatTextBubble/style.js @@ -131,3 +131,7 @@ export const linkSubtitleStyle = (props, theme) => { textDecoration: "none", }; }; + +export const dangerStyle = () => { + return {}; +}; diff --git a/src/components/Messages/Bubbles/CometChatVideoBubble/VideoBubbleConfiguration.js b/src/components/Messages/Bubbles/CometChatVideoBubble/VideoBubbleConfiguration.js index 230ca88e..6f196e5b 100644 --- a/src/components/Messages/Bubbles/CometChatVideoBubble/VideoBubbleConfiguration.js +++ b/src/components/Messages/Bubbles/CometChatVideoBubble/VideoBubbleConfiguration.js @@ -1,6 +1,15 @@ +import { VideoBubbleStyle } from "../../"; + +/** + * @class VideoBubbleConfiguration + * @description VideoBubbleConfiguration class is used for defining the VideoBubbleConfiguration templates. + * @param {object} style + */ + class VideoBubbleConfiguration { - constructor({ style = {} }) { - this.style = style; - } + constructor({ style = new VideoBubbleStyle({}) }) { + this.style = new VideoBubbleStyle(style ?? {}); + } } + export { VideoBubbleConfiguration }; diff --git a/src/components/Messages/Bubbles/CometChatVideoBubble/VideoBubbleStyle.js b/src/components/Messages/Bubbles/CometChatVideoBubble/VideoBubbleStyle.js new file mode 100644 index 00000000..d8bd8772 --- /dev/null +++ b/src/components/Messages/Bubbles/CometChatVideoBubble/VideoBubbleStyle.js @@ -0,0 +1,31 @@ +import { BaseStyles } from "../../../Shared"; + +/** + * @class VideoBubbleStyle + * @description VideoBubbleStyle is used to defining video bubble styles. + * @param {string} width + * @param {string} height + * @param {string} border + * @param {string} borderRadius + * @param {string} background + */ + +class VideoBubbleStyle extends BaseStyles { + constructor({ + width = "250px", + height = "200px", + background = "", + border = "", + borderRadius = "12px", + }) { + super({ + width, + height, + background, + border, + borderRadius, + }); + } +} + +export { VideoBubbleStyle }; diff --git a/src/components/Messages/Bubbles/CometChatWhiteboardBubble/CollaborativeWhiteboardConfiguration.js b/src/components/Messages/Bubbles/CometChatWhiteboardBubble/CollaborativeWhiteboardConfiguration.js index 2fc83193..6129d68a 100644 --- a/src/components/Messages/Bubbles/CometChatWhiteboardBubble/CollaborativeWhiteboardConfiguration.js +++ b/src/components/Messages/Bubbles/CometChatWhiteboardBubble/CollaborativeWhiteboardConfiguration.js @@ -1,11 +1,22 @@ -import whiteBoardIconURL from "../../../Messages/Bubbles/CometChatWhiteboardBubble/resources/collaborative-whiteboard.svg" -class CollaborativeWhiteboardConfiguration{ +import whiteBoardIconURL from "../../../Messages/Bubbles/CometChatWhiteboardBubble/resources/collaborative-whiteboard.svg"; + +import { WhiteboardBubbleStyle } from "../../"; + +/** + * @class CollaborativeWhiteboardConfiguration + * @description CollaborativeWhiteboardConfiguration class is used for defining the CollaborativeWhiteboardConfiguration templates. + * @param {string} iconURL + * @param {object} style + */ + +class CollaborativeWhiteboardConfiguration { constructor({ - style = {}, - iconURL = whiteBoardIconURL + iconURL = whiteBoardIconURL, + style = new WhiteboardBubbleStyle({}), }) { - this.style = style; + this.style = new WhiteboardBubbleStyle(style ?? {}); this.iconURL = iconURL; - }; -} - export { CollaborativeWhiteboardConfiguration }; \ No newline at end of file + } +} + +export { CollaborativeWhiteboardConfiguration }; diff --git a/src/components/Messages/Bubbles/CometChatWhiteboardBubble/WhiteboardBubbleStyle.js b/src/components/Messages/Bubbles/CometChatWhiteboardBubble/WhiteboardBubbleStyle.js new file mode 100644 index 00000000..5fbcee90 --- /dev/null +++ b/src/components/Messages/Bubbles/CometChatWhiteboardBubble/WhiteboardBubbleStyle.js @@ -0,0 +1,58 @@ +import { BaseStyles } from "../../../Shared"; + +/** + * @class WhiteboardBubbleStyle + * @description WhiteboardBubbleStyle is used to defining whiteboard bubble style + * @param {string} width + * @param {string} height + * @param {string} titleFont + * @param {string} border + * @param {string} borderRadius + * @param {string} background + * @param {string} titleColor + * @param {string} subTitleFont + * @param {string} subTitleColor + * @param {string} iconTint + * @param {string} buttonBackground + * @param {string} buttonTextColor + * @param {string} buttonTextFont + * @param {string} dividerTint + */ + +class WhiteboardBubbleStyle extends BaseStyles { + constructor({ + width = "228px", + height = "auto", + background = "", + border = "", + borderRadius = "8px", + titleFont = "", + titleColor = "", + subTitleFont = "", + subTitleColor = "", + iconTint = "", + buttonBackground = "", + buttonTextColor = "", + buttonTextFont = "", + dividerTint = "", + }) { + super({ + width, + height, + background, + border, + borderRadius, + }); + this.titleFont = titleFont; + this.titleColor = titleColor; + this.subTitleFont = subTitleFont; + this.subTitleColor = subTitleColor; + this.iconTint = iconTint; + this.buttonBackground = buttonBackground; + this.buttonTextColor = buttonTextColor; + this.buttonTextFont = buttonTextFont; + this.dividerTint = dividerTint; + } +} + +export { WhiteboardBubbleStyle }; diff --git a/src/components/Messages/Bubbles/index.js b/src/components/Messages/Bubbles/index.js index 9b4928ed..16710e0e 100644 --- a/src/components/Messages/Bubbles/index.js +++ b/src/components/Messages/Bubbles/index.js @@ -11,9 +11,21 @@ import { CometChatStickerBubble } from "./CometChatStickerBubble"; import { CometChatDocumentBubble } from "./CometChatDocumentBubble"; import { CometChatWhiteboardBubble } from "./CometChatWhiteboardBubble"; import { CometChatPollBubble } from "./CometChatPollBubble"; -import { MessageBubbleStyles } from "./CometChatMessageBubble/MessageBubbleStyle"; import { CometChatPollOptionBubble } from "./CometChatPollOptionBubble"; +/**message bubbles styles */ +import { MessageBubbleStyle } from "./CometChatMessageBubble/MessageBubbleStyle"; +import { TextBubbleStyle } from "./CometChatTextBubble/TextBubbleStyle"; +import { FileBubbleStyle } from "./CometChatFileBubble/FileBubbleStyle"; +import { AudioBubbleStyle } from "./CometChatAudioBubble/AudioBubbleStyle"; +import { VideoBubbleStyle } from "./CometChatVideoBubble/VideoBubbleStyle"; +import { StickerBubbleStyle } from "./CometChatStickerBubble/StickerBubbleStyle"; +import { ImageBubbleStyle } from "./CometChatImageBubble/ImageBubbleStyle"; +import { WhiteboardBubbleStyle } from "./CometChatWhiteboardBubble/WhiteboardBubbleStyle"; +import { DocumentBubbleStyle } from "./CometChatDocumentBubble/DocumentBubbleStyle"; +import { PollBubbleStyle } from "./CometChatPollBubble/PollBubbleStyle"; +import { PollOptionBubbleStyle } from "./CometChatPollOptionBubble/PollOptionBubbleStyle"; + export { CometChatAudioBubble, CometChatVideoBubble, @@ -29,5 +41,15 @@ export { CometChatPollOptionBubble, CometChatDeletedMessageBubble, CometChatPlaceholderBubble, - MessageBubbleStyles, + MessageBubbleStyle, + TextBubbleStyle, + FileBubbleStyle, + AudioBubbleStyle, + VideoBubbleStyle, + StickerBubbleStyle, + ImageBubbleStyle, + WhiteboardBubbleStyle, + DocumentBubbleStyle, + PollBubbleStyle, + PollOptionBubbleStyle, }; diff --git a/src/components/Messages/CometChatCreatePoll/CreatePollConfiguration.js b/src/components/Messages/CometChatCreatePoll/CreatePollConfiguration.js index 290fc52d..ff68a88f 100644 --- a/src/components/Messages/CometChatCreatePoll/CreatePollConfiguration.js +++ b/src/components/Messages/CometChatCreatePoll/CreatePollConfiguration.js @@ -2,7 +2,7 @@ import closeCreatePoll from "./resources/close.svg"; import addIcon from "../CometChatMessageComposer/resources/add-circle-filled.svg"; import deleteIcon from "../CometChatCreatePoll/resources/delete.svg"; -import { CreatePollStyles } from "../"; +import { CreatePollStyle } from "../"; /** * @class CreatePollConfiguration @@ -22,14 +22,14 @@ class CreatePollConfiguration { deleteIconURL = deleteIcon, onCreatePoll = null, onClose = null, - style = new CreatePollStyles({}), + style = new CreatePollStyle({}), }) { this.onClose = onClose; this.onCreatePoll = onCreatePoll; this.deleteIconURL = deleteIconURL; this.closeIconURL = closeIconURL; this.addAnswerIconURL = addAnswerIconURL; - this.style = new CreatePollStyles(style ?? {}); + this.style = new CreatePollStyle(style ?? {}); } } diff --git a/src/components/Messages/CometChatCreatePoll/CreatePollStyles.js b/src/components/Messages/CometChatCreatePoll/CreatePollStyle.js similarity index 66% rename from src/components/Messages/CometChatCreatePoll/CreatePollStyles.js rename to src/components/Messages/CometChatCreatePoll/CreatePollStyle.js index 055b3aec..d864d158 100644 --- a/src/components/Messages/CometChatCreatePoll/CreatePollStyles.js +++ b/src/components/Messages/CometChatCreatePoll/CreatePollStyle.js @@ -1,41 +1,46 @@ import { BaseStyles } from "../../Shared"; /** - * @class CreatePollStyles - * @param {String} boxShadow - * @param {String} titleFont - * @param {String} titleColor - * @param {String} closeIconTint - * @param {String} errorTextFont - * @param {String} errorTextColor - * @param {String} questionInputBorder - * @param {String} questionInputBorderRadius - * @param {String} questionInputBoxShadow - * @param {String} questionInputBackground - * @param {String} questionPlaceholderTextFont - * @param {String} questionPlaceholderTextColor - * @param {String} questionInputTextFont - * @param {String} questionInputTextColor - * @param {String} answerHelpTextFont - * @param {String} answerHelpTextColor - * @param {String} answerInputBoxShadow - * @param {String} answerInputBackground - * @param {String} answerInputTextFont - * @param {String} answerInputTextColor - * @param {String} answerInputBorder - * @param {String} answerInputBorderRadius - * @param {String} answerPlaceholderTextFont - * @param {String} answerPlaceholderTextColor - * @param {String} addAnswerButtonTextColor - * @param {String} addAnswerButtonTextFont - * @param {String} addAnswerIconTint - * @param {String} createPollButtonBorder - * @param {String} createPollButtonBorderRadius - * @param {String} createPollButtonBackground - * @param {String} createPollButtonTextFont - * @param {String} createPollButtonTextColor + * @class CreatePollStyle + * @param {string} width + * @param {string} height + * @param {string} border + * @param {string} borderRadius + * @param {string} background + * @param {string} boxShadow + * @param {string} titleFont + * @param {string} titleColor + * @param {string} closeIconTint + * @param {string} errorTextFont + * @param {string} errorTextColor + * @param {string} questionInputBorder + * @param {string} questionInputBorderRadius + * @param {string} questionInputBoxShadow + * @param {string} questionInputBackground + * @param {string} questionPlaceholderTextFont + * @param {string} questionPlaceholderTextColor + * @param {string} questionInputTextFont + * @param {string} questionInputTextColor + * @param {string} answerHelpTextFont + * @param {string} answerHelpTextColor + * @param {string} answerInputBoxShadow + * @param {string} answerInputBackground + * @param {string} answerInputTextFont + * @param {string} answerInputTextColor + * @param {string} answerInputBorder + * @param {string} answerInputBorderRadius + * @param {string} answerPlaceholderTextFont + * @param {string} answerPlaceholderTextColor + * @param {string} addAnswerButtonTextColor + * @param {string} addAnswerButtonTextFont + * @param {string} addAnswerIconTint + * @param {string} createPollButtonBorder + * @param {string} createPollButtonBorderRadius + * @param {string} createPollButtonBackground + * @param {string} createPollButtonTextFont + * @param {string} createPollButtonTextColor */ -class CreatePollStyles extends BaseStyles { +class CreatePollStyle extends BaseStyles { constructor({ boxShadow = "", titleFont = "", @@ -75,13 +80,11 @@ class CreatePollStyles extends BaseStyles { border = "", borderRadius = "12px", background = "", - activeBackground = "", }) { super({ width, height, background, - activeBackground, border, borderRadius, }); @@ -120,4 +123,4 @@ class CreatePollStyles extends BaseStyles { this.createPollButtonTextColor = createPollButtonTextColor; } } -export { CreatePollStyles }; +export { CreatePollStyle }; diff --git a/src/components/Messages/CometChatCreatePoll/style.js b/src/components/Messages/CometChatCreatePoll/style.js index df7360a1..dc5f90d8 100644 --- a/src/components/Messages/CometChatCreatePoll/style.js +++ b/src/components/Messages/CometChatCreatePoll/style.js @@ -42,15 +42,14 @@ export const questionInputStyle = (props, theme) => { font: props?.style?.questionInputTextFont || fontHelper(theme.typography.subtitle1), - color: - props?.style?.questionInputTextColor || - theme?.palette?.getAccent(), + color: props?.style?.questionInputTextColor || theme?.palette?.getAccent(), boxShadow: props?.style?.questionInputBoxShadow || `${theme.palette.accent50[theme.palette.mode]} 0 0 0 1px`, background: props?.style?.questionInputBackground || theme.palette.accent50[theme.palette.mode], + boxSizing: "border-box", }; }; @@ -66,15 +65,14 @@ export const answerInputStyle = (props, theme) => { borderRadius: props.style.answerInputBorderRadius || "8px", font: props.style.answerInputTextFont || fontHelper(theme.typography.subtitle1), - color: - props.style.answerInputTextColor || - theme?.palette?.getAccent(), + color: props.style.answerInputTextColor || theme?.palette?.getAccent(), boxShadow: props.style.answerInputBoxShadow || `${theme.palette.accent50[theme.palette.mode]} 0 0 0 1px`, background: props.style.answerInputBackground || theme.palette.accent50[theme.palette.mode], + boxSizing: "border-box", }; }; @@ -86,8 +84,7 @@ export const closeIconStyle = (props, img, theme) => { top: "3%", right: "3%", WebkitMask: `url(${img}) center center no-repeat`, - background: - props.style.closeIconTint || theme?.palette?.getPrimary(), + background: props.style.closeIconTint || theme?.palette?.getPrimary(), cursor: "pointer", }; }; @@ -105,6 +102,7 @@ export const createPollQuestionAnsStyle = () => { return { width: "100%", marginBottom: "10px", + boxSizing: "border-box", }; }; @@ -134,8 +132,7 @@ export const buttonStyle = (props, theme) => { props?.style?.createPollButtonTextColor || theme.palette.background[theme.palette.mode], background: - props?.style?.createPollButtonBackground || - theme?.palette?.getPrimary(), + props?.style?.createPollButtonBackground || theme?.palette?.getPrimary(), }; }; @@ -162,9 +159,7 @@ export const addOptionIconStyle = (props, img, theme) => { height: "24px", width: "24px", WebkitMask: `url(${img}) center center no-repeat`, - background: - props.style.addAnswerIconTint || - theme?.palette?.getPrimary(), + background: props.style.addAnswerIconTint || theme?.palette?.getPrimary(), }; }; export const helperTextStyle = (props, theme) => { @@ -188,8 +183,7 @@ export const addItemStyle = (props, theme) => { props?.style?.addAnswerButtonTextFont || fontHelper(theme.typography.text1), color: - props?.style?.addAnswerButtonTextColor || - theme?.palette?.getPrimary(), + props?.style?.addAnswerButtonTextColor || theme?.palette?.getPrimary(), }; }; diff --git a/src/components/Messages/CometChatCreatePollOptions/CreatePollOptionConfiguration.js b/src/components/Messages/CometChatCreatePollOptions/CreatePollOptionConfiguration.js index 7d30717a..dc4bf846 100644 --- a/src/components/Messages/CometChatCreatePollOptions/CreatePollOptionConfiguration.js +++ b/src/components/Messages/CometChatCreatePollOptions/CreatePollOptionConfiguration.js @@ -2,18 +2,18 @@ import deleteIcon from "./resources/delete.svg"; import { localize } from "../../../"; -import { CreatePollOptionStyles } from "../"; +import { CreatePollOptionStyle } from "../"; /** * @class CreatePollOptionConfiguration * @description CreatePollOptionConfiguration class is used for defining the MessageComposer templates. - * @param {Function} onDeleteClick - * @param {Function} onChangeHandler - * @param {String} option - * @param {Boolean} hasDelete - * @param {String} placeholderText - * @param {String} deleteIconUrl - * @param {Object} style + * @param {function} onDeleteClick + * @param {function} onChangeHandler + * @param {string} option + * @param {boolean} hasDelete + * @param {string} placeholderText + * @param {string} deleteIconUrl + * @param {object} style */ class CreatePollOptionConfiguration { @@ -24,7 +24,7 @@ class CreatePollOptionConfiguration { onDeleteClick = null, onChangeHandler = null, option = null, - style = new CreatePollOptionStyles({}), + style = new CreatePollOptionStyle({}), }) { this.hasDelete = hasDelete; this.placeholderText = placeholderText; @@ -32,7 +32,7 @@ class CreatePollOptionConfiguration { this.onDeleteClick = onDeleteClick; this.onChangeHandler = onChangeHandler; this.option = option; - this.style = new CreatePollOptionStyles(style ?? {}); + this.style = new CreatePollOptionStyle(style ?? {}); } } diff --git a/src/components/Messages/CometChatCreatePollOptions/CreatePollOptionStyles.js b/src/components/Messages/CometChatCreatePollOptions/CreatePollOptionStyle.js similarity index 60% rename from src/components/Messages/CometChatCreatePollOptions/CreatePollOptionStyles.js rename to src/components/Messages/CometChatCreatePollOptions/CreatePollOptionStyle.js index 8389d562..9de7672c 100644 --- a/src/components/Messages/CometChatCreatePollOptions/CreatePollOptionStyles.js +++ b/src/components/Messages/CometChatCreatePollOptions/CreatePollOptionStyle.js @@ -1,15 +1,20 @@ import { BaseStyles } from "../../Shared"; /** - * @class CreatePollOptionStyles - * @param {String} deleteIconTint - * @param {String} boxShadow - * @param {String} placeholderTextFont - * @param {String} placeholderTextColor - * @param {String} inputTextFont - * @param {String} inputTextColor + * @class CreatePollOptionStyle + * @param {string} width + * @param {string} height + * @param {string} border + * @param {string} borderRadius + * @param {string} background + * @param {string} deleteIconTint + * @param {string} boxShadow + * @param {string} placeholderTextFont + * @param {string} placeholderTextColor + * @param {string} inputTextFont + * @param {string} inputTextColor */ -class CreatePollOptionStyles extends BaseStyles { +class CreatePollOptionStyle extends BaseStyles { constructor({ deleteIconTint = "", boxShadow = "", @@ -23,13 +28,11 @@ class CreatePollOptionStyles extends BaseStyles { background = "", border = "", borderRadius = "8px", - activeBackground = "", }) { super({ width, height, background, - activeBackground, border, borderRadius, }); @@ -42,4 +45,4 @@ class CreatePollOptionStyles extends BaseStyles { this.inputTextColor = inputTextColor; } } -export { CreatePollOptionStyles }; +export { CreatePollOptionStyle }; diff --git a/src/components/Messages/CometChatEmojiKeyboard/Emoji.js b/src/components/Messages/CometChatEmojiKeyboard/Emoji.js index 19e2557e..4e5d0d7d 100644 --- a/src/components/Messages/CometChatEmojiKeyboard/Emoji.js +++ b/src/components/Messages/CometChatEmojiKeyboard/Emoji.js @@ -5,7 +5,7 @@ * @param {String} char * @param {Array} keywords */ -class CometChatEmoji { + class CometChatEmoji { char = ""; keywords = []; constructor({ char, keywords }) { diff --git a/src/components/Messages/CometChatEmojiKeyboard/EmojiCategory.js b/src/components/Messages/CometChatEmojiKeyboard/EmojiCategory.js index 1a36216d..63cd1552 100644 --- a/src/components/Messages/CometChatEmojiKeyboard/EmojiCategory.js +++ b/src/components/Messages/CometChatEmojiKeyboard/EmojiCategory.js @@ -6,7 +6,7 @@ * @param {String} symbol * @param {Object} emojis */ -class CometChatEmojiCategory { + class CometChatEmojiCategory { id = ""; name = ""; symbol = ""; diff --git a/src/components/Messages/CometChatEmojiKeyboard/EmojiKeyboardConfiguration.js b/src/components/Messages/CometChatEmojiKeyboard/EmojiKeyboardConfiguration.js index 63ae5197..7924c768 100644 --- a/src/components/Messages/CometChatEmojiKeyboard/EmojiKeyboardConfiguration.js +++ b/src/components/Messages/CometChatEmojiKeyboard/EmojiKeyboardConfiguration.js @@ -1,4 +1,4 @@ -import { EmojiKeyboardStyles } from "../"; +import { EmojiKeyboardStyle } from "../"; /** * @class EmojiKeyboardConfiguration @@ -12,7 +12,7 @@ class EmojiKeyboardConfiguration { constructor({ hideSearch = true, onClick = null, - style = new EmojiKeyboardStyles({}), + style = new EmojiKeyboardStyle({}), }) { this.hideSearch = hideSearch; this.onClick = onClick; diff --git a/src/components/Messages/CometChatEmojiKeyboard/EmojiKeyboardStyles.js b/src/components/Messages/CometChatEmojiKeyboard/EmojiKeyboardStyle.js similarity index 58% rename from src/components/Messages/CometChatEmojiKeyboard/EmojiKeyboardStyles.js rename to src/components/Messages/CometChatEmojiKeyboard/EmojiKeyboardStyle.js index 005065d1..97d420c1 100644 --- a/src/components/Messages/CometChatEmojiKeyboard/EmojiKeyboardStyles.js +++ b/src/components/Messages/CometChatEmojiKeyboard/EmojiKeyboardStyle.js @@ -1,26 +1,29 @@ import { BaseStyles } from "../../Shared"; /** - * @class EmojiKeyboardStyles - * @param {String} sectionHeaderFont - * @param {String} sectionHeaderColor - * @param {String} categoryIconTint - * @param {String} selectedCategoryIconTint + * @class EmojiKeyboardStyle + * @param {string} width + * @param {string} height + * @param {string} border + * @param {string} borderRadius + * @param {string} background + * @param {string} sectionHeaderFont + * @param {string} sectionHeaderColor + * @param {string} categoryIconTint + * @param {string} selectedCategoryIconTint */ -class EmojiKeyboardStyles extends BaseStyles { +class EmojiKeyboardStyle extends BaseStyles { constructor({ sectionHeaderFont = "", sectionHeaderColor = "", categoryIconTint = "", selectedCategoryIconTint = "", - categoryBackground = "", - width = "272px", + width = "275px", height = "330px", background = "", border = "none", borderRadius = "8px", - activeBackground = "", }) { super({ width, @@ -28,14 +31,12 @@ class EmojiKeyboardStyles extends BaseStyles { background, border, borderRadius, - activeBackground, }); this.sectionHeaderFont = sectionHeaderFont; this.sectionHeaderColor = sectionHeaderColor; this.categoryIconTint = categoryIconTint; this.selectedCategoryIconTint = selectedCategoryIconTint; - this.categoryBackground = categoryBackground; } } -export { EmojiKeyboardStyles }; +export { EmojiKeyboardStyle }; diff --git a/src/components/Messages/CometChatEmojiKeyboard/style.js b/src/components/Messages/CometChatEmojiKeyboard/style.js index dc5c607c..2c6e34c2 100644 --- a/src/components/Messages/CometChatEmojiKeyboard/style.js +++ b/src/components/Messages/CometChatEmojiKeyboard/style.js @@ -17,6 +17,7 @@ export const emojiListStyle = () => { return { display: "flex", flexWrap: "wrap", + justifyContent: "center", }; }; @@ -44,13 +45,13 @@ export const emojiTabLsitStyle = (props, theme) => { width: props.style.width, zIndex: "3", display: "flex", - flexWrap: "wrap", padding: "5px 2px", position: "sticky", bottom: "0px", + overflow: "hidden", alignItems: "center", justifyContent: "space-between", - + boxSizing: "border-box", background: props?.style?.categoryBackground || theme?.palette?.getBackground(), }; diff --git a/src/components/Messages/CometChatImageViewer/style.js b/src/components/Messages/CometChatImageViewer/style.js index 59fc9977..3defbdb3 100644 --- a/src/components/Messages/CometChatImageViewer/style.js +++ b/src/components/Messages/CometChatImageViewer/style.js @@ -1,41 +1,41 @@ export const imageWrapperStyle = (closeIcon, img) => { - const heightProps = (img) ? { - height: "auto", - } : { - height: "100%", - }; + const heightProps = (img) ? { + height: "auto", + } : { + height: "100%", + }; - return { - position: "absolute", - top: "0", - left: "0", - bottom: "0", - right: "0", - width: "100%", - padding: "1.8% 2.3%", - zIndex: "9999", - display: "flex", - justifyContent: "center", - alignItems: "center", - background: `url(${closeIcon}) no-repeat 99% 0.8% #fff`, - cursor: "pointer", - ...heightProps, - }; + return { + position: "absolute", + top: "0", + left: "0", + bottom: "0", + right: "0", + width: "100%", + padding: "1.8% 2.3%", + zIndex: "9999", + display: "flex", + justifyContent: "center", + alignItems: "center", + background: `url(${closeIcon}) no-repeat 99% 0.8% #fff`, + cursor: "pointer", + ...heightProps, +}; } export const imgStyle = image => { - const sizeProps = (!image) ? { - width: "24px", - height: "24px", - } : { - maxHeight: "100%", - }; + const sizeProps = (!image) ? { + width: "24px", + height: "24px", + } : { + maxHeight: "100%", +}; - return { - objectFit: "contain", - ...sizeProps, - }; +return { + objectFit: "contain", + ...sizeProps, +}; }; \ No newline at end of file diff --git a/src/components/Messages/CometChatLiveReactions/LiveReactionConfiguration.js b/src/components/Messages/CometChatLiveReactions/LiveReactionConfiguration.js index 19a89c55..b7d20259 100644 --- a/src/components/Messages/CometChatLiveReactions/LiveReactionConfiguration.js +++ b/src/components/Messages/CometChatLiveReactions/LiveReactionConfiguration.js @@ -1,13 +1,19 @@ import defaultImg from "./resources/heart.png"; +import { LiveReactionsStyle } from "../"; /** * @class LiveReactionConfiguration * @description LiveReactionConfiguration class is used for defining the LiveReaction templates. * @param {String} liveReactionIconURL + * */ class LiveReactionConfiguration { - constructor({ liveReactionIcon = defaultImg }) { + constructor({ + liveReactionIcon = defaultImg, + style = new LiveReactionsStyle({}), + }) { this.liveReactionIconURL = liveReactionIcon; + this.style = new LiveReactionsStyle(style || {}); } } diff --git a/src/components/Messages/CometChatLiveReactions/LiveReactionStyle.js b/src/components/Messages/CometChatLiveReactions/LiveReactionStyle.js new file mode 100644 index 00000000..cb4af9bf --- /dev/null +++ b/src/components/Messages/CometChatLiveReactions/LiveReactionStyle.js @@ -0,0 +1,36 @@ +import { BaseStyles } from "../../Shared"; +/** + * @class LiveReactionsStyle + * @param {string} width + * @param {string} height + * @param {string} border + * @param {string} borderRadius + * @param {string} background + * @param {string} deleteIconTint + * @param {string} boxShadow + * @param {string} placeholderTextFont + * @param {string} placeholderTextColor + * @param {string} inputTextFont + * @param {string} inputTextColor + */ + +class LiveReactionsStyle extends BaseStyles { + constructor({ + width = "20px", + height = "20px", + background = "transparent", + border = "none", + borderRadius = "none", + activeBackground = "", + }) { + super({ + width, + height, + background, + activeBackground, + border, + borderRadius, + }); + } +} +export { LiveReactionsStyle }; diff --git a/src/components/Messages/CometChatLiveReactions/LiveReactionstyles.js b/src/components/Messages/CometChatLiveReactions/LiveReactionstyles.js deleted file mode 100644 index ca1abea4..00000000 --- a/src/components/Messages/CometChatLiveReactions/LiveReactionstyles.js +++ /dev/null @@ -1,31 +0,0 @@ -import { BaseStyles } from "../../Shared"; -/** - * @class LiveReactionStyles - * @param {String} deleteIconTint - * @param {String} boxShadow - * @param {String} placeholderTextFont - * @param {String} placeholderTextColor - * @param {String} inputTextFont - * @param {String} inputTextColor - */ - -class LiveReactionStyles extends BaseStyles { - constructor({ - width = "20px", - height = "20px", - background = "transparent", - border = "none", - borderRadius = "none", - activeBackground = "", - }) { - super({ - width, - height, - background, - activeBackground, - border, - borderRadius, - }); - } -} -export { LiveReactionStyles }; diff --git a/src/components/Messages/CometChatMessageComposer/MessageComposerConfiguration.js b/src/components/Messages/CometChatMessageComposer/MessageComposerConfiguration.js index eb253049..06c4e46f 100644 --- a/src/components/Messages/CometChatMessageComposer/MessageComposerConfiguration.js +++ b/src/components/Messages/CometChatMessageComposer/MessageComposerConfiguration.js @@ -4,7 +4,7 @@ import sendBtn from "./resources/send-message.svg"; import closeButton from "./resources/close-circle.svg"; -import { MessageComposerStyles } from "../"; +import { MessageComposerStyle } from "../"; import { MessagePreviewConfiguration } from "../CometChatMessagePreview/MessagePreviewConfiguration"; @@ -14,8 +14,6 @@ import { CreatePollConfiguration } from "../CometChatCreatePoll/CreatePollConfig import { StickerKeyboardConfiguration } from "../CometChatStickerKeyboard/StickerKeyboardConfiguration"; -import { ActionSheetConfiguration } from "../../Shared"; - /** * @class MessageComposerConfiguration * @description MessageComposerConfiguration class is used for defining the MessageComposer templates. @@ -53,12 +51,11 @@ class MessageComposerConfiguration { enableTypingIndicator = true, enableSoundForMessages = true, customOutgoingMessageSound = null, - style = new MessageComposerStyles({}), + style = new MessageComposerStyle({}), messagePreviewConfiguration = new MessagePreviewConfiguration({}), emojiKeyboardConfiguration = new EmojiKeyboardConfiguration({}), stickerKeyboardConfiguration = new StickerKeyboardConfiguration({}), createPollConfiguration = new CreatePollConfiguration({}), - actionSheetConfiguration = new ActionSheetConfiguration({}), }) { this.sendButtonIconURL = sendButtonIconURL; this.attachmentIconURL = attachmentIconURL; @@ -74,12 +71,11 @@ class MessageComposerConfiguration { this.enableSoundForMessages = enableSoundForMessages; this.enableTypingIndicator = enableTypingIndicator; this.excludeMessageTypes = excludeMessageTypes; - this.style = new MessageComposerStyles(style ?? {}); - this.messagePreviewConfiguration = new MessagePreviewConfiguration(messagePreviewConfiguration ?? {}); - this.emojiKeyboardConfiguration = new EmojiKeyboardConfiguration(emojiKeyboardConfiguration ?? {}); - this.stickerKeyboardConfiguration = new StickerKeyboardConfiguration(stickerKeyboardConfiguration ?? {}); - this.createPollConfiguration = new CreatePollConfiguration(createPollConfiguration ?? {}); - this.actionSheetConfiguration = new ActionSheetConfiguration(actionSheetConfiguration ?? {}); + this.style = new MessageComposerStyle(style ?? {}); + this.messagePreviewConfiguration = messagePreviewConfiguration; + this.emojiKeyboardConfiguration = emojiKeyboardConfiguration; + this.stickerKeyboardConfiguration = stickerKeyboardConfiguration; + this.createPollConfiguration = createPollConfiguration; } } diff --git a/src/components/Messages/CometChatMessageComposer/MessageComposerStyles.js b/src/components/Messages/CometChatMessageComposer/MessageComposerStyle.js similarity index 62% rename from src/components/Messages/CometChatMessageComposer/MessageComposerStyles.js rename to src/components/Messages/CometChatMessageComposer/MessageComposerStyle.js index 2afe7d99..483bacb7 100644 --- a/src/components/Messages/CometChatMessageComposer/MessageComposerStyles.js +++ b/src/components/Messages/CometChatMessageComposer/MessageComposerStyle.js @@ -1,21 +1,26 @@ import { BaseStyles } from "../../Shared"; /** - * @class MessageComposerStyles - * @param {String} inputBorderRadius - * @param {String} inputBackground - * @param {String} inputTextFont - * @param {String} inputTextColor - * @param {String} placeholderTextFont - * @param {String} placeholderTextColor - * @param {String} emojiIconTint - * @param {String} attachmentIconTint - * @param {String} stickerIconTint - * @param {String} stickerCloseIconTint + * @class MessageComposerStyle + * @param {string} width + * @param {string} height + * @param {string} border + * @param {string} borderRadius + * @param {string} background + * @param {string} inputBorderRadius + * @param {string} inputBackground + * @param {string} inputTextFont + * @param {string} inputTextColor + * @param {string} placeholderTextFont + * @param {string} placeholderTextColor + * @param {string} emojiIconTint + * @param {string} attachmentIconTint + * @param {string} stickerIconTint + * @param {string} stickerCloseIconTint */ -class MessageComposerStyles extends BaseStyles { +class MessageComposerStyle extends BaseStyles { constructor({ - inputBorderRadius = "", + inputBorderRadius = "8px", inputBackground = "", inputTextFont = "", inputTextColor = "", @@ -28,7 +33,7 @@ class MessageComposerStyles extends BaseStyles { sendButtonIconTint = "", width = "100%", - height = "100%", + height = "auto", border = "none", borderRadius = "12px", background = "", @@ -56,4 +61,4 @@ class MessageComposerStyles extends BaseStyles { this.sendButtonIconTint = sendButtonIconTint; } } -export { MessageComposerStyles }; +export { MessageComposerStyle }; diff --git a/src/components/Messages/CometChatMessageComposer/hooks.js b/src/components/Messages/CometChatMessageComposer/hooks.js index edef1f07..45446f44 100644 --- a/src/components/Messages/CometChatMessageComposer/hooks.js +++ b/src/components/Messages/CometChatMessageComposer/hooks.js @@ -20,6 +20,9 @@ export const Hooks = ( setViewAttachButton, openCreatePoll, fileInputHandler, + videoInputHandler, + imageInputHandler, + audioInputHandler, shareCollaborativeDocument, shareCollaborativeWhiteboard, sendSticker @@ -27,10 +30,13 @@ export const Hooks = ( const helper = (type, item) => { switch (type) { case CometChatMessageTypes.file: + return { ...item, onActionClick: fileInputHandler }; case CometChatMessageTypes.image: + return { ...item, onActionClick: imageInputHandler }; case CometChatMessageTypes.audio: + return { ...item, onActionClick: audioInputHandler }; case CometChatMessageTypes.video: - return { ...item, onActionClick: fileInputHandler }; + return { ...item, onActionClick: videoInputHandler }; case CometChatCustomMessageTypes.poll: { return { ...item, onActionClick: openCreatePoll }; } @@ -47,6 +53,7 @@ export const Hooks = ( break; } }; + //fetch logged in user React.useEffect(() => { CometChat.getLoggedinUser().then((user) => (loggedInUser.current = user)); @@ -85,8 +92,12 @@ export const Hooks = ( return item; }); - Items = Items?.filter(val => !props?.excludeMessageTypes?.includes(val?.type)); - + if (props?.excludeMessageTypes) { + Items = Items?.filter( + (val) => !props?.excludeMessageTypes?.includes(val?.type) + ); + } + actionItems = Items.filter((item, index) => { if ( item?.type !== MessageTypeConstants.text && @@ -111,8 +122,10 @@ export const Hooks = ( return item; }); - Items = Items?.filter(val => !props?.excludeMessageTypes?.includes(val?.type)); - + Items = Items?.filter( + (val) => !props?.excludeMessageTypes?.includes(val?.type) + ); + actionItems = Items?.filter((item, index) => { if ( item?.type !== MessageTypeConstants.text && @@ -151,5 +164,5 @@ export const Hooks = ( setViewAttachButton(true); setActionSheetItems(actionItems); } - }, [props.messageTypes]); + }, [props.messageTypes, props.excludeMessageTypes]); }; diff --git a/src/components/Messages/CometChatMessageComposer/index.js b/src/components/Messages/CometChatMessageComposer/index.js index e6cc2d75..2b63ad01 100644 --- a/src/components/Messages/CometChatMessageComposer/index.js +++ b/src/components/Messages/CometChatMessageComposer/index.js @@ -26,10 +26,10 @@ import { messageConstants, CometChatCreatePoll, CometChatMessageTemplate, - MessageComposerStyles, + MessageComposerStyle, } from ".."; -import { getUnixTimestamp } from "../CometChatMessageHelper"; +import { getUnixTimestamp, getUniqueTimestamp } from "../CometChatMessageHelper"; import { messageStatus } from "../CometChatMessageConstants"; import { Hooks } from "./hooks"; @@ -70,8 +70,6 @@ import { CreatePollConfiguration } from "../CometChatCreatePoll/CreatePollConfig import { StickerKeyboardConfiguration } from "../CometChatStickerKeyboard/StickerKeyboardConfiguration"; -import { ActionSheetConfiguration } from "../../Shared"; - import roundedPlus from "./resources/add-circle-filled.svg"; import insertEmoticon from "./resources/emoji.svg"; import sendBtn from "./resources/send-message.svg"; @@ -113,10 +111,9 @@ const CometChatMessageComposer = React.forwardRef((props, ref) => { const stickerTemplate = React.useRef(null); const loggedInUser = React.useRef(null); - let isTyping = null; + let isTyping = React.useRef(null); let liveReactionTimeout = 0; const disabledState = false; - const messageInputRef = React.useRef(null); const fileInputRef = React.useRef(null); const chatRef = React.useRef(chatWith); @@ -124,29 +121,28 @@ const CometChatMessageComposer = React.forwardRef((props, ref) => { const { user, group, - hideAttachment, + style, + theme, attachmentIconURL, + stickerIconURL, stickerCloseIconURL, placeholderText, - hideLiveReaction, + hideAttachment, liveReactionIconURL, + hideLiveReaction, hideEmoji, emojiIconURL, showSendButton, sendButtonIconURL, - onSendButtonClick, messageTypes, excludeMessageTypes, + onSendButtonClick, enableTypingIndicator, - enableSoundForMessages, - customOutgoingMessageSound, - style, + enableSoundForMessage, messagePreviewConfiguration, emojiKeyboardConfiguration, - stickerKeyboardConfiguration, createPollConfiguration, - actionSheetConfiguration, - theme, + stickerKeyboardConfiguration, } = props; const _theme = new CometChatTheme(theme ?? {}); @@ -190,17 +186,6 @@ const CometChatMessageComposer = React.forwardRef((props, ref) => { pasteHtmlAtCaret(messageText, false); }; - const playAudio = () => { - if (customOutgoingMessageSound) { - CometChatSoundManager.play( - CometChatSoundManager.Sound.outgoingMessage, - customOutgoingMessageSound - ); - } else { - CometChatSoundManager.play(CometChatSoundManager.Sound.outgoingMessage); - } - }; - const closeMessagePreview = () => { setMessagePreview(null); setMessageInput(""); @@ -240,14 +225,13 @@ const CometChatMessageComposer = React.forwardRef((props, ref) => { textMessage.setReceiver(chatWith); textMessage.setText(messageInput); textMessage.setSentAt(getUnixTimestamp()); - textMessage.setMuid(String(getUnixTimestamp())); - + textMessage.setMuid(String(getUniqueTimestamp())); CometChatMessageEvents.emit(CometChatMessageEvents.onMessageSent, { message: textMessage, status: messageStatus.inprogress, }); - if (enableSoundForMessages) playAudio(); + CometChatSoundManager.play(CometChatSoundManager.Sound.outgoingMessage); setMessageInput(""); messageInputRef.current.textContent = ""; @@ -266,10 +250,6 @@ const CometChatMessageComposer = React.forwardRef((props, ref) => { error: error, }); }); - - if (onSendButtonClick) { - onSendButtonClick(); - } }; /** send media message */ @@ -290,13 +270,12 @@ const CometChatMessageComposer = React.forwardRef((props, ref) => { [MetadataConstants.file]: messageInput, }); mediaMessage.setSentAt(getUnixTimestamp()); - mediaMessage.setMuid(String(getUnixTimestamp())); + mediaMessage.setMuid(String(getUniqueTimestamp())); CometChatMessageEvents.emit(CometChatMessageEvents.onMessageSent, { message: mediaMessage, status: messageStatus.inprogress, }); - - if (enableSoundForMessages) playAudio(); + CometChatSoundManager.play(CometChatSoundManager.Sound.outgoingMessage); CometChat.sendMessage(mediaMessage) .then((message) => { @@ -331,14 +310,13 @@ const CometChatMessageComposer = React.forwardRef((props, ref) => { customMessage.setReceiver(chatWith); customMessage.setMetadata({ incrementUnreadCount: true }); customMessage.setSentAt(getUnixTimestamp()); - customMessage.setMuid(String(getUnixTimestamp())); + customMessage.setMuid(String(getUniqueTimestamp())); CometChatMessageEvents.emit(CometChatMessageEvents.onMessageSent, { message: customMessage, status: messageStatus.inprogress, }); - - if (enableSoundForMessages) playAudio(); + CometChatSoundManager.play(CometChatSoundManager.Sound.outgoingMessage); CometChat.sendCustomMessage(customMessage) .then((message) => { @@ -370,8 +348,7 @@ const CometChatMessageComposer = React.forwardRef((props, ref) => { setMessageInput(""); messageInputRef.current.textContent = ""; - - if (enableSoundForMessages) playAudio(); + CometChatSoundManager.play(CometChatSoundManager.Sound.outgoingMessage); setMessagePreview(null); @@ -397,7 +374,7 @@ const CometChatMessageComposer = React.forwardRef((props, ref) => { } //if typing is in progress - if (isTyping) { + if (isTyping.current) { return false; } @@ -411,7 +388,7 @@ const CometChatMessageComposer = React.forwardRef((props, ref) => { ); CometChat.startTyping(typingNotification); - isTyping = setTimeout(() => { + isTyping.current = setTimeout(() => { endTyping(null, typingMetadata); }, typingInterval); }; @@ -434,20 +411,55 @@ const CometChatMessageComposer = React.forwardRef((props, ref) => { ); CometChat.endTyping(typingNotification); - clearTimeout(isTyping); - isTyping = null; + clearTimeout(isTyping.current); + isTyping.current = null; }; - const fileInputHandler = (event) => { + /** + * + * input media message handler + */ + const fileInputHandler = () => { setViewActionSheet(false); if (!fileInputRef.current) { return false; } + fileInputRef.current.accept = "file/*"; + fileInputRef.current.click(); + }; + + const audioInputHandler = () => { + setViewActionSheet(false); + if (!fileInputRef.current) { + return false; + } + fileInputRef.current.accept = "audio/*"; + fileInputRef.current.click(); + }; + + const imageInputHandler = () => { + setViewActionSheet(false); + if (!fileInputRef.current) { + return false; + } + fileInputRef.current.accept = "image/*"; + fileInputRef.current.click(); + }; + + const videoInputHandler = () => { + setViewActionSheet(false); + if (!fileInputRef.current) { + return false; + } + fileInputRef.current.accept = "video/*"; fileInputRef.current.click(); }; /** fileInputChangeHandler */ const fileInputChangeHandler = (event) => { + let selectedType = event?.currentTarget?.accept; + selectedType = selectedType?.split("/"); + setViewActionSheet(false); const uploadedFile = event.target.files["0"]; @@ -463,7 +475,7 @@ const CometChatMessageComposer = React.forwardRef((props, ref) => { uploadedFile ); - switch (fileNameType[0]) { + switch (selectedType[0]) { case "image": sendMediaMessage(newFile, MessageTypeConstants.image); break; @@ -683,10 +695,6 @@ const CometChatMessageComposer = React.forwardRef((props, ref) => { ) : null; }; - /**CreatePollConfiguration */ - const _actionSheetConfiguration = - actionSheetConfiguration ?? new ActionSheetConfiguration({}); - /** action sheet render under tooltip */ const actionSheetBoard = () => { return viewActionSheet.actionSheet ? ( @@ -698,9 +706,7 @@ const CometChatMessageComposer = React.forwardRef((props, ref) => { > { /** send button */ const sendButton = () => { - return messageInput?.length && showSendButton ? ( + return (messageInput?.length && showSendButton) || hideLiveReaction ? (
- +
) : null; }; @@ -928,6 +942,9 @@ const CometChatMessageComposer = React.forwardRef((props, ref) => { setViewAttachButton, openCreatePoll, fileInputHandler, + videoInputHandler, + imageInputHandler, + audioInputHandler, shareCollaborativeDocument, shareCollaborativeWhiteboard, sendSticker @@ -1009,41 +1026,38 @@ CometChatMessageComposer.defaultProps = { excludeMessageTypes: null, onSendButtonClick: null, enableTypingIndicator: true, - enableSoundForMessages: true, + enableSoundForMessage: true, customOutgoingMessageSound: null, messagePreviewConfiguration: null, emojiKeyboardConfiguration: null, - stickerKeyboardConfiguration: null, + stickerkeyboardConfiguration: null, createPollConfiguration: null, - actionSheetConfiguration: null, }; CometChatMessageComposer.propTypes = { - user: PropTypes.object, - group: PropTypes.object, - hideAttachment: PropTypes.bool, + user: PropTypes.instanceOf(CometChat.User), + group: PropTypes.instanceOf(CometChat.Group), + style: PropTypes.shape(MessageComposerStyle), attachmentIconURL: PropTypes.string, stickerCloseIconURL: PropTypes.string, placeholderText: PropTypes.string, - hideLiveReaction: PropTypes.bool, + hideAttachment: PropTypes.bool, liveReactionIconURL: PropTypes.string, + hideLiveReaction: PropTypes.bool, hideEmoji: PropTypes.bool, emojiIconURL: PropTypes.string, + enableTypingIndicator: PropTypes.bool, + enableSoundForMessage: PropTypes.bool, + customOutgoingMessageSound: PropTypes.string, showSendButton: PropTypes.bool, sendButtonIconURL: PropTypes.string, onSendButtonClick: PropTypes.func, - messageTypes: PropTypes.array, - excludeMessageTypes: PropTypes.array, - enableTypingIndicator: PropTypes.bool, - enableSoundForMessages: PropTypes.bool, - customOutgoingMessageSound: PropTypes.string, - style: PropTypes.object, - messagePreviewConfiguration: PropTypes.object, - emojiKeyboardConfiguration: PropTypes.object, - stickerKeyboardConfiguration: PropTypes.object, - createPollConfiguration: PropTypes.object, - actionSheetConfiguration: PropTypes.object, - theme: PropTypes.object, + messageTypes: PropTypes.arrayOf(CometChatMessageTemplate), + excludeMessageTypes: PropTypes.arrayOf(CometChatMessageTemplate), + messagePreviewConfiguration: PropTypes.shape(MessagePreviewConfiguration), + emojiKeyboardConfiguration: PropTypes.shape(EmojiKeyboardConfiguration), + stickerkeyboardConfiguration: PropTypes.shape(StickerKeyboardConfiguration), + createPollConfiguration: PropTypes.shape(CreatePollConfiguration), }; export { CometChatMessageComposer }; diff --git a/src/components/Messages/CometChatMessageComposer/style.js b/src/components/Messages/CometChatMessageComposer/style.js index 18b9a829..488db768 100644 --- a/src/components/Messages/CometChatMessageComposer/style.js +++ b/src/components/Messages/CometChatMessageComposer/style.js @@ -1,12 +1,13 @@ -import { ActionSheetStyles, BaseStyles, fontHelper } from "../../Shared"; - import { - StickerKeyboardStyles, - EmojiKeyboardStyles, - CreatePollStyles, -} from "../"; + ActionSheetStyle, + BaseStyles, + fontHelper, + PopoverStyle, +} from "../../Shared"; + +import { StickerKeyboardStyle, EmojiKeyboardStyle, CreatePollStyle } from "../"; -import { MessagePreviewStyles } from "../CometChatMessagePreview/MessagePreviewStyles"; +import { MessagePreviewStyle } from "../CometChatMessagePreview/MessagePreviewStyle"; export const chatComposerStyle = (style, theme) => { return { @@ -214,13 +215,25 @@ export const sendButtonStyle = () => { }; }; -export const sendBtnIconStyle = (style, sendButtonIconURL, theme) => { +export const sendBtnIconStyle = ( + style, + sendButtonIconURL, + theme, + messageInput, + isTyping +) => { + let sendButtonColor = "rgba(20,20,20,0.24)"; + if (messageInput?.length && isTyping.current) { + sendButtonColor = theme.palette.getPrimary() || "#39f"; + } else { + sendButtonColor = style.sendButtonIconTint || theme.palette.getAccent300(); + } return { width: "24px", height: "24px", display: "inline-block", WebkitMask: `url(${sendButtonIconURL}) center center no-repeat`, - background: style.sendButtonIconTint || theme.palette.getAccent400(), + background: sendButtonColor, }; }; @@ -274,7 +287,7 @@ export const fileInputStyle = () => { export const stickerKeyboardStyle = (theme, stickerConfig) => { return { - ...new StickerKeyboardStyles({ + ...new StickerKeyboardStyle({ width: stickerConfig.style.width, height: stickerConfig.style.height, background: stickerConfig.style.background, @@ -304,21 +317,21 @@ export const stickerKeyboardStyle = (theme, stickerConfig) => { export const emojiBoardPopoverStyle = (theme, emojiConfig) => { return { - ...new BaseStyles({ + ...new PopoverStyle({ width: emojiConfig.style.width, height: emojiConfig.style.height, background: emojiConfig.style.background || theme.palette.getBackground(), border: emojiConfig.style.border, borderRadius: emojiConfig.style.borderRadius, activeBackground: emojiConfig.style.activeBackground, + boxShadow: `0 0 32px ${theme.palette.getAccent300()}`, }), - boxShadow: `0 0 32px ${theme.palette.getAccent300()}`, }; }; export const emojiKeyBoardStyle = (theme, emojiConfig) => { return { - ...new EmojiKeyboardStyles({ + ...new EmojiKeyboardStyle({ width: "100%", height: "100%", background: "transparent", @@ -344,7 +357,7 @@ export const emojiKeyBoardStyle = (theme, emojiConfig) => { export const messagePreviewStyle = (theme, messagePreviewConfig) => { return { - ...new MessagePreviewStyles({ + ...new MessagePreviewStyle({ border: messagePreviewConfig.style.border || `3px solid ${theme.palette.accent100[theme.palette.mode]}`, @@ -373,23 +386,22 @@ export const messagePreviewStyle = (theme, messagePreviewConfig) => { export const actionSheetPopoverStyle = (theme) => { return { - ...new BaseStyles({ + ...new PopoverStyle({ width: "295px", height: "350px", background: theme.palette.getBackground(), border: `none`, borderRadius: "8px", activeBackground: theme.palette.getPrimary(), + boxShadow: `0 0 32px ${theme.palette.getAccent300()}`, }), - boxShadow: `0 0 32px ${theme.palette.getAccent300()}`, - position: "relative", }; }; export const actionSheetStyle = (theme) => { return { - ...new ActionSheetStyles({ + ...new ActionSheetStyle({ width: "100%", height: "100%", background: "transparent", @@ -406,7 +418,7 @@ export const actionSheetStyle = (theme) => { export const createPollStyle = (theme, createPollConfig) => { return { position: "fixed", - ...new CreatePollStyles({ + ...new CreatePollStyle({ width: "100%", height: "100%", background: "transparent", @@ -509,7 +521,7 @@ export const createPollStyle = (theme, createPollConfig) => { export const popoverForCreatePollStyle = (theme, createPollConfig) => { return { - ...new BaseStyles({ + ...new PopoverStyle({ width: createPollConfig?.style?.width, height: createPollConfig?.style?.height, background: @@ -519,11 +531,11 @@ export const popoverForCreatePollStyle = (theme, createPollConfig) => { `1px solid ${theme?.palette?.getAccent50()}`, borderRadius: createPollConfig?.style?.borderRadius, activeBackground: "", + boxShadow: `0 0 32px ${theme?.palette?.getAccent300()}`, }), position: "fixed", top: "50%", left: "50%", transform: "translate(-50%,-50%)", - boxShadow: `0 0 32px ${theme?.palette?.getAccent300()}`, }; }; diff --git a/src/components/Messages/CometChatMessageHeader/MessageHeaderconfiguration.js b/src/components/Messages/CometChatMessageHeader/MessageHeaderConfiguration.js similarity index 84% rename from src/components/Messages/CometChatMessageHeader/MessageHeaderconfiguration.js rename to src/components/Messages/CometChatMessageHeader/MessageHeaderConfiguration.js index a3f19d9e..8574859b 100644 --- a/src/components/Messages/CometChatMessageHeader/MessageHeaderconfiguration.js +++ b/src/components/Messages/CometChatMessageHeader/MessageHeaderConfiguration.js @@ -2,6 +2,8 @@ import backIcon from "../CometChatMessages//resources/back.svg"; import { DataItemConfiguration } from "../../Shared"; +import { MessageHeaderStyle } from ".."; + /** * @class MessageHeaderConfiguration * @description MessageHeaderConfiguration class is used for defining the MessageHeader templates. @@ -9,19 +11,20 @@ import { DataItemConfiguration } from "../../Shared"; * @param {Boolean} enableTypingIndicator * @param {String} backButtonIconURL * @param {Array} options + * @param {Object} style */ class MessageHeaderConfiguration { constructor({ showBackButton = true, backButtonIconURL = backIcon, enableTypingIndicator = false, - //options = null, + style = new MessageHeaderStyle({}), dataItemConfiguration = new DataItemConfiguration({}), }) { this.showBackButton = showBackButton; this.backButtonIconURL = backButtonIconURL; this.enableTypingIndicator = enableTypingIndicator; - //this.options = options; + this.style = new MessageHeaderStyle(style || {}); this.dataItemConfiguration = dataItemConfiguration; } } diff --git a/src/components/Messages/CometChatMessageHeader/MessageHeaderStyle.js b/src/components/Messages/CometChatMessageHeader/MessageHeaderStyle.js new file mode 100644 index 00000000..ad4b3e12 --- /dev/null +++ b/src/components/Messages/CometChatMessageHeader/MessageHeaderStyle.js @@ -0,0 +1,34 @@ +import { BaseStyles } from "../../Shared"; +/** + * @class MessageHeaderStyle + * @param {string} width + * @param {string} height + * @param {string} border + * @param {string} borderRadius + * @param {string} background + * @param {string} backButtonIconTin + */ + +class MessageHeaderStyle extends BaseStyles { + constructor({ + backButtonIconTint = "", + width = "100%", + height = "auto", + border = "none", + borderRadius = "none", + background = "", + activeBackground = "", + }) { + super({ + width, + height, + background, + activeBackground, + border, + borderRadius, + }); + + this.backButtonIconTint = backButtonIconTint; + } +} +export { MessageHeaderStyle }; diff --git a/src/components/Messages/CometChatMessageHeader/hooks.js b/src/components/Messages/CometChatMessageHeader/hooks.js index 417dd333..6ce074b0 100644 --- a/src/components/Messages/CometChatMessageHeader/hooks.js +++ b/src/components/Messages/CometChatMessageHeader/hooks.js @@ -23,14 +23,12 @@ const getGroup = (guid) => { export const Hooks = ( props, loggedInUser, - setChatWith, - setChatWithType, + chatWithRef, + chatWithTypeRef, setMessageHeaderStatus, setUserPresence, messageHeaderManager, messageHeaderCallback, - handlers, - callbackData, errorHandler ) => { //fetch logged in user @@ -40,17 +38,17 @@ export const Hooks = ( loggedInUser.current = user; messageHeaderManager.current?.attachListeners(messageHeaderCallback); }) - .catch(error => errorHandler(error)); + .catch((error) => errorHandler(error)); }, []); const updateMessageHeaderStatusForUser = React.useCallback( (user) => { if (user.status === UserStatusConstants.offline) { setMessageHeaderStatus(localize("OFFLINE")); - setUserPresence(UserStatusConstants.offline); + setUserPresence(false); } else if (user.status === UserStatusConstants.online) { setMessageHeaderStatus(localize("ONLINE")); - setUserPresence(UserStatusConstants.online); + setUserPresence(true); } }, [setMessageHeaderStatus, setUserPresence] @@ -69,40 +67,41 @@ export const Hooks = ( React.useEffect(() => { if (props.user && props.user.uid) { if (props.user.name) { - setChatWithType(CometChatMessageReceiverType.user); - setChatWith(props.user); + chatWithTypeRef.current = CometChatMessageReceiverType.group; + chatWithRef.current=props.group; updateMessageHeaderStatusForUser(props.user); } else { - getUser(props.user.uid).then((user) => { - setChatWithType(CometChatMessageReceiverType.user); - setChatWith(user); - updateMessageHeaderStatusForUser(user); - }).catch(error => errorHandler(error)); + getUser(props.user.uid) + .then((user) => { + chatWithTypeRef.current = CometChatMessageReceiverType.group; + chatWithRef.current = user; + updateMessageHeaderStatusForUser(user); + }) + .catch((error) => errorHandler(error)); } } else if (props.group && props.group.guid) { if (props.group.name) { - setChatWithType(CometChatMessageReceiverType.group); - setChatWith(props.group); + chatWithTypeRef.current = CometChatMessageReceiverType.group; + chatWithRef.current=props.group; updateMessageHeaderStatusForGroup(props.group); } else { - getGroup(props.group.guid).then((group) => { - setChatWithType(CometChatMessageReceiverType.group); - setChatWith(group); - updateMessageHeaderStatusForGroup(group); - }).catch(error => errorHandler(error)); + getGroup(props.group.guid) + .then((group) => { + chatWithTypeRef.current = CometChatMessageReceiverType.group; + chatWithRef.current=group; + updateMessageHeaderStatusForGroup(group); + }) + .catch((error) => errorHandler(error)); } } }, [ + props, props.user, props.group, - setChatWith, - setChatWithType, + chatWithRef, + chatWithTypeRef, updateMessageHeaderStatusForUser, updateMessageHeaderStatusForGroup, ]); - React.useEffect(() => { - const handler = handlers[callbackData?.name]; - if (handler) return handler(...callbackData?.args); - }, [callbackData, handlers]); }; diff --git a/src/components/Messages/CometChatMessageHeader/index.js b/src/components/Messages/CometChatMessageHeader/index.js index e25e6b7c..62d9c7ec 100644 --- a/src/components/Messages/CometChatMessageHeader/index.js +++ b/src/components/Messages/CometChatMessageHeader/index.js @@ -34,19 +34,24 @@ const CometChatMessageHeader = (props) => { const loggedInUser = React.useRef(null); const messageHeaderManager = React.useRef(new MessageHeaderManager()); - const callbackData = React.useRef(null); - - const [chatWith, setChatWith] = React.useState(null); - const [chatWithType, setChatWithType] = React.useState(null); - + //const callbackData = React.useRef(null); + const callbackDataRef = React.useRef(null); + const chatWithRef = React.useRef(null); + const chatWithTypeRef = React.useRef(null); const [messageHeaderStatus, setMessageHeaderStatus] = React.useState(""); - const [userPresence, setUserPresence] = React.useState("offline"); - const [typingText, setTypingText] = React.useState(null); - + const [userPresence, setUserPresence] = React.useState(false); + const _theme = new CometChatTheme(theme ?? {}); const messageHeaderCallback = (listenerName, ...args) => { - callbackData.current = { name: listenerName, args: [...args] }; + callbackDataRef.current = { name: listenerName, args: [...args] }; + try { + const handler = handlers[callbackDataRef.current?.name]; + + if (handler) return handler(...callbackDataRef.current?.args); + } catch (e) { + throw e; + } }; /** @@ -55,23 +60,23 @@ const CometChatMessageHeader = (props) => { */ const handleUsers = (user) => { if ( - chatWithType === CometChatMessageReceiverType.user && - chatWith?.uid === user.uid + chatWithTypeRef?.current === CometChatMessageReceiverType.user && + chatWithRef?.current?.uid === user.uid ) { if (user.status === UserStatusConstants.offline) { setMessageHeaderStatus(localize("OFFLINE")); - setUserPresence(user.status); + setUserPresence(false); } else if (user.status === UserStatusConstants.online) { setMessageHeaderStatus(localize("ONLINE")); - setUserPresence(user.status); + setUserPresence(true); } } }; const handleGroups = (group) => { if ( - chatWithType === CometChatMessageReceiverType.group && - chatWith?.guid === group.guid + chatWithTypeRef?.current === CometChatMessageReceiverType.group && + chatWithRef?.current?.guid === group.guid ) { const membersCount = parseInt(group.membersCount); const status = `${membersCount} ${localize("MEMBERS")}`; @@ -90,46 +95,43 @@ const CometChatMessageHeader = (props) => { const handleStartTyping = (typingIndicator) => { if ( - chatWithType === CometChatMessageReceiverType.group && - chatWithType === typingIndicator.receiverType && - chatWith?.guid === typingIndicator.receiverId + chatWithTypeRef?.current === CometChatMessageReceiverType.group && + chatWithTypeRef?.current === typingIndicator.receiverType && + chatWithRef?.current?.guid === typingIndicator.receiverId ) { const typingText = `${typingIndicator.sender.name} ${localize( "IS_TYPING" )}`; - setTypingText(typingText); + setMessageHeaderStatus(typingText); } else if ( - chatWithType === CometChatMessageReceiverType.user && - chatWithType === typingIndicator.receiverType && - chatWith?.uid === typingIndicator.sender.uid + chatWithTypeRef?.current === CometChatMessageReceiverType.user && + chatWithTypeRef?.current === typingIndicator.receiverType && + chatWithRef?.current?.uid === typingIndicator.sender.uid ) { const typingText = localize("TYPING"); - setTypingText(typingText); + setMessageHeaderStatus(typingText); } }; const handleEndTyping = (typingIndicator) => { if ( - chatWithType === CometChatMessageReceiverType.group && - chatWithType === typingIndicator.receiverType && - chatWith?.guid === typingIndicator.receiverId + chatWithTypeRef?.current === CometChatMessageReceiverType.group && + chatWithTypeRef?.current === typingIndicator.receiverType && + chatWithRef?.current?.guid === typingIndicator.receiverId ) { - const status = `${chatWith?.membersCount} ${localize("MEMBERS")}`; + const status = `${chatWithRef?.current?.membersCount} ${localize("MEMBERS")}`; setMessageHeaderStatus(status); - setTypingText(null); } else if ( - chatWithType === CometChatMessageReceiverType.user && - chatWithType === typingIndicator.receiverType && - chatWith?.uid === typingIndicator.sender.uid + chatWithTypeRef?.current === CometChatMessageReceiverType.user && + chatWithTypeRef?.current === typingIndicator.receiverType && + chatWithRef?.current?.uid === typingIndicator.sender.uid ) { - if (userPresence === UserStatusConstants.online) { + if (userPresence) { setMessageHeaderStatus(localize("ONLINE")); - setUserPresence(UserStatusConstants.online); - setTypingText(null); + setUserPresence(true); } else { setMessageHeaderStatus(localize("OFFLINE")); - setUserPresence(UserStatusConstants.offline); - setTypingText(null); + setUserPresence(false); } } }; @@ -161,17 +163,15 @@ const CometChatMessageHeader = (props) => { //const _tail = dataItemConfig.tail; Hooks( - props, - loggedInUser, - setChatWith, - setChatWithType, - setMessageHeaderStatus, - setUserPresence, - messageHeaderManager, - messageHeaderCallback, - handlers, - callbackData, - errorHandler + props, + loggedInUser, + chatWithRef, + chatWithTypeRef, + setMessageHeaderStatus, + setUserPresence, + messageHeaderManager, + messageHeaderCallback, + errorHandler ); return ( @@ -180,13 +180,21 @@ const CometChatMessageHeader = (props) => { {getBackButtonElem()}
messageHeaderStatus, + } || _inputData + } style={dataItemStyle(props, _theme)} user={user} group={group} theme={_theme} // options={props.options || _options} - isActive={_isActive} + // isActive={_isActive} />
diff --git a/src/components/Messages/CometChatMessageHelper/index.js b/src/components/Messages/CometChatMessageHelper/index.js index d54c69e4..905188d1 100644 --- a/src/components/Messages/CometChatMessageHelper/index.js +++ b/src/components/Messages/CometChatMessageHelper/index.js @@ -36,6 +36,10 @@ export const getUnixTimestamp = () => { return Math.round(+new Date() / 1000); }; +export const getUniqueTimestamp = () => { + return new Date().getUTCMilliseconds(); +}; + export const getExtensionsData = (message, extensionKey) => { if (message?.hasOwnProperty("metadata")) { const metadata = message.metadata; diff --git a/src/components/Messages/CometChatMessageList/MessageListConfiguration.js b/src/components/Messages/CometChatMessageList/MessageListConfiguration.js index 05c95f2c..b7fef805 100644 --- a/src/components/Messages/CometChatMessageList/MessageListConfiguration.js +++ b/src/components/Messages/CometChatMessageList/MessageListConfiguration.js @@ -1,11 +1,12 @@ import { MessageBubbleConfiguration } from "../Bubbles/CometChatMessageBubble/MessageBubbleConfiguration"; import { DateConfiguration } from "../../Shared/PrimaryComponents/CometChatConfiguration/DateConfiguration"; -import { NewMessageIndicatorConfiguration } from "../CometChatNewMessageIndicator/NewMessageIndicatorConfiguration" -import { SmartRepliesConfiguration } from "../CometChatSmartReplies/SmartRepliesConfiguration" -import { EmojiKeyboardConfiguration } from "../CometChatEmojiKeyboard/EmojiKeyboardConfiguration" -import { MessageInputData} from "../../Shared/InputData/MessageInputData" -import loadingIcon from "./resources/spinner.svg" +import { NewMessageIndicatorConfiguration } from "../CometChatNewMessageIndicator/NewMessageIndicatorConfiguration"; +import { SmartRepliesConfiguration } from "../CometChatSmartReplies/SmartRepliesConfiguration"; +import { EmojiKeyboardConfiguration } from "../CometChatEmojiKeyboard/EmojiKeyboardConfiguration"; +import { MessageInputData } from "../../Shared/InputData/MessageInputData"; +import loadingIcon from "./resources/spinner.svg"; import { MessageListAlignmentConstants } from "../../Shared"; +import { MessageListStyle } from "../"; /** * @class MessageListConfiguration @@ -31,6 +32,7 @@ import { MessageListAlignmentConstants } from "../../Shared"; * @param {Object} dateConfiguration * @param {Object} smartRepliesConfiguration * @param {Object} emojiKeyboardConfiguration + * @param {object} style */ class MessageListConfiguration { @@ -55,18 +57,21 @@ class MessageListConfiguration { title: null, thumbnail: null, readReceipt: null, - timestamp: null + timestamp: null, }), - receivedMessageInputData = new MessageInputData({id: true, + receivedMessageInputData = new MessageInputData({ + id: true, title: null, thumbnail: null, readReceipt: null, - timestamp: null}), + timestamp: null, + }), messageBubbleConfiguration = new MessageBubbleConfiguration({}), newMessageIndicatorConfiguration = new NewMessageIndicatorConfiguration({}), dateConfiguration = new DateConfiguration({}), smartRepliesConfiguration = new SmartRepliesConfiguration({}), - emojiKeyboardConfiguration = new EmojiKeyboardConfiguration({}) + emojiKeyboardConfiguration = new EmojiKeyboardConfiguration({}), + style = new MessageListStyle({}), }) { this.limit = limit; this.onlyUnread = onlyUnread; @@ -77,19 +82,33 @@ class MessageListConfiguration { this.hideError = hideError; this.customView = customView; this.loadingIconURL = loadingIconURL; - this.receivedMessageInputData = new MessageInputData(receivedMessageInputData || {}); - this.sentMessageInputData = new MessageInputData(sentMessageInputData || {}); + this.receivedMessageInputData = new MessageInputData( + receivedMessageInputData || {} + ); + this.sentMessageInputData = new MessageInputData( + sentMessageInputData || {} + ); this.hideDeletedMessages = hideDeletedMessages; this.hideMessagesFromBlockedUsers = hideMessagesFromBlockedUsers; this.excludeMessageTypes = excludeMessageTypes; this.customIncomingMessageSound = customIncomingMessageSound; this.enableSoundForMessages = enableSoundForMessages; this.excludeMessageOptions = excludeMessageOptions; - this.messageBubbleConfiguration = new MessageBubbleConfiguration(messageBubbleConfiguration || {}); - this.newMessageIndicatorConfiguration = new NewMessageIndicatorConfiguration(newMessageIndicatorConfiguration ||{}); + this.messageBubbleConfiguration = new MessageBubbleConfiguration( + messageBubbleConfiguration || {} + ); + this.newMessageIndicatorConfiguration = + new NewMessageIndicatorConfiguration( + newMessageIndicatorConfiguration || {} + ); this.dateConfiguration = new DateConfiguration(dateConfiguration || {}); - this.smartRepliesConfiguration = new SmartRepliesConfiguration(smartRepliesConfiguration || {}); - this.emojiKeyboardConfiguration = new EmojiKeyboardConfiguration(emojiKeyboardConfiguration || {}); + this.smartRepliesConfiguration = new SmartRepliesConfiguration( + smartRepliesConfiguration || {} + ); + this.emojiKeyboardConfiguration = new EmojiKeyboardConfiguration( + emojiKeyboardConfiguration || {} + ); + this.style = new MessageListStyle(style || {}); } } diff --git a/src/components/Messages/CometChatMessageList/MessageListStyle.js b/src/components/Messages/CometChatMessageList/MessageListStyle.js new file mode 100644 index 00000000..60456b46 --- /dev/null +++ b/src/components/Messages/CometChatMessageList/MessageListStyle.js @@ -0,0 +1,50 @@ +import { BaseStyles } from "../../Shared"; +/** + * @class MessageListStyle + * @description MessageListStyle class is used for defining the messageList component's style + * @param {String} width + * @param {String} height + * @param {String} background + * @param {String} border + * @param {String} borderRadius + * @param {String} loadingIconTint + * @param {String} TextFont + * @param {String} TextColor + * @param {String} emptyTextFont + * @param {String} emptyTextColor + * @param {String} errorTextFont + * @param {String} errorTextColor + */ + +class MessageListStyle extends BaseStyles { + constructor({ + width = "100%", + height = "100%", + background = "", + border = "", + borderRadius = "8px", + activeBackground = "", + loadingIconTint = "", + + emptyTextFont = "", + emptyTextColor = "", + errorTextFont = "", + errorTextColor = "", + }) { + super({ + width, + height, + background, + border, + borderRadius, + activeBackground, + }); + this.loadingIconTint = loadingIconTint; + + this.emptyTextFont = emptyTextFont; + this.emptyTextColor = emptyTextColor; + this.errorTextFont = errorTextFont; + this.errorTextColor = errorTextColor; + } +} +export { MessageListStyle }; diff --git a/src/components/Messages/CometChatMessageList/MessageListStyles.js b/src/components/Messages/CometChatMessageList/MessageListStyles.js deleted file mode 100644 index 3ee51387..00000000 --- a/src/components/Messages/CometChatMessageList/MessageListStyles.js +++ /dev/null @@ -1,44 +0,0 @@ -import { BaseStyles } from "../../Shared" -/** - * @class MessageListStyles - * @description MessageListStyles class is used for defining the messageList component's style - * @param {String} width - * @param {String} height - * @param {String} background - * @param {String} border - * @param {String} borderRadius - * @param {String} loadingIconTint - * @param {String} TextFont - * @param {String} TextColor - * @param {String} emptyStateTextFont - * @param {String} emptyStateTextColor - * @param {String} errorStateTextFont - * @param {String} errorStateTextColor - */ - -class MessageListStyles extends BaseStyles { - constructor({ - width, - height, - background, - border, - borderRadius, - loadingIconTint, - TextFont, - TextColor, - emptyStateTextFont, - emptyStateTextColor, - errorStateTextFont, - errorStateTextColor, - }) { - super({ width, height, background, border, borderRadius }); - this.loadingIconTint = loadingIconTint; - this.TextFont = TextFont; - this.TextColor = TextColor; - this.emptyStateTextFont = emptyStateTextFont; - this.emptyStateTextColor = emptyStateTextColor; - this.errorStateTextFont = errorStateTextFont; - this.errorStateTextColor = errorStateTextColor; - } -} -export { MessageListStyles }; diff --git a/src/components/Messages/CometChatMessageList/controller.js b/src/components/Messages/CometChatMessageList/controller.js index 47d55375..7e41b3a6 100644 --- a/src/components/Messages/CometChatMessageList/controller.js +++ b/src/components/Messages/CometChatMessageList/controller.js @@ -1,170 +1,168 @@ import { CometChat } from "@cometchat-pro/chat"; export class MessageListManager { - parentMessageId = null; - messageRequest = null; + parentMessageId = null; + messageRequest = null; - messageListenerId = "message_" + new Date().getTime(); - groupListenerId = "group_" + new Date().getTime(); - user = null; - group = null; + messageListenerId = "message_" + new Date().getTime(); + groupListenerId = "group_" + new Date().getTime(); + user = null; + group = null; - constructor( - limit, - user, - group, - onlyUnread, - hideDeletedMessages, - hideMessagesFromBlockedUsers, - tags, - messageTypesRef, - messageCategoryRef - ) { - const types = messageTypesRef; - const categories = messageCategoryRef; + constructor( + limit, + user, + group, + onlyUnread, + hideDeletedMessages, + hideMessagesFromBlockedUsers, + tags, + messageTypesRef, + messageCategoryRef + ) { + const types = messageTypesRef; + const categories = messageCategoryRef; if (user && user.uid) { - - this.messageRequest = new CometChat.MessagesRequestBuilder() - .setLimit(limit) - .setUID(user.uid) - .setCategories(categories) - .setTypes(types) - .setUnread(onlyUnread) - .hideMessagesFromBlockedUsers(hideMessagesFromBlockedUsers) - .setTags(tags) - .hideDeletedMessages(hideDeletedMessages) - .build(); - } else if (group && group.guid) { - - this.messageRequest = new CometChat.MessagesRequestBuilder() - .setGUID(group.guid) - .setLimit(limit) - .setCategories(categories) - .setTypes(types) - .setUnread(onlyUnread) - .hideMessagesFromBlockedUsers(hideMessagesFromBlockedUsers) - .setTags(tags) - .hideDeletedMessages(hideDeletedMessages) - .build(); - } - } + this.messageRequest = new CometChat.MessagesRequestBuilder() + .setLimit(limit) + .setUID(user.uid) + .setCategories(categories) + .setTypes(types) + .setUnread(onlyUnread) + .hideMessagesFromBlockedUsers(hideMessagesFromBlockedUsers) + .setTags(tags) + .hideDeletedMessages(hideDeletedMessages) + .build(); + } else if (group && group.guid) { + this.messageRequest = new CometChat.MessagesRequestBuilder() + .setGUID(group.guid) + .setLimit(limit) + .setCategories(categories) + .setTypes(types) + .setUnread(onlyUnread) + .hideMessagesFromBlockedUsers(hideMessagesFromBlockedUsers) + .setTags(tags) + .hideDeletedMessages(hideDeletedMessages) + .build(); + } + } fetchPreviousMessages() { - return this.messageRequest.fetchPrevious(); - } + return this.messageRequest.fetchPrevious(); + } - attachListeners(callback) { - CometChat.addMessageListener( - this.messageListenerId, - new CometChat.MessageListener({ - onTextMessageReceived: (textMessage) => { - callback("onTextMessageReceived", textMessage); - }, - onMediaMessageReceived: (mediaMessage) => { - callback("onMediaMessageReceived", mediaMessage); - }, - onCustomMessageReceived: (customMessage) => { - callback("onCustomMessageReceived", customMessage); - }, - onMessagesDelivered: (messageReceipt) => { - callback("onMessagesDelivered", messageReceipt); - }, - onMessagesRead: (messageReceipt) => { - callback("onMessagesRead", messageReceipt); - }, - onMessageDeleted: (deletedMessage) => { - callback("onMessageDeleted", deletedMessage); - }, - onMessageEdited: (editedMessage) => { - callback("onMessageEdited", editedMessage); - }, - }) - ); + attachListeners(callback) { + CometChat.addMessageListener( + this.messageListenerId, + new CometChat.MessageListener({ + onTextMessageReceived: (textMessage) => { + callback("onTextMessageReceived", textMessage); + }, + onMediaMessageReceived: (mediaMessage) => { + callback("onMediaMessageReceived", mediaMessage); + }, + onCustomMessageReceived: (customMessage) => { + callback("onCustomMessageReceived", customMessage); + }, + onMessagesDelivered: (messageReceipt) => { + callback("onMessagesDelivered", messageReceipt); + }, + onMessagesRead: (messageReceipt) => { + callback("onMessagesRead", messageReceipt); + }, + onMessageDeleted: (deletedMessage) => { + callback("onMessageDeleted", deletedMessage); + }, + onMessageEdited: (editedMessage) => { + callback("onMessageEdited", editedMessage); + }, + }) + ); - CometChat.addGroupListener( - this.groupListenerId, - new CometChat.GroupListener({ - onGroupMemberScopeChanged: ( - message, - changedUser, - newScope, - oldScope, - changedGroup - ) => { - callback( - "onGroupMemberScopeChanged", - message, - changedUser, - newScope, - oldScope, - changedGroup - ); - }, - onGroupMemberLeft: (message, leavingUser, group) => { - callback("onGroupMemberLeft", message, leavingUser, group); - }, - onGroupMemberKicked: (message, kickedUser, kickedBy, kickedFrom) => { - callback( - "onGroupMemberKicked", - message, - kickedUser, - kickedBy, - kickedFrom - ); - }, - onGroupMemberBanned: (message, bannedUser, bannedBy, bannedFrom) => { - callback( - "onGroupMemberBanned", - message, - bannedUser, - bannedBy, - bannedFrom - ); - }, - onGroupMemberUnbanned: ( - message, - unbannedUser, - unbannedBy, - unbannedFrom - ) => { - callback( - "onGroupMemberUnbanned", - message, - unbannedUser, - unbannedBy, - unbannedFrom - ); - }, - onMemberAddedToGroup: ( - message, - userAdded, - userAddedBy, - userAddedIn - ) => { - callback( - "onMemberAddedToGroup", - message, - userAdded, - userAddedBy, - userAddedIn - ); - }, - onGroupMemberJoined: (message, joinedUser, joinedGroup) => { - callback( - "onGroupMemberJoined", - message, - joinedUser, - null, - joinedGroup - ); - }, - }) - ); - } + CometChat.addGroupListener( + this.groupListenerId, + new CometChat.GroupListener({ + onGroupMemberScopeChanged: ( + message, + changedUser, + newScope, + oldScope, + changedGroup + ) => { + callback( + "onGroupMemberScopeChanged", + message, + changedUser, + newScope, + oldScope, + changedGroup + ); + }, + onGroupMemberLeft: (message, leavingUser, group) => { + callback("onGroupMemberLeft", message, leavingUser, group); + }, + onGroupMemberKicked: (message, kickedUser, kickedBy, kickedFrom) => { + callback( + "onGroupMemberKicked", + message, + kickedUser, + kickedBy, + kickedFrom + ); + }, + onGroupMemberBanned: (message, bannedUser, bannedBy, bannedFrom) => { + callback( + "onGroupMemberBanned", + message, + bannedUser, + bannedBy, + bannedFrom + ); + }, + onGroupMemberUnbanned: ( + message, + unbannedUser, + unbannedBy, + unbannedFrom + ) => { + callback( + "onGroupMemberUnbanned", + message, + unbannedUser, + unbannedBy, + unbannedFrom + ); + }, + onMemberAddedToGroup: ( + message, + userAdded, + userAddedBy, + userAddedIn + ) => { + callback( + "onMemberAddedToGroup", + message, + userAdded, + userAddedBy, + userAddedIn + ); + }, + onGroupMemberJoined: (message, joinedUser, joinedGroup) => { + callback( + "onGroupMemberJoined", + message, + joinedUser, + null, + joinedGroup + ); + }, + }) + ); + } - removeListeners() { - CometChat.removeMessageListener(this.messageListenerId); - CometChat.removeGroupListener(this.groupListenerId); - } + removeListeners() { + CometChat.removeMessageListener(this.messageListenerId); + CometChat.removeGroupListener(this.groupListenerId); + } } diff --git a/src/components/Messages/CometChatMessageList/hooks.js b/src/components/Messages/CometChatMessageList/hooks.js index 17120c47..2c36f9f7 100644 --- a/src/components/Messages/CometChatMessageList/hooks.js +++ b/src/components/Messages/CometChatMessageList/hooks.js @@ -5,239 +5,233 @@ import { MessageListManager } from "./controller"; import { getDefaultTypes } from "../CometChatMessageTemplate"; export const fetchMessages = (MessageListManager) => { - return new Promise((resolve, reject) => { - MessageListManager.fetchPreviousMessages() - .then((messageList) => resolve(messageList)) - .catch((error) => reject(error)); - }); + return new Promise((resolve, reject) => { + MessageListManager.fetchPreviousMessages() + .then((messageList) => resolve(messageList)) + .catch((error) => reject(error)); + }); }; export const Hooks = ( - limit, - user, - group, - excludeMessageTypes, - onlyUnread, - hideDeletedMessages, - hideMessagesFromBlockedUsers, - tags, - messageTypes, - loggedInUserRef, - messageList, - setMessageList, - setDecoratorMessage, - setChatWith, - setChatWithType, - messageHandler, - messageListCallback, - handlers, - callbackData, - messageTypesRef, - messageCategoryRef, - messageListManagerRef, - localize, - errorHandler, - chatWith, - chatWithType, - setMessageCount, - setnewMessage + limit, + user, + group, + excludeMessageTypes, + onlyUnread, + hideDeletedMessages, + hideMessagesFromBlockedUsers, + tags, + messageTypes, + loggedInUserRef, + messageList, + setMessageList, + setDecoratorMessage, + messageHandler, + messageListCallback, + messageTypesRef, + messageCategoryRef, + messageListManagerRef, + localize, + errorHandler, + chatWithRef, + chatWithTypeRef, + setMessageCount, + setnewMessage ) => { - React.useEffect(() => { - //fetching logged in user - - CometChat.getLoggedinUser() - .then((user) => { - loggedInUserRef.current = { ...user }; - - // // Setting MessageList ManagerRef if messageTypes is supplied by the user - if (messageTypes) { - if (messageTypes.length === 0) { - return ( - (messageCategoryRef.current = []), - (messageTypesRef.current = []), - setDecoratorMessage(localize("NO_MESSAGE_TYPE_SET")) - ); - } else { - messageTypesRef.current = messageTypes.map((value) => { - return value.type; - }); - messageCategoryRef.current = [ - ...new Set( - messageTypes.map((value) => { - return value.category; - }) - ), - ]; - if (excludeMessageTypes && excludeMessageTypes.length) { - messageTypesRef.current.filter( - (val) => !excludeMessageTypes?.includes(val) - ); - } - } - } - // Setting MessageList ManagerRef by default - else { - const messageTemplateObject = getDefaultTypes(); - messageTypesRef.current = messageTemplateObject.map((value) => { - return value.type; - }); - messageCategoryRef.current = [ - ...new Set( - messageTemplateObject.map((value) => { - return value.category; - }) - ), - ]; - if (excludeMessageTypes && excludeMessageTypes.length) { - messageTypesRef.current.filter( - (val) => !excludeMessageTypes?.includes(val) - ); - } - } - messageListManagerRef.current = new MessageListManager( - limit, - user, - group, - onlyUnread, - hideDeletedMessages, - hideMessagesFromBlockedUsers, - tags, - messageTypesRef.current, - messageCategoryRef.current - ); - - messageListManagerRef?.current?.attachListeners(messageListCallback); - setMessageList([]); - - // Fetch MessageList - fetchMessages(messageListManagerRef?.current) - .then((messages) => { - if (messageList.length === 0 && messages.length === 0) { - setDecoratorMessage(localize("NO_MESSAGES_FOUND")); - } else { - setMessageCount(messages.length); - setMessageList(messages); - setDecoratorMessage(""); - messageHandler(messages, true); - } - }) - .catch((error) => { - errorHandler(error); - setDecoratorMessage(localize("SOMETHING_WRONG")); - }); - }) - .catch((error) => { - errorHandler(error); - - setDecoratorMessage(localize("SOMETHING_WRONG")); - }); - }, []); - - // Update MessageList on change of props - React.useEffect(() => { - setnewMessage([]); - if (messageTypes) { - if (messageTypes.length === 0) { - return ( - (messageCategoryRef.current = []), - (messageTypesRef.current = []), - setDecoratorMessage(localize("NO_MESSAGE_TYPE_SET")) - ); - } else { - messageTypesRef.current = messageTypes.map((value) => { - return value.type; - }); - messageCategoryRef.current = [ - ...new Set( - messageTypes.map((value) => { - return value.category; - }) - ), - ]; - if (excludeMessageTypes && excludeMessageTypes.length) { - messageTypesRef.current.filter( - (val) => !excludeMessageTypes?.includes(val) - ); - } - } - } - - messageListManagerRef.current = new MessageListManager( - limit, - user, - group, - onlyUnread, - hideDeletedMessages, - hideMessagesFromBlockedUsers, - tags, - messageTypesRef.current, - messageCategoryRef.current - ); - - setMessageList([]); - - fetchMessages(messageListManagerRef?.current) - .then((messages) => { - if (messageList.length === 0 && messages.length === 0) { - setDecoratorMessage(localize("NO_MESSAGES_FOUND")); - } else { - setMessageCount(messages.length); - setMessageList(messages); - setDecoratorMessage(""); - } - messageHandler(messages, true); - }) - .catch((error) => { - errorHandler(error); - - setDecoratorMessage(localize("SOMETHING_WRONG")); - }); - - return () => { - if ( - messageListManagerRef && - messageListManagerRef.current && - typeof messageListManagerRef.current.removeListeners === "function" - ) { - messageListManagerRef.current?.removeListeners(); - } - }; - }, [ - limit, - tags, - onlyUnread, - user, - group, - messageTypes, - hideDeletedMessages, - hideMessagesFromBlockedUsers, - ]); - - //set receiver and receiver type - React.useEffect(() => { - //set receiver and receiver type - if (user && user.uid) { - setChatWithType(ReceiverTypeConstants.user); - setChatWith(user); - } else if (group && group.guid) { - setChatWithType(ReceiverTypeConstants.group); - setChatWith(group); - } - }, []); - - //update receiver and receiver type - React.useEffect(() => { - if (user && user.uid) { - setChatWithType(ReceiverTypeConstants.user); - setChatWith(user); - } else if (group && group.guid) { - setChatWithType(ReceiverTypeConstants.group); - setChatWith(group); - } - }, [user, group, setChatWithType, setChatWith]); - - React.useEffect(() => { - const handler = handlers[callbackData?.name]; - if (handler) return handler(...callbackData?.args); - }, [callbackData]); + React.useEffect(() => { + //fetching logged in user + CometChat.getLoggedinUser() + .then((user) => { + loggedInUserRef.current = { ...user }; + + // // Setting MessageList ManagerRef if messageTypes is supplied by the user + if (messageTypes) { + if (messageTypes.length === 0) { + return ( + (messageCategoryRef.current = []), + (messageTypesRef.current = []), + setDecoratorMessage(localize("NO_MESSAGE_TYPE_SET")) + ); + } else { + messageTypesRef.current = messageTypes.map((value) => { + return value.type; + }); + messageCategoryRef.current = [ + ...new Set( + messageTypes.map((value) => { + return value.category; + }) + ), + ]; + if (excludeMessageTypes && excludeMessageTypes.length) { + messageTypesRef.current.filter( + (val) => !excludeMessageTypes?.includes(val) + ); + } + } + } + // Setting MessageList ManagerRef by default + else { + const messageTemplateObject = getDefaultTypes(); + messageTypesRef.current = messageTemplateObject.map((value) => { + return value.type; + }); + messageCategoryRef.current = [ + ...new Set( + messageTemplateObject.map((value) => { + return value.category; + }) + ), + ]; + if (excludeMessageTypes && excludeMessageTypes.length) { + messageTypesRef.current = messageTypesRef.current.filter( + (val) => !excludeMessageTypes?.includes(val) + ); + } + } + + messageListManagerRef.current = new MessageListManager( + limit, + user, + group, + onlyUnread, + hideDeletedMessages, + hideMessagesFromBlockedUsers, + tags, + messageTypesRef.current, + messageCategoryRef.current + ); + + messageListManagerRef?.current?.attachListeners(messageListCallback); + setMessageList([]); + + // Fetch MessageList + fetchMessages(messageListManagerRef?.current) + .then((messages) => { + if (messageList.length === 0 && messages.length === 0) { + setDecoratorMessage(localize("NO_MESSAGES_FOUND")); + } else { + setMessageCount(messages.length); + setMessageList(messages); + setDecoratorMessage(""); + messageHandler(messages, true); + } + }) + .catch((error) => { + errorHandler(error); + setDecoratorMessage(localize("SOMETHING_WRONG")); + }); + }) + .catch((error) => { + errorHandler(error); + + setDecoratorMessage(localize("SOMETHING_WRONG")); + }); + }, []); + + // Update MessageList on change of props + React.useEffect(() => { + setnewMessage([]); + if (messageTypes) { + if (messageTypes.length === 0) { + return ( + (messageCategoryRef.current = []), + (messageTypesRef.current = []), + setDecoratorMessage(localize("NO_MESSAGE_TYPE_SET")) + ); + } else { + messageTypesRef.current = messageTypes.map((value) => { + return value.type; + }); + messageCategoryRef.current = [ + ...new Set( + messageTypes.map((value) => { + return value.category; + }) + ), + ]; + if (excludeMessageTypes && excludeMessageTypes.length) { + messageTypesRef.current = messageTypesRef.current.filter( + (val) => !excludeMessageTypes?.includes(val) + ); + } + } + } + + messageListManagerRef.current = new MessageListManager( + limit, + user, + group, + onlyUnread, + hideDeletedMessages, + hideMessagesFromBlockedUsers, + tags, + messageTypesRef.current, + messageCategoryRef.current + ); + + setMessageList([]); + + fetchMessages(messageListManagerRef?.current) + .then((messages) => { + if (messageList.length === 0 && messages.length === 0) { + setDecoratorMessage(localize("NO_MESSAGES_FOUND")); + } else { + setMessageCount(messages.length); + setMessageList(() => { + return [...messages]; + }); + setDecoratorMessage(""); + } + messageHandler(messages, true); + }) + .catch((error) => { + errorHandler(error); + + setDecoratorMessage(localize("SOMETHING_WRONG")); + }); + + return () => { + setMessageList([]); + if ( + messageListManagerRef && + messageListManagerRef.current && + typeof messageListManagerRef.current.removeListeners === "function" + ) { + messageListManagerRef.current?.removeListeners(); + } + }; + }, [ + limit, + tags, + onlyUnread, + user, + group, + messageTypes, + hideDeletedMessages, + hideMessagesFromBlockedUsers, + ]); + + //set receiver and receiver type + React.useEffect(() => { + //set receiver and receiver type + if (user && user.uid) { + chatWithTypeRef.current = ReceiverTypeConstants.user; + chatWithRef.current = user; + } else if (group && group.guid) { + chatWithTypeRef.current = ReceiverTypeConstants.group; + chatWithRef.current = group; + } + }, []); + + //update receiver and receiver type + React.useEffect(() => { + if (user && user.uid) { + chatWithTypeRef.current = ReceiverTypeConstants.user; + chatWithRef.current = user; + } else if (group && group.guid) { + chatWithTypeRef.current = ReceiverTypeConstants.group; + chatWithRef.current = group; + } + }, [user, group, chatWithTypeRef, chatWithRef]); }; diff --git a/src/components/Messages/CometChatMessageList/index.js b/src/components/Messages/CometChatMessageList/index.js index 44ce3947..08775f16 100644 --- a/src/components/Messages/CometChatMessageList/index.js +++ b/src/components/Messages/CometChatMessageList/index.js @@ -37,6 +37,8 @@ import { CustomView, } from "../.."; +import { MessageBubbleStyle } from ".."; + import loadingIcon from "./resources/spinner.svg"; import { fetchMessages, Hooks } from "./hooks"; @@ -59,7 +61,7 @@ import { } from "./style"; import { messageStatus } from "../CometChatMessageConstants"; -import { CometChatDate, DateStyles } from "../../Shared"; +import { CometChatDate, DateStyle } from "../../Shared"; import { EmojiKeyboardConfiguration } from "../"; @@ -67,6 +69,7 @@ import { SmartRepliesConfiguration } from "../CometChatSmartReplies/SmartReplies import { NewMessageIndicatorConfiguration } from "../CometChatNewMessageIndicator/NewMessageIndicatorConfiguration"; import { MessageBubbleConfiguration } from "../Bubbles/CometChatMessageBubble/MessageBubbleConfiguration"; import { DateConfiguration } from "../../Shared/PrimaryComponents/CometChatConfiguration/DateConfiguration"; +import { getUnixTimestamp } from "../CometChatMessageHelper"; /** * * CometChatMessageList component retrieves the latest messages and presents them inside a message bubble, that a CometChat logged-in user has been a part of. @@ -113,18 +116,16 @@ const CometChatMessageList = React.forwardRef((props, ref) => { newMessageIndicatorConfiguration, dateConfiguration, } = props; - let lastScrollTop = 0; const loggedInUserRef = React.useRef(null); const [messageCount, setMessageCount] = React.useState(0); const [messageList, setMessageList] = React.useState([]); const [unreadMessageCount, setUnreadMessageCount] = React.useState(0); - const [callbackData, setCallbackData] = React.useState(null); + const chatWithRef = React.useRef(null); + const chatWithTypeRef = React.useRef(null); const [decoratorMessage, setDecoratorMessage] = React.useState( localize("LOADING") ); - const [chatWith, setChatWith] = React.useState(null); - const [chatWithType, setChatWithType] = React.useState(null); const messageTypesRef = React.useRef(null); const messageCategoryRef = React.useRef(null); let messageListManagerRef = React.useRef(null); @@ -162,8 +163,13 @@ const CometChatMessageList = React.forwardRef((props, ref) => { reactToMessages: reactToMessages, })); - const messageListCallback = (listenerName, ...args) => { - setCallbackData({ name: listenerName, args: [...args] }); + const messageListCallback = (listenerName, args) => { + try { + const handler = handlers[listenerName]; + if (handler) return handler(args); + } catch (e) { + throw e; + } }; const errorHandler = (errorCode) => { @@ -202,18 +208,18 @@ const CometChatMessageList = React.forwardRef((props, ref) => { * add new message to the messageList */ const addMessage = (message) => { - const messagelist = [...messageList]; - messagelist.push(message); - setMessageList(messagelist); - - // scrollToBottom() + setMessageList((prevMessageList) => { + const messagelist = [...prevMessageList]; + messagelist.push(message); + return [...messagelist]; + }); }; /** * Set unreadCount when new message is received */ const updateUnreadMessageCount = () => { - setUnreadMessageCount(unreadMessageCount + 1); + setUnreadMessageCount(unreadMessageCount => unreadMessageCount + 1); }; /** @@ -257,52 +263,65 @@ const CometChatMessageList = React.forwardRef((props, ref) => { */ const updateMessage = (message, withMuid = false) => { let messageKey; - const messagelist = [...messageList]; - if (withMuid) { - messageKey = messagelist.findIndex((m) => m.muid === message.muid); - } else { - messageKey = messagelist.findIndex((m) => m.id === message.id); - } - if (messageKey > -1) { - const messageObject = { ...messageList[messageKey], ...message }; + setMessageList((prevMessageList) => { + const messagelist = [...prevMessageList]; + if (withMuid) { + messageKey = messagelist.findIndex((m) => m.muid === message.muid); + } else { + messageKey = messagelist.findIndex((m) => m.id === message.id); + } + if (messageKey > -1) { + const messageObject = { ...messageList[messageKey], ...message }; - messagelist.splice(messageKey, 1, messageObject); + messagelist.splice(messageKey, 1, messageObject); - setMessageCount(messagelist.length); - setMessageList(messagelist); - } + setMessageCount(messagelist.length); + } + return [...messagelist]; + }); }; /** * Update message as read; show double blue tick */ const updateMessageAsRead = (message) => { - const messagelist = [...messageList]; - let messageKey = messagelist.findIndex((m) => m.id === message.messageId); - - if (messageKey > -1) { - const messageObject = { ...messageList[messageKey] }; - messageObject.readAt = message.getReadAt(); - messagelist.splice(messageKey, 1, messageObject); - setMessageList(messagelist); - } + setMessageList((prevMessageList) => { + const messagelist = [...prevMessageList]; + let messageKey = messagelist.findIndex( + (m) => m.id === message?.messageId + ); + if (messageKey > -1) { + for (let i = messageKey; i >= 0; i--) { + let messageObj = { ...messagelist[i] }; + if (!messageObj.readAt) { + messageObj.readAt = message?.getReadAt(); + messagelist.splice(i, 1, { ...messageObj }); + } else { + break; + } + } + } + return [...messagelist]; + }); }; /** * Update message as deleted; show deleted message bubble */ const removeMessage = (message) => { - const messages = [...messageList]; - let messageKey = messages.findIndex((m) => m.id === message.id); - if (messageKey > -1) { - if (hideDeletedMessages) { - messages.splice(messageKey, 1); - } else { - const messageObject = { ...messages[messageKey], ...message }; - messages.splice(messageKey, 1, messageObject); + setMessageList((prevMessageList) => { + const messages = [...prevMessageList]; + let messageKey = messages.findIndex((m) => m.id === message.id); + if (messageKey > -1) { + if (hideDeletedMessages) { + messages.splice(messageKey, 1); + } else { + const messageObject = { ...messages[messageKey], ...message }; + messages.splice(messageKey, 1, messageObject); + } + return [...messages]; } - setMessageList(() => messages); - } + }); }; /** @@ -311,6 +330,7 @@ const CometChatMessageList = React.forwardRef((props, ref) => { * emits markAsRead Event */ const markMessageAsRead = (message) => { + console.log(message); if (!message?.readAt) { CometChat.markAsRead(message).catch((error) => { errorHandler(error); @@ -320,12 +340,11 @@ const CometChatMessageList = React.forwardRef((props, ref) => { const handleNewMessages = (message) => { //handling dom lag - increment count only for main message list - setnewMessage(message); const messageReceivedHandler = (message) => { //if the user has not scrolled in chat window(scroll is at the bottom of the chat window) - setMessageCount(messageCount + 1); + setMessageCount((messageCount)=>messageCount + 1); if ( messageListEndRef.current.scrollHeight - messageListEndRef.current.scrollTop - @@ -356,13 +375,13 @@ const CometChatMessageList = React.forwardRef((props, ref) => { * message receiver is chat window group */ if ( - chatWithType === ReceiverTypeConstants.group && + chatWithTypeRef?.current === ReceiverTypeConstants.group && message.getReceiverType() === ReceiverTypeConstants.group && - message.getReceiverId() === chatWith?.guid + message.getReceiverId() === chatWithRef?.current?.guid ) { messageReceivedHandler(message); } else if ( - chatWithType === ReceiverTypeConstants.user && + chatWithTypeRef?.current === ReceiverTypeConstants.user && message.getReceiverType() === ReceiverTypeConstants.user ) { /** @@ -371,10 +390,10 @@ const CometChatMessageList = React.forwardRef((props, ref) => { * If the message sender is logged-in user and message receiver is chat window user */ if ( - (message.getSender().uid === chatWith?.uid && + (message.getSender().uid === chatWithRef?.current?.uid && message.getReceiverId() === loggedInUserRef?.current?.uid) || (message.getSender().uid === loggedInUserRef?.current?.uid && - message.getReceiverId() === chatWith?.uid) + message.getReceiverId() === chatWithRef?.current?.uid) ) { messageReceivedHandler(message); } @@ -383,7 +402,7 @@ const CometChatMessageList = React.forwardRef((props, ref) => { const handleNewCustomMessages = (message) => { const customMessageReceivedHandler = (message) => { - setMessageCount(messageCount + 1); + setMessageCount((messageCount)=>messageCount + 1); //if the user has not scrolled in chat window(scroll is at the bottom of the chat window) if ( messageListEndRef.current.scrollHeight - @@ -412,10 +431,10 @@ const CometChatMessageList = React.forwardRef((props, ref) => { }; if ( - chatWithType === ReceiverTypeConstants.group && + chatWithTypeRef.current === ReceiverTypeConstants.group && message.getReceiverType() === ReceiverTypeConstants.group && loggedInUserRef.current?.uid === message.getSender().uid && - message.getReceiverId() === chatWith?.guid && + message.getReceiverId() === chatWithRef?.current?.guid && (message.type === CometChatCustomMessageTypes.poll || message.type === CometChatCustomMessageTypes.document || message.type === CometChatCustomMessageTypes.whiteboard) @@ -424,22 +443,22 @@ const CometChatMessageList = React.forwardRef((props, ref) => { addMessage(message); scrollToBottom(); } else if ( - chatWithType === ReceiverTypeConstants.group && + chatWithTypeRef.current === ReceiverTypeConstants.group && message.getReceiverType() === ReceiverTypeConstants.group && - message.getReceiverId() === chatWith?.guid + message.getReceiverId() === chatWithRef?.current?.guid ) { customMessageReceivedHandler(message, ReceiverTypeConstants.group); } else if ( - chatWithType === ReceiverTypeConstants.user && + chatWithTypeRef.current === ReceiverTypeConstants.user && message.getReceiverType() === ReceiverTypeConstants.user && - message.getSender().uid === chatWith?.uid + message.getSender().uid === chatWithRef?.current?.uid ) { customMessageReceivedHandler(message, ReceiverTypeConstants.user); } else if ( - chatWithType === ReceiverTypeConstants.user && + chatWithTypeRef.current === ReceiverTypeConstants.user && message.getReceiverType() === ReceiverTypeConstants.user && loggedInUserRef.current?.uid === message.getSender().uid && - message.getReceiverId() === chatWith?.uid && + message.getReceiverId() === chatWithRef?.current?.uid && (message.type === CometChatCustomMessageTypes.poll || message.type === CometChatCustomMessageTypes.document || message.type === CometChatCustomMessageTypes.whiteboard) @@ -453,8 +472,8 @@ const CometChatMessageList = React.forwardRef((props, ref) => { const handleMessageDeliveryAndReadReceipt = (messageReceipt) => { //read receipts if ( - messageReceipt?.getReceiverType() === ReceiverTypeConstants.user && - messageReceipt?.getSender()?.getUid() === chatWith?.uid && + messageReceipt?.receiverType === ReceiverTypeConstants.user && + messageReceipt?.getSender()?.getUid() === chatWithRef?.current?.uid && messageReceipt?.getReceiver() === loggedInUserRef.current.uid ) { if (messageReceipt?.getReceiptType() === "delivery") { @@ -464,22 +483,22 @@ const CometChatMessageList = React.forwardRef((props, ref) => { } } else if ( messageReceipt?.getReceiverType() === ReceiverTypeConstants.group && - messageReceipt?.getReceiver() === chatWith?.guid + messageReceipt?.getReceiver() === chatWithRef?.current?.guid ) { } }; const handleMessageDelete = (message) => { if ( - chatWithType === ReceiverTypeConstants.group && + chatWithTypeRef?.current === ReceiverTypeConstants.group && message.getReceiverType() === ReceiverTypeConstants.group && - message.getReceiverId() === chatWith?.guid + message.getReceiverId() === chatWithRef?.current?.guid ) { removeMessage(message); } else if ( - chatWith === ReceiverTypeConstants.user && + chatWithTypeRef?.current === ReceiverTypeConstants.user && message.getReceiverType() === ReceiverTypeConstants.user && - message.getSender().uid === chatWith?.uid + message.getSender().uid === chatWithRef?.current?.uid ) { removeMessage(message); } @@ -487,23 +506,23 @@ const CometChatMessageList = React.forwardRef((props, ref) => { const handleMessageEdit = (message) => { if ( - chatWithType === ReceiverTypeConstants.group && + chatWithTypeRef?.current === ReceiverTypeConstants.group && message.getReceiverType() === ReceiverTypeConstants.group && - message.getReceiverId() === chatWith?.guid + message.getReceiverId() === chatWithRef?.current?.guid ) { updateMessage(message); } else if ( - chatWithType === ReceiverTypeConstants.user && + chatWithTypeRef?.current === ReceiverTypeConstants.user && message.getReceiverType() === ReceiverTypeConstants.user && loggedInUserRef.current.uid === message.getReceiverId() && - message.getSender().uid === chatWith?.uid + message.getSender().uid === chatWithRef?.current?.uid ) { updateMessage(message); } else if ( - chatWithType === ReceiverTypeConstants.user && + chatWithTypeRef?.current === ReceiverTypeConstants.user && message.getReceiverType() === ReceiverTypeConstants.user && loggedInUserRef.current.uid === message.getSender().uid && - message.getReceiverId() === chatWith?.uid + message.getReceiverId() === chatWithRef?.current?.uid ) { updateMessage(message); } @@ -511,13 +530,13 @@ const CometChatMessageList = React.forwardRef((props, ref) => { const handleNewGroupActionMessage = (message) => { if ( - chatWithType === ReceiverTypeConstants.group && + chatWithTypeRef?.current === ReceiverTypeConstants.group && message.getReceiverType() === ReceiverTypeConstants.group && - message.getReceiverId() === chatWith?.guid + message.getReceiverId() === chatWithRef?.current?.guid ) { playNotificationSound(message); addMessage(message); - // scrollToBottom(); + scrollToBottom(); markMessageAsRead(message); CometChatMessageEvents.emit( CometChatMessageEvents.onMessageRead, @@ -566,25 +585,29 @@ const CometChatMessageList = React.forwardRef((props, ref) => { const scrollToBottom = (scrollHeight = 0) => { setTimeout(() => { - if (messageListEndRef) { + if (messageListEndRef && messageListEndRef.current) { messageListEndRef.current.scrollTop = messageListEndRef.current.scrollHeight - scrollHeight; } - }); + }, 10); }; const handleScroll = (event) => { const scrollTop = event.currentTarget.scrollTop; const scrollHeight = event.currentTarget.scrollHeight; + const clientHeight = event.currentTarget.clientHeight; lastScrollTop = scrollHeight - scrollTop; + if (lastScrollTop - clientHeight <= 1) { + scrolledToBottom(); + } + const top = Math.round(scrollTop) === 0; if (top && messageList.length) { fetchMessages(messageListManagerRef?.current) - .then((messagelist) => { - prependMessages(messagelist); - messageHandler(messagelist, true, lastScrollTop); + .then((messageList) => { + messageHandler(messageList, false); }) .catch((error) => { errorHandler(error); @@ -597,15 +620,22 @@ const CometChatMessageList = React.forwardRef((props, ref) => { * Update message as delivered; show double grey tick */ const updateMessageAsDelivered = (message) => { - const messagelist = [...messageList]; - let messageKey = messagelist.findIndex((m) => m.id === message.messageId); - - if (messageKey > -1) { - const messageObject = { ...messageList[messageKey] }; - messageObject.deliveredAt = message.getDeliveredAt(); - messagelist?.splice(messageKey, 1, messageObject); - setMessageList(messagelist); - } + setMessageList((prevMessageList) => { + const messagelist = [...prevMessageList]; + let messageKey = messagelist.findIndex((m) => m.id === message.messageId); + if (messageKey > -1) { + for (let i = messageKey; i >= 0; i--) { + let messageObj = messagelist[i]; + if (!messageObj.deliveredAt) { + messageObj.deliveredAt = message?.getDeliveredAt(); + messagelist.splice(i, 1, { ...messageObj }); + } else { + break; + } + } + } + return [...messagelist]; + }); }; /** @@ -624,6 +654,7 @@ const CometChatMessageList = React.forwardRef((props, ref) => { setUnreadMessageCount(0); scrollToBottom(); markMessageAsRead(message); + updateMessageAsRead(message); CometChatMessageEvents.emit( CometChatMessageEvents.onMessageRead, message @@ -676,19 +707,15 @@ const CometChatMessageList = React.forwardRef((props, ref) => { messageList, setMessageList, setDecoratorMessage, - setChatWith, - setChatWithType, messageHandler, messageListCallback, - handlers, - callbackData, messageTypesRef, messageCategoryRef, messageListManagerRef, localize, errorHandler, - chatWith, - chatWithType, + chatWithRef, + chatWithTypeRef, setMessageCount, setnewMessage ); @@ -767,8 +794,16 @@ const CometChatMessageList = React.forwardRef((props, ref) => { * Deletes the selected message */ const deleteMessage = (message) => { + CometChatMessageEvents.emit(CometChatMessageEvents.onMessageDelete, { + message: message, + status: messageStatus.inprogress, + }); CometChat.deleteMessage(message.id) .then((deletedMessage) => { + CometChatMessageEvents.emit(CometChatMessageEvents.onMessageDelete, { + message: deletedMessage, + status: messageStatus.success, + }); removeMessage(deletedMessage); }) .catch((error) => { @@ -1075,9 +1110,11 @@ const CometChatMessageList = React.forwardRef((props, ref) => { messageTemplateObject.type === message.type && messageTemplateObject.customView ); - if (templateObject?.customView) { - return templateObject.customView; + + if (templateObject[0]?.customView) { + return templateObject[0].customView; } + return null; } }; @@ -1094,7 +1131,7 @@ const CometChatMessageList = React.forwardRef((props, ref) => { const getMessageContainer = () => { let messageContainer = null; if ( - messageList.length === 0 && + messageList?.length === 0 && decoratorMessage?.toLowerCase() === localize("LOADING").toLowerCase() ) { messageContainer = ( @@ -1103,7 +1140,7 @@ const CometChatMessageList = React.forwardRef((props, ref) => { className="messagelist__decorator-message" > {customView?.loading ? ( - getCustomView(customView.loading, props) + getCustomView(customView?.loading, props) ) : (
{
); } else if ( - messageList.length === 0 && + messageList?.length === 0 && decoratorMessage?.toLowerCase() === localize("NO_MESSAGES_FOUND").toLowerCase() ) { @@ -1178,7 +1215,7 @@ const CometChatMessageList = React.forwardRef((props, ref) => { className="messagelist__decorator-message" > {customView?.error ? ( - getCustomView(customView.error, props) + getCustomView(customView?.error, props) ) : (

{ } loggedInUser={loggedInUserRef.current} onClick={_smartRepliesConfiguration.onClick} - style={smartReplyStyle(_theme)} + style={smartReplyStyle(_theme, _smartRepliesConfiguration)} onClose={onClose.bind(this)} /> ); @@ -1251,8 +1288,11 @@ const CometChatMessageList = React.forwardRef((props, ref) => { scrolledToBottom.bind(this) || _newMessageIndicatorConfiguration.onClick } - Icon={_newMessageIndicatorConfiguration.Icon} - style={messageIndicatorStyle(_theme)} + IconURL={_newMessageIndicatorConfiguration.IconURL} + style={messageIndicatorStyle( + _theme, + _newMessageIndicatorConfiguration + )} /> ); } @@ -1266,7 +1306,6 @@ const CometChatMessageList = React.forwardRef((props, ref) => { const renderItems = () => { // to hold date value for first message let previousMessageDate = null; - return messageList.map((eachMessage) => { // date label component let dateSeparator = null; @@ -1289,7 +1328,7 @@ const CometChatMessageList = React.forwardRef((props, ref) => { const pattern = _dateConfiguration?.pattern; const customPattern = _dateConfiguration?.customPattern; - const dateStyle = new DateStyles({ + const dateStyle = new DateStyle({ ..._dateConfiguration?.style, textColor: _dateConfiguration?.style?.textColor || @@ -1346,7 +1385,7 @@ const CometChatMessageList = React.forwardRef((props, ref) => { }; messageBubbleData = receivedMessageInputData; } - let style = { + let style = new MessageBubbleStyle({ width: "100%", height: "100%", border: "0 none", @@ -1356,7 +1395,7 @@ const CometChatMessageList = React.forwardRef((props, ref) => { ...background, nameTextColor: _theme.palette.accent500[_theme.palette.mode], timestampColor: _theme.palette.accent[_theme.palette.mode], - }; + }); return !eachMessage.action ? ( @@ -1386,6 +1425,7 @@ const CometChatMessageList = React.forwardRef((props, ref) => { style={{ ...style }} theme={_theme} updateReaction={onReactToMessages.bind(this)} + messageBubbleConfiguration={_messageBubbleConfiguration} /> }

diff --git a/src/components/Messages/CometChatMessageList/style.js b/src/components/Messages/CometChatMessageList/style.js index 11ca89b7..08aefa0a 100644 --- a/src/components/Messages/CometChatMessageList/style.js +++ b/src/components/Messages/CometChatMessageList/style.js @@ -1,5 +1,6 @@ import { messageAlignment } from ".."; import { fontHelper } from "../../Shared"; +import { SmartReplyStyle, NewMessageIndicatorStyle } from ".."; export const chatListStyle = (style, theme) => { return { @@ -7,6 +8,7 @@ export const chatListStyle = (style, theme) => { style.background || theme?.palette?.background[theme?.palette?.mode], width: style?.width, height: style?.height, + minHeight: "200px", flex: "1 1 0", order: "2", position: "relative", @@ -177,28 +179,55 @@ export const messageBubbleStyle = (alignment, loggedInUser, messageObject) => { }, }; }; -export const smartReplyStyle = (theme) => { + +export const smartReplyStyle = (theme, smartRepliesConfiguration) => { return { - padding: "8px 8px 16px 8px", + ...new SmartReplyStyle({ + background: + smartRepliesConfiguration?.style?.background || + theme?.palette?.background[theme?.palette?.mode], + textFont: + smartRepliesConfiguration?.style?.textFont || + fontHelper(theme?.typography?.subtitle2), + textBackground: + smartRepliesConfiguration?.style?.textBackground || + theme?.palette?.accent900[theme?.palette?.mode], + textColor: + smartRepliesConfiguration?.style?.textColor || + theme?.palette?.accent[theme?.palette?.mode], + closeIconTint: + smartRepliesConfiguration?.style?.closeIconTint || + theme?.palette?.accent600[theme?.palette?.mode], + border: smartRepliesConfiguration?.style?.border, + }), marginBottom: "-8px", - background: theme?.palette?.background[theme?.palette?.mode], - textFont: fontHelper(theme?.typography?.subtitle2), - textBackground: theme?.palette?.accent900[theme?.palette?.mode], - textColor: theme?.palette?.accent[theme?.palette?.mode], - iconTint: theme?.palette?.accent600[theme?.palette?.mode], + padding: "8px 8px 16px 8px", display: "flex", flexDirection: "row-reverse", justifyContent: "space-between", - border: `1px solid #eaeaea`, }; }; -export const messageIndicatorStyle = (_theme) => { +export const messageIndicatorStyle = ( + _theme, + newMessageIndicatorConfiguration +) => { return { - textFont: fontHelper(_theme.typography.subtitle2), - textColor: _theme.palette.background[_theme.palette.mode], - border: "0", - borderRadius: "8px", - background: _theme.palette.primary[_theme.palette.mode], + ...new NewMessageIndicatorStyle({ + textFont: + newMessageIndicatorConfiguration?.style?.textFont || + fontHelper(_theme.typography.subtitle2), + textColor: + newMessageIndicatorConfiguration?.style?.textColor || + _theme.palette.background[_theme.palette.mode], + iconTint: + newMessageIndicatorConfiguration?.style?.iconTint || + _theme.palette.background[_theme.palette.mode], + border: newMessageIndicatorConfiguration?.style?.border, + borderRadius: newMessageIndicatorConfiguration?.style?.borderRadius, + background: + newMessageIndicatorConfiguration?.style?.background || + _theme.palette.primary[_theme.palette.mode], + }), }; }; diff --git a/src/components/Messages/CometChatMessagePreview/MessagePreviewConfiguration.js b/src/components/Messages/CometChatMessagePreview/MessagePreviewConfiguration.js index 5d357e56..e4599576 100644 --- a/src/components/Messages/CometChatMessagePreview/MessagePreviewConfiguration.js +++ b/src/components/Messages/CometChatMessagePreview/MessagePreviewConfiguration.js @@ -2,7 +2,7 @@ import closeButton from "../CometChatMessageComposer/resources/close.svg"; import { localize } from "../../../"; -import { MessagePreviewStyles } from "../"; +import { MessagePreviewStyle } from "../"; /** * @class MessagePreviewConfiguration @@ -19,13 +19,13 @@ class MessagePreviewConfiguration { messagePreviewSubtitle = null, closeIconURL = closeButton, onCloseClick = null, - style = new MessagePreviewStyles({}), + style = new MessagePreviewStyle({}), }) { this.messagePreviewTitle = messagePreviewTitle; this.messagePreviewSubtitle = messagePreviewSubtitle; this.closeIconURL = closeIconURL; this.onCloseClick = onCloseClick; - this.style = new MessagePreviewStyles(style ?? {}); + this.style = new MessagePreviewStyle(style ?? {}); } } diff --git a/src/components/Messages/CometChatMessagePreview/MessagePreviewStyles.js b/src/components/Messages/CometChatMessagePreview/MessagePreviewStyle.js similarity index 63% rename from src/components/Messages/CometChatMessagePreview/MessagePreviewStyles.js rename to src/components/Messages/CometChatMessagePreview/MessagePreviewStyle.js index 9aa6567c..77a8fb74 100644 --- a/src/components/Messages/CometChatMessagePreview/MessagePreviewStyles.js +++ b/src/components/Messages/CometChatMessagePreview/MessagePreviewStyle.js @@ -1,16 +1,19 @@ import { BaseStyles } from "../../Shared"; /** - * @class MessagePreviewStyles - * @param {String} border - * @param {String} background - * @param {String} messagePreviewTitleFont - * @param {String} messagePreviewTitleColor - * @param {String} messagePreviewSubtitleColor - * @param {String} messagePreviewSubtitleFont - * @param {String} closeIconTint + * @class MessagePreviewStyle + * @param {string} width + * @param {string} height + * @param {string} border + * @param {string} borderRadius + * @param {string} background + * @param {string} messagePreviewTitleFont + * @param {string} messagePreviewTitleColor + * @param {string} messagePreviewSubtitleColor + * @param {string} messagePreviewSubtitleFont + * @param {string} closeIconTint */ -class MessagePreviewStyles extends BaseStyles { +class MessagePreviewStyle extends BaseStyles { constructor({ messagePreviewTitleFont = "", messagePreviewTitleColor = "", @@ -41,4 +44,4 @@ class MessagePreviewStyles extends BaseStyles { this.closeIconTint = closeIconTint; } } -export { MessagePreviewStyles }; +export { MessagePreviewStyle }; diff --git a/src/components/Messages/CometChatMessageReactions/MessageReactionsConfiguration.js b/src/components/Messages/CometChatMessageReactions/MessageReactionsConfiguration.js index b4984cf6..74dab5d0 100644 --- a/src/components/Messages/CometChatMessageReactions/MessageReactionsConfiguration.js +++ b/src/components/Messages/CometChatMessageReactions/MessageReactionsConfiguration.js @@ -1,13 +1,19 @@ import addReactionIcon from "./resources/reactions.svg"; +import { MessageReactionsStyle } from "../"; /** * @class MessageReactionConfiguration * @description MessageReactionConfiguration class is used for defining the MessageReactionConfiguration * @param {String} addReactionIconURL + * @param {Object} style */ class MessageReactionsConfiguration { - constructor({ addReactionIconURL = addReactionIcon }) { - this.addReactionIconURL = addReactionIconURL; - } + constructor({ + addReactionIconURL = addReactionIcon, + style = new MessageReactionsStyle({}), + }) { + this.addReactionIconURL = addReactionIconURL; + this.style = new MessageReactionsStyle(style || {}); + } } export { MessageReactionsConfiguration }; diff --git a/src/components/Messages/CometChatMessageReactions/MessageReactionsStyle.js b/src/components/Messages/CometChatMessageReactions/MessageReactionsStyle.js new file mode 100644 index 00000000..9b34225e --- /dev/null +++ b/src/components/Messages/CometChatMessageReactions/MessageReactionsStyle.js @@ -0,0 +1,44 @@ +import { BaseStyles } from "../../Shared"; +/** + * @class MessageReactionsStyle + * @param {string} width + * @param {string} height + * @param {string} border + * @param {string} borderRadius + * @param {string} background + * @param {string} textColor + * @param {string} textFont + * @param {string} addReactionIconTint + * @param {string} addReactionIconBackground + */ + +class MessageReactionsStyle extends BaseStyles { + constructor({ + textColor = "", + textFont = "", + addReactionIconTint = "", + addReactionIconBackground = "", + + width = "100%", + height = "auto", + border = "none", + borderRadius = "12px", + background = "", + activeBackground = "", + }) { + super({ + width, + height, + background, + activeBackground, + border, + borderRadius, + }); + + this.textFont = textFont; + this.textColor = textColor; + this.addReactionIconTint = addReactionIconTint; + this.addReactionIconBackground = addReactionIconBackground; + } +} +export { MessageReactionsStyle }; diff --git a/src/components/Messages/CometChatMessageReactions/hooks.js b/src/components/Messages/CometChatMessageReactions/hooks.js index 3d05bfa8..98a170ba 100644 --- a/src/components/Messages/CometChatMessageReactions/hooks.js +++ b/src/components/Messages/CometChatMessageReactions/hooks.js @@ -1,38 +1,37 @@ import React from "react"; -import { getExtensionsData, MetadataConstants } from "../.."; - -export const Hooks = (messageObject, reactionRef, reactionView, setReactionList) => { +import { getExtensionsData, MetadataConstants } from "../.."; +export const Hooks = ( + messageObject, + reactionRef, + reactionView, + setReactionList +) => { React.useEffect(() => { - reactionRef.current = getExtensionsData( - messageObject, - MetadataConstants.extensions.reactions + reactionRef.current = getExtensionsData( + messageObject, + MetadataConstants.extensions.reactions ); let isEmpty = false; - + if (reactionRef.current) { const messageReactions = Object.keys(reactionRef.current).map((data) => { let reactionData; - + if (Object.keys(reactionRef.current[data]).length) { isEmpty = true; - reactionData = reactionRef.current[data]; - return reactionView({ [data]: reactionData }, reactionData); + reactionData = reactionRef.current[data]; + return reactionView({ [data]: reactionData }, reactionData); } else { - isEmpty = false + isEmpty = false; } - - }); if (isEmpty) { setReactionList(messageReactions); - } - - - + } } - }, [messageObject]); - + }, [messageObject]); + React.useEffect(() => {}, []); }; diff --git a/src/components/Messages/CometChatMessageReactions/index.js b/src/components/Messages/CometChatMessageReactions/index.js index 95d3fa06..d35511e5 100644 --- a/src/components/Messages/CometChatMessageReactions/index.js +++ b/src/components/Messages/CometChatMessageReactions/index.js @@ -5,142 +5,146 @@ import { Hooks } from "./hooks"; import { localize, CometChatListItem, CometChatTheme } from "../.."; import { - messageReactionListStyle, - messageAddReactionStyle, - emojiButtonStyle, - messageReactionsStyle, - reactionCountStyle, - reactionListStyle, + messageReactionListStyle, + messageAddReactionStyle, + emojiButtonStyle, + messageReactionsStyle, + reactionCountStyle, + reactionListStyle, } from "./style"; const CometChatMessageReactions = (props) => { - const { - messageObject, - loggedInUser, - updateReaction, - addReactionIconURL, - style, - theme, - } = props; - const _theme = theme || new CometChatTheme({}); - const [reactionList, setReactionList] = React.useState([]); - const reactionRef = React.useRef([]); + const { + messageObject, + loggedInUser, + updateReaction, + addReactionIconURL, + style, + theme, + } = props; + const _theme = theme || new CometChatTheme({}); + const [reactionList, setReactionList] = React.useState([]); + const reactionRef = React.useRef([]); - const getAddReactionButton = () => { - return ( -
- -
- ); - }; + const getAddReactionButton = () => { + return ( +
+ +
+ ); + }; - const reactionView = (reactionObject, reactionData) => { - let reactionName = ""; - const userList = []; - let count; + const reactionView = (reactionObject, reactionData) => { + let reactionName = ""; + const userList = []; + let count; - for (const reaction in reactionObject) { - reactionName = reaction.replaceAll(":", ""); - const reactionData = reactionObject[reaction]; - count = Object.keys(reactionData).length; - for (const user in reactionData) { - userList.push(reactionData[user]["name"]); - } - } + for (const reaction in reactionObject) { + reactionName = reaction.replaceAll(":", ""); + const reactionData = reactionObject[reaction]; + count = Object.keys(reactionData).length; + for (const user in reactionData) { + userList.push(reactionData[user]["name"]); + } + } - let reactionTitle = ""; - if (userList.length) { - reactionTitle = userList.join(","); - reactionTitle = reactionTitle.concat(" ", localize("REACTED")); - } + let reactionTitle = ""; + if (userList.length) { + reactionTitle = userList.join(","); + reactionTitle = reactionTitle.concat(" ", localize("REACTED")); + } - let Emoji = Object.keys(reactionObject)[0]; - const reactionClassName = `reaction reaction__${reactionName}`; + let Emoji = Object.keys(reactionObject)[0]; + const reactionClassName = `reaction reaction__${reactionName}`; - let Count = ( - - {count} - - ); + let Count = ( + + {count} + + ); - return count >= 1 ? ( -
- -
- ) : null; - }; + return count >= 1 ? ( +
+ +
+ ) : null; + }; - Hooks(messageObject, reactionRef, reactionView, setReactionList); + Hooks(messageObject, reactionRef, reactionView, setReactionList); - return reactionList.length !== null ? ( -
- {getAddReactionButton()} - {reactionList} -
- ) : null; + return reactionList.length !== null ? ( +
+ {getAddReactionButton()} + {reactionList} +
+ ) : null; }; // Specifies the default values for props: CometChatMessageReactions.defaultProps = { - messageObject: null, - loggedInUser: null, - addReactionIconURL: "", - style: { - width: "", - height: "", - border: "1px solid rgba(20, 20, 20, 8%)", - borderRadius: "", - background: "#F0F0F0", - }, + messageObject: null, + loggedInUser: null, + addReactionIconURL: "", + style: { + width: "", + height: "", + border: "1px solid rgba(20, 20, 20, 8%)", + borderRadius: "", + background: "#F0F0F0", + textColor: "", + textFont: "", + addReactionIconTint: "", + addReactionIconBackground: "", + }, }; CometChatMessageReactions.propTypes = { - messageObject: PropTypes.object.isRequired, - loggedInUser: PropTypes.object.isRequired, - addReactionIconURL: PropTypes.string, - style: PropTypes.object, + messageObject: PropTypes.object.isRequired, + loggedInUser: PropTypes.object.isRequired, + addReactionIconURL: PropTypes.string, + style: PropTypes.object, }; export { CometChatMessageReactions }; diff --git a/src/components/Messages/CometChatMessageReactions/style.js b/src/components/Messages/CometChatMessageReactions/style.js index 153a1e47..be8c4649 100644 --- a/src/components/Messages/CometChatMessageReactions/style.js +++ b/src/components/Messages/CometChatMessageReactions/style.js @@ -1,171 +1,172 @@ import { fontHelper } from "../../Shared"; export const messageReactionListStyle = () => { - return { - margin: "5px", - padding: "0px 8px 8px 8px", - display: "flex", - flexDirection: "row", - alignItems: "center", - }; + return { + margin: "5px", + padding: "0px 8px 8px 8px", + display: "flex", + flexDirection: "row", + alignItems: "center", + }; }; export const reactionListStyle = () => { - return { - display: "flex", - alignItems: "center", - justifyContent: "center", - fontSize: "15px", - margin: "0", - padding: "0", - cursor: "pointer", - }; + return { + display: "flex", + alignItems: "center", + justifyContent: "center", + fontSize: "15px", + margin: "0", + padding: "0", + cursor: "pointer", + }; }; export const messageAddReactionStyle = ( - messageObject, - loggedInUser, - style, - theme + messageObject, + loggedInUser, + style, + theme ) => { - let background = theme?.palette?.accent100[theme?.palette?.mode]; - if (messageObject.sender.uid === loggedInUser.uid) { - background = "RGBA(255, 255, 255, 0.23)"; - } + let background = theme?.palette?.accent100[theme?.palette?.mode]; + if (messageObject.sender.uid === loggedInUser.uid) { + background = "RGBA(255, 255, 255, 0.23)"; + } - return { - padding: "1px 4px", - display: "inline-flex", - alignItems: "center", - justifyContent: "center", - borderRadius: style.borderRadius, - height: "22px", - width: "30px", - cursor: "pointer", - border: `1px solid ${theme?.palette?.accent100[theme.palette.mode]}`, - background: background, - }; + return { + padding: "1px 4px", + display: "inline-flex", + alignItems: "center", + justifyContent: "center", + borderRadius: style.borderRadius, + height: "22px", + width: "30px", + cursor: "pointer", + border: `1px solid ${theme?.palette?.accent100[theme.palette.mode]}`, + background: background, + }; }; export const emojiButtonStyle = ( - style, - loggedInUser, - messageObject, - reactionData, - theme + style, + loggedInUser, + messageObject, + reactionData, + theme ) => { - let background = theme?.palette?.accent700[theme?.palette?.mode]; - if (messageObject?.type === "text") { - if (messageObject?.sender?.uid === loggedInUser?.uid) { - if (reactionData?.hasOwnProperty(loggedInUser?.uid)) { - background = theme?.palette?.background[theme?.palette?.mode]; - } - } - } - return { - iconHeight: "16px", - iconWidth: "16px", - iconTint: style.iconTint || background, - padding: "0", - }; + let background = theme?.palette?.accent700[theme?.palette?.mode]; + if (messageObject?.type === "text") { + if (messageObject?.sender?.uid === loggedInUser?.uid) { + if (reactionData?.hasOwnProperty(loggedInUser?.uid)) { + background = theme?.palette?.background[theme?.palette?.mode]; + } + } + } + + return { + iconHeight: "16px", + iconWidth: "16px", + iconTint: style.addReactionIconTint || background, + padding: "0", + }; }; // list item style export const messageReactionsStyle = ( - messageObject, - loggedInUser, - style, - reactionData, - theme + messageObject, + loggedInUser, + style, + reactionData, + theme ) => { - let background = { background: "transparent" }, - border = { - border: `1px solid ${theme?.palette?.background[theme?.palette?.mode]}`, - }; - if (messageObject?.type === "text") { - if (messageObject?.sender?.uid === loggedInUser?.uid) { - if (reactionData?.hasOwnProperty(loggedInUser?.uid)) { - background = { - background: theme?.palette?.background[theme?.palette?.mode], - }; - } - } else { - if (reactionData?.hasOwnProperty(loggedInUser?.uid)) { - background = { - background: theme?.palette?.primary[theme?.palette?.mode], - }; - border = { - border: `1 px ${theme?.palette?.primary[theme?.palette?.mode]}`, - }; - } else { - background = { background: "transparent" }; - border = { - border: `1px solid ${ - theme?.palette?.accent100[theme?.palette?.mode] - }`, - }; - } - } - } else { - if (reactionData?.hasOwnProperty(loggedInUser?.uid)) { - background = { - background: theme?.palette?.primary[theme?.palette?.mode], - }; - border = { - border: `1 px ${theme?.palette?.primary[theme?.palette?.mode]}`, - }; - } else { - background = { - background: theme?.palette?.accent100[theme?.palette?.mode], - }; - border = { - border: `1px solid ${theme?.palette?.accent100[theme?.palette?.mode]}`, - }; - } - } + let background = { background: "transparent" }, + border = { + border: `1px solid ${theme?.palette?.background[theme?.palette?.mode]}`, + }; + if (messageObject?.type === "text") { + if (messageObject?.sender?.uid === loggedInUser?.uid) { + if (reactionData?.hasOwnProperty(loggedInUser?.uid)) { + background = { + background: theme?.palette?.background[theme?.palette?.mode], + }; + } + } else { + if (reactionData?.hasOwnProperty(loggedInUser?.uid)) { + background = { + background: theme?.palette?.primary[theme?.palette?.mode], + }; + border = { + border: `1 px ${theme?.palette?.primary[theme?.palette?.mode]}`, + }; + } else { + background = { background: "transparent" }; + border = { + border: `1px solid ${ + theme?.palette?.accent100[theme?.palette?.mode] + }`, + }; + } + } + } else { + if (reactionData?.hasOwnProperty(loggedInUser?.uid)) { + background = { + background: theme?.palette?.primary[theme?.palette?.mode], + }; + border = { + border: `1 px ${theme?.palette?.primary[theme?.palette?.mode]}`, + }; + } else { + background = { + background: theme?.palette?.accent100[theme?.palette?.mode], + }; + border = { + border: `1px solid ${theme?.palette?.accent100[theme?.palette?.mode]}`, + }; + } + } - return { - ...background, - display: "flex", - alignItems: "center", - justifyContent: "center", - font: style.textFont, - padding: "2px 4px", - margin: "0 0 0 6px", - borderRadius: "11px", - cursor: "pointer", - ...border, - }; + return { + ...background, + display: "flex", + alignItems: "center", + justifyContent: "center", + font: style.textFont, + padding: "2px 4px", + margin: "0 0 0 6px", + borderRadius: "11px", + cursor: "pointer", + ...border, + }; }; export const reactionCountStyle = ( - loggedInUser, - messageObject, - reactionData, - theme + loggedInUser, + messageObject, + reactionData, + theme ) => { - let color = theme?.palette?.background[theme?.palette?.mode]; - if (messageObject.type === "text") { - if (messageObject.sender.uid === loggedInUser.uid) { - if (reactionData?.hasOwnProperty(loggedInUser?.uid)) { - color = theme?.palette?.primary[theme?.palette?.mode]; - } - } else { - if (reactionData?.hasOwnProperty(loggedInUser?.uid)) { - color = theme?.palette?.background[theme?.palette?.mode]; - } else { - color = theme?.palette?.accent700[theme?.palette?.mode]; - } - } - } else { - if (reactionData?.hasOwnProperty(loggedInUser?.uid)) { - color = theme?.palette?.background[theme?.palette?.mode]; - } else { - color = theme?.palette?.accent700[theme?.palette?.mode]; - } - } - return { - color: color, - font: fontHelper(theme?.palette?.caption1), - padding: "0px 2px 0px 4px", - }; + let color = theme?.palette?.background[theme?.palette?.mode]; + if (messageObject.type === "text") { + if (messageObject.sender.uid === loggedInUser.uid) { + if (reactionData?.hasOwnProperty(loggedInUser?.uid)) { + color = theme?.palette?.primary[theme?.palette?.mode]; + } + } else { + if (reactionData?.hasOwnProperty(loggedInUser?.uid)) { + color = theme?.palette?.background[theme?.palette?.mode]; + } else { + color = theme?.palette?.accent700[theme?.palette?.mode]; + } + } + } else { + if (reactionData?.hasOwnProperty(loggedInUser?.uid)) { + color = theme?.palette?.background[theme?.palette?.mode]; + } else { + color = theme?.palette?.accent700[theme?.palette?.mode]; + } + } + return { + color: color, + font: fontHelper(theme?.palette?.caption1), + padding: "0px 2px 0px 4px", + }; }; diff --git a/src/components/Messages/CometChatMessages/MessagesConfiguration.js b/src/components/Messages/CometChatMessages/MessagesConfiguration.js index beb2e5eb..07034411 100644 --- a/src/components/Messages/CometChatMessages/MessagesConfiguration.js +++ b/src/components/Messages/CometChatMessages/MessagesConfiguration.js @@ -1,10 +1,9 @@ import heart from "./resources/heart.png"; import { MessageComposerConfiguration } from "../CometChatMessageComposer/MessageComposerConfiguration"; -import { MessageHeaderConfiguration } from "../CometChatMessageHeader/MessageHeaderconfiguration"; -import { LiveReactionConfiguration } from "../CometChatLiveReactions/LiveReactionConfiguration"; +import { MessageHeaderConfiguration } from "../CometChatMessageHeader/MessageHeaderConfiguration"; import { MessageListConfiguration } from "../CometChatMessageList/MessageListConfiguration"; -import { MessagesStyles } from "./MessagesStyles"; +import { MessagesStyle } from "./MessagesStyle"; /** * @class MessagesConfiguration @@ -33,7 +32,7 @@ class MessagesConfiguration { customOutgoingMessageSound = true, enableTypingIndicator = true, liveReactionIconURL = heart, - style = new MessagesStyles({}), + style = new MessagesStyle({}), messageHeaderConfiguration = new MessageHeaderConfiguration({}), messageListConfiguration = new MessageListConfiguration({}), messageComposerConfiguration = new MessageComposerConfiguration({}), @@ -46,7 +45,7 @@ class MessagesConfiguration { this.customOutgoingMessageSound = customOutgoingMessageSound; this.enableSoundForMessages = enableSoundForMessages; this.enableSoundForCalls = enableSoundForCalls; - this.style = new MessagesStyles(style || {}); + this.style = new MessagesStyle(style || {}); this.messageHeaderConfiguration = messageHeaderConfiguration; this.messageListConfiguration = messageListConfiguration; this.messageComposerConfiguration = messageComposerConfiguration; diff --git a/src/components/Messages/CometChatMessages/MessagesStyle.js b/src/components/Messages/CometChatMessages/MessagesStyle.js new file mode 100644 index 00000000..6fb931b5 --- /dev/null +++ b/src/components/Messages/CometChatMessages/MessagesStyle.js @@ -0,0 +1,31 @@ +import { BaseStyles } from "../../Shared"; +/** + * @class MessagesStyle + * @param {string} width + * @param {string} height + * @param {string} border + * @param {string} borderRadius + * @param {string} background + * @param {string} activeBackground + */ + +class MessagesStyle extends BaseStyles { + constructor({ + width = "100%", + height = "100%", + border = "none", + borderRadius = "8px", + background = "", + activeBackground = "", + }) { + super({ + width, + height, + background, + activeBackground, + border, + borderRadius, + }); + } +} +export { MessagesStyle }; diff --git a/src/components/Messages/CometChatMessages/MessagesStyles.js b/src/components/Messages/CometChatMessages/MessagesStyles.js deleted file mode 100644 index a1295de4..00000000 --- a/src/components/Messages/CometChatMessages/MessagesStyles.js +++ /dev/null @@ -1,12 +0,0 @@ -import { BaseStyles } from "../../Shared"; -/** - * @class MessagesStyles - - */ - -class MessagesStyles extends BaseStyles { - constructor({}) { - super({}); - } -} -export { MessagesStyles }; diff --git a/src/components/Messages/CometChatMessages/hooks.js b/src/components/Messages/CometChatMessages/hooks.js new file mode 100644 index 00000000..47b6dc35 --- /dev/null +++ b/src/components/Messages/CometChatMessages/hooks.js @@ -0,0 +1,19 @@ +import React from "react"; +import { CometChat } from "@cometchat-pro/chat"; + +export const Hooks = ( + props, + loggedInUser, + errorHandler, + messagesCallback, + messagesManager +) => { + React.useEffect(() => { + CometChat.getLoggedinUser() + .then((user) => { + loggedInUser.current = user; + messagesManager.current?.attachListeners(messagesCallback); + }) + .catch((error) => errorHandler(error)); + }, [messagesCallback]); +}; diff --git a/src/components/Messages/CometChatMessages/index.js b/src/components/Messages/CometChatMessages/index.js index 2bcb9998..9156f6ac 100644 --- a/src/components/Messages/CometChatMessages/index.js +++ b/src/components/Messages/CometChatMessages/index.js @@ -9,10 +9,12 @@ import { CometChatMessageComposer, CometChatLiveReactions, messageConstants, - MessagesStyles, CometChatMessageTemplate, + LiveReactionsStyle, } from ".."; +import { MessagesManager } from "./controller"; + import { MessageHeaderConfiguration, CometChatTheme, @@ -26,8 +28,6 @@ import { MessageListConfiguration } from "../CometChatMessageList/MessageListCon import { messageStatus } from "../CometChatMessageConstants"; -import { DetailsConfiguration } from "../../Shared"; - import { chatWrapperStyle, liveReactionWrapperStyle, @@ -40,13 +40,15 @@ import { import { MessageInputData } from "../.."; import heart from "./resources/heart.png"; +import { Hooks } from "./hooks"; const CometChatMessages = (props) => { let messageListRef = React.useRef(null); let messageComposerRef = React.useRef(null); - + const messagesManager = React.useRef(new MessagesManager()); const [viewLiveReaction, setViewLiveReaction] = React.useState(false); const [liveReactionTemplate, setLiveReactionTemplate] = React.useState(null); + const loggedInUser = React.useRef(null); const { user, @@ -69,6 +71,7 @@ const CometChatMessages = (props) => { const _messageListConfiguration = messageListConfiguration || new MessageListConfiguration({}); + const _theme = new CometChatTheme(theme ?? {}); let liveReactionTimeout = 0; @@ -110,14 +113,16 @@ const CometChatMessages = (props) => { const getReceivedMessageInputData = () => { if (user) { let timestamp = - _messageListConfiguration.receivedMessageInputData.timestamp || true, + _messageListConfiguration?.receivedMessageInputData?.timestamp || + true, readReceipt = - _messageListConfiguration.receivedMessageInputData.readReceipt || + _messageListConfiguration?.receivedMessageInputData?.readReceipt || true, thumbnail = - _messageListConfiguration.receivedMessageInputData.thumbnail || false, + _messageListConfiguration?.receivedMessageInputData?.thumbnail || + false, title = - _messageListConfiguration.receivedMessageInputData.title || false; + _messageListConfiguration?.receivedMessageInputData?.title || false; return new MessageInputData({ timestamp: timestamp, @@ -127,14 +132,16 @@ const CometChatMessages = (props) => { }); } else if (group) { let timestamp = - _messageListConfiguration.receivedMessageInputData.timestamp || true, + _messageListConfiguration?.receivedMessageInputData?.timestamp || + true, readReceipt = - _messageListConfiguration.receivedMessageInputData.readReceipt || + _messageListConfiguration?.receivedMessageInputData?.readReceipt || false, thumbnail = - _messageListConfiguration.receivedMessageInputData.thumbnail || true, + _messageListConfiguration?.receivedMessageInputData?.thumbnail || + true, title = - _messageListConfiguration.receivedMessageInputData.title || true; + _messageListConfiguration?.receivedMessageInputData?.title || true; return new MessageInputData({ timestamp: timestamp, @@ -160,6 +167,16 @@ const CometChatMessages = (props) => { } }; + /*** + * error handler + */ + const errorHandler = (errorCode) => { + CometChatMessageEvents.emit( + CometChatMessageEvents.onMessageError, + errorCode + ); + }; + /** * Draft a message before sending */ @@ -193,14 +210,8 @@ const CometChatMessages = (props) => { const onTransientMessageReceived = (message) => { if (message.data.type === MetadataConstants.liveReaction) { const payload = { - reaction: heart, - style: { - width: "20px", - height: "20px", - border: "none", - borderRadius: "none", - background: "red", - }, + reaction: message?.data?.reaction, + style: new LiveReactionsStyle(liveReactionStyle() || {}), }; shareLiveReaction(payload); } @@ -263,13 +274,15 @@ const CometChatMessages = (props) => { const _emojiIconURL = messageComposerConfig.emojiIconURL; const _showSendButton = messageComposerConfig.showSendButton; const _onSendButtonClick = messageComposerConfig.onSendButtonClick; - const _messageTypes = messageComposerConfig.messageTypes; + const _messageTypes = messageTypes || messageComposerConfig.messageTypes; const _customOutgoingMessageSound = + customOutgoingMessageSound || messageComposerConfig.customOutgoingMessageSound; const _enableSoundForMessages = enableSoundForMessages || messageComposerConfig.enableSoundForMessages; const _excludeMessageTypes = messageComposerConfig.excludeMessageTypes; - const _enableTypingIndicator = messageComposerConfig.enableTypingIndicator; + const _enableTypingIndicator = + enableTypingIndicator || messageComposerConfig.enableTypingIndicator; /**configurations of composer child components */ const _messagePreviewConfiguration = messageComposerConfig.messagePreviewConfiguration; @@ -289,26 +302,29 @@ const CometChatMessages = (props) => { const _showBackButton = messageHeaderConfig.showBackButton; const _backButtonIconURL = messageHeaderConfig.backButtonIconURL; - const _enableIndicator = messageHeaderConfig.enableTypingIndicator; + const _enableIndicator = + enableTypingIndicator || messageHeaderConfig.enableTypingIndicator; const _isMobileView = messageHeaderConfig.isMobile; const _dataItemConfiguration = messageHeaderConfig.dataItemConfiguration; let liveReactionView = viewLiveReaction ? (
) : null; + Hooks(props, loggedInUser, errorHandler, messagesCallback, messagesManager); + return (
{ user={user} group={group} alignment={_messageListConfiguration.alignment} - messageTypes={_messageListConfiguration.messageTypes} + messageTypes={messageTypes || _messageListConfiguration.messageTypes} excludeMessageTypes={_messageListConfiguration.excludeMessageTypes} excludeMessageOptions={_messageListConfiguration.excludeMessageOptions} customMessageOptions={_messageListConfiguration.customMessageOptions} @@ -336,14 +352,16 @@ const CometChatMessages = (props) => { errorText={localize("SOMETHING_WRONG")} hideError={_messageListConfiguration.hideError} customIncomingMessageSound={ + customIncomingMessageSound || _messageListConfiguration.customIncomingMessageSound } enableSoundForMessages={ + enableSoundForMessages || _messageListConfiguration.enableSoundForMessages } sentMessageInputData={getSentMessageInputData()} receivedMessageInputData={getReceivedMessageInputData()} - style={messageListStyle(props, _theme)} + style={messageListStyle(_theme, _messageListConfiguration)} messageBubbleConfiguration={ _messageListConfiguration.messageBubbleConfiguration } @@ -360,34 +378,36 @@ const CometChatMessages = (props) => { theme={_theme} /> {liveReactionView} - + {!hideMessageComposer ? ( + + ) : null}
); }; @@ -423,7 +443,7 @@ CometChatMessages.defaultProps = { enableTypingIndicator: null, style: { width: "100%", - height: "auto", + height: "100%", border: "none", borderRadius: "none", background: "rgb(255,255,255)", diff --git a/src/components/Messages/CometChatMessages/style.js b/src/components/Messages/CometChatMessages/style.js index 5a4ddc71..f351996e 100644 --- a/src/components/Messages/CometChatMessages/style.js +++ b/src/components/Messages/CometChatMessages/style.js @@ -1,15 +1,21 @@ import { BaseStyles, fontHelper } from "../../Shared"; +import { + MessageHeaderStyle, + MessageListStyle, + MessageComposerStyle, +} from "../"; export const chatWrapperStyle = (style) => { return { display: "flex", flexDirection: "column", - height: style.height, width: style.width, + height: style.height, margin: "none", boxSizing: "border-box", position: "relative", overflowX: "hidden", + border: style.border, }; }; @@ -34,57 +40,113 @@ export const liveReactionWrapperStyle = () => { }; }; -export const messageComposerStyle = (props, theme) => { +export const messageComposerStyle = (theme, messageComposerConfig) => { return { - ...new BaseStyles({ - width: "100%", - height: "auto", - background: theme.palette.getBackground(), - border: "none", - borderRadius: "12px", - activeBackground: "none", + ...new MessageComposerStyle({ + width: messageComposerConfig.style.width, + height: messageComposerConfig.style.height, + background: + messageComposerConfig.style.background || theme.palette.getBackground(), + border: messageComposerConfig.style.border, + borderRadius: messageComposerConfig.style.borderRadius, + activeBackground: messageComposerConfig.style.activeBackground, + inputBorderRadius: messageComposerConfig.style.inputBorderRadius, + inputBackground: + messageComposerConfig.style.inputBackground || + theme.palette.getAccent50(), + inputTextFont: + messageComposerConfig.style.inputTextFont || + fontHelper(theme.typography.subtitle1), + inputTextColor: + messageComposerConfig.style.inputTextColor || + theme?.palette?.getAccent(), + placeholderTextFont: + messageComposerConfig.style.placeholderTextFont || + fontHelper(theme.typography.subtitle1), + placeholderTextColor: + messageComposerConfig.style.placeholderTextColor || + theme.palette.getAccent600(), + emojiIconTint: + messageComposerConfig.style.emojiIconTint || + theme.palette.getAccent500(), + attachmentIconTint: + messageComposerConfig.style.attachmentIconTint || + theme.palette.getAccent500(), + sendButtonIconTint: + messageComposerConfig.style.sendButtonIconTint || + theme.palette.getAccent50(), + stickerIconTint: + messageComposerConfig.style.stickerIconTint || + theme.palette.getAccent500(), + stickerCloseIconTint: + messageComposerConfig.style.stickerCloseIconTint || + theme?.palette?.getPrimary(), }), inputBorderRadius: "8px", - inputBackground: theme.palette.getAccent50(), - inputTextFont: fontHelper(theme.typography.subtitle1), + inputBackground: theme?.palette?.getAccent50(), + inputTextFont: fontHelper(theme?.typography?.subtitle1), inputTextColor: theme?.palette?.getAccent(), - placeholderTextFont: fontHelper(theme.typography.subtitle1), - placeholderTextColor: theme.palette.getAccent600(), - emojiIconTint: theme.palette.getAccent500(), - attachmentIconTint: theme.palette.getAccent500(), - microphoneIconTint: theme.palette.getAccent500(), - sendButtonIconTint: theme.palette.getAccent50(), - stickerIconTint: theme.palette.getAccent500(), + placeholderTextFont: fontHelper(theme?.typography?.subtitle1), + placeholderTextColor: theme?.palette?.getAccent600(), + emojiIconTint: theme?.palette?.getAccent500(), + attachmentIconTint: theme?.palette?.getAccent500(), + microphoneIconTint: theme?.palette?.getAccent500(), + sendButtonIconTint: theme?.palette?.getAccent300(), + stickerIconTint: theme?.palette?.getAccent500(), stickerCloseIconTint: theme?.palette?.getPrimary(), }; }; -export const messageHeaderStyle = (theme) => { +export const messageHeaderStyle = (theme, messageHeaderConfig) => { return { - ...new BaseStyles({ - width: "100%", - height: "auto", - background: theme.palette.getBackground(), - border: "none", - borderRadius: "none", - activeBackground: "none", + ...new MessageHeaderStyle({ + width: messageHeaderConfig.style.width, + height: messageHeaderConfig.style.height, + background: + messageHeaderConfig.style.background || theme.palette.getBackground(), + border: messageHeaderConfig.style.border, + borderRadius: messageHeaderConfig.style.borderRadius, + activeBackground: messageHeaderConfig.style.activeBackground, + backButtonIconTint: + messageHeaderConfig.style.backButtonIconTint || + theme.palette.getPrimary(), }), - backButtonIconTint: theme.palette.getPrimary(), }; }; -export const messageListStyle = (props, theme) => { +export const messageListStyle = (theme, messageListConfiguration) => { return { - ...new BaseStyles({ - width: "100%", - height: "100%", - background: theme.palette.getBackground(), - border: "none", - borderRadius: "8px", - activeBackground: "none", + ...new MessageListStyle({ + width: messageListConfiguration?.style?.width, + height: messageListConfiguration?.style?.height, + background: + messageListConfiguration?.style?.background || + theme.palette.getBackground(), + border: messageListConfiguration?.style?.border, + borderRadius: messageListConfiguration?.style?.borderRadius, + activeBackground: messageListConfiguration?.style?.activeBackground, + loadingIconTint: + messageListConfiguration?.style?.loadingIconTint || + theme.palette.getAccent600(), + emptyTextFont: + messageListConfiguration?.style?.emptyTextFont || + fontHelper(theme.typography.subtitle2), + emptyTextColor: + messageListConfiguration?.style?.emptyTextColor || + theme.palette.getAccent(), + errorTextFont: + messageListConfiguration?.style?.errorTextFont || + fontHelper(theme.typography.subtitle2), + errorTextColor: + messageListConfiguration?.style?.errorTextFont || + theme?.palette?.getAccent(), + textFont: + messageListConfiguration?.style?.textFont || + fontHelper(theme.typography.subtitle2), + textColor: + messageListConfiguration?.style?.textColor || + theme?.palette?.getAccent(), }), - textFont: fontHelper(theme.typography.subtitle2), - textColor: theme?.palette?.getAccent(), }; }; diff --git a/src/components/Messages/CometChatNewMessageIndicator/NewMessageIndicatorConfiguration.js b/src/components/Messages/CometChatNewMessageIndicator/NewMessageIndicatorConfiguration.js index a93b624e..c0fe3818 100644 --- a/src/components/Messages/CometChatNewMessageIndicator/NewMessageIndicatorConfiguration.js +++ b/src/components/Messages/CometChatNewMessageIndicator/NewMessageIndicatorConfiguration.js @@ -1,21 +1,22 @@ +import { NewMessageIndicatorStyle } from "../"; /** - * @class newMessageIndicatorConfiguration + * @class newMessageIndicatorConfiguration * @description newMessageIndicator class is used for defining the newMessageIndicator templates. - * @param {String} Icon + * @param {String} IconURL * @param {function} onClick + * @param {object} style */ class NewMessageIndicatorConfiguration { - constructor({ - Icon = "", - onClick = ()=>{}, - - }) { - - this.Icon = Icon; - this.onClick = onClick; - - } + constructor({ + IconURL = "", + onClick = () => {}, + style = new NewMessageIndicatorStyle({}), + }) { + this.IconURL = IconURL; + this.onClick = onClick; + this.style = new NewMessageIndicatorStyle(style || {}); + } } -export { NewMessageIndicatorConfiguration }; \ No newline at end of file +export { NewMessageIndicatorConfiguration }; diff --git a/src/components/Messages/CometChatNewMessageIndicator/NewMessageIndicatorStyle.js b/src/components/Messages/CometChatNewMessageIndicator/NewMessageIndicatorStyle.js new file mode 100644 index 00000000..d5c55370 --- /dev/null +++ b/src/components/Messages/CometChatNewMessageIndicator/NewMessageIndicatorStyle.js @@ -0,0 +1,39 @@ +import { BaseStyles } from "../../Shared"; +/** + * @class NewMessageIndicatorStyle + * @param {string} width + * @param {string} height + * @param {string} border + * @param {string} borderRadius + * @param {string} background + * @param {string} textFont + * @param {string} textColor + * @param {string} iconTint + */ + +class NewMessageIndicatorStyle extends BaseStyles { + constructor({ + iconTint = "", + textColor = "", + textFont = "", + + width = "auto", + height = "auto", + border = "none", + borderRadius = "6px", + background = "", + }) { + super({ + width, + height, + background, + border, + borderRadius, + }); + + this.textFont = textFont; + this.textColor = textColor; + this.iconTint = iconTint; + } +} +export { NewMessageIndicatorStyle }; diff --git a/src/components/Messages/CometChatNewMessageIndicator/index.js b/src/components/Messages/CometChatNewMessageIndicator/index.js index f94c5435..deac2d43 100644 --- a/src/components/Messages/CometChatNewMessageIndicator/index.js +++ b/src/components/Messages/CometChatNewMessageIndicator/index.js @@ -12,10 +12,8 @@ import { import { Hooks } from "./hooks"; const CometChatNewMessageIndicator = (props) => { - - const { text, onClick, style, theme } = props; - const _theme = theme || new CometChatTheme({}) + const _theme = theme || new CometChatTheme({}); const [messageText, setMessageText] = React.useState(); Hooks(text, setMessageText); @@ -52,6 +50,7 @@ const CometChatNewMessageIndicator = (props) => { CometChatNewMessageIndicator.defaultProps = { text: "new messages", + iconURL: "", style: { textFont: "", textColor: "#ffffff", diff --git a/src/components/Messages/CometChatSmartReplies/SmartRepliesConfiguration.js b/src/components/Messages/CometChatSmartReplies/SmartRepliesConfiguration.js index a6647f18..3c813923 100644 --- a/src/components/Messages/CometChatSmartReplies/SmartRepliesConfiguration.js +++ b/src/components/Messages/CometChatSmartReplies/SmartRepliesConfiguration.js @@ -1,4 +1,5 @@ import closeIcon from "../../Messages/CometChatSmartReplies/resources/close.svg"; +import { SmartReplyStyle } from "../"; /** * @class SmartRepliesConfiguration * @description SmartRepliesConfiguration class is used for defining the smart Replies Template @@ -7,21 +8,24 @@ import closeIcon from "../../Messages/CometChatSmartReplies/resources/close.svg" * @param {Function} onClick * @param {Function} onClose * @param {String} closeIconURL + * @param {object} style */ class SmartRepliesConfiguration { - constructor({ - customOutgoingMessageSound = null, - enableSoundForMessages = true, - onClick = null, - onClose = null, - closeIconURL = closeIcon, - }) { - this.customOutgoingMessageSound = customOutgoingMessageSound; - this.enableSoundForMessages = enableSoundForMessages; - this.onClick = onClick; - this.onClose = onClose; - this.closeIconURL = closeIconURL; - } + constructor({ + customOutgoingMessageSound = null, + enableSoundForMessages = true, + onClick = null, + onClose = null, + closeIconURL = closeIcon, + style = new SmartReplyStyle({}), + }) { + this.customOutgoingMessageSound = customOutgoingMessageSound; + this.enableSoundForMessages = enableSoundForMessages; + this.onClick = onClick; + this.onClose = onClose; + this.closeIconURL = closeIconURL; + this.style = new SmartReplyStyle(style || {}); + } } export { SmartRepliesConfiguration }; diff --git a/src/components/Messages/CometChatSmartReplies/SmartReplyStyle.js b/src/components/Messages/CometChatSmartReplies/SmartReplyStyle.js new file mode 100644 index 00000000..d73f1a65 --- /dev/null +++ b/src/components/Messages/CometChatSmartReplies/SmartReplyStyle.js @@ -0,0 +1,47 @@ +import { BaseStyles } from "../../Shared"; +/** + * @class SmartReplyStyle + * @param {string} width + * @param {string} height + * @param {string} border + * @param {string} borderRadius + * @param {string} background + * @param {string} textBackground + * @param {string} textColor + * @param {string} textFont + * @param {string} closeIconTint + * @param {string} closeIconBackground + */ + +class SmartReplyStyle extends BaseStyles { + constructor({ + textFont = "", + textColor = "", + textBackground = "", + closeIconTint = "", + closeIconBackground = "", + boxShadow = "", + + width = "auto", + height = "auto", + border = "none", + borderRadius = "none", + background = "", + }) { + super({ + width, + height, + background, + border, + borderRadius, + }); + + this.textBackground = textBackground; + this.textColor = textColor; + this.textFont = textFont; + this.closeIconTint = closeIconTint; + this.closeIconBackground = closeIconBackground; + this.boxShadow = boxShadow; + } +} +export { SmartReplyStyle }; diff --git a/src/components/Messages/CometChatSmartReplies/style.js b/src/components/Messages/CometChatSmartReplies/style.js index c7b3fa5e..17e602d6 100644 --- a/src/components/Messages/CometChatSmartReplies/style.js +++ b/src/components/Messages/CometChatSmartReplies/style.js @@ -1,67 +1,64 @@ import { fontHelper } from "../../Shared"; export const previewWrapperStyle = (style, theme) => { - - return { - padding: "8px 8px 16px 8px", - width: "100%", - marginBottom: "-8px", - background: style.background || theme?.palette?.background[theme?.palette?.mode], - fontSize: "13px", - display: "flex", - flexDirection: "row-reverse", - justifyContent: "flex-end", - alignItems: "center", - position: "absolute", - bottom: "0px", - zIndex :"2" - - }; + return { + padding: "8px 8px 16px 8px", + width: "100%", + marginBottom: "-8px", + background: + style.background || theme?.palette?.background[theme?.palette?.mode], + fontSize: "13px", + display: "flex", + flexDirection: "row-reverse", + justifyContent: "flex-end", + alignItems: "center", + position: "absolute", + bottom: "0px", + zIndex: "2", + }; }; export const previewHeadingStyle = () => { + return { + alignSelf: "flex-start", + display: "flex", + alignItems: "baseline", + justifyContent: "space-between", + }; +}; - return { - alignSelf: "flex-start", - display: "flex", - alignItems: "baseline", - justifyContent: "space-between" - } -} - -export const previewCloseStyle = (style,img, theme) => { - - return { - width: "24px", - height: "24px", - borderRadius: "50%", - padding:"25px", - WebkitMask: `url(${img}) center center no-repeat`, - background: style.iconTint || theme?.palette?.accent600[theme?.palette?.mode], - cursor: "pointer", - } -} +export const previewCloseStyle = (style, img, theme) => { + return { + width: "24px", + height: "24px", + borderRadius: "50%", + padding: "25px", + WebkitMask: `url(${img}) center center no-repeat`, + background: + style.closeIconTint || theme?.palette?.accent600[theme?.palette?.mode], + cursor: "pointer", + }; +}; export const previewOptionsWrapperStyle = () => { - - return { - display: "flex", - alignItems: "center", - width: "fit-content", - } -} + return { + display: "flex", + alignItems: "center", + width: "fit-content", + }; +}; export const previewOptionStyle = (style, theme) => { - - return { - padding: "5px", - margin: "0 4px", - boxShadow: "0px 0px 0px 1px #f2eeee", - background:style.textBackground || theme?.palette?.background[theme?.palette?.mode], - border: `1px solid #eaeaea`, - textFont: style.textFont || fontHelper(theme?.typography?.subtitle2) , - textColor: style.textColor || theme?.palette?.accent[theme?.palette?.mode], - borderRadius: "18px", - cursor: "pointer", - textAlign: "center", - }; -}; \ No newline at end of file + return { + padding: "5px", + margin: "0 4px", + boxShadow: style.boxShadow || "0px 0px 0px 1px #f2eeee", + background: + style.textBackground || theme?.palette?.background[theme?.palette?.mode], + border: `1px solid #eaeaea`, + textFont: style.textFont || fontHelper(theme?.typography?.subtitle2), + textColor: style.textColor || theme?.palette?.accent[theme?.palette?.mode], + borderRadius: "18px", + cursor: "pointer", + textAlign: "center", + }; +}; diff --git a/src/components/Messages/CometChatStickerKeyboard/StickerKeyboardConfiguration.js b/src/components/Messages/CometChatStickerKeyboard/StickerKeyboardConfiguration.js index de63801e..b4f771d4 100644 --- a/src/components/Messages/CometChatStickerKeyboard/StickerKeyboardConfiguration.js +++ b/src/components/Messages/CometChatStickerKeyboard/StickerKeyboardConfiguration.js @@ -1,5 +1,5 @@ import { localize } from "../../../"; -import { StickerKeyboardStyles } from "./StickerKeyboardStyles"; +import { StickerKeyboardStyle } from "./StickerKeyboardStyle"; /** * @class StickerKeyboardConfiguration @@ -9,9 +9,9 @@ import { StickerKeyboardStyles } from "./StickerKeyboardStyles"; */ class StickerKeyboardConfiguration { - constructor({ onClick = null, style = new StickerKeyboardStyles({}) }) { + constructor({ onClick = null, style = new StickerKeyboardStyle({}) }) { this.onClick = onClick; - this.style = new StickerKeyboardStyles(style ?? {}); + this.style = new StickerKeyboardStyle(style ?? {}); } } diff --git a/src/components/Messages/CometChatStickerKeyboard/StickerKeyboardStyles.js b/src/components/Messages/CometChatStickerKeyboard/StickerKeyboardStyle.js similarity index 62% rename from src/components/Messages/CometChatStickerKeyboard/StickerKeyboardStyles.js rename to src/components/Messages/CometChatStickerKeyboard/StickerKeyboardStyle.js index 82d67f1b..eab91546 100644 --- a/src/components/Messages/CometChatStickerKeyboard/StickerKeyboardStyles.js +++ b/src/components/Messages/CometChatStickerKeyboard/StickerKeyboardStyle.js @@ -1,16 +1,21 @@ import { BaseStyles } from "../../Shared"; /** - * @class StickerKeyboardStyles - * @param {String} categoryBackground - * @param {String} emptyTextFont - * @param {String} emptyTextColor - * @param {String} errorTextFont - * @param {String} errorTextColor - * @param {String} loadingTextColor - * @param {String} loadingTextFont + * @class StickerKeyboardStyle + * @param {string} width + * @param {string} height + * @param {string} border + * @param {string} borderRadius + * @param {string} background + * @param {string} categoryBackground + * @param {string} emptyTextFont + * @param {string} emptyTextColor + * @param {string} errorTextFont + * @param {string} errorTextColor + * @param {string} loadingTextColor + * @param {string} loadingTextFont */ -class StickerKeyboardStyles extends BaseStyles { +class StickerKeyboardStyle extends BaseStyles { constructor({ categoryBackground = "", emptyTextFont = "", @@ -45,4 +50,4 @@ class StickerKeyboardStyles extends BaseStyles { this.loadingTextFont = loadingTextFont; } } -export { StickerKeyboardStyles }; +export { StickerKeyboardStyle }; diff --git a/src/components/Messages/index.js b/src/components/Messages/index.js index d18fe9fb..60164fe0 100644 --- a/src/components/Messages/index.js +++ b/src/components/Messages/index.js @@ -39,15 +39,20 @@ import { CometChatCreatePollOptions } from "./CometChatCreatePollOptions"; import { MessageInputData } from "../Shared/InputData/MessageInputData"; /**styles */ -import { MessageListStyles } from "./CometChatMessageList/MessageListStyles"; -import { EmojiKeyboardStyles } from "./CometChatEmojiKeyboard/EmojiKeyboardStyles"; -import { StickerKeyboardStyles } from "./CometChatStickerKeyboard/StickerKeyboardStyles"; -import { CreatePollStyles } from "./CometChatCreatePoll/CreatePollStyles"; -import { CreatePollOptionStyles } from "./CometChatCreatePollOptions/CreatePollOptionStyles"; -import { MessagePreviewStyles } from "./CometChatMessagePreview/MessagePreviewStyles"; -import { LiveReactionStyles } from "./CometChatLiveReactions/LiveReactionstyles"; -import { MessageComposerStyles } from "./CometChatMessageComposer/MessageComposerStyles"; -import { MessagesStyles } from "./CometChatMessages/MessagesStyles"; +import { MessageListStyle } from "./CometChatMessageList/MessageListStyle"; +import { EmojiKeyboardStyle } from "./CometChatEmojiKeyboard/EmojiKeyboardStyle"; +import { StickerKeyboardStyle } from "./CometChatStickerKeyboard/StickerKeyboardStyle"; +import { CreatePollStyle } from "./CometChatCreatePoll/CreatePollStyle"; +import { CreatePollOptionStyle } from "./CometChatCreatePollOptions/CreatePollOptionStyle"; +import { MessagePreviewStyle } from "./CometChatMessagePreview/MessagePreviewStyle"; +import { LiveReactionsStyle } from "./CometChatLiveReactions/LiveReactionsStyle"; +import { MessageComposerStyle } from "./CometChatMessageComposer/MessageComposerStyle"; +import { MessagesStyle } from "./CometChatMessages/MessagesStyle"; +import { MessageHeaderStyle } from "./CometChatMessageHeader/MessageHeaderStyle"; +import { SmartReplyStyle } from "./CometChatSmartReplies/SmartReplyStyle"; +import { NewMessageIndicatorStyle } from "./CometChatNewMessageIndicator/NewMessageIndicatorStyle"; +import { MessageReactionsStyle } from "./CometChatMessageReactions/MessageReactionsStyle"; +import { DeletedBubbleStyle } from "./Bubbles/CometChatDeletedMessageBubble/DeletedBubbleStyle"; /**configurations */ import { MessagesConfiguration } from "./CometChatMessages/MessagesConfiguration"; @@ -57,7 +62,21 @@ import { StickerKeyboardConfiguration } from "./CometChatStickerKeyboard/Sticker import { CreatePollConfiguration } from "./CometChatCreatePoll/CreatePollConfiguration"; import { CreatePollOptionConfiguration } from "./CometChatCreatePollOptions/CreatePollOptionConfiguration"; import { LiveReactionConfiguration } from "./CometChatLiveReactions/LiveReactionConfiguration"; -import { MessageHeaderConfiguration } from "./CometChatMessageHeader/MessageHeaderconfiguration"; +import { MessageHeaderConfiguration } from "./CometChatMessageHeader/MessageHeaderConfiguration"; +import { MessageReactionsConfiguration } from "./CometChatMessageReactions/MessageReactionsConfiguration"; +import { MessageListConfiguration } from "./CometChatMessageList/MessageListConfiguration"; + +import { TextBubbleConfiguration } from "./Bubbles/CometChatTextBubble/TextBubbleConfiguration"; +import { AudioBubbleConfiguration } from "./Bubbles/CometChatAudioBubble/AudioBubbleConfiguration"; +import { ImageBubbleConfiguration } from "./Bubbles/CometChatImageBubble/ImageBubbleConfiguration"; +import { VideoBubbleConfiguration } from "./Bubbles/CometChatVideoBubble/VideoBubbleConfiguration"; +import { PollBubbleConfiguration } from "./Bubbles/CometChatPollBubble/PollBubbleConfiguration"; +import { PollOptionBubbleConfiguration } from "./Bubbles/CometChatPollOptionBubble/PollOptionBubbleConfiguration"; +import { FileBubbleConfiguration } from "./Bubbles/CometChatFileBubble/FileBubbleConfiguration"; +import { StickerBubbleConfiguration } from "./Bubbles/CometChatStickerBubble/StickerBubbleConfiguration"; +import { CollaborativeWhiteboardConfiguration } from "./Bubbles/CometChatWhiteboardBubble/CollaborativeWhiteboardConfiguration"; +import { CollaborativeDocumentConfiguration } from "./Bubbles/CometChatDocumentBubble/CollaborativeDocumentConfiguration"; +import { DeletedBubbleConfiguration } from "./Bubbles/CometChatDeletedMessageBubble/DeletedBubbleConfiguration"; import { CometChatAudioBubble, @@ -73,7 +92,17 @@ import { CometChatVideoBubble, CometChatTextBubble, CometChatWhiteboardBubble, - MessageBubbleStyles, + MessageBubbleStyle, + TextBubbleStyle, + FileBubbleStyle, + AudioBubbleStyle, + VideoBubbleStyle, + StickerBubbleStyle, + ImageBubbleStyle, + WhiteboardBubbleStyle, + DocumentBubbleStyle, + PollBubbleStyle, + PollOptionBubbleStyle, } from "./Bubbles"; export { @@ -119,16 +148,31 @@ export { CometChatCreatePoll, CometChatCreatePollOptions, MessageInputData, - MessageListStyles, - MessageBubbleStyles, - EmojiKeyboardStyles, - StickerKeyboardStyles, - CreatePollStyles, - CreatePollOptionStyles, - MessagePreviewStyles, - LiveReactionStyles, - MessageComposerStyles, - MessagesStyles, + MessageListStyle, + MessageBubbleStyle, + TextBubbleStyle, + FileBubbleStyle, + AudioBubbleStyle, + VideoBubbleStyle, + StickerBubbleStyle, + ImageBubbleStyle, + WhiteboardBubbleStyle, + DocumentBubbleStyle, + PollBubbleStyle, + PollOptionBubbleStyle, + EmojiKeyboardStyle, + StickerKeyboardStyle, + CreatePollStyle, + CreatePollOptionStyle, + MessagePreviewStyle, + LiveReactionsStyle, + MessageComposerStyle, + MessagesStyle, + MessageHeaderStyle, + SmartReplyStyle, + NewMessageIndicatorStyle, + MessageReactionsStyle, + DeletedBubbleStyle, CometChatThreadReplies, CometChatGroupActionBubble, CometChatSmartReplies, @@ -140,4 +184,17 @@ export { CreatePollOptionConfiguration, LiveReactionConfiguration, MessageHeaderConfiguration, + MessageReactionsConfiguration, + MessageListConfiguration, + TextBubbleConfiguration, + AudioBubbleConfiguration, + ImageBubbleConfiguration, + VideoBubbleConfiguration, + PollBubbleConfiguration, + PollOptionBubbleConfiguration, + FileBubbleConfiguration, + StickerBubbleConfiguration, + CollaborativeWhiteboardConfiguration, + CollaborativeDocumentConfiguration, + DeletedBubbleConfiguration, }; diff --git a/src/components/Shared/Base/BaseStyles.js b/src/components/Shared/Base/BaseStyles.js index 2f167d1f..754c17ed 100644 --- a/src/components/Shared/Base/BaseStyles.js +++ b/src/components/Shared/Base/BaseStyles.js @@ -9,7 +9,7 @@ * @param {String} activeBackground */ -class BaseStyles { + class BaseStyles { constructor({ width = "100%", height = "100%", diff --git a/src/components/Shared/Constants/UIKitConstants.js b/src/components/Shared/Constants/UIKitConstants.js index 009646fd..234795fc 100644 --- a/src/components/Shared/Constants/UIKitConstants.js +++ b/src/components/Shared/Constants/UIKitConstants.js @@ -1,325 +1,325 @@ import { CometChat } from "@cometchat-pro/chat"; const MessageCategoryConstants = { - message: CometChat.CATEGORY_MESSAGE, //referring to sdk constant variable - custom: CometChat.CATEGORY_CUSTOM, - action: CometChat.CATEGORY_ACTION, - call: CometChat.CATEGORY_CALL, + message: CometChat.CATEGORY_MESSAGE, //referring to sdk constant variable + custom: CometChat.CATEGORY_CUSTOM, + action: CometChat.CATEGORY_ACTION, + call: CometChat.CATEGORY_CALL, }; const MessageTypeConstants = { - text: CometChat.MESSAGE_TYPE.TEXT, - file: CometChat.MESSAGE_TYPE.FILE, - image: CometChat.MESSAGE_TYPE.IMAGE, - audio: CometChat.MESSAGE_TYPE.AUDIO, - video: CometChat.MESSAGE_TYPE.VIDEO, - groupMember: CometChat.ACTION_TYPE.TYPE_GROUP_MEMBER, - messageEdited: CometChat.ACTION_TYPE.MESSAGE_EDITED, - messageDeleted: CometChat.ACTION_TYPE.MESSAGE_DELETED, - poll: "extension_poll", - sticker: "extension_sticker", - document: "extension_document", - whiteboard: "extension_whiteboard", - meeting: "meeting", - location: "location", + text: CometChat.MESSAGE_TYPE.TEXT, + file: CometChat.MESSAGE_TYPE.FILE, + image: CometChat.MESSAGE_TYPE.IMAGE, + audio: CometChat.MESSAGE_TYPE.AUDIO, + video: CometChat.MESSAGE_TYPE.VIDEO, + groupMember: CometChat.ACTION_TYPE.TYPE_GROUP_MEMBER, + messageEdited: CometChat.ACTION_TYPE.MESSAGE_EDITED, + messageDeleted: CometChat.ACTION_TYPE.MESSAGE_DELETED, + poll: "extension_poll", + sticker: "extension_sticker", + document: "extension_document", + whiteboard: "extension_whiteboard", + meeting: "meeting", + location: "location", }; const ReceiverTypeConstants = { - user: CometChat.RECEIVER_TYPE.USER, - group: CometChat.RECEIVER_TYPE.GROUP, + user: CometChat.RECEIVER_TYPE.USER, + group: CometChat.RECEIVER_TYPE.GROUP, }; const UserStatusConstants = { - online: CometChat.USER_STATUS.ONLINE, - offline: CometChat.USER_STATUS.ONLINE, + online: CometChat.USER_STATUS.ONLINE, + offline: CometChat.USER_STATUS.OFFLINE, }; const MessageOptionConstants = { - editMessage: "editMessage", - deleteMessage: "deleteMessage", - replyMessage: "replyMessage", - replyInThread: "replyInThread", - translateMessage: "translateMessage", - reactToMessage: "reactToMessage", - messageInformation: "messageInformation", - copyMessage: "copyMessage", - shareMessage: "shareMessage", - forwardMessage: "forwardMessage", - sendMessagePrivately: "sendMessagePrivately", - replyMessagePrivately: "replyMessagePrivately", + editMessage: "editMessage", + deleteMessage: "deleteMessage", + replyMessage: "replyMessage", + replyInThread: "replyInThread", + translateMessage: "translateMessage", + reactToMessage: "reactToMessage", + messageInformation: "messageInformation", + copyMessage: "copyMessage", + shareMessage: "shareMessage", + forwardMessage: "forwardMessage", + sendMessagePrivately: "sendMessagePrivately", + replyMessagePrivately: "replyMessagePrivately", }; const MessageOptionForConstants = { - sender: "sender", - receiver: "receiver", - both: "both", + sender: "sender", + receiver: "receiver", + both: "both", }; const MessageListAlignmentConstants = { - left: "left", - standard: "standard", - leftAligned: "leftAligned", + left: "left", + standard: "standard", + leftAligned: "leftAligned", }; const MessageBubbleAlignmentConstants = { - left: "left", - right: "right", - center: "center", + left: "left", + right: "right", + center: "center", }; const MessageTimeAlignmentConstants = { - top: "top", - bottom: "bottom", + top: "top", + bottom: "bottom", }; const MessageStatusConstants = Object.freeze({ - inprogress: "inprogress", - success: "success", + inprogress: "inprogress", + success: "success", }); const messageConstants = { - maximumNumOfMessages: 50, - liveReactionTimeout: 1500, + maximumNumOfMessages: 50, + liveReactionTimeout: 1500, }; const wordBoundary = { - start: `(?:^|:|;|'|"|,|{|}|\\.|\\s|\\!|\\?|\\(|\\)|\\[|\\]|\\*)`, - end: `(?=$|:|;|'|"|,|{|}|\\.|\\s|\\!|\\?|\\(|\\)|\\[|\\]|\\*)`, + start: `(?:^|:|;|'|"|,|{|}|\\.|\\s|\\!|\\?|\\(|\\)|\\[|\\]|\\*)`, + end: `(?=$|:|;|'|"|,|{|}|\\.|\\s|\\!|\\?|\\(|\\)|\\[|\\]|\\*)`, }; const emailPattern = new RegExp( - wordBoundary.start + - `[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,6}` + - wordBoundary.end, - "gi" + wordBoundary.start + + `[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,6}` + + wordBoundary.end, + "gi" ); const urlPattern = new RegExp( - wordBoundary.start + - `((https?://|www\\.|pic\\.)[-\\w;/?:@&=+$\\|\\_.!~*\\|'()\\[\\]%#,☺]+[\\w/#](\\(\\))?)` + - wordBoundary.end, - "gi" + wordBoundary.start + + `((https?://|www\\.|pic\\.)[-\\w;/?:@&=+$\\|\\_.!~*\\|'()\\[\\]%#,☺]+[\\w/#](\\(\\))?)` + + wordBoundary.end, + "gi" ); const phoneNumPattern = new RegExp( - wordBoundary.start + - `(?:\\+?(\\d{1,3}))?([-. (]*(\\d{3})[-. )]*)?((\\d{3})[-. ]*(\\d{2,4})(?:[-.x ]*(\\d+))?)` + - wordBoundary.end, - "gi" + wordBoundary.start + + `(?:\\+?(\\d{1,3}))?([-. (]*(\\d{3})[-. )]*)?((\\d{3})[-. ]*(\\d{2,4})(?:[-.x ]*(\\d+))?)` + + wordBoundary.end, + "gi" ); const MetadataConstants = { - liveReaction: "live_reaction", - file: "file", - extensions: { - thumbnailGeneration: "thumbnail-generation", - polls: "polls", - document: "document", - whiteboard: "whiteboard", - xssFilter: "xss-filter", - dataMasking: "data-masking", - profanityFilter: "profanity-filter", - reactions: "reactions", - linkPreview: "link-preview", - }, + liveReaction: "live_reaction", + file: "file", + extensions: { + thumbnailGeneration: "thumbnail-generation", + polls: "polls", + document: "document", + whiteboard: "whiteboard", + xssFilter: "xss-filter", + dataMasking: "data-masking", + profanityFilter: "profanity-filter", + reactions: "reactions", + linkPreview: "link-preview", + }, }; const GroupOptionConstants = { - leave: "leave", - delete: "delete", - viewMembers: "viewMembers", - addMembers: "addMembers", - bannedMembers: "bannedMembers", - voiceCall: "voiceCall", - videoCall: "videoCall", - viewInformation: "viewInformation", + leave: "leave", + delete: "delete", + viewMembers: "viewMembers", + addMembers: "addMembers", + bannedMembers: "bannedMembers", + voiceCall: "voiceCall", + videoCall: "videoCall", + viewInformation: "viewInformation", }; const GroupMemberOptionConstants = { - joined: "joined", - left: "left", - added: "added", - kick: "kick", - ban: "ban", - unban: "unban", - changeScope: "changeScope", + joined: "joined", + left: "left", + added: "added", + kick: "kick", + ban: "ban", + unban: "unban", + changeScope: "changeScope", }; const UserOptionConstants = { - blockUnblock: "blockUnblock", - viewProfile: "viewProfile", - voiceCall: "voiceCall", - videoCall: "videoCall", - viewInformation: "viewInformation", + blockUnblock: "blockUnblock", + viewProfile: "viewProfile", + voiceCall: "voiceCall", + videoCall: "videoCall", + viewInformation: "viewInformation", }; const ConversationOptionConstants = { - delete: "delete", - edit: "edit", + delete: "delete", + edit: "edit", }; const ConversationTypeConstants = { - users: "users", - groups: "groups", - both: "both", + users: "users", + groups: "groups", + both: "both", }; const GroupTypeConstants = { - private: CometChat.GROUP_TYPE.PRIVATE, - password: CometChat.GROUP_TYPE.PASSWORD, - public: CometChat.GROUP_TYPE.PUBLIC, + private: CometChat.GROUP_TYPE.PRIVATE, + password: CometChat.GROUP_TYPE.PASSWORD, + public: CometChat.GROUP_TYPE.PUBLIC, }; const GroupMemberScope = { - admin: CometChat.GROUP_MEMBER_SCOPE.ADMIN, - moderator: CometChat.GROUP_MEMBER_SCOPE.MODERATOR, - participant: CometChat.GROUP_MEMBER_SCOPE.PARTICIPANT, + admin: CometChat.GROUP_MEMBER_SCOPE.ADMIN, + moderator: CometChat.GROUP_MEMBER_SCOPE.MODERATOR, + participant: CometChat.GROUP_MEMBER_SCOPE.PARTICIPANT, }; export const GroupsConstants = { - MESSAGE_: "message_", - GROUP_MEMBERS: "members", - GROUP_MEMBER: "member", - - GROUP_: "group_", - ENTER_GROUP_NAME: "Name", - CREATING_MESSSAGE: "Creating...", - GROUP_PASSWORD_BLANK: "Group password cannot be blank", - PARTICIPANT: "Participant", - PUBLIC: "Public", - PRIVATE: "Private", - - CREATE_GROUP: "Create Group", - GROUP_LIST_: "grouplist_", - GROUPS: "Groups", - GUID: "guid", - VIEW_MESSAGE_THREAD: "viewMessageThread", - CLOSE_THREAD_CLICKED: "closeThreadClicked", - CLOSE_FULL_SCREEN_IMAGE: "closeFullScreenImage", - VIEW_ACTUAL_IMAGE: "viewActualImage", - ACTION_TYPE_GROUPMEMBER: "groupMember", - EDIT: "edit", - DELETE: "delete", - MENU_CLICKED: "menuClicked", - PUBLIC_GROUP: "public", - PRIVATE_GROUP: "private", - PROTECTED_GROUP: "protected", - MEMBER_SCOPE_CHANGED: "memberScopeChanged", - MEMBERS_ADDED: "membersAdded", - MEMBER_UNBANNED: "memberUnbanned", - MEMBERS_UPDATED: "membersUpdated", - MEMBER_UPDATED: "memberUpdated", - GROUP_UPDATED: "groupUpdated", - LEFT_GROUP: "leftGroup", - DELETE_GROUP: "groupDeleted", - BREAKPOINT_MIN_WIDTH: "320", - BREAKPOINT_MAX_WIDTH: "767", - UID: "uid", - SEARCH: "Search", - GROUP_TO_UPDATE: "groupToUpdate", - SCOPE: "scope", - GROUP_TO_DELETE: "groupToDelete", - MEMBERS_COUNT: "membersCount", - NO_GROUPS_FOUND: "No groups found", - LOADING_MESSSAGE: "Loading...", - ERROR: "error", - GROUP_MEMBER_KICKED: "onGroupMemberKicked", - HAS_JOINED: "hasJoined", - CLOSE_CREATE_GROUP_VIEW: "closeCreateGroupView", - GROUP_CREATED: "groupCreated", - GROUP_MEMBER_SCOPE_CHANGED: "onGroupMemberScopeChanged", - GROUP_MEMBER_BANNED: "onGroupMemberBanned", - GROUP_MEMBER_UNBANNED: "onGroupMemberUnbanned", - GROUP_MEMBER_ADDED: "onMemberAddedToGroup", - GROUP_MEMBER_LEFT: "onGroupMemberLeft", - GROUP_MEMBER_JOINED: "onGroupMemberJoined", + MESSAGE_: "message_", + GROUP_MEMBERS: "members", + GROUP_MEMBER: "member", + + GROUP_: "group_", + ENTER_GROUP_NAME: "Name", + CREATING_MESSSAGE: "Creating...", + GROUP_PASSWORD_BLANK: "Group password cannot be blank", + PARTICIPANT: "Participant", + PUBLIC: "Public", + PRIVATE: "Private", + + CREATE_GROUP: "Create Group", + GROUP_LIST_: "grouplist_", + GROUPS: "Groups", + GUID: "guid", + VIEW_MESSAGE_THREAD: "viewMessageThread", + CLOSE_THREAD_CLICKED: "closeThreadClicked", + CLOSE_FULL_SCREEN_IMAGE: "closeFullScreenImage", + VIEW_ACTUAL_IMAGE: "viewActualImage", + ACTION_TYPE_GROUPMEMBER: "groupMember", + EDIT: "edit", + DELETE: "delete", + MENU_CLICKED: "menuClicked", + PUBLIC_GROUP: "public", + PRIVATE_GROUP: "private", + PROTECTED_GROUP: "protected", + MEMBER_SCOPE_CHANGED: "memberScopeChanged", + MEMBERS_ADDED: "membersAdded", + MEMBER_UNBANNED: "memberUnbanned", + MEMBERS_UPDATED: "membersUpdated", + MEMBER_UPDATED: "memberUpdated", + GROUP_UPDATED: "groupUpdated", + LEFT_GROUP: "leftGroup", + DELETE_GROUP: "groupDeleted", + BREAKPOINT_MIN_WIDTH: "320", + BREAKPOINT_MAX_WIDTH: "767", + UID: "uid", + SEARCH: "Search", + GROUP_TO_UPDATE: "groupToUpdate", + SCOPE: "scope", + GROUP_TO_DELETE: "groupToDelete", + MEMBERS_COUNT: "membersCount", + NO_GROUPS_FOUND: "No groups found", + LOADING_MESSSAGE: "Loading...", + ERROR: "error", + GROUP_MEMBER_KICKED: "onGroupMemberKicked", + HAS_JOINED: "hasJoined", + CLOSE_CREATE_GROUP_VIEW: "closeCreateGroupView", + GROUP_CREATED: "groupCreated", + GROUP_MEMBER_SCOPE_CHANGED: "onGroupMemberScopeChanged", + GROUP_MEMBER_BANNED: "onGroupMemberBanned", + GROUP_MEMBER_UNBANNED: "onGroupMemberUnbanned", + GROUP_MEMBER_ADDED: "onMemberAddedToGroup", + GROUP_MEMBER_LEFT: "onGroupMemberLeft", + GROUP_MEMBER_JOINED: "onGroupMemberJoined", }; export const MetadataKey = Object.freeze({ - file: "file", - liveReaction: "live_reaction", - extension: "extensions", - extensions: { - thumbnailGeneration: "thumbnail-generation", - polls: "polls", - document: "document", - whiteboard: "whiteboard", - xssfilter: "xss-filter", - datamasking: "data-masking", - profanityfilter: "profanity-filter", - reactions: "reactions", - linkpreview: "link-preview", - smartReply: "smart-reply", - REPLY_POSITIVE: "reply_positive", - REPLY_NEUTRAL: "reply_neutral", - REPLY_NEGATIVE: "reply_negative", - }, - metadata: "metadata", - injected: "@injected", - links: "links", + file: "file", + liveReaction: "live_reaction", + extension: "extensions", + extensions: { + thumbnailGeneration: "thumbnail-generation", + polls: "polls", + document: "document", + whiteboard: "whiteboard", + xssfilter: "xss-filter", + datamasking: "data-masking", + profanityfilter: "profanity-filter", + reactions: "reactions", + linkpreview: "link-preview", + smartReply: "smart-reply", + REPLY_POSITIVE: "reply_positive", + REPLY_NEUTRAL: "reply_neutral", + REPLY_NEGATIVE: "reply_negative", + }, + metadata: "metadata", + injected: "@injected", + links: "links", }); const getExtensionsData = (message, extensionKey) => { - if (message?.hasOwnProperty("metadata")) { - const metadata = message.metadata; - const injectedObject = metadata["@injected"]; - if (injectedObject && injectedObject.hasOwnProperty("extensions")) { - const extensionsObject = injectedObject["extensions"]; - if (extensionsObject && extensionsObject.hasOwnProperty(extensionKey)) { - return extensionsObject[extensionKey]; - } - } - } - - return null; + if (message?.hasOwnProperty("metadata")) { + const metadata = message.metadata; + const injectedObject = metadata["@injected"]; + if (injectedObject && injectedObject.hasOwnProperty("extensions")) { + const extensionsObject = injectedObject["extensions"]; + if (extensionsObject && extensionsObject.hasOwnProperty(extensionKey)) { + return extensionsObject[extensionKey]; + } + } + } + + return null; }; const getMetadataByKey = (message, metadataKey) => { - if (message.hasOwnProperty("metadata")) { - const metadata = message["metadata"]; - if (metadata.hasOwnProperty(metadataKey)) { - return metadata[metadataKey]; - } - } - - return null; + if (message.hasOwnProperty("metadata")) { + const metadata = message["metadata"]; + if (metadata.hasOwnProperty(metadataKey)) { + return metadata[metadataKey]; + } + } + + return null; }; const bytesToSize = (bytes, decimals = 2) => { - if (bytes === 0) return "0 Bytes"; + if (bytes === 0) return "0 Bytes"; - const k = 1024; - const dm = decimals < 0 ? 0 : decimals; - const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]; + const k = 1024; + const dm = decimals < 0 ? 0 : decimals; + const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]; - const i = Math.floor(Math.log(bytes) / Math.log(k)); + const i = Math.floor(Math.log(bytes) / Math.log(k)); - return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i]; + return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i]; }; export { - MessageCategoryConstants, - MessageTypeConstants, - ReceiverTypeConstants, - MessageOptionConstants, - MessageOptionForConstants, - MessageListAlignmentConstants, - MessageBubbleAlignmentConstants, - MessageTimeAlignmentConstants, - MessageStatusConstants, - MetadataConstants, - GroupOptionConstants, - GroupMemberOptionConstants, - UserOptionConstants, - ConversationOptionConstants, - ConversationTypeConstants, - GroupTypeConstants, - GroupMemberScope, - getExtensionsData, - getMetadataByKey, - bytesToSize, - UserStatusConstants, - messageConstants, - wordBoundary, - emailPattern, - urlPattern, - phoneNumPattern, + MessageCategoryConstants, + MessageTypeConstants, + ReceiverTypeConstants, + MessageOptionConstants, + MessageOptionForConstants, + MessageListAlignmentConstants, + MessageBubbleAlignmentConstants, + MessageTimeAlignmentConstants, + MessageStatusConstants, + MetadataConstants, + GroupOptionConstants, + GroupMemberOptionConstants, + UserOptionConstants, + ConversationOptionConstants, + ConversationTypeConstants, + GroupTypeConstants, + GroupMemberScope, + getExtensionsData, + getMetadataByKey, + bytesToSize, + UserStatusConstants, + messageConstants, + wordBoundary, + emailPattern, + urlPattern, + phoneNumPattern, }; diff --git a/src/components/Shared/CustomView/index.js b/src/components/Shared/CustomView/index.js index 0f77daaa..32b64c71 100644 --- a/src/components/Shared/CustomView/index.js +++ b/src/components/Shared/CustomView/index.js @@ -5,7 +5,7 @@ * @param {String} empty * @param {String} error */ -class CustomView { + class CustomView { constructor({loading = null, empty = null, error = null}) { this.loading = loading; this.empty = empty; diff --git a/src/components/Shared/InputData/InputData.js b/src/components/Shared/InputData/InputData.js index 1558a9ec..141296ac 100644 --- a/src/components/Shared/InputData/InputData.js +++ b/src/components/Shared/InputData/InputData.js @@ -8,7 +8,7 @@ * @param {String} subtitle */ -class InputData { + class InputData { constructor({ id = "", thumbnail = true, diff --git a/src/components/Shared/PrimaryComponents/CometChatConfiguration/ConversationListConfiguration.js b/src/components/Shared/PrimaryComponents/CometChatConfiguration/ConversationListConfiguration.js deleted file mode 100644 index aeedf295..00000000 --- a/src/components/Shared/PrimaryComponents/CometChatConfiguration/ConversationListConfiguration.js +++ /dev/null @@ -1,47 +0,0 @@ -import { ConversationListCustomView } from "../../../Chats/ConversationListCustomView"; -import { ConversationListStyles } from "../../../Chats/"; -import { ConversationListItemConfiguration } from "./ConversationListItemConfiguration"; - -/** - * @class ConversationListConfiguration - * @param {Number} limit - * @param {String} conversationType - * @param {false} userAndGroupTags - * @param {Array} tags - * @param {Boolean} loadingIconURL - * @param {Object} customView - * @param {false} hideError - * @param {false} enableSoundForMessages - * @param {String} customIncomingMessageSound - * @param {Object} style - * @param {Object} conversationListItemConfiguration - */ -class ConversationListConfiguration { - constructor({ - limit = 30, - conversationType = "both", - userAndGroupTags = false, - tags = [], - loadingIconURL = "", - customView = new ConversationListCustomView({}), - hideError = false, - enableSoundForMessages = false, - customIncomingMessageSound = "", - style = new ConversationListStyles({}), - conversationListItemConfiguration = new ConversationListItemConfiguration({}), - }) { - this.limit = limit; - this.conversationType = conversationType; - this.userAndGroupTags = userAndGroupTags; - this.tags = tags; - this.loadingIconURL = loadingIconURL; - this.customView = new ConversationListCustomView(customView ?? {}); - this.hideError = hideError; - this.enableSoundForMessages = enableSoundForMessages; - this.customIncomingMessageSound = customIncomingMessageSound; - this.style = new ConversationListStyles(style ?? {}); - this.conversationListItemConfiguration = new ConversationListItemConfiguration(conversationListItemConfiguration ?? {}); - } -} - -export { ConversationListConfiguration }; \ No newline at end of file diff --git a/src/components/Shared/PrimaryComponents/CometChatConfiguration/ConversationListItemConfiguration.js b/src/components/Shared/PrimaryComponents/CometChatConfiguration/ConversationListItemConfiguration.js deleted file mode 100644 index 1dddfe25..00000000 --- a/src/components/Shared/PrimaryComponents/CometChatConfiguration/ConversationListItemConfiguration.js +++ /dev/null @@ -1,65 +0,0 @@ -import { ConversationInputData } from "../../../Chats" -import { ConversationListItemStyles } from "../../SDKDerivedComponents/CometChatConversationListItem/ConversationListItemStyles"; -import { - AvatarConfiguration, - BadgeCountConfiguration, - StatusIndicatorConfiguration, - MessageReceiptConfiguration, - DateConfiguration -} from "../../../Shared"; - -/** - * @class ConversationListItemConfiguration - * @description ConversationListItemConfiguration class is used for defining the ConversationListItem templates. - * @param {Object} conversationInputData - * @param {Object} style - * @param {Boolean} showTypingIndicator - * @param {String} typingIndicatorText - * @param {Boolean} hideThreadIndicator - * @param {Boolean} hideGroupActions - * @param {Boolean} hideDeletedMessages - * @param {String} threadIndicatorText - * @param {Array} conversationOptions - * @param {Object} avatarConfiguration - * @param {Object} statusIndicatorConfiguration - * @param {Object} badgeCountConfiguration - * @param {Object} messageReceiptConfiguration - * @param {Object} dateConfiguration - */ -class ConversationListItemConfiguration { - constructor({ - conversationInputData = new ConversationInputData({}), - style = new ConversationListItemStyles({}), - showTypingIndicator = true, - typingIndicatorText = "", - hideThreadIndicator = false, - hideGroupActions = false, - hideDeletedMessages = false, - threadIndicatorText = "", - conversationOptions = [], - avatarConfiguration = new AvatarConfiguration({}), - statusIndicatorConfiguration = new StatusIndicatorConfiguration({}), - badgeCountConfiguration = new BadgeCountConfiguration({}), - messageReceiptConfiguration = new MessageReceiptConfiguration({}), - dateConfiguration = new DateConfiguration({}), - }) { - this.conversationInputData = new ConversationInputData(conversationInputData ?? {}); - this.style = new ConversationListItemStyles(style ?? {}); - this.showTypingIndicator = showTypingIndicator; - this.typingIndicatorText = typingIndicatorText; - this.hideThreadIndicator = hideThreadIndicator; - this.hideGroupActions = hideGroupActions; - this.hideDeletedMessages = hideDeletedMessages; - this.threadIndicatorText = threadIndicatorText; - this.conversationOptions = conversationOptions; - this.avatarConfiguration = new AvatarConfiguration(avatarConfiguration ?? {}); - this.statusIndicatorConfiguration = new StatusIndicatorConfiguration(statusIndicatorConfiguration ?? {}); - this.badgeCountConfiguration = new BadgeCountConfiguration(badgeCountConfiguration ?? {}); - this.messageReceiptConfiguration = new MessageReceiptConfiguration(messageReceiptConfiguration ?? {}); - this.dateConfiguration = new DateConfiguration(dateConfiguration ?? {}); - } - - -}; - -export { ConversationListItemConfiguration }; \ No newline at end of file diff --git a/src/components/Shared/PrimaryComponents/CometChatConfiguration/ConversationsConfiguration.js b/src/components/Shared/PrimaryComponents/CometChatConfiguration/ConversationsConfiguration.js deleted file mode 100644 index 0682be12..00000000 --- a/src/components/Shared/PrimaryComponents/CometChatConfiguration/ConversationsConfiguration.js +++ /dev/null @@ -1,39 +0,0 @@ -import { - ConversationListConfiguration -} from "."; -import { ConversationsStyles } from "../../../Chats/"; - -/** - * @class ConversationsConfiguration - * @param {String} backButtonIconURL - * @param {String} startConversationIconURL - * @param {String} searchIconURL - * @param {String} showBackButton - * @param {Boolean} hideStartConversation - * @param {Boolean} hideSearch - * @param {Object} style - * @param {Object} conversationListConfiguration - */ -class ConversationsConfiguration { - constructor({ - backButtonIconURL = "", - startConversationIconURL = "", - searchIconURL = "", - showBackButton = false, - hideStartConversation = true, - hideSearch = true, - style = new ConversationsStyles({}), - conversationListConfiguration = new ConversationListConfiguration({}), - }) { - this.backButtonIconURL = backButtonIconURL; - this.startConversationIconURL = startConversationIconURL; - this.searchIconURL = searchIconURL; - this.showBackButton = showBackButton; - this.hideStartConversation = hideStartConversation; - this.hideSearch = hideSearch; - this.style = new ConversationsStyles(style ?? {}); - this.conversationListConfiguration = new ConversationListConfiguration(conversationListConfiguration ?? {}); - } -} - -export { ConversationsConfiguration }; \ No newline at end of file diff --git a/src/components/Shared/PrimaryComponents/CometChatConfiguration/DateConfiguration.js b/src/components/Shared/PrimaryComponents/CometChatConfiguration/DateConfiguration.js index 1d1b67b7..c7efcd53 100644 --- a/src/components/Shared/PrimaryComponents/CometChatConfiguration/DateConfiguration.js +++ b/src/components/Shared/PrimaryComponents/CometChatConfiguration/DateConfiguration.js @@ -5,7 +5,7 @@ * @param {String} customPattern */ -class DateConfiguration{ + class DateConfiguration{ constructor({ pattern = "timeFormat", customPattern = null, diff --git a/src/components/Shared/PrimaryComponents/CometChatConfiguration/ListBaseConfiguration.js b/src/components/Shared/PrimaryComponents/CometChatConfiguration/ListBaseConfiguration.js index c115f7b6..2799e648 100644 --- a/src/components/Shared/PrimaryComponents/CometChatConfiguration/ListBaseConfiguration.js +++ b/src/components/Shared/PrimaryComponents/CometChatConfiguration/ListBaseConfiguration.js @@ -1,4 +1,4 @@ -import { ListBaseStyles } from "../CometChatListBase/ListBaseStyles"; +import { ListBaseStyles } from "../CometChatListBase/ListBaseStyle"; /** * @class ListBaseConfiguration @@ -14,29 +14,29 @@ import { ListBaseStyles } from "../CometChatListBase/ListBaseStyles"; * @param {Object} style */ class ListBaseConfiguration { - constructor({ - title = "Title", - searchPlaceholder = "Search", - onSearch = () => { }, - onBackButtonClick = () => { }, - backButtonIconURL = "", - searchIconURL = "", - showBackButton = true, - hideSearch = true, - searchText = "", - style = new ListBaseStyles({}) - }) { - this.title = title; - this.searchPlaceholder = searchPlaceholder; - this.onSearch = onSearch; - this.onBackButtonClick = onBackButtonClick; - this.backButtonIconURL = backButtonIconURL; - this.searchIconURL = searchIconURL; - this.showBackButton = showBackButton; - this.hideSearch = hideSearch; - this.searchText = searchText; - this.style = new ListBaseStyles(style ?? {}); - } + constructor({ + title = "Title", + searchPlaceholder = "Search", + onSearch = () => {}, + onBackButtonClick = () => {}, + backButtonIconURL = "", + searchIconURL = "", + showBackButton = true, + hideSearch = true, + searchText = "", + style = new ListBaseStyles({}), + }) { + this.title = title; + this.searchPlaceholder = searchPlaceholder; + this.onSearch = onSearch; + this.onBackButtonClick = onBackButtonClick; + this.backButtonIconURL = backButtonIconURL; + this.searchIconURL = searchIconURL; + this.showBackButton = showBackButton; + this.hideSearch = hideSearch; + this.searchText = searchText; + this.style = new ListBaseStyles(style ?? {}); + } } -export { ListBaseConfiguration }; \ No newline at end of file +export { ListBaseConfiguration }; diff --git a/src/components/Shared/PrimaryComponents/CometChatConfiguration/UserListConfiguration.js b/src/components/Shared/PrimaryComponents/CometChatConfiguration/UserListConfiguration.js deleted file mode 100644 index 8ff43f5c..00000000 --- a/src/components/Shared/PrimaryComponents/CometChatConfiguration/UserListConfiguration.js +++ /dev/null @@ -1,22 +0,0 @@ -import reloadIcon from "../../../Users/CometChatUserList/resources/spinner.svg" - -const UserListConfiguration = function () { - this.limit = 30; - this.searchKeyword = ""; - this.status = ""; - this.roles = []; - this.friendsOnly = false; - this.hideBlockedUsers = false; - this.tags = []; - this.uids = []; - this.customView = { - loading: "", - empty: "", - error: "", - }; - this.loadingIconURL = reloadIcon; - this.hideError = false; - this.onErrorCallback = () => {}; -}; - -export { UserListConfiguration }; diff --git a/src/components/Shared/PrimaryComponents/CometChatConfiguration/index.js b/src/components/Shared/PrimaryComponents/CometChatConfiguration/index.js index 3000ca4a..13b35662 100644 --- a/src/components/Shared/PrimaryComponents/CometChatConfiguration/index.js +++ b/src/components/Shared/PrimaryComponents/CometChatConfiguration/index.js @@ -1,21 +1,9 @@ -import { ConversationsWithMessagesConfiguration } from "./ConversationsWithMessagesConfiguration"; -import { ConversationsConfiguration } from "./ConversationsConfiguration"; -import { ConversationListConfiguration } from "./ConversationListConfiguration"; -import { ConversationListItemConfiguration } from "./ConversationListItemConfiguration"; import { GroupListItemConfiguration } from "./GroupListItemConfiguration"; -import { UserListConfiguration } from "./UserListConfiguration"; import { UserListItemConfiguration } from "./UserListItemConfiguration"; -import { ListBaseConfiguration } from "./ListBaseConfiguration"; import { DetailsConfiguration } from "./DetailsConfiguration"; export { - ConversationsWithMessagesConfiguration, - ConversationsConfiguration, - ConversationListConfiguration, - ConversationListItemConfiguration, GroupListItemConfiguration, - UserListConfiguration, UserListItemConfiguration, - ListBaseConfiguration, DetailsConfiguration, }; diff --git a/src/components/Shared/PrimaryComponents/CometChatListBase/ListBaseConfiguration.js b/src/components/Shared/PrimaryComponents/CometChatListBase/ListBaseConfiguration.js new file mode 100644 index 00000000..8917fe35 --- /dev/null +++ b/src/components/Shared/PrimaryComponents/CometChatListBase/ListBaseConfiguration.js @@ -0,0 +1,42 @@ +import { ListBaseStyle } from "./ListBaseStyle"; + +/** + * @class ListBaseConfiguration + * @param {String} title + * @param {String} searchPlaceholder + * @param {String} backButtonIconURL + * @param {String} searchIconURL + * @param {Boolean} showBackButton + * @param {Boolean} hideSearch + * @param {String} searchText + * @param {Function} onSearch + * @param {Function} onBackButtonClick + * @param {Object} style + */ +class ListBaseConfiguration { + constructor({ + title = "Title", + searchPlaceholder = "Search", + onSearch = () => {}, + onBackButtonClick = () => {}, + backButtonIconURL = "", + searchIconURL = "", + showBackButton = true, + hideSearch = true, + searchText = "", + style = new ListBaseStyle({}), + }) { + this.title = title; + this.searchPlaceholder = searchPlaceholder; + this.onSearch = onSearch; + this.onBackButtonClick = onBackButtonClick; + this.backButtonIconURL = backButtonIconURL; + this.searchIconURL = searchIconURL; + this.showBackButton = showBackButton; + this.hideSearch = hideSearch; + this.searchText = searchText; + this.style = new ListBaseStyle(style ?? {}); + } +} + +export { ListBaseConfiguration }; diff --git a/src/components/Shared/PrimaryComponents/CometChatListBase/ListBaseStyle.js b/src/components/Shared/PrimaryComponents/CometChatListBase/ListBaseStyle.js new file mode 100644 index 00000000..dd1edc7d --- /dev/null +++ b/src/components/Shared/PrimaryComponents/CometChatListBase/ListBaseStyle.js @@ -0,0 +1,57 @@ +import { BaseStyles } from "../../Base/BaseStyles"; + +/** + * @class ListBaseStyle + * @description ListBaseStyle class is used for defining the styles for conversation list. + * @param {String} width + * @param {String} height + * @param {String} border + * @param {String} borderRadius + * @param {String} titleFont + * @param {String} titleColor + * @param {String} backIconTint + * @param {String} searchBorder + * @param {String} searchBorderRadius + * @param {String} searchBackground + * @param {String} searchTextFont + * @param {String} searchTextColor + * @param {String} searchIconTint + */ + +class ListBaseStyle extends BaseStyles { + constructor({ + width = "100%", + height = "100%", + border = "", + borderRadius = "0", + background = "", + titleFont = "", + titleColor = "", + backIconTint = "", + searchBorder = "", + searchBorderRadius = "8px", + searchBackground = "", + searchTextFont = "", + searchTextColor = "", + searchIconTint = "", + }) { + super({ + width, + height, + background, + border, + borderRadius, + }); + + this.titleFont = titleFont; + this.titleColor = titleColor; + this.backIconTint = backIconTint; + this.searchBorder = searchBorder; + this.searchBorderRadius = searchBorderRadius; + this.searchBackground = searchBackground; + this.searchTextFont = searchTextFont; + this.searchTextColor = searchTextColor; + this.searchIconTint = searchIconTint; + } +} +export { ListBaseStyle }; diff --git a/src/components/Shared/PrimaryComponents/CometChatListBase/ListBaseStyles.js b/src/components/Shared/PrimaryComponents/CometChatListBase/ListBaseStyles.js deleted file mode 100644 index 25ced028..00000000 --- a/src/components/Shared/PrimaryComponents/CometChatListBase/ListBaseStyles.js +++ /dev/null @@ -1,58 +0,0 @@ -import { BaseStyles } from "../../Base/BaseStyles"; - -/** - * @class ListBaseStyles - * @description ListBaseStyles class is used for defining the styles for conversation list. - * @param {String} width - * @param {String} height - * @param {String} border - * @param {String} borderRadius - * @param {String} titleFont - * @param {String} titleColor - * @param {String} backIconTint - * @param {String} searchBorder - * @param {String} searchBorderRadius - * @param {String} searchBackground - * @param {String} searchTextFont - * @param {String} searchTextColor - * @param {String} searchIconTint - */ - -class ListBaseStyles extends BaseStyles { - - constructor({ - width = "100%", - height = "100%", - border = "", - borderRadius = "0", - background = "", - titleFont = "", - titleColor = "", - backIconTint = "", - searchBorder = "", - searchBorderRadius = "8px", - searchBackground = "", - searchTextFont = "", - searchTextColor = "", - searchIconTint = "", - }) { - super({ - width, - height, - background, - border, - borderRadius - }); - - this.titleFont = titleFont; - this.titleColor = titleColor; - this.backIconTint = backIconTint; - this.searchBorder = searchBorder; - this.searchBorderRadius = searchBorderRadius; - this.searchBackground = searchBackground; - this.searchTextFont = searchTextFont; - this.searchTextColor = searchTextColor; - this.searchIconTint = searchIconTint; - } -} -export { ListBaseStyles } \ No newline at end of file diff --git a/src/components/Shared/PrimaryComponents/CometChatTheme/Typography.js b/src/components/Shared/PrimaryComponents/CometChatTheme/Typography.js index 036a4d91..b5f430bf 100644 --- a/src/components/Shared/PrimaryComponents/CometChatTheme/Typography.js +++ b/src/components/Shared/PrimaryComponents/CometChatTheme/Typography.js @@ -4,7 +4,7 @@ * @param {String} fontWeight * @param {String} fontSize */ -class FontDetails { + class FontDetails { constructor({ fontFamily = "", fontWeight = "", diff --git a/src/components/Shared/PrimaryComponents/index.js b/src/components/Shared/PrimaryComponents/index.js index a29f7335..6bf52b18 100644 --- a/src/components/Shared/PrimaryComponents/index.js +++ b/src/components/Shared/PrimaryComponents/index.js @@ -1,15 +1,11 @@ import { - ConversationsWithMessagesConfiguration, - ListBaseConfiguration, - ConversationsConfiguration, - ConversationListConfiguration, - ConversationListItemConfiguration, GroupListItemConfiguration, - UserListConfiguration, UserListItemConfiguration, DetailsConfiguration, } from "./CometChatConfiguration"; +import { ListBaseConfiguration } from "./CometChatListBase/ListBaseConfiguration"; + import { CometChatListBase } from "./CometChatListBase/index"; import { CometChatLocalize, localize } from "./CometChatLocalize"; import { CometChatSoundManager } from "./CometChatSoundManager"; @@ -17,13 +13,8 @@ import { CometChatSoundManager } from "./CometChatSoundManager"; import { CometChatTheme, Palette, Typography } from "./CometChatTheme"; export { - ConversationsWithMessagesConfiguration, ListBaseConfiguration, - ConversationsConfiguration, - ConversationListConfiguration, - ConversationListItemConfiguration, GroupListItemConfiguration, - UserListConfiguration, UserListItemConfiguration, DetailsConfiguration, CometChatListBase, diff --git a/src/components/Shared/SDKDerivedComponents/CometChatConversationListItem/ConversationListItemConfiguration.js b/src/components/Shared/SDKDerivedComponents/CometChatConversationListItem/ConversationListItemConfiguration.js new file mode 100644 index 00000000..86642625 --- /dev/null +++ b/src/components/Shared/SDKDerivedComponents/CometChatConversationListItem/ConversationListItemConfiguration.js @@ -0,0 +1,73 @@ +import { ConversationInputData } from "../../../Chats"; +import { ConversationListItemStyle } from "./ConversationListItemStyle"; +import { + AvatarConfiguration, + BadgeCountConfiguration, + StatusIndicatorConfiguration, + MessageReceiptConfiguration, + DateConfiguration, +} from "../.."; + +/** + * @class ConversationListItemConfiguration + * @description ConversationListItemConfiguration class is used for defining the ConversationListItem templates. + * @param {Object} conversationInputData + * @param {Object} style + * @param {Boolean} showTypingIndicator + * @param {String} typingIndicatorText + * @param {Boolean} hideThreadIndicator + * @param {Boolean} hideGroupActions + * @param {Boolean} hideDeletedMessages + * @param {String} threadIndicatorText + * @param {Array} conversationOptions + * @param {Object} avatarConfiguration + * @param {Object} statusIndicatorConfiguration + * @param {Object} badgeCountConfiguration + * @param {Object} messageReceiptConfiguration + * @param {Object} dateConfiguration + */ +class ConversationListItemConfiguration { + constructor({ + conversationInputData = new ConversationInputData({}), + style = new ConversationListItemStyle({}), + showTypingIndicator = true, + typingIndicatorText = "", + hideThreadIndicator = false, + hideGroupActions = false, + hideDeletedMessages = false, + threadIndicatorText = "", + conversationOptions = [], + avatarConfiguration = new AvatarConfiguration({}), + statusIndicatorConfiguration = new StatusIndicatorConfiguration({}), + badgeCountConfiguration = new BadgeCountConfiguration({}), + messageReceiptConfiguration = new MessageReceiptConfiguration({}), + dateConfiguration = new DateConfiguration({}), + }) { + this.conversationInputData = new ConversationInputData( + conversationInputData ?? {} + ); + this.style = new ConversationListItemStyle(style ?? {}); + this.showTypingIndicator = showTypingIndicator; + this.typingIndicatorText = typingIndicatorText; + this.hideThreadIndicator = hideThreadIndicator; + this.hideGroupActions = hideGroupActions; + this.hideDeletedMessages = hideDeletedMessages; + this.threadIndicatorText = threadIndicatorText; + this.conversationOptions = conversationOptions; + this.avatarConfiguration = new AvatarConfiguration( + avatarConfiguration ?? {} + ); + this.statusIndicatorConfiguration = new StatusIndicatorConfiguration( + statusIndicatorConfiguration ?? {} + ); + this.badgeCountConfiguration = new BadgeCountConfiguration( + badgeCountConfiguration ?? {} + ); + this.messageReceiptConfiguration = new MessageReceiptConfiguration( + messageReceiptConfiguration ?? {} + ); + this.dateConfiguration = new DateConfiguration(dateConfiguration ?? {}); + } +} + +export { ConversationListItemConfiguration }; diff --git a/src/components/Shared/SDKDerivedComponents/CometChatConversationListItem/ConversationListItemStyles.js b/src/components/Shared/SDKDerivedComponents/CometChatConversationListItem/ConversationListItemStyles.js index e55154a9..31366ab0 100644 --- a/src/components/Shared/SDKDerivedComponents/CometChatConversationListItem/ConversationListItemStyles.js +++ b/src/components/Shared/SDKDerivedComponents/CometChatConversationListItem/ConversationListItemStyles.js @@ -1,8 +1,8 @@ import { BaseStyles } from "../../Base/BaseStyles"; /** - * @class ConversationListItemStyles - * @description ConversationListItemStyles class is used for defining the styles for conversation list item. + * @class ConversationListItemStyle + * @description ConversationListItemStyle class is used for defining the styles for conversation list item. * @param {String} width * @param {String} height * @param {String} background @@ -19,7 +19,7 @@ import { BaseStyles } from "../../Base/BaseStyles"; * @param {String} threadIndicatorTextFont */ -class ConversationListItemStyles extends BaseStyles { +class ConversationListItemStyle extends BaseStyles { constructor({ width = "280px", height = "100%", @@ -56,4 +56,4 @@ class ConversationListItemStyles extends BaseStyles { this.threadIndicatorTextFont = threadIndicatorTextFont; } } -export { ConversationListItemStyles }; +export { ConversationListItemStyle }; diff --git a/src/components/Shared/SDKDerivedComponents/CometChatConversationListItem/index.js b/src/components/Shared/SDKDerivedComponents/CometChatConversationListItem/index.js index 6d82a026..64a82b19 100644 --- a/src/components/Shared/SDKDerivedComponents/CometChatConversationListItem/index.js +++ b/src/components/Shared/SDKDerivedComponents/CometChatConversationListItem/index.js @@ -1,39 +1,37 @@ import React, { useState } from "react"; import PropTypes from "prop-types"; import { - CometChatAvatar, - CometChatBadgeCount, - CometChatStatusIndicator, - CometChatDate, - CometChatMessageReceipt, - CometChatLocalize, - localize, - CometChatTheme, - CometChatConversationEvents, - MessageCategoryConstants, - MessageTypeConstants, - AvatarConfiguration, - StatusIndicatorConfiguration, - BadgeCountConfiguration, - MessageReceiptConfiguration, - DateConfiguration, - fontHelper, - ReceiverTypeConstants, - GroupTypeConstants, - UserStatusConstants, - CometChatMenuList, + CometChatAvatar, + CometChatBadgeCount, + CometChatStatusIndicator, + CometChatDate, + CometChatMessageReceipt, + CometChatLocalize, + localize, + CometChatTheme, + CometChatConversationEvents, + MessageCategoryConstants, + MessageTypeConstants, + AvatarConfiguration, + StatusIndicatorConfiguration, + BadgeCountConfiguration, + MessageReceiptConfiguration, + DateConfiguration, + fontHelper, + ReceiverTypeConstants, + GroupTypeConstants, + UserStatusConstants, + CometChatMenuList, } from "../../../"; -import { - ConversationInputData, -} from "../../../Chats"; +import { ConversationInputData } from "../../../Chats"; import { groupTypeColorCode } from "../../../Groups/CometChatGroupConstants"; import { - ConversationListItemStyles, - BadgeCountStyles, - AvatarStyles, - StatusIndicatorStyles, - DateStyles, - MessageReceiptStyles, + ConversationListItemStyles, + BadgeCountStyle, + AvatarStyle, + StatusIndicatorStyles, + DateStyle, + MessageReceiptStyle, } from "../../../Shared/"; import passwordIcon from "./resources/passwordIcon.svg"; import privateIcon from "./resources/privateIcon.svg"; @@ -48,600 +46,612 @@ import * as styles from "./style"; * */ const ConversationListItem = (props) => { - /** - * Props destructuring - */ - const { - isActive, - conversationObject, - - conversationInputData, - style, - showTypingIndicator, - typingIndicatorText, - hideThreadIndicator, - threadIndicatorText, - hideGroupActions, - hideDeletedMessages, - conversationOptions, - avatarConfiguration, - statusIndicatorConfiguration, - badgeCountConfiguration, - messageReceiptConfiguration, - dateConfiguration, - theme, - } = props; - - /** - * Component internal state - */ - const [isHovering, setIsHovering] = useState(false); - - /** - * Component private scoping - */ - const _avatarConfiguration = new AvatarConfiguration(avatarConfiguration ?? {}); - const _statusIndicatorConfiguration = new StatusIndicatorConfiguration(statusIndicatorConfiguration ?? {}); - const _badgeCountConfiguration = new BadgeCountConfiguration(badgeCountConfiguration ?? {}); - const _messageReceiptConfiguration = new MessageReceiptConfiguration(messageReceiptConfiguration ?? {}); - const _dateConfiguration = new DateConfiguration(dateConfiguration ?? {}); - const _theme = new CometChatTheme(theme ?? {}); - - let _isActive = isHovering || isActive; - - /** - * Component internal handlers/methods - */ - const toggleConversationOptions = () => { - setIsHovering(!isHovering); - }; - - const showToolTip = (event) => { - const elem = event.target; - - const scrollWidth = elem.scrollWidth; - const clientWidth = elem.clientWidth; - - if (scrollWidth <= clientWidth) { - return false; - } - - elem.setAttribute("title", elem.textContent); - }; - - const hideToolTip = (event) => { - const elem = event.target; - - const scrollWidth = elem.scrollWidth; - const clientWidth = elem.clientWidth; - - if (scrollWidth <= clientWidth) { - return false; - } - - elem.removeAttribute("title"); - }; - - const clickHandler = () => { - CometChatConversationEvents.emit( - CometChatConversationEvents.onItemClick, - conversationObject - ); - }; - - const getId = () => { - return conversationInputData.id && conversationObject.conversationId - ? conversationObject.conversationId - : ""; - }; - - /** - * Calculate input data for child component - */ - if (conversationInputData && !conversationInputData.subtitle()) { - conversationInputData.subtitle = (conversation) => { - if ( - conversation?.lastMessage?.receiverType === ReceiverTypeConstants.user || - conversation?.lastMessage?.receiverType === ReceiverTypeConstants.group - ) { - if (conversation?.lastMessage?.type === MessageTypeConstants.text) { - return conversation?.lastMessage?.text; - } else if ( - conversation?.lastMessage?.type === MessageTypeConstants.image - ) { - return localize("MESSAGE_IMAGE"); - } else if ( - conversation?.lastMessage?.type === MessageTypeConstants.poll - ) { - return localize("CUSTOM_MESSAGE_POLL"); - } else if ( - conversation?.lastMessage?.type === MessageTypeConstants.file - ) { - return localize("MESSAGE_FILE"); - } else if ( - conversation?.lastMessage?.type === MessageTypeConstants.video - ) { - return localize("MESSAGE_VIDEO"); - } else if ( - conversation?.lastMessage?.type === MessageTypeConstants.audio - ) { - return localize("MESSAGE_AUDIO"); - } else if ( - conversation?.lastMessage?.type === MessageTypeConstants.whiteboard - ) { - return localize("CUSTOM_MESSAGE_WHITEBOARD"); - } else if ( - conversation?.lastMessage?.type === MessageTypeConstants.sticker - ) { - return localize("CUSTOM_MESSAGE_STICKER"); - } else if ( - conversation?.lastMessage?.type === MessageTypeConstants.document - ) { - return localize("CUSTOM_MESSAGE_DOCUMENT"); - } else if ( - conversation?.lastMessage?.category === MessageCategoryConstants.action && - hideGroupActions === false - ) { - //TODO: what if actionMessages are set to true - return ""; - } - } else if (!conversation?.lastMessage) { - return localize("NO_MESSAGES_FOUND"); - } - }; - } - - /** - * Component template scoping - */ - const getAvatar = () => { - const outerViewWidth = _avatarConfiguration?.style?.outerViewWidth; - const outerView = `${outerViewWidth} solid ${_theme?.palette?.getPrimary()}`; - const borderWidth = _avatarConfiguration?.style?.borderWidth; - let avatarStyle = new AvatarStyles({ - width: _avatarConfiguration?.style?.width, - height: _avatarConfiguration?.style?.height, - outerViewSpacing: _avatarConfiguration?.style?.outerViewSpacing, - outerView: _avatarConfiguration?.style?.outerView || outerView, - textColor: - _avatarConfiguration?.style?.textColor || - _theme?.palette?.getAccent900(), - textFont: - _avatarConfiguration?.style?.textFont || - fontHelper(_theme?.typography?.name), - border: `${borderWidth} solid ${_theme?.palette?.getAccent600()}`, - borderRadius: _avatarConfiguration?.style?.borderRadius, - backgroundSize: _avatarConfiguration?.style?.backgroundSize, - backgroundColor: - _avatarConfiguration?.style?.backgroundColor || - _theme?.palette?.getAccent600(), - }); - - if (conversationInputData?.thumbnail) { - if ( - conversationObject?.conversationType && - conversationObject?.conversationType === ReceiverTypeConstants?.user - ) { - if (conversationObject?.conversationWith?.avatar) { - return ( - - ); - } else if (conversationObject?.conversationWith?.name) { - return ( - - ); - } - } else if ( - conversationObject?.conversationType && - conversationObject?.conversationType === ReceiverTypeConstants?.group - ) { - if (conversationObject?.conversationWith.icon) { - return ( - - ); - } else if (conversationObject?.conversationWith?.name) { - return ( - - ); - } - } - } - }; - - const getPresence = () => { - let presence; - - const statusIndicatorStyles = new StatusIndicatorStyles({ - width: _statusIndicatorConfiguration?.style?.width, - height: _statusIndicatorConfiguration?.style?.height, - border: - _statusIndicatorConfiguration?.style?.border || - `2px solid ${_theme?.palette?.getBackground()}`, - borderRadius: _statusIndicatorConfiguration?.style?.borderRadius, - }); - - if ( - conversationObject?.conversationType && - conversationObject?.conversationType === ReceiverTypeConstants?.group - ) { - if ( - conversationObject?.conversationWith?.type === - GroupTypeConstants?.private - ) { - presence = ( - - ); - } else if ( - conversationObject?.conversationWith && - conversationObject?.conversationWith?.type === GroupTypeConstants?.password - ) { - presence = ( - - ); - } - } else if ( - conversationObject?.conversationType && conversationObject?.conversationType === ReceiverTypeConstants?.user && - conversationObject?.conversationWith?.status === UserStatusConstants.online - ) { - presence = ( - - ); - } - return presence; - }; - - const getTime = () => { - const pattern = _dateConfiguration?.pattern || "dayDateTimeFormat"; - const customPattern = _dateConfiguration?.customPattern; - const dateStyle = new DateStyles({ - ..._dateConfiguration?.style, - textColor: - _dateConfiguration?.style?.textColor || - _theme?.palette?.accent500[_theme?.palette?.mode], - textFont: - _dateConfiguration?.style?.textFont || - fontHelper(_theme?.typography?.caption2), - }); - - if ( - conversationInputData?.timestamp && - conversationObject?.lastMessage?.updatedAt - ) { - return ( - - ); - } - - return null; - }; - - const getTypingIndicator = () => { - if (showTypingIndicator && typingIndicatorText?.trim().length) { - return ( -
- {typingIndicatorText.trim()} -
- ); - } else return null; - }; - - const getTitle = () => { - if ( - conversationInputData?.title && - conversationObject?.conversationWith?.name - ) { - return ( -
- {conversationObject?.conversationWith?.name} -
- ); - } else return null; - }; - - const getSubtitle = () => { - if (conversationInputData?.subtitle) { - //TODO: This condition is not required, what if they start a conversation and leave without sending a message - // if ( - // conversationObject && - // conversationObject?.lastMessage && - // ( - // conversationObject?.lastMessage?.receiverType === ReceiverTypeConstants?.user || - // conversationObject?.lastMessage?.receiverType === ReceiverTypeConstants?.group - // ) - // ) { - - return
- {conversationInputData?.subtitle(conversationObject, props) ?? localize('EMPTY_CHAT')} -
- - // } - } - }; - - const getUnreadCount = () => { - if ( - conversationInputData?.unreadCount && - conversationObject && - conversationObject?.unreadMessageCount - ) { - const badgecountStyles = new BadgeCountStyles({ - textFont: - _badgeCountConfiguration?.style?.textFont || - fontHelper(_theme?.typography?.caption1), - textColor: - _badgeCountConfiguration?.style?.textColor || - _theme?.palette?.getBackground(), - background: - _badgeCountConfiguration?.style?.background || - _theme?.palette?.getPrimary(), - width: _badgeCountConfiguration?.style?.width, - height: _badgeCountConfiguration?.style?.height, - border: _badgeCountConfiguration?.style?.border, - borderRadius: _badgeCountConfiguration?.style?.borderRadius, - }); - - return ( - - ); - } - return null; - }; - - const getReceiptType = () => { - const messageWaitIcon = _messageReceiptConfiguration?.messageWaitIcon; - const messageSentIcon = _messageReceiptConfiguration?.messageSentIcon; - const messageDeliveredIcon = - _messageReceiptConfiguration?.messageDeliveredIcon; - const messageReadIcon = _messageReceiptConfiguration?.messageReadIcon; - const messageErrorIcon = _messageReceiptConfiguration?.messageErrorIcon; - if ( - // conversationInputData?.readreceipt && - // conversationObject?.lastMessage?.receiverType === ReceiverTypeConstants?.user && - // conversationObject?.lastMessage?.sender?.uid === loggedInUser?.uid - - // && - - conversationInputData?.readReceipt && - conversationObject?.lastMessage?.sender?.uid != conversationObject?.conversationWith.uid && !conversationObject?.conversationWith?.guid && - !conversationObject?.lastMessage?.deletedAt && - // !isTyping && - conversationObject?.lastMessage?.category != "call" && - conversationObject?.lastMessage?.type != "DIRECT_CALL" - ) { - let receiptKey = conversationObject?.lastMessage; - if (receiptKey?.error) { - return ( - - ); - } else if (receiptKey?.readAt) { - return ( - - ); - } else if (receiptKey?.deliveredAt) { - return ( - - ); - } else if (receiptKey?.sentAt) { - return ( - - ); - } else { - return ( - - ); - } - } - return null; - }; - - const getThreadIndicator = () => { - if ( - hideThreadIndicator === false && - threadIndicatorText && - conversationObject?.lastMessage?.parentMessageId - ) { - return ( -
- {threadIndicatorText} -
- ); - } - - return null; - }; - - const getAvatarWithPresence = () => { - if (conversationInputData?.thumbnail || conversationInputData?.status) { - return ( -
- {conversationInputData?.thumbnail ? getAvatar() : null} - {conversationInputData?.status ? getPresence() : null} -
- ); - } else return null; - }; - - /** - * Component template - */ - return ( -
- {getAvatarWithPresence()} - -
-
- {getTitle()} - {conversationInputData.timestamp && !isHovering ? getTime() : null} -
- {getThreadIndicator()} -
- {conversationInputData?.readreceipt ? getReceiptType() : null} - {conversationInputData?.subtitle && !typingIndicatorText?.trim().length ? getSubtitle() : null} - {showTypingIndicator ? getTypingIndicator() : null} - {conversationInputData.unreadCount && !isHovering ? getUnreadCount() : null} -
-
- - {isHovering ? ( - - ) : null} -
- ); + /** + * Props destructuring + */ + const { + isActive, + conversationObject, + conversationInputData, + style, + showTypingIndicator, + typingIndicatorText, + hideThreadIndicator, + threadIndicatorText, + hideGroupActions, + hideDeletedMessages, + conversationOptions, + avatarConfiguration, + statusIndicatorConfiguration, + badgeCountConfiguration, + messageReceiptConfiguration, + dateConfiguration, + theme, + } = props; + + /** + * Component internal state + */ + const [isHovering, setIsHovering] = useState(false); + + /** + * Component private scoping + */ + const _avatarConfiguration = new AvatarConfiguration( + avatarConfiguration ?? {} + ); + const _statusIndicatorConfiguration = new StatusIndicatorConfiguration( + statusIndicatorConfiguration ?? {} + ); + const _badgeCountConfiguration = new BadgeCountConfiguration( + badgeCountConfiguration ?? {} + ); + const _messageReceiptConfiguration = new MessageReceiptConfiguration( + messageReceiptConfiguration ?? {} + ); + const _dateConfiguration = new DateConfiguration(dateConfiguration ?? {}); + const _theme = new CometChatTheme(theme ?? {}); + + let _isActive = isHovering || isActive; + + /** + * Component internal handlers/methods + */ + const toggleConversationOptions = () => { + setIsHovering(!isHovering); + }; + + const showToolTip = (event) => { + const elem = event.target; + + const scrollWidth = elem.scrollWidth; + const clientWidth = elem.clientWidth; + + if (scrollWidth <= clientWidth) { + return false; + } + + elem.setAttribute("title", elem.textContent); + }; + + const hideToolTip = (event) => { + const elem = event.target; + + const scrollWidth = elem.scrollWidth; + const clientWidth = elem.clientWidth; + + if (scrollWidth <= clientWidth) { + return false; + } + + elem.removeAttribute("title"); + }; + + const clickHandler = () => { + CometChatConversationEvents.emit( + CometChatConversationEvents.onItemClick, + conversationObject + ); + }; + + const getId = () => { + return conversationInputData.id && conversationObject.conversationId + ? conversationObject.conversationId + : ""; + }; + + /** + * Calculate input data for child component + */ + if (conversationInputData && !conversationInputData.subtitle()) { + conversationInputData.subtitle = (conversation) => { + if ( + conversation?.lastMessage?.receiverType === + ReceiverTypeConstants.user || + conversation?.lastMessage?.receiverType === ReceiverTypeConstants.group + ) { + if (!hideDeletedMessages && conversation?.lastMessage?.deletedAt) { + return localize("MESSAGE_IS_DELETED"); + } else if ( + conversation?.lastMessage?.type === MessageTypeConstants.text + ) { + return conversation?.lastMessage?.text; + } else if ( + conversation?.lastMessage?.type === MessageTypeConstants.image + ) { + return localize("MESSAGE_IMAGE"); + } else if ( + conversation?.lastMessage?.type === MessageTypeConstants.poll + ) { + return localize("CUSTOM_MESSAGE_POLL"); + } else if ( + conversation?.lastMessage?.type === MessageTypeConstants.file + ) { + return localize("MESSAGE_FILE"); + } else if ( + conversation?.lastMessage?.type === MessageTypeConstants.video + ) { + return localize("MESSAGE_VIDEO"); + } else if ( + conversation?.lastMessage?.type === MessageTypeConstants.audio + ) { + return localize("MESSAGE_AUDIO"); + } else if ( + conversation?.lastMessage?.type === MessageTypeConstants.whiteboard + ) { + return localize("CUSTOM_MESSAGE_WHITEBOARD"); + } else if ( + conversation?.lastMessage?.type === MessageTypeConstants.sticker + ) { + return localize("CUSTOM_MESSAGE_STICKER"); + } else if ( + conversation?.lastMessage?.type === MessageTypeConstants.document + ) { + return localize("CUSTOM_MESSAGE_DOCUMENT"); + } else if ( + conversation?.lastMessage?.category === + MessageCategoryConstants.action && + hideGroupActions === false + ) { + //TODO: what if actionMessages are set to true + return ""; + } + } else if (!conversation?.lastMessage) { + return localize("NO_MESSAGES_FOUND"); + } + }; + } + + /** + * Component template scoping + */ + const getAvatar = () => { + const outerViewWidth = _avatarConfiguration?.style?.outerViewWidth; + const outerView = `${outerViewWidth} solid ${_theme?.palette?.getPrimary()}`; + const borderWidth = _avatarConfiguration?.style?.borderWidth; + let avatarStyle = new AvatarStyle({ + width: _avatarConfiguration?.style?.width, + height: _avatarConfiguration?.style?.height, + outerViewSpacing: _avatarConfiguration?.style?.outerViewSpacing, + outerView: _avatarConfiguration?.style?.outerView || outerView, + textColor: + _avatarConfiguration?.style?.textColor || + _theme?.palette?.getAccent900(), + textFont: + _avatarConfiguration?.style?.textFont || + fontHelper(_theme?.typography?.name), + border: `${borderWidth} solid ${_theme?.palette?.getAccent600()}`, + borderRadius: _avatarConfiguration?.style?.borderRadius, + backgroundSize: _avatarConfiguration?.style?.backgroundSize, + backgroundColor: + _avatarConfiguration?.style?.backgroundColor || + _theme?.palette?.getAccent600(), + }); + + if (conversationInputData?.thumbnail) { + if ( + conversationObject?.conversationType && + conversationObject?.conversationType === ReceiverTypeConstants?.user + ) { + if (conversationObject?.conversationWith?.avatar) { + return ( + + ); + } else if (conversationObject?.conversationWith?.name) { + return ( + + ); + } + } else if ( + conversationObject?.conversationType && + conversationObject?.conversationType === ReceiverTypeConstants?.group + ) { + if (conversationObject?.conversationWith.icon) { + return ( + + ); + } else if (conversationObject?.conversationWith?.name) { + return ( + + ); + } + } + } + }; + + const getPresence = () => { + let presence; + + const statusIndicatorStyles = new StatusIndicatorStyles({ + width: _statusIndicatorConfiguration?.style?.width, + height: _statusIndicatorConfiguration?.style?.height, + border: + _statusIndicatorConfiguration?.style?.border || + `2px solid ${_theme?.palette?.getBackground()}`, + borderRadius: _statusIndicatorConfiguration?.style?.borderRadius, + }); + + if ( + conversationObject?.conversationType && + conversationObject?.conversationType === ReceiverTypeConstants?.group + ) { + if ( + conversationObject?.conversationWith?.type === + GroupTypeConstants?.private + ) { + presence = ( + + ); + } else if ( + conversationObject?.conversationWith && + conversationObject?.conversationWith?.type === + GroupTypeConstants?.password + ) { + presence = ( + + ); + } + } else if ( + conversationObject?.conversationType && + conversationObject?.conversationType === ReceiverTypeConstants?.user && + conversationObject?.conversationWith?.status === + UserStatusConstants.online + ) { + presence = ( + + ); + } + return presence; + }; + + const getTime = () => { + const pattern = _dateConfiguration?.pattern || "dayDateTimeFormat"; + const customPattern = _dateConfiguration?.customPattern; + const dateStyle = new DateStyle({ + ..._dateConfiguration?.style, + textColor: + _dateConfiguration?.style?.textColor || + _theme?.palette?.accent500[_theme?.palette?.mode], + textFont: + _dateConfiguration?.style?.textFont || + fontHelper(_theme?.typography?.caption2), + }); + + if ( + conversationInputData?.timestamp && + conversationObject?.lastMessage?.updatedAt + ) { + return ( + + ); + } + + return null; + }; + + const getTypingIndicator = () => { + if (showTypingIndicator && typingIndicatorText?.trim().length) { + return ( +
+ {typingIndicatorText.trim()} +
+ ); + } else return null; + }; + + const getTitle = () => { + if ( + conversationInputData?.title && + conversationObject?.conversationWith?.name + ) { + return ( +
+ {conversationObject?.conversationWith?.name} +
+ ); + } else return null; + }; + + const getSubtitle = () => { + if (conversationInputData?.subtitle) { + //TODO: This condition is not required, what if they start a conversation and leave without sending a message + // if ( + // conversationObject && + // conversationObject?.lastMessage && + // ( + // conversationObject?.lastMessage?.receiverType === ReceiverTypeConstants?.user || + // conversationObject?.lastMessage?.receiverType === ReceiverTypeConstants?.group + // ) + // ) { + + return ( +
+ {conversationInputData?.subtitle(conversationObject, props)} +
+ ); + + // } + } + }; + + const getUnreadCount = () => { + if ( + conversationInputData?.unreadCount && + conversationObject && + conversationObject?.unreadMessageCount + ) { + const badgecountStyle = new BadgeCountStyle({ + textFont: + _badgeCountConfiguration?.style?.textFont || + fontHelper(_theme?.typography?.caption1), + textColor: + _badgeCountConfiguration?.style?.textColor || + _theme?.palette?.getBackground(), + background: + _badgeCountConfiguration?.style?.background || + _theme?.palette?.getPrimary(), + width: _badgeCountConfiguration?.style?.width, + height: _badgeCountConfiguration?.style?.height, + border: _badgeCountConfiguration?.style?.border, + borderRadius: _badgeCountConfiguration?.style?.borderRadius, + }); + + return ( + + ); + } + return null; + }; + + const getReceiptType = () => { + const messageWaitIcon = _messageReceiptConfiguration?.messageWaitIcon; + const messageSentIcon = _messageReceiptConfiguration?.messageSentIcon; + const messageDeliveredIcon = + _messageReceiptConfiguration?.messageDeliveredIcon; + const messageReadIcon = _messageReceiptConfiguration?.messageReadIcon; + const messageErrorIcon = _messageReceiptConfiguration?.messageErrorIcon; + if ( + // conversationInputData?.readreceipt && + // conversationObject?.lastMessage?.receiverType === ReceiverTypeConstants?.user && + // conversationObject?.lastMessage?.sender?.uid === loggedInUser?.uid + + // && + + conversationInputData?.readReceipt && + conversationObject?.lastMessage?.sender?.uid != + conversationObject?.conversationWith.uid && + !conversationObject?.conversationWith?.guid && + !conversationObject?.lastMessage?.deletedAt && + // !isTyping && + conversationObject?.lastMessage?.category != "call" && + conversationObject?.lastMessage?.type != "DIRECT_CALL" + ) { + let receiptKey = conversationObject?.lastMessage; + if (receiptKey?.error) { + return ( + + ); + } else if (receiptKey?.readAt) { + return ( + + ); + } else if (receiptKey?.deliveredAt) { + return ( + + ); + } else if (receiptKey?.sentAt) { + return ( + + ); + } else { + return ( + + ); + } + } + return null; + }; + + const getThreadIndicator = () => { + if ( + hideThreadIndicator === false && + threadIndicatorText && + conversationObject?.lastMessage?.parentMessageId + ) { + return ( +
+ {threadIndicatorText} +
+ ); + } + + return null; + }; + + const getAvatarWithPresence = () => { + if (conversationInputData?.thumbnail || conversationInputData?.status) { + return ( +
+ {conversationInputData?.thumbnail ? getAvatar() : null} + {conversationInputData?.status ? getPresence() : null} +
+ ); + } else return null; + }; + + /** + * Component template + */ + return ( +
+ {getAvatarWithPresence()} + +
+
+ {getTitle()} + {conversationInputData.timestamp && !isHovering ? getTime() : null} +
+ {getThreadIndicator()} +
+ {conversationInputData?.readreceipt ? getReceiptType() : null} + {conversationInputData?.subtitle && + !typingIndicatorText?.trim().length + ? getSubtitle() + : null} + {showTypingIndicator ? getTypingIndicator() : null} + {conversationInputData.unreadCount && !isHovering + ? getUnreadCount() + : null} +
+
+ + {isHovering ? ( + + ) : null} +
+ ); }; /** * Component default props types */ ConversationListItem.defaultProps = { - style: { - width: "100%", - height: "100%", - background: "transparent", - activeBackground: "gray", - border: "1px solid gray", - borderRadius: "50%", - titleColor: "rgba(20,20,20)", - titleFont: "600 15px Inter, sans-serif", - subtitleColor: "rgba(20, 20, 20, 60%)", - subtitleFont: "400 13px Inter, sans-serif", - typingIndicatorTextColor: "rgba(20, 20, 20, 60%)", - typingIndicatorTextFont: "400 13px Inter, sans-serif", - threadIndicatorTextColor: "rgba(20, 20, 20, 60%)", - threadIndicatorTextFont: "400 13px Inter, sans-serif", - }, + style: { + width: "100%", + height: "100%", + background: "transparent", + activeBackground: "gray", + border: "1px solid gray", + borderRadius: "50%", + titleColor: "rgba(20,20,20)", + titleFont: "600 15px Inter, sans-serif", + subtitleColor: "rgba(20, 20, 20, 60%)", + subtitleFont: "400 13px Inter, sans-serif", + typingIndicatorTextColor: "rgba(20, 20, 20, 60%)", + typingIndicatorTextFont: "400 13px Inter, sans-serif", + threadIndicatorTextColor: "rgba(20, 20, 20, 60%)", + threadIndicatorTextFont: "400 13px Inter, sans-serif", + }, }; /** * Component default props types */ ConversationListItem.propTypes = { - style: PropTypes.object, - conversationInputData: PropTypes.object, - showTypingIndicator: PropTypes.bool, - typingIndicatorText: PropTypes.string, - hideThreadIndicator: PropTypes.bool, - hideGroupActions: PropTypes.bool, - hideDeletedMessages: PropTypes.bool, - threadIndicatorText: PropTypes.string, - isActive: PropTypes.bool, - conversationOptions: PropTypes.array, - conversationObject: PropTypes.object, - avatarConfiguration: PropTypes.object, - statusIndicatorConfiguration: PropTypes.object, - badgeCountConfiguration: PropTypes.object, - messageReceiptConfiguration: PropTypes.object, - dateConfiguration: PropTypes.object, - loggedInUser: PropTypes.object, + style: PropTypes.object, + conversationInputData: PropTypes.object, + showTypingIndicator: PropTypes.bool, + typingIndicatorText: PropTypes.string, + hideThreadIndicator: PropTypes.bool, + hideGroupActions: PropTypes.bool, + hideDeletedMessages: PropTypes.bool, + threadIndicatorText: PropTypes.string, + isActive: PropTypes.bool, + conversationOptions: PropTypes.array, + conversationObject: PropTypes.object, + avatarConfiguration: PropTypes.object, + statusIndicatorConfiguration: PropTypes.object, + badgeCountConfiguration: PropTypes.object, + messageReceiptConfiguration: PropTypes.object, + dateConfiguration: PropTypes.object, + loggedInUser: PropTypes.object, }; export const CometChatConversationListItem = React.memo(ConversationListItem); diff --git a/src/components/Shared/SDKDerivedComponents/CometChatConversationListItem/style.js b/src/components/Shared/SDKDerivedComponents/CometChatConversationListItem/style.js index afd47d2e..18bceabe 100644 --- a/src/components/Shared/SDKDerivedComponents/CometChatConversationListItem/style.js +++ b/src/components/Shared/SDKDerivedComponents/CometChatConversationListItem/style.js @@ -1,4 +1,4 @@ -import { CometChatLocalize } from "../.."; +import { CometChatLocalize, fontHelper, MenuListStyle } from "../.."; export const listItemStyle = (style, theme, isActive) => { return { @@ -111,12 +111,24 @@ export const subMenuStyles = (style, theme) => { : { right: "0" }; return { + ...new MenuListStyle({ + width: "auto", + height: style?.height, + background: "", + border: "", + borderRadius: "none", + activeBackground: "none", + + textFont: fontHelper(theme.typography.subtitle1), + textColor: theme.palette.accent600[theme.palette.mode], + iconTint: theme?.palette?.getAccent(), + moreIconTint: theme?.palette?.getAccent50(), + iconBorder: "", + iconBackground: "", + iconBorderRadius: "", + }), position: "absolute", - width: "auto", - height: style?.height, padding: "0px 16px", - moreIconTint: theme?.palette?.getAccent50(), - iconTint: theme?.palette?.getAccent(), top: 0, ...leftRightPosition, }; diff --git a/src/components/Shared/SDKDerivedComponents/CometChatDataItem/DataItemConfiguration.js b/src/components/Shared/SDKDerivedComponents/CometChatDataItem/DataItemConfiguration.js index 7ddd3800..88e54794 100644 --- a/src/components/Shared/SDKDerivedComponents/CometChatDataItem/DataItemConfiguration.js +++ b/src/components/Shared/SDKDerivedComponents/CometChatDataItem/DataItemConfiguration.js @@ -1,7 +1,7 @@ import { AvatarConfiguration, StatusIndicatorConfiguration, - DataItemStyles, + DataItemStyle, InputData, } from "../../../Shared"; @@ -14,12 +14,12 @@ import { class DataItemConfiguration { constructor({ inputData = new InputData({}), - style = new DataItemStyles({}), + style = new DataItemStyle({}), avatarConfiguration = new AvatarConfiguration({}), statusIndicatorConfiguration = new StatusIndicatorConfiguration({}), }) { this.inputData = new InputData(inputData ?? {}); - this.style = new DataItemStyles(style ?? {}); + this.style = new DataItemStyle(style ?? {}); this.avatarConfiguration = new AvatarConfiguration( avatarConfiguration ?? {} ); diff --git a/src/components/Shared/SDKDerivedComponents/CometChatDataItem/DataItemStyle.js b/src/components/Shared/SDKDerivedComponents/CometChatDataItem/DataItemStyle.js new file mode 100644 index 00000000..8a1efd71 --- /dev/null +++ b/src/components/Shared/SDKDerivedComponents/CometChatDataItem/DataItemStyle.js @@ -0,0 +1,39 @@ +import { BaseStyles } from "../.."; +/** + * @class DataItemStyle + * @param {String} titleFont + * @param {String} titleColor + * @param {String} outerView + * @param {String} outerViewSpacing + */ + +class DataItemStyle extends BaseStyles { + constructor({ + titleColor = "", + titleFont = "", + subTitleColor = "", + subTitleFont = "", + + width = "100%", + height = "100%", + background, + activeBackground, + border = "", + borderRadius = "8px", + }) { + super({ + width, + height, + background, + activeBackground, + border, + borderRadius, + }); + + this.titleColor = titleColor; + this.titleFont = titleFont; + this.subTitleColor = subTitleColor; + this.subTitleFont = subTitleFont; + } +} +export { DataItemStyle }; diff --git a/src/components/Shared/SDKDerivedComponents/CometChatDataItem/DataItemStyles.js b/src/components/Shared/SDKDerivedComponents/CometChatDataItem/DataItemStyles.js deleted file mode 100644 index cba9aee8..00000000 --- a/src/components/Shared/SDKDerivedComponents/CometChatDataItem/DataItemStyles.js +++ /dev/null @@ -1,41 +0,0 @@ -import { BaseStyles } from "../.."; -/** - * @class DataItemStyles - * @param {String} titleFont - * @param {String} titleColor - * @param {String} outerView - * @param {String} outerViewSpacing - */ - -class DataItemStyles extends BaseStyles { - - constructor({ - titleColor = "", - titleFont = "", - subTitleColor = "", - subTitleFont = "", - - - width = "100%", - height = "100%", - background, - activeBackground, - border = "", - borderRadius = "8px" - }) { - super({ - width, - height, - background, - activeBackground, - border, - borderRadius - }); - - this.titleColor = titleColor; - this.titleFont = titleFont; - this.subTitleColor = subTitleColor; - this.subTitleFont = subTitleFont; - } -} -export { DataItemStyles }; \ No newline at end of file diff --git a/src/components/Shared/SDKDerivedComponents/CometChatDataItem/index.js b/src/components/Shared/SDKDerivedComponents/CometChatDataItem/index.js index 89cf4d29..477cb2d2 100644 --- a/src/components/Shared/SDKDerivedComponents/CometChatDataItem/index.js +++ b/src/components/Shared/SDKDerivedComponents/CometChatDataItem/index.js @@ -8,7 +8,7 @@ import { AvatarConfiguration, StatusIndicatorConfiguration, DataItemStyles, - AvatarStyles, + AvatarStyle, StatusIndicatorStyles, CometChatTheme, fontHelper, @@ -75,7 +75,7 @@ const CometChatDataItem = (props) => { const outerViewWidth = _avatarConfiguration?.style?.outerViewWidth; const outerView = `${outerViewWidth} solid ${_theme?.palette?.getPrimary()}`; const borderWidth = _avatarConfiguration?.style?.borderWidth; - let avatarStyle = new AvatarStyles({ + let avatarStyle = new AvatarStyle({ width: _avatarConfiguration?.style?.width, height: _avatarConfiguration?.style?.height, outerViewSpacing: _avatarConfiguration?.style?.outerViewSpacing, diff --git a/src/components/Shared/SDKDerivedComponents/index.js b/src/components/Shared/SDKDerivedComponents/index.js index 2badc1b4..d52c9faa 100644 --- a/src/components/Shared/SDKDerivedComponents/index.js +++ b/src/components/Shared/SDKDerivedComponents/index.js @@ -6,13 +6,18 @@ import { CometChatDataItem } from "./CometChatDataItem"; /** * Styles */ -import { ConversationListItemStyles } from "./CometChatConversationListItem/ConversationListItemStyles"; +import { ConversationListItemStyle } from "./CometChatConversationListItem/ConversationListItemStyle"; + +/** + * configurations + */ +import { ConversationListItemConfiguration } from "./CometChatConversationListItem/ConversationListItemConfiguration"; export { - CometChatConversationListItem, - CometChatGroupListItem, - CometChatUserListItem, - CometChatDataItem, - - ConversationListItemStyles -} + CometChatConversationListItem, + CometChatGroupListItem, + CometChatUserListItem, + CometChatDataItem, + ConversationListItemStyle, + ConversationListItemConfiguration, +}; diff --git a/src/components/Shared/SecondaryComponents/CometChatAvatar/AvatarConfiguration.js b/src/components/Shared/SecondaryComponents/CometChatAvatar/AvatarConfiguration.js index 3968cc36..757412e9 100644 --- a/src/components/Shared/SecondaryComponents/CometChatAvatar/AvatarConfiguration.js +++ b/src/components/Shared/SecondaryComponents/CometChatAvatar/AvatarConfiguration.js @@ -1,4 +1,4 @@ -import { AvatarStyles } from "../../../Shared"; +import { AvatarStyle } from "../../../Shared"; /** * @class AvatarConfiguration @@ -7,15 +7,11 @@ import { AvatarStyles } from "../../../Shared"; * @param {String} name */ class AvatarConfiguration { - constructor({ - style = new AvatarStyles({}), - image = "", - name = "", - }) { - this.style = new AvatarStyles(style ?? {}); - this.image = image; - this.name = name; - } + constructor({ style = new AvatarStyle({}), image = "", name = "" }) { + this.style = new AvatarStyle(style ?? {}); + this.image = image; + this.name = name; + } } -export { AvatarConfiguration }; \ No newline at end of file +export { AvatarConfiguration }; diff --git a/src/components/Shared/SecondaryComponents/CometChatAvatar/AvatarStyle.js b/src/components/Shared/SecondaryComponents/CometChatAvatar/AvatarStyle.js new file mode 100644 index 00000000..97a2f82b --- /dev/null +++ b/src/components/Shared/SecondaryComponents/CometChatAvatar/AvatarStyle.js @@ -0,0 +1,43 @@ +import { BaseStyles } from "../.."; +/** + * @class AvatarStyle + * @param {String} textFont + * @param {String} textColor + * @param {String} outerView + * @param {String} outerViewSpacing + */ + +class AvatarStyle extends BaseStyles { + constructor({ + textColor = "", + textFont = "", + outerView = "", + outerViewSpacing = "0px", + backgroundColor = "", + backgroundSize = "cover", + + width = "36px", + height = "36px", + background, + activeBackground, + border = "", + borderRadius = "50%", + }) { + super({ + width, + height, + background, + activeBackground, + border, + borderRadius, + }); + + this.textColor = textColor; + this.textFont = textFont; + this.outerView = outerView; + this.outerViewSpacing = outerViewSpacing; + this.backgroundColor = backgroundColor; + this.backgroundSize = backgroundSize; + } +} +export { AvatarStyle }; diff --git a/src/components/Shared/SecondaryComponents/CometChatAvatar/AvatarStyles.js b/src/components/Shared/SecondaryComponents/CometChatAvatar/AvatarStyles.js deleted file mode 100644 index d23cf628..00000000 --- a/src/components/Shared/SecondaryComponents/CometChatAvatar/AvatarStyles.js +++ /dev/null @@ -1,44 +0,0 @@ -import { BaseStyles } from "../../../Shared"; -/** - * @class AvatarStyles - * @param {String} textFont - * @param {String} textColor - * @param {String} outerView - * @param {String} outerViewSpacing - */ - -class AvatarStyles extends BaseStyles { - - constructor({ - textColor = "", - textFont = "", - outerView = "", - outerViewSpacing = "0px", - backgroundColor = "", - backgroundSize = "cover", - - width = "36px", - height = "36px", - background, - activeBackground, - border = "", - borderRadius = "50%" - }) { - super({ - width, - height, - background, - activeBackground, - border, - borderRadius - }); - - this.textColor = textColor; - this.textFont = textFont; - this.outerView = outerView; - this.outerViewSpacing = outerViewSpacing; - this.backgroundColor = backgroundColor; - this.backgroundSize = backgroundSize; - } -} -export { AvatarStyles }; \ No newline at end of file diff --git a/src/components/Shared/SecondaryComponents/CometChatAvatar/index.js b/src/components/Shared/SecondaryComponents/CometChatAvatar/index.js index e477e0cb..43efdc54 100644 --- a/src/components/Shared/SecondaryComponents/CometChatAvatar/index.js +++ b/src/components/Shared/SecondaryComponents/CometChatAvatar/index.js @@ -1,18 +1,13 @@ import React from "react"; import PropTypes from "prop-types"; -import { AvatarStyles } from "../../../Shared/"; +import { AvatarStyle } from "../../../Shared/"; import * as styles from "./style"; import srcIcon from "./resources/default.jpg"; const CometChatAvatar = (props) => { + const { name, image, style } = props; - const { - name, - image, - style - } = props; - - const _style = new AvatarStyles(style); + const _style = new AvatarStyle(style); /** * Component template scoping @@ -23,25 +18,23 @@ const CometChatAvatar = (props) => {

{name.length >= 2 ? name.substring(0, 2).toUpperCase() : name}

- ) + ); } else { - let imageSource + let imageSource; if (image) { - imageSource = image - } else imageSource = srcIcon + imageSource = image; + } else imageSource = srcIcon; - return + return ; } - } + }; /** * Component template */ return (
- - {getImageView()} - + {getImageView()}
); }; @@ -62,8 +55,8 @@ CometChatAvatar.defaultProps = { width: "36px", height: "36px", border: "none", - borderRadius: "50%" - } + borderRadius: "50%", + }, }; /** diff --git a/src/components/Shared/SecondaryComponents/CometChatBadgeCount/BadgeCountConfiguration.js b/src/components/Shared/SecondaryComponents/CometChatBadgeCount/BadgeCountConfiguration.js index 2d9fba1b..f38f8f08 100644 --- a/src/components/Shared/SecondaryComponents/CometChatBadgeCount/BadgeCountConfiguration.js +++ b/src/components/Shared/SecondaryComponents/CometChatBadgeCount/BadgeCountConfiguration.js @@ -1,4 +1,4 @@ -import { BadgeCountStyles } from "../../../Shared"; +import { BadgeCountStyle } from "../../../Shared"; /** * @class BadgeCountConfiguration @@ -6,13 +6,10 @@ import { BadgeCountStyles } from "../../../Shared"; * @param {Number} count */ class BadgeCountConfiguration { - constructor({ - style = new BadgeCountStyles({}), - count = 0, - }) { - this.style = new BadgeCountStyles(style ?? {}); - this.count = count; - } + constructor({ style = new BadgeCountStyle({}), count = 0 }) { + this.style = new BadgeCountStyle(style ?? {}); + this.count = count; + } } -export { BadgeCountConfiguration }; \ No newline at end of file +export { BadgeCountConfiguration }; diff --git a/src/components/Shared/SecondaryComponents/CometChatBadgeCount/BadgeCountStyle.js b/src/components/Shared/SecondaryComponents/CometChatBadgeCount/BadgeCountStyle.js new file mode 100644 index 00000000..eee5b5f1 --- /dev/null +++ b/src/components/Shared/SecondaryComponents/CometChatBadgeCount/BadgeCountStyle.js @@ -0,0 +1,32 @@ +import { BaseStyles } from "../.."; +/** + * @class BadgeCountStyle + * @param {String} textFont + * @param {String} textColor + */ + +class BadgeCountStyle extends BaseStyles { + constructor({ + textFont = "", + textColor = "", + + width = "fit-content", + height = "20px", + background = "", + activeBackground, + border = "", + borderRadius = "11px", + }) { + super({ + width, + height, + background, + activeBackground, + border, + borderRadius, + }); + this.textColor = textColor; + this.textFont = textFont; + } +} +export { BadgeCountStyle }; diff --git a/src/components/Shared/SecondaryComponents/CometChatBadgeCount/BadgeCountStyles.js b/src/components/Shared/SecondaryComponents/CometChatBadgeCount/BadgeCountStyles.js deleted file mode 100644 index a55c5dc4..00000000 --- a/src/components/Shared/SecondaryComponents/CometChatBadgeCount/BadgeCountStyles.js +++ /dev/null @@ -1,33 +0,0 @@ -import { BaseStyles } from "../../../Shared"; -/** - * @class BadgeCountStyles - * @param {String} textFont - * @param {String} textColor - */ - -class BadgeCountStyles extends BaseStyles { - - constructor({ - textFont = "", - textColor = "", - - width = "fit-content", - height = "20px", - background = "", - activeBackground, - border = "", - borderRadius = "11px" - }) { - super({ - width, - height, - background, - activeBackground, - border, - borderRadius - }); - this.textColor = textColor; - this.textFont = textFont; - } -} -export { BadgeCountStyles }; \ No newline at end of file diff --git a/src/components/Shared/SecondaryComponents/CometChatDate/DateConfiguration.js b/src/components/Shared/SecondaryComponents/CometChatDate/DateConfiguration.js index da18545a..7857227a 100644 --- a/src/components/Shared/SecondaryComponents/CometChatDate/DateConfiguration.js +++ b/src/components/Shared/SecondaryComponents/CometChatDate/DateConfiguration.js @@ -1,4 +1,4 @@ -import { DateStyles } from "../../../Shared"; +import { DateStyle } from "../../../Shared"; /** * @class DateConfiguration @@ -7,15 +7,15 @@ import { DateStyles } from "../../../Shared"; * @param {String} customPattern */ class DateConfiguration { - constructor({ - style = new DateStyles({}), - pattern = "", - customPattern = null - }) { - this.style = new DateStyles(style ?? {}); - this.pattern = pattern; - this.customPattern = customPattern; - } + constructor({ + style = new DateStyle({}), + pattern = "", + customPattern = null, + }) { + this.style = new DateStyle(style ?? {}); + this.pattern = pattern; + this.customPattern = customPattern; + } } -export { DateConfiguration }; \ No newline at end of file +export { DateConfiguration }; diff --git a/src/components/Shared/SecondaryComponents/CometChatDate/DateStyle.js b/src/components/Shared/SecondaryComponents/CometChatDate/DateStyle.js new file mode 100644 index 00000000..a6b11e62 --- /dev/null +++ b/src/components/Shared/SecondaryComponents/CometChatDate/DateStyle.js @@ -0,0 +1,32 @@ +import { BaseStyles } from "../.."; +/** + * @class DateStyle + * @param {String} textFont + * @param {String} textColor + */ + +class DateStyle extends BaseStyles { + constructor({ + textColor = "", + textFont = "", + + width, + height, + background, + activeBackground, + border, + borderRadius, + }) { + super({ + width, + height, + background, + activeBackground, + border, + borderRadius, + }); + this.textColor = textColor; + this.textFont = textFont; + } +} +export { DateStyle }; diff --git a/src/components/Shared/SecondaryComponents/CometChatDate/DateStyles.js b/src/components/Shared/SecondaryComponents/CometChatDate/DateStyles.js deleted file mode 100644 index 450335dd..00000000 --- a/src/components/Shared/SecondaryComponents/CometChatDate/DateStyles.js +++ /dev/null @@ -1,33 +0,0 @@ -import { BaseStyles } from "../../../Shared"; -/** - * @class DateStyles - * @param {String} textFont - * @param {String} textColor - */ - -class DateStyles extends BaseStyles { - - constructor({ - textColor = "", - textFont = "", - - width, - height, - background, - activeBackground, - border, - borderRadius - }) { - super({ - width, - height, - background, - activeBackground, - border, - borderRadius - }); - this.textColor = textColor; - this.textFont = textFont; - } -} -export { DateStyles }; \ No newline at end of file diff --git a/src/components/Shared/SecondaryComponents/CometChatMessageReceipt/MessageReceiptConfiguration.js b/src/components/Shared/SecondaryComponents/CometChatMessageReceipt/MessageReceiptConfiguration.js index 3ef5570f..25f29c4c 100644 --- a/src/components/Shared/SecondaryComponents/CometChatMessageReceipt/MessageReceiptConfiguration.js +++ b/src/components/Shared/SecondaryComponents/CometChatMessageReceipt/MessageReceiptConfiguration.js @@ -1,4 +1,4 @@ -import { MessageReceiptStyles } from "../../../Shared"; +import { MessageReceiptStyle } from "../../../Shared"; import waitIcon from "./resources/wait.svg"; import sentIcon from "./resources/message-sent.svg"; import deliveredIcon from "./resources/message-delivered.svg"; @@ -15,21 +15,21 @@ import errorIcon from "./resources/warning-small.svg"; * @param {String} messageErrorIcon */ class MessageReceiptConfiguration { - constructor({ - style = new MessageReceiptStyles({}), - messageWaitIcon = waitIcon, - messageSentIcon = sentIcon, - messageDeliveredIcon = deliveredIcon, - messageReadIcon = readIcon, - messageErrorIcon = errorIcon, - }) { - this.style = new MessageReceiptStyles(style ?? {}); - this.messageWaitIcon = messageWaitIcon; - this.messageSentIcon = messageSentIcon; - this.messageDeliveredIcon = messageDeliveredIcon; - this.messageReadIcon = messageReadIcon; - this.messageErrorIcon = messageErrorIcon; - } + constructor({ + style = new MessageReceiptStyle({}), + messageWaitIcon = waitIcon, + messageSentIcon = sentIcon, + messageDeliveredIcon = deliveredIcon, + messageReadIcon = readIcon, + messageErrorIcon = errorIcon, + }) { + this.style = new MessageReceiptStyle(style ?? {}); + this.messageWaitIcon = messageWaitIcon; + this.messageSentIcon = messageSentIcon; + this.messageDeliveredIcon = messageDeliveredIcon; + this.messageReadIcon = messageReadIcon; + this.messageErrorIcon = messageErrorIcon; + } } export { MessageReceiptConfiguration }; diff --git a/src/components/Shared/SecondaryComponents/CometChatMessageReceipt/MessageReceiptStyle.js b/src/components/Shared/SecondaryComponents/CometChatMessageReceipt/MessageReceiptStyle.js new file mode 100644 index 00000000..cf48475c --- /dev/null +++ b/src/components/Shared/SecondaryComponents/CometChatMessageReceipt/MessageReceiptStyle.js @@ -0,0 +1,25 @@ +import { BaseStyles } from "../.."; +/** + * @class MessageReceiptStyle + */ + +class MessageReceiptStyle extends BaseStyles { + constructor({ + width = "24px", + height = "24px", + background = "", + border = "", + borderRadius = "", + activeBackground = "", + }) { + super({ + width, + height, + background, + activeBackground, + border, + borderRadius, + }); + } +} +export { MessageReceiptStyle }; diff --git a/src/components/Shared/SecondaryComponents/CometChatMessageReceipt/MessageReceiptStyles.js b/src/components/Shared/SecondaryComponents/CometChatMessageReceipt/MessageReceiptStyles.js deleted file mode 100644 index 986f8c6d..00000000 --- a/src/components/Shared/SecondaryComponents/CometChatMessageReceipt/MessageReceiptStyles.js +++ /dev/null @@ -1,26 +0,0 @@ -import { BaseStyles } from "../../../Shared"; -/** - * @class MessageReceiptStyles - */ - -class MessageReceiptStyles extends BaseStyles { - - constructor({ - width, - height, - background, - activeBackground, - border, - borderRadius - }) { - super({ - width, - height, - background, - activeBackground, - border, - borderRadius - }); - } -} -export { MessageReceiptStyles }; \ No newline at end of file diff --git a/src/components/Shared/SecondaryComponents/CometChatMessageReceipt/hooks.js b/src/components/Shared/SecondaryComponents/CometChatMessageReceipt/hooks.js index c74b48d7..39b88fe3 100644 --- a/src/components/Shared/SecondaryComponents/CometChatMessageReceipt/hooks.js +++ b/src/components/Shared/SecondaryComponents/CometChatMessageReceipt/hooks.js @@ -6,11 +6,13 @@ export const Hooks = (props, setIcon) => { if (props.messageObject.error) { setIcon(props.messageErrorIcon); } else { - if (props.messageObject.readAt) { + + if (props.messageObject?.readAt) { setIcon(props.messageReadIcon); - } else if (props.messageObject.deliveredAt) { + } else if (props.messageObject?.deliveredAt) { + setIcon(props.messageDeliveredIcon); - } else if (props.messageObject.sentAt) { + } else if (props.messageObject?.sentAt) { setIcon(props.messageSentIcon); } else { setIcon(props.messageWaitIcon); diff --git a/src/components/Shared/UtilityComponents/CometChatActionSheet/ActionSheetConfiguration.js b/src/components/Shared/UtilityComponents/CometChatActionSheet/ActionSheetConfiguration.js deleted file mode 100644 index 4a7e133b..00000000 --- a/src/components/Shared/UtilityComponents/CometChatActionSheet/ActionSheetConfiguration.js +++ /dev/null @@ -1,10 +0,0 @@ -/** - * @class ActionSheetConfiguration - * @description ActionSheetConfiguration class is used for defining the ActionSheet templates. - - */ -class ActionSheetConfiguration { - constructor() {} -} - -export { ActionSheetConfiguration }; diff --git a/src/components/Shared/UtilityComponents/CometChatActionSheet/ActionSheetStyles.js b/src/components/Shared/UtilityComponents/CometChatActionSheet/ActionSheetStyle.js similarity index 72% rename from src/components/Shared/UtilityComponents/CometChatActionSheet/ActionSheetStyles.js rename to src/components/Shared/UtilityComponents/CometChatActionSheet/ActionSheetStyle.js index 601b0b2d..4162fb8d 100644 --- a/src/components/Shared/UtilityComponents/CometChatActionSheet/ActionSheetStyles.js +++ b/src/components/Shared/UtilityComponents/CometChatActionSheet/ActionSheetStyle.js @@ -1,12 +1,17 @@ import { BaseStyles } from "../.."; /** - * @class ActionSheetStyles + * @class ActionSheetStyle + * @param {String} width + * @param {String} height + * @param {String} border + * @param {String} borderRadius + * @param {String} background * @param {String} layoutModeIconTint * @param {String} titleFont * @param {String} titleColor */ -class ActionSheetStyles extends BaseStyles { +class ActionSheetStyle extends BaseStyles { constructor({ layoutModeIconTint = "", titleFont = "", @@ -33,4 +38,4 @@ class ActionSheetStyles extends BaseStyles { this.titleColor = titleColor; } } -export { ActionSheetStyles }; +export { ActionSheetStyle }; diff --git a/src/components/Shared/UtilityComponents/CometChatActionSheet/index.js b/src/components/Shared/UtilityComponents/CometChatActionSheet/index.js index 11343145..4159ae7c 100644 --- a/src/components/Shared/UtilityComponents/CometChatActionSheet/index.js +++ b/src/components/Shared/UtilityComponents/CometChatActionSheet/index.js @@ -62,7 +62,7 @@ const CometChatActionSheet = (props) => {
{toggleLayoutButton} -
+
{renderItems}
diff --git a/src/components/Shared/UtilityComponents/CometChatActionSheet/style.js b/src/components/Shared/UtilityComponents/CometChatActionSheet/style.js index 4b7ce894..18436224 100644 --- a/src/components/Shared/UtilityComponents/CometChatActionSheet/style.js +++ b/src/components/Shared/UtilityComponents/CometChatActionSheet/style.js @@ -7,18 +7,18 @@ export const actionSheetWrapperStyle = (props) => { borderRadius: props.style.borderRadius, border: props.style.border, width: props.style.width, - height: props.style.height, + height: "auto", transform: "scale(1)", transformOrigin: "left bottom", overflowY: "auto", overflowX: "hidden", display: "flex", - padding: "12px", - flexDirection: "row", - justifyContent: "center", - alignItems: "center", - flexWrap: "wrap", + padding: "8px", + flexDirection: "column", + justifyContent: "flex-start", + alignItems: "flex-start", ...props.style, + boxSizing: "border-box", }; }; @@ -50,15 +50,7 @@ export const actionSheetLayoutIconStyle = (props, mode) => { }; }; -export const sheetItemListStyle = (mode) => { - let flexDirection = { flexDirection: "row" }, - flexWrap = { flexWrap: "wrap" }; - - if (mode === layoutType.list) { - flexDirection = { flexDirection: "column" }; - flexWrap = { flexWrap: "nowrap" }; - } - +export const sheetItemListStyle = (props) => { return { width: "100%", display: "flex", @@ -66,8 +58,9 @@ export const sheetItemListStyle = (mode) => { alignItems: "center", overflowY: "auto", overflowX: "hidden", - ...flexDirection, - ...flexWrap, + flexDirection: "row", + flexWrap: "wrap", + boxSizing: "border-box", }; }; @@ -85,6 +78,7 @@ export const listItemStyle = (props, mode, index, theme) => { cursor: "pointer", padding: "8px 16px", overflow: "hidden", + boxSizing: "border-box", }; if (mode === layoutType.grid) { @@ -119,6 +113,7 @@ export const listItemStyle = (props, mode, index, theme) => { ...sheetItemStyle, ...borderRadius, ...borderBottom, + margin: "0 5px", }; } diff --git a/src/components/Shared/UtilityComponents/CometChatBackdrop/style.js b/src/components/Shared/UtilityComponents/CometChatBackdrop/style.js index 413cba29..0ef8cace 100644 --- a/src/components/Shared/UtilityComponents/CometChatBackdrop/style.js +++ b/src/components/Shared/UtilityComponents/CometChatBackdrop/style.js @@ -1,25 +1,24 @@ export const backdropStyle = (props) => { - return { - zIndex: "3", - background: props.background, - position: "fixed", - width: "100%", - height: "100%", - top: "0", - left: "0", - transition: "background .3s ease-out 0", - ...props.style, - }; + return { + zIndex: "3", + background: props.background, + position: "fixed", + width: "100%", + height: "100%", + top: "0", + left: "0", + transition: "background .3s ease-out 0", + ...props.style, }; - - export const dialogStyle = () => { - return { - opacity: "1", - width: "100%", - height: "100%", - display: "flex", - justifyContent: "center", - alignItems: "center", - }; +}; + +export const dialogStyle = () => { + return { + opacity: "1", + width: "100%", + height: "100%", + display: "flex", + justifyContent: "center", + alignItems: "center", }; - \ No newline at end of file +}; diff --git a/src/components/Shared/UtilityComponents/CometChatConfirmDialog/ConfirmDialogStyle.js b/src/components/Shared/UtilityComponents/CometChatConfirmDialog/ConfirmDialogStyle.js new file mode 100644 index 00000000..0ce10774 --- /dev/null +++ b/src/components/Shared/UtilityComponents/CometChatConfirmDialog/ConfirmDialogStyle.js @@ -0,0 +1,60 @@ +import { BaseStyles } from "../.."; +/** + * @class ConfirmDialogStyle + * @param {String} width + * @param {String} height + * @param {String} border + * @param {String} borderRadius + * @param {String} background + * @param {String} subTitleColor + * @param {String} subTitleFont + * @param {String} cancelButtonBackground + * @param {String} confirmButtonTextFont + * @param {String} confirmButtonTextColor + * @param {String} cancelButtonTextColor + * @param {String} cancelButtonTextFont + * @param {String} confirmButtonBackground + * @param {String} titleFont + * @param {String} titleColor + */ + +class ConfirmDialogStyle extends BaseStyles { + constructor({ + width = "360px", + height = "292px", + background = "", + border = "", + borderRadius = "12px", + activeBackground = "", + subTitleColor = "", + subTitleFont = "", + cancelButtonBackground = "", + confirmButtonTextFont = "", + confirmButtonTextColor = "", + cancelButtonTextColor = "", + cancelButtonTextFont = "", + confirmButtonBackground = "", + titleFont = "", + titleColor = "", + }) { + super({ + width, + height, + background, + border, + borderRadius, + activeBackground, + }); + this.titleFont = titleFont; + this.titleColor = titleColor; + this.subTitleFont = subTitleFont; + this.subTitleColor = subTitleColor; + this.cancelButtonTextFont = cancelButtonTextFont; + this.confirmButtonTextFont = confirmButtonTextFont; + this.cancelButtonTextColor = cancelButtonTextColor; + this.confirmButtonTextColor = confirmButtonTextColor; + this.cancelButtonBackground = cancelButtonBackground; + this.confirmButtonBackground = confirmButtonBackground; + } +} +export { ConfirmDialogStyle }; diff --git a/src/components/Shared/UtilityComponents/CometChatConfirmDialog/index.js b/src/components/Shared/UtilityComponents/CometChatConfirmDialog/index.js index 67fb029a..008b010f 100644 --- a/src/components/Shared/UtilityComponents/CometChatConfirmDialog/index.js +++ b/src/components/Shared/UtilityComponents/CometChatConfirmDialog/index.js @@ -96,17 +96,26 @@ CometChatConfirmDialog.defaultProps = { messageText: "Are you sure?", confirmButtonText: "Delete", cancelButtonText: "Cancel", - onConfirm: () => { }, - onCancel: () => { }, + onConfirm: () => {}, + onCancel: () => {}, style: { - confirmButtonTextFont: "", - confirmButtonTextColor: "", - cancelButtonTextFont: "", - cancelButtonTextColor: "", - messageTextFont: "", - messageTextColor: "", + confirmTextFont: "", + confirmTextColor: "", + cancelTextColor: "", + cancelTextFont: "", + subTitleColor: "", + subTitleFont: "", + titleFont: "", + titleColor: "", cancelBackground: "", confirmBackground: "", + + width: "360px", + height: "292px", + background: "", + border: "", + borderRadius: "12px", + activeBackground: "", }, }; export { CometChatConfirmDialog }; diff --git a/src/components/Shared/UtilityComponents/CometChatConfirmDialog/style.js b/src/components/Shared/UtilityComponents/CometChatConfirmDialog/style.js index 9eef0e1b..18029dae 100644 --- a/src/components/Shared/UtilityComponents/CometChatConfirmDialog/style.js +++ b/src/components/Shared/UtilityComponents/CometChatConfirmDialog/style.js @@ -20,8 +20,8 @@ export const dialogLoadingStyle = (loadingIcon) => { export const dialogTitleStyle = (props) => { return { width: props?.style?.width, - font: props?.style?.titleTextFont, - color: props?.style?.titleTextColor, + font: props?.style?.titleFont, + color: props?.style?.titleColor, textAlign: "center", padding: "10px", boxSizing: "border-box", @@ -29,13 +29,13 @@ export const dialogTitleStyle = (props) => { }; export const dialogWrapperStyle = (props) => { const display = props?.isOpen ? { display: "block" } : { display: "none" }; - return { background: props?.style?.background, + borderRadius: props.style.borderRadius, fontSize: "13px", zIndex: "4", ...display, - ...props?.styles, + ...props?.style, }; }; @@ -51,6 +51,7 @@ export const dialogFormStyle = (props, state) => { justifyContent: "center", alignItems: "center", ...display, + margin: "10px", }; }; @@ -68,9 +69,9 @@ export const dialogErrorStyle = (props, state) => { export const dialogMessageStyle = (props) => { return { textAlign: "center", - margin: "10px 35px", - font: "500 11px Inter,sans-serif", - color: "rgba(20,20,20, 0.6)", + margin: "10px 25px", + font: props.style.subTitleFont, + color: props.style.subTitleColor, boxSizing: "border-box", wordSpacing: "1px", }; @@ -81,7 +82,7 @@ export const dialogButtonStyle = (props) => { width: props?.style?.width, justifyContent: "center", alignItems: "center", - margin: "15px 0 0 0", + margin: "15px 0", textAlign: "center", display: "flex", flexDirection: "column", @@ -97,7 +98,7 @@ export const buttonConfirmStyle = (props) => { borderRadius: props?.style?.borderRadius, font: props?.style?.confirmButtonTextFont, border: props?.style?.border, - background: props?.style?.confirmBackground, + background: props?.style?.confirmButtonBackground, color: props?.style?.confirmButtonTextColor, }; }; @@ -111,7 +112,7 @@ export const buttonCancelStyle = (props) => { cursor: "pointer", borderRadius: props?.style?.borderRadius, font: props?.style?.cancelButtonTextFont, - background: props?.style?.cancelBackground, + background: props?.style?.cancelButtonBackground, color: props?.style?.cancelButtonTextColor, }; }; diff --git a/src/components/Shared/UtilityComponents/CometChatDecoratorMessage/DecoratorMessageStyle.js b/src/components/Shared/UtilityComponents/CometChatDecoratorMessage/DecoratorMessageStyle.js new file mode 100644 index 00000000..73cf313c --- /dev/null +++ b/src/components/Shared/UtilityComponents/CometChatDecoratorMessage/DecoratorMessageStyle.js @@ -0,0 +1,32 @@ +import { BaseStyles } from "../.."; +/** + * @class DecoratorMessageStyle + * @param {String} textFont + * @param {String} textColor + */ + +class DecoratorMessageStyle extends BaseStyles { + constructor({ + textColor = "", + textFont = "", + + width = "auto", + height = "auto", + background = "", + border = "none", + borderRadius = "none", + activeBackground = "", + }) { + super({ + width, + height, + background, + activeBackground, + border, + borderRadius, + }); + this.textColor = textColor; + this.textFont = textFont; + } +} +export { DecoratorMessageStyle }; diff --git a/src/components/Shared/UtilityComponents/CometChatDecoratorMessage/DecoratorMessageStyles.js b/src/components/Shared/UtilityComponents/CometChatDecoratorMessage/DecoratorMessageStyles.js deleted file mode 100644 index ee380d3f..00000000 --- a/src/components/Shared/UtilityComponents/CometChatDecoratorMessage/DecoratorMessageStyles.js +++ /dev/null @@ -1,33 +0,0 @@ -import { BaseStyles } from "../../../Shared"; -/** - * @class DecoratorMessageStyles - * @param {String} textFont - * @param {String} textColor - */ - - class DecoratorMessageStyles extends BaseStyles { - - constructor({ - textColor = "", - textFont = "", - - width, - height, - background, - activeBackground, - border, - borderRadius - }) { - super({ - width, - height, - background, - activeBackground, - border, - borderRadius - }); - this.textColor = textColor; - this.textFont = textFont; - } -} -export { DecoratorMessageStyles }; \ No newline at end of file diff --git a/src/components/Shared/UtilityComponents/CometChatListItem/ListItemConfiguration.js b/src/components/Shared/UtilityComponents/CometChatListItem/ListItemConfiguration.js index 3d025e12..5a8ca8c9 100644 --- a/src/components/Shared/UtilityComponents/CometChatListItem/ListItemConfiguration.js +++ b/src/components/Shared/UtilityComponents/CometChatListItem/ListItemConfiguration.js @@ -1,5 +1,5 @@ import uploadFile from "../../../Messages/CometChatMessageComposer/resources/file-upload.svg"; -import { ListItemStyles } from "../../../Shared"; +import { ListItemStyle } from "../../../Shared"; /** * @class ListItemConfiguration @@ -19,14 +19,14 @@ class ListItemConfiguration { tail = null, iconURL = null, onItemClick = null, - style = new ListItemStyles({}) + style = new ListItemStyle({}) ) { this.id = id; this.text = text; this.tail = tail; this.iconURL = iconURL || uploadFile; this.onItemClick = onItemClick; - this.style = new ListItemStyles(style ?? {}); + this.style = new ListItemStyle(style ?? {}); } } diff --git a/src/components/Shared/UtilityComponents/CometChatListItem/ListItemStyle.js b/src/components/Shared/UtilityComponents/CometChatListItem/ListItemStyle.js new file mode 100644 index 00000000..eec65e18 --- /dev/null +++ b/src/components/Shared/UtilityComponents/CometChatListItem/ListItemStyle.js @@ -0,0 +1,43 @@ +import { BaseStyles } from "../.."; +/** + * @class ListItemStyle + * @param {String} width + * @param {String} height + * @param {String} border + * @param {String} borderRadius + * @param {String} background + * @param {String} textFont + * @param {String} textColor + * @param {String} outerView + * @param {String} outerViewSpacing + */ + +class ListItemStyle extends BaseStyles { + constructor({ + textColor = "", + textFont = "", + outerView = "", + outerViewSpacing = "", + + width, + height, + background, + activeBackground, + border, + borderRadius, + }) { + super({ + width, + height, + background, + activeBackground, + border, + borderRadius, + }); + this.textColor = textColor; + this.textFont = textFont; + this.outerView = outerView; + this.outerViewSpacing = outerViewSpacing; + } +} +export { ListItemStyle }; diff --git a/src/components/Shared/UtilityComponents/CometChatListItem/ListItemStyles copy.js b/src/components/Shared/UtilityComponents/CometChatListItem/ListItemStyles copy.js deleted file mode 100644 index f237533a..00000000 --- a/src/components/Shared/UtilityComponents/CometChatListItem/ListItemStyles copy.js +++ /dev/null @@ -1,39 +0,0 @@ -import { BaseStyles } from "../../../Shared" -/** - * @class ListItemStyles - * @param {String} textFont - * @param {String} textColor - * @param {String} outerView - * @param {String} outerViewSpacing - */ - - class ListItemStyles extends BaseStyles { - - constructor({ - textColor = "", - textFont = "", - outerView = "", - outerViewSpacing = "", - - width, - height, - background, - activeBackground, - border, - borderRadius - }) { - super({ - width, - height, - background, - activeBackground, - border, - borderRadius - }); - this.textColor = textColor; - this.textFont = textFont; - this.outerView = outerView; - this.outerViewSpacing = outerViewSpacing; - } -} -export { ListItemStyles }; \ No newline at end of file diff --git a/src/components/Shared/UtilityComponents/CometChatListItem/ListItemStyles.js b/src/components/Shared/UtilityComponents/CometChatListItem/ListItemStyles.js deleted file mode 100644 index f237533a..00000000 --- a/src/components/Shared/UtilityComponents/CometChatListItem/ListItemStyles.js +++ /dev/null @@ -1,39 +0,0 @@ -import { BaseStyles } from "../../../Shared" -/** - * @class ListItemStyles - * @param {String} textFont - * @param {String} textColor - * @param {String} outerView - * @param {String} outerViewSpacing - */ - - class ListItemStyles extends BaseStyles { - - constructor({ - textColor = "", - textFont = "", - outerView = "", - outerViewSpacing = "", - - width, - height, - background, - activeBackground, - border, - borderRadius - }) { - super({ - width, - height, - background, - activeBackground, - border, - borderRadius - }); - this.textColor = textColor; - this.textFont = textFont; - this.outerView = outerView; - this.outerViewSpacing = outerViewSpacing; - } -} -export { ListItemStyles }; \ No newline at end of file diff --git a/src/components/Shared/UtilityComponents/CometChatListItem/index.js b/src/components/Shared/UtilityComponents/CometChatListItem/index.js index 354343e5..0fd8c348 100644 --- a/src/components/Shared/UtilityComponents/CometChatListItem/index.js +++ b/src/components/Shared/UtilityComponents/CometChatListItem/index.js @@ -12,31 +12,39 @@ const CometChatListItem = (props) => { const getIcon = () => { return props.iconURL ? (
- +
) : null; }; const getText = () => { return props.text ? ( -
+
{props.text}
) : null; }; return ( -
- {getIcon()} - {getText()} - {props.tail} -
- ); +
+ {getIcon()} + {getText()} + {props.tail} +
+ ); }; export { CometChatListItem }; @@ -46,6 +54,7 @@ CometChatListItem.defaultProps = { text: "", tail: null, iconURL: "", + hoverText: "", onItemClick: () => {}, style: { width: "", @@ -67,6 +76,7 @@ CometChatListItem.propTypes = { text: PropTypes.string, tail: PropTypes.object, iconURL: PropTypes.string, + hoverText: PropTypes.string, style: PropTypes.object, onItemClick: PropTypes.func, }; diff --git a/src/components/Shared/UtilityComponents/CometChatListItem/style.js b/src/components/Shared/UtilityComponents/CometChatListItem/style.js index 3a1f48cb..9fd41133 100644 --- a/src/components/Shared/UtilityComponents/CometChatListItem/style.js +++ b/src/components/Shared/UtilityComponents/CometChatListItem/style.js @@ -37,6 +37,7 @@ export const listItemIconStyle = (props) => { height: props.style.iconHeight, ...padding, cursor: "pointer", + boxSizing: "border-box", }; }; diff --git a/src/components/Shared/UtilityComponents/CometChatMenuList/MenuListStyle.js b/src/components/Shared/UtilityComponents/CometChatMenuList/MenuListStyle.js new file mode 100644 index 00000000..7aefe691 --- /dev/null +++ b/src/components/Shared/UtilityComponents/CometChatMenuList/MenuListStyle.js @@ -0,0 +1,51 @@ +import { BaseStyles } from "../.."; +/** + * @class MenuListStyle + * @param {String} width + * @param {String} height + * @param {String} border + * @param {String} borderRadius + * @param {String} background + * @param {String} moreIconTint + * @param {String} textFont + * @param {String} textColor + * @param {String} iconBackground + * @param {String} iconTint + * @param {String} iconBorder + * @param {String} iconBorderRadius + */ + +class MenuListStyle extends BaseStyles { + constructor({ + width = "", + height = "", + background = "", + activeBackground = "", + border = "", + borderRadius = "", + textFont = "", + textColor = "", + iconTint = "", + moreIconTint = "", + iconBorder = "", + iconBackground = "", + iconBorderRadius = "", + }) { + super({ + width, + height, + background, + activeBackground, + border, + borderRadius, + }); + this.moreIconTint = moreIconTint; + this.textFont = textFont; + this.textColor = textColor; + this.iconBackground = iconBackground; + this.iconTint = iconTint; + this.iconBorder = iconBorder; + this.iconBorderRadius = iconBorderRadius; + } +} +export { MenuListStyle }; diff --git a/src/components/Shared/UtilityComponents/CometChatMenuList/index.js b/src/components/Shared/UtilityComponents/CometChatMenuList/index.js index 8ac62725..ce2f10be 100644 --- a/src/components/Shared/UtilityComponents/CometChatMenuList/index.js +++ b/src/components/Shared/UtilityComponents/CometChatMenuList/index.js @@ -8,18 +8,15 @@ import { listItemStyle, } from "./style"; -import { CometChatListItem } from "../../../Shared"; +import { CometChatListItem, localize } from "../../../Shared"; const CometChatMenuList = (props) => { const [toggle, setToggle] = React.useState(false); const handleToggle = () => setToggle(!toggle); const callback = (onClickFunc, event) => { - onClickFunc(props.data, event); - }; - const hideTooltip = (event) => event.target.removeAttribute("title"); - const showTooltip = (event) => - event.target.setAttribute("title", event.target.title); + onClickFunc(props.data, event); + }; const getMenuPane = () => { return toggle ? ( @@ -32,10 +29,9 @@ const CometChatMenuList = (props) => { id={ele.id} style={listItemStyle(props)} text={ele.title} + hoverText={ele.title} onClick={callback.bind(this, ele.onClick)} onItemClick={callback.bind(this, ele.onClick)} - onMouseEnter={showTooltip} - onMouseLeave={hideTooltip} /> ))}
@@ -51,11 +47,10 @@ const CometChatMenuList = (props) => { className="list__item" id={ele.id} iconURL={ele.iconURL} + hoverText={ele.title} onClick={callback.bind(this, ele.onClick)} onItemClick={callback.bind(this, ele.onClick)} style={menuActionStyle(props)} - onMouseEnter={showTooltip} - onMouseLeave={hideTooltip} /> ))} {props.list.length > props.mainMenuLimit && ( @@ -65,9 +60,8 @@ const CometChatMenuList = (props) => { style={menuActionStyle(props)} className="list__item" iconURL={moreIcon} + hoverText={localize("MORE")} onItemClick={handleToggle.bind(this)} - onMouseEnter={showTooltip} - onMouseLeave={hideTooltip} /> {getMenuPane()} diff --git a/src/components/Shared/UtilityComponents/CometChatMenuList/style.js b/src/components/Shared/UtilityComponents/CometChatMenuList/style.js index 52e2cbba..569236d1 100644 --- a/src/components/Shared/UtilityComponents/CometChatMenuList/style.js +++ b/src/components/Shared/UtilityComponents/CometChatMenuList/style.js @@ -1,89 +1,85 @@ export const actionWrapperStyle = (props) => { - return { - - listStyleType: "none", - padding: "5px", - margin: "0", - background: props?.style?.background, - borderRadius: "10px", - display: "flex", - ...props.style, - }; + return { + listStyleType: "none", + padding: "5px", + margin: "0", + background: props?.style?.background, + borderRadius: "10px", + display: "flex", + ...props.style, + }; }; export const menuActionStyle = (props) => { - return { - border: "0", - iconHeight: "24px", - iconWidth: "24px", - margin: "5px", - borderRadius: "4px", - alignItems: "center", - display: "flex", - justifyContent: "center", - position: "relative", - cursor: "pointer", - iconTint: props?.style?.iconTint, - iconBackground: props?.style?.iconBackground, - }; + return { + border: "0", + iconHeight: "24px", + iconWidth: "24px", + margin: "5px", + borderRadius: "4px", + alignItems: "center", + display: "flex", + justifyContent: "center", + position: "relative", + cursor: "pointer", + iconTint: props?.style?.iconTint, + iconBackground: props?.style?.iconBackground, + }; }; export const menuWrapperStyle = (props) => { - return { - position: "absolute", - background: "#fff", - top: "20px", - left: "90%", - listStyle: "none", - padding: "1px", - - ...props.style, - }; + return { + position: "absolute", + background: "#fff", + top: "20px", + left: "90%", + listStyle: "none", + padding: "1px", + + ...props.style, + }; }; export const toggleStyle = (props) => { - let position; - if (props.style.left) { - position = { - left: "0px", - }; - } else { - position = { - right: "0px", - }; - } - return { - backgroundColor: props.style.background, - display: "flex", - padding: "5px", - flexDirection: "column", - position: "absolute", - height: "max-content", - width: "max-content", - maxHeight: "192px", - zIndex: "1", - borderRadius: "8px", - border: props.style.border, - top: "38px", - ...position, - overflow: "visible", + let position; + if (props.style.left) { + position = { + left: "0px", + }; + } else { + position = { + right: "0px", + }; + } + return { + backgroundColor: props.style.background, + display: "flex", + padding: "5px", + flexDirection: "column", + position: "absolute", + height: "max-content", + width: "max-content", + maxHeight: "192px", + zIndex: "1", + borderRadius: "8px", + border: props.style.border, + top: "38px", + ...position, + overflow: "visible", marginTop: "2px", - - }; - }; export const listItemStyle = (props) => { - return { - width: "100%", - height: "100%", - iconTint: props?.style?.iconTint, - iconBackground: props?.style?.iconBackground, - borderRadius: "", - textColor: props?.style?.textColor, - border: "0", - background: "transparent", - textFont: props?.style?.textFont, - // WebkitMask: `url(${props?.addReactionIconURL})`, - }; -}; \ No newline at end of file + return { + width: "100%", + height: "100%", + iconTint: props?.style?.iconTint, + iconBackground: props?.style?.iconBackground, + borderRadius: "", + textColor: props?.style?.textColor, + border: "0", + background: "transparent", + textFont: props?.style?.textFont, + // WebkitMask: `url(${props?.addReactionIconURL})`, + }; +}; diff --git a/src/components/Shared/UtilityComponents/CometChatPopover/PopoverStyle.js b/src/components/Shared/UtilityComponents/CometChatPopover/PopoverStyle.js new file mode 100644 index 00000000..db9aafb0 --- /dev/null +++ b/src/components/Shared/UtilityComponents/CometChatPopover/PopoverStyle.js @@ -0,0 +1,31 @@ +import { BaseStyles } from "../../../Shared"; +/** + * @class PopoverStyle + * @param {String} width + * @param {String} height + * @param {String} border + * @param {String} borderRadius + * @param {String} background + * @param {String} boxShadow + */ + +class PopoverStyle extends BaseStyles { + constructor({ + width = "", + height = "", + background = "", + border = "", + borderRadius = "", + boxShadow = "", + }) { + super({ + width, + height, + background, + border, + borderRadius, + }); + this.boxShadow = boxShadow; + } +} +export { PopoverStyle }; diff --git a/src/components/Shared/index.js b/src/components/Shared/index.js index 624dad43..bdafe4d7 100644 --- a/src/components/Shared/index.js +++ b/src/components/Shared/index.js @@ -97,15 +97,15 @@ import { DetailsConfiguration } from "./PrimaryComponents"; /**Styles */ import { BaseStyles } from "./Base/BaseStyles"; -import { AvatarStyles } from "./SecondaryComponents/CometChatAvatar/AvatarStyles"; -import { BadgeCountStyles } from "./SecondaryComponents/CometChatBadgeCount/BadgeCountStyles"; +import { AvatarStyles } from "./SecondaryComponents/CometChatAvatar/AvatarStyle"; +import { BadgeCountStyles } from "./SecondaryComponents/CometChatBadgeCount/BadgeCountStyle"; import { StatusIndicatorStyles } from "./SecondaryComponents/CometChatStatusIndicator/StatusIndicatorStyles"; -import { MessageReceiptStyles } from "./SecondaryComponents/CometChatMessageReceipt/MessageReceiptStyles"; -import { DateStyles } from "./SecondaryComponents/CometChatDate/DateStyles"; -import { DecoratorMessageStyles } from "./UtilityComponents/CometChatDecoratorMessage/DecoratorMessageStyles"; -import { ListItemStyles } from "./UtilityComponents/CometChatListItem/ListItemStyles"; -import { DataItemStyles } from "./SDKDerivedComponents/CometChatDataItem/DataItemStyles"; -import { ActionSheetStyles } from "./UtilityComponents/CometChatActionSheet/ActionSheetStyles"; +import { MessageReceiptStyles } from "./SecondaryComponents/CometChatMessageReceipt/MessageReceiptStyle"; +import { DateStyles } from "./SecondaryComponents/CometChatDate/DateStyle"; +import { DecoratorMessageStyles } from "./UtilityComponents/CometChatDecoratorMessage/DecoratorMessageStyle"; +import { ListItemStyles } from "./UtilityComponents/CometChatListItem/ListItemStyle"; +import { DataItemStyles } from "./SDKDerivedComponents/CometChatDataItem/DataItemStyle"; +import { ActionSheetStyles } from "./UtilityComponents/CometChatActionSheet/ActionSheetStyle"; export { ConversationsWithMessagesConfiguration, diff --git a/src/components/Users/CometChatUserList/UserListConfiguration.js b/src/components/Users/CometChatUserList/UserListConfiguration.js index e5c5dc6f..2035cfad 100644 --- a/src/components/Users/CometChatUserList/UserListConfiguration.js +++ b/src/components/Users/CometChatUserList/UserListConfiguration.js @@ -1,5 +1,5 @@ import reloadIcon from "./resources/spinner.svg"; -import { UserListStyles } from "./UserListStyles"; +import { UserListStyle } from "./UserListStyle"; import { DataItemConfiguration, CustomView } from "../../Shared"; /** * @class UserListConfiguration @@ -7,7 +7,7 @@ import { DataItemConfiguration, CustomView } from "../../Shared"; * @param {number} limit * @param {string} searchKeyword * @param {string} status - * @param {array} roles + * @param {array} roles * @param {boolean} friendsOnly * @param {boolean} hideBlockedUsers * @param {array} tags @@ -17,42 +17,45 @@ import { DataItemConfiguration, CustomView } from "../../Shared"; * @param {boolean} hideError * @param {object} style * @param {object} dataItemConfiguration + * @param {string} selectionMode * */ export class UserListConfiguration { - constructor({ - limit = 30, - searchKeyword = "", - status = "", - roles = null, - friendsOnly = false, - hideBlockedUsers = false, - tags = null, - uids = null, - customView = new CustomView({ - loading: "", - empty: "", - error: "", - }), - loadingIconURL = reloadIcon, - hideError = false, - style = new UserListStyles({}), - dataItemConfiguration = new DataItemConfiguration({}), - }) { - this.limit = limit; - this.searchKeyword = searchKeyword; - this.status = status; - this.roles = roles; - this.friendsOnly = friendsOnly; - this.hideBlockedUsers = hideBlockedUsers; - this.tags = tags; - this.uids = uids; - this.customView = customView; - this.loadingIconURL = loadingIconURL; - this.hideError = hideError; - this.style = new UserListStyles(style || {}); - this.dataItemConfiguration = new DataItemConfiguration( - dataItemConfiguration || {} - ); - } + constructor({ + limit = 30, + searchKeyword = "", + status = "", + roles = null, + friendsOnly = false, + hideBlockedUsers = false, + tags = null, + uids = null, + customView = new CustomView({ + loading: "", + empty: "", + error: "", + }), + loadingIconURL = reloadIcon, + hideError = false, + selectionMode = "none", + style = new UserListStyle({}), + dataItemConfiguration = new DataItemConfiguration({}), + }) { + this.limit = limit; + this.searchKeyword = searchKeyword; + this.status = status; + this.roles = roles; + this.friendsOnly = friendsOnly; + this.hideBlockedUsers = hideBlockedUsers; + this.tags = tags; + this.uids = uids; + this.customView = customView; + this.loadingIconURL = loadingIconURL; + this.hideError = hideError; + this.selectionMode = selectionMode; + this.style = new UserListStyle(style || {}); + this.dataItemConfiguration = new DataItemConfiguration( + dataItemConfiguration || {} + ); + } } diff --git a/src/components/Users/CometChatUserList/UserListStyle.js b/src/components/Users/CometChatUserList/UserListStyle.js new file mode 100644 index 00000000..5c435f48 --- /dev/null +++ b/src/components/Users/CometChatUserList/UserListStyle.js @@ -0,0 +1,49 @@ +import { BaseStyles } from "../../Shared"; +/** + * @class UserListStyle + * @description Styling component for UserListStyle + * @param {string} height + * @param {string} width + * @param {string} border + * @param {string} borderRadius + * @param {string} backgroundColor + * @param {string} loadingIconTint + * @param {string} emptyTextFont + * @param {string} emptyTextColor + * @param {string} errorTextFont + * @param {string} errorTextColor + * @param {string} sectionHeaderTextFont + * @param {string} sectionHeaderTextColor + */ + +export class UserListStyle extends BaseStyles { + constructor({ + width = "100%", + height = "100%", + backgroundColor = "transparent", + border = "0px solid transparent", + borderRadius = "0px", + loadingIconTint = "", + emptyTextFont = "", + emptyTextColor = "", + errorTextFont = "", + errorTextColor = "", + sectionHeaderTextFont = "", + sectionHeaderTextColor = "", + }) { + super({ + height, + width, + border, + borderRadius, + backgroundColor, + }); + this.loadingIconTint = loadingIconTint; + this.emptyTextFont = emptyTextFont; + this.emptyTextColor = emptyTextColor; + this.errorTextFont = errorTextFont; + this.errorTextColor = errorTextColor; + this.sectionHeaderTextFont = sectionHeaderTextFont; + this.sectionHeaderTextColor = sectionHeaderTextColor; + } +} diff --git a/src/components/Users/CometChatUserList/UserListStyles.js b/src/components/Users/CometChatUserList/UserListStyles.js deleted file mode 100644 index 74d3f1bf..00000000 --- a/src/components/Users/CometChatUserList/UserListStyles.js +++ /dev/null @@ -1,43 +0,0 @@ -import { BaseStyles } from "../../Shared"; -/** - * @class UserListStyle - * @description Styling component for UserListStyle - * @param {string} height - * @param {string} width - * @param {string} border - * @param {string} borderRadius - * @param {string} backgroundColor - * @param {string} loadingIconTint - * @param {string} emptyTextFont - * @param {string} emptyTextColor - * @param {string} errorTextFont - * @param {string} errorTextColor - */ - -export class UserListStyles extends BaseStyles { - constructor({ - width = "100%", - height = "100%", - backgroundColor = "transparent", - border = '0px solid transparent', - borderRadius = '0px', - loadingIconTint = "", - emptyTextFont = "", - emptyTextColor = "", - errorTextFont = "", - errorTextColor = "", - }) { - super({ - height, - width, - border, - borderRadius, - backgroundColor, - }); - this.loadingIconTint = loadingIconTint; - this.emptyTextFont = emptyTextFont; - this.emptyTextColor = emptyTextColor; - this.errorTextFont = errorTextFont; - this.errorTextColor = errorTextColor; - } -} diff --git a/src/components/Users/CometChatUsers/UsersConfiguration.js b/src/components/Users/CometChatUsers/UsersConfiguration.js index 7619568c..411df902 100644 --- a/src/components/Users/CometChatUsers/UsersConfiguration.js +++ b/src/components/Users/CometChatUsers/UsersConfiguration.js @@ -1,7 +1,7 @@ import { UserListConfiguration } from "../CometChatUserList/UserListConfiguration"; import backIcon from "./resources/back.svg"; import searchIcon from "./resources/search.svg"; -import { UsersStyles } from "./UsersStyles"; +import { UsersStyle } from "./UsersStyle"; /** * @class UsersConfiguration @@ -11,24 +11,31 @@ import { UsersStyles } from "./UsersStyles"; * @param {boolean} showBackButton * @param {string} hideSearch * @param {object} userListConfigurations + * @param {string} selectionMode + * @param {function} onSelection + * @param {object} style * */ export class UsersConfiguration { - constructor({ - backButtonIconURL = backIcon, - searchIconURL = searchIcon, - showBackButton = false, - hideSearch = false, - style = new UsersStyles({}), - userListConfiguration = new UserListConfiguration({}), - }) { - this.backButtonIconURL = backButtonIconURL; - this.searchIconURL = searchIconURL; - this.showBackButton = showBackButton; - this.hideSearch = hideSearch; - this.style = new UsersStyles(style || {}); - this.userListConfiguration = new UserListConfiguration( - userListConfiguration || {} - ); - } + constructor({ + backButtonIconURL = backIcon, + searchIconURL = searchIcon, + showBackButton = false, + hideSearch = false, + selectionMode = "none", + onSelection = () => {}, + style = new UsersStyle({}), + userListConfiguration = new UserListConfiguration({}), + }) { + this.selectionMode = selectionMode; + this.onSelection = onSelection; + this.backButtonIconURL = backButtonIconURL; + this.searchIconURL = searchIconURL; + this.showBackButton = showBackButton; + this.hideSearch = hideSearch; + this.style = new UsersStyle(style || {}); + this.userListConfiguration = new UserListConfiguration( + userListConfiguration || {} + ); + } } diff --git a/src/components/Users/CometChatUsers/UsersStyle.js b/src/components/Users/CometChatUsers/UsersStyle.js new file mode 100644 index 00000000..196a1655 --- /dev/null +++ b/src/components/Users/CometChatUsers/UsersStyle.js @@ -0,0 +1,62 @@ +import { BaseStyles } from "../../Shared"; +/** + * @class UsersStyle + * @description Styling component for Users + * @param {number} height + * @param {number} width + * @param {object} border + * @param {number} borderRadius + * @param {string} backgroundColor + * @param {object} titleFont + * @param {string} titleColor + * @param {string} backIconTint + * @param {object} searchBorder + * @param {number} searchBorderRadius + * @param {string} searchBackground + * @param {object} searchTextFont + * @param {string} searchTextColor + * @param {string} searchIconTint + */ +export class UsersStyle extends BaseStyles { + constructor({ + width = "280px", + height = "100%", + backgroundColor = "", + border = { + borderWidth: 0, + borderColor: "transparent", + borderStyle: "solid", + }, + borderRadius = 0, + titleFont = "", + titleColor = "", + backIconTint = "", + searchBorder = { + borderWidth: 1, + borderColor: "#141414", + borderStyle: "solid", + }, + searchBorderRadius = 8, + searchBackground = "", + searchTextFont = "", + searchTextColor = "", + searchIconTint = "", + }) { + super({ + height, + width, + border, + borderRadius, + backgroundColor, + }); + this.titleFont = titleFont; + this.titleColor = titleColor; + this.backIconTint = backIconTint; + this.searchBorder = searchBorder; + this.searchBackground = searchBackground; + this.searchBorderRadius = searchBorderRadius; + this.searchTextFont = searchTextFont; + this.searchTextColor = searchTextColor; + this.searchIconTint = searchIconTint; + } +} diff --git a/src/components/Users/CometChatUsers/UsersStyles.js b/src/components/Users/CometChatUsers/UsersStyles.js deleted file mode 100644 index 5b0cd05b..00000000 --- a/src/components/Users/CometChatUsers/UsersStyles.js +++ /dev/null @@ -1,62 +0,0 @@ -import { BaseStyles } from "../../Shared"; -/** - * @class UsersStyle - * @description Styling component for Users - * @param {number} height - * @param {number} width - * @param {object} border - * @param {number} borderRadius - * @param {string} backgroundColor - * @param {object} titleFont - * @param {string} titleColor - * @param {string} backIconTint - * @param {object} searchBorder - * @param {number} searchBorderRadius - * @param {string} searchBackground - * @param {object} searchTextFont - * @param {string} searchTextColor - * @param {string} searchIconTint - */ -export class UsersStyles extends BaseStyles { - constructor({ - width = "280px", - height = "100%", - backgroundColor = "", - border = { - borderWidth: 0, - borderColor: "transparent", - borderStyle: "solid", - }, - borderRadius = 0, - titleFont = "", - titleColor = "", - backIconTint = "", - searchBorder = { - borderWidth: 1, - borderColor: "#141414", - borderStyle: "solid", - }, - searchBorderRadius = 8, - searchBackground = "", - searchTextFont = "", - searchTextColor = "", - searchIconTint = "", - }) { - super({ - height, - width, - border, - borderRadius, - backgroundColor, - }); - this.titleFont = titleFont; - this.titleColor = titleColor; - this.backIconTint = backIconTint; - this.searchBorder = searchBorder; - this.searchBackground = searchBackground; - this.searchBorderRadius = searchBorderRadius; - this.searchTextFont = searchTextFont; - this.searchTextColor = searchTextColor; - this.searchIconTint = searchIconTint; - } -} diff --git a/src/components/Users/CometChatUsers/index.js b/src/components/Users/CometChatUsers/index.js index 19af0b93..ec8d254d 100644 --- a/src/components/Users/CometChatUsers/index.js +++ b/src/components/Users/CometChatUsers/index.js @@ -6,9 +6,8 @@ import { CometChatUserList, CometChatTheme, localize, - UserListConfiguration, } from "../.."; - +import { UserListConfiguration } from "../CometChatUserList/UserListConfiguration"; import { containerStyle, getListStyle, getListBaseStyle } from "./style"; import backIcon from "./resources/back.svg"; import searchIcon from "./resources/search.svg"; @@ -89,7 +88,7 @@ const Users = forwardRef((props, ref) => { errorText={localize("SOMETHING_WRONG")} activeUser={activeUser} theme={_theme} - dataItemConfigurations={_userListConfiguration.dataItemConfigurations} + dataItemConfiguration={_userListConfiguration.dataItemConfiguration} /> diff --git a/src/components/Users/CometChatUsersWithMessages/UsersWithMessagesConfiguration.js b/src/components/Users/CometChatUsersWithMessages/UsersWithMessagesConfiguration.js index bd527806..654297b7 100644 --- a/src/components/Users/CometChatUsersWithMessages/UsersWithMessagesConfiguration.js +++ b/src/components/Users/CometChatUsersWithMessages/UsersWithMessagesConfiguration.js @@ -1,8 +1,5 @@ -import { - UsersConfiguration, - MessagesConfiguration -} from "../../"; -import { UsersWithMessagesStyles } from "../../Users"; +import { UsersConfiguration, MessagesConfiguration } from "../../"; +import { UsersWithMessagesStyle } from "../../Users"; /** * @class UsersWithMessagesConfiguration @@ -12,17 +9,19 @@ import { UsersWithMessagesStyles } from "../../Users"; * @param {Object} MessagesConfiguration */ class UsersWithMessagesConfiguration { - constructor({ - style = new UsersWithMessagesStyles({}), - isMobileView = false, - usersConfiguration = new UsersConfiguration({}), - messagesConfiguration = new MessagesConfiguration({}), - }) { - this.style = new UsersWithMessagesStyles(style ?? {}); - this.isMobileView = isMobileView; - this.usersConfiguration = new UsersConfiguration(usersConfiguration ?? {}); - this.messagesConfiguration = new MessagesConfiguration(messagesConfiguration ?? {}); - } + constructor({ + style = new UsersWithMessagesStyle({}), + isMobileView = false, + usersConfiguration = new UsersConfiguration({}), + messagesConfiguration = new MessagesConfiguration({}), + }) { + this.style = new UsersWithMessagesStyle(style ?? {}); + this.isMobileView = isMobileView; + this.usersConfiguration = new UsersConfiguration(usersConfiguration ?? {}); + this.messagesConfiguration = new MessagesConfiguration( + messagesConfiguration ?? {} + ); + } } -export { UsersWithMessagesConfiguration }; \ No newline at end of file +export { UsersWithMessagesConfiguration }; diff --git a/src/components/Users/CometChatUsersWithMessages/UsersWithMessagesStyle.js b/src/components/Users/CometChatUsersWithMessages/UsersWithMessagesStyle.js new file mode 100644 index 00000000..6b948316 --- /dev/null +++ b/src/components/Users/CometChatUsersWithMessages/UsersWithMessagesStyle.js @@ -0,0 +1,36 @@ +import { BaseStyles } from "../../Shared/Base/BaseStyles"; +/** + * @class UsersWithMessagesStyle + * @description UsersWithMessagesStyle class is used for defining the styles for UsersWithMessagesStyle. + * @param {String} width + * @param {String} height + * @param {String} background + * @param {String} border + * @param {String} borderRadius + * @param {String} messageTextColor + * @param {String} messageTextFont + */ + +class UsersWithMessagesStyle extends BaseStyles { + constructor({ + width = "100vw", + height = "100vh", + background = "", + border = "", + borderRadius = "0", + messageTextColor = "", + messageTextFont = "", + }) { + super({ + width, + height, + background, + border, + borderRadius, + }); + + this.messageTextColor = messageTextColor; + this.messageTextFont = messageTextFont; + } +} +export { UsersWithMessagesStyle }; diff --git a/src/components/Users/CometChatUsersWithMessages/UsersWithMessagesStyles.js b/src/components/Users/CometChatUsersWithMessages/UsersWithMessagesStyles.js deleted file mode 100644 index c75e6e10..00000000 --- a/src/components/Users/CometChatUsersWithMessages/UsersWithMessagesStyles.js +++ /dev/null @@ -1,37 +0,0 @@ -import { BaseStyles } from "../../Shared/Base/BaseStyles" -/** - * @class UsersWithMessagesStyles - * @description UsersWithMessagesStyles class is used for defining the styles for UsersWithMessagesStyles. - * @param {String} width - * @param {String} height - * @param {String} background - * @param {String} border - * @param {String} borderRadius - * @param {String} messageTextColor - * @param {String} messageTextFont - */ - -class UsersWithMessagesStyles extends BaseStyles { - - constructor({ - width = "100vw", - height = "100vh", - background = "", - border = "", - borderRadius = "0", - messageTextColor = "", - messageTextFont = "", - }) { - super({ - width, - height, - background, - border, - borderRadius - }); - - this.messageTextColor = messageTextColor; - this.messageTextFont = messageTextFont; - } -} -export { UsersWithMessagesStyles } \ No newline at end of file diff --git a/src/components/Users/CometChatUsersWithMessages/index.js b/src/components/Users/CometChatUsersWithMessages/index.js index a6ce6378..94bef97a 100644 --- a/src/components/Users/CometChatUsersWithMessages/index.js +++ b/src/components/Users/CometChatUsersWithMessages/index.js @@ -1,22 +1,20 @@ -import React, { useRef, useState } from "react" +import React, { useRef, useState } from "react"; import PropTypes from "prop-types"; import * as styles from "./style"; import { CometChatUsers } from "../CometChatUsers"; +import { UsersWithMessagesStyles } from "../../Users"; import { - UsersWithMessagesStyles, -} from "../../Users"; -import { - UsersConfiguration, - MessagesConfiguration, - CometChatMessages, - CometChatTheme, - CometChatDecoratorMessage, - localize, - fontHelper + UsersConfiguration, + MessagesConfiguration, + CometChatMessages, + CometChatTheme, + CometChatDecoratorMessage, + localize, + fontHelper, } from "../../../"; import { Hooks } from "./hooks"; import { CometChat } from "@cometchat-pro/chat"; -import { UsersStyles } from "../CometChatUsers/UsersStyles"; +import { UsersStyle } from "../CometChatUsers/UsersStyle"; /** * @@ -27,166 +25,172 @@ import { UsersStyles } from "../CometChatUsers/UsersStyles"; * */ const CometChatUsersWithMessages = (props) => { - - /** - * Props destructuring - */ - const { - user, - messageText, - style, - isMobileView, - usersConfiguration, - messagesConfiguration, - theme - } = props; - - /** - * Component internal state - */ - const [activeUser, setActiveUser] = useState(null) - const userRef = useRef(); - - /** - * Component private scoping - */ - const _usersConfiguration = new UsersConfiguration(usersConfiguration ?? {}); - const _messagesConfiguration = new MessagesConfiguration(messagesConfiguration ?? {}); - const _theme = new CometChatTheme(theme ?? {}); - - /** - * Component internal handlers/methods - */ - const onUserClickHandler = (data) => { - setActiveUser(data); - } - - const backButtonClickHandler = () => { - setActiveUser(null); - } - - - /** - * Component hooks - */ - Hooks( - onUserClickHandler, - backButtonClickHandler, - userRef - ); - - - /** - * Component template scoping - */ - const UsersBar = ( - - ); - - /** - * If User or Group changes then prioritize it as props to CometChatMessages - */ - let _user = activeUser?.uid ? activeUser : null; - - if (user) _user = user; - - const MessagesBar = ( - - ); - const getTemplate = () => { - if (isMobileView && (activeUser || _user)) { - return MessagesBar; - } else if (isMobileView && !(activeUser || _user)) { - return UsersBar; - } else if (!isMobileView && !(activeUser || _user)) { - return ( - <> - {UsersBar} - - - ); - } else if (!isMobileView && (activeUser || _user)) { - return ( - <> - {UsersBar} - {MessagesBar} - - ); - } + /** + * Props destructuring + */ + const { + user, + messageText, + style, + isMobileView, + usersConfiguration, + messagesConfiguration, + theme, + } = props; + /** + * Component internal state + */ + const [activeUser, setActiveUser] = useState(null); + const userRef = useRef(); + + /** + * Component private scoping + */ + const _usersConfiguration = new UsersConfiguration(usersConfiguration ?? {}); + const _messagesConfiguration = new MessagesConfiguration( + messagesConfiguration ?? {} + ); + const _theme = new CometChatTheme(theme ?? {}); + + /** + * Component internal handlers/methods + */ + const onUserClickHandler = (data) => { + setActiveUser(data); + }; + + const backButtonClickHandler = () => { + setActiveUser(null); + }; + + /** + * Component hooks + */ + Hooks(onUserClickHandler, backButtonClickHandler, userRef); + + /** + * Component template scoping + */ + const UsersBar = ( + + ); + + /** + * If User or Group changes then prioritize it as props to CometChatMessages + */ + let _user = activeUser?.uid ? activeUser : null; + + if (user) _user = user; + + const MessagesBar = ( + + ); + const getTemplate = () => { + if (isMobileView && (activeUser || _user)) { + return MessagesBar; + } else if (isMobileView && !(activeUser || _user)) { + return UsersBar; + } else if (!isMobileView && !(activeUser || _user)) { + return ( + <> + {UsersBar} + + + ); + } else if (!isMobileView && (activeUser || _user)) { + return ( + <> + {UsersBar} + {MessagesBar} + + ); } - - /** - * Component template - */ - return ( -
- {getTemplate()} -
- ) + }; + + /** + * Component template + */ + return ( +
+ {getTemplate()} +
+ ); }; /** * Component default props types values */ CometChatUsersWithMessages.defaultProps = { - messageText: "", + messageText: "", }; /** * Component default props types */ CometChatUsersWithMessages.propTypes = { - user: PropTypes.object, - isMobileView: PropTypes.bool, - messageText: PropTypes.string, - usersConfiguration: PropTypes.object, - messagesConfiguration: PropTypes.object, - theme: PropTypes.object, - style: PropTypes.object, + user: PropTypes.object, + isMobileView: PropTypes.bool, + messageText: PropTypes.string, + usersConfiguration: PropTypes.object, + messagesConfiguration: PropTypes.object, + theme: PropTypes.object, + style: PropTypes.object, }; -export { CometChatUsersWithMessages }; \ No newline at end of file +export { CometChatUsersWithMessages }; diff --git a/src/components/Users/index.js b/src/components/Users/index.js index 184d3391..ba21007f 100644 --- a/src/components/Users/index.js +++ b/src/components/Users/index.js @@ -6,22 +6,20 @@ import { CometChatUsersWithMessages } from "./CometChatUsersWithMessages"; /** * Styles */ -import { UsersWithMessagesStyles } from "./CometChatUsersWithMessages/UsersWithMessagesStyles"; +import { UsersWithMessagesStyle } from "./CometChatUsersWithMessages/UsersWithMessagesStyle"; /** * Configurations */ -import { UsersConfiguration } from "./CometChatUsers/UsersConfiguration" -import { UsersWithMessagesConfiguration } from "./CometChatUsersWithMessages/UsersWithMessagesConfiguration" +import { UsersConfiguration } from "./CometChatUsers/UsersConfiguration"; +import { UsersWithMessagesConfiguration } from "./CometChatUsersWithMessages/UsersWithMessagesConfiguration"; export { - CometChatUserList, - CometChatUserEvents, - CometChatUsers, - CometChatUsersWithMessages, - - UsersWithMessagesStyles, - - UsersConfiguration, - UsersWithMessagesConfiguration -} \ No newline at end of file + CometChatUserList, + CometChatUserEvents, + CometChatUsers, + CometChatUsersWithMessages, + UsersWithMessagesStyle, + UsersConfiguration, + UsersWithMessagesConfiguration, +}; diff --git a/src/components/index.js b/src/components/index.js index 6bb25757..4c230190 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -4,13 +4,9 @@ import { StatusIndicatorConfiguration, MessageReceiptConfiguration, DateConfiguration, - ConversationsConfiguration, - ConversationsWithMessagesConfiguration, ListBaseConfiguration, - ConversationListConfiguration, ConversationListItemConfiguration, GroupListItemConfiguration, - UserListConfiguration, UserListItemConfiguration, CometChatActionSheet, CometChatActionSheetItem, @@ -77,6 +73,9 @@ import { CometChatConversations, CometChatConversationEvents, conversationType, + ConversationsConfiguration, + ConversationsWithMessagesConfiguration, + ConversationListConfiguration, } from "./Chats"; import { @@ -124,8 +123,21 @@ import { CometChatSmartReplies, LiveReactionConfiguration, MessageHeaderConfiguration, + MessageReactionsConfiguration, MessagesConfiguration, MessageComposerConfiguration, + TextBubbleConfiguration, + AudioBubbleConfiguration, + ImageBubbleConfiguration, + VideoBubbleConfiguration, + PollBubbleConfiguration, + PollOptionBubbleConfiguration, + FileBubbleConfiguration, + StickerBubbleConfiguration, + CollaborativeWhiteboardConfiguration, + CollaborativeDocumentConfiguration, + DeletedBubbleConfiguration, + MessageListConfiguration, } from "./Messages"; import { @@ -144,6 +156,10 @@ import { CometChatGroupsWithMessages, GroupsConfiguration, GroupsWithMessagesConfiguration, + CometChatJoinProtectedGroup, + JoinProtectedGroupConfiguration, + CreateGroupConfiguration, + CometChatCreateGroup, } from "./Groups"; export { @@ -167,12 +183,23 @@ export { ConversationListItemConfiguration, GroupListItemConfiguration, MessageHeaderConfiguration, + MessageReactionsConfiguration, MessageComposerConfiguration, LiveReactionConfiguration, + TextBubbleConfiguration, + AudioBubbleConfiguration, + ImageBubbleConfiguration, + VideoBubbleConfiguration, + PollBubbleConfiguration, + PollOptionBubbleConfiguration, + FileBubbleConfiguration, + StickerBubbleConfiguration, + CollaborativeWhiteboardConfiguration, + CollaborativeDocumentConfiguration, + DeletedBubbleConfiguration, CometChatActionSheet, CometChatActionSheetItem, CometChatListBase, - UserListConfiguration, UserListItemConfiguration, CometChatLocalize, localize, @@ -232,6 +259,10 @@ export { CometChatGroups, CometChatGroupEvents, CometChatGroupsWithMessages, + CometChatJoinProtectedGroup, + JoinProtectedGroupConfiguration, + CreateGroupConfiguration, + CometChatCreateGroup, GroupsConfiguration, GroupsWithMessagesConfiguration, CometChatUserEvents, @@ -275,6 +306,7 @@ export { CometChatPopover, CometChatDecoratorMessage, MessagesConfiguration, + MessageListConfiguration, fontHelper, CustomView, CometChatMenuList, diff --git a/src/index.js b/src/index.js index e16cf33c..cb201026 100644 --- a/src/index.js +++ b/src/index.js @@ -18,13 +18,26 @@ import { ConversationListConfiguration, ConversationListItemConfiguration, GroupListItemConfiguration, + CreateGroupConfiguration, + JoinProtectedGroupConfiguration, MessageHeaderConfiguration, MessageComposerConfiguration, + MessageListConfiguration, LiveReactionConfiguration, + TextBubbleConfiguration, + AudioBubbleConfiguration, + ImageBubbleConfiguration, + VideoBubbleConfiguration, + PollBubbleConfiguration, + PollOptionBubbleConfiguration, + FileBubbleConfiguration, + StickerBubbleConfiguration, + CollaborativeWhiteboardConfiguration, + CollaborativeDocumentConfiguration, + DeletedBubbleConfiguration, CometChatActionSheet, CometChatActionSheetItem, CometChatListBase, - UserListConfiguration, UserListItemConfiguration, CometChatLocalize, localize, @@ -131,6 +144,8 @@ import { CometChatMenuList, ExtensionConstants, ExtensionURLs, + CometChatJoinProtectedGroup, + CometChatCreateGroup, } from "./components"; export { @@ -156,10 +171,20 @@ export { MessageHeaderConfiguration, MessageComposerConfiguration, LiveReactionConfiguration, + TextBubbleConfiguration, + AudioBubbleConfiguration, + ImageBubbleConfiguration, + VideoBubbleConfiguration, + PollBubbleConfiguration, + PollOptionBubbleConfiguration, + FileBubbleConfiguration, + StickerBubbleConfiguration, + CollaborativeWhiteboardConfiguration, + CollaborativeDocumentConfiguration, + DeletedBubbleConfiguration, CometChatActionSheet, CometChatActionSheetItem, CometChatListBase, - UserListConfiguration, UserListItemConfiguration, CometChatLocalize, localize, @@ -218,8 +243,12 @@ export { CometChatGroupList, CometChatGroups, CometChatGroupsWithMessages, + CometChatJoinProtectedGroup, + CreateGroupConfiguration, + CometChatCreateGroup, GroupsConfiguration, GroupsWithMessagesConfiguration, + JoinProtectedGroupConfiguration, CometChatGroupEvents, CometChatUserEvents, CometChatListItem, @@ -261,6 +290,7 @@ export { CometChatPopover, CometChatDecoratorMessage, MessagesConfiguration, + MessageListConfiguration, fontHelper, CustomView, CometChatMenuList,