devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
247 lines (245 loc) • 9.45 kB
JavaScript
/**
* DevExtreme (cjs/__internal/ui/chat/message_box/message_box.js)
* Version: 25.2.3
* Build date: Fri Dec 12 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.TYPING_END_DELAY = exports.CHAT_MESSAGEBOX_TEXTAREA_CONTAINER_CLASS = exports.CHAT_MESSAGEBOX_CLASS = void 0;
var _renderer = _interopRequireDefault(require("../../../../core/renderer"));
var _dom_component = _interopRequireDefault(require("../../../core/widget/dom_component"));
var _chat_text_area = _interopRequireDefault(require("../../../ui/chat/message_box/chat_text_area"));
var _editing_preview = _interopRequireDefault(require("../../../ui/chat/message_box/editing_preview"));
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}
const CHAT_MESSAGEBOX_CLASS = exports.CHAT_MESSAGEBOX_CLASS = "dx-chat-messagebox";
const CHAT_MESSAGEBOX_TEXTAREA_CONTAINER_CLASS = exports.CHAT_MESSAGEBOX_TEXTAREA_CONTAINER_CLASS = "dx-chat-messagebox-textarea-container";
const TYPING_END_DELAY = exports.TYPING_END_DELAY = 2e3;
const ESCAPE_KEY = "escape";
class MessageBox extends _dom_component.default {
_getDefaultOptions() {
return Object.assign({}, super._getDefaultOptions(), {
activeStateEnabled: true,
focusStateEnabled: true,
hoverStateEnabled: true,
fileUploaderOptions: void 0,
text: "",
onMessageEntered: void 0,
onMessageEditCanceled: void 0,
onMessageUpdating: void 0,
onTypingStart: void 0,
onTypingEnd: void 0
})
}
_init() {
super._init();
this._createMessageEnteredAction();
this._createTypingStartAction();
this._createTypingEndAction()
}
_initMarkup() {
(0, _renderer.default)(this.element()).addClass(CHAT_MESSAGEBOX_CLASS);
super._initMarkup();
if (this.option("text")) {
this._renderEditingPreview()
}
this._renderTextAreaContainer()
}
_renderTextAreaContainer() {
const $inputContainer = (0, _renderer.default)("<div>").addClass(CHAT_MESSAGEBOX_TEXTAREA_CONTAINER_CLASS).appendTo(this.element());
this._renderTextArea($inputContainer)
}
_cancelMessageEdit() {
const {
onMessageEditCanceled: onMessageEditCanceled
} = this.option();
this.option("text", "");
this._textArea.focus();
null === onMessageEditCanceled || void 0 === onMessageEditCanceled || onMessageEditCanceled()
}
_renderEditingPreview() {
const $editingPreview = (0, _renderer.default)("<div>").prependTo(this.element());
const {
activeStateEnabled: activeStateEnabled,
focusStateEnabled: focusStateEnabled,
hoverStateEnabled: hoverStateEnabled,
text: text
} = this.option();
this._editingPreview = this._createComponent($editingPreview, _editing_preview.default, {
activeStateEnabled: activeStateEnabled,
focusStateEnabled: focusStateEnabled,
hoverStateEnabled: hoverStateEnabled,
text: text,
onCancel: () => this._cancelMessageEdit()
})
}
_renderTextArea($parent) {
const $textArea = (0, _renderer.default)("<div>");
const textAreaOptions = this._getTextAreaOptions();
$parent.append($textArea);
this._textArea = this._createComponent($textArea, _chat_text_area.default, textAreaOptions);
this._textArea.registerKeyHandler("escape", (() => {
if (this.option("text")) {
this._cancelMessageEdit()
}
}))
}
_getTextAreaOptions() {
const {
activeStateEnabled: activeStateEnabled,
fileUploaderOptions: fileUploaderOptions,
focusStateEnabled: focusStateEnabled,
hoverStateEnabled: hoverStateEnabled,
text: text
} = this.option();
const options = {
activeStateEnabled: activeStateEnabled,
fileUploaderOptions: fileUploaderOptions,
focusStateEnabled: focusStateEnabled,
hoverStateEnabled: hoverStateEnabled,
value: text,
onInput: e => {
this._triggerTypingStartAction(e);
this._updateTypingEndTimeout()
},
onSend: e => {
this._sendHandler(e)
}
};
return options
}
_createMessageEnteredAction() {
this._messageEnteredAction = this._createActionByOption("onMessageEntered", {
excludeValidators: ["disabled"]
})
}
_createTypingStartAction() {
this._typingStartAction = this._createActionByOption("onTypingStart", {
excludeValidators: ["disabled"]
})
}
_createTypingEndAction() {
this._typingEndAction = this._createActionByOption("onTypingEnd", {
excludeValidators: ["disabled"]
})
}
_triggerTypingStartAction(e) {
if (!this._typingEndTimeoutId) {
var _this$_typingStartAct;
null === (_this$_typingStartAct = this._typingStartAction) || void 0 === _this$_typingStartAct || _this$_typingStartAct.call(this, {
event: e.event
})
}
}
_updateTypingEndTimeout() {
clearTimeout(this._typingEndTimeoutId);
this._typingEndTimeoutId = setTimeout((() => {
var _this$_typingEndActio;
null === (_this$_typingEndActio = this._typingEndAction) || void 0 === _this$_typingEndActio || _this$_typingEndActio.call(this);
this._clearTypingEndTimeout()
}), TYPING_END_DELAY)
}
_clearTypingEndTimeout() {
clearTimeout(this._typingEndTimeoutId);
this._typingEndTimeoutId = void 0
}
_sendHandler(e) {
var _this$_typingEndActio2, _this$_messageEntered;
this._clearTypingEndTimeout();
null === (_this$_typingEndActio2 = this._typingEndAction) || void 0 === _this$_typingEndActio2 || _this$_typingEndActio2.call(this);
const {
text: text = ""
} = this._textArea.option();
const {
text: previewText
} = this.option();
if (previewText) {
const {
onMessageUpdating: onMessageUpdating
} = this.option();
null === onMessageUpdating || void 0 === onMessageUpdating || onMessageUpdating({
text: text
});
return
}
const messageEnteredArgs = {
text: text,
event: e.event
};
const attachments = this._textArea.getAttachments();
if (attachments) {
messageEnteredArgs.attachments = attachments
}
null === (_this$_messageEntered = this._messageEnteredAction) || void 0 === _this$_messageEntered || _this$_messageEntered.call(this, messageEnteredArgs)
}
_optionChanged(args) {
var _this$_editingPreview;
const {
name: name,
fullName: fullName,
value: value
} = args;
switch (name) {
case "activeStateEnabled":
case "focusStateEnabled":
case "hoverStateEnabled":
this._textArea.option(name, value);
null === (_this$_editingPreview = this._editingPreview) || void 0 === _this$_editingPreview || _this$_editingPreview.option(name, value);
break;
case "fileUploaderOptions":
this._textArea.option(fullName, value);
break;
case "onMessageEntered":
this._createMessageEnteredAction();
break;
case "onTypingStart":
this._createTypingStartAction();
break;
case "onTypingEnd":
this._createTypingEndAction();
break;
case "text":
this._updateEditingPreview(value);
this._textArea.option("value", value);
break;
default:
super._optionChanged(args)
}
}
_clean() {
this._clearTypingEndTimeout();
super._clean()
}
updateInputAria(emptyViewId) {
this._textArea.option({
inputAttr: {
"aria-labelledby": emptyViewId
}
})
}
resetFileUploader() {
this._textArea.resetFileUploader()
}
toggleAttachButtonVisibleState(state) {
this._textArea.toggleAttachButtonVisibleState(state)
}
_updateEditingPreview(text) {
if (this._editingPreview) {
this._editingPreview.option("text", text);
if (!text) {
this._editingPreview = null
}
} else {
this._renderEditingPreview()
}
}
}
var _default = exports.default = MessageBox;