devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
181 lines (180 loc) • 7.21 kB
JavaScript
/**
* DevExtreme (esm/__internal/ui/chat/messagegroup.js)
* Version: 24.2.6
* Build date: Mon Mar 17 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import _extends from "@babel/runtime/helpers/esm/extends";
import dateLocalization from "../../../common/core/localization/date";
import messageLocalization from "../../../common/core/localization/message";
import $ from "../../../core/renderer";
import dateSerialization from "../../../core/utils/date_serialization";
import {
isDate
} from "../../../core/utils/type";
import Widget from "../../core/widget/widget";
import Avatar from "./avatar";
import MessageBubble from "./messagebubble";
export const MESSAGE_DATA_KEY = "dxMessageData";
export const CHAT_MESSAGEGROUP_CLASS = "dx-chat-messagegroup";
export const CHAT_MESSAGEGROUP_ALIGNMENT_START_CLASS = "dx-chat-messagegroup-alignment-start";
export const CHAT_MESSAGEGROUP_ALIGNMENT_END_CLASS = "dx-chat-messagegroup-alignment-end";
const CHAT_MESSAGEGROUP_INFORMATION_CLASS = "dx-chat-messagegroup-information";
const CHAT_MESSAGEGROUP_TIME_CLASS = "dx-chat-messagegroup-time";
const CHAT_MESSAGEGROUP_AUTHOR_NAME_CLASS = "dx-chat-messagegroup-author-name";
const CHAT_MESSAGEGROUP_CONTENT_CLASS = "dx-chat-messagegroup-content";
class MessageGroup extends Widget {
_getDefaultOptions() {
return _extends({}, super._getDefaultOptions(), {
items: [],
alignment: "start",
showAvatar: true,
showUserName: true,
showMessageTimestamp: true,
messageTemplate: null,
messageTimestampFormat: "shorttime"
})
}
_updateAlignmentClass() {
const {
alignment: alignment
} = this.option();
$(this.element()).removeClass("dx-chat-messagegroup-alignment-start").removeClass("dx-chat-messagegroup-alignment-end");
const alignmentClass = "start" === alignment ? "dx-chat-messagegroup-alignment-start" : "dx-chat-messagegroup-alignment-end";
$(this.element()).addClass(alignmentClass)
}
_initMarkup() {
const {
alignment: alignment,
items: items,
showAvatar: showAvatar
} = this.option();
$(this.element()).addClass("dx-chat-messagegroup");
this._updateAlignmentClass();
super._initMarkup();
if (0 === items.length) {
return
}
if (showAvatar && "start" === alignment) {
this._renderAvatar()
}
this._renderMessageGroupInformation(null === items || void 0 === items ? void 0 : items[0]);
this._renderMessageBubbles(items)
}
_renderAvatar() {
const $avatar = $("<div>").appendTo(this.element());
const {
items: items
} = this.option();
const {
author: author
} = items[0];
const authorName = null === author || void 0 === author ? void 0 : author.name;
const authorAvatarUrl = null === author || void 0 === author ? void 0 : author.avatarUrl;
const authorAvatarAlt = null === author || void 0 === author ? void 0 : author.avatarAlt;
this._avatar = this._createComponent($avatar, Avatar, {
name: authorName,
url: authorAvatarUrl,
alt: authorAvatarAlt
})
}
_renderMessageBubble(message) {
const $bubble = $("<div>").data("dxMessageData", message);
this._createComponent($bubble, MessageBubble, this._getMessageBubbleOptions(message));
this._$messageBubbleContainer.append($bubble)
}
_getMessageBubbleOptions(message) {
const options = {
text: message.text
};
const {
messageTemplate: messageTemplate
} = this.option();
if (messageTemplate) {
options.template = (text, container) => {
messageTemplate(_extends({}, message, {
text: text
}), container)
}
}
return options
}
_renderMessageBubbles(items) {
this._$messageBubbleContainer = $("<div>").addClass("dx-chat-messagegroup-content");
items.forEach((message => {
this._renderMessageBubble(message)
}));
this._$messageBubbleContainer.appendTo(this.element())
}
_renderMessageGroupInformation(message) {
const {
alignment: alignment,
showUserName: showUserName,
showMessageTimestamp: showMessageTimestamp
} = this.option();
const {
timestamp: timestamp,
author: author
} = message;
const $information = $("<div>").addClass("dx-chat-messagegroup-information");
if (showUserName) {
const authorName = (null === author || void 0 === author ? void 0 : author.name) ?? messageLocalization.format("dxChat-defaultUserName");
const authorNameText = "start" === alignment ? authorName : "";
$("<div>").addClass("dx-chat-messagegroup-author-name").text(authorNameText).appendTo($information)
}
if (showMessageTimestamp) {
const $time = $("<div>").addClass("dx-chat-messagegroup-time").appendTo($information);
const shouldAddTimeValue = this._shouldAddTimeValue(timestamp);
if (shouldAddTimeValue) {
const timeValue = this._getTimeValue(timestamp);
$time.text(timeValue)
}
}
$information.appendTo(this.element())
}
_shouldAddTimeValue(timestamp) {
const deserializedDate = dateSerialization.deserializeDate(timestamp);
return isDate(deserializedDate) && !isNaN(deserializedDate.getTime())
}
_getTimeValue(timestamp) {
const deserializedDate = dateSerialization.deserializeDate(timestamp);
const {
messageTimestampFormat: messageTimestampFormat
} = this.option();
const formattedTime = dateLocalization.format(deserializedDate, messageTimestampFormat);
return formattedTime
}
_clean() {
this._lastBubble = null;
super._clean()
}
_optionChanged(args) {
const {
name: name
} = args;
switch (name) {
case "items":
case "alignment":
case "showAvatar":
case "showUserName":
case "showMessageTimestamp":
case "messageTemplate":
case "messageTimestampFormat":
this._invalidate();
break;
default:
super._optionChanged(args)
}
}
renderMessage(message) {
const {
items: items
} = this.option();
const newItems = [...items, message];
this._setOptionWithoutOptionChange("items", newItems);
this._renderMessageBubble(message)
}
}
export default MessageGroup;