Demos: fix ts issues in FilterBuilder React demos

Author: anna-shakhova

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

@@ -1,5 +1,8 @@
 import React, { useCallback, useState } from 'react';
-import FilterBuilder, { CustomOperation, type FilterBuilderTypes, ICustomOperationProps } from 'devextreme-react/filter-builder';
+
+import FilterBuilder, { CustomOperation } from 'devextreme-react/filter-builder';
+import type { FilterBuilderTypes, ICustomOperationProps } from 'devextreme-react/filter-builder';
+
 import { filter, fields, groupOperations } from './data.ts';
 import { formatValue } from './helpers.ts';
 import { EditorComponent } from './EditorComponent.tsx';
@@ -12,19 +15,19 @@ function App() {
   const updateTexts = useCallback((e: FilterBuilderTypes.InitializedEvent) => {
     setFilterText(formatValue(e.component.option('value')));
     setDataSourceText(formatValue(e.component.getFilterExpression()));
-  }, [setFilterText, setDataSourceText]);
+  }, []);
 
   const onValueChanged = useCallback((e: FilterBuilderTypes.ValueChangedEvent) => {
     setValue(e.value);
     updateTexts(e);
-  }, [updateTexts, setValue]);
+  }, [updateTexts]);
 
   const calculateFilterExpression: ICustomOperationProps['calculateFilterExpression'] = useCallback((filterValue, field) => (
     filterValue?.length
       && Array.prototype.concat
         .apply(
           [],
-          filterValue.map((i) => [[field.dataField, '=', i], 'or']),
+          filterValue.map((i: string) => [[field.dataField, '=', i], 'or']),
         )
         .slice(0, -1)
   ), []);

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

@@ -1,4 +1,4 @@
-import { FilterBuilderTypes } from 'devextreme-react/filter-builder';
+import type { FilterBuilderTypes } from 'devextreme-react/filter-builder';
 
 export const filter = [
   ['Category', 'anyof', ['Automation', 'Monitors']],

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

@@ -1,15 +1,15 @@
 const TAB_SIZE = 4;
 
-function prepareItem(item, spaces) {
+function prepareItem(item: any, spaces: number) {
   return Array.isArray(item[0])
     ? formatValue(item, spaces + TAB_SIZE)
     : JSON.stringify(item);
 }
 
-export function formatValue(value, spaces = TAB_SIZE) {
+export function formatValue(value: any, spaces: number = TAB_SIZE) {
   if (value && Array.isArray(value[0])) {
     const formattedValue = value
-      .map((item) => prepareItem(item, spaces))
+      .map((item: any) => prepareItem(item, spaces))
       .join(`,${getLineBreak(spaces)}`);
 
     return `[${getLineBreak(spaces)}${formattedValue}${getLineBreak(spaces - TAB_SIZE)}]`;

apps/demos/Demos/FilterBuilder/Customization/ReactJs/App.js

@@ -8,19 +8,16 @@ function App() {
   const [value, setValue] = useState(filter);
   const [filterText, setFilterText] = useState('');
   const [dataSourceText, setDataSourceText] = useState('');
-  const updateTexts = useCallback(
-    (e) => {
-      setFilterText(formatValue(e.component.option('value')));
-      setDataSourceText(formatValue(e.component.getFilterExpression()));
-    },
-    [setFilterText, setDataSourceText],
-  );
+  const updateTexts = useCallback((e) => {
+    setFilterText(formatValue(e.component.option('value')));
+    setDataSourceText(formatValue(e.component.getFilterExpression()));
+  }, []);
   const onValueChanged = useCallback(
     (e) => {
       setValue(e.value);
       updateTexts(e);
     },
-    [updateTexts, setValue],
+    [updateTexts],
   );
   const calculateFilterExpression = useCallback(
     (filterValue, field) =>

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

@@ -1,7 +1,9 @@
 import React, { useCallback, useState } from 'react';
+
 import FilterBuilder, { type FilterBuilderTypes } from 'devextreme-react/filter-builder';
 import Button from 'devextreme-react/button';
 import DataGrid from 'devextreme-react/data-grid';
+
 import { filter, fields, columns, products } from './data.ts';
 
 const App = () => {
@@ -10,11 +12,11 @@ const App = () => {
 
   const onValueChanged = useCallback((e: FilterBuilderTypes.ValueChangedEvent) => {
     setValue(e.value);
-  }, [setValue]);
+  }, []);
 
   const buttonClick = useCallback(() => {
     setGridFilterValue(value);
-  }, [value, setGridFilterValue]);
+  }, [value]);
 
   return (
     <div>

apps/demos/Demos/FilterBuilder/WithDataGrid/React/data.ts

@@ -1,4 +1,4 @@
-import { DataType } from 'devextreme/common';
+import type { DataType } from 'devextreme/common';
 
 interface Product {
   Product_ID: number;

apps/demos/Demos/FilterBuilder/WithDataGrid/ReactJs/App.js

@@ -9,15 +9,12 @@ import {
 const App = () => {
   const [value, setValue] = useState(filter);
   const [gridFilterValue, setGridFilterValue] = useState(filter);
-  const onValueChanged = useCallback(
-    (e) => {
-      setValue(e.value);
-    },
-    [setValue],
-  );
+  const onValueChanged = useCallback((e) => {
+    setValue(e.value);
+  }, []);
   const buttonClick = useCallback(() => {
     setGridFilterValue(value);
-  }, [value, setGridFilterValue]);
+  }, [value]);
   return (
     <div>
       <div className="filter-container">

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

@@ -1,8 +1,10 @@
 import React, { useCallback, useRef, useEffect } from 'react';
+
 import FilterBuilder from 'devextreme-react/filter-builder';
 import Button from 'devextreme-react/button';
 import List from 'devextreme-react/list';
 import { DataSource } from 'devextreme-react/common/data';
+
 import { filter, fields, products } from './data.ts';
 import CustomItem from './CustomItem.tsx';
 

apps/demos/Demos/FilterBuilder/WithList/React/CustomItem.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 
+import type { Product } from './data.ts';
+
 const currencyFormatter = new Intl.NumberFormat('en-US', {
   style: 'currency',
   currency: 'USD',
   minimumFractionDigits: 0,
   maximumFractionDigits: 0,
 });
 
-export default function CustomItem(item) {
+export default function CustomItem(item: Product) {
   return (
     <div className="product">
       <img

apps/demos/Demos/FilterBuilder/WithList/React/data.ts

@@ -1,4 +1,15 @@
-import { FilterBuilderTypes } from 'devextreme-react/filter-builder';
+import type { FilterBuilderTypes } from 'devextreme-react/filter-builder';
+
+export interface Product {
+  ID: number;
+  Name: string;
+  Price: number;
+  Current_Inventory: number;
+  Backorder: number;
+  Manufacturing: number;
+  Category: string;
+  ImageSrc: string;
+}
 
 export const filter = [
   ['Category', '=', 'Video Players'],
@@ -44,7 +55,7 @@ export const fields: FilterBuilderTypes.Field[] = [
   },
 ];
 
-export const products = [{
+export const products: Product[] = [{
   ID: 1,
   Name: 'HD Video Player',
   Price: 330,