Chat File: Inherits DOMComponent (#31446)

Co-authored-by: marker dao ® <[email protected]>

Author: marker-dao

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

@@ -7,13 +7,19 @@ import type {
   AttachmentDownloadEvent,
 } from '@js/ui/chat';
 import { getImageContainer } from '@ts/core/utils/m_icon';
+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';
-import type { WidgetProperties } from '@ts/core/widget/widget';
-import Widget from '@ts/core/widget/widget';
 import type { ButtonProps as ButtonProperties } from '@ts/ui/button/button';
 import { getFileIconName } from '@ts/ui/file_uploader/file_uploader.utils';
 
-export type Properties = WidgetProperties & {
+export type Properties = DOMComponentProperties<File> & {
+  activeStateEnabled?: boolean;
+
+  focusStateEnabled?: boolean;
+
+  hoverStateEnabled?: boolean;
+
   data: Attachment;
 
   onDownload?: (e: AttachmentDownloadEvent) => void;
@@ -25,14 +31,17 @@ const CHAT_FILE_NAME_CLASS = 'dx-chat-file-name';
 const CHAT_FILE_SIZE_CLASS = 'dx-chat-file-size';
 const CHAT_FILE_DOWNLOAD_BUTTON_CLASS = 'dx-chat-file-download-button';
 
-class File extends Widget<Properties> {
+class File extends DOMComponent<File, Properties> {
   private _downloadButton?: Button | null;
 
   private _downloadAction?: (e: Partial<AttachmentDownloadEvent>) => void;
 
   _getDefaultOptions(): Properties {
     return {
       ...super._getDefaultOptions(),
+      activeStateEnabled: true,
+      focusStateEnabled: true,
+      hoverStateEnabled: true,
       data: {
         name: '',
         size: 0,
@@ -119,9 +128,17 @@ class File extends Widget<Properties> {
   }
 
   private _getButtonConfig(): ButtonProperties {
-    const { data } = this.option();
+    const {
+      data,
+      activeStateEnabled,
+      focusStateEnabled,
+      hoverStateEnabled,
+    } = this.option();
 
     const configuration = {
+      activeStateEnabled,
+      focusStateEnabled,
+      hoverStateEnabled,
       icon: 'download',
       stylingMode: 'text' as const,
       onClick: (e: ClickEvent): void => {
@@ -138,9 +155,15 @@ class File extends Widget<Properties> {
   }
 
   _optionChanged(args: OptionChanged<Properties>): void {
-    const { name } = args;
+    const { name, value } = args;
 
     switch (name) {
+      case 'activeStateEnabled':
+      case 'focusStateEnabled':
+      case 'hoverStateEnabled':
+        this._downloadButton?.option(name, value);
+        break;
+
       case 'data':
         this._invalidate();
         break;
@@ -154,10 +177,15 @@ class File extends Widget<Properties> {
     }
   }
 
-  _dispose(): void {
+  _clean(): void {
+    this._cleanDownloadButton();
+    this.$element().empty();
+    super._clean();
+  }
+
+  _cleanDownloadButton(): void {
     this._downloadButton?.dispose();
     this._downloadButton = null;
-    super._dispose();
   }
 }
 

packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/file.tests.js

@@ -193,6 +193,57 @@ QUnit.module('File', moduleConfig, () => {
         });
     });
 
+    QUnit.module('Proxy state options', () => {
+        [true, false].forEach(value => {
+            QUnit.test(`passed state options should be equal to download button state options when value is ${value}`, function(assert) {
+                const options = {
+                    activeStateEnabled: value,
+                    focusStateEnabled: value,
+                    hoverStateEnabled: value,
+                };
+
+                this.reinit({
+                    data: {
+                        name: 'test.txt',
+                        size: 1024,
+                    },
+                    ...options,
+                });
+
+                Object.entries(options).forEach(([key, value]) => {
+                    assert.strictEqual(this.downloadButton.option(key), value, `button ${key} value is correct`);
+                });
+            });
+
+            QUnit.test(`passed state options should be updated when state options are changed at runtime with value ${value}`, function(assert) {
+                const options = {
+                    activeStateEnabled: value,
+                    focusStateEnabled: value,
+                    hoverStateEnabled: value,
+                };
+
+                this.instance.option(options);
+
+                Object.entries(options).forEach(([key, value]) => {
+                    assert.strictEqual(this.downloadButton.option(key), value, `button ${key} value is correct`);
+                });
+            });
+        });
+
+        QUnit.test('should have correct default state options', function(assert) {
+            this.reinit({
+                data: {
+                    name: 'test.txt',
+                    size: 1024,
+                },
+            });
+
+            [ 'activeStateEnabled', 'focusStateEnabled', 'hoverStateEnabled' ].forEach((option) => {
+                assert.strictEqual(this.instance.option(option), true, `${option} is true by default`);
+            });
+        });
+    });
+
     QUnit.module('Dispose', () => {
         QUnit.test('should properly dispose download button', function(assert) {
             const buttonDisposeSpy = sinon.spy(this.downloadButton, 'dispose');