Navigation: fix ts issues in demos

Author: anna-shakhova

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

@@ -2,7 +2,7 @@ import React from 'react';
 import Box, { Item } from 'devextreme-react/box';
 
 const App = () => (
-  <React.Fragment>
+  <>
     <Box direction="row" width="100%" height={75}>
       <Item ratio={1}>
         <div className="rect demo-dark">ratio = 1</div>
@@ -65,7 +65,7 @@ const App = () => (
         <div className="rect demo-dark footer">Footer</div>
       </Item>
     </Box>
-  </React.Fragment>
+  </>
 );
 
 export default App;

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

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import themes from 'devextreme/ui/themes';
+
 import App from './App.tsx';
 
 themes.initialized(() => {

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

@@ -2,7 +2,7 @@ import React from 'react';
 import Box, { Item } from 'devextreme-react/box';
 
 const App = () => (
-  <React.Fragment>
+  <>
     <Box
       direction="row"
       width="100%"
@@ -99,6 +99,6 @@ const App = () => (
         <div className="rect demo-dark footer">Footer</div>
       </Item>
     </Box>
-  </React.Fragment>
+  </>
 );
 export default App;

apps/demos/Demos/Common/CustomTextEditorButtons/ReactJs/App.js

@@ -87,7 +87,7 @@ function App() {
     [setCurrencyValue],
   );
   return (
-    <React.Fragment>
+    <>
       <div className="dx-fieldset">
         <div className="dx-field">
           <div className="dx-field-label">Password TextBox</div>
@@ -157,7 +157,7 @@ function App() {
           </div>
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 export default App;

apps/demos/Demos/Common/EditorAppearanceVariants/ReactJs/App.js

@@ -50,7 +50,7 @@ export default function App() {
     [setLabelMode],
   );
   return (
-    <React.Fragment>
+    <>
       <div className="options">
         <div className="caption">Options</div>
         <div className="editors-modes">
@@ -183,6 +183,6 @@ export default function App() {
         type="default"
         id="validate"
       />
-    </React.Fragment>
+    </>
   );
 }

apps/demos/Demos/Common/EditorsOverview/ReactJs/App.js

@@ -59,7 +59,7 @@ function App() {
     setBorder(e.value);
   }, []);
   return (
-    <React.Fragment>
+    <>
       <div className="settings">
         <div className="column">
           <div className="field">
@@ -152,7 +152,7 @@ function App() {
         transform={transform}
         border={border}
       />
-    </React.Fragment>
+    </>
   );
 }
 export default App;

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

@@ -1,10 +1,12 @@
 import React from 'react';
+
 import {
-  Form, SimpleItem, GroupItem, Label,
+  Form, GroupItem, Label, SimpleItem,
 } from 'devextreme-react/form';
-import { employee, positions, states } from './data.ts';
 import 'devextreme-react/text-area';
 
+import { employee, positions, states } from './data.ts';
+
 const birthDateOptions = { width: '100%' };
 const positionOptions = {
   items: positions,

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import {
-  Form, SimpleItem, GroupItem, Label,
+  Form, GroupItem, Label, SimpleItem,
 } from 'devextreme-react/form';
-import { employee, positions, states } from './data.js';
 import 'devextreme-react/text-area';
+import { employee, positions, states } from './data.js';
 
 const birthDateOptions = { width: '100%' };
 const positionOptions = {

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

@@ -1,9 +1,27 @@
 import React, { useCallback, useState } from 'react';
+
 import { ArrayStore } from 'devextreme-react/common/data';
-import List, { type ListTypes } from 'devextreme-react/list';
+import List from 'devextreme-react/list';
+import type { ListTypes } from 'devextreme-react/list';
 import TileView from 'devextreme-react/tile-view';
+
 import { data } from './data.ts';
 
+interface Hotel {
+  Id: number;
+  Hotel_Name: string;
+  Address: string;
+  Postal_Code: string;
+  City: string;
+  Hotel_Class: string;
+  Price: number;
+  Images: { FileName: string }[];
+}
+
+interface GroupInfo {
+  key: string;
+}
+
 const dataSourceOptions = {
   store: new ArrayStore({
     data,
@@ -24,9 +42,9 @@ const formatCurrency = new Intl.NumberFormat(
   },
 ).format;
 
-const renderListGroup = (group) => <div className="city">{group.key}</div>;
+const renderListGroup = (group: GroupInfo) => <div className="city">{group.key}</div>;
 
-const renderListItem = (item) => (
+const renderListItem = (item: Hotel) => (
   <div>
     <div className="hotel">
       <div className="name">{item.Hotel_Name}</div>
@@ -57,10 +75,10 @@ const App = () => {
     const hotel = e.addedItems[0];
     setCurrentHotel(hotel);
     setSelectedItemKeys([hotel.Id]);
-  }, [setCurrentHotel, setSelectedItemKeys]);
+  }, []);
 
   return (
-    <React.Fragment>
+    <>
       <div className="left">
         <List
           selectionMode="single"
@@ -102,7 +120,7 @@ const App = () => {
         <div className="address">{currentHotel.Postal_Code}, {currentHotel.Address}</div>
         <div className="description">{currentHotel.Description}</div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 

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

@@ -49,16 +49,13 @@ const renderTile = (item) => (
 const App = () => {
   const [currentHotel, setCurrentHotel] = useState(data[0]);
   const [selectedItemKeys, setSelectedItemKeys] = useState([data[0].Id]);
-  const handleListSelectionChange = useCallback(
-    (e) => {
-      const hotel = e.addedItems[0];
-      setCurrentHotel(hotel);
-      setSelectedItemKeys([hotel.Id]);
-    },
-    [setCurrentHotel, setSelectedItemKeys],
-  );
+  const handleListSelectionChange = useCallback((e) => {
+    const hotel = e.addedItems[0];
+    setCurrentHotel(hotel);
+    setSelectedItemKeys([hotel.Id]);
+  }, []);
   return (
-    <React.Fragment>
+    <>
       <div className="left">
         <List
           selectionMode="single"
@@ -106,7 +103,7 @@ const App = () => {
         </div>
         <div className="description">{currentHotel.Description}</div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 export default App;