chore(datagrid): improve trackBy function type annotations

vmware-clarity · Feb 17, 2023 · 138a6dd · 138a6dd
1 parent 45afc47
commit 138a6dd
Show file tree

Hide file tree

Showing 12 changed files with 37 additions and 56 deletions.
diff --git a/projects/angular/clarity.api.md b/projects/angular/clarity.api.md
@@ -1370,8 +1370,6 @@ export class ClrDatagridColumnToggle implements OnDestroy {
     customToggleTitle: ClrDatagridColumnToggleTitle;
     // (undocumented)
     get hasOnlyOneVisibleColumn(): boolean;
-    // Warning: (ae-forgotten-export) The symbol "ColumnState" needs to be exported by the entry point index.d.ts
-    //
     // (undocumented)
     get hideableColumnStates(): ColumnState[];
     // (undocumented)
@@ -1386,8 +1384,10 @@ export class ClrDatagridColumnToggle implements OnDestroy {
     toggleColumnState(columnState: ColumnState, event: boolean): void;
     // (undocumented)
     toggleSwitchPanel(): void;
+    // Warning: (ae-forgotten-export) The symbol "ColumnState" needs to be exported by the entry point index.d.ts
+    //
     // (undocumented)
-    trackByFn(index: number): number;
+    trackByFn: TrackByFunction<ColumnState>;
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<ClrDatagridColumnToggle, "clr-dg-column-toggle", never, {}, {}, ["customToggleTitle", "customToggleButton"], ["clr-dg-column-toggle-title", "clr-dg-column-toggle-button"]>;
     // (undocumented)

diff --git a/projects/angular/src/data/datagrid/datagrid-column-toggle.ts b/projects/angular/src/data/datagrid/datagrid-column-toggle.ts
@@ -4,7 +4,7 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { Component, ContentChild, ElementRef, OnDestroy, ViewChild } from '@angular/core';
+import { Component, ContentChild, ElementRef, OnDestroy, TrackByFunction, ViewChild } from '@angular/core';
 import { Subscription } from 'rxjs';
 
 import { ClrCommonStringsService } from '../../utils/i18n/common-strings.service';
@@ -117,6 +117,10 @@ export class ClrDatagridColumnToggle implements OnDestroy {
     this._allColumnsVisible = value;
   }
 
+  // Without tracking the checkboxes get rerendered on model update, which leads
+  // to loss of focus after checkbox toggle.
+  trackByFn: TrackByFunction<ColumnState> = index => index;
+
   constructor(
     public commonStrings: ClrCommonStringsService,
     private columnsService: ColumnsService,
@@ -157,10 +161,4 @@ export class ClrDatagridColumnToggle implements OnDestroy {
   allColumnsSelected() {
     this.allSelectedElement.nativeElement.focus();
   }
-
-  // Without tracking the checkboxes get rerendered on model update, which leads
-  // to loss of focus after checkbox toggle.
-  trackByFn(index: number) {
-    return index;
-  }
 }
diff --git a/projects/angular/src/data/datagrid/datagrid-items-trackby.spec.ts b/projects/angular/src/data/datagrid/datagrid-items-trackby.spec.ts
@@ -4,7 +4,7 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { Component, ViewChild } from '@angular/core';
+import { Component, TrackByFunction, ViewChild } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 
 import { ClrDatagridItems } from './datagrid-items';
@@ -54,5 +54,5 @@ class FullTest {
 
   numbers = [1, 2, 3, 4, 5];
 
-  trackBy: (index: number, item: number) => any;
+  trackBy: TrackByFunction<number>;
 }
diff --git a/projects/angular/src/data/datagrid/datagrid-items.spec.ts b/projects/angular/src/data/datagrid/datagrid-items.spec.ts
@@ -4,7 +4,7 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { Component, ViewChild } from '@angular/core';
+import { Component, TrackByFunction, ViewChild } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 
 import { ClrDatagridItems } from './datagrid-items';
@@ -42,7 +42,7 @@ class TrackByIndexTest {
 
   numbers = [1, 2, 3, 4, 5];
 
-  trackBy = index => index;
+  trackBy: TrackByFunction<number> = index => index;
 }
 
 export default function (): void {

diff --git a/projects/angular/src/data/datagrid/datagrid.spec.ts b/projects/angular/src/data/datagrid/datagrid.spec.ts
@@ -4,7 +4,7 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, TrackByFunction } from '@angular/core';
 import { async, fakeAsync, tick } from '@angular/core/testing';
 import { Subject } from 'rxjs';
 
@@ -452,7 +452,7 @@ class PanelTrackByTest {
   items = Array.from(Array(3), (v, i) => {
     return { name: v, id: i };
   });
-  trackById = (index, item) => item.id;
+  trackById: TrackByFunction<{ id: number }> = (index, item) => item.id;
 }
 
 export default function (): void {

diff --git a/projects/angular/src/data/datagrid/providers/items.ts b/projects/angular/src/data/datagrid/providers/items.ts
@@ -25,7 +25,7 @@ export class Items<T = any> {
   /**
    * Tracking function to identify objects. Default is reference equality.
    */
-  trackBy: TrackByFunction<T> = (_index: number, item: T) => item;
+  trackBy: TrackByFunction<T> = (_index, item) => item;
 
   /**
    * Subscriptions to the other providers changes.

diff --git a/projects/angular/src/data/datagrid/providers/selection.ts b/projects/angular/src/data/datagrid/providers/selection.ts
@@ -4,7 +4,7 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { Injectable, TrackByFunction } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { Observable, Subject, Subscription } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 
@@ -46,7 +46,7 @@ export class Selection<T = any> {
 
           case SelectionType.Single: {
             let newSingle: any;
-            const trackBy: TrackByFunction<T> = this._items.trackBy;
+            const trackBy = this._items.trackBy;
             let selectionUpdated = false;
 
             // if the currentSingle has been set before data was loaded, we look up and save the ref from current data set
@@ -91,7 +91,7 @@ export class Selection<T = any> {
 
           case SelectionType.Multi: {
             let leftOver: any[] = this.current.slice();
-            const trackBy: TrackByFunction<any> = this._items.trackBy;
+            const trackBy = this._items.trackBy;
             let selectionUpdated = false;
 
             // if the current has been set before data was loaded, we look up and save the ref from current data set

diff --git a/projects/angular/src/forms/combobox/option-items.directive.spec.ts b/projects/angular/src/forms/combobox/option-items.directive.spec.ts
@@ -4,7 +4,7 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { Component, ViewChild } from '@angular/core';
+import { Component, TrackByFunction, ViewChild } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 
 import { ClrPopoverEventsService } from '../../utils/popover/providers/popover-events.service';
@@ -25,7 +25,7 @@ import { OptionSelectionService } from './providers/option-selection.service';
 class FullTest {
   @ViewChild(ClrOptionItems) optionItems: ClrOptionItems<number>;
   numbers = [0, 1, 2, 3];
-  trackBy: (index: number, item: number) => any;
+  trackBy: TrackByFunction<number>;
 }
 
 @Component({
@@ -39,7 +39,7 @@ class FullTest {
 class TrackByIndexTest {
   @ViewChild(ClrOptionItems) optionItems: ClrOptionItems<number>;
   numbers = [0, 1, 2, 3];
-  trackBy = (index: number) => index;
+  trackBy: TrackByFunction<number> = index => index;
 }
 
 @Component({
@@ -53,7 +53,7 @@ class TrackByIndexTest {
 class ObjectDataTest {
   @ViewChild(ClrOptionItems) optionItems: ClrOptionItems<number>;
   numbers = [{ a: 0 }, { a: 1 }, { a: 2 }, { a: 3 }];
-  trackBy = (index: number) => index;
+  trackBy: TrackByFunction<number> = index => index;
 }
 
 const OPTION_ITEM_PROVIDERS = [OptionSelectionService, ClrPopoverToggleService];

diff --git a/projects/demo/src/app/datagrid/full/full.ts b/projects/demo/src/app/datagrid/full/full.ts
@@ -4,7 +4,7 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { Component } from '@angular/core';
+import { Component, TrackByFunction } from '@angular/core';
 import { ClrDatagridStateInterface } from '@clr/angular';
 
 import { FetchResult, Inventory } from '../inventory/inventory';
@@ -45,6 +45,8 @@ export class DatagridFullDemo {
   pokemonComparator = new PokemonComparator();
   pokemonFilter = new PokemonFilter();
 
+  trackById: TrackByFunction<User> = (_index, item) => item.id;
+
   constructor(private inventory: Inventory) {
     this.reset();
   }
@@ -99,10 +101,6 @@ export class DatagridFullDemo {
       });
   }
 
-  trackById(_idx: number, item: any) {
-    return item.id;
-  }
-
   clrDgActionOverflowOpenChangeFn($event: boolean) {
     console.log('clrDgActionOverflowOpenChange event', $event);
   }

diff --git a/projects/demo/src/app/datagrid/preserve-selection/preserve-selection.ts b/projects/demo/src/app/datagrid/preserve-selection/preserve-selection.ts
@@ -4,7 +4,7 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { Component } from '@angular/core';
+import { Component, TrackByFunction } from '@angular/core';
 import { ClrDatagridStateInterface } from '@clr/angular';
 
 import { FetchResult, Inventory } from '../inventory/inventory';
@@ -41,6 +41,9 @@ export class DatagridPreserveSelectionDemo {
   preserveFilteringTrackByIdUsers = false;
   preserveFilteringServerTrackBy = false;
 
+  trackByIndex: TrackByFunction<User> = index => index;
+  trackById: TrackByFunction<User> = (_index, item) => item.id;
+
   constructor(private inventory: Inventory) {
     this.inventory.size = this.total;
     this.inventory.latency = 500;
@@ -82,12 +85,4 @@ export class DatagridPreserveSelectionDemo {
       this.backUpUsers = [];
     }
   }
-
-  trackByIndex(index: number) {
-    return index;
-  }
-
-  trackById(_index: number, item: User) {
-    return item.id;
-  }
 }
diff --git a/projects/demo/src/app/datagrid/selection-single/selection-single.ts b/projects/demo/src/app/datagrid/selection-single/selection-single.ts
@@ -4,7 +4,7 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { Component } from '@angular/core';
+import { Component, TrackByFunction } from '@angular/core';
 import { ClrDatagridStateInterface } from '@clr/angular';
 
 import { FetchResult, Inventory } from '../inventory/inventory';
@@ -32,6 +32,9 @@ export class DatagridSelectionSingleDemo {
   loading = true;
   total: number;
 
+  trackByIndex: TrackByFunction<User> = index => index;
+  trackById: TrackByFunction<User> = (_index, item) => item.id;
+
   constructor(private inventory: Inventory) {
     this.inventory.size = 100;
     this.inventory.latency = 500;
@@ -60,12 +63,4 @@ export class DatagridSelectionSingleDemo {
         });
       });
   }
-
-  trackByIndex(index: number) {
-    return index;
-  }
-
-  trackById(_index: number, item: User) {
-    return item.id;
-  }
 }
diff --git a/projects/demo/src/app/datagrid/selection/selection.ts b/projects/demo/src/app/datagrid/selection/selection.ts
@@ -4,7 +4,7 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { Component } from '@angular/core';
+import { Component, TrackByFunction } from '@angular/core';
 import { ClrDatagridStateInterface } from '@clr/angular';
 
 import { FetchResult, Inventory } from '../inventory/inventory';
@@ -28,6 +28,9 @@ export class DatagridSelectionDemo {
   total = 100;
   loading = true;
 
+  trackByIndex: TrackByFunction<User> = index => index;
+  trackById: TrackByFunction<User> = (_index, item) => item.id;
+
   constructor(private inventory: Inventory) {
     this.inventory.size = this.total;
     this.inventory.latency = 500;
@@ -53,12 +56,4 @@ export class DatagridSelectionDemo {
         this.loading = false;
       });
   }
-
-  trackByIndex(index: number) {
-    return index;
-  }
-
-  trackById(_index: number, item: User) {
-    return item.id;
-  }
 }