Menu, ContextMenu: update Demos to use custom item types (#30874)

Author: juleari

apps/demos/Demos/ContextMenu/Basics/Angular/app/app.component.ts

@@ -1,8 +1,9 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
 import notify from 'devextreme/ui/notify';
-import { DxContextMenuModule, DxContextMenuTypes } from 'devextreme-angular/ui/context-menu';
+import { DxContextMenuModule, type DxContextMenuTypes } from 'devextreme-angular/ui/context-menu';
 
 if (!document.location.host.includes('localhost')) {
   enableProdMode();
@@ -14,13 +15,19 @@ if (window && window.config?.packageConfigPaths) {
   modulePrefix = '/app';
 }
 
+class ContextMenuItem {
+  text: string;
+
+  items?: ContextMenuItem[];
+}
+
 @Component({
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],
 })
 export class AppComponent {
-  items: Record<any, unknown>[];
+  items: ContextMenuItem[];
 
   constructor() {
     this.items = [{
@@ -35,7 +42,7 @@ export class AppComponent {
     ];
   }
 
-  itemClick({ itemData }: DxContextMenuTypes.ItemClickEvent) {
+  itemClick({ itemData }: DxContextMenuTypes.ItemClickEvent<ContextMenuItem>) {
     if (!itemData.items) {
       notify(`The "${itemData.text}" item was clicked`, 'success', 1500);
     }

apps/demos/Demos/ContextMenu/Basics/React/App.tsx

@@ -1,9 +1,12 @@
 import React, { useEffect } from 'react';
-import ContextMenu, { type ContextMenuTypes } from 'devextreme-react/context-menu';
+
+import { ContextMenu, type ContextMenuTypes } from 'devextreme-react/context-menu';
 import notify from 'devextreme/ui/notify';
+
 import { contextMenuItems as items } from './data.ts';
+import type { ContextMenuItem } from './types';
 
-function itemClick(e: ContextMenuTypes.ItemClickEvent) {
+function itemClick(e: ContextMenuTypes.ItemClickEvent<ContextMenuItem>) {
   if (!e.itemData.items) {
     notify(`The "${e.itemData.text}" item was clicked`, 'success', 1500);
   }

apps/demos/Demos/ContextMenu/Basics/React/data.ts

@@ -1,4 +1,6 @@
-export const contextMenuItems = [
+import type { ContextMenuItem } from './types';
+
+export const contextMenuItems: ContextMenuItem[] = [
   {
     text: 'Share',
     items: [
@@ -9,4 +11,3 @@ export const contextMenuItems = [
   { text: 'Comment' },
   { text: 'Favorite' },
 ];
-

apps/demos/Demos/ContextMenu/Basics/React/types.ts

@@ -0,0 +1,4 @@
+export interface ContextMenuItem {
+  text: string;
+  items?: ContextMenuItem[]
+}

apps/demos/Demos/ContextMenu/Basics/ReactJs/App.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import ContextMenu from 'devextreme-react/context-menu';
+import { ContextMenu } from 'devextreme-react/context-menu';
 import notify from 'devextreme/ui/notify';
 import { contextMenuItems as items } from './data.js';
 

apps/demos/Demos/ContextMenu/Basics/Vue/App.vue

@@ -17,11 +17,12 @@
   </div>
 </template>
 <script setup lang="ts">
-import DxContextMenu, { type DxContextMenuTypes } from 'devextreme-vue/context-menu';
+import { DxContextMenu, type DxContextMenuTypes } from 'devextreme-vue/context-menu';
 import notify from 'devextreme/ui/notify';
 import { contextMenuItems as items } from './data.ts';
+import type { ContextMenuItem } from './types';
 
-function itemClick({ itemData }: DxContextMenuTypes.ItemClickEvent) {
+function itemClick({ itemData }: DxContextMenuTypes.ItemClickEvent<ContextMenuItem>) {
   if (!itemData.items) {
     notify(`The "${itemData.text}" item was clicked`, 'success', 1500);
   }

apps/demos/Demos/ContextMenu/Basics/Vue/data.ts

@@ -1,4 +1,6 @@
-export const contextMenuItems = [
+import type { ContextMenuItem } from './types';
+
+export const contextMenuItems: ContextMenuItem[] = [
   {
     text: 'Share',
     items: [

apps/demos/Demos/ContextMenu/Basics/Vue/types.ts

@@ -0,0 +1,4 @@
+export interface ContextMenuItem {
+  text: string;
+  items?: ContextMenuItem[]
+}

apps/demos/Demos/ContextMenu/Scrolling/Angular/app/app.component.ts

@@ -1,9 +1,11 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
 import notify from 'devextreme/ui/notify'; // Import notify correctly
-import { DxContextMenuModule, DxContextMenuTypes } from 'devextreme-angular/ui/context-menu';
-import { ContextMenuItems, Service } from './app.service';
+import { DxContextMenuModule, type DxContextMenuTypes } from 'devextreme-angular/ui/context-menu';
+
+import { Service, type ContextMenuItems } from './app.service';
 
 if (!document.location.host.includes('localhost')) {
   enableProdMode();
@@ -28,7 +30,7 @@ export class AppComponent {
     this.items = service.getMenuItems();
   }
 
-  itemClick({ itemData }: DxContextMenuTypes.ItemClickEvent) {
+  itemClick({ itemData }: DxContextMenuTypes.ItemClickEvent<ContextMenuItems>) {
     if (!itemData.items) {
       notify(`The "${itemData.text}" item was clicked`, 'success', 1500);
     }

apps/demos/Demos/ContextMenu/Scrolling/React/App.tsx

@@ -1,9 +1,12 @@
-import React, { useEffect } from 'react';
-import ContextMenu, { type ContextMenuTypes } from 'devextreme-react/context-menu';
+import React from 'react';
+
+import { ContextMenu, type ContextMenuTypes } from 'devextreme-react/context-menu';
 import notify from 'devextreme/ui/notify';
+
 import { contextMenuItems as items } from './data.ts';
+import type { ContextMenuItem } from './types';
 
-function itemClick(e) {
+function itemClick(e: ContextMenuTypes.ItemClickEvent<ContextMenuItem>) {
   if (!e.itemData.items) {
     notify(`The "${e.itemData.text}" item was clicked`, 'success', 1500);
   }