generate reactjs demos

Author: dmlvr

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

@@ -6,7 +6,7 @@ const TimeCell = (props) => {
   const isDinner = Utils.isDinner(date);
   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/ReactJs/utils.js

@@ -27,9 +27,9 @@ export default class Utils {
   }
 
   static isValidAppointment(component, 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/ContextMenu/ReactJs/App.js

@@ -8,7 +8,7 @@ const views = ['day', 'month'];
 const appointmentClassName = '.dx-scheduler-appointment';
 const cellClassName = '.dx-scheduler-date-table-cell';
 const onContextMenuItemClick = (e) => {
-  e.itemData.onItemClick?.(e);
+  e.itemData?.onItemClick?.(e);
 };
 const App = () => {
   const schedulerRef = useRef(null);
@@ -26,7 +26,7 @@ const App = () => {
       onItemClick: (e) =>
         scheduler?.updateAppointment(appointmentData, {
           ...appointmentData,
-          ...{ roomId: [e.itemData.id] },
+          ...{ roomId: [e.itemData?.id] },
         }),
     }));
     setTarget(appointmentClassName);

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

@@ -10,13 +10,13 @@ const showToast = (event, value, type) => {
   notify(`${event} "${value}" task`, type, 800);
 };
 const showAddedToast = (e) => {
-  showToast('Added', e.appointmentData.text, 'success');
+  showToast('Added', e.appointmentData.text ?? '', 'success');
 };
 const showUpdatedToast = (e) => {
-  showToast('Updated', e.appointmentData.text, 'info');
+  showToast('Updated', e.appointmentData.text ?? '', 'info');
 };
 const showDeletedToast = (e) => {
-  showToast('Deleted', e.appointmentData.text, 'warning');
+  showToast('Deleted', e.appointmentData.text ?? '', 'warning');
 };
 const App = () => {
   const [allowAdding, setAllowAdding] = useState(true);

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

@@ -43,20 +43,20 @@ const App = () => {
   );
   const updateEndDate = useCallback((movie) => {
     const form = formInstanceRef.current;
-    const formData = form.option('formData');
+    const formData = form?.option('formData');
     const { startDate } = formData;
     if (startDate) {
       const newEndDate = new Date(startDate.getTime() + 60 * 1000 * movie.duration);
-      form.updateData('endDate', newEndDate);
+      form?.updateData('endDate', newEndDate);
     }
   }, []);
   const onFormInitialized = useCallback(
     (e) => {
       const form = e.component;
-      formInstanceRef.current = form;
-      form.on('fieldDataChanged', (fieldEvent) => {
+      form && (formInstanceRef.current = form);
+      form?.on('fieldDataChanged', (fieldEvent) => {
         if (fieldEvent.dataField === 'startDate') {
-          const currentFormData = form.option('formData');
+          const currentFormData = form?.option('formData');
           const movie = getMovieById(currentFormData.movieId);
           if (movie) {
             updateEndDate(movie);
@@ -71,7 +71,7 @@ const App = () => {
       const form = formInstanceRef.current;
       const movie = getMovieById(e.value);
       if (movie) {
-        form.updateData('director', movie.director);
+        form?.updateData('director', movie.director);
         updateEndDate(movie);
       }
     },

apps/demos/Demos/Scheduler/Templates/ReactJs/MovieInfoContainer.js

@@ -8,7 +8,7 @@ const MovieInfoContainer = ({ formInstanceRef }) => {
   const [movie, setMovie] = useState(null);
   useEffect(() => {
     const form = formInstanceRef.current;
-    const formData = form.option('formData');
+    const formData = form?.option('formData');
     const currentMovie = getMovieById(formData.movieId);
     setMovie(currentMovie);
     const handleFieldDataChanged = (e) => {
@@ -17,9 +17,9 @@ const MovieInfoContainer = ({ formInstanceRef }) => {
         setMovie(updatedMovie);
       }
     };
-    form.on('fieldDataChanged', handleFieldDataChanged);
+    form?.on('fieldDataChanged', handleFieldDataChanged);
     return () => {
-      form.off('fieldDataChanged', handleFieldDataChanged);
+      form?.off('fieldDataChanged', handleFieldDataChanged);
     };
   }, [formInstanceRef]);
   return (

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

@@ -46,7 +46,7 @@ const App = () => {
       return;
     }
     const currentDate = scheduler.option('currentDate');
-    const cellDuration = scheduler.option('cellDuration');
+    const cellDuration = Number(scheduler.option('cellDuration'));
     const cellDurationMs = cellDuration * MS_IN_HOUR;
     const currentTime = new Date(currentDate).getTime();
     const roundTime = Math.round(currentTime / cellDurationMs) * cellDurationMs;