Skip to content

Commit b2a4836

Browse files
anna-shakhovaanna-shakhova
authored
Navigation: fix ts issues in demos (#32019)
1 parent fe2bdd1 commit b2a4836

File tree

51 files changed

+374
-265
lines changed

Some content is hidden

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

51 files changed

+374
-265
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import Box, { Item } from 'devextreme-react/box';
33

44
const App = () => (
5-
<React.Fragment>
5+
<>
66
<Box direction="row" width="100%" height={75}>
77
<Item ratio={1}>
88
<div className="rect demo-dark">ratio = 1</div>
@@ -65,7 +65,7 @@ const App = () => (
6565
<div className="rect demo-dark footer">Footer</div>
6666
</Item>
6767
</Box>
68-
</React.Fragment>
68+
</>
6969
);
7070

7171
export default App;

‎apps/demos/Demos/Box/Overview/React/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import ReactDOM from 'react-dom';
33

44
import themes from 'devextreme/ui/themes';
5+
56
import App from './App.tsx';
67

78
themes.initialized(() => {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import Box, { Item } from 'devextreme-react/box';
33

44
const App = () => (
5-
<React.Fragment>
5+
<>
66
<Box
77
direction="row"
88
width="100%"
@@ -99,6 +99,6 @@ const App = () => (
9999
<div className="rect demo-dark footer">Footer</div>
100100
</Item>
101101
</Box>
102-
</React.Fragment>
102+
</>
103103
);
104104
export default App;

‎apps/demos/Demos/Common/FormsOverview/React/App.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import React from 'react';
2+
23
import {
3-
Form, SimpleItem, GroupItem, Label,
4+
Form, GroupItem, Label, SimpleItem,
45
} from 'devextreme-react/form';
5-
import { employee, positions, states } from './data.ts';
66
import 'devextreme-react/text-area';
77

8+
import { employee, positions, states } from './data.ts';
9+
810
const birthDateOptions = { width: '100%' };
911
const positionOptions = {
1012
items: positions,

‎apps/demos/Demos/Common/FormsOverview/ReactJs/App.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react';
22
import {
3-
Form, SimpleItem, GroupItem, Label,
3+
Form, GroupItem, Label, SimpleItem,
44
} from 'devextreme-react/form';
5-
import { employee, positions, states } from './data.js';
65
import 'devextreme-react/text-area';
6+
import { employee, positions, states } from './data.js';
77

88
const birthDateOptions = { width: '100%' };
99
const positionOptions = {

‎apps/demos/Demos/Common/ListsOverview/React/App.tsx‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,27 @@
11
import React, { useCallback, useState } from 'react';
2+
23
import { ArrayStore } from 'devextreme-react/common/data';
3-
import List, { type ListTypes } from 'devextreme-react/list';
4+
import List from 'devextreme-react/list';
5+
import type { ListTypes } from 'devextreme-react/list';
46
import TileView from 'devextreme-react/tile-view';
7+
58
import { data } from './data.ts';
69

10+
interface Hotel {
11+
Id: number;
12+
Hotel_Name: string;
13+
Address: string;
14+
Postal_Code: string;
15+
City: string;
16+
Hotel_Class: string;
17+
Price: number;
18+
Images: { FileName: string }[];
19+
}
20+
21+
interface GroupInfo {
22+
key: string;
23+
}
24+
725
const dataSourceOptions = {
826
store: new ArrayStore({
927
data,
@@ -24,9 +42,9 @@ const formatCurrency = new Intl.NumberFormat(
2442
},
2543
).format;
2644

27-
const renderListGroup = (group) => <div className="city">{group.key}</div>;
45+
const renderListGroup = (group: GroupInfo) => <div className="city">{group.key}</div>;
2846

29-
const renderListItem = (item) => (
47+
const renderListItem = (item: Hotel) => (
3048
<div>
3149
<div className="hotel">
3250
<div className="name">{item.Hotel_Name}</div>
@@ -57,10 +75,10 @@ const App = () => {
5775
const hotel = e.addedItems[0];
5876
setCurrentHotel(hotel);
5977
setSelectedItemKeys([hotel.Id]);
60-
}, [setCurrentHotel, setSelectedItemKeys]);
78+
}, []);
6179

6280
return (
63-
<React.Fragment>
81+
<>
6482
<div className="left">
6583
<List
6684
selectionMode="single"
@@ -102,7 +120,7 @@ const App = () => {
102120
<div className="address">{currentHotel.Postal_Code}, {currentHotel.Address}</div>
103121
<div className="description">{currentHotel.Description}</div>
104122
</div>
105-
</React.Fragment>
123+
</>
106124
);
107125
};
108126

‎apps/demos/Demos/Common/ListsOverview/ReactJs/App.js‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -49,16 +49,13 @@ const renderTile = (item) => (
4949
const App = () => {
5050
const [currentHotel, setCurrentHotel] = useState(data[0]);
5151
const [selectedItemKeys, setSelectedItemKeys] = useState([data[0].Id]);
52-
const handleListSelectionChange = useCallback(
53-
(e) => {
54-
const hotel = e.addedItems[0];
55-
setCurrentHotel(hotel);
56-
setSelectedItemKeys([hotel.Id]);
57-
},
58-
[setCurrentHotel, setSelectedItemKeys],
59-
);
52+
const handleListSelectionChange = useCallback((e) => {
53+
const hotel = e.addedItems[0];
54+
setCurrentHotel(hotel);
55+
setSelectedItemKeys([hotel.Id]);
56+
}, []);
6057
return (
61-
<React.Fragment>
58+
<>
6259
<div className="left">
6360
<List
6461
selectionMode="single"
@@ -106,7 +103,7 @@ const App = () => {
106103
</div>
107104
<div className="description">{currentHotel.Description}</div>
108105
</div>
109-
</React.Fragment>
106+
</>
110107
);
111108
};
112109
export default App;

‎apps/demos/Demos/Common/NavigationOverview/React/App.tsx‎

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,30 @@
11
import React, { useCallback, useState } from 'react';
2-
import TreeView, { type TreeViewTypes } from 'devextreme-react/tree-view';
3-
import TabPanel, { type TabPanelTypes } from 'devextreme-react/tab-panel';
2+
3+
import TabPanel from 'devextreme-react/tab-panel';
4+
import type { TabPanelTypes } from 'devextreme-react/tab-panel';
5+
import TreeView from 'devextreme-react/tree-view';
6+
import type { TreeViewTypes } from 'devextreme-react/tree-view';
7+
48
import { continents } from './data.ts';
59

6-
const renderPanelItemTitle = (item) => <span className="tab-panel-title">{item.text}</span>;
10+
interface City {
11+
text: string;
12+
flag: string;
13+
capital?: boolean;
14+
description: string;
15+
population: string;
16+
area: string;
17+
density: string;
18+
}
19+
20+
interface TabItem {
21+
text: string;
22+
}
23+
24+
const renderPanelItemTitle = (item: TabItem) => <span className="tab-panel-title">{item.text}</span>;
725

8-
const renderPanelItem = (city) => (
9-
<React.Fragment>
26+
const renderPanelItem = (city: City) => (
27+
<>
1028
<img alt="country flag" className="flag" src={city.flag} />
1129
<div className="right-content">
1230
<div>
@@ -38,7 +56,7 @@ const renderPanelItem = (city) => (
3856
</div>
3957
</div>
4058
</div>
41-
</React.Fragment>
59+
</>
4260
);
4361
function App() {
4462
const [tabPanelIndex, setTabPanelIndex] = useState(0);
@@ -54,13 +72,13 @@ function App() {
5472
setCountryData(selectedCountryData);
5573
setCitiesData(selectedCountryData.cities);
5674
}
57-
}, [setTabPanelIndex, setCountryData, setCitiesData]);
75+
}, []);
5876

5977
const handleTabPanelSelectionChange = useCallback((
6078
e: TabPanelTypes.SelectionChangedEvent & { value: any },
6179
) => {
6280
setTabPanelIndex(e.value);
63-
}, [setTabPanelIndex]);
81+
}, []);
6482

6583
return (
6684
<div className="container">

‎apps/demos/Demos/Common/NavigationOverview/ReactJs/App.js‎

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React, { useCallback, useState } from 'react';
2-
import TreeView from 'devextreme-react/tree-view';
32
import TabPanel from 'devextreme-react/tab-panel';
3+
import TreeView from 'devextreme-react/tree-view';
44
import { continents } from './data.js';
55

66
const renderPanelItemTitle = (item) => <span className="tab-panel-title">{item.text}</span>;
77
const renderPanelItem = (city) => (
8-
<React.Fragment>
8+
<>
99
<img
1010
alt="country flag"
1111
className="flag"
@@ -41,29 +41,23 @@ const renderPanelItem = (city) => (
4141
</div>
4242
</div>
4343
</div>
44-
</React.Fragment>
44+
</>
4545
);
4646
function App() {
4747
const [tabPanelIndex, setTabPanelIndex] = useState(0);
4848
const [countryData, setCountryData] = useState(continents[0].items[0]);
4949
const [citiesData, setCitiesData] = useState(continents[0].items[0].cities);
50-
const handleTreeViewSelectionChange = useCallback(
51-
(e) => {
52-
const selectedCountryData = e.itemData;
53-
if (selectedCountryData.cities) {
54-
setTabPanelIndex(0);
55-
setCountryData(selectedCountryData);
56-
setCitiesData(selectedCountryData.cities);
57-
}
58-
},
59-
[setTabPanelIndex, setCountryData, setCitiesData],
60-
);
61-
const handleTabPanelSelectionChange = useCallback(
62-
(e) => {
63-
setTabPanelIndex(e.value);
64-
},
65-
[setTabPanelIndex],
66-
);
50+
const handleTreeViewSelectionChange = useCallback((e) => {
51+
const selectedCountryData = e.itemData;
52+
if (selectedCountryData.cities) {
53+
setTabPanelIndex(0);
54+
setCountryData(selectedCountryData);
55+
setCitiesData(selectedCountryData.cities);
56+
}
57+
}, []);
58+
const handleTabPanelSelectionChange = useCallback((e) => {
59+
setTabPanelIndex(e.value);
60+
}, []);
6761
return (
6862
<div className="container">
6963
<div className="left-content">

‎apps/demos/Demos/Common/NavigationRightToLeftSupport/React/App.tsx‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,44 @@
11
import React, { useCallback, useState } from 'react';
2-
import SelectBox from 'devextreme-react/select-box';
2+
3+
import Accordion from 'devextreme-react/accordion';
34
import Menu from 'devextreme-react/menu';
5+
import SelectBox from 'devextreme-react/select-box';
46
import TreeView from 'devextreme-react/tree-view';
5-
import Accordion from 'devextreme-react/accordion';
7+
68
import { continents, europeCountries, languageLabel } from './data.ts';
79

10+
interface Country {
11+
nameAr: string;
12+
nameEn: string;
13+
capitalAr: string;
14+
capitalEn: string;
15+
population: number;
16+
area: number;
17+
}
18+
19+
interface AccordionItem {
20+
nameAr: string;
21+
nameEn: string;
22+
}
23+
824
const languages = [
925
'Arabic: Right-to-Left direction',
1026
'English: Left-to-Right direction',
1127
];
1228

13-
const renderArabicTitle = (item) => (<div>{item.nameAr}</div>);
29+
const renderArabicTitle = (item: AccordionItem) => (<div>{item.nameAr}</div>);
1430

15-
const renderArabic = (country) => (
31+
const renderArabic = (country: Country) => (
1632
<div>
1733
<div>عاصمة: {country.capitalAr} </div>
1834
<div>عدد السكان: {country.population} نسمة</div>
1935
<div>المساحة: {country.area} كم<sup>2</sup></div>
2036
</div>
2137
);
2238

23-
const renderEnglishTitle = (item) => (<div>{item.nameEn}</div>);
39+
const renderEnglishTitle = (item: AccordionItem) => (<div>{item.nameEn}</div>);
2440

25-
const renderEnglish = (country) => (
41+
const renderEnglish = (country: Country) => (
2642
<div>
2743
<div>Capital: {country.capitalEn} </div>
2844
<div>Population: {country.population} people</div>
@@ -35,7 +51,7 @@ const App = () => {
3551

3652
const selectLanguage = useCallback(({ value }) => {
3753
setRtl(value === languages[0]);
38-
}, [setRtl]);
54+
}, []);
3955

4056
return (
4157
<div className={rtlEnabled ? 'dx-rtl' : ''}>

0 commit comments

Comments
 (0)