devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
131 lines (130 loc) • 4.72 kB
JavaScript
/**
* DevExtreme (esm/__internal/ui/chat/editing_preview.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 $ from "../../../core/renderer";
import Button from "../../../ui/button";
import DOMComponent from "../../core/widget/dom_component";
export const CHAT_EDITING_PREVIEW_CLASS = "dx-chat-editing-preview";
export const CHAT_EDITING_PREVIEW_HIDING_CLASS = "dx-chat-editing-preview-hiding";
export const CHAT_EDITING_PREVIEW_CONTENT_CLASS = "dx-chat-editing-preview-content";
export const CHAT_EDITING_PREVIEW_CAPTION_CLASS = "dx-chat-editing-preview-caption";
export const CHAT_EDITING_PREVIEW_TEXT_CLASS = "dx-chat-editing-preview-text";
export const CHAT_EDITING_PREVIEW_CANCEL_BUTTON_CLASS = "dx-chat-editing-preview-cancel-button";
class EditingPreview extends DOMComponent {
_getDefaultOptions() {
return _extends({}, super._getDefaultOptions(), {
activeStateEnabled: true,
focusStateEnabled: true,
hoverStateEnabled: true,
text: "",
onCancel: void 0
})
}
_init() {
super._init();
$(this.element()).addClass("dx-chat-editing-preview")
}
_initMarkup() {
super._initMarkup();
const {
text: text
} = this.option();
if (text) {
this._renderContent();
return
}
this._cleanContent()
}
_renderContent() {
this._renderMessagePreview();
this._updateText();
this._renderCloseButton()
}
_renderMessagePreview() {
const $message = $("<div>").addClass("dx-chat-editing-preview-content").appendTo(this.element());
$("<div>").addClass("dx-chat-editing-preview-caption").text(messageLocalization.format("dxChat-editingMessageCaption")).appendTo($message);
this._$messageText = $("<div>").addClass("dx-chat-editing-preview-text").appendTo($message)
}
_updateText() {
const {
text: text = ""
} = this.option();
this._$messageText.text(text)
}
_renderCloseButton() {
const {
onCancel: onCancel,
activeStateEnabled: activeStateEnabled,
focusStateEnabled: focusStateEnabled,
hoverStateEnabled: hoverStateEnabled
} = this.option();
const $button = $("<div>").addClass("dx-chat-editing-preview-cancel-button").appendTo(this.element());
this._closeButton = this._createComponent($button, Button, {
activeStateEnabled: activeStateEnabled,
focusStateEnabled: focusStateEnabled,
hoverStateEnabled: hoverStateEnabled,
icon: "remove",
type: "normal",
stylingMode: "text",
elementAttr: {
"aria-label": messageLocalization.format("dxChat-cancelEditingButtonAriaLabel")
},
onClick: e => {
null === onCancel || void 0 === onCancel || onCancel(e)
}
})
}
_processTextUpdate(previousValue) {
const {
text: text = ""
} = this.option();
if (previousValue && text) {
this._updateText();
return
}
if (text) {
this._renderContent();
return
}
this.$element().get(0).addEventListener("animationend", (() => {
this._cleanContent()
}), {
once: true
});
this.$element().addClass("dx-chat-editing-preview-hiding")
}
_cleanContent() {
super._dispose();
this.$element().remove()
}
_optionChanged(args) {
const {
name: name,
value: value,
previousValue: previousValue
} = args;
switch (name) {
case "activeStateEnabled":
case "focusStateEnabled":
case "hoverStateEnabled":
this._closeButton.option(name, value);
break;
case "text":
this._processTextUpdate(previousValue);
break;
case "onCancel":
this._closeButton.option("onClick", value);
break;
default:
super._optionChanged(args)
}
}
}
export default EditingPreview;