Skip to content

Commit 349a531

Browse files
pharret31pharret31
authored
Fix TS problems and make TS improvements in demos (Editors) - part 2 (#32020) (#32039)
Signed-off-by: Andrei Kharitonov <[email protected]>
1 parent 36a3d32 commit 349a531

File tree

53 files changed

+523
-450
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+523
-450
lines changed

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

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,30 @@
11
import React, { useCallback, useState } from 'react';
2-
import FileUploader, { type FileUploaderTypes } from 'devextreme-react/file-uploader';
2+
import FileUploader from 'devextreme-react/file-uploader';
3+
import type { FileUploaderTypes } from 'devextreme-react/file-uploader';
4+
import type { Chunk } from './types.ts';
35

4-
function getValueInKb(value: number) {
6+
function getValueInKb(value: number): string {
57
return `${(value / 1024).toFixed(0)}kb`;
68
}
79

810
export default function App() {
9-
const [chunks, setChunks] = useState([]);
11+
const [chunks, setChunks] = useState<Chunk[]>([]);
1012

11-
const onUploadProgress = useCallback((e: FileUploaderTypes.ProgressEvent) => {
13+
const onUploadProgress = useCallback((e: FileUploaderTypes.ProgressEvent): void => {
1214
const chunk = {
1315
segmentSize: e.segmentSize,
1416
bytesLoaded: e.bytesLoaded,
1517
bytesTotal: e.bytesTotal,
1618
};
1719
setChunks([...chunks, chunk]);
18-
}, [chunks, setChunks]);
20+
}, [chunks]);
1921

2022
const onUploadStarted = useCallback(() => {
2123
setChunks([]);
22-
}, [setChunks]);
24+
}, []);
2325

2426
return (
25-
<React.Fragment>
27+
<>
2628
<FileUploader
2729
name="file"
2830
accept="image/*"
@@ -35,18 +37,18 @@ export default function App() {
3537
<span className="note">Maximum file size: <span>4 MB.</span></span>
3638
<div className="chunk-panel">
3739
{
38-
chunks.map((c, i) => (
39-
<div key={i}>
40+
chunks.map((chunk: Chunk, index: number) => (
41+
<div key={index}>
4042
<span>Chunk size:</span>
41-
<span className="segment-size">{getValueInKb(c.segmentSize)}</span>
43+
<span className="segment-size">{getValueInKb(chunk.segmentSize)}</span>
4244
<span>, Uploaded:</span>
43-
<span className="loaded-size">{getValueInKb(c.bytesLoaded)}</span>
45+
<span className="loaded-size">{getValueInKb(chunk.bytesLoaded)}</span>
4446
<span>/</span>
45-
<span className="total-size">{getValueInKb(c.bytesTotal)}</span>
47+
<span className="total-size">{getValueInKb(chunk.bytesTotal)}</span>
4648
</div>
4749
))
4850
}
4951
</div>
50-
</React.Fragment>
52+
</>
5153
);
5254
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export type Chunk = {
2+
segmentSize: number;
3+
bytesLoaded: number;
4+
bytesTotal: number;
5+
};

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,13 @@ export default function App() {
1515
};
1616
setChunks([...chunks, chunk]);
1717
},
18-
[chunks, setChunks],
18+
[chunks],
1919
);
2020
const onUploadStarted = useCallback(() => {
2121
setChunks([]);
22-
}, [setChunks]);
22+
}, []);
2323
return (
24-
<React.Fragment>
24+
<>
2525
<FileUploader
2626
name="file"
2727
accept="image/*"
@@ -37,17 +37,17 @@ export default function App() {
3737
Maximum file size: <span>4 MB.</span>
3838
</span>
3939
<div className="chunk-panel">
40-
{chunks.map((c, i) => (
41-
<div key={i}>
40+
{chunks.map((chunk, index) => (
41+
<div key={index}>
4242
<span>Chunk size:</span>
43-
<span className="segment-size">{getValueInKb(c.segmentSize)}</span>
43+
<span className="segment-size">{getValueInKb(chunk.segmentSize)}</span>
4444
<span>, Uploaded:</span>
45-
<span className="loaded-size">{getValueInKb(c.bytesLoaded)}</span>
45+
<span className="loaded-size">{getValueInKb(chunk.bytesLoaded)}</span>
4646
<span>/</span>
47-
<span className="total-size">{getValueInKb(c.bytesTotal)}</span>
47+
<span className="total-size">{getValueInKb(chunk.bytesTotal)}</span>
4848
</div>
4949
))}
5050
</div>
51-
</React.Fragment>
51+
</>
5252
);
5353
}

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

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
import React, { useCallback, useState } from 'react';
2-
import FileUploader, { type FileUploaderTypes } from 'devextreme-react/file-uploader';
2+
import FileUploader from 'devextreme-react/file-uploader';
3+
import type { FileUploaderTypes } from 'devextreme-react/file-uploader';
34
import ProgressBar from 'devextreme-react/progress-bar';
45

5-
const allowedFileExtensions = ['.jpg', '.jpeg', '.gif', '.png'];
6+
const allowedFileExtensions: string[] = ['.jpg', '.jpeg', '.gif', '.png'];
67

78
export default function App() {
8-
const [isDropZoneActive, setIsDropZoneActive] = useState(false);
9+
const [isDropZoneActive, setIsDropZoneActive] = useState<boolean>(false);
910
const [imageSource, setImageSource] = useState<string>('');
10-
const [textVisible, setTextVisible] = useState(true);
11-
const [progressVisible, setProgressVisible] = useState(false);
12-
const [progressValue, setProgressValue] = useState(0);
11+
const [textVisible, setTextVisible] = useState<boolean>(true);
12+
const [progressVisible, setProgressVisible] = useState<boolean>(false);
13+
const [progressValue, setProgressValue] = useState<number>(0);
1314

14-
const onDropZoneEnter = useCallback(({ component, dropZoneElement, event }) => {
15+
const onDropZoneEnter = useCallback(({ component, dropZoneElement, event }): void => {
1516
if (dropZoneElement.id === 'dropzone-external') {
1617
const items = event.originalEvent.dataTransfer.items;
1718

@@ -25,35 +26,35 @@ export default function App() {
2526
setIsDropZoneActive(true);
2627
}
2728
}
28-
}, [setIsDropZoneActive]);
29+
}, []);
2930

30-
const onDropZoneLeave = useCallback((e: FileUploaderTypes.DropZoneLeaveEvent) => {
31+
const onDropZoneLeave = useCallback((e: FileUploaderTypes.DropZoneLeaveEvent): void => {
3132
if (e.dropZoneElement.id === 'dropzone-external') {
3233
setIsDropZoneActive(false);
3334
}
34-
}, [setIsDropZoneActive]);
35+
}, []);
3536

36-
const onUploaded = useCallback((e: FileUploaderTypes.UploadedEvent) => {
37+
const onUploaded = useCallback((e: FileUploaderTypes.UploadedEvent): void => {
3738
const { file } = e;
3839
const fileReader = new FileReader();
39-
fileReader.onload = () => {
40+
fileReader.onload = (): void => {
4041
setIsDropZoneActive(false);
4142
setImageSource(fileReader.result as string);
4243
};
4344
fileReader.readAsDataURL(file);
4445
setTextVisible(false);
4546
setProgressVisible(false);
4647
setProgressValue(0);
47-
}, [setImageSource, setIsDropZoneActive, setTextVisible, setProgressVisible, setProgressValue]);
48+
}, []);
4849

49-
const onProgress = useCallback((e: { bytesLoaded: number; bytesTotal: number; }) => {
50+
const onProgress = useCallback((e: FileUploaderTypes.ProgressEvent): void => {
5051
setProgressValue((e.bytesLoaded / e.bytesTotal) * 100);
51-
}, [setProgressValue]);
52+
}, []);
5253

5354
const onUploadStarted = useCallback(() => {
5455
setImageSource('');
5556
setProgressVisible(true);
56-
}, [setImageSource, setProgressVisible]);
57+
}, []);
5758

5859
return (
5960
<div className="widget-container flex-box">

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

Lines changed: 32 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -9,54 +9,42 @@ export default function App() {
99
const [textVisible, setTextVisible] = useState(true);
1010
const [progressVisible, setProgressVisible] = useState(false);
1111
const [progressValue, setProgressValue] = useState(0);
12-
const onDropZoneEnter = useCallback(
13-
({ component, dropZoneElement, event }) => {
14-
if (dropZoneElement.id === 'dropzone-external') {
15-
const items = event.originalEvent.dataTransfer.items;
16-
const currentAllowedFileExtensions = component.option('allowedFileExtensions');
17-
const draggedFileExtension = `.${items[0].type.replace(/^image\//, '')}`;
18-
const isSingleFileDragged = items.length === 1;
19-
const isValidFileExtension = currentAllowedFileExtensions.includes(draggedFileExtension);
20-
if (isSingleFileDragged && isValidFileExtension) {
21-
setIsDropZoneActive(true);
22-
}
12+
const onDropZoneEnter = useCallback(({ component, dropZoneElement, event }) => {
13+
if (dropZoneElement.id === 'dropzone-external') {
14+
const items = event.originalEvent.dataTransfer.items;
15+
const currentAllowedFileExtensions = component.option('allowedFileExtensions');
16+
const draggedFileExtension = `.${items[0].type.replace(/^image\//, '')}`;
17+
const isSingleFileDragged = items.length === 1;
18+
const isValidFileExtension = currentAllowedFileExtensions.includes(draggedFileExtension);
19+
if (isSingleFileDragged && isValidFileExtension) {
20+
setIsDropZoneActive(true);
2321
}
24-
},
25-
[setIsDropZoneActive],
26-
);
27-
const onDropZoneLeave = useCallback(
28-
(e) => {
29-
if (e.dropZoneElement.id === 'dropzone-external') {
30-
setIsDropZoneActive(false);
31-
}
32-
},
33-
[setIsDropZoneActive],
34-
);
35-
const onUploaded = useCallback(
36-
(e) => {
37-
const { file } = e;
38-
const fileReader = new FileReader();
39-
fileReader.onload = () => {
40-
setIsDropZoneActive(false);
41-
setImageSource(fileReader.result);
42-
};
43-
fileReader.readAsDataURL(file);
44-
setTextVisible(false);
45-
setProgressVisible(false);
46-
setProgressValue(0);
47-
},
48-
[setImageSource, setIsDropZoneActive, setTextVisible, setProgressVisible, setProgressValue],
49-
);
50-
const onProgress = useCallback(
51-
(e) => {
52-
setProgressValue((e.bytesLoaded / e.bytesTotal) * 100);
53-
},
54-
[setProgressValue],
55-
);
22+
}
23+
}, []);
24+
const onDropZoneLeave = useCallback((e) => {
25+
if (e.dropZoneElement.id === 'dropzone-external') {
26+
setIsDropZoneActive(false);
27+
}
28+
}, []);
29+
const onUploaded = useCallback((e) => {
30+
const { file } = e;
31+
const fileReader = new FileReader();
32+
fileReader.onload = () => {
33+
setIsDropZoneActive(false);
34+
setImageSource(fileReader.result);
35+
};
36+
fileReader.readAsDataURL(file);
37+
setTextVisible(false);
38+
setProgressVisible(false);
39+
setProgressValue(0);
40+
}, []);
41+
const onProgress = useCallback((e) => {
42+
setProgressValue((e.bytesLoaded / e.bytesTotal) * 100);
43+
}, []);
5644
const onUploadStarted = useCallback(() => {
5745
setImageSource('');
5846
setProgressVisible(true);
59-
}, [setImageSource, setProgressVisible]);
47+
}, []);
6048
return (
6149
<div className="widget-container flex-box">
6250
<span>Profile Picture</span>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const lastNameLabel = { 'aria-label': 'Last Name' };
99
const fileUploaderLabel = { 'aria-label': 'Select Photo' };
1010

1111
export default function App() {
12-
const formElement = useRef(null);
12+
const formElement = useRef<HTMLFormElement>(null);
1313

1414
const onClick = useCallback(() => {
1515
notify('This demo only illustrates the form upload interface. Uploading to a server is not available.');

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

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,41 @@
11
import React, { useCallback, useState } from 'react';
2-
import FileUploader, { type FileUploaderTypes } from 'devextreme-react/file-uploader';
3-
import SelectBox, { type SelectBoxTypes } from 'devextreme-react/select-box';
4-
import CheckBox, { type CheckBoxTypes } from 'devextreme-react/check-box';
2+
import FileUploader from 'devextreme-react/file-uploader';
3+
import type { FileUploaderTypes } from 'devextreme-react/file-uploader';
4+
import SelectBox from 'devextreme-react/select-box';
5+
import type { SelectBoxTypes } from 'devextreme-react/select-box';
6+
import CheckBox from 'devextreme-react/check-box';
7+
import type { CheckBoxTypes } from 'devextreme-react/check-box';
58

6-
const uploadModes = ['instantly', 'useButtons'];
9+
const uploadModes: FileUploaderTypes.FileUploadMode[] = ['instantly', 'useButtons'];
710
const fileTypeLabel = { 'aria-label': 'File Type' };
811
const uploadModeLabel = { 'aria-label': 'Mode' };
9-
const fileTypesSource = [
12+
const fileTypesSource: { name: string, value: string }[] = [
1013
{ name: 'All types', value: '*' },
1114
{ name: 'Images', value: 'image/*' },
1215
{ name: 'Videos', value: 'video/*' },
1316
];
1417

1518
export default function App() {
16-
const [multiple, setMultiple] = useState(false);
17-
const [uploadMode, setUploadMode] = useState<FileUploaderTypes.Properties['uploadMode']>('instantly');
18-
const [accept, setAccept] = useState('*');
19-
const [selectedFiles, setSelectedFiles] = useState([]);
19+
const [multiple, setMultiple] = useState<boolean>(false);
20+
const [uploadMode, setUploadMode] = useState<FileUploaderTypes.FileUploadMode>('instantly');
21+
const [accept, setAccept] = useState<string>('*');
22+
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
2023

21-
const onSelectedFilesChanged = useCallback((e: FileUploaderTypes.ValueChangedEvent) => {
22-
setSelectedFiles(e.value);
23-
}, [setSelectedFiles]);
24+
const onSelectedFilesChanged = useCallback(({ value }: FileUploaderTypes.ValueChangedEvent): void => {
25+
setSelectedFiles(value);
26+
}, []);
2427

25-
const onAcceptChanged = useCallback((e: SelectBoxTypes.ValueChangedEvent) => {
26-
setAccept(e.value);
27-
}, [setAccept]);
28+
const onAcceptChanged = useCallback(({ value }: SelectBoxTypes.ValueChangedEvent): void => {
29+
setAccept(value);
30+
}, []);
2831

29-
const onUploadModeChanged = useCallback((e: SelectBoxTypes.ValueChangedEvent) => {
30-
setUploadMode(e.value);
31-
}, [setUploadMode]);
32+
const onUploadModeChanged = useCallback(({ value }: SelectBoxTypes.ValueChangedEvent): void => {
33+
setUploadMode(value);
34+
}, []);
3235

33-
const onMultipleChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent) => {
34-
setMultiple(e.value);
35-
}, [setMultiple]);
36+
const onMultipleChanged = useCallback(({ value }: CheckBoxTypes.ValueChangedEvent): void => {
37+
setMultiple(value);
38+
}, []);
3639

3740
return (
3841
<div>
@@ -47,12 +50,12 @@ export default function App() {
4750
<div className="content" style={{ display: selectedFiles.length > 0 ? 'block' : 'none' }}>
4851
<div>
4952
<h4>Selected Files</h4>
50-
{selectedFiles.map((file, i) => (
51-
<div className="selected-item" key={i}>
53+
{selectedFiles.map((file: File, index: number) => (
54+
<div className="selected-item" key={index}>
5255
<span>{`Name: ${file.name}`}<br /></span>
5356
<span>{`Size ${file.size}`}<br /></span>
5457
<span>{`Type ${file.type}`}<br /></span>
55-
<span>{`Last Modified Date: ${file.lastModifiedDate}`}</span>
58+
<span>{`Last Modified Date: ${new Date(file.lastModified).toDateString()}`}</span>
5659
</div>
5760
))}
5861
</div>

0 commit comments

Comments
 (0)