Demos: fix ts issues in TreeList React demos

Author: anna-shakhova

apps/demos/Demos/TreeList/AIColumns/React/App.tsx

@@ -1,16 +1,22 @@
 import React from 'react';
+
 import TreeList, {
   Column,
   Scrolling,
   Paging,
   AI,
 } from 'devextreme-react/tree-list';
+import type { TreeListTypes } from 'devextreme-react/tree-list';
+
 import { employees } from './data.ts';
 import { aiIntegration } from './service.ts';
+import type { Employee as EmployeeType } from './types.ts';
 import Employee from './Employee.tsx';
 import Status from './Status.tsx';
 
-const onAIColumnRequestCreating = (e) => {
+const onAIColumnRequestCreating = (
+  e: TreeListTypes.AIColumnRequestCreatingEvent<Partial<EmployeeType>>
+) => {
   e.data = e.data.map((item) => ({
     ID: item.ID,
     First_Name: item.First_Name,

apps/demos/Demos/TreeList/AIColumns/React/Employee.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
+
 import { type TreeListTypes } from 'devextreme-react/tree-list';
+
 import { type Employee } from './types';
 
 export default function Employee(props: TreeListTypes.ColumnCellTemplateData<Employee>) {

apps/demos/Demos/TreeList/AIColumns/React/Status.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
+
 import { type TreeListTypes } from 'devextreme-react/tree-list';
+
 import { type Employee } from './types';
 
 export default function Status(props: TreeListTypes.ColumnCellTemplateData<Employee>) {

apps/demos/Demos/TreeList/AIColumns/React/service.ts

@@ -1,12 +1,14 @@
-import { type AIMessage } from './types';
-import {
-  AIIntegration,
+import { AzureOpenAI } from 'openai';
+
+import { AIIntegration } from 'devextreme-react/common/ai-integration';
+import type {
   RequestParams,
   Response,
 } from 'devextreme-react/common/ai-integration';
-import { AzureOpenAI } from 'openai';
 import notify from 'devextreme/ui/notify';
 
+import type { AIMessage } from './types.ts';
+
 const AzureOpenAIConfig = {
   dangerouslyAllowBrowser: true,
   deployment: 'gpt-4o-mini',

apps/demos/Demos/TreeList/AIColumns/ReactJs/service.js

@@ -1,5 +1,5 @@
-import { AIIntegration } from 'devextreme-react/common/ai-integration';
 import { AzureOpenAI } from 'openai';
+import { AIIntegration } from 'devextreme-react/common/ai-integration';
 import notify from 'devextreme/ui/notify';
 
 const AzureOpenAIConfig = {

apps/demos/Demos/TreeList/FilterModes/React/App.tsx

@@ -1,17 +1,18 @@
 import React, { useState } from 'react';
-import {
-  TreeList, Column, SearchPanel, type TreeListTypes,
-} from 'devextreme-react/tree-list';
+
+import { TreeList, Column, SearchPanel } from 'devextreme-react/tree-list';
+import type { TreeListTypes } from 'devextreme-react/tree-list';
 import SelectBox from 'devextreme-react/select-box';
+
 import { employees, filterLabel } from './data.ts';
 
-const filterModes = ['matchOnly', 'withAncestors', 'fullBranch'];
+const filterModes: TreeListTypes.TreeListFilterMode[] = ['matchOnly', 'withAncestors', 'fullBranch'];
 
 const App = () => {
   const [filterMode, setFilterMode] = useState<TreeListTypes.TreeListFilterMode>('matchOnly');
 
   return (
-    <React.Fragment>
+    <>
       <TreeList
         id="employees"
         dataSource={employees}
@@ -56,7 +57,7 @@ const App = () => {
           </SelectBox>
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 

apps/demos/Demos/TreeList/FilterModes/ReactJs/App.js

@@ -7,7 +7,7 @@ const filterModes = ['matchOnly', 'withAncestors', 'fullBranch'];
 const App = () => {
   const [filterMode, setFilterMode] = useState('matchOnly');
   return (
-    <React.Fragment>
+    <>
       <TreeList
         id="employees"
         dataSource={employees}
@@ -60,7 +60,7 @@ const App = () => {
           ></SelectBox>
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 export default App;

apps/demos/Demos/TreeList/FixedAndStickyColumns/React/App.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
+
 import { TreeList, Column, ColumnFixing } from 'devextreme-react/tree-list';
-import { Employee, employees } from './data.ts';
+
+import { employees } from './data.ts';
+import type { Employee } from './data.ts';
 
 const calculateCellValue = (data: Employee) => [data.Title, data.FirstName, data.LastName].join(' ');
 

apps/demos/Demos/TreeList/FormEditing/React/App.tsx

@@ -1,8 +1,17 @@
 import React from 'react';
+
 import {
-  TreeList, Editing, Column, ValidationRule, Lookup, Button, type TreeListTypes,
+  TreeList,
+  Editing,
+  Column,
+  ValidationRule,
+  Lookup,
+  Button,
 } from 'devextreme-react/tree-list';
+import type { TreeListTypes } from 'devextreme-react/tree-list';
+
 import { employees } from './data.ts';
+import type { Employee } from './data.ts';
 
 const expandedRowKeys = [1, 2, 3, 4, 5];
 
@@ -11,7 +20,7 @@ const lookupData = {
   sort: 'Full_Name',
 };
 
-const allowDeleting = (e) => e.row.data.ID !== 1;
+const allowDeleting = (e: { row: TreeListTypes.Row<Employee> }) => e.row.data.ID !== 1;
 
 const onEditorPreparing = (e: TreeListTypes.EditorPreparingEvent) => {
   if (e.dataField === 'Head_ID' && e.row.data.ID === 1) {

apps/demos/Demos/TreeList/FormEditing/React/data.ts

@@ -1,4 +1,19 @@
-export const employees = [{
+export interface Employee {
+  ID: number;
+  Head_ID: number;
+  Full_Name: string;
+  Prefix: string;
+  Title: string;
+  City: string;
+  State: string;
+  Email: string;
+  Skype: string;
+  Mobile_Phone: string;
+  Birth_Date: string;
+  Hire_Date: string;
+}
+
+export const employees: Employee[] = [{
   ID: 1,
   Head_ID: 0,
   Full_Name: 'John Heart',