Scheduler - Fix unstable ContextMenu demo test

apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.component.html

@@ -19,17 +19,20 @@
     icon="conferenceroomoutline"
   ></dxi-scheduler-resource>
 </dx-scheduler>
+
 <dx-context-menu
   [items]="contextMenuItems"
-  [disabled]="disabled"
-  [target]="target"
+  target=".dx-scheduler"
   (onItemClick)="onContextMenuItemClick($event)"
+  (onHiding)="onContextMenuHiding()"
   [width]="200"
 >
   <div *dxTemplate="let e of 'item'">
-    @if(e.color) {
-    <div class="item-badge" [ngStyle]="{ backgroundColor: e.color }"></div>
-    }
-    <div class="item-text">{{ e.text }}</div>
+    <div>
+      @if(e.color) {
+      <div class="item-badge" [style.background-color]="e.color"></div>
+      }
+      {{ e.text }}
+    </div>
   </div>
 </dx-context-menu>

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

@@ -13,9 +13,6 @@ if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
 
-const appointmentClassName = '.dx-scheduler-appointment';
-const cellClassName = '.dx-scheduler-date-table-cell';
-
 let modulePrefix = '';
 // @ts-ignore
 if (window && window.config?.packageConfigPaths) {
@@ -42,60 +39,80 @@ export class AppComponent {
 
   resourcesData: Resource[];
 
-  groups: string[];
+  groups: string[] = [];
 
   crossScrollingEnabled = false;
 
-  contextMenuItems = [];
-
-  disabled = true;
-
-  target: string = appointmentClassName;
+  contextMenuItems: ContextMenuItem[] = [];
 
   constructor(service: Service) {
     this.resourcesData = service.getResources();
     this.appointmentsData = service.getAppointments();
   }
 
-  onAppointmentContextMenu({ appointmentData, targetedAppointmentData }: DxSchedulerTypes.AppointmentContextMenuEvent) {
+  onContextMenuItemClick(e: DxContextMenuTypes.ItemClickEvent<ContextMenuItem>) {
+    e.itemData.onItemClick(e);
+  }
+
+  onAppointmentContextMenu(e: DxSchedulerTypes.AppointmentContextMenuEvent) {
+    const items = this.getAppointmentContextMenuItems(e);
+    this.contextMenuItems = items;
+  }
+
+  onCellContextMenu(e: DxSchedulerTypes.CellContextMenuEvent) {
+    const items = this.getCellContextMenuItems(e);
+    this.contextMenuItems = items;
+  }
+
+  onContextMenuHiding() {
+    this.contextMenuItems = [];
+  }
+
+  getAppointmentContextMenuItems(e: DxSchedulerTypes.AppointmentContextMenuEvent): ContextMenuItem[] {
+    const {
+      appointmentData: appointment,
+      targetedAppointmentData: targetedAppointment,
+    } = e;
     const scheduler = this.scheduler.instance;
-    const resourceItems = this.resourcesData
-      .map((item) => ({
-        ...item,
-        onItemClick: ({ itemData }: DxContextMenuTypes.ItemClickEvent<Resource>) => scheduler.updateAppointment(appointmentData, {
-          ...appointmentData,
-          ...{ roomId: [itemData.id] },
-        }),
-      }));
-    this.target = appointmentClassName;
-    this.disabled = false;
-    this.contextMenuItems = [
+
+    return [
       {
         text: 'Open',
-        onItemClick: () => scheduler.showAppointmentPopup(appointmentData),
+        onItemClick: () => scheduler.showAppointmentPopup(appointment),
       },
       {
         text: 'Delete',
-        onItemClick: () => scheduler.deleteAppointment(appointmentData),
+        onItemClick: () => scheduler.deleteAppointment(appointment),
       },
       {
         text: 'Repeat Weekly',
         beginGroup: true,
-        onItemClick: () => scheduler.updateAppointment(appointmentData, {
-          startDate: targetedAppointmentData.startDate,
+        onItemClick: () => scheduler.updateAppointment(appointment, {
+          ...appointment,
+          startDate: targetedAppointment.startDate,
           recurrenceRule: 'FREQ=WEEKLY',
         }),
       },
-      { text: 'Set Room', beginGroup: true, disabled: true },
-      ...resourceItems,
+      {
+        text: 'Set Room',
+        beginGroup: true,
+        disabled: true,
+      },
+      ...this.resourcesData.map((item) => ({
+        ...item,
+        onItemClick: ({ itemData }: DxContextMenuTypes.ItemClickEvent<Resource>) => scheduler.updateAppointment(appointment, {
+          ...appointment,
+          roomId: [itemData.id],
+        }),
+      })),
     ];
   }
 
-  onCellContextMenu({ cellData }: DxSchedulerTypes.CellContextMenuEvent) {
+  getCellContextMenuItems(e: DxSchedulerTypes.CellContextMenuEvent): ContextMenuItem[] {
+    const { cellData } = e;
     const scheduler = this.scheduler.instance;
-    this.target = cellClassName;
-    this.disabled = false;
-    this.contextMenuItems = [
+
+    return [
       {
         text: 'New Appointment',
         onItemClick: () => scheduler.showAppointmentPopup(
@@ -117,9 +134,9 @@ export class AppComponent {
         text: 'Group by Room/Ungroup',
         beginGroup: true,
         onItemClick: () => {
-          if (this.groups) {
+          if (this.groups.length) {
             this.crossScrollingEnabled = false;
-            this.groups = null;
+            this.groups = [];
           } else {
             this.crossScrollingEnabled = true;
             this.groups = ['roomId'];
@@ -134,10 +151,6 @@ export class AppComponent {
       },
     ];
   }
-
-  onContextMenuItemClick(e: DxContextMenuTypes.ItemClickEvent<ContextMenuItem>) {
-    e.itemData.onItemClick(e);
-  }
 }
 
 bootstrapApplication(AppComponent, {

apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.service.ts

@@ -16,7 +16,7 @@ export interface Resource {
   color: string;
 }
 
-export type ContextMenuItem = DxContextMenuTypes.Item & Resource & {
+export type ContextMenuItem = DxContextMenuTypes.Item & Partial<Resource> & {
   onItemClick?: (e: DxContextMenuTypes.ItemClickEvent<ContextMenuItem>) => void
 };
 

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

@@ -1,19 +1,16 @@
 import React, { useCallback, useRef, useState } from 'react';
 
 import { Scheduler, Resource } from 'devextreme-react/scheduler';
-import type { SchedulerTypes, SchedulerRef } from 'devextreme-react/scheduler';
+import type { SchedulerRef, SchedulerTypes } from 'devextreme-react/scheduler';
 import { ContextMenu } from 'devextreme-react/context-menu';
 import type { ContextMenuTypes } from 'devextreme-react/context-menu';
 
-import AppointmentMenuTemplate from './AppointmentTemplate.tsx';
+import ItemTemplate from './itemTemplate.tsx';
 import { data, resourcesData } from './data.ts';
 import type { ContextMenuItem } from './types';
 
 const views: SchedulerTypes.ViewType[] = ['day', 'month'];
 
-const appointmentClassName = '.dx-scheduler-appointment';
-const cellClassName = '.dx-scheduler-date-table-cell';
-
 const onContextMenuItemClick = (e: ContextMenuTypes.ItemClickEvent<ContextMenuItem>) => {
   e.itemData?.onItemClick?.(e);
 };
@@ -22,39 +19,28 @@ const App = () => {
   const schedulerRef = useRef<SchedulerRef>(null);
   const [currentDate, setCurrentDate] = useState(new Date(2020, 10, 25));
   const [contextMenuItems, setContextMenuItems] = useState<ContextMenuItem[]>([]);
-  const [target, setTarget] = useState(appointmentClassName);
-  const [disabled, setDisabled] = useState(true);
-  const [groups, setGroups] = useState<string[] | undefined>(undefined);
+  const [groups, setGroups] = useState<string[]>([]);
   const [crossScrollingEnabled, setCrossScrollingEnabled] = useState(false);
 
-  const onAppointmentContextMenu = useCallback((event: SchedulerTypes.AppointmentContextMenuEvent) => {
-    const { appointmentData, targetedAppointmentData } = event;
-    const scheduler = schedulerRef.current?.instance();
-
-    const resourceItems: ContextMenuItem[] = resourcesData.map((item) => ({
-      ...item,
-      onItemClick: (e: ContextMenuTypes.ItemClickEvent<ContextMenuItem>) => scheduler?.updateAppointment(appointmentData, {
-        ...appointmentData,
-        ...{ roomId: [e.itemData?.id] },
-      }),
-    }));
+  const getAppointmentContextMenuItems = useCallback((e: SchedulerTypes.AppointmentContextMenuEvent) => {
+    const { appointmentData: appointment, targetedAppointmentData: targetedAppointment } = e;
+    const scheduler = e.component;
 
-    setTarget(appointmentClassName);
-    setDisabled(false);
-    setContextMenuItems([
+    return [
       {
         text: 'Open',
-        onItemClick: () => scheduler?.showAppointmentPopup(appointmentData),
+        onItemClick: () => scheduler?.showAppointmentPopup(appointment),
       },
       {
         text: 'Delete',
-        onItemClick: () => scheduler?.deleteAppointment(appointmentData),
+        onItemClick: () => scheduler?.deleteAppointment(appointment),
       },
       {
         text: 'Repeat Weekly',
         beginGroup: true,
-        onItemClick: () => scheduler?.updateAppointment(appointmentData, {
-          startDate: targetedAppointmentData?.startDate,
+        onItemClick: () => scheduler?.updateAppointment(appointment, {
+          ...appointment,
+          startDate: targetedAppointment?.startDate,
           recurrenceRule: 'FREQ=WEEKLY',
         }),
       },
@@ -63,40 +49,50 @@ const App = () => {
         beginGroup: true,
         disabled: true,
       },
-      ...resourceItems,
-    ]);
+      ...resourcesData.map((item) => ({
+        ...item,
+        onItemClick: (clickEvent: ContextMenuTypes.ItemClickEvent<ContextMenuItem>) => {
+          scheduler?.updateAppointment(appointment, {
+            ...appointment,
+            roomId: [clickEvent.itemData?.id],
+          });
+        },
+      })),
+    ];
   }, []);
 
-  const onCellContextMenu = useCallback((e: SchedulerTypes.CellContextMenuEvent) => {
-    const scheduler = schedulerRef.current?.instance();
+  const getCellContextMenuItems = useCallback((e: SchedulerTypes.CellContextMenuEvent) => {
+    const scheduler = e.component;
 
-    setTarget(cellClassName);
-    setDisabled(false);
-    setContextMenuItems([
+    return [
       {
         text: 'New Appointment',
-        onItemClick: () => scheduler?.showAppointmentPopup(
-          { startDate: e.cellData.startDateUTC },
-          true,
-        ),
+        onItemClick: () => {
+          scheduler?.showAppointmentPopup(
+            { startDate: e.cellData.startDateUTC },
+            true,
+          );
+        },
       },
       {
         text: 'New Recurring Appointment',
-        onItemClick: () => scheduler?.showAppointmentPopup(
-          {
-            startDate: e.cellData.startDateUTC,
-            recurrenceRule: 'FREQ=DAILY',
-          },
-          true,
-        ),
+        onItemClick: () => {
+          scheduler?.showAppointmentPopup(
+            {
+              startDate: e.cellData.startDateUTC,
+              recurrenceRule: 'FREQ=DAILY',
+            },
+            true,
+          );
+        },
       },
       {
         text: 'Group by Room/Ungroup',
         beginGroup: true,
         onItemClick: () => {
-          if (groups) {
+          if (groups.length) {
             setCrossScrollingEnabled(false);
-            setGroups(undefined);
+            setGroups([]);
           } else {
             setCrossScrollingEnabled(true);
             setGroups(['roomId']);
@@ -109,9 +105,23 @@ const App = () => {
           setCurrentDate(new Date());
         },
       },
-    ]);
+    ];
   }, [groups]);
 
+  const onAppointmentContextMenu = useCallback((e: SchedulerTypes.AppointmentContextMenuEvent) => {
+    const items = getAppointmentContextMenuItems(e);
+    setContextMenuItems(items);
+  }, [getAppointmentContextMenuItems]);
+
+  const onCellContextMenu = useCallback((e: SchedulerTypes.CellContextMenuEvent) => {
+    const items = getCellContextMenuItems(e);
+    setContextMenuItems(items);
+  }, [getCellContextMenuItems]);
+
+  const onContextMenuHiding = useCallback(() => {
+    setContextMenuItems([]);
+  }, []);
+
   return (
     <>
       <Scheduler
@@ -139,10 +149,10 @@ const App = () => {
       <ContextMenu
         dataSource={contextMenuItems}
         width={200}
-        target={target}
-        disabled={disabled}
+        target='.dx-scheduler'
         onItemClick={onContextMenuItemClick}
-        itemComponent={AppointmentMenuTemplate}
+        onHiding={onContextMenuHiding}
+        itemComponent={ItemTemplate}
       />
     </>
   );

apps/demos/Demos/Scheduler/ContextMenu/React/index.html

@@ -6,6 +6,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
     <link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.light.css" />
+    <link rel="stylesheet" type="text/css" href="styles.css" />
 
     <script src="../../../../node_modules/core-js/client/shim.min.js"></script>
     <script src="../../../../node_modules/systemjs/dist/system.js"></script>

apps/demos/Demos/Scheduler/ContextMenu/React/AppointmentTemplate.tsx → apps/demos/Demos/Scheduler/ContextMenu/React/itemTemplate.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 
-type AppointmentMenuTemplateProps = {
+type ItemTemplateProps = {
   data: {
     color: string;
     text: string;
   }
 };
 
-const AppointmentMenuTemplate = (props: AppointmentMenuTemplateProps) => (
+const ItemTemplate = (props: ItemTemplateProps) => (
   <div>
     {props.data.color && <div className="item-badge" style={{ backgroundColor: props.data.color }} />}
     {props.data.text}
   </div>
 );
 
-export default AppointmentMenuTemplate;
+export default ItemTemplate;