Merge pull request #1456 from ghiscoding/bugfix/settimeout-types

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

Author: ghiscoding

package.json

@@ -50,13 +50,13 @@
   },
   "dependencies": {
     "@ngx-translate/core": "^15.0.0",
-    "@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/row-detail-view-plugin": "~5.5.1",
-    "@slickgrid-universal/rxjs-observable": "~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",
+    "@slickgrid-universal/row-detail-view-plugin": "~5.5.2",
+    "@slickgrid-universal/rxjs-observable": "~5.5.2",
     "dequal": "^2.0.3",
     "rxjs": "^7.8.1"
   },
@@ -86,12 +86,12 @@
     "@ngx-translate/http-loader": "^8.0.0",
     "@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/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/text-export": "~5.5.2",
     "@types/dompurify": "^3.0.5",
     "@types/fnando__sparkline": "^0.3.7",
     "@types/jest": "^29.5.12",

src/app/examples/custom-inputEditor.ts

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

src/app/examples/grid-base-row-editing.component.ts

@@ -257,7 +257,7 @@ export class GridBaseRowEditingComponent implements OnInit {
 
 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/app/examples/grid-clientside.component.ts

@@ -271,7 +271,7 @@ export class GridClientSideComponent implements OnInit {
 
   refreshMetrics(e: Event, args: any) {
     if (args && args.current >= 0) {
-      setTimeout(() => {
+      window.setTimeout(() => {
         this.metrics = {
           startTime: new Date(),
           endTime: new Date(),

src/app/examples/grid-composite-editor.component.ts

@@ -650,7 +650,7 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit {
         // 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 {
@@ -663,7 +663,7 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit {
           // 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/app/examples/grid-custom-tooltip.component.ts

@@ -76,7 +76,7 @@ export class GridCustomTooltipComponent implements OnInit {
           // 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-1s"></span> loading...</div>`,
           asyncProcess: () => new Promise(resolve => {
-            setTimeout(() => resolve({ ratio: Math.random() * 10 / 10, lifespan: Math.random() * 100 }), this.serverApiDelay);
+            window.setTimeout(() => resolve({ ratio: Math.random() * 10 / 10, lifespan: Math.random() * 100 }), this.serverApiDelay);
           }),
           asyncPostFormatter: this.tooltipTaskAsyncFormatter as Formatter,
 
@@ -180,7 +180,7 @@ export class GridCustomTooltipComponent implements OnInit {
 
           // 2- delay the opening by a simple Promise and `setTimeout`
           asyncProcess: () => new Promise(resolve => {
-            setTimeout(() => resolve({}), this.serverApiDelay); // delayed by half a second
+            window.setTimeout(() => resolve({}), this.serverApiDelay); // delayed by half a second
           }),
           asyncPostFormatter: this.tooltipFormatter.bind(this) as Formatter,
         },
@@ -235,7 +235,7 @@ export class GridCustomTooltipComponent implements OnInit {
 
           // OR 2- use a Promise
           collectionAsync: new Promise<any>((resolve) => {
-            setTimeout(() => {
+            window.setTimeout(() => {
               resolve(Array.from(Array(this.dataset.length).keys()).map(k => ({ value: k, label: k, prefix: 'Task', suffix: 'days' })));
             }, 500);
           }),
@@ -252,7 +252,7 @@ export class GridCustomTooltipComponent implements OnInit {
         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}` })));
             });
           }),

src/app/examples/grid-editor.component.ts

@@ -500,7 +500,7 @@ export class GridEditorComponent implements OnInit {
     const newRows = this.mockData(1, lastRowIndex);
 
     // wrap into a timer to simulate a backend async call
-    setTimeout(() => {
+    window.setTimeout(() => {
       const requisiteColumnDef = this.columnDefinitions.find((column: Column) => column.id === 'prerequisites');
       if (requisiteColumnDef) {
         const filterCollectionAsync = requisiteColumnDef.filter!.collectionAsync;

src/app/examples/grid-formatter.component.ts

@@ -155,7 +155,7 @@ export class GridFormatterComponent implements OnInit {
       item.completed = !item.completed;
 
       // simulate a backend http call and refresh the grid row after delay
-      setTimeout(() => {
+      window.setTimeout(() => {
         this.angularGrid.gridService.updateItemById(item.id, item, { highlightRow: false });
       }, 250);
     }

src/app/examples/grid-graphql.component.ts

@@ -307,7 +307,7 @@ export class GridGraphqlComponent implements OnInit, OnDestroy {
     };
 
     return new Promise(resolve => {
-      setTimeout(() => {
+      window.setTimeout(() => {
         this.graphqlQuery = this.angularGrid.backendService!.buildQuery();
         if (this.isWithCursor) {
           // When using cursor pagination, the pagination service needs to be updated with the PageInfo data from the latest request
@@ -388,7 +388,7 @@ export class GridGraphqlComponent implements OnInit, OnDestroy {
       { columnId: 'name', direction: 'asc' },
       { columnId: 'company', direction: SortDirection.DESC }
     ]);
-    setTimeout(() => {
+    window.setTimeout(() => {
       this.angularGrid.paginationService?.changeItemPerPage(20);
       this.angularGrid.paginationService?.goToPageNumber(2);
     });

src/app/examples/grid-infinite-graphql.component.ts

@@ -311,7 +311,7 @@ export class GridInfiniteGraphqlComponent implements OnInit, OnDestroy {
           },
         };
 
-        setTimeout(() => {
+        window.setTimeout(() => {
           this.graphqlQuery = this.gridOptions.backendServiceApi!.service.buildQuery();
           resolve(mockedResult);
         }, this.serverWaitDelay);