Demos: fix types

Author: anna-shakhova

apps/demos/Demos/CardView/ColumnHeaderFilter/React/App.tsx

@@ -3,13 +3,7 @@ import React from 'react';
 import CardView, { Column, HeaderFilter, ColumnHeaderFilter, ColumnHeaderFilterSearch } from 'devextreme-react/card-view';
 
 import { orders } from './data.ts';
-import type { Order } from './data.ts';
-
-type FilterValue = [string, string, number];
-interface FilterData {
-  text: string;
-  value: FilterValue | FilterValue[];
-}
+import type { Order, OrderFilter } from './data.ts';
 
 function getOrderDay(rowData: Order) {
   return new Date(rowData.OrderDate).getDay();
@@ -26,7 +20,7 @@ function calculateOrderDateFilterExpression(
   return this.defaultCalculateFilterExpression(value, selectedFilterOperations, target);
 }
 
-const saleAmountHeaderFilterDataSource: FilterData[] = [
+const saleAmountHeaderFilterDataSource: OrderFilter[] = [
   {
     text: 'Less than $3000',
     value: ['SaleAmount', '<', 3000],

apps/demos/Demos/CardView/ColumnHeaderFilter/React/data.ts

@@ -1,3 +1,5 @@
+import type { FilterBuilderTypes } from 'devextreme-react/filter-builder';
+
 export interface Order {
   OrderNumber: number;
   SaleAmount: number;
@@ -7,6 +9,13 @@ export interface Order {
   OrderDate: string;
 }
 
+export type OrderFilterValue<T extends keyof Order = keyof Order> = [T, FilterBuilderTypes.FilterOperation, Order[T]];
+
+export interface OrderFilter {
+  text: string;
+  value: OrderFilterValue | OrderFilterValue[];
+}
+
 export const orders: Order[] = [{
   OrderNumber: 35703,
   SaleAmount: 11800,

apps/demos/Demos/CardView/FilterPanel/React/App.tsx

@@ -3,13 +3,7 @@ import React from 'react';
 import CardView, { Column, HeaderFilter, ColumnHeaderFilter, FilterPanel, FilterBuilder } from 'devextreme-react/card-view';
 
 import { orders } from './data.ts';
-import type { Order } from './data.ts';
-
-type FilterValue = [string, string, number];
-interface FilterData {
-  text: string;
-  value: FilterValue | FilterValue[];
-}
+import type { Order, OrderFilter } from './data.ts';
 
 function getOrderDay({ OrderDate }: Order): number {
   return (new Date(OrderDate)).getDay();
@@ -28,7 +22,7 @@ const customOperations = [{
   },
 }];
 
-const saleAmountHeaderFilterDataSource: FilterData[] = [
+const saleAmountHeaderFilterDataSource: OrderFilter[] = [
   {
     text: 'Less than $3000',
     value: ['SaleAmount', '<', 3000],

apps/demos/Demos/CardView/FilterPanel/React/data.ts

@@ -1,3 +1,5 @@
+import type { FilterBuilderTypes } from 'devextreme-react/filter-builder';
+
 export interface Order {
   ID: number;
   OrderNumber: number;
@@ -9,6 +11,13 @@ export interface Order {
   Terms: string;
 }
 
+export type OrderFilterValue<T extends keyof Order = keyof Order> = [T, FilterBuilderTypes.FilterOperation, Order[T]];
+
+export interface OrderFilter {
+  text: string;
+  value: OrderFilterValue | OrderFilterValue[];
+}
+
 export const orders: Order[] = [{
   ID: 1,
   OrderNumber: 35703,

apps/demos/Demos/FilterBuilder/Customization/React/helpers.ts

@@ -1,15 +1,19 @@
+import type { FilterBuilderTypes } from 'devextreme-react/filter-builder';
+
+type FilterValue = FilterBuilderTypes.Properties['value'];
+
 const TAB_SIZE = 4;
 
-function prepareItem(item: any, spaces: number) {
+function prepareItem(item: FilterValue, spaces: number): string {
   return Array.isArray(item[0])
     ? formatValue(item, spaces + TAB_SIZE)
     : JSON.stringify(item);
 }
 
-export function formatValue(value: any, spaces: number = TAB_SIZE) {
-  if (value && Array.isArray(value[0])) {
+export function formatValue(value: FilterValue, spaces: number = TAB_SIZE): string {
+  if (value && Array.isArray(value) && Array.isArray(value[0])) {
     const formattedValue = value
-      .map((item: any) => prepareItem(item, spaces))
+      .map((item) => prepareItem(item, spaces))
       .join(`,${getLineBreak(spaces)}`);
 
     return `[${getLineBreak(spaces)}${formattedValue}${getLineBreak(spaces - TAB_SIZE)}]`;

apps/demos/Demos/Sortable/Kanban/React/App.tsx

@@ -4,8 +4,8 @@ import ScrollView from 'devextreme-react/scroll-view';
 import Sortable from 'devextreme-react/sortable';
 import type { SortableTypes } from 'devextreme-react/sortable';
 
-import { tasks as taskList, employees } from './data.ts';
-import type { Employee, Task } from './data.ts';
+import { tasks as taskList, employees, taskStatuses } from './data.ts';
+import type { Employee, Task, TaskStatus } from './data.ts';
 
 function getLists(statusArray: string[], taskArray: Task[]): Task[][] {
   const tasksMap = taskArray.reduce<Record<string, Task[]>>((result, task) => {
@@ -27,23 +27,22 @@ function getEmployeesMap(employeesArray: Employee[]): Record<string, string> {
   }, {});
 }
 
-function removeItem(array: any[], removeIdx: number) {
+function removeItem<T>(array: T[], removeIdx: number): T[] {
   return array.filter((_, idx) => idx !== removeIdx);
 }
 
-function insertItem(array: any[], item: any, insertIdx: number) {
+function insertItem<T>(array: T[], item: T, insertIdx: number): T[] {
   const newArray = [...array];
   newArray.splice(insertIdx, 0, item);
   return newArray;
 }
 
-function reorderItem(array: any[], fromIdx: number, toIdx: number) {
+function reorderItem<T>(array: T[], fromIdx: number, toIdx: number): T[] {
   const item = array[fromIdx];
-  const result = removeItem(array, fromIdx);
-  return insertItem(result, item, toIdx);
+  const result = removeItem<T>(array, fromIdx);
+  return insertItem<T>(result, item, toIdx);
 }
 
-const taskStatuses = ['Not Started', 'Need Assistance', 'In Progress', 'Deferred', 'Completed'];
 const employeesRecord = getEmployeesMap(employees);
 
 const Card: React.FC<{ task: Task, employeesMap: Record<string, string> }> = ({
@@ -87,12 +86,12 @@ const List: React.FC<{
 </div>;
 
 function App() {
-  const [statuses, setStatuses] = useState(taskStatuses);
-  const [lists, setLists] = useState(getLists(taskStatuses, taskList));
+  const [statuses, setStatuses] = useState<TaskStatus[]>(taskStatuses);
+  const [lists, setLists] = useState<Task[][]>(getLists(taskStatuses, taskList));
 
   const onListReorder = useCallback(({ fromIndex, toIndex }) => {
-    setLists((state) => reorderItem(state, fromIndex, toIndex));
-    setStatuses((state) => reorderItem(state, fromIndex, toIndex));
+    setLists((state) => reorderItem<Task[]>(state, fromIndex, toIndex));
+    setStatuses((state) => reorderItem<TaskStatus>(state, fromIndex, toIndex));
   }, []);
 
   const onTaskDrop = useCallback(
@@ -102,8 +101,8 @@ function App() {
       const updatedLists = [...lists];
 
       const item = updatedLists[fromData][fromIndex];
-      updatedLists[fromData] = removeItem(updatedLists[fromData], fromIndex);
-      updatedLists[toData] = insertItem(updatedLists[toData], item, toIndex);
+      updatedLists[fromData] = removeItem<Task>(updatedLists[fromData], fromIndex);
+      updatedLists[toData] = insertItem<Task>(updatedLists[toData], item, toIndex);
 
       setLists(updatedLists);
     },

apps/demos/Demos/Sortable/Kanban/React/data.ts

@@ -3,18 +3,23 @@ export interface Employee {
   Name: string,
 }
 
+export type TaskStatus = 'Not Started' | 'Need Assistance' | 'In Progress' | 'Deferred' | 'Completed';
+
 export interface Task {
   Task_ID: number,
   Task_Assigned_Employee_ID: number,
   Task_Owner_ID: number,
   Task_Subject: string,
   Task_Start_Date: string | Date,
   Task_Due_Date: string | Date,
-  Task_Status: string,
+  Task_Status: TaskStatus,
   Task_Priority: number,
   Task_Completion: number,
   Task_Parent_ID: number,
 }
+
+export const taskStatuses: TaskStatus[] = ['Not Started', 'Need Assistance', 'In Progress', 'Deferred', 'Completed'];
+
 export const tasks: Task[] = [{
   Task_ID: 1,
   Task_Assigned_Employee_ID: 1,

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

@@ -8,6 +8,7 @@ import { TreeList, Selection, Column } from 'devextreme-react/tree-list';
 import type { TreeListTypes } from 'devextreme-react/tree-list';
 
 import { employees, selectionModeLabel } from './data.ts';
+import type { Employee } from './data.ts';
 
 const expandedRowKeys = [1, 2, 10];
 const emptySelectedText = 'Nobody has been selected';
@@ -19,7 +20,7 @@ const App = () => {
   const [selectionMode, setSelectionMode] = useState('all');
   const [selectedEmployeeNames, setSelectedEmployeeNames] = useState(emptySelectedText);
 
-  const getEmployeeNames = useCallback((employeeList: any[]) => {
+  const getEmployeeNames = useCallback((employeeList: Employee[]) => {
     if (employeeList.length > 0) {
       return employeeList.map((employee) => employee.Full_Name).join(', ');
     }

apps/demos/Demos/TreeList/MultipleRowSelection/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',