Chat: publish dataSource option & getDataSource() method (#27969)

Co-authored-by: Mikhail Preyskurantov <[email protected]>

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

@@ -22,6 +22,8 @@ import {
 } from '@angular/core';
 
 
+import { Store } from 'devextreme/data';
+import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source';
 import { DisposingEvent, InitializedEvent, Message, MessageSendEvent, OptionChangedEvent, User } from 'devextreme/ui/chat';
 
 import DxChat from 'devextreme/ui/chat';
@@ -88,6 +90,19 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     }
 
 
+    /**
+     * [descr:dxChatOptions.dataSource]
+    
+     */
+    @Input()
+    get dataSource(): Store | DataSource | DataSourceOptions | null | string | Array<Message> {
+        return this._getOption('dataSource');
+    }
+    set dataSource(value: Store | DataSource | DataSourceOptions | null | string | Array<Message>) {
+        this._setOption('dataSource', value);
+    }
+
+
     /**
      * [descr:WidgetOptions.disabled]
     
@@ -276,6 +291,13 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
      */
     @Output() activeStateEnabledChange: EventEmitter<boolean>;
 
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() dataSourceChange: EventEmitter<Store | DataSource | DataSourceOptions | null | string | Array<Message>>;
+
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
@@ -383,6 +405,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
             { subscribe: 'optionChanged', emit: 'onOptionChanged' },
             { emit: 'accessKeyChange' },
             { emit: 'activeStateEnabledChange' },
+            { emit: 'dataSourceChange' },
             { emit: 'disabledChange' },
             { emit: 'elementAttrChange' },
             { emit: 'focusStateEnabledChange' },
@@ -412,6 +435,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
 
     ngOnChanges(changes: SimpleChanges) {
         super.ngOnChanges(changes);
+        this.setupChanges('dataSource', changes);
         this.setupChanges('items', changes);
     }
 
@@ -422,6 +446,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     }
 
     ngDoCheck() {
+        this._idh.doCheck('dataSource');
         this._idh.doCheck('items');
         this._watcherHelper.checkWatchers();
         super.ngDoCheck();

packages/devextreme-vue/src/chat.ts

@@ -5,6 +5,7 @@ import { createConfigurationComponent } from "./core/index";
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
   "activeStateEnabled" |
+  "dataSource" |
   "disabled" |
   "elementAttr" |
   "focusStateEnabled" |
@@ -29,6 +30,7 @@ const DxChat = createComponent({
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
+    dataSource: {},
     disabled: Boolean,
     elementAttr: Object,
     focusStateEnabled: Boolean,
@@ -50,6 +52,7 @@ const DxChat = createComponent({
     "update:hoveredElement": null,
     "update:accessKey": null,
     "update:activeStateEnabled": null,
+    "update:dataSource": null,
     "update:disabled": null,
     "update:elementAttr": null,
     "update:focusStateEnabled": null,

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

@@ -1,3 +1,4 @@
+import type { ComponentFactory } from '@js/core/component_registrator';
 import registerComponent from '@js/core/component_registrator';
 import Guid from '@js/core/guid';
 import type { dxElementWrapper } from '@js/core/renderer';
@@ -35,6 +36,7 @@ class Chat extends Widget<Properties & { title: Title }> {
       hoverStateEnabled: true,
       title: '',
       items: [],
+      dataSource: null,
       user: { id: new Guid().toString() },
       onMessageSend: undefined,
     };
@@ -138,7 +140,7 @@ class Chat extends Widget<Properties & { title: Title }> {
       case 'activeStateEnabled':
       case 'focusStateEnabled':
       case 'hoverStateEnabled':
-        this._messageBox.option({ [name]: value });
+        this._messageBox.option(name, value as Properties[typeof name]);
         break;
       case 'title': {
         if (value) {
@@ -154,10 +156,11 @@ class Chat extends Widget<Properties & { title: Title }> {
         break;
       }
       case 'user':
-        this._messageList.option('currentUserId', (value as Properties['user'])?.id);
+        this._messageList.option('currentUserId', (value as Properties[typeof name])?.id);
         break;
       case 'items':
-        this._messageList.option('items', (value as Properties['items']) ?? []);
+      case 'dataSource':
+        this._messageList.option(name, value as Properties[typeof name]);
         break;
       case 'onMessageSend':
         this._createMessageSendAction();
@@ -176,7 +179,6 @@ class Chat extends Widget<Properties & { title: Title }> {
   }
 }
 
-// @ts-expect-error ts-error
-registerComponent('dxChat', Chat);
+registerComponent('dxChat', Chat as unknown as ComponentFactory<Chat>);
 
 export default Chat;

packages/devextreme/js/core/component_registrator.d.ts

@@ -1,7 +1,7 @@
 import DOMComponent from './dom_component';
 import { UserDefinedElement } from './element';
 
-type ComponentFactory<TComponent> = {
+export type ComponentFactory<TComponent> = {
     new(element: UserDefinedElement, options?: Record<string, unknown>): TComponent;
     getInstance(element: UserDefinedElement): TComponent;
 };

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

@@ -5,6 +5,7 @@ import {
     InitializedEventInfo,
     ChangedOptionInfo,
 } from '../events/index';
+import DataSource, { DataSourceLike } from '../data/data_source';
 
 /**
  * @docid _ui_chat_DisposingEvent
@@ -138,6 +139,13 @@ export interface dxChatOptions extends WidgetOptions<dxChat> {
      * @public
      */
     items?: Array<Message>;
+    /**
+     * @docid
+     * @type string | Array<Message> | Store | DataSource | DataSourceOptions | null
+     * @default null
+     * @public
+     */
+    dataSource?: DataSourceLike<Message> | null;
     /**
      * @docid
      * @default null
@@ -150,7 +158,7 @@ export interface dxChatOptions extends WidgetOptions<dxChat> {
 
 /**
  * @docid
- * @inherits Widget
+ * @inherits Widget, DataHelperMixin
  * @namespace DevExpress.ui
  * @public
  */
@@ -161,6 +169,8 @@ export default class dxChat extends Widget<Properties> {
      * @public
      */
     renderMessage(message: Message): void;
+
+    getDataSource(): DataSource<Message>;
 }
 
 /** @public */

packages/devextreme/testing/tests/DevExpress.ui/defaultOptions.tests.js

@@ -1347,6 +1347,7 @@ testComponentDefaults(Chat,
         hoverStateEnabled: true,
         title: '',
         onMessageSend: undefined,
+        dataSource: undefined,
     }
 );
 

packages/devextreme/ts/dx.all.d.ts

@@ -4837,7 +4837,7 @@ declare module DevExpress.core {
   /**
    * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
    */
-  type ComponentFactory<TComponent> = {
+  export type ComponentFactory<TComponent> = {
     new (
       element: UserDefinedElement,
       options?: Record<string, unknown>
@@ -9462,6 +9462,8 @@ declare module DevExpress.ui {
      * [descr:dxChat.renderMessage(message)]
      */
     renderMessage(message: DevExpress.ui.dxChat.Message): void;
+
+    getDataSource(): DevExpress.data.DataSource<DevExpress.ui.dxChat.Message>;
   }
   module dxChat {
     /**
@@ -9523,6 +9525,10 @@ declare module DevExpress.ui {
      * [descr:dxChatOptions.items]
      */
     items?: Array<DevExpress.ui.dxChat.Message>;
+    /**
+     * [descr:dxChatOptions.dataSource]
+     */
+    dataSource?: DevExpress.data.DataSource.DataSourceLike<DevExpress.ui.dxChat.Message> | null;
     /**
      * [descr:dxChatOptions.onMessageSend]
      */