devextreme/cjs/__internal/ui/chat/typingindicator.js

HTML5 JavaScript Component Suite for Responsive Web Development

/**
 * DevExtreme (cjs/__internal/ui/chat/typingindicator.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/
 */

"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.default = void 0;
var _message = _interopRequireDefault(require("../../../common/core/localization/message"));
var _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _dom_component = _interopRequireDefault(require("../../core/widget/dom_component"));

function _interopRequireDefault(e) {
    return e && e.__esModule ? e : {
        default: e
    }
}

function _extends() {
    return _extends = Object.assign ? Object.assign.bind() : function(n) {
        for (var e = 1; e < arguments.length; e++) {
            var t = arguments[e];
            for (var r in t) {
                ({}).hasOwnProperty.call(t, r) && (n[r] = t[r])
            }
        }
        return n
    }, _extends.apply(null, arguments)
}
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 _dom_component.default {
    _getDefaultOptions() {
        return _extends({}, super._getDefaultOptions(), {
            typingUsers: []
        })
    }
    _init() {
        super._init();
        (0, _renderer.default)(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 = (0, _renderer.default)("<div>").addClass("dx-chat-typingindicator-content").appendTo(this.element())
    }
    _renderTextElement() {
        if (this._$content) {
            this._$text = (0, _renderer.default)("<div>").addClass("dx-chat-typingindicator-text").appendTo(this._$content)
        }
    }
    _renderBubble() {
        if (this._$content) {
            const $bubble = (0, _renderer.default)("<div>").addClass("dx-chat-typingindicator-bubble");
            new Array(3).fill(0).forEach((() => {
                (0, _renderer.default)("<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()) || _message.default.format("dxChat-defaultUserName");
            return name
        }));
        if (1 === (null === usernames || void 0 === usernames ? void 0 : usernames.length)) {
            const username = usernames[0];
            return _message.default.format("dxChat-typingMessageSingleUser", username)
        }
        if (2 === (null === usernames || void 0 === usernames ? void 0 : usernames.length)) {
            const [usernameFirst, usernameSecond] = usernames;
            return _message.default.format("dxChat-typingMessageTwoUsers", usernameFirst, usernameSecond)
        }
        if (3 === (null === usernames || void 0 === usernames ? void 0 : usernames.length)) {
            const [usernameFirst, usernameSecond, usernameThird] = usernames;
            return _message.default.format("dxChat-typingMessageThreeUsers", usernameFirst, usernameSecond, usernameThird)
        }
        const usernameString = usernames.slice(0, 3).join(", ");
        return _message.default.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)
        }
    }
}
var _default = exports.default = TypingIndicator;