Skip to content

Commit 3997745

Browse files
pharret31pharret31
authored
Fix TS problems and make TS improvements in demos (Navigation) (#31955) (#32037)
Signed-off-by: Andrei Kharitonov <[email protected]>
1 parent 82a5cc3 commit 3997745

File tree

214 files changed

+1933
-1770
lines changed

Some content is hidden

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

214 files changed

+1933
-1770
lines changed

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

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,22 @@ import CheckBox, { type CheckBoxTypes } from 'devextreme-react/check-box';
44
import TagBox, { type TagBoxTypes } from 'devextreme-react/tag-box';
55
import Slider, { Tooltip, Label, type SliderTypes } from 'devextreme-react/slider';
66

7-
import service from './data.ts';
7+
import { companies } from './data.ts';
8+
import type { Company } from './types.ts';
89
import CustomTitle from './CustomTitle.tsx';
910
import CustomItem from './CustomItem.tsx';
1011

1112
const companyLabel = { 'aria-label': 'Company' };
12-
const companies = service.getCompanies();
1313

1414
const App = () => {
15-
const [selectedItems, setSelectedItems] = useState([companies[0]]);
16-
const [multiple, setMultiple] = useState(false);
17-
const [collapsible, setCollapsible] = useState(false);
18-
const [animationDuration, setAnimationDuration] = useState(300);
15+
const [selectedItems, setSelectedItems] = useState<Company[]>([companies[0]]);
16+
const [multiple, setMultiple] = useState<boolean>(false);
17+
const [collapsible, setCollapsible] = useState<boolean>(false);
18+
const [animationDuration, setAnimationDuration] = useState<number>(300);
1919

20-
const selectionChanged = useCallback((e: AccordionTypes.SelectionChangedEvent) => {
20+
const selectionChanged = useCallback((e: AccordionTypes.SelectionChangedEvent): void => {
2121
let newItems = [...selectedItems];
22-
e.removedItems.forEach((item) => {
22+
e.removedItems.forEach((item: Company): void => {
2323
const index = newItems.indexOf(item);
2424
if (index >= 0) {
2525
newItems.splice(index, 1);
@@ -31,21 +31,21 @@ const App = () => {
3131
setSelectedItems(newItems);
3232
}, [selectedItems, setSelectedItems]);
3333

34-
const selectedItemsChanged = useCallback((e: TagBoxTypes.ValueChangedEvent) => {
34+
const selectedItemsChanged = useCallback((e: TagBoxTypes.ValueChangedEvent): void => {
3535
setSelectedItems(e.value);
36-
}, [setSelectedItems]);
36+
}, []);
3737

38-
const multipleChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent) => {
38+
const multipleChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent): void => {
3939
setMultiple(e.value);
40-
}, [setMultiple]);
40+
}, []);
4141

42-
const collapsibleChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent) => {
42+
const collapsibleChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent): void => {
4343
setCollapsible(e.value);
44-
}, [setCollapsible]);
44+
}, []);
4545

46-
const animationDurationChanged = useCallback((e: SliderTypes.ValueChangedEvent) => {
46+
const animationDurationChanged = useCallback((e: SliderTypes.ValueChangedEvent): void => {
4747
setAnimationDuration(e.value);
48-
}, [setAnimationDuration]);
48+
}, []);
4949

5050
return (
5151
<div id="accordion">

‎apps/demos/Demos/Accordion/Overview/React/CustomItem.tsx‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,39 @@
11
import React from 'react';
2+
import type { Company } from './types.ts';
3+
4+
export default function CustomItem(company: Company) {
5+
const {
6+
Address,
7+
City,
8+
State,
9+
Zipcode,
10+
Phone,
11+
Fax,
12+
Website,
13+
} = company;
214

3-
export default function CustomItem(data) {
415
return (
516
<div>
617
<div>
718
<p>
8-
<b>{data.City} </b>
9-
(<span>{data.State}</span>)
19+
<b>{City} </b>
20+
(<span>{State}</span>)
1021
</p>
1122
<p>
12-
<span>{data.Zipcode} </span>
13-
<span>{data.Address}</span>
23+
<span>{Zipcode} </span>
24+
<span>{Address}</span>
1425
</p>
1526
</div>
1627
<div>
1728
<p>
18-
Phone: <b>{data.Phone}</b>
29+
Phone: <b>{Phone}</b>
1930
</p>
2031
<p>
21-
Fax: <b>{data.Fax}</b>
32+
Fax: <b>{Fax}</b>
2233
</p>
2334
<p>
24-
Website: <a href={data.Website} target="_blank">
25-
{data.Website}
35+
Website: <a href={Website} target="_blank">
36+
{Website}
2637
</a>
2738
</p>
2839
</div>

‎apps/demos/Demos/Accordion/Overview/React/CustomTitle.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import React from 'react';
2+
import type { Company } from './types.ts';
3+
4+
export default function CustomTitle(company: Company) {
5+
const { CompanyName } = company;
26

3-
export default function CustomTitle(data) {
47
return (
5-
<div className='header'>{data.CompanyName}</div>
8+
<div className='header'>{CompanyName}</div>
69
);
710
}

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

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
const companies = [{
1+
import type { Company } from './types.ts';
2+
3+
export const companies: Company[] = [{
24
ID: 1,
35
CompanyName: 'Super Mart of the West',
46
Address: '702 SW 8th Street',
@@ -39,9 +41,3 @@ const companies = [{
3941
Fax: '(800) 955-2293',
4042
Website: 'http://www.nowebsitetomsclub.dx',
4143
}];
42-
43-
export default {
44-
getCompanies() {
45-
return companies;
46-
},
47-
};

‎apps/demos/Demos/Accordion/Overview/React/types.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export type Company = {
2+
ID: number;
3+
CompanyName: string;
4+
Address: string;
5+
City: string;
6+
State: string;
7+
Zipcode: number;
8+
Phone: string;
9+
Fax: string;
10+
Website: string;
11+
};

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

Lines changed: 13 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,11 @@ import Accordion from 'devextreme-react/accordion';
33
import CheckBox from 'devextreme-react/check-box';
44
import TagBox from 'devextreme-react/tag-box';
55
import Slider, { Tooltip, Label } from 'devextreme-react/slider';
6-
import service from './data.js';
6+
import { companies } from './data.js';
77
import CustomTitle from './CustomTitle.js';
88
import CustomItem from './CustomItem.js';
99

1010
const companyLabel = { 'aria-label': 'Company' };
11-
const companies = service.getCompanies();
1211
const App = () => {
1312
const [selectedItems, setSelectedItems] = useState([companies[0]]);
1413
const [multiple, setMultiple] = useState(false);
@@ -30,30 +29,18 @@ const App = () => {
3029
},
3130
[selectedItems, setSelectedItems],
3231
);
33-
const selectedItemsChanged = useCallback(
34-
(e) => {
35-
setSelectedItems(e.value);
36-
},
37-
[setSelectedItems],
38-
);
39-
const multipleChanged = useCallback(
40-
(e) => {
41-
setMultiple(e.value);
42-
},
43-
[setMultiple],
44-
);
45-
const collapsibleChanged = useCallback(
46-
(e) => {
47-
setCollapsible(e.value);
48-
},
49-
[setCollapsible],
50-
);
51-
const animationDurationChanged = useCallback(
52-
(e) => {
53-
setAnimationDuration(e.value);
54-
},
55-
[setAnimationDuration],
56-
);
32+
const selectedItemsChanged = useCallback((e) => {
33+
setSelectedItems(e.value);
34+
}, []);
35+
const multipleChanged = useCallback((e) => {
36+
setMultiple(e.value);
37+
}, []);
38+
const collapsibleChanged = useCallback((e) => {
39+
setCollapsible(e.value);
40+
}, []);
41+
const animationDurationChanged = useCallback((e) => {
42+
setAnimationDuration(e.value);
43+
}, []);
5744
return (
5845
<div id="accordion">
5946
<Accordion

‎apps/demos/Demos/Accordion/Overview/ReactJs/CustomItem.js‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,34 @@
11
import React from 'react';
22

3-
export default function CustomItem(data) {
3+
export default function CustomItem(company) {
4+
const {
5+
Address, City, State, Zipcode, Phone, Fax, Website,
6+
} = company;
47
return (
58
<div>
69
<div>
710
<p>
8-
<b>{data.City} </b>(<span>{data.State}</span>)
11+
<b>{City} </b>(<span>{State}</span>)
912
</p>
1013
<p>
11-
<span>{data.Zipcode} </span>
12-
<span>{data.Address}</span>
14+
<span>{Zipcode} </span>
15+
<span>{Address}</span>
1316
</p>
1417
</div>
1518
<div>
1619
<p>
17-
Phone: <b>{data.Phone}</b>
20+
Phone: <b>{Phone}</b>
1821
</p>
1922
<p>
20-
Fax: <b>{data.Fax}</b>
23+
Fax: <b>{Fax}</b>
2124
</p>
2225
<p>
2326
Website:{' '}
2427
<a
25-
href={data.Website}
28+
href={Website}
2629
target="_blank"
2730
>
28-
{data.Website}
31+
{Website}
2932
</a>
3033
</p>
3134
</div>

‎apps/demos/Demos/Accordion/Overview/ReactJs/CustomTitle.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22

3-
export default function CustomTitle(data) {
4-
return <div className="header">{data.CompanyName}</div>;
3+
export default function CustomTitle(company) {
4+
const { CompanyName } = company;
5+
return <div className="header">{CompanyName}</div>;
56
}

‎apps/demos/Demos/Accordion/Overview/ReactJs/data.js‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const companies = [
1+
export const companies = [
22
{
33
ID: 1,
44
CompanyName: 'Super Mart of the West',
@@ -44,8 +44,3 @@ const companies = [
4444
Website: 'http://www.nowebsitetomsclub.dx',
4545
},
4646
];
47-
export default {
48-
getCompanies() {
49-
return companies;
50-
},
51-
};

‎apps/demos/Demos/ActionSheet/Basics/React/App.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,34 @@ import notify from 'devextreme/ui/notify';
66
import { actionSheetItems } from './data.ts';
77

88
const App = () => {
9-
const [isActionSheetVisible, setIsActionSheetVisible] = useState(false);
10-
const [showTitle, setShowTitle] = useState(true);
11-
const [showCancelButton, setShowCancelButton] = useState(true);
9+
const [isActionSheetVisible, setIsActionSheetVisible] = useState<boolean>(false);
10+
const [showTitle, setShowTitle] = useState<boolean>(true);
11+
const [showCancelButton, setShowCancelButton] = useState<boolean>(true);
1212

13-
const showActionSheet = useCallback(() => {
13+
const showActionSheet = useCallback((): void => {
1414
setIsActionSheetVisible(true);
15-
}, [setIsActionSheetVisible]);
15+
}, []);
1616

17-
const onActionSheetButtonClick = useCallback((buttonName: string) => {
17+
const onActionSheetButtonClick = useCallback((buttonName: string): void => {
1818
setIsActionSheetVisible(false);
1919
notify(`The "${buttonName}" button is clicked.`);
20-
}, [setIsActionSheetVisible]);
20+
}, []);
2121

22-
const onActionSheetItemClick = useCallback((e: ActionSheetTypes.ItemClickEvent) => {
22+
const onActionSheetItemClick = useCallback((e: ActionSheetTypes.ItemClickEvent): void => {
2323
onActionSheetButtonClick(e.itemData.text);
2424
}, [onActionSheetButtonClick]);
2525

26-
const onActionSheetCancelClick = useCallback(() => {
26+
const onActionSheetCancelClick = useCallback((): void => {
2727
onActionSheetButtonClick('Cancel');
2828
}, [onActionSheetButtonClick]);
2929

30-
const changeTitle = useCallback((e: SwitchTypes.ValueChangedEvent) => {
30+
const changeTitle = useCallback((e: SwitchTypes.ValueChangedEvent): void => {
3131
setShowTitle(e.value);
32-
}, [setShowTitle]);
32+
}, []);
3333

34-
const changeCancelButton = useCallback((e: SwitchTypes.ValueChangedEvent) => {
34+
const changeCancelButton = useCallback((e: SwitchTypes.ValueChangedEvent): void => {
3535
setShowCancelButton(e.value);
36-
}, [setShowCancelButton]);
36+
}, []);
3737

3838
return (
3939
<div>

0 commit comments

Comments
 (0)