Chat: add .d.ts for message editing functionality (DevExpress#29674)

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

Author: 3 people

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

@@ -23,7 +23,7 @@ import {
 
 
 import DataSource from 'devextreme/data/data_source';
-import { Alert, Message, DisposingEvent, InitializedEvent, MessageEnteredEvent, OptionChangedEvent, TypingEndEvent, TypingStartEvent, User } from 'devextreme/ui/chat';
+import { Alert, Message, 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';
@@ -162,6 +162,19 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     }
 
 
+    /**
+     * [descr:dxChatOptions.editing]
+    
+     */
+    @Input()
+    get editing(): Record<string, any> {
+        return this._getOption('editing');
+    }
+    set editing(value: Record<string, any>) {
+        this._setOption('editing', value);
+    }
+
+
     /**
      * [descr:DOMComponentOptions.elementAttr]
     
@@ -411,6 +424,38 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
      */
     @Output() onInitialized: EventEmitter<InitializedEvent>;
 
+    /**
+    
+     * [descr:dxChatOptions.onMessageDeleted]
+    
+    
+     */
+    @Output() onMessageDeleted: EventEmitter<MessageDeletedEvent>;
+
+    /**
+    
+     * [descr:dxChatOptions.onMessageDeleting]
+    
+    
+     */
+    @Output() onMessageDeleting: EventEmitter<MessageDeletingEvent>;
+
+    /**
+    
+     * [descr:dxChatOptions.onMessageEditCanceled]
+    
+    
+     */
+    @Output() onMessageEditCanceled: EventEmitter<MessageEditCanceledEvent>;
+
+    /**
+    
+     * [descr:dxChatOptions.onMessageEditingStart]
+    
+    
+     */
+    @Output() onMessageEditingStart: EventEmitter<MessageEditingStartEvent>;
+
     /**
     
      * [descr:dxChatOptions.onMessageEntered]
@@ -419,6 +464,22 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
      */
     @Output() onMessageEntered: EventEmitter<MessageEnteredEvent>;
 
+    /**
+    
+     * [descr:dxChatOptions.onMessageUpdated]
+    
+    
+     */
+    @Output() onMessageUpdated: EventEmitter<MessageUpdatedEvent>;
+
+    /**
+    
+     * [descr:dxChatOptions.onMessageUpdating]
+    
+    
+     */
+    @Output() onMessageUpdating: EventEmitter<MessageUpdatingEvent>;
+
     /**
     
      * [descr:dxChatOptions.onOptionChanged]
@@ -485,6 +546,13 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
      */
     @Output() disabledChange: EventEmitter<boolean>;
 
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() editingChange: EventEmitter<Record<string, any>>;
+
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
@@ -678,7 +746,13 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
         this._createEventEmitters([
             { subscribe: 'disposing', emit: 'onDisposing' },
             { subscribe: 'initialized', emit: 'onInitialized' },
+            { subscribe: 'messageDeleted', emit: 'onMessageDeleted' },
+            { subscribe: 'messageDeleting', emit: 'onMessageDeleting' },
+            { subscribe: 'messageEditCanceled', emit: 'onMessageEditCanceled' },
+            { subscribe: 'messageEditingStart', emit: 'onMessageEditingStart' },
             { subscribe: 'messageEntered', emit: 'onMessageEntered' },
+            { subscribe: 'messageUpdated', emit: 'onMessageUpdated' },
+            { subscribe: 'messageUpdating', emit: 'onMessageUpdating' },
             { subscribe: 'optionChanged', emit: 'onOptionChanged' },
             { subscribe: 'typingEnd', emit: 'onTypingEnd' },
             { subscribe: 'typingStart', emit: 'onTypingStart' },
@@ -688,6 +762,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
             { emit: 'dataSourceChange' },
             { emit: 'dayHeaderFormatChange' },
             { emit: 'disabledChange' },
+            { emit: 'editingChange' },
             { emit: 'elementAttrChange' },
             { emit: 'focusStateEnabledChange' },
             { emit: 'heightChange' },

packages/devextreme-angular/src/ui/chat/nested/item-dxi.ts

@@ -43,6 +43,22 @@ export class DxiChatItemComponent extends CollectionNestedOption {
         this._setOption('id', value);
     }
 
+    @Input()
+    get isDeleted(): boolean {
+        return this._getOption('isDeleted');
+    }
+    set isDeleted(value: boolean) {
+        this._setOption('isDeleted', value);
+    }
+
+    @Input()
+    get isEdited(): boolean {
+        return this._getOption('isEdited');
+    }
+    set isEdited(value: boolean) {
+        this._setOption('isEdited', value);
+    }
+
     @Input()
     get text(): string {
         return this._getOption('text');

packages/devextreme-angular/src/ui/nested/base/button-group-item-dxi.ts

@@ -161,6 +161,20 @@ export abstract class DxiButtonGroupItem extends CollectionNestedOption {
         this._setOption('id', value);
     }
 
+    get isDeleted(): boolean {
+        return this._getOption('isDeleted');
+    }
+    set isDeleted(value: boolean) {
+        this._setOption('isDeleted', value);
+    }
+
+    get isEdited(): boolean {
+        return this._getOption('isEdited');
+    }
+    set isEdited(value: boolean) {
+        this._setOption('isEdited', value);
+    }
+
     get timestamp(): Date | number | string {
         return this._getOption('timestamp');
     }

packages/devextreme-angular/src/ui/nested/item-dxi.ts

@@ -58,6 +58,8 @@ import { DxiLocationComponent } from './location-dxi';
         'hint',
         'author',
         'id',
+        'isDeleted',
+        'isEdited',
         'timestamp',
         'beginGroup',
         'closeMenuOnClick',

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, DisposingEvent, InitializedEvent, MessageEnteredEvent, TypingEndEvent, TypingStartEvent, User as ChatUser } from "devextreme/ui/chat";
+import type { Message, DisposingEvent, InitializedEvent, MessageDeletedEvent, MessageDeletingEvent, MessageEditCanceledEvent, MessageEditingStartEvent, MessageEnteredEvent, MessageUpdatedEvent, MessageUpdatingEvent, TypingEndEvent, TypingStartEvent, User as ChatUser } from "devextreme/ui/chat";
 import type { Format } from "devextreme/common";
 
 type ReplaceFieldTypes<TSource, TReplacement> = {
@@ -18,7 +18,13 @@ type ReplaceFieldTypes<TSource, TReplacement> = {
 type IChatOptionsNarrowedEvents = {
   onDisposing?: ((e: DisposingEvent) => void);
   onInitialized?: ((e: InitializedEvent) => void);
+  onMessageDeleted?: ((e: MessageDeletedEvent) => void) | undefined;
+  onMessageDeleting?: ((e: MessageDeletingEvent) => void) | undefined;
+  onMessageEditCanceled?: ((e: MessageEditCanceledEvent) => void) | undefined;
+  onMessageEditingStart?: ((e: MessageEditingStartEvent) => void) | undefined;
   onMessageEntered?: ((e: MessageEnteredEvent) => void) | undefined;
+  onMessageUpdated?: ((e: MessageUpdatedEvent) => void) | undefined;
+  onMessageUpdating?: ((e: MessageUpdatingEvent) => void) | undefined;
   onTypingEnd?: ((e: TypingEndEvent) => void) | undefined;
   onTypingStart?: ((e: TypingStartEvent) => void) | undefined;
 }
@@ -48,7 +54,7 @@ const Chat = memo(
       ), [baseRef.current]);
 
       const subscribableOptions = useMemo(() => (["items"]), []);
-      const independentEvents = useMemo(() => (["onDisposing","onInitialized","onMessageEntered","onTypingEnd","onTypingStart"]), []);
+      const independentEvents = useMemo(() => (["onDisposing","onInitialized","onMessageDeleted","onMessageDeleting","onMessageEditCanceled","onMessageEditingStart","onMessageEntered","onMessageUpdated","onMessageUpdating","onTypingEnd","onTypingStart"]), []);
 
       const defaults = useMemo(() => ({
         defaultItems: "items",
@@ -157,6 +163,8 @@ const DayHeaderFormat = Object.assign<typeof _componentDayHeaderFormat, NestedCo
 type IItemProps = React.PropsWithChildren<{
   author?: ChatUser;
   id?: number | string;
+  isDeleted?: boolean;
+  isEdited?: boolean;
   text?: string;
   timestamp?: Date | number | string;
 }>

packages/devextreme-vue/src/chat.ts

@@ -8,7 +8,13 @@ import {
  Message,
  DisposingEvent,
  InitializedEvent,
+ MessageDeletedEvent,
+ MessageDeletingEvent,
+ MessageEditCanceledEvent,
+ MessageEditingStartEvent,
  MessageEnteredEvent,
+ MessageUpdatedEvent,
+ MessageUpdatingEvent,
  OptionChangedEvent,
  TypingEndEvent,
  TypingStartEvent,
@@ -35,6 +41,7 @@ type AccessibleOptions = Pick<Properties,
   "dataSource" |
   "dayHeaderFormat" |
   "disabled" |
+  "editing" |
   "elementAttr" |
   "focusStateEnabled" |
   "height" |
@@ -45,7 +52,13 @@ type AccessibleOptions = Pick<Properties,
   "messageTimestampFormat" |
   "onDisposing" |
   "onInitialized" |
+  "onMessageDeleted" |
+  "onMessageDeleting" |
+  "onMessageEditCanceled" |
+  "onMessageEditingStart" |
   "onMessageEntered" |
+  "onMessageUpdated" |
+  "onMessageUpdating" |
   "onOptionChanged" |
   "onTypingEnd" |
   "onTypingStart" |
@@ -73,6 +86,7 @@ const componentConfig = {
     dataSource: [Array, Object, String] as PropType<Array<Message> | DataSource | DataSourceOptions | null | Store | string | Record<string, any>>,
     dayHeaderFormat: [Object, String, Function] as PropType<Format | CommonFormat | (((value: number | Date) => string)) | Record<string, any> | string>,
     disabled: Boolean,
+    editing: Object as PropType<Record<string, any>>,
     elementAttr: Object as PropType<Record<string, any>>,
     focusStateEnabled: Boolean,
     height: [Function, Number, String] as PropType<((() => number | string)) | number | string>,
@@ -83,7 +97,13 @@ const componentConfig = {
     messageTimestampFormat: [Object, String, Function] as PropType<Format | CommonFormat | (((value: number | Date) => string)) | Record<string, any> | string>,
     onDisposing: Function as PropType<((e: DisposingEvent) => void)>,
     onInitialized: Function as PropType<((e: InitializedEvent) => void)>,
+    onMessageDeleted: Function as PropType<((e: MessageDeletedEvent) => void)>,
+    onMessageDeleting: Function as PropType<((e: MessageDeletingEvent) => void)>,
+    onMessageEditCanceled: Function as PropType<((e: MessageEditCanceledEvent) => void)>,
+    onMessageEditingStart: Function as PropType<((e: MessageEditingStartEvent) => void)>,
     onMessageEntered: Function as PropType<((e: MessageEnteredEvent) => void)>,
+    onMessageUpdated: Function as PropType<((e: MessageUpdatedEvent) => void)>,
+    onMessageUpdating: Function as PropType<((e: MessageUpdatingEvent) => void)>,
     onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>,
     onTypingEnd: Function as PropType<((e: TypingEndEvent) => void)>,
     onTypingStart: Function as PropType<((e: TypingStartEvent) => void)>,
@@ -107,6 +127,7 @@ const componentConfig = {
     "update:dataSource": null,
     "update:dayHeaderFormat": null,
     "update:disabled": null,
+    "update:editing": null,
     "update:elementAttr": null,
     "update:focusStateEnabled": null,
     "update:height": null,
@@ -117,7 +138,13 @@ const componentConfig = {
     "update:messageTimestampFormat": null,
     "update:onDisposing": null,
     "update:onInitialized": null,
+    "update:onMessageDeleted": null,
+    "update:onMessageDeleting": null,
+    "update:onMessageEditCanceled": null,
+    "update:onMessageEditingStart": null,
     "update:onMessageEntered": null,
+    "update:onMessageUpdated": null,
+    "update:onMessageUpdating": null,
     "update:onOptionChanged": null,
     "update:onTypingEnd": null,
     "update:onTypingStart": null,
@@ -232,12 +259,16 @@ const DxItemConfig = {
     "update:hoveredElement": null,
     "update:author": null,
     "update:id": null,
+    "update:isDeleted": null,
+    "update:isEdited": null,
     "update:text": null,
     "update:timestamp": null,
   },
   props: {
     author: Object as PropType<User | Record<string, any>>,
     id: [Number, String],
+    isDeleted: Boolean,
+    isEdited: Boolean,
     text: String,
     timestamp: [Date, Number, String]
   }