Skip to content

Commit 36a3d32

Browse files
pharret31pharret31
authored
Fix TS problems and make TS improvements in demos (Editors) - part 1 (#32010) (#32038)
Signed-off-by: Andrei Kharitonov <[email protected]>
1 parent 14b7503 commit 36a3d32

File tree

65 files changed

+951
-904
lines changed

Some content is hidden

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

65 files changed

+951
-904
lines changed

‎apps/demos/Demos/Autocomplete/Overview/React/App.tsx‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React, { useCallback, useState } from 'react';
22
import { CustomStore } from 'devextreme-react/common/data';
3+
import type { LoadOptions } from 'devextreme-react/common/data';
34
import { Autocomplete, type AutocompleteTypes } from 'devextreme-react/autocomplete';
45
import 'whatwg-fetch';
56
import { names, surnames, positions } from './data.ts';
67
import AspNetData from 'devextreme-aspnet-data-nojquery';
78

8-
function isNotEmpty(value: string) {
9+
function isNotEmpty(value: string): boolean {
910
return value !== undefined && value !== null && value !== '';
1011
}
1112

@@ -20,51 +21,51 @@ const states = AspNetData.createStore({
2021
const clientsStore = new CustomStore({
2122
key: 'Value',
2223
useDefaultSearch: true,
23-
load: (loadOptions) => {
24+
load: (loadOptions: LoadOptions) => {
2425
let params = '?';
25-
['skip', 'take', 'filter'].forEach((option) => {
26+
['skip', 'take', 'filter'].forEach((option: string): void => {
2627
if (option in loadOptions && isNotEmpty(loadOptions[option])) {
2728
params += `${option}=${JSON.stringify(loadOptions[option])}&`;
2829
}
2930
});
3031
params = params.slice(0, -1);
3132
return fetch(`https://js.devexpress.com/Demos/NetCore/api/DataGridWebApi/CustomersLookup${params}`)
32-
.then((response) => response.json())
33+
.then((response: Response) => response.json())
3334
.then((data) => ({
3435
data: data.data,
3536
}))
36-
.catch(() => {
37+
.catch((): never => {
3738
throw new Error('Data Loading Error');
3839
});
3940
},
4041
});
4142

42-
const renderState = (data) => (
43+
const renderState = (data: { Name: string, Short: string }) => (
4344
<span>
4445
{data.Name} ({data.Short})
4546
</span>
4647
);
4748

4849
function App() {
49-
const [firstName, setFirstName] = useState('');
50-
const [lastName, setLastName] = useState('');
50+
const [firstName, setFirstName] = useState<string>('');
51+
const [lastName, setLastName] = useState<string>('');
5152

52-
const [state, setState] = useState('');
53-
const [currentClient, setCurrentClient] = useState('');
53+
const [state, setState] = useState<string>('');
54+
const [currentClient, setCurrentClient] = useState<string>('');
5455

55-
const handleFirstNameChange = useCallback((e: AutocompleteTypes.ValueChangedEvent) => {
56+
const handleFirstNameChange = useCallback((e: AutocompleteTypes.ValueChangedEvent): void => {
5657
setFirstName(e.value);
5758
}, []);
5859

59-
const handleLastNameChange = useCallback((e: AutocompleteTypes.ValueChangedEvent) => {
60+
const handleLastNameChange = useCallback((e: AutocompleteTypes.ValueChangedEvent): void => {
6061
setLastName(e.value);
6162
}, []);
6263

63-
const handleStateChange = useCallback((e: AutocompleteTypes.ValueChangedEvent) => {
64+
const handleStateChange = useCallback((e: AutocompleteTypes.ValueChangedEvent): void => {
6465
setState(e.value);
6566
}, []);
6667

67-
const handleCurrentClientChange = useCallback((e: AutocompleteTypes.ValueChangedEvent) => {
68+
const handleCurrentClientChange = useCallback((e: AutocompleteTypes.ValueChangedEvent): void => {
6869
setCurrentClient(e.value);
6970
}, []);
7071

‎apps/demos/Demos/Autocomplete/Overview/React/data.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
export const names = ['James', 'John', 'Robert', 'Michael', 'William', 'David', 'Richard', 'Charles', 'Joseph', 'Thomas', 'Christopher', 'Daniel', 'Paul', 'Mark', 'Donald', 'George', 'Kenneth', 'Steven', 'Edward', 'Brian', 'Ronald', 'Anthony', 'Kevin', 'Jason', 'Jeff', 'Mary', 'Patricia', 'Linda', 'Barbara', 'Elizabeth', 'Jennifer', 'Maria', 'Susan', 'Margaret', 'Dorothy', 'Lisa', 'Nancy', 'Karen', 'Betty', 'Helen', 'Sandra', 'Donna', 'Carol', 'Ruth', 'Sharon', 'Michelle', 'Laura', 'Sarah', 'Kimberly', 'Deborah'];
1+
export const names: string[] = ['James', 'John', 'Robert', 'Michael', 'William', 'David', 'Richard', 'Charles', 'Joseph', 'Thomas', 'Christopher', 'Daniel', 'Paul', 'Mark', 'Donald', 'George', 'Kenneth', 'Steven', 'Edward', 'Brian', 'Ronald', 'Anthony', 'Kevin', 'Jason', 'Jeff', 'Mary', 'Patricia', 'Linda', 'Barbara', 'Elizabeth', 'Jennifer', 'Maria', 'Susan', 'Margaret', 'Dorothy', 'Lisa', 'Nancy', 'Karen', 'Betty', 'Helen', 'Sandra', 'Donna', 'Carol', 'Ruth', 'Sharon', 'Michelle', 'Laura', 'Sarah', 'Kimberly', 'Deborah'];
22

3-
export const surnames = ['Anderson', 'Smith', 'Johnson', 'Williams', 'Jones', 'Brown', 'Davis', 'Miller', 'Wilson', 'Moore', 'Taylor', 'Thomas', 'Jackson', 'White', 'Harris', 'Martin', 'Thompson', 'Garcia', 'Martinez', 'Robinson', 'Clark', 'Rodriguez', 'Lewis', 'Lee',
3+
export const surnames: string[] = ['Anderson', 'Smith', 'Johnson', 'Williams', 'Jones', 'Brown', 'Davis', 'Miller', 'Wilson', 'Moore', 'Taylor', 'Thomas', 'Jackson', 'White', 'Harris', 'Martin', 'Thompson', 'Garcia', 'Martinez', 'Robinson', 'Clark', 'Rodriguez', 'Lewis', 'Lee',
44
'Walker', 'Hall', 'Allen', 'Young', 'Hernandez', 'King', 'Wright', 'Lopez', 'Hill', 'Scott', 'Green', 'Adams', 'Baker', 'Gonzalez', 'Nelson', 'Carter', 'Mitchell', 'Perez', 'Roberts', 'Turner', 'Phillips', 'Campbell',
55
'Parker', 'Evans', 'Edwards', 'Collins',
66
];
77

8-
export const positions = ['CEO', 'COO', 'CTO', 'CMO', 'HR Manager', 'IT Manager', 'Controller', 'Sales Manager', 'Support Manager'];
8+
export const positions: string[] = ['CEO', 'COO', 'CTO', 'CMO', 'HR Manager', 'IT Manager', 'Controller', 'Sales Manager', 'Support Manager'];

‎apps/demos/Demos/Calendar/MultipleSelection/React/App.tsx‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,58 @@
11
import React, { useCallback, useRef, useState } from 'react';
22
import CheckBox from 'devextreme-react/check-box';
3+
import type { CheckBoxTypes } from 'devextreme-react/check-box';
34
import SelectBox from 'devextreme-react/select-box';
5+
import type { SelectBoxTypes } from 'devextreme-react/select-box';
46
import Button from 'devextreme-react/button';
5-
import Calendar, { type CalendarTypes } from 'devextreme-react/calendar';
7+
import Calendar from 'devextreme-react/calendar';
8+
import type { CalendarTypes, CalendarRef } from 'devextreme-react/calendar';
69

710
const selectionModes = ['single', 'multiple', 'range'];
811
const selectionModeLabel = { 'aria-label': 'Selection Mode' };
912

10-
const isWeekend = (date) => {
13+
const isWeekend = (date: Date): boolean => {
1114
const day = date.getDay();
1215
return day === 0 || day === 6;
1316
};
14-
const isDateDisabled = ({ view, date }) => view === 'month' && isWeekend(date);
17+
const isDateDisabled = ({ view, date }: CalendarTypes.DisabledDate): boolean => view === 'month' && isWeekend(date);
1518
const now = new Date().getTime();
1619
const msInDay = 1000 * 60 * 60 * 24;
1720
const initialValue = [now, now + msInDay];
1821

1922
export default function App() {
20-
const calendar = useRef(null);
21-
const [selectWeekOnClick, setSelectWeekOnClick] = useState(true);
23+
const calendar = useRef<CalendarRef>(null);
24+
const [selectWeekOnClick, setSelectWeekOnClick] = useState<boolean>(true);
2225
const [selectionMode, setSelectionMode] = useState<CalendarTypes.CalendarSelectionMode>('multiple');
23-
const [minDateValue, setMinDateValue] = useState(null);
24-
const [maxDateValue, setMaxDateValue] = useState(null);
25-
const [weekendDisabled, setWeekendDisabled] = useState(null);
26+
const [minDateValue, setMinDateValue] = useState<Date | null>(null);
27+
const [maxDateValue, setMaxDateValue] = useState<Date | null>(null);
28+
const [weekendDisabled, setWeekendDisabled] = useState<boolean | null>(null);
2629

27-
const onSelectWeekOnClickChange = useCallback(({ value }) => {
30+
const onSelectWeekOnClickChange = useCallback(({ value }: CheckBoxTypes.ValueChangedEvent): void => {
2831
setSelectWeekOnClick(value);
2932
}, [setSelectWeekOnClick]);
3033

31-
const onSelectionModeChange = useCallback(({ value }) => {
34+
const onSelectionModeChange = useCallback(({ value }: SelectBoxTypes.ValueChangedEvent): void => {
3235
setSelectionMode(value);
3336
}, [setSelectionMode]);
3437

35-
const onMinDateChange = useCallback(({ value }) => {
38+
const onMinDateChange = useCallback(({ value }: CheckBoxTypes.ValueChangedEvent): void => {
3639
setMinDateValue(
3740
value ? new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 3) : null,
3841
);
3942
}, [setMinDateValue]);
4043

41-
const onMaxDateChange = useCallback(({ value }) => {
44+
const onMaxDateChange = useCallback(({ value }: CheckBoxTypes.ValueChangedEvent): void => {
4245
setMaxDateValue(
4346
value ? new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 3) : null,
4447
);
4548
}, [setMaxDateValue]);
4649

47-
const onDisableWeekendChange = useCallback(({ value }) => {
50+
const onDisableWeekendChange = useCallback(({ value }: CheckBoxTypes.ValueChangedEvent): void => {
4851
setWeekendDisabled(value);
4952
}, [setWeekendDisabled]);
5053

5154
const onClearButtonClick = useCallback(() => {
52-
calendar.current.instance().clear();
55+
calendar.current?.instance().clear();
5356
}, []);
5457

5558
return (

‎apps/demos/Demos/Calendar/MultipleSelection/ReactJs/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export default function App() {
5252
[setWeekendDisabled],
5353
);
5454
const onClearButtonClick = useCallback(() => {
55-
calendar.current.instance().clear();
55+
calendar.current?.instance().clear();
5656
}, []);
5757
return (
5858
<div id="calendar-demo">

‎apps/demos/Demos/Calendar/Overview/React/App.tsx‎

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
import React, { useCallback, useState } from 'react';
22
import CheckBox from 'devextreme-react/check-box';
3+
import type { CheckBoxTypes } from 'devextreme-react/check-box';
34
import SelectBox from 'devextreme-react/select-box';
5+
import type { SelectBoxTypes } from 'devextreme-react/select-box';
46
import DateBox from 'devextreme-react/date-box';
5-
import Calendar, { type CalendarTypes } from 'devextreme-react/calendar';
7+
import Calendar from 'devextreme-react/calendar';
8+
import type { CalendarTypes } from 'devextreme-react/calendar';
69
import CustomCell from './CustomCell.tsx';
710

8-
const zoomLevels = ['month', 'year', 'decade', 'century'];
9-
const weekNumberRules = ['auto', 'firstDay', 'firstFourDays', 'fullWeek'];
10-
const weekDays = [
11+
const zoomLevels: CalendarTypes.CalendarZoomLevel[] = ['month', 'year', 'decade', 'century'];
12+
const weekNumberRules: CalendarTypes.WeekNumberRule[] = ['auto', 'firstDay', 'firstFourDays', 'fullWeek'];
13+
const weekDays: { id: number, text: string }[] = [
1114
{ id: 0, text: 'Sunday' },
1215
{ id: 1, text: 'Monday' },
1316
{ id: 2, text: 'Tuesday' },
@@ -24,66 +27,66 @@ const ruleLabel = { 'aria-label': 'Week Number Rule' };
2427

2528
export default function App() {
2629
const [zoomLevel, setZoomLevel] = useState<CalendarTypes.CalendarZoomLevel>('month');
27-
const [currentValue, setCurrentValue] = useState(new Date());
28-
const [useCellTemplate, setUseCellTemplate] = useState(null);
29-
const [disabled, setDisabled] = useState(false);
30-
const [showWeekNumbers, setShowWeekNumbers] = useState(false);
30+
const [currentValue, setCurrentValue] = useState<Date>(new Date());
31+
const [useCellTemplate, setUseCellTemplate] = useState<boolean | null>(null);
32+
const [disabled, setDisabled] = useState<boolean>(false);
33+
const [showWeekNumbers, setShowWeekNumbers] = useState<boolean>(false);
3134
const [firstDay, setFirstDay] = useState<CalendarTypes.FirstDayOfWeek>(0);
3235
const [weekNumberRule, setWeekNumberRule] = useState<CalendarTypes.WeekNumberRule>('auto');
3336

3437
const onCurrentValueChange = useCallback(
35-
({ value }) => {
38+
({ value }: { value?: Date }): void => {
3639
setCurrentValue(value);
3740
},
38-
[setCurrentValue],
41+
[],
3942
);
4043

4144
const onDisabledChange = useCallback(
42-
({ value }) => {
45+
({ value }: CheckBoxTypes.ValueChangedEvent): void => {
4346
setDisabled(value);
4447
},
45-
[setDisabled],
48+
[],
4649
);
4750

4851
const onZoomLevelChange = useCallback(
49-
({ value }) => {
52+
({ value }: Partial<SelectBoxTypes.ValueChangedEvent>): void => {
5053
setZoomLevel(value);
5154
},
52-
[setZoomLevel],
55+
[],
5356
);
5457

5558
const onFirstDayChange = useCallback(
56-
({ value }) => {
59+
({ value }: SelectBoxTypes.ValueChangedEvent): void => {
5760
setFirstDay(value);
5861
},
59-
[setFirstDay],
62+
[],
6063
);
6164

6265
const onWeekNumberRuleChange = useCallback(
63-
({ value }) => {
66+
({ value }: SelectBoxTypes.ValueChangedEvent): void => {
6467
setWeekNumberRule(value);
6568
},
66-
[setWeekNumberRule],
69+
[],
6770
);
6871

6972
const onShowWeekNumbersChange = useCallback(
70-
({ value }) => {
73+
({ value }: CheckBoxTypes.ValueChangedEvent): void => {
7174
setShowWeekNumbers(value);
7275
},
7376
[setShowWeekNumbers],
7477
);
7578

7679
const onUseCellTemplateChange = useCallback(
77-
({ value }) => {
80+
({ value }: CheckBoxTypes.ValueChangedEvent): void => {
7881
setUseCellTemplate(!!value);
7982
},
8083
[setUseCellTemplate],
8184
);
8285

8386
const onOptionChange = useCallback(
84-
(e: { name: string }) => {
87+
(e: CalendarTypes.OptionChangedEvent): void => {
8588
if (e.name === 'zoomLevel') {
86-
onZoomLevelChange(e);
89+
onZoomLevelChange({ value: e.value });
8790
}
8891
},
8992
[onZoomLevelChange],

‎apps/demos/Demos/Calendar/Overview/React/CustomCell.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
import React from 'react';
2+
import type { CalendarTypes } from 'devextreme-react/calendar';
23

3-
export function isWeekend(date: Date) {
4+
export function isWeekend(date: Date): boolean {
45
const day = date.getDay();
56
return day === 0 || day === 6;
67
}
78

8-
const holidays = [
9+
const holidays: number[][] = [
910
[1, 0],
1011
[4, 6],
1112
[25, 11],
1213
];
1314

14-
export function isHoliday(date: Date) {
15-
return holidays.some((item) => date.getDate() === item[0] && date.getMonth() === item[1]);
15+
export function isHoliday(date: Date): boolean {
16+
return holidays.some((item: number[]): boolean => date.getDate() === item[0] && date.getMonth() === item[1]);
1617
}
1718

18-
function getCellCssClass({ date, view }) {
19+
function getCellCssClass({ date, view }: CalendarTypes.CellTemplateData): string {
1920
let cssClass = '';
2021

2122
if (view === 'month') {
@@ -35,7 +36,11 @@ function getCellCssClass({ date, view }) {
3536
return cssClass;
3637
}
3738

38-
function CustomCell({ data: cell }) {
39+
interface CustomCellProps {
40+
data: CalendarTypes.CellTemplateData;
41+
}
42+
43+
function CustomCell({ data: cell }: CustomCellProps) {
3944
const { text } = cell;
4045

4146
const className = getCellCssClass(cell);

‎apps/demos/Demos/Calendar/Overview/ReactJs/App.js‎

Lines changed: 16 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -28,36 +28,21 @@ export default function App() {
2828
const [showWeekNumbers, setShowWeekNumbers] = useState(false);
2929
const [firstDay, setFirstDay] = useState(0);
3030
const [weekNumberRule, setWeekNumberRule] = useState('auto');
31-
const onCurrentValueChange = useCallback(
32-
({ value }) => {
33-
setCurrentValue(value);
34-
},
35-
[setCurrentValue],
36-
);
37-
const onDisabledChange = useCallback(
38-
({ value }) => {
39-
setDisabled(value);
40-
},
41-
[setDisabled],
42-
);
43-
const onZoomLevelChange = useCallback(
44-
({ value }) => {
45-
setZoomLevel(value);
46-
},
47-
[setZoomLevel],
48-
);
49-
const onFirstDayChange = useCallback(
50-
({ value }) => {
51-
setFirstDay(value);
52-
},
53-
[setFirstDay],
54-
);
55-
const onWeekNumberRuleChange = useCallback(
56-
({ value }) => {
57-
setWeekNumberRule(value);
58-
},
59-
[setWeekNumberRule],
60-
);
31+
const onCurrentValueChange = useCallback(({ value }) => {
32+
setCurrentValue(value);
33+
}, []);
34+
const onDisabledChange = useCallback(({ value }) => {
35+
setDisabled(value);
36+
}, []);
37+
const onZoomLevelChange = useCallback(({ value }) => {
38+
setZoomLevel(value);
39+
}, []);
40+
const onFirstDayChange = useCallback(({ value }) => {
41+
setFirstDay(value);
42+
}, []);
43+
const onWeekNumberRuleChange = useCallback(({ value }) => {
44+
setWeekNumberRule(value);
45+
}, []);
6146
const onShowWeekNumbersChange = useCallback(
6247
({ value }) => {
6348
setShowWeekNumbers(value);
@@ -73,7 +58,7 @@ export default function App() {
7358
const onOptionChange = useCallback(
7459
(e) => {
7560
if (e.name === 'zoomLevel') {
76-
onZoomLevelChange(e);
61+
onZoomLevelChange({ value: e.value });
7762
}
7863
},
7964
[onZoomLevelChange],

‎apps/demos/Demos/Chat/AIAndChatbotIntegration/React/App.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,14 @@ loadMessages({
1919

2020
export default function App() {
2121
const {
22-
alerts, insertMessage, fetchAIResponse, regenerateLastAIResponse,
22+
alerts,
23+
insertMessage,
24+
fetchAIResponse,
25+
regenerateLastAIResponse,
2326
} = useApi();
2427

2528
const [typingUsers, setTypingUsers] = useState<ChatTypes.User[]>([]);
26-
const [isProcessing, setIsProcessing] = useState(false);
29+
const [isProcessing, setIsProcessing] = useState<boolean>(false);
2730

2831
const processAIRequest = useCallback(async (message: ChatTypes.Message): Promise<void> => {
2932
setIsProcessing(true);

0 commit comments

Comments
 (0)