Chat: Rename onAttachmentDownload to onAttachmentDownloadClick, expand Attachment type (#31584)

Co-authored-by: Ruslan Farkhutdinov <[email protected]>

Author: r-farkhutdinov

packages/devextreme-angular/src/ui/chat/index.ts

@@ -24,7 +24,7 @@ import {
 
 import DataSource from 'devextreme/data/data_source';
 import dxChat from 'devextreme/ui/chat';
-import { Alert, Message, AttachmentDownloadEvent, DisposingEvent, InitializedEvent, MessageDeletedEvent, MessageDeletingEvent, MessageEditCanceledEvent, MessageEditingStartEvent, MessageEnteredEvent, MessageUpdatedEvent, MessageUpdatingEvent, OptionChangedEvent, TypingEndEvent, TypingStartEvent, User } from 'devextreme/ui/chat';
+import { Alert, Message, AttachmentDownloadClickEvent, DisposingEvent, InitializedEvent, MessageDeletedEvent, MessageDeletingEvent, MessageEditCanceledEvent, MessageEditingStartEvent, MessageEnteredEvent, MessageUpdatedEvent, MessageUpdatingEvent, OptionChangedEvent, TypingEndEvent, TypingStartEvent, User } from 'devextreme/ui/chat';
 import { DataSourceOptions } from 'devextreme/data/data_source';
 import { Store } from 'devextreme/data/store';
 import { Format } from 'devextreme/common/core/localization';
@@ -465,7 +465,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     
     
      */
-    @Output() onAttachmentDownload: EventEmitter<AttachmentDownloadEvent>;
+    @Output() onAttachmentDownloadClick: EventEmitter<AttachmentDownloadClickEvent>;
 
     /**
     
@@ -765,7 +765,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
         super(elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId);
 
         this._createEventEmitters([
-            { subscribe: 'attachmentDownload', emit: 'onAttachmentDownload' },
+            { subscribe: 'attachmentDownloadClick', emit: 'onAttachmentDownloadClick' },
             { subscribe: 'disposing', emit: 'onDisposing' },
             { subscribe: 'initialized', emit: 'onInitialized' },
             { subscribe: 'messageDeleted', emit: 'onMessageDeleted' },

packages/devextreme-metadata/make-angular-metadata.ts

@@ -50,7 +50,7 @@ Ng.makeMetadata({
     removeMembers(/\/calendar:dxCalendarOptions.todayButtonText/),
     removeMembers(/\/card_view:/),
     removeMembers(/\/chat:TextMessage.attachments/),
-    removeMembers(/\/chat:dxChatOptions\.(fileUploaderOptions|onAttachmentDownload)/),
+    removeMembers(/\/chat:dxChatOptions\.(fileUploaderOptions|onAttachmentDownloadClick)/),
     removeMembers(/\/form:dxFormOptions\.(aiIntegration|onSmartPasting|onSmartPasted|smartPaste)/),
     removeMembers(/\/form:dxFormSimpleItem\.aiOptions/),
     removeMembers(/\/form:FormPredefinedButtonItem/),

packages/devextreme-react/src/chat.ts

@@ -8,7 +8,7 @@ import dxChat, {
 import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
-import type { Message, AttachmentDownloadEvent, DisposingEvent, InitializedEvent, MessageDeletedEvent, MessageDeletingEvent, MessageEditCanceledEvent, MessageEditingStartEvent, MessageEnteredEvent, MessageUpdatedEvent, MessageUpdatingEvent, TypingEndEvent, TypingStartEvent, Attachment as ChatAttachment, User as ChatUser } from "devextreme/ui/chat";
+import type { Message, AttachmentDownloadClickEvent, DisposingEvent, InitializedEvent, MessageDeletedEvent, MessageDeletingEvent, MessageEditCanceledEvent, MessageEditingStartEvent, MessageEnteredEvent, MessageUpdatedEvent, MessageUpdatingEvent, TypingEndEvent, TypingStartEvent, Attachment as ChatAttachment, User as ChatUser } from "devextreme/ui/chat";
 import type { DisposingEvent as FileUploaderDisposingEvent, InitializedEvent as FileUploaderInitializedEvent, BeforeSendEvent, ContentReadyEvent, DropZoneEnterEvent, DropZoneLeaveEvent, FilesUploadedEvent, OptionChangedEvent, ProgressEvent, UploadAbortedEvent, UploadedEvent, UploadErrorEvent, UploadStartedEvent, ValueChangedEvent, UploadHttpMethod, FileUploadMode } from "devextreme/ui/file_uploader";
 import type { Format, ValidationStatus } from "devextreme/common";
 
@@ -19,7 +19,7 @@ type ReplaceFieldTypes<TSource, TReplacement> = {
 }
 
 type IChatOptionsNarrowedEvents = {
-  onAttachmentDownload?: ((e: AttachmentDownloadEvent) => void) | undefined;
+  onAttachmentDownloadClick?: ((e: AttachmentDownloadClickEvent) => void) | undefined;
   onDisposing?: ((e: DisposingEvent) => void);
   onInitialized?: ((e: InitializedEvent) => void);
   onMessageDeleted?: ((e: MessageDeletedEvent) => void) | undefined;
@@ -60,7 +60,7 @@ const Chat = memo(
       ), []);
 
       const subscribableOptions = useMemo(() => (["items"]), []);
-      const independentEvents = useMemo(() => (["onAttachmentDownload","onDisposing","onInitialized","onMessageDeleted","onMessageDeleting","onMessageEditCanceled","onMessageEditingStart","onMessageEntered","onMessageUpdated","onMessageUpdating","onTypingEnd","onTypingStart"]), []);
+      const independentEvents = useMemo(() => (["onAttachmentDownloadClick","onDisposing","onInitialized","onMessageDeleted","onMessageDeleting","onMessageEditCanceled","onMessageEditingStart","onMessageEntered","onMessageUpdated","onMessageUpdating","onTypingEnd","onTypingStart"]), []);
 
       const defaults = useMemo(() => ({
         defaultItems: "items",

packages/devextreme-vue/src/chat.ts

@@ -8,7 +8,7 @@ import  UploadInfo from "devextreme/file_management/upload_info";
 import {
  Alert,
  Message,
- AttachmentDownloadEvent,
+ AttachmentDownloadClickEvent,
  DisposingEvent,
  InitializedEvent,
  MessageDeletedEvent,
@@ -76,7 +76,7 @@ type AccessibleOptions = Pick<Properties,
   "items" |
   "messageTemplate" |
   "messageTimestampFormat" |
-  "onAttachmentDownload" |
+  "onAttachmentDownloadClick" |
   "onDisposing" |
   "onInitialized" |
   "onMessageDeleted" |
@@ -124,7 +124,7 @@ const componentConfig = {
     items: Array as PropType<Array<Message>>,
     messageTemplate: {},
     messageTimestampFormat: [Object, String, Function] as PropType<Format | CommonFormat | (((value: number | Date) => string)) | Record<string, any> | string>,
-    onAttachmentDownload: Function as PropType<((e: AttachmentDownloadEvent) => void)>,
+    onAttachmentDownloadClick: Function as PropType<((e: AttachmentDownloadClickEvent) => void)>,
     onDisposing: Function as PropType<((e: DisposingEvent) => void)>,
     onInitialized: Function as PropType<((e: InitializedEvent) => void)>,
     onMessageDeleted: Function as PropType<((e: MessageDeletedEvent) => void)>,
@@ -168,7 +168,7 @@ const componentConfig = {
     "update:items": null,
     "update:messageTemplate": null,
     "update:messageTimestampFormat": null,
-    "update:onAttachmentDownload": null,
+    "update:onAttachmentDownloadClick": null,
     "update:onDisposing": null,
     "update:onInitialized": null,
     "update:onMessageDeleted": null,

packages/devextreme/js/__internal/ui/chat/chat.ts

@@ -8,7 +8,7 @@ import { isDefined } from '@js/core/utils/type';
 import DataHelperMixin from '@js/data_helper';
 import type dxChat from '@js/ui/chat';
 import type {
-  AttachmentDownloadEvent,
+  AttachmentDownloadClickEvent,
   Message,
   MessageDeletedEvent,
   MessageDeletingEvent,
@@ -74,7 +74,7 @@ class Chat extends Widget<Properties> {
 
   _messageUpdatedAction?: (e: Partial<MessageUpdatedEvent>) => void;
 
-  _attachmentDownloadAction?: (e: Partial<AttachmentDownloadEvent>) => void;
+  _attachmentDownloadAction?: (e: Partial<AttachmentDownloadClickEvent>) => void;
 
   _getDefaultOptions(): Properties {
     return {
@@ -108,7 +108,7 @@ class Chat extends Widget<Properties> {
       onMessageEntered: undefined,
       onTypingEnd: undefined,
       onTypingStart: undefined,
-      onAttachmentDownload: undefined,
+      onAttachmentDownloadClick: undefined,
     };
   }
 
@@ -201,7 +201,7 @@ class Chat extends Widget<Properties> {
     // @ts-expect-error
     const isLoading = this._dataController.isLoading();
     const currentUserId = user?.id;
-    const onAttachmentDownload = this._getAttachmentDownloadHandler();
+    const onAttachmentDownloadClick = this._getAttachmentDownloadHandler();
 
     const options: MessageListProperties = {
       items,
@@ -230,21 +230,21 @@ class Chat extends Widget<Properties> {
       onEscapeKeyPressed: () => {
         this.focus();
       },
-      onAttachmentDownload,
+      onAttachmentDownloadClick,
     };
 
     return options;
   }
 
-  _getAttachmentDownloadHandler(): ((e: AttachmentDownloadEvent) => void) | undefined {
-    const { onAttachmentDownload } = this.option();
+  _getAttachmentDownloadHandler(): ((e: AttachmentDownloadClickEvent) => void) | undefined {
+    const { onAttachmentDownloadClick } = this.option();
 
-    if (!onAttachmentDownload) {
+    if (!onAttachmentDownloadClick) {
       return;
     }
 
     // eslint-disable-next-line consistent-return
-    return (e: AttachmentDownloadEvent): void => { this._attachmentDownloadAction?.(e); };
+    return (e: AttachmentDownloadClickEvent): void => { this._attachmentDownloadAction?.(e); };
   }
 
   protected _allowEditAction(message: Message): boolean {
@@ -541,7 +541,7 @@ class Chat extends Widget<Properties> {
 
   _createAttachmentDownloadAction(): void {
     this._attachmentDownloadAction = this._createActionByOption(
-      'onAttachmentDownload',
+      'onAttachmentDownloadClick',
       { excludeValidators: ['disabled'] },
     );
   }
@@ -653,9 +653,11 @@ class Chat extends Widget<Properties> {
       case 'onTypingEnd':
         this._createTypingEndAction();
         break;
-      case 'onAttachmentDownload':
+      case 'onAttachmentDownloadClick':
         this._createAttachmentDownloadAction();
-        this._messageList.option({ onAttachmentDownload: this._getAttachmentDownloadHandler() });
+        this._messageList.option({
+          onAttachmentDownloadClick: this._getAttachmentDownloadHandler(),
+        });
         break;
       case 'showDayHeaders':
       case 'showAvatar':

packages/devextreme/js/__internal/ui/chat/file_view/file.ts

@@ -5,7 +5,7 @@ import type { ClickEvent } from '@js/ui/button';
 import Button from '@js/ui/button';
 import type {
   Attachment,
-  AttachmentDownloadEvent,
+  AttachmentDownloadClickEvent,
 } from '@js/ui/chat';
 import { getImageContainer } from '@ts/core/utils/m_icon';
 import type { DOMComponentProperties } from '@ts/core/widget/dom_component';
@@ -23,7 +23,7 @@ export type Properties = DOMComponentProperties<File> & {
 
   data: Attachment;
 
-  onDownload?: (e: AttachmentDownloadEvent) => void;
+  onDownload?: (e: AttachmentDownloadClickEvent) => void;
 };
 
 export const CHAT_FILE_CLASS = 'dx-chat-file';
@@ -35,7 +35,7 @@ const CHAT_FILE_DOWNLOAD_BUTTON_CLASS = 'dx-chat-file-download-button';
 class File extends DOMComponent<File, Properties> {
   private _downloadButton?: Button | null;
 
-  private _downloadAction?: (e: Partial<AttachmentDownloadEvent>) => void;
+  private _downloadAction?: (e: Partial<AttachmentDownloadClickEvent>) => void;
 
   _getDefaultOptions(): Properties {
     return {

packages/devextreme/js/__internal/ui/chat/file_view/file_view.ts

@@ -1,6 +1,6 @@
 import messageLocalization from '@js/common/core/localization/message';
 import $ from '@js/core/renderer';
-import type { Attachment, AttachmentDownloadEvent } from '@js/ui/chat';
+import type { Attachment, AttachmentDownloadClickEvent } from '@js/ui/chat';
 import type { DOMComponentProperties } from '@ts/core/widget/dom_component';
 import DOMComponent from '@ts/core/widget/dom_component';
 import type { OptionChanged } from '@ts/core/widget/types';
@@ -16,7 +16,7 @@ export interface FileViewProperties extends DOMComponentProperties<FileView> {
 
   files?: Attachment[];
 
-  onDownload?: (e: AttachmentDownloadEvent) => void;
+  onDownload?: (e: AttachmentDownloadClickEvent) => void;
 }
 
 export const CHAT_FILE_VIEW_CLASS = 'dx-chat-file-view';

packages/devextreme/js/__internal/ui/chat/messagebubble.ts

@@ -2,7 +2,7 @@ import messageLocalization from '@js/common/core/localization/message';
 import { getPublicElement } from '@js/core/element';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
-import type { Attachment, AttachmentDownloadEvent, Message } from '@js/ui/chat';
+import type { Attachment, AttachmentDownloadClickEvent, Message } from '@js/ui/chat';
 import type { WidgetOptions } from '@js/ui/widget/ui.widget';
 import { ICON_CLASS } from '@ts/core/utils/m_icon';
 import type { OptionChanged } from '@ts/core/widget/types';
@@ -26,7 +26,7 @@ export interface Properties extends WidgetOptions<MessageBubble> {
   src?: string;
   alt?: string;
   attachments?: Attachment[];
-  onAttachmentDownload?: (e: AttachmentDownloadEvent) => void;
+  onAttachmentDownloadClick?: (e: AttachmentDownloadClickEvent) => void;
   template?: ((message: Message, container: Element) => void) | null;
 }
 
@@ -138,7 +138,7 @@ class MessageBubble extends Widget<Properties> {
       activeStateEnabled,
       focusStateEnabled,
       hoverStateEnabled,
-      onAttachmentDownload,
+      onAttachmentDownloadClick,
     } = this.option();
 
     if (!this._$attachments) {
@@ -153,7 +153,7 @@ class MessageBubble extends Widget<Properties> {
         focusStateEnabled,
         hoverStateEnabled,
         files: attachments,
-        onDownload: onAttachmentDownload,
+        onDownload: onAttachmentDownloadClick,
       });
     }
   }
@@ -189,7 +189,7 @@ class MessageBubble extends Widget<Properties> {
       case 'isEdited':
         this._updateMessageData(name, value);
         break;
-      case 'onAttachmentDownload':
+      case 'onAttachmentDownloadClick':
       case 'attachments':
         this._renderAttachmentsElement();
         this._renderAttachments();

packages/devextreme/js/__internal/ui/chat/messagegroup.ts

@@ -6,7 +6,7 @@ import $ from '@js/core/renderer';
 import dateSerialization from '@js/core/utils/date_serialization';
 import { isDate, isDefined } from '@js/core/utils/type';
 import type {
-  AttachmentDownloadEvent, ImageMessage, Message, TextMessage,
+  AttachmentDownloadClickEvent, ImageMessage, Message, TextMessage,
 } from '@js/ui/chat';
 import type { WidgetOptions } from '@js/ui/widget/ui.widget';
 import type { OptionChanged } from '@ts/core/widget/types';
@@ -42,7 +42,7 @@ export interface Properties extends WidgetOptions<MessageGroup> {
   showMessageTimestamp: boolean;
   messageTimestampFormat?: Format;
   messageTemplate?: MessageTemplate;
-  onAttachmentDownload?: (e: AttachmentDownloadEvent) => void;
+  onAttachmentDownloadClick?: (e: AttachmentDownloadClickEvent) => void;
 }
 
 class MessageGroup extends Widget<Properties> {
@@ -123,15 +123,15 @@ class MessageGroup extends Widget<Properties> {
   }
 
   _getMessageBubbleOptions(message: Message): MessageBubbleProperties {
-    const { messageTemplate, onAttachmentDownload } = this.option();
+    const { messageTemplate, onAttachmentDownloadClick } = this.option();
 
     const { isDeleted, type, attachments } = message;
 
     const options: MessageBubbleProperties = {
       isDeleted,
       type,
       attachments,
-      onAttachmentDownload,
+      onAttachmentDownloadClick,
     };
 
     if (type === 'image') {
@@ -313,7 +313,7 @@ class MessageGroup extends Widget<Properties> {
       case 'showMessageTimestamp':
       case 'messageTemplate':
       case 'messageTimestampFormat':
-      case 'onAttachmentDownload':
+      case 'onAttachmentDownloadClick':
         this._invalidate();
         break;
       default:

packages/devextreme/js/__internal/ui/chat/messagelist.ts

@@ -14,7 +14,7 @@ import { getHeight } from '@js/core/utils/size';
 import { isDate, isDefined } from '@js/core/utils/type';
 import type { DxEvent } from '@js/events';
 import type {
-  AttachmentDownloadEvent, Message, TextMessage, User,
+  AttachmentDownloadClickEvent, Message, TextMessage, User,
 } from '@js/ui/chat';
 import type { Item as ContextMenuItem } from '@js/ui/context_menu';
 import type dxContextMenu from '@js/ui/context_menu';
@@ -104,7 +104,7 @@ export interface Properties extends WidgetOptions<MessageList> {
   showAvatar: boolean;
   showUserName: boolean;
   showMessageTimestamp: boolean;
-  onAttachmentDownload?: (e: AttachmentDownloadEvent) => void;
+  onAttachmentDownloadClick?: (e: AttachmentDownloadClickEvent) => void;
   onMessageEditingStart?: (e: MessageEditingEvent) => () => void;
   onMessageDeleting?: (e: MessageDeletingEvent) => void;
   onEscapeKeyPressed?: (e: KeyboardEvent) => void;
@@ -278,7 +278,7 @@ class MessageList extends Widget<Properties> {
       showMessageTimestamp,
       messageTimestampFormat,
       messageTemplate,
-      onAttachmentDownload,
+      onAttachmentDownloadClick,
     } = this.option();
 
     const $messageGroup = $('<div>').appendTo(this._$content);
@@ -291,7 +291,7 @@ class MessageList extends Widget<Properties> {
       showMessageTimestamp,
       messageTimestampFormat,
       messageTemplate,
-      onAttachmentDownload,
+      onAttachmentDownloadClick,
     });
   }
 
@@ -837,7 +837,7 @@ class MessageList extends Widget<Properties> {
       case 'emptyViewTemplate':
       case 'dayHeaderFormat':
       case 'messageTimestampFormat':
-      case 'onAttachmentDownload':
+      case 'onAttachmentDownloadClick':
         this._invalidate();
         break;
       case 'items':