feat(search): refactor highlight directive applying #3520

# Conflicts: # projects/igniteui-angular/src/lib/grids/cell.component.html # projects/igniteui-angular/src/lib/grids/cell.component.ts
IgniteUI · Jan 30, 2019 · 07fc8f4 · 07fc8f4
1 parent b93a52b
commit 07fc8f4
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 37 deletions.
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
@@ -212,9 +212,7 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
         IgxTextHighlightDirective.onActiveElementChanged.emit(groupName);
     }
 
-    constructor(element: ElementRef, public renderer: Renderer2) {
-        this.parentElement = this.renderer.parentNode(element.nativeElement);
-
+    constructor(private element: ElementRef, public renderer: Renderer2) {
         IgxTextHighlightDirective.onActiveElementChanged.pipe(takeUntil(this.destroy$)).subscribe((groupName) => {
             if (this.groupName === groupName) {
                 if (this._activeElementIndex !== -1) {
@@ -229,6 +227,8 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
      * @hidden
      */
     ngOnDestroy() {
+        this.clearHighlight();
+
         if (this._observer !== null) {
             this._observer.disconnect();
         }
@@ -257,6 +257,8 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
      * @hidden
      */
     ngAfterViewInit() {
+        this.parentElement = this.renderer.parentNode(this.element.nativeElement);
+
         if (IgxTextHighlightDirective.highlightGroupsMap.has(this.groupName) === false) {
             IgxTextHighlightDirective.highlightGroupsMap.set(this.groupName, {
                 index: -1

diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html
@@ -1,11 +1,7 @@
-<ng-template #defaultCell igxTextHighlight [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
-        [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>
-    <ng-template #default>
-        <div class="igx-grid__td-text">{{ column.dataType === 'number' ? (value | igxdecimal: grid.locale) : (value | igxdate: grid.locale) }}</div>
-    </ng-template>
+<ng-template #defaultCell>
+    <div igxTextHighlight [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
+         [value]="formatter ? formatter(value) : value" [row]="row.rowData" [column]="this.column.field" [containerClass]="'igx-grid__td-text'" 
+         class="igx-grid__td-text">{{ formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value }}</div>
 </ng-template>
 <ng-template #inlineEditor  let-cell="cell">
     <ng-container *ngIf="column.dataType === 'string'">

diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts
@@ -38,7 +38,7 @@ import { DataType } from '../data-operations/data-util';
     selector: 'igx-grid-cell',
     templateUrl: './cell.component.html'
 })
-export class IgxGridCellComponent implements OnInit, AfterViewInit {
+export class IgxGridCellComponent implements OnInit {
 
     /**
      * Gets the column of the cell.
@@ -267,15 +267,8 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
      */
     get inEditMode(): boolean {
         const editableCell = this.gridAPI.get_cell_inEditMode(this.gridID);
-        const result = editableCell ? this.cellID.rowID === editableCell.cellID.rowID &&
-                                      this.cellID.columnID === editableCell.cellID.columnID : false;
-
-        if (result && !this._inEditMode && this.highlight && this.grid.lastSearchInfo.searchText) {
-            this.highlight.observe();
-        }
-        this._inEditMode = result;
-
-        return result;
+        return editableCell ? this.cellID.rowID === editableCell.cellID.rowID &&
+                              this.cellID.columnID === editableCell.cellID.columnID : false;
     }
 
     /**
@@ -463,8 +456,23 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
     @ViewChild('inlineEditor', { read: TemplateRef })
     protected inlineEditorTemplate: TemplateRef<any>;
 
+    private _highlight: IgxTextHighlightDirective;
+
     @ViewChild(IgxTextHighlightDirective, { read: IgxTextHighlightDirective })
-    protected highlight: IgxTextHighlightDirective;
+    protected set highlight(value: IgxTextHighlightDirective) {
+        this._highlight = value;
+
+        if (this._highlight && this.grid.lastSearchInfo.searchText) {
+            this._highlight.highlight(this.grid.lastSearchInfo.searchText,
+                this.grid.lastSearchInfo.caseSensitive,
+                this.grid.lastSearchInfo.exactMatch);
+            this._highlight.activateIfNecessary();
+        }
+    }
+
+    protected get highlight() {
+        return this._highlight;
+    }
 
     /**
      * Sets the current edit value while a cell is in edit mode.
@@ -500,7 +508,6 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
     private cellSelectionID: string;
     private prevCellSelectionID: string;
     private previousCellEditMode = false;
-    private _inEditMode: boolean;
 
     constructor(
         public gridAPI: GridBaseAPIService<IgxGridBaseComponent>,
@@ -624,19 +631,6 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
         this.cdr.markForCheck();
     }
 
-
-    /**
-     *@hidden
-     */
-    public ngAfterViewInit() {
-        if (this.highlight && this.grid.lastSearchInfo.searchText) {
-            this.highlight.highlight(this.grid.lastSearchInfo.searchText,
-                this.grid.lastSearchInfo.caseSensitive,
-                this.grid.lastSearchInfo.exactMatch);
-            this.highlight.activateIfNecessary();
-        }
-    }
-
     /**
      *@hidden
      */

diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
@@ -4261,7 +4261,12 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
 
         const editModeCell = this.gridAPI.get_cell_inEditMode(this.id);
         if (editModeCell) {
-            this.endEdit(false);
+            const editCell = this.gridAPI.get_cell_by_index(this.id, editModeCell.cellID.rowIndex, editModeCell.cellID.columnID);
+            if (editCell) {
+                editCell.inEditMode = false;
+            } else {
+                this.endEdit(false);
+            }
         }
 
         if (!text) {