UNPKG

devextreme

Version:

HTML5 JavaScript Component Suite for Responsive Web Development

107 lines (106 loc) 4.04 kB
/** * DevExtreme (esm/__internal/ui/chat/messagebubble.js) * Version: 25.1.3 * Build date: Wed Jun 25 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 messageLocalization from "../../../common/core/localization/message"; import { getPublicElement } from "../../../core/element"; import $ from "../../../core/renderer"; import { ICON_CLASS } from "../../core/utils/m_icon"; import Widget from "../../core/widget/widget"; export const CHAT_MESSAGEBUBBLE_CLASS = "dx-chat-messagebubble"; export const CHAT_MESSAGEBUBBLE_DELETED_CLASS = "dx-chat-messagebubble-deleted"; export const CHAT_MESSAGEBUBBLE_CONTENT_CLASS = "dx-chat-messagebubble-content"; export const CHAT_MESSAGEBUBBLE_ICON_PROHIBITION_CLASS = `${ICON_CLASS}-cursorprohibition`; export const CHAT_MESSAGEBUBBLE_HAS_IMAGE_CLASS = "dx-has-image"; export const CHAT_MESSAGEBUBBLE_IMAGE_CLASS = "dx-chat-messagebubble-image"; export const MESSAGE_DATA_KEY = "dxMessageData"; class MessageBubble extends Widget { _getDefaultOptions() { return _extends({}, super._getDefaultOptions(), { isDeleted: false, isEdited: false, text: "", template: null }) } _initMarkup() { const $element = $(this.element()); $element.addClass("dx-chat-messagebubble"); $("<div>").addClass("dx-chat-messagebubble-content").appendTo($element); super._initMarkup(); this._updateContent() } _updateContent() { const { template: template, type: type, text: text, src: src, alt: alt, isDeleted: isDeleted = false } = this.option(); this.$element().removeClass("dx-chat-messagebubble-deleted"); const $bubbleContainer = $(this.element()).find(".dx-chat-messagebubble-content"); $bubbleContainer.empty(); if (template) { template({ type: type, text: text, src: src, alt: alt }, getPublicElement($bubbleContainer)); return } if (isDeleted) { this.$element().addClass("dx-chat-messagebubble-deleted"); const icon = $("<div>").addClass(ICON_CLASS).addClass(CHAT_MESSAGEBUBBLE_ICON_PROHIBITION_CLASS); const deletedMessage = $("<div>").text(messageLocalization.format("dxChat-deletedMessageText")); $bubbleContainer.append(icon).append(deletedMessage); return } if ("image" === type) { this.$element().addClass("dx-has-image"); $("<img>").attr("src", src ?? "").attr("alt", alt ?? messageLocalization.format("dxChat-defaultImageAlt")).addClass("dx-chat-messagebubble-image").appendTo($bubbleContainer) } else { $bubbleContainer.text(text ?? "") } } _updateMessageData(property, value) { const messageData = this.$element().data("dxMessageData") || {}; messageData[property] = value; this.$element().data("dxMessageData", messageData) } _optionChanged(args) { const { name: name, value: value } = args; switch (name) { case "text": case "src": case "alt": case "isDeleted": this._updateMessageData(name, value); this._updateContent(); break; case "template": this._updateContent(); break; case "isEdited": this._updateMessageData(name, value); break; default: super._optionChanged(args) } } } export default MessageBubble;