Scheduler: fix ts issues in demos in strict mode (#32101)

Co-authored-by: EugeniyKiyashko <[email protected]>

Author: dmlvr

apps/demos/Demos/Pagination/Overview/React/EmployeeCard.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Employee } from './data';
+import type { Employee } from './data';
 
 interface EmployeeCardProps {
   employee: Employee;

apps/demos/Demos/Pagination/Overview/React/EmployeesGallery.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import EmployeeCard from './EmployeeCard.tsx';
-import { Employee } from './data';
+import type { Employee } from './data';
 
 interface EmployeeGalleryProps {
   employees: Employee[];

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

@@ -1,6 +1,8 @@
 import React, { useCallback, useState } from 'react';
-import Scheduler, { type SchedulerTypes } from 'devextreme-react/scheduler';
-import RadioGroup, { type RadioGroupTypes } from 'devextreme-react/radio-group';
+import Scheduler from 'devextreme-react/scheduler';
+import RadioGroup from 'devextreme-react/radio-group';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
+import type { RadioGroupTypes } from 'devextreme-react/radio-group';
 import { data } from './data.ts';
 
 const currentDate = new Date(2021, 2, 28);

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import Scheduler, { Resource, type SchedulerTypes } from 'devextreme-react/scheduler';
+import Scheduler, { Resource } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 import { data, resourcesData } from './data.ts';
 

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

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import Scheduler, { type SchedulerTypes } from 'devextreme-react/scheduler';
+import Scheduler from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 
 import { data } from './data.ts';
 

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

@@ -37,7 +37,8 @@ const notifyDisableDate = () => {
 };
 
 const onContentReady = (e: SchedulerTypes.ContentReadyEvent) => {
-  setComponentAria(e.component?.$element());
+  const element = e.component?.element();
+  element && setComponentAria(element);
 };
 
 const applyDisableDatesToDateEditors = (form: ReturnType<FormRef['instance']>) => {
@@ -75,11 +76,11 @@ const onAppointmentUpdating = (e: SchedulerTypes.AppointmentUpdatingEvent) => {
   }
 };
 
-const setComponentAria = (element) => {
-  const prevAria = element?.attr('aria-label') || '';
+const setComponentAria = (element: HTMLElement) => {
+  const prevAria = element.getAttribute('aria-label') || '';
   const description = ariaDescription();
   const nextAria = `${prevAria}${description ? ` ${description}` : ''}`;
-  element?.attr('aria-label', nextAria);
+  element.setAttribute('aria-label', nextAria);
 };
 
 const App = () => {

apps/demos/Demos/Scheduler/CellTemplates/React/DateCell.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type SchedulerTypes } from 'devextreme-react/scheduler';
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
 import Utils from './utils.ts';
 
 interface DateCellProps {

apps/demos/Demos/Scheduler/CellTemplates/React/TimeCell.tsx

@@ -12,7 +12,7 @@ const TimeCell = (props: TimeCellProps) => {
   const hasCoffeeCupIcon = Utils.hasCoffeeCupIcon(date);
 
   return (
-    <div className={isDinner ? 'dinner' : null}>
+    <div className={isDinner ? 'dinner' : undefined}>
       {text}
       {hasCoffeeCupIcon && <div className='cafe' />}
     </div>

apps/demos/Demos/Scheduler/CellTemplates/React/utils.ts

@@ -29,9 +29,9 @@ export default class Utils {
   }
 
   static isValidAppointment(component: SchedulerTypes.AppointmentAddingEvent['component'], appointmentData: SchedulerTypes.AppointmentAddingEvent['appointmentData']) {
-    const startDate = new Date(appointmentData.startDate);
-    const endDate = new Date(appointmentData.endDate);
-    const cellDuration = component.option('cellDuration');
+    const startDate = appointmentData.startDate ? new Date(appointmentData.startDate) : new Date();
+    const endDate = appointmentData.endDate ? new Date(appointmentData.endDate) : new Date();
+    const cellDuration = Number(component.option('cellDuration'));
     return Utils.isValidAppointmentInterval(startDate, endDate, cellDuration);
   }
 

apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js

@@ -37,7 +37,8 @@ const notifyDisableDate = () => {
   );
 };
 const onContentReady = (e) => {
-  setComponentAria(e.component?.$element());
+  const element = e.component?.element();
+  element && setComponentAria(element);
 };
 const applyDisableDatesToDateEditors = (form) => {
   const startDateEditor = form.getEditor('startDate');
@@ -70,10 +71,10 @@ const onAppointmentUpdating = (e) => {
   }
 };
 const setComponentAria = (element) => {
-  const prevAria = element?.attr('aria-label') || '';
+  const prevAria = element.getAttribute('aria-label') || '';
   const description = ariaDescription();
   const nextAria = `${prevAria}${description ? ` ${description}` : ''}`;
-  element?.attr('aria-label', nextAria);
+  element.setAttribute('aria-label', nextAria);
 };
 const App = () => {
   const [currentView, setCurrentView] = useState(views[0]);