Fix TS problems and make TS improvements in demos (Editors) - part 2 (#32020) (#32039)

Signed-off-by: Andrei Kharitonov <pharret31@gmail.com>

Author: pharret31

apps/demos/Demos/FileUploader/ChunkUpload/React/App.tsx

@@ -1,28 +1,30 @@
 import React, { useCallback, useState } from 'react';
-import FileUploader, { type FileUploaderTypes } from 'devextreme-react/file-uploader';
+import FileUploader from 'devextreme-react/file-uploader';
+import type { FileUploaderTypes } from 'devextreme-react/file-uploader';
+import type { Chunk } from './types.ts';
 
-function getValueInKb(value: number) {
+function getValueInKb(value: number): string {
   return `${(value / 1024).toFixed(0)}kb`;
 }
 
 export default function App() {
-  const [chunks, setChunks] = useState([]);
+  const [chunks, setChunks] = useState<Chunk[]>([]);
 
-  const onUploadProgress = useCallback((e: FileUploaderTypes.ProgressEvent) => {
+  const onUploadProgress = useCallback((e: FileUploaderTypes.ProgressEvent): void => {
     const chunk = {
       segmentSize: e.segmentSize,
       bytesLoaded: e.bytesLoaded,
       bytesTotal: e.bytesTotal,
     };
     setChunks([...chunks, chunk]);
-  }, [chunks, setChunks]);
+  }, [chunks]);
 
   const onUploadStarted = useCallback(() => {
     setChunks([]);
-  }, [setChunks]);
+  }, []);
 
   return (
-    <React.Fragment>
+    <>
       <FileUploader
         name="file"
         accept="image/*"
@@ -35,18 +37,18 @@ export default function App() {
       <span className="note">Maximum file size: <span>4 MB.</span></span>
       <div className="chunk-panel">
         {
-          chunks.map((c, i) => (
-            <div key={i}>
+          chunks.map((chunk: Chunk, index: number) => (
+            <div key={index}>
               <span>Chunk size:</span>
-              <span className="segment-size">{getValueInKb(c.segmentSize)}</span>
+              <span className="segment-size">{getValueInKb(chunk.segmentSize)}</span>
               <span>, Uploaded:</span>
-              <span className="loaded-size">{getValueInKb(c.bytesLoaded)}</span>
+              <span className="loaded-size">{getValueInKb(chunk.bytesLoaded)}</span>
               <span>/</span>
-              <span className="total-size">{getValueInKb(c.bytesTotal)}</span>
+              <span className="total-size">{getValueInKb(chunk.bytesTotal)}</span>
             </div>
           ))
         }
       </div>
-    </React.Fragment>
+    </>
   );
 }

apps/demos/Demos/FileUploader/ChunkUpload/React/types.ts

@@ -0,0 +1,5 @@
+export type Chunk = {
+  segmentSize: number;
+  bytesLoaded: number;
+  bytesTotal: number;
+};

apps/demos/Demos/FileUploader/ChunkUpload/ReactJs/App.js

@@ -15,13 +15,13 @@ export default function App() {
       };
       setChunks([...chunks, chunk]);
     },
-    [chunks, setChunks],
+    [chunks],
   );
   const onUploadStarted = useCallback(() => {
     setChunks([]);
-  }, [setChunks]);
+  }, []);
   return (
-    <React.Fragment>
+    <>
       <FileUploader
         name="file"
         accept="image/*"
@@ -37,17 +37,17 @@ export default function App() {
         Maximum file size: <span>4 MB.</span>
       </span>
       <div className="chunk-panel">
-        {chunks.map((c, i) => (
-          <div key={i}>
+        {chunks.map((chunk, index) => (
+          <div key={index}>
             <span>Chunk size:</span>
-            <span className="segment-size">{getValueInKb(c.segmentSize)}</span>
+            <span className="segment-size">{getValueInKb(chunk.segmentSize)}</span>
             <span>, Uploaded:</span>
-            <span className="loaded-size">{getValueInKb(c.bytesLoaded)}</span>
+            <span className="loaded-size">{getValueInKb(chunk.bytesLoaded)}</span>
             <span>/</span>
-            <span className="total-size">{getValueInKb(c.bytesTotal)}</span>
+            <span className="total-size">{getValueInKb(chunk.bytesTotal)}</span>
           </div>
         ))}
       </div>
-    </React.Fragment>
+    </>
   );
 }

apps/demos/Demos/FileUploader/CustomDropzone/React/App.tsx

@@ -1,17 +1,18 @@
 import React, { useCallback, useState } from 'react';
-import FileUploader, { type FileUploaderTypes } from 'devextreme-react/file-uploader';
+import FileUploader from 'devextreme-react/file-uploader';
+import type { FileUploaderTypes } from 'devextreme-react/file-uploader';
 import ProgressBar from 'devextreme-react/progress-bar';
 
-const allowedFileExtensions = ['.jpg', '.jpeg', '.gif', '.png'];
+const allowedFileExtensions: string[] = ['.jpg', '.jpeg', '.gif', '.png'];
 
 export default function App() {
-  const [isDropZoneActive, setIsDropZoneActive] = useState(false);
+  const [isDropZoneActive, setIsDropZoneActive] = useState<boolean>(false);
   const [imageSource, setImageSource] = useState<string>('');
-  const [textVisible, setTextVisible] = useState(true);
-  const [progressVisible, setProgressVisible] = useState(false);
-  const [progressValue, setProgressValue] = useState(0);
+  const [textVisible, setTextVisible] = useState<boolean>(true);
+  const [progressVisible, setProgressVisible] = useState<boolean>(false);
+  const [progressValue, setProgressValue] = useState<number>(0);
 
-  const onDropZoneEnter = useCallback(({ component, dropZoneElement, event }) => {
+  const onDropZoneEnter = useCallback(({ component, dropZoneElement, event }): void => {
     if (dropZoneElement.id === 'dropzone-external') {
       const items = event.originalEvent.dataTransfer.items;
 
@@ -25,35 +26,35 @@ export default function App() {
         setIsDropZoneActive(true);
       }
     }
-  }, [setIsDropZoneActive]);
+  }, []);
 
-  const onDropZoneLeave = useCallback((e: FileUploaderTypes.DropZoneLeaveEvent) => {
+  const onDropZoneLeave = useCallback((e: FileUploaderTypes.DropZoneLeaveEvent): void => {
     if (e.dropZoneElement.id === 'dropzone-external') {
       setIsDropZoneActive(false);
     }
-  }, [setIsDropZoneActive]);
+  }, []);
 
-  const onUploaded = useCallback((e: FileUploaderTypes.UploadedEvent) => {
+  const onUploaded = useCallback((e: FileUploaderTypes.UploadedEvent): void => {
     const { file } = e;
     const fileReader = new FileReader();
-    fileReader.onload = () => {
+    fileReader.onload = (): void => {
       setIsDropZoneActive(false);
       setImageSource(fileReader.result as string);
     };
     fileReader.readAsDataURL(file);
     setTextVisible(false);
     setProgressVisible(false);
     setProgressValue(0);
-  }, [setImageSource, setIsDropZoneActive, setTextVisible, setProgressVisible, setProgressValue]);
+  }, []);
 
-  const onProgress = useCallback((e: { bytesLoaded: number; bytesTotal: number; }) => {
+  const onProgress = useCallback((e: FileUploaderTypes.ProgressEvent): void => {
     setProgressValue((e.bytesLoaded / e.bytesTotal) * 100);
-  }, [setProgressValue]);
+  }, []);
 
   const onUploadStarted = useCallback(() => {
     setImageSource('');
     setProgressVisible(true);
-  }, [setImageSource, setProgressVisible]);
+  }, []);
 
   return (
     <div className="widget-container flex-box">

apps/demos/Demos/FileUploader/CustomDropzone/ReactJs/App.js

@@ -9,54 +9,42 @@ export default function App() {
   const [textVisible, setTextVisible] = useState(true);
   const [progressVisible, setProgressVisible] = useState(false);
   const [progressValue, setProgressValue] = useState(0);
-  const onDropZoneEnter = useCallback(
-    ({ component, dropZoneElement, event }) => {
-      if (dropZoneElement.id === 'dropzone-external') {
-        const items = event.originalEvent.dataTransfer.items;
-        const currentAllowedFileExtensions = component.option('allowedFileExtensions');
-        const draggedFileExtension = `.${items[0].type.replace(/^image\//, '')}`;
-        const isSingleFileDragged = items.length === 1;
-        const isValidFileExtension = currentAllowedFileExtensions.includes(draggedFileExtension);
-        if (isSingleFileDragged && isValidFileExtension) {
-          setIsDropZoneActive(true);
-        }
+  const onDropZoneEnter = useCallback(({ component, dropZoneElement, event }) => {
+    if (dropZoneElement.id === 'dropzone-external') {
+      const items = event.originalEvent.dataTransfer.items;
+      const currentAllowedFileExtensions = component.option('allowedFileExtensions');
+      const draggedFileExtension = `.${items[0].type.replace(/^image\//, '')}`;
+      const isSingleFileDragged = items.length === 1;
+      const isValidFileExtension = currentAllowedFileExtensions.includes(draggedFileExtension);
+      if (isSingleFileDragged && isValidFileExtension) {
+        setIsDropZoneActive(true);
       }
-    },
-    [setIsDropZoneActive],
-  );
-  const onDropZoneLeave = useCallback(
-    (e) => {
-      if (e.dropZoneElement.id === 'dropzone-external') {
-        setIsDropZoneActive(false);
-      }
-    },
-    [setIsDropZoneActive],
-  );
-  const onUploaded = useCallback(
-    (e) => {
-      const { file } = e;
-      const fileReader = new FileReader();
-      fileReader.onload = () => {
-        setIsDropZoneActive(false);
-        setImageSource(fileReader.result);
-      };
-      fileReader.readAsDataURL(file);
-      setTextVisible(false);
-      setProgressVisible(false);
-      setProgressValue(0);
-    },
-    [setImageSource, setIsDropZoneActive, setTextVisible, setProgressVisible, setProgressValue],
-  );
-  const onProgress = useCallback(
-    (e) => {
-      setProgressValue((e.bytesLoaded / e.bytesTotal) * 100);
-    },
-    [setProgressValue],
-  );
+    }
+  }, []);
+  const onDropZoneLeave = useCallback((e) => {
+    if (e.dropZoneElement.id === 'dropzone-external') {
+      setIsDropZoneActive(false);
+    }
+  }, []);
+  const onUploaded = useCallback((e) => {
+    const { file } = e;
+    const fileReader = new FileReader();
+    fileReader.onload = () => {
+      setIsDropZoneActive(false);
+      setImageSource(fileReader.result);
+    };
+    fileReader.readAsDataURL(file);
+    setTextVisible(false);
+    setProgressVisible(false);
+    setProgressValue(0);
+  }, []);
+  const onProgress = useCallback((e) => {
+    setProgressValue((e.bytesLoaded / e.bytesTotal) * 100);
+  }, []);
   const onUploadStarted = useCallback(() => {
     setImageSource('');
     setProgressVisible(true);
-  }, [setImageSource, setProgressVisible]);
+  }, []);
   return (
     <div className="widget-container flex-box">
       <span>Profile Picture</span>

apps/demos/Demos/FileUploader/FileSelection/React/App.tsx

@@ -9,7 +9,7 @@ const lastNameLabel = { 'aria-label': 'Last Name' };
 const fileUploaderLabel = { 'aria-label': 'Select Photo' };
 
 export default function App() {
-  const formElement = useRef(null);
+  const formElement = useRef<HTMLFormElement>(null);
 
   const onClick = useCallback(() => {
     notify('This demo only illustrates the form upload interface. Uploading to a server is not available.');

apps/demos/Demos/FileUploader/FileUploading/React/App.tsx

@@ -1,38 +1,41 @@
 import React, { useCallback, useState } from 'react';
-import FileUploader, { type FileUploaderTypes } from 'devextreme-react/file-uploader';
-import SelectBox, { type SelectBoxTypes } from 'devextreme-react/select-box';
-import CheckBox, { type CheckBoxTypes } from 'devextreme-react/check-box';
+import FileUploader from 'devextreme-react/file-uploader';
+import type { FileUploaderTypes } from 'devextreme-react/file-uploader';
+import SelectBox from 'devextreme-react/select-box';
+import type { SelectBoxTypes } from 'devextreme-react/select-box';
+import CheckBox from 'devextreme-react/check-box';
+import type { CheckBoxTypes } from 'devextreme-react/check-box';
 
-const uploadModes = ['instantly', 'useButtons'];
+const uploadModes: FileUploaderTypes.FileUploadMode[] = ['instantly', 'useButtons'];
 const fileTypeLabel = { 'aria-label': 'File Type' };
 const uploadModeLabel = { 'aria-label': 'Mode' };
-const fileTypesSource = [
+const fileTypesSource: { name: string, value: string }[] = [
   { name: 'All types', value: '*' },
   { name: 'Images', value: 'image/*' },
   { name: 'Videos', value: 'video/*' },
 ];
 
 export default function App() {
-  const [multiple, setMultiple] = useState(false);
-  const [uploadMode, setUploadMode] = useState<FileUploaderTypes.Properties['uploadMode']>('instantly');
-  const [accept, setAccept] = useState('*');
-  const [selectedFiles, setSelectedFiles] = useState([]);
+  const [multiple, setMultiple] = useState<boolean>(false);
+  const [uploadMode, setUploadMode] = useState<FileUploaderTypes.FileUploadMode>('instantly');
+  const [accept, setAccept] = useState<string>('*');
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
 
-  const onSelectedFilesChanged = useCallback((e: FileUploaderTypes.ValueChangedEvent) => {
-    setSelectedFiles(e.value);
-  }, [setSelectedFiles]);
+  const onSelectedFilesChanged = useCallback(({ value }: FileUploaderTypes.ValueChangedEvent): void => {
+    setSelectedFiles(value);
+  }, []);
 
-  const onAcceptChanged = useCallback((e: SelectBoxTypes.ValueChangedEvent) => {
-    setAccept(e.value);
-  }, [setAccept]);
+  const onAcceptChanged = useCallback(({ value }: SelectBoxTypes.ValueChangedEvent): void => {
+    setAccept(value);
+  }, []);
 
-  const onUploadModeChanged = useCallback((e: SelectBoxTypes.ValueChangedEvent) => {
-    setUploadMode(e.value);
-  }, [setUploadMode]);
+  const onUploadModeChanged = useCallback(({ value }: SelectBoxTypes.ValueChangedEvent): void => {
+    setUploadMode(value);
+  }, []);
 
-  const onMultipleChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent) => {
-    setMultiple(e.value);
-  }, [setMultiple]);
+  const onMultipleChanged = useCallback(({ value }: CheckBoxTypes.ValueChangedEvent): void => {
+    setMultiple(value);
+  }, []);
 
   return (
     <div>
@@ -47,12 +50,12 @@ export default function App() {
         <div className="content" style={{ display: selectedFiles.length > 0 ? 'block' : 'none' }}>
           <div>
             <h4>Selected Files</h4>
-            {selectedFiles.map((file, i) => (
-              <div className="selected-item" key={i}>
+            {selectedFiles.map((file: File, index: number) => (
+              <div className="selected-item" key={index}>
                 <span>{`Name: ${file.name}`}<br /></span>
                 <span>{`Size ${file.size}`}<br /></span>
                 <span>{`Type ${file.type}`}<br /></span>
-                <span>{`Last Modified Date: ${file.lastModifiedDate}`}</span>
+                <span>{`Last Modified Date: ${new Date(file.lastModified).toDateString()}`}</span>
               </div>
             ))}
           </div>