Chat MessageEditing demo: handle editing as a nested component (DevExpress#29847)

EugeniyKiyashko · web-flow · commit 8af0af8cc481 · 2025-05-13T19:00:40.000+04:00
diff --git a/apps/demos/Demos/Chat/MessageEditing/Angular/app/app.component.html b/apps/demos/Demos/Chat/MessageEditing/Angular/app/app.component.html
@@ -4,13 +4,17 @@
       #chat
       [height]="600"
       [dataSource]="dataSource"
-      [editing]="editingOptions"
       [reloadOnChange]="false"
       [user]="currentUser"
       (onMessageEntered)="onMessageEntered($event)"
       (onMessageDeleted)="onMessageDeleted($event)"
       (onMessageUpdated)="onMessageUpdated($event)"
-    ></dx-chat>
+    >
+      <dxo-chat-editing
+        [allowUpdating]="allowUpdating"
+        [allowDeleting]="allowDeleting"
+      ></dxo-chat-editing>
+    </dx-chat>
   </div>
 
   <div class="options">
@@ -24,7 +28,7 @@
         valueExpr="key"
         [value]="selectedEditingStrategy"
         [inputAttr]="alloUpdatingLabel"
-        (onValueChanged)="onEditingStrategyChange($event, 'allowUpdating')"
+        (onValueChanged)="onAllowUpdatingChange($event)"
       ></dx-select-box>
     </div>
 
@@ -36,7 +40,7 @@
         valueExpr="key"
         [value]="selectedDeletingStrategy"
         [inputAttr]="allowDeletingLabel"
-        (onValueChanged)="onEditingStrategyChange($event, 'allowDeleting')"
+        (onValueChanged)="onAllowDeletingChange($event)"
       ></dx-select-box>
     </div>
   </div>
diff --git a/apps/demos/Demos/Chat/MessageEditing/Angular/app/app.component.ts b/apps/demos/Demos/Chat/MessageEditing/Angular/app/app.component.ts
@@ -7,7 +7,6 @@ import {
   MessageEnteredEvent,
   MessageDeletedEvent,
   MessageUpdatedEvent,
-  Editing,
 } from 'devextreme/ui/chat';
 import DataSource from 'devextreme/data/data_source';
 import { AppService } from './app.service';
@@ -30,10 +29,9 @@ if (window && window.config?.packageConfigPaths) {
 export class AppComponent {
   currentUser: User;
 
-  editingOptions: Editing = {
-    allowUpdating: true,
-    allowDeleting: true,
-  };
+  allowUpdating = true;
+
+  allowDeleting = true;
 
   editingStrategies = [
     { key: 'enabled', text: 'Enabled' },
@@ -58,7 +56,9 @@ export class AppComponent {
       const { items, user } = component.option();
       const userId = user.id;
 
-      const lastNotDeletedMessage = items.findLast((item: any) => item.author?.id === userId && !item.isDeleted);
+      const lastNotDeletedMessage = items.findLast(
+        (item: any) => item.author?.id === userId && !item.isDeleted
+      );
 
       return message.id === lastNotDeletedMessage?.id;
     },
@@ -81,10 +81,14 @@ export class AppComponent {
     this.appService.onMessageUpdated(e);
   }
 
-  onEditingStrategyChange(event: any, type: string): void {
-    this.editingOptions = {
-      [type]: this.editingStrategy[event.value],
-    };
+  onAllowUpdatingChange(event: any): void {
+    this.allowUpdating = this.editingStrategy[event.value];
+    this.selectedEditingStrategy = event.value;
+  }
+
+  onAllowDeletingChange(event: any): void {
+    this.allowDeleting = this.editingStrategy[event.value];
+    this.selectedDeletingStrategy = event.value;
   }
 }
 
diff --git a/apps/demos/Demos/Chat/MessageEditing/React/App.tsx b/apps/demos/Demos/Chat/MessageEditing/React/App.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useCallback } from 'react';
-import Chat, { type ChatTypes } from 'devextreme-react/chat';
+import Chat, { type ChatTypes, Editing } from 'devextreme-react/chat';
 import SelectBox from 'devextreme-react/select-box';
 import CustomStore from 'devextreme/data/custom_store';
 import DataSource from 'devextreme/data/data_source';
@@ -43,10 +43,8 @@ const dataSource = new DataSource({
 });
 
 export default function App() {
-  const [chatEditing, setChatEditing] = useState<ChatTypes.Editing>({
-    allowUpdating: true,
-    allowDeleting: true,
-  });
+  const [allowUpdating, setAllowUpdating] = useState(true);
+  const [allowDeleting, setAllowDeleting] = useState(true);
 
   const onMessageEntered = useCallback((
     { message }: ChatTypes.MessageEnteredEvent,
@@ -83,11 +81,14 @@ export default function App() {
     }]);
   }, []);
 
-  const handleEditingChange = useCallback((type) => (e) => {
-    setChatEditing((prev) => ({
-      ...prev,
-      [type]: editingStrategy[e.value],
-    }));
+  const handleAllowUpdatingChange = useCallback((e) => {
+    const strategy = editingStrategy[e.value];
+    setAllowUpdating(() => strategy);
+  }, []);
+
+  const handleAllowDeletingChange = useCallback((e) => {
+    const strategy = editingStrategy[e.value];
+    setAllowDeleting(() => strategy);
   }, []);
 
   return (
@@ -98,11 +99,15 @@ export default function App() {
           dataSource={dataSource}
           user={currentUser}
           reloadOnChange={false}
-          editing={chatEditing}
           onMessageEntered={onMessageEntered}
           onMessageDeleted={onMessageDeleted}
           onMessageUpdated={onMessageUpdated}
-        />
+        >
+          <Editing
+            allowDeleting={allowDeleting}
+            allowUpdating={allowUpdating}
+          />
+        </Chat>
       </div>
 
       <div className="options">
@@ -115,7 +120,7 @@ export default function App() {
             displayExpr="text"
             inputAttr= {allowEditingLabel}
             defaultValue={editingOptions[0].key}
-            onValueChanged={handleEditingChange('allowUpdating')}
+            onValueChanged={handleAllowUpdatingChange}
           />
         </div>
         <div className="option">
@@ -126,7 +131,7 @@ export default function App() {
             displayExpr="text"
             inputAttr= {allowDeletingLabel}
             defaultValue={editingOptions[0].key}
-            onValueChanged={handleEditingChange('allowDeleting')}
+            onValueChanged={handleAllowDeletingChange}
           />
         </div>
       </div>
diff --git a/apps/demos/Demos/Chat/MessageEditing/ReactJs/App.js b/apps/demos/Demos/Chat/MessageEditing/ReactJs/App.js
@@ -1,5 +1,5 @@
 import React, { useState, useCallback } from 'react';
-import Chat from 'devextreme-react/chat';
+import Chat, { Editing } from 'devextreme-react/chat';
 import SelectBox from 'devextreme-react/select-box';
 import CustomStore from 'devextreme/data/custom_store';
 import DataSource from 'devextreme/data/data_source';
@@ -38,10 +38,8 @@ const dataSource = new DataSource({
   paginate: false,
 });
 export default function App() {
-  const [chatEditing, setChatEditing] = useState({
-    allowUpdating: true,
-    allowDeleting: true,
-  });
+  const [allowUpdating, setAllowUpdating] = useState(true);
+  const [allowDeleting, setAllowDeleting] = useState(true);
   const onMessageEntered = useCallback(({ message }) => {
     const newMessage = {
       id: new Guid().toString(),
@@ -73,15 +71,14 @@ export default function App() {
       },
     ]);
   }, []);
-  const handleEditingChange = useCallback(
-    (type) => (e) => {
-      setChatEditing((prev) => ({
-        ...prev,
-        [type]: editingStrategy[e.value],
-      }));
-    },
-    [],
-  );
+  const handleAllowUpdatingChange = useCallback((e) => {
+    const strategy = editingStrategy[e.value];
+    setAllowUpdating(() => strategy);
+  }, []);
+  const handleAllowDeletingChange = useCallback((e) => {
+    const strategy = editingStrategy[e.value];
+    setAllowDeleting(() => strategy);
+  }, []);
   return (
     <React.Fragment>
       <div className="chat-container">
@@ -90,11 +87,15 @@ export default function App() {
           dataSource={dataSource}
           user={currentUser}
           reloadOnChange={false}
-          editing={chatEditing}
           onMessageEntered={onMessageEntered}
           onMessageDeleted={onMessageDeleted}
           onMessageUpdated={onMessageUpdated}
-        />
+        >
+          <Editing
+            allowDeleting={allowDeleting}
+            allowUpdating={allowUpdating}
+          />
+        </Chat>
       </div>
 
       <div className="options">
@@ -107,7 +108,7 @@ export default function App() {
             displayExpr="text"
             inputAttr={allowEditingLabel}
             defaultValue={editingOptions[0].key}
-            onValueChanged={handleEditingChange('allowUpdating')}
+            onValueChanged={handleAllowUpdatingChange}
           />
         </div>
         <div className="option">
@@ -118,7 +119,7 @@ export default function App() {
             displayExpr="text"
             inputAttr={allowDeletingLabel}
             defaultValue={editingOptions[0].key}
-            onValueChanged={handleEditingChange('allowDeleting')}
+            onValueChanged={handleAllowDeletingChange}
           />
         </div>
       </div>
diff --git a/apps/demos/Demos/Chat/MessageEditing/Vue/App.vue b/apps/demos/Demos/Chat/MessageEditing/Vue/App.vue
@@ -5,11 +5,15 @@
       :data-source="dataSource"
       :user="currentUser"
       :reload-on-change="false"
-      v-model:editing="chatEditing"
       @messageEntered="onMessageEntered"
       @messageDeleted="onMessageDeleted"
       @messageUpdated="onMessageUpdated"
-    />
+    >
+      <DxEditing
+        :allow-deleting="allowDeleting"
+        :allow-updating="allowUpdating"
+      />
+    </DxChat>
   </div>
   <div class="options">
     <div class="caption">Options</div>
@@ -20,8 +24,8 @@
         value-expr="key"
         display-expr="text"
         :input-attr="allowEditingLabel"
-        :value="editingOptions[0].key"
-        @valueChanged="(e) => handleEditingChange(e, 'allowUpdating')"
+        :value="selectedEditingStrategy"
+        @valueChanged="onAllowEditingChange"
       />
     </div>
     <div class="option">
@@ -31,16 +35,16 @@
         value-expr="key"
         display-expr="text"
         :input-attr="allowDeletingLabel"
-        :value="editingOptions[0].key"
-        @valueChanged="(e) => handleEditingChange(e, 'allowDeleting')"
+        :value="selectedDeletingStrategy"
+        @valueChanged="onAllowDeletingChange"
       />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
-import DxChat from 'devextreme-vue/chat';
+import DxChat, { DxEditing } from 'devextreme-vue/chat';
 import DxSelectBox from 'devextreme-vue/select-box';
 import CustomStore from 'devextreme/data/custom_store';
 import DataSource from 'devextreme/data/data_source';
@@ -53,11 +57,6 @@ import {
   allowDeletingLabel,
 } from './data.ts';
 
-const chatEditing = ref<{ allowUpdating?: boolean, allowDeleting?: boolean }>({
-  allowUpdating: true,
-  allowDeleting: true,
-});
-
 const store = [...initialMessages];
 
 const customStore = new CustomStore({
@@ -124,8 +123,20 @@ const editingStrategy = {
   },
 };
 
-const handleEditingChange = (e, type: 'allowUpdating' | 'allowDeleting') => {
-  chatEditing.value = { [type]: editingStrategy[e.value] };
+const selectedEditingStrategy = ref('enabled');
+const selectedDeletingStrategy = ref('enabled');
+
+const allowUpdating = ref(editingStrategy[selectedEditingStrategy.value]);
+const allowDeleting = ref(editingStrategy[selectedDeletingStrategy.value]);
+
+const onAllowEditingChange = (event) => {
+  selectedEditingStrategy.value = event.value;
+  allowUpdating.value = editingStrategy[event.value];
+};
+
+const onAllowDeletingChange = (event) => {
+  selectedDeletingStrategy.value = event.value;
+  allowDeleting.value = editingStrategy[event.value];
 };
 </script>
 
