devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
119 lines (118 loc) • 4.91 kB
JavaScript
/**
* DevExtreme (esm/__internal/ui/chat/typingindicator.js)
* Version: 24.2.7
* Build date: Mon Apr 28 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 DOMComponent from "../../core/widget/dom_component";
const CHAT_TYPINGINDICATOR_CLASS = "dx-chat-typingindicator";
const CHAT_TYPINGINDICATOR_CONTENT_CLASS = "dx-chat-typingindicator-content";
const CHAT_TYPINGINDICATOR_TEXT_CLASS = "dx-chat-typingindicator-text";
const CHAT_TYPINGINDICATOR_BUBBLE_CLASS = "dx-chat-typingindicator-bubble";
const CHAT_TYPINGINDICATOR_CIRCLE_CLASS = "dx-chat-typingindicator-circle";
class TypingIndicator extends DOMComponent {
_getDefaultOptions() {
return _extends({}, super._getDefaultOptions(), {
typingUsers: []
})
}
_init() {
super._init();
$(this.element()).addClass("dx-chat-typingindicator")
}
_initMarkup() {
super._initMarkup();
const {
typingUsers: typingUsers
} = this.option();
if (null !== typingUsers && void 0 !== typingUsers && typingUsers.length) {
this._renderContent()
}
}
_renderContent() {
this._renderContentElement();
this._renderTextElement();
this._updateText();
this._renderBubble()
}
_renderContentElement() {
this._$content = $("<div>").addClass("dx-chat-typingindicator-content").appendTo(this.element())
}
_renderTextElement() {
if (this._$content) {
this._$text = $("<div>").addClass("dx-chat-typingindicator-text").appendTo(this._$content)
}
}
_renderBubble() {
if (this._$content) {
const $bubble = $("<div>").addClass("dx-chat-typingindicator-bubble");
new Array(3).fill(0).forEach((() => {
$("<div>").addClass("dx-chat-typingindicator-circle").appendTo($bubble)
}));
$bubble.appendTo(this._$content)
}
}
_getText() {
const {
typingUsers: typingUsers
} = this.option();
const usernames = null === typingUsers || void 0 === typingUsers ? void 0 : typingUsers.map((user => {
var _user$name;
const name = (null === (_user$name = user.name) || void 0 === _user$name ? void 0 : _user$name.trim()) || messageLocalization.format("dxChat-defaultUserName");
return name
}));
if (1 === (null === usernames || void 0 === usernames ? void 0 : usernames.length)) {
const username = usernames[0];
return messageLocalization.format("dxChat-typingMessageSingleUser", username)
}
if (2 === (null === usernames || void 0 === usernames ? void 0 : usernames.length)) {
const [usernameFirst, usernameSecond] = usernames;
return messageLocalization.format("dxChat-typingMessageTwoUsers", usernameFirst, usernameSecond)
}
if (3 === (null === usernames || void 0 === usernames ? void 0 : usernames.length)) {
const [usernameFirst, usernameSecond, usernameThird] = usernames;
return messageLocalization.format("dxChat-typingMessageThreeUsers", usernameFirst, usernameSecond, usernameThird)
}
const usernameString = usernames.slice(0, 3).join(", ");
return messageLocalization.format("dxChat-typingMessageMultipleUsers", usernameString)
}
_updateText() {
var _this$_$text;
const value = this._getText();
null === (_this$_$text = this._$text) || void 0 === _this$_$text || _this$_$text.text(value)
}
_processTypingUsersUpdating(previousValue) {
const {
typingUsers: typingUsers
} = this.option();
if (null !== previousValue && void 0 !== previousValue && previousValue.length && null !== typingUsers && void 0 !== typingUsers && typingUsers.length) {
this._updateText();
return
}
if (null !== typingUsers && void 0 !== typingUsers && typingUsers.length) {
this._renderContent();
return
}
this._cleanContent()
}
_cleanContent() {
this.$element().empty()
}
_optionChanged(args) {
const {
name: name,
previousValue: previousValue
} = args;
if ("typingUsers" === name) {
this._processTypingUsersUpdating(previousValue ?? [])
} else {
super._optionChanged(args)
}
}
}
export default TypingIndicator;