feat(search): refactor search and highlight #3519

IgniteUI · Jan 15, 2019 · 7d4e831 · 7d4e831
1 parent 03b5771
commit 7d4e831
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 370 deletions.
diff --git a/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.spec.ts
@@ -31,7 +31,6 @@ describe('IgxHighlight', () => {
         expect(component.highlight.value).toBe(component.html);
         expect(component.highlight.row).toBe(0);
         expect(component.highlight.column).toBe(0);
-        expect(component.highlight.page).toBe(0);
         expect(component.highlight.containerClass).toBe('test');
     });
 
@@ -281,7 +280,7 @@ describe('IgxHighlight', () => {
 @Component({
     template:
         // tslint:disable-next-line:max-line-length
-        `<div igxTextHighlight [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="groupName" [value]="html" [column]="0" [row]="0" [page]="0" [containerClass]="'test'">
+        `<div igxTextHighlight [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="groupName" [value]="html" [column]="0" [row]="0" [containerClass]="'test'">
             {{html}}
         </div>`
 })
@@ -310,9 +309,8 @@ class HighlightLoremIpsumComponent {
 
     public activate(index: number) {
         const activeHighlightInfo: IActiveHighlightInfo = {
-            rowIndex: 0,
-            columnIndex: 0,
-            page: 0,
+            rowID: 0,
+            columnID: 0,
             index: index
         };
         IgxTextHighlightDirective.setActiveHighlight(this.groupName, activeHighlightInfo);

diff --git a/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts b/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts
@@ -13,6 +13,7 @@ import {
 } from '@angular/core';
 import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
+import { DeprecateProperty } from '../../core/deprecateDecorators';
 
 interface ISearchInfo {
     searchedText: string;
@@ -23,9 +24,8 @@ interface ISearchInfo {
 }
 
 export interface IActiveHighlightInfo {
-    rowIndex: number;
-    columnIndex: number;
-    page: number;
+    rowID?: any;
+    columnID?: any;
     index: number;
 }
 
@@ -123,7 +123,7 @@ export class IgxTextHighlightDirective implements AfterViewInit, OnDestroy, OnCh
     }
 
     /**
-     * The index of the row on which the directive is currently on.
+     * The identifier of the row on which the directive is currently on.
      *
      * ```html
      * <div
@@ -133,10 +133,10 @@ export class IgxTextHighlightDirective implements AfterViewInit, OnDestroy, OnCh
      * ```
      */
     @Input('row')
-    public row: number;
+    public row: any;
 
     /**
-     * The index of the column on which the directive is currently on.
+     * The identifier of the column on which the directive is currently on.
      *
      * ```html
      * <div
@@ -146,19 +146,9 @@ export class IgxTextHighlightDirective implements AfterViewInit, OnDestroy, OnCh
      * ```
      */
     @Input('column')
-    public column: number;
+    public column: any;
 
-    /**
-     * The index of the page on which the directive is currently on.
-     * It is used when the component containing the directive supports paging.
-     *
-     * ```html
-     * <div
-     *   igxTextHighlight
-     *   [page]="0">
-     * </div>
-     * ```
-     */
+    @DeprecateProperty(`IgxTextHighlightDirective 'page' input is deprecated. There is no need to set it.`)
     @Input('page')
     public page: number;
 
@@ -188,9 +178,8 @@ export class IgxTextHighlightDirective implements AfterViewInit, OnDestroy, OnCh
      */
     public static clearActiveHighlight(groupName) {
         IgxTextHighlightDirective.highlightGroupsMap.set(groupName, {
-            rowIndex: -1,
-            columnIndex: -1,
-            page: -1,
+            rowID: null,
+            columnID: null,
             index: -1
         });
         IgxTextHighlightDirective.onActiveElementChanged.emit(groupName);
@@ -246,9 +235,8 @@ export class IgxTextHighlightDirective implements AfterViewInit, OnDestroy, OnCh
     ngAfterViewInit() {
         if (IgxTextHighlightDirective.highlightGroupsMap.has(this.groupName) === false) {
             IgxTextHighlightDirective.highlightGroupsMap.set(this.groupName, {
-                rowIndex: -1,
-                columnIndex: -1,
-                page: -1,
+                rowID: null,
+                columnID: null,
                 index: -1
             });
         }
@@ -308,7 +296,7 @@ export class IgxTextHighlightDirective implements AfterViewInit, OnDestroy, OnCh
      */
     public activateIfNecessary(): void {
         const group = IgxTextHighlightDirective.highlightGroupsMap.get(this.groupName);
-        if (group.columnIndex === this.column && group.rowIndex === this.row && group.page === this.page) {
+        if (group.columnID === this.column && group.rowID === this.row) {
             this.activate(group.index);
         }
     }
@@ -458,7 +446,9 @@ export class IgxTextHighlightDirective implements AfterViewInit, OnDestroy, OnCh
 
     private appendDiv() {
         this._div = this.renderer.createElement('div');
-        this.renderer.addClass(this._div, this.containerClass);
+        if ( this.containerClass) {
+            this.renderer.addClass(this._div, this.containerClass);
+        }
         this.renderer.appendChild(this.parentElement, this._div);
     }
 

diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html
@@ -1,5 +1,5 @@
 <ng-template #defaultCell igxTextHighlight [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
-        [value]="formatter ? formatter(value) : value" [row]="rowIndex" [column]="this.column.visibleIndex" [page]="this.grid.page" [containerClass]="'igx-grid__td-text'">
+        [value]="formatter ? formatter(value) : value" [row]="row.rowData" [column]="this.column.field" [containerClass]="'igx-grid__td-text'">
     <ng-container *ngIf="column.dataType === 'boolean' || column.dataType === 'string' || formatter; else default" >
         <div class="igx-grid__td-text">{{ formatter ? formatter(value) : value }}</div>
     </ng-container>

diff --git a/projects/igniteui-angular/src/lib/grids/column.component.ts b/projects/igniteui-angular/src/lib/grids/column.component.ts
@@ -198,20 +198,6 @@ export class IgxColumnComponent implements AfterContentInit {
             }
             this.check();
             if (this.grid) {
-                const activeInfo = IgxTextHighlightDirective.highlightGroupsMap.get(this.grid.id);
-                if (!activeInfo) {
-                    return;
-                }
-                const oldIndex = activeInfo.columnIndex;
-
-                if (this.grid.lastSearchInfo.searchText) {
-                    if (this.index <= oldIndex) {
-                        const newIndex = this.hidden ? oldIndex - 1 : oldIndex + 1;
-                        IgxColumnComponent.updateHighlights(oldIndex, newIndex, this.grid);
-                    } else if (oldIndex === -1 && !this.hidden) {
-                        this.grid.refreshSearch();
-                    }
-                }
                 this.grid.summaryService.resetSummaryHeight();
                 this.grid.reflow();
                 this.grid.filteringService.refreshExpressions();
@@ -869,21 +855,6 @@ export class IgxColumnComponent implements AfterContentInit {
     @ContentChild(IgxCellEditorTemplateDirective, { read: IgxCellEditorTemplateDirective })
     protected editorTemplate: IgxCellEditorTemplateDirective;
 
-    public static updateHighlights(oldIndex: number, newIndex: number, grid: IgxGridBaseComponent) {
-        const activeInfo = IgxTextHighlightDirective.highlightGroupsMap.get(grid.id);
-
-        if (activeInfo && activeInfo.columnIndex === oldIndex) {
-            IgxTextHighlightDirective.setActiveHighlight(grid.id, {
-                columnIndex: newIndex,
-                rowIndex: activeInfo.rowIndex,
-                index: activeInfo.index,
-                page: activeInfo.page,
-            });
-
-            grid.refreshSearch(true);
-        }
-    }
-
     constructor(public gridAPI: GridBaseAPIService<IgxGridBaseComponent>, public cdr: ChangeDetectorRef) { }
     /**
      *@hidden
@@ -933,27 +904,6 @@ export class IgxColumnComponent implements AfterContentInit {
             }
         }
     }
-    /**
-     * Updates the highlights when a column index is changed.
-     * ```typescript
-     * this.column.updateHighlights(1, 3);
-     * ```
-     * @memberof IgxColumnComponent
-     */
-    public updateHighlights(oldIndex: number, newIndex: number) {
-        const activeInfo = IgxTextHighlightDirective.highlightGroupsMap.get(this.grid.id);
-
-        if (activeInfo && activeInfo.columnIndex === oldIndex) {
-            IgxTextHighlightDirective.setActiveHighlight(this.grid.id, {
-                columnIndex: newIndex,
-                rowIndex: activeInfo.rowIndex,
-                index: activeInfo.index,
-                page: activeInfo.page,
-            });
-
-            this.grid.refreshSearch(true);
-        }
-    }
     /**
      * Pins the column at the provided index in the pinned area. Defaults to index `0` if not provided.
      * ```typescript
@@ -1014,8 +964,6 @@ export class IgxColumnComponent implements AfterContentInit {
 
         grid.cdr.detectChanges();
         this.grid.filteringService.refreshExpressions();
-        const newIndex = this.visibleIndex;
-        IgxColumnComponent.updateHighlights(oldIndex, newIndex, grid);
         return true;
     }
     /**
@@ -1066,8 +1014,6 @@ export class IgxColumnComponent implements AfterContentInit {
 
         grid.cdr.detectChanges();
         this.grid.filteringService.refreshExpressions();
-        const newIndex = this.visibleIndex;
-        IgxColumnComponent.updateHighlights(oldIndex, newIndex, grid);
         return true;
     }
     /**