fix: use setTimeout/setInterval from window object with correct TS ty…

…pe (#397)

* fix: use setTimeout/setInterval from window object with correct TS type

package.json

@@ -83,11 +83,11 @@
     "/src/slickgrid-react"
   ],
   "dependencies": {
-    "@slickgrid-universal/common": "~5.5.1",
-    "@slickgrid-universal/custom-footer-component": "~5.5.1",
-    "@slickgrid-universal/empty-warning-component": "~5.5.1",
-    "@slickgrid-universal/event-pub-sub": "~5.5.1",
-    "@slickgrid-universal/pagination-component": "~5.5.1",
+    "@slickgrid-universal/common": "~5.5.2",
+    "@slickgrid-universal/custom-footer-component": "~5.5.2",
+    "@slickgrid-universal/empty-warning-component": "~5.5.2",
+    "@slickgrid-universal/event-pub-sub": "~5.5.2",
+    "@slickgrid-universal/pagination-component": "~5.5.2",
     "dequal": "^2.0.3",
     "i18next": "^23.13.0",
     "sortablejs": "^1.15.2"
@@ -99,13 +99,13 @@
     "@formkit/tempo": "^0.1.2",
     "@popperjs/core": "^2.11.8",
     "@release-it/conventional-changelog": "^8.0.1",
-    "@slickgrid-universal/composite-editor-component": "~5.5.1",
-    "@slickgrid-universal/custom-tooltip-plugin": "~5.5.1",
-    "@slickgrid-universal/excel-export": "~5.5.1",
-    "@slickgrid-universal/graphql": "~5.5.1",
-    "@slickgrid-universal/odata": "~5.5.1",
-    "@slickgrid-universal/rxjs-observable": "~5.5.1",
-    "@slickgrid-universal/text-export": "~5.5.1",
+    "@slickgrid-universal/composite-editor-component": "~5.5.2",
+    "@slickgrid-universal/custom-tooltip-plugin": "~5.5.2",
+    "@slickgrid-universal/excel-export": "~5.5.2",
+    "@slickgrid-universal/graphql": "~5.5.2",
+    "@slickgrid-universal/odata": "~5.5.2",
+    "@slickgrid-universal/rxjs-observable": "~5.5.2",
+    "@slickgrid-universal/text-export": "~5.5.2",
     "@types/dompurify": "^3.0.5",
     "@types/fnando__sparkline": "^0.3.7",
     "@types/i18next-xhr-backend": "^1.4.2",

src/examples/slickgrid/Example15.tsx

@@ -85,7 +85,7 @@ class Example15 extends React.Component<Props, State> {
     // this.reactGrid.slickGrid.autosizeColumns();
     this.reactGrid.gridService.resetGrid(this.getColumnDefinitions());
     this.reactGrid.paginationService!.changeItemPerPage(DEFAULT_PAGE_SIZE);
-    setTimeout(() => localStorage[LOCAL_STORAGE_KEY] = null);
+    window.setTimeout(() => localStorage[LOCAL_STORAGE_KEY] = null);
   }
 
   /* Define grid Options and Columns */

src/examples/slickgrid/Example17.tsx

@@ -88,7 +88,7 @@ export default class Example17 extends React.Component {
     // this.gridObj.setSortColumn('score', false);
 
     // // simulate a delayed search to preload the first page
-    // setTimeout(() => this.searchChanged(this.search), 100);
+    // window.setTimeout(() => this.searchChanged(this.search), 100);
   }
 
   defineGrid() {

src/examples/slickgrid/Example2.tsx

@@ -191,7 +191,7 @@ export default class Example2 extends React.Component<Props, State> {
       item.completed = !item.completed;
 
       // simulate a backend http call and refresh the grid row after delay
-      setTimeout(() => {
+      window.setTimeout(() => {
         this.reactGrid?.gridService.updateItemById(item.id, item, { highlightRow: false });
       }, 250);
     }

src/examples/slickgrid/Example23.tsx

@@ -266,8 +266,8 @@ class Example23 extends React.Component<Props, State> {
   }
 
   refreshMetrics(_e: Event, args: any) {
-    if (args && args.current >= 0) {
-      setTimeout(() => {
+    if (args?.current >= 0) {
+      window.setTimeout(() => {
         this.setState((state: State) => {
           return {
             ...state,

src/examples/slickgrid/Example27.tsx

@@ -232,7 +232,7 @@ export default class Example27 extends React.Component<Props, State> {
   }
 
   hideSpinner() {
-    setTimeout(() => {
+    window.setTimeout(() => {
       this.setState((state: State) => ({ ...state, loadingClass: '' }));
     }, 200); // delay the hide spinner a bit to avoid show/hide too quickly
   }

src/examples/slickgrid/Example28.tsx

@@ -323,7 +323,7 @@ export default class Example28 extends React.Component<Props, State> {
       }));
 
       // scroll into the position, after insertion cycle, where the item was added
-      setTimeout(() => {
+      window.setTimeout(() => {
         const rowIndex = this.reactGrid.dataView.getRowById(popFolderItem.id) as number;
         this.reactGrid.slickGrid.scrollRowIntoView(rowIndex + 3);
       }, 10);

src/examples/slickgrid/Example3.tsx

@@ -440,7 +440,7 @@ export default class Example3 extends React.Component<Props, State> {
 
           // OR 3- use a Promise
           // collectionAsync: new Promise<any>((resolve) => {
-          //   setTimeout(() => {
+          //   window.setTimeout(() => {
           //     resolve(Array.from(Array(NB_ITEMS).keys()).map(k => ({ value: k, label: k, prefix: 'Task', suffix: 'days' })));
           //   }, 500);
           // }),
@@ -465,7 +465,7 @@ export default class Example3 extends React.Component<Props, State> {
         filter: {
           collectionAsync: fetch(URL_SAMPLE_COLLECTION_DATA),
           // collectionAsync: new Promise((resolve) => {
-          //   setTimeout(() => {
+          //   window.setTimeout(() => {
           //     resolve(Array.from(Array(this.dataset.length).keys()).map(k => ({ value: k, label: `Task ${k}` })));
           //   });
           // }),
@@ -518,7 +518,7 @@ export default class Example3 extends React.Component<Props, State> {
     const newRows = this.mockData(1, lastRowIndex);
 
     // wrap into a timer to simulate a backend async call
-    setTimeout(() => {
+    window.setTimeout(() => {
       // at any time, we can poke the 'collection' property and modify it
       const requisiteColumnDef = this.state.columnDefinitions?.find(
         (column: Column) => column.id === 'prerequisites'

src/examples/slickgrid/Example30.tsx

@@ -670,7 +670,7 @@ export default class Example30 extends React.Component<Props, State> {
         // when processing a mass update or mass selection
         if (modalType === 'mass-update' || modalType === 'mass-selection') {
           return new Promise((resolve, reject) => {
-            setTimeout(() => {
+            window.setTimeout(() => {
               if (formValues.percentComplete >= 50) {
                 resolve(true);
               } else {
@@ -683,7 +683,7 @@ export default class Example30 extends React.Component<Props, State> {
           // we'll just apply the change without any rejection from the server and
           // note that we also have access to the "dataContext" which is only available for these modal
           console.log(`${modalType} item data context`, dataContext);
-          return new Promise(resolve => setTimeout(() => resolve(true), serverResponseDelay));
+          return new Promise(resolve => window.setTimeout(() => resolve(true), serverResponseDelay));
         }
       }
     });

src/examples/slickgrid/Example31.tsx

@@ -374,7 +374,7 @@ export default class Example31 extends React.Component<Props, State> {
           }
           const updatedData = filteredData.slice(firstRow, firstRow + top!);
 
-          setTimeout(() => {
+          window.setTimeout(() => {
             const backendResult: any = { query };
             if (!this.state.isCountEnabled) {
               backendResult['totalRecordCount'] = countTotalItems;

src/examples/slickgrid/Example33.tsx

@@ -85,7 +85,7 @@ export default class Example32 extends React.Component<Props, State> {
           // you will need to provide an `asyncPost` function returning a Promise and also `asyncPostFormatter` formatter to display the result once the Promise resolves
           formatter: () => `<div><span class="mdi mdi-load mdi-spin"></span> loading...</div>`,
           asyncProcess: () => new Promise(resolve => {
-            setTimeout(() => resolve({ ratio: Math.random() * 10 / 10, lifespan: Math.random() * 100 }), this.state.serverApiDelay);
+            window.setTimeout(() => resolve({ ratio: Math.random() * 10 / 10, lifespan: Math.random() * 100 }), this.state.serverApiDelay);
           }),
           asyncPostFormatter: this.tooltipTaskAsyncFormatter as Formatter,
 
@@ -189,7 +189,7 @@ export default class Example32 extends React.Component<Props, State> {
 
           // 2- delay the opening by a simple Promise and `setTimeout`
           asyncProcess: () => new Promise(resolve => {
-            setTimeout(() => resolve({}), this.state.serverApiDelay); // delayed by half a second
+            window.setTimeout(() => resolve({}), this.state.serverApiDelay); // delayed by half a second
           }),
           asyncPostFormatter: this.tooltipFormatter.bind(this) as Formatter,
         },
@@ -244,7 +244,7 @@ export default class Example32 extends React.Component<Props, State> {
 
           // OR 2- use a Promise
           collectionAsync: new Promise<any>((resolve) => {
-            setTimeout(() => {
+            window.setTimeout(() => {
               resolve(Array.from(Array(this.state.dataset?.length).keys()).map(k => ({ value: k, label: k, prefix: 'Task', suffix: 'days' })));
             }, 500);
           }),
@@ -261,7 +261,7 @@ export default class Example32 extends React.Component<Props, State> {
         filter: {
           // collectionAsync: fetch(URL_SAMPLE_COLLECTION_DATA),
           collectionAsync: new Promise((resolve) => {
-            setTimeout(() => {
+            window.setTimeout(() => {
               resolve(Array.from(Array(this.state.dataset?.length).keys()).map(k => ({ value: k, label: `Task ${k}` })));
             });
           }),

src/examples/slickgrid/Example34.tsx

@@ -101,7 +101,7 @@ export default class Example34 extends React.Component<Props, State> {
     <li>to show SlickGrid HUGE PERF., do the following: (1) lower Changes Rate (2) increase both Changes per Cycle and (3) lower Highlight Duration
   </ul>`;
 
-  timer: any;
+  timer?: number;
   reactGrid!: SlickgridReactInstance;
 
   constructor(public readonly props: Props) {
@@ -123,7 +123,7 @@ export default class Example34 extends React.Component<Props, State> {
     document.title = this.title;
     this.defineGrid();
 
-    setTimeout(() => {
+    window.setTimeout(() => {
       this.startSimulation();
     }, this.state.refreshRate);
   }
@@ -335,11 +335,11 @@ export default class Example34 extends React.Component<Props, State> {
       // but the cell highlight actually does that for us so we can skip it
     }
 
-    this.timer = setTimeout(this.startSimulation.bind(this), this.state.refreshRate || 0);
+    this.timer = window.setTimeout(this.startSimulation.bind(this), this.state.refreshRate || 0);
   }
 
   stopSimulation() {
-    clearTimeout(this.timer);
+    window.clearTimeout(this.timer);
   }
 
   findColumnById(columnName: string): Column {
@@ -377,7 +377,7 @@ export default class Example34 extends React.Component<Props, State> {
         this.reactGrid.slickGrid.setCellCssStyles(`highlight_${[column.id]}${row}`, hash);
 
         // remove highlight after x amount of time
-        setTimeout(() => this.removeUnsavedStylingFromCell(item, column, row), this.state.highlightDuration);
+        window.setTimeout(() => this.removeUnsavedStylingFromCell(item, column, row), this.state.highlightDuration);
       }
     }
   }

src/examples/slickgrid/Example35.tsx

@@ -30,7 +30,7 @@ interface State extends BaseSlickGridState {
 
 function fakeFetch(_input: string | URL | Request, _init?: RequestInit | undefined): Promise<Response> {
   return new Promise((resolve) => {
-    setTimeout(() => {
+    window.setTimeout(() => {
       resolve(new Response(JSON.stringify({ status: 200, message: 'success' })));
       // reduces the delay for automated Cypress tests
     }, (window as any).Cypress ? 10 : 500);

src/examples/slickgrid/Example38.tsx

@@ -375,7 +375,7 @@ export default class Example38 extends React.Component<Props, State> {
           }
           const updatedData = filteredData.slice(firstRow, firstRow + top!);
 
-          setTimeout(() => {
+          window.setTimeout(() => {
             const backendResult: any = { query };
             backendResult['value'] = updatedData;
             backendResult['@odata.count'] = countTotalItems;

src/examples/slickgrid/Example39.tsx

@@ -347,7 +347,7 @@ class Example39 extends React.Component<Props, State> {
             },
           };
 
-          setTimeout(() => {
+          window.setTimeout(() => {
             this.setState((state: State) => ({
               ...state,
               graphqlQuery: this.state.gridOptions!.backendServiceApi!.service.buildQuery()

src/examples/slickgrid/Example4.tsx

@@ -315,7 +315,7 @@ export default class Example4 extends React.Component<Props, State> {
 
   refreshMetrics(_e: Event, args: any) {
     if (args?.current >= 0) {
-      setTimeout(() => {
+      window.setTimeout(() => {
         this.setState((state: State) => ({
           ...state,
           metrics: {

src/examples/slickgrid/Example5.tsx

@@ -421,7 +421,7 @@ export default class Example5 extends React.Component<Props, State> {
           }
           const updatedData = filteredData.slice(firstRow, firstRow + top!);
 
-          setTimeout(() => {
+          window.setTimeout(() => {
             const backendResult: any = { query };
             if (!this.state.isCountEnabled) {
               backendResult['totalRecordCount'] = countTotalItems;

src/examples/slickgrid/Example6.tsx

@@ -341,7 +341,7 @@ class Example6 extends React.Component<Props, State> {
     };
 
     return new Promise(resolve => {
-      setTimeout(() => {
+      window.setTimeout(() => {
         this.setState((state: any) => {
           return {
             ...state,
@@ -419,7 +419,7 @@ class Example6 extends React.Component<Props, State> {
       { columnId: 'name', direction: 'asc' },
       { columnId: 'company', direction: SortDirection.DESC }
     ]);
-    setTimeout(() => {
+    window.setTimeout(() => {
       this.reactGrid.paginationService?.changeItemPerPage(20);
       this.reactGrid.paginationService?.goToPageNumber(2);
     });

src/examples/slickgrid/custom-inputEditor.tsx

@@ -44,7 +44,7 @@ export class CustomInputEditor implements Editor {
 
     this.inputElm.addEventListener('keydown', this.handleKeydown.bind(this));
 
-    setTimeout(() => {
+    window.setTimeout(() => {
       this.inputElm.focus();
       this.inputElm.select();
     }, 50);