Chat Editing configuration components for frameworks (DevExpress#29828)

Author: mpreyskurantov

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

@@ -23,6 +23,7 @@ import {
 
 
 import DataSource from 'devextreme/data/data_source';
+import dxChat 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';
@@ -43,6 +44,7 @@ import {
 
 import { DxiAlertModule } from 'devextreme-angular/ui/nested';
 import { DxoDayHeaderFormatModule } from 'devextreme-angular/ui/nested';
+import { DxoEditingModule } from 'devextreme-angular/ui/nested';
 import { DxiItemModule } from 'devextreme-angular/ui/nested';
 import { DxoAuthorModule } from 'devextreme-angular/ui/nested';
 import { DxoMessageTimestampFormatModule } from 'devextreme-angular/ui/nested';
@@ -52,6 +54,7 @@ import { DxoUserModule } from 'devextreme-angular/ui/nested';
 import { DxiChatAlertModule } from 'devextreme-angular/ui/chat/nested';
 import { DxoChatAuthorModule } from 'devextreme-angular/ui/chat/nested';
 import { DxoChatDayHeaderFormatModule } from 'devextreme-angular/ui/chat/nested';
+import { DxoChatEditingModule } from 'devextreme-angular/ui/chat/nested';
 import { DxiChatItemModule } from 'devextreme-angular/ui/chat/nested';
 import { DxoChatMessageTimestampFormatModule } from 'devextreme-angular/ui/chat/nested';
 import { DxiChatTypingUserModule } from 'devextreme-angular/ui/chat/nested';
@@ -169,10 +172,10 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     
      */
     @Input()
-    get editing(): Record<string, any> {
+    get editing(): { allowDeleting?: boolean | ((options: { component: dxChat, message: Message }) => boolean), allowUpdating?: boolean | ((options: { component: dxChat, message: Message }) => boolean) } {
         return this._getOption('editing');
     }
-    set editing(value: Record<string, any>) {
+    set editing(value: { allowDeleting?: boolean | ((options: { component: dxChat, message: Message }) => boolean), allowUpdating?: boolean | ((options: { component: dxChat, message: Message }) => boolean) }) {
         this._setOption('editing', value);
     }
 
@@ -553,7 +556,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() editingChange: EventEmitter<Record<string, any>>;
+    @Output() editingChange: EventEmitter<{ allowDeleting?: boolean | ((options: { component: dxChat, message: Message }) => boolean), allowUpdating?: boolean | ((options: { component: dxChat, message: Message }) => boolean) }>;
 
     /**
     
@@ -838,6 +841,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     DxChatComponent,
     DxiAlertModule,
     DxoDayHeaderFormatModule,
+    DxoEditingModule,
     DxiItemModule,
     DxoAuthorModule,
     DxoMessageTimestampFormatModule,
@@ -846,6 +850,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     DxiChatAlertModule,
     DxoChatAuthorModule,
     DxoChatDayHeaderFormatModule,
+    DxoChatEditingModule,
     DxiChatItemModule,
     DxoChatMessageTimestampFormatModule,
     DxiChatTypingUserModule,
@@ -857,6 +862,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     DxChatComponent,
     DxiAlertModule,
     DxoDayHeaderFormatModule,
+    DxoEditingModule,
     DxiItemModule,
     DxoAuthorModule,
     DxoMessageTimestampFormatModule,
@@ -865,6 +871,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     DxiChatAlertModule,
     DxoChatAuthorModule,
     DxoChatDayHeaderFormatModule,
+    DxoChatEditingModule,
     DxiChatItemModule,
     DxoChatMessageTimestampFormatModule,
     DxiChatTypingUserModule,

packages/devextreme-angular/src/ui/chat/nested/editing.ts

@@ -0,0 +1,85 @@
+/* tslint:disable:max-line-length */
+
+
+import {
+    Component,
+    OnInit,
+    OnDestroy,
+    NgModule,
+    Host,
+    SkipSelf,
+    Input
+} from '@angular/core';
+
+
+
+
+import dxChat from 'devextreme/ui/chat';
+import { Message } from 'devextreme/ui/chat';
+
+import {
+    DxIntegrationModule,
+    NestedOptionHost,
+} from 'devextreme-angular/core';
+import { NestedOption } from 'devextreme-angular/core';
+
+
+@Component({
+    selector: 'dxo-chat-editing',
+    standalone: true,
+    template: '',
+    styles: [''],
+    imports: [ DxIntegrationModule ],
+    providers: [NestedOptionHost]
+})
+export class DxoChatEditingComponent extends NestedOption implements OnDestroy, OnInit  {
+    @Input()
+    get allowDeleting(): boolean | ((options: { component: dxChat, message: Message }) => boolean) {
+        return this._getOption('allowDeleting');
+    }
+    set allowDeleting(value: boolean | ((options: { component: dxChat, message: Message }) => boolean)) {
+        this._setOption('allowDeleting', value);
+    }
+
+    @Input()
+    get allowUpdating(): boolean | ((options: { component: dxChat, message: Message }) => boolean) {
+        return this._getOption('allowUpdating');
+    }
+    set allowUpdating(value: boolean | ((options: { component: dxChat, message: Message }) => boolean)) {
+        this._setOption('allowUpdating', value);
+    }
+
+
+    protected get _optionPath() {
+        return 'editing';
+    }
+
+
+    constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
+            @Host() optionHost: NestedOptionHost) {
+        super();
+        parentOptionHost.setNestedOption(this);
+        optionHost.setHost(this, this._fullOptionPath.bind(this));
+    }
+
+
+    ngOnInit() {
+        this._addRecreatedComponent();
+    }
+
+    ngOnDestroy() {
+        this._addRemovedOption(this._getOptionPath());
+    }
+
+
+}
+
+@NgModule({
+  imports: [
+    DxoChatEditingComponent
+  ],
+  exports: [
+    DxoChatEditingComponent
+  ],
+})
+export class DxoChatEditingModule { }

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

@@ -1,6 +1,7 @@
 export * from './alert-dxi';
 export * from './author';
 export * from './day-header-format';
+export * from './editing';
 export * from './item-dxi';
 export * from './message-timestamp-format';
 export * from './typing-user-dxi';

packages/devextreme-angular/src/ui/nested/editing.ts

@@ -40,14 +40,6 @@ import { DxiChangeComponent } from './change-dxi';
     providers: [NestedOptionHost]
 })
 export class DxoEditingComponent extends NestedOption implements OnDestroy, OnInit  {
-    @Input()
-    get allowAdding(): boolean | Function {
-        return this._getOption('allowAdding');
-    }
-    set allowAdding(value: boolean | Function) {
-        this._setOption('allowAdding', value);
-    }
-
     @Input()
     get allowDeleting(): boolean | Function {
         return this._getOption('allowDeleting');
@@ -64,6 +56,14 @@ export class DxoEditingComponent extends NestedOption implements OnDestroy, OnIn
         this._setOption('allowUpdating', value);
     }
 
+    @Input()
+    get allowAdding(): boolean | Function {
+        return this._getOption('allowAdding');
+    }
+    set allowAdding(value: boolean | Function) {
+        this._setOption('allowAdding', value);
+    }
+
     @Input()
     get changes(): Array<DataChange> {
         return this._getOption('changes');

packages/devextreme-react/src/chat.ts

@@ -11,6 +11,7 @@ import NestedOption from "./core/nested-option";
 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> = {
   [P in keyof TSource]: P extends keyof TReplacement ? TReplacement[P] : TSource[P];
 }
@@ -63,6 +64,7 @@ const Chat = memo(
       const expectedChildren = useMemo(() => ({
         alert: { optionName: "alerts", isCollectionItem: true },
         dayHeaderFormat: { optionName: "dayHeaderFormat", isCollectionItem: false },
+        editing: { optionName: "editing", isCollectionItem: false },
         item: { optionName: "items", isCollectionItem: true },
         messageTimestampFormat: { optionName: "messageTimestampFormat", isCollectionItem: false },
         typingUser: { optionName: "typingUsers", isCollectionItem: true },
@@ -158,6 +160,25 @@ const DayHeaderFormat = Object.assign<typeof _componentDayHeaderFormat, NestedCo
   componentType: "option",
 });
 
+// owners:
+// Chat
+type IEditingProps = React.PropsWithChildren<{
+  allowDeleting?: boolean | ((options: { component: dxChat, message: Message }) => boolean);
+  allowUpdating?: boolean | ((options: { component: dxChat, message: Message }) => boolean);
+}>
+const _componentEditing = (props: IEditingProps) => {
+  return React.createElement(NestedOption<IEditingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "editing",
+    },
+  });
+};
+
+const Editing = Object.assign<typeof _componentEditing, NestedComponentMeta>(_componentEditing, {
+  componentType: "option",
+});
+
 // owners:
 // Chat
 type IItemProps = React.PropsWithChildren<{
@@ -262,6 +283,8 @@ export {
   IAuthorProps,
   DayHeaderFormat,
   IDayHeaderFormatProps,
+  Editing,
+  IEditingProps,
   Item,
   IItemProps,
   MessageTimestampFormat,

packages/devextreme-vue/src/chat.ts

@@ -3,6 +3,7 @@ import { defineComponent } from "vue";
 import { prepareComponentConfig } from "./core/index";
 import Chat, { Properties } from "devextreme/ui/chat";
 import  DataSource from "devextreme/data/data_source";
+import  dxChat from "devextreme/ui/chat";
 import {
  Alert,
  Message,
@@ -170,6 +171,7 @@ const componentConfig = {
     (this as any).$_expectedChildren = {
       alert: { isCollectionItem: true, optionName: "alerts" },
       dayHeaderFormat: { isCollectionItem: false, optionName: "dayHeaderFormat" },
+      editing: { isCollectionItem: false, optionName: "editing" },
       item: { isCollectionItem: true, optionName: "items" },
       messageTimestampFormat: { isCollectionItem: false, optionName: "messageTimestampFormat" },
       typingUser: { isCollectionItem: true, optionName: "typingUsers" },
@@ -253,6 +255,25 @@ const DxDayHeaderFormat = defineComponent(DxDayHeaderFormatConfig);
 
 (DxDayHeaderFormat as any).$_optionName = "dayHeaderFormat";
 
+const DxEditingConfig = {
+  emits: {
+    "update:isActive": null,
+    "update:hoveredElement": null,
+    "update:allowDeleting": null,
+    "update:allowUpdating": null,
+  },
+  props: {
+    allowDeleting: [Boolean, Function] as PropType<boolean | (((options: { component: dxChat, message: Message }) => boolean))>,
+    allowUpdating: [Boolean, Function] as PropType<boolean | (((options: { component: dxChat, message: Message }) => boolean))>
+  }
+};
+
+prepareConfigurationComponentConfig(DxEditingConfig);
+
+const DxEditing = defineComponent(DxEditingConfig);
+
+(DxEditing as any).$_optionName = "editing";
+
 const DxItemConfig = {
   emits: {
     "update:isActive": null,
@@ -364,6 +385,7 @@ export {
   DxAlert,
   DxAuthor,
   DxDayHeaderFormat,
+  DxEditing,
   DxItem,
   DxMessageTimestampFormat,
   DxTypingUser,

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

@@ -238,28 +238,6 @@ export type MessageTemplateData = {
     readonly message?: Message;
 };
 
-/**
- * @docid
- * @namespace DevExpress.ui.dxChat
- * @public
- */
-export type Editing = {
-  /**
-   * @docid
-   * @default false
-   * @type boolean|function
-   * @public
-   */
-  allowUpdating?: boolean | ((options: { component?: dxChat; message?: Message }) => boolean);
-  /**
-   * @docid
-   * @default false
-   * @type boolean|function
-   * @public
-   */
-  allowDeleting?: boolean | ((options: { component?: dxChat; message?: Message }) => boolean);
-};
-
 /**
  * @deprecated use Properties instead
  * @namespace DevExpress.ui
@@ -299,10 +277,22 @@ export interface dxChatOptions extends WidgetOptions<dxChat> {
     items?: Array<Message>;
     /**
      * @docid
-     * @type object
      * @public
      */
-    editing?: Editing;
+    editing?: {
+      /**
+       * @docid
+       * @default false
+       * @public
+       */
+      allowUpdating?: boolean | ((options: { component?: dxChat; message?: Message }) => boolean);
+      /**
+       * @docid
+       * @default false
+       * @public
+       */
+      allowDeleting?: boolean | ((options: { component?: dxChat; message?: Message }) => boolean);
+    };
     /**
      * @docid
      * @type string | Array<Message> | Store | DataSource | DataSourceOptions | null

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

@@ -15,7 +15,6 @@ export {
   Alert,
   Message,
   MessageTemplateData,
-  Editing,
   dxChatOptions,
   Properties,
 } from './chat';