Types improv + tsconf changes to remove component is not tsx problem

DevExpress · Sep 14, 2023 · 8d718b9 · 8d718b9
1 parent 9a5e59c
commit 8d718b9
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 39 deletions.
diff --git a/JSDemos/Demos/Common/NavigationOverview/React/App.tsx b/JSDemos/Demos/Common/NavigationOverview/React/App.tsx
@@ -45,7 +45,9 @@ function App() {
   const [countryData, setCountryData] = React.useState(continents[0].items[0]);
   const [citiesData, setCitiesData] = React.useState(continents[0].items[0].cities);
 
-  const handleTreeViewSelectionChange = React.useCallback((e: TreeViewTypes.SelectionChangedEvent) => {
+  const handleTreeViewSelectionChange = React.useCallback((
+    e: TreeViewTypes.SelectionChangedEvent & { itemData: any },
+  ) => {
     const selectedCountryData = e.itemData;
     if (selectedCountryData.cities) {
       setTabPanelIndex(0);
@@ -54,7 +56,9 @@ function App() {
     }
   }, [setTabPanelIndex, setCountryData, setCitiesData]);
 
-  const handleTabPanelSelectionChange = React.useCallback((e: TabPanelTypes.SelectionChangedEvent) => {
+  const handleTabPanelSelectionChange = React.useCallback((
+    e: TabPanelTypes.SelectionChangedEvent & { value: any },
+  ) => {
     setTabPanelIndex(e.value);
   }, [setTabPanelIndex]);
 

diff --git a/JSDemos/Demos/Menu/Overview/React/App.tsx b/JSDemos/Demos/Menu/Overview/React/App.tsx
@@ -8,6 +8,7 @@ const orientations = ['horizontal', 'vertical'];
 const orientationLabel = { 'aria-label': 'Orientation' };
 const showSubmenuModeLabel = { 'aria-label': 'Show Submenu Mode' };
 const products = service.getProducts();
+
 interface showSubmenuModesType {
   name: MenuTypes.SubmenuShowMode,
   delay: {
@@ -32,7 +33,7 @@ const App = () => {
   const [hideSubmenuOnMouseLeave, setHideSubmenuOnMouseLeave] = React.useState(false);
   const [currentProduct, setCurrentProduct] = React.useState(null);
 
-  const itemClick = React.useCallback((e: MenuTypes.ItemClickEvent<ProductItemType>) => {
+  const itemClick = React.useCallback((e: MenuTypes.ItemClickEvent & { itemData: ProductItemType }) => {
     if (e.itemData.price) {
       setCurrentProduct(e.itemData);
     }

diff --git a/JSDemos/Demos/MultiView/Overview/React/App.tsx b/JSDemos/Demos/MultiView/Overview/React/App.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import CheckBox from 'devextreme-react/check-box';
-import MultiView, { MultiViewTypes } from 'devextreme-react/multi-view';
+import MultiView from 'devextreme-react/multi-view';
 import { multiViewItems as companies } from './data.ts';
 import CompanyItem from './CompanyItem.tsx';
 

diff --git a/JSDemos/Demos/TreeView/ContextMenuIntegration/React/App.tsx b/JSDemos/Demos/TreeView/ContextMenuIntegration/React/App.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import TreeView from 'devextreme-react/tree-view';
-import ContextMenu from 'devextreme-react/context-menu';
+import TreeView, { TreeViewTypes } from 'devextreme-react/tree-view';
+import ContextMenu, { ContextMenuTypes } from 'devextreme-react/context-menu';
 import List from 'devextreme-react/list';
 import service from './data.ts';
 
@@ -13,7 +13,9 @@ const App = () => {
   const [logItems, setLogItems] = React.useState([]);
   const [selectedTreeItem, setSelectedTreeItem] = React.useState(undefined);
 
-  const treeViewItemContextMenu = React.useCallback((e: { itemData: { price: any; }; node: { expanded: any; }; }) => {
+  const treeViewItemContextMenu = React.useCallback((
+    e: TreeViewTypes.ItemContextMenuEvent & { itemData: { price?: any; }; node: { expanded: any; }; },
+  ) => {
     setSelectedTreeItem(e.itemData);
 
     const isProduct = e.itemData.price !== undefined;
@@ -26,7 +28,9 @@ const App = () => {
     contextMenuRef.current.instance.option('items[1].disabled', !e.node.expanded);
   }, []);
 
-  const contextMenuItemClick = React.useCallback((e: { itemData: { id?: any; }; }) => {
+  const contextMenuItemClick = React.useCallback((
+    e: ContextMenuTypes.ItemClickEvent & { itemData: { id?: any; }; },
+  ) => {
     let logEntry = '';
     switch (e.itemData.id) {
       case 'expand': {

diff --git a/JSDemos/Demos/TreeView/DragAndDropPlainDataStructure/React/App.tsx b/JSDemos/Demos/TreeView/DragAndDropPlainDataStructure/React/App.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import TreeView from 'devextreme-react/tree-view';
-import Sortable from 'devextreme-react/sortable';
+import Sortable, { SortableTypes } from 'devextreme-react/sortable';
 
 import service from './data.ts';
 
 const getStateFieldName = (driveName: string) => (driveName === 'driveC'
   ? 'itemsDriveC'
   : 'itemsDriveD');
 
-const calculateToIndex = (e: { fromComponent: any; toComponent: any; dropInsideItem: any; toIndex: number; fromIndex: number; }) => {
+const calculateToIndex = (e: SortableTypes.DragChangeEvent) => {
   if (e.fromComponent !== e.toComponent || e.dropInsideItem) {
     return e.toIndex;
   }
@@ -18,15 +18,15 @@ const calculateToIndex = (e: { fromComponent: any; toComponent: any; dropInsideI
     : e.toIndex + 1;
 };
 
-const findNode = (treeView: { element: () => { (): any; new(): any; querySelectorAll: { (arg0: string): { (): any; new(): any;[x: string]: any; }; new(): any; }; }; getNodes: () => any; }, index: string | number) => {
+const findNode = (treeView, index: string | number) => {
   const nodeElement = treeView.element().querySelectorAll('.dx-treeview-node')[index];
   if (nodeElement) {
     return findNodeById(treeView.getNodes(), nodeElement.getAttribute('data-item-id'));
   }
   return null;
 };
 
-const findNodeById = (nodes: string | any[], id) => {
+const findNodeById = (nodes, id) => {
   for (let i = 0; i < nodes.length; i += 1) {
     if (nodes[i].itemData.id === id) {
       return nodes[i];
@@ -41,13 +41,13 @@ const findNodeById = (nodes: string | any[], id) => {
   return null;
 };
 
-const moveNode = (fromNode: { itemData: { id: any; parentId: any; }; }, toNode: { itemData: { id: any; parentId: any; }; }, fromItems: { findIndex: (arg0: (item: any) => boolean) => any; splice: (arg0: any, arg1: number) => void; }, toItems: { length: any; findIndex: (arg0: (item: any) => boolean) => any; splice: (arg0: any, arg1: number, arg2: any) => void; }, isDropInsideItem) => {
-  const fromIndex = fromItems.findIndex((item: { id: any; }) => item.id === fromNode.itemData.id);
+const moveNode = (fromNode, toNode, fromItems, toItems, isDropInsideItem) => {
+  const fromIndex = fromItems.findIndex((item) => item.id === fromNode.itemData.id);
   fromItems.splice(fromIndex, 1);
 
   const toIndex = toNode === null || isDropInsideItem
     ? toItems.length
-    : toItems.findIndex((item: { id: any; }) => item.id === toNode.itemData.id);
+    : toItems.findIndex((item) => item.id === toNode.itemData.id);
   toItems.splice(toIndex, 0, fromNode.itemData);
 
   moveChildren(fromNode, fromItems, toItems);
@@ -60,17 +60,17 @@ const moveNode = (fromNode: { itemData: { id: any; parentId: any; }; }, toNode:
   }
 };
 
-const moveChildren = (node: { itemData: { isDirectory: any; }; children: any[]; }, fromDataSource: { findIndex: (arg0: (item: any) => boolean) => any; splice: (arg0: any, arg1: number) => void; }, toDataSource: any[]) => {
+const moveChildren = (node, fromDataSource, toDataSource: any[]) => {
   if (!node.itemData.isDirectory) {
     return;
   }
 
-  node.children.forEach((child: { itemData: { isDirectory: any; id?: any; }; children: any[]; }) => {
+  node.children.forEach((child) => {
     if (child.itemData.isDirectory) {
       moveChildren(child, fromDataSource, toDataSource);
     }
 
-    const fromIndex = fromDataSource.findIndex((item: { id: any; }) => item.id === child.itemData.id);
+    const fromIndex = fromDataSource.findIndex((item) => item.id === child.itemData.id);
     fromDataSource.splice(fromIndex, 1);
     toDataSource.splice(toDataSource.length, 0, child.itemData);
   });
@@ -102,13 +102,17 @@ const getTopVisibleNode = (component: { element: () => any; }) => {
 };
 
 const App = () => {
-  const treeViewDriveCRef = React.useRef(null);
-  const treeViewDriveDRef = React.useRef(null);
+  const treeViewDriveCRef = React.useRef<TreeView>(null);
+  const treeViewDriveDRef = React.useRef<TreeView>(null);
 
   const [itemsDriveC, setItemsDriveC] = React.useState(service.getItemsDriveC());
   const [itemsDriveD, setItemsDriveD] = React.useState(service.getItemsDriveD());
 
-  const onDragChange = React.useCallback((e: { fromComponent: any; toComponent: any; fromData: any; fromIndex: any; toData: any; cancel: boolean; }) => {
+  const getTreeView = React.useCallback((driveName: string) => (driveName === 'driveC'
+    ? treeViewDriveCRef.current.instance
+    : treeViewDriveDRef.current.instance), []);
+
+  const onDragChange = React.useCallback((e: SortableTypes.DragChangeEvent) => {
     if (e.fromComponent === e.toComponent) {
       const fromNode = findNode(getTreeView(e.fromData), e.fromIndex);
       const toNode = findNode(getTreeView(e.toData), calculateToIndex(e));
@@ -118,7 +122,7 @@ const App = () => {
     }
   }, [getTreeView]);
 
-  const onDragEnd = React.useCallback((e: { fromComponent: any; toComponent: any; fromIndex: any; toIndex: any; fromData: any; toData: any; dropInsideItem: any; }) => {
+  const onDragEnd = React.useCallback((e: SortableTypes.DragEndEvent) => {
     if (e.fromComponent === e.toComponent && e.fromIndex === e.toIndex) {
       return;
     }
@@ -162,10 +166,6 @@ const App = () => {
     toTreeView.scrollToItem(toTopVisibleNode);
   }, [getTreeView, itemsDriveC, itemsDriveD, setItemsDriveC, setItemsDriveD]);
 
-  const getTreeView = React.useCallback((driveName: string) => (driveName === 'driveC'
-    ? treeViewDriveCRef.current.instance
-    : treeViewDriveDRef.current.instance), []);
-
   return (
     <div className="form">
       <div className="drive-panel">

diff --git a/JSDemos/Demos/TreeView/ItemSelectionAndCustomization/React/App.tsx b/JSDemos/Demos/TreeView/ItemSelectionAndCustomization/React/App.tsx
@@ -38,7 +38,7 @@ const App = () => {
     syncSelection(e.component);
   }, [syncSelection]);
 
-  const showCheckBoxesModeValueChanged = React.useCallback((e: { value: any; }) => {
+  const showCheckBoxesModeValueChanged = React.useCallback((e: { value?: any; }) => {
     const value = e.value;
     setShowCheckBoxesMode(value);
 
@@ -49,7 +49,7 @@ const App = () => {
     setIsSelectionModeDisabled(value === 'selectAll');
   }, [setShowCheckBoxesMode, setSelectionMode, setIsRecursiveDisabled, setIsSelectionModeDisabled]);
 
-  const selectionModeValueChanged = React.useCallback((e: { value: any; }) => {
+  const selectionModeValueChanged = React.useCallback((e: { value?: any; }) => {
     const value = e.value;
     setSelectionMode(value);
 
@@ -60,11 +60,11 @@ const App = () => {
     setIsRecursiveDisabled(value === 'single');
   }, [setSelectionMode, setSelectNodesRecursive, setIsRecursiveDisabled]);
 
-  const selectNodesRecursiveValueChanged = React.useCallback((e: { value: any; }) => {
+  const selectNodesRecursiveValueChanged = React.useCallback((e: { value?: any; }) => {
     setSelectNodesRecursive(e.value);
   }, [setSelectNodesRecursive]);
 
-  const selectByClickValueChanged = React.useCallback((e: { value: any; }) => {
+  const selectByClickValueChanged = React.useCallback((e: { value?: any; }) => {
     setSelectByClick(e.value);
   }, [setSelectByClick]);
 

diff --git a/JSDemos/Demos/TreeView/TreeViewWithSearchBar/React/App.tsx b/JSDemos/Demos/TreeView/TreeViewWithSearchBar/React/App.tsx
@@ -2,15 +2,16 @@ import React from 'react';
 
 import TreeView from 'devextreme-react/tree-view';
 import SelectBox, { SelectBoxTypes } from 'devextreme-react/select-box';
+import { SearchMode } from 'devextreme/common';
 
 import { products, searchModeLabel } from './data.ts';
 
-const options = ['contains', 'startswith', 'equals'];
+const options: SearchMode[] = ['contains', 'startswith', 'equals'];
 
 const App = () => {
-  const [value, setValue] = React.useState('contains');
+  const [value, setValue] = React.useState<SearchMode>('contains');
 
-  const valueChanged = React.useCallback((e: { value?: any; }) => {
+  const valueChanged = React.useCallback((e: SelectBoxTypes.ValueChangedEvent) => {
     setValue(e.value);
   }, [setValue]);
 

diff --git a/JSDemos/tsconfig.json b/JSDemos/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "target": "ES2015",
+        "esModuleInterop": true,
+        "jsx": "react",
+        "moduleResolution": "node",
+        "experimentalDecorators": true,
+        "types": [
+            "react",
+            "react-dom"
+        ],
+    },
+    "include": [
+        "./Demos/**/React/*.tsx",
+        "./Demos/**/Angular/app/*.ts"
+    ]
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -6,12 +6,10 @@
     "skipLibCheck": true,
     "jsx": "react",
     "moduleResolution": "node",
-    "types": ["react", "react-dom"],
   },
-
   "include": [
     "utils/**/*.ts",
-    "./Demos/**/*.ts",
-    "./Demos/**/*.tsx"
-  ]
-}
+    "JSDemos/Demos/**/*.ts",
+    "JSDemos/Demos/**/*.tsx",
+  ],
+}