CardView, FilterBuilder, Sortable, TreeList: fix ts issues in strict mode (#31996)

Author: anna-shakhova

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

@@ -4,11 +4,14 @@ import CardView, {
   Column, CardCover, SearchPanel, ColumnChooser, ColumnChooserSearch, ColumnChooserSelection,
 } from 'devextreme-react/card-view';
 import CheckBox from 'devextreme-react/check-box';
+import type { CheckBoxTypes } from 'devextreme-react/check-box';
 import SelectBox from 'devextreme-react/select-box';
 
 import { employees } from './data.ts';
 import type { Employee } from './data.ts';
 
+type CheckBoxValue = CheckBoxTypes.Properties['value'];
+
 function altExpr({ First_Name, Last_Name }: Employee): string {
   return `Photo of ${First_Name} ${Last_Name}`;
 }
@@ -28,10 +31,10 @@ type ColumnChooserMode = typeof columnChooserModes[number];
 
 const App = () => {
   const [columnChooserMode, setColumnChooserMode] = useState<ColumnChooserMode>('select');
-  const [searchEnabled, setSearchEnabled] = useState(true);
-  const [allowSelectAll, setAllowSelectAll] = useState(true);
-  const [selectByClick, setSelectByClick] = useState(true);
-  const [allowColumnReordering, setAllowColumnReordering] = useState(false);
+  const [searchEnabled, setSearchEnabled] = useState<CheckBoxValue>(true);
+  const [allowSelectAll, setAllowSelectAll] = useState<CheckBoxValue>(true);
+  const [selectByClick, setSelectByClick] = useState<CheckBoxValue>(true);
+  const [allowColumnReordering, setAllowColumnReordering] = useState<CheckBoxValue>(false);
 
   return <>
     <div className="options-panel">

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

@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 
 import CardView, { Column, HeaderFilter, ColumnHeaderFilter, ColumnHeaderFilterSearch } from 'devextreme-react/card-view';
+import type { CardViewTypes } from 'devextreme-react/card-view';
+import type { DataSourceOptions } from 'devextreme-react/common/data';
 
 import { orders } from './data.ts';
 import type { Order, OrderFilter } from './data.ts';
@@ -10,6 +12,7 @@ function getOrderDay(rowData: Order) {
 }
 
 function calculateOrderDateFilterExpression(
+  this: CardViewTypes.Column,
   value: string,
   selectedFilterOperations: string | null,
   target: string
@@ -57,20 +60,22 @@ interface HeaderFilterDataResult {
   value: string;
 }
 
-interface HeaderFilterData {
-  dataSource: {
-    postProcess?: ((results: HeaderFilterDataResult[]) => HeaderFilterDataResult[]) | null;
-  };
+interface HeaderFilterDataSourceOptions {
+  component: Record<string, any>;
+  dataSource: DataSourceOptions<HeaderFilterDataResult> | null;
 }
 
-function orderDateHeaderFilterDataSource(data: HeaderFilterData): void {
-  data.dataSource.postProcess = function (results: HeaderFilterDataResult[]) {
-    results.push({
-      text: 'Weekends',
-      value: 'weekends',
-    });
-    return results;
-  };
+function orderDateHeaderFilterDataSource(options: HeaderFilterDataSourceOptions): void {
+  if (options.dataSource) {
+    options.dataSource.postProcess = function (results: HeaderFilterDataResult[]) {
+      results.push({
+        text: 'Weekends',
+        value: 'weekends',
+      });
+
+      return results;
+    };
+  }
 }
 
 const App = () => (
@@ -94,7 +99,7 @@ const App = () => (
     <Column
       dataField="OrderDate"
       dataType="date"
-      calculateFilterExpression={calculateOrderDateFilterExpression}
+      calculateFilterExpression={calculateOrderDateFilterExpression as ComponentProps<typeof Column>['calculateFilterExpression']}
     >
       <ColumnHeaderFilter
         dataSource={orderDateHeaderFilterDataSource}

apps/demos/Demos/CardView/ColumnHeaderFilter/ReactJs/App.js

@@ -47,14 +47,16 @@ const saleAmountHeaderFilterDataSource = [
     value: ['SaleAmount', '>=', 20000],
   },
 ];
-function orderDateHeaderFilterDataSource(data) {
-  data.dataSource.postProcess = function (results) {
-    results.push({
-      text: 'Weekends',
-      value: 'weekends',
-    });
-    return results;
-  };
+function orderDateHeaderFilterDataSource(options) {
+  if (options.dataSource) {
+    options.dataSource.postProcess = function (results) {
+      results.push({
+        text: 'Weekends',
+        value: 'weekends',
+      });
+      return results;
+    };
+  }
 }
 const App = () => (
   <CardView

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

@@ -18,7 +18,7 @@ export interface Employee {
   departmentID: number;
   department: string;
   status: string;
-  notes: string;
+  notes: string | null;
   pictureName: string;
   picture: string;
 }

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

@@ -67,7 +67,7 @@ function StatusComponent({ data }: { data: CardViewTypes.FieldTemplateData }) {
     Terminated: 'status--terminated',
   };
 
-  const className = classNameMap[data.field.value];
+  const className = classNameMap[data.field.value as Employee['Status']];
 
   return (
     <div className={`status ${className}`}>
@@ -84,7 +84,7 @@ function EmailComponent({ data }: { data: CardViewTypes.FieldTemplateData }) {
 }
 
 function App() {
-  const cardView = useRef<CardViewRef>();
+  const cardView = useRef<CardViewRef>(null);
 
   return (
     <CardView

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

@@ -11,7 +11,7 @@ export interface Employee {
   Birth_Date: string;
   Hire_Date: string;
   Department: string;
-  Status: string;
+  Status: 'Salaried' | 'Commission' | 'Terminated';
 }
 
 export const employees: Employee[] = [{

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

@@ -73,7 +73,7 @@ function EmailComponent({ data }) {
   return <a href={`mailto:${data.field.value}`}>{data.field.text}</a>;
 }
 function App() {
-  const cardView = useRef();
+  const cardView = useRef(null);
   return (
     <CardView
       dataSource={employees}

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

@@ -18,7 +18,7 @@ export interface Employee {
   departmentID: number;
   department: string;
   status: string;
-  notes: string;
+  notes: string | null;
   pictureName: string;
   picture: string;
 }

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

@@ -3,13 +3,16 @@ import React, { useState, useRef, useCallback } from 'react';
 import CardView, { Column, CardCover, Selection } from 'devextreme-react/card-view';
 import type { CardViewRef } from 'devextreme-react/card-view';
 import CheckBox from 'devextreme-react/check-box';
+import type { CheckBoxTypes } from 'devextreme-react/check-box';
 import type { SingleOrMultiple, SelectAllMode } from 'devextreme-react/common';
 import type { SelectionColumnDisplayMode } from 'devextreme-react/common/grids';
 import SelectBox from 'devextreme-react/select-box';
 
 import { employees } from './data.ts';
 import type { Employee } from './data.ts';
 
+type CheckBoxValue = CheckBoxTypes.Properties['value'];
+
 function altExpr({ FullName }: Employee): string {
   return `Photo of ${FullName}`;
 }
@@ -24,7 +27,7 @@ const selectAllModeLabel = { 'aria-label': 'Select All Mode' };
 
 const App = () => {
   const [selectionMode, setSelectionMode] = useState<SingleOrMultiple>('multiple');
-  const [allowSelectAll, setAllowSelectAll] = useState(true);
+  const [allowSelectAll, setAllowSelectAll] = useState<CheckBoxValue>(true);
   const [showCheckBoxesMode, setShowCheckBoxesMode] = useState<SelectionColumnDisplayMode>('always');
   const [selectAllMode, setSelectAllMode] = useState<SelectAllMode>('allPages');
 

apps/demos/Demos/FilterBuilder/Customization/React/App.tsx

@@ -13,8 +13,8 @@ function App() {
   const [dataSourceText, setDataSourceText] = useState('');
 
   const updateTexts = useCallback((e: FilterBuilderTypes.InitializedEvent) => {
-    setFilterText(formatValue(e.component.option('value')));
-    setDataSourceText(formatValue(e.component.getFilterExpression()));
+    setFilterText(formatValue(e.component?.option('value')));
+    setDataSourceText(formatValue(e.component?.getFilterExpression()));
   }, []);
 
   const onValueChanged = useCallback((e: FilterBuilderTypes.ValueChangedEvent) => {