devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
192 lines (190 loc) • 6.98 kB
JavaScript
/**
* DevExtreme (cjs/__internal/ui/chat/file_view/file.js)
* Version: 25.2.5
* Build date: Fri Feb 20 2026
*
* Copyright (c) 2012 - 2026 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.CHAT_FILE_SIZE_CLASS = exports.CHAT_FILE_NAME_CLASS = exports.CHAT_FILE_CLASS = void 0;
var _message = _interopRequireDefault(require("../../../../common/core/localization/message"));
var _renderer = _interopRequireDefault(require("../../../../core/renderer"));
var _button = _interopRequireDefault(require("../../../../ui/button"));
var _m_icon = require("../../../core/utils/m_icon");
var _dom_component = _interopRequireDefault(require("../../../core/widget/dom_component"));
var _file_uploader = require("../../../ui/file_uploader/file_uploader.utils");
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}
const CHAT_FILE_CLASS = exports.CHAT_FILE_CLASS = "dx-chat-file";
const CHAT_FILE_ICON_CONTAINER_CLASS = "dx-chat-file-icon-container";
const CHAT_FILE_NAME_CLASS = exports.CHAT_FILE_NAME_CLASS = "dx-chat-file-name";
const CHAT_FILE_SIZE_CLASS = exports.CHAT_FILE_SIZE_CLASS = "dx-chat-file-size";
const CHAT_FILE_DOWNLOAD_BUTTON_CLASS = "dx-chat-file-download-button";
class File extends _dom_component.default {
_getDefaultOptions() {
return Object.assign({}, super._getDefaultOptions(), {
activeStateEnabled: true,
focusStateEnabled: true,
hoverStateEnabled: true,
data: {
name: "",
size: 0
},
onDownload: void 0
})
}
_init() {
super._init();
this._createDownloadAction()
}
_createDownloadAction() {
this._downloadAction = this._createActionByOption("onDownload", {
excludeValidators: ["disabled"]
})
}
_initMarkup() {
this.$element().addClass(CHAT_FILE_CLASS).attr("role", "listitem");
super._initMarkup();
this._renderSections()
}
_renderSections() {
this._renderIcon();
this._renderName();
this._renderSize();
this._renderButton()
}
_renderIcon() {
const {
data: data
} = this.option();
const iconName = (0, _file_uploader.getFileIconName)(data.name);
const $icon = (0, _m_icon.getImageContainer)(iconName);
const $iconContainer = (0, _renderer.default)("<div>").addClass("dx-chat-file-icon-container").append($icon);
this.$element().append($iconContainer)
}
_renderName() {
const {
data: data
} = this.option();
const {
name: name
} = data;
const $name = (0, _renderer.default)("<div>").addClass(CHAT_FILE_NAME_CLASS).text(name).attr("title", name);
this.$element().append($name)
}
_renderSize() {
const {
data: data
} = this.option();
const {
size: size
} = data;
const text = (0, _file_uploader.getFileSize)(size);
const $size = (0, _renderer.default)("<div>").addClass(CHAT_FILE_SIZE_CLASS).text(text).attr("title", text);
this.$element().append($size)
}
_renderButton() {
const {
onDownload: onDownload
} = this.option();
if (!onDownload) {
return
}
const $button = (0, _renderer.default)("<div>").addClass("dx-chat-file-download-button");
this._downloadButton = this._createComponent($button, _button.default, this._getButtonConfig());
this.$element().append($button)
}
_getButtonConfig() {
const {
data: data,
activeStateEnabled: activeStateEnabled,
focusStateEnabled: focusStateEnabled,
hoverStateEnabled: hoverStateEnabled
} = this.option();
const ariaLabel = _message.default.format("dxChat-downloadButtonLabel", (null === data || void 0 === data ? void 0 : data.name) ?? "");
const configuration = {
activeStateEnabled: activeStateEnabled,
focusStateEnabled: focusStateEnabled,
hoverStateEnabled: hoverStateEnabled,
hint: ariaLabel,
elementAttr: {
"aria-label": ariaLabel
},
icon: "download",
stylingMode: "text",
onClick: e => {
this._downloadHandler(e)
}
};
return configuration
}
_downloadHandler(e) {
var _this$_downloadAction;
const {
data: data
} = this.option();
const event = {
event: e.event,
attachment: data
};
null === (_this$_downloadAction = this._downloadAction) || void 0 === _this$_downloadAction || _this$_downloadAction.call(this, event)
}
_handleOnDownloadOptionChange() {
const {
onDownload: onDownload
} = this.option();
if (!onDownload) {
this._cleanDownloadButton();
return
}
if (this._downloadButton) {
var _this$_downloadButton;
null === (_this$_downloadButton = this._downloadButton) || void 0 === _this$_downloadButton || _this$_downloadButton.option({
onClick: e => this._downloadHandler(e)
})
} else {
this._renderButton()
}
}
_optionChanged(args) {
var _this$_downloadButton2;
const {
name: name,
value: value
} = args;
switch (name) {
case "activeStateEnabled":
case "focusStateEnabled":
case "hoverStateEnabled":
null === (_this$_downloadButton2 = this._downloadButton) || void 0 === _this$_downloadButton2 || _this$_downloadButton2.option(name, value);
break;
case "data":
this._invalidate();
break;
case "onDownload":
this._createDownloadAction();
this._handleOnDownloadOptionChange();
break;
default:
super._optionChanged(args)
}
}
_clean() {
this._cleanDownloadButton();
this.$element().empty();
super._clean()
}
_cleanDownloadButton() {
var _this$_downloadButton3;
null === (_this$_downloadButton3 = this._downloadButton) || void 0 === _this$_downloadButton3 || _this$_downloadButton3.dispose();
this._downloadButton = null
}
}
var _default = exports.default = File;