refactor(module:autocomplete): refactor autocomplete (NG-ZORRO#2505)

ref NG-ZORRO#2381, close NG-ZORRO#2420
hsuanxyz · Nov 30, 2018 · 4213c2e · 4213c2e
1 parent 5ef9575
commit 4213c2e
Show file tree

Hide file tree

Showing 8 changed files with 156 additions and 198 deletions.
diff --git a/components/auto-complete/nz-autocomplete-optgroup.component.html b/components/auto-complete/nz-autocomplete-optgroup.component.html
@@ -1,8 +1,5 @@
 <div class="ant-select-dropdown-menu-item-group-title">
-  <ng-container *ngIf="isLabelString; else labelTemplate">{{nzLabel}}</ng-container>
-  <ng-template #labelTemplate>
-    <ng-template [ngTemplateOutlet]="nzLabel"></ng-template>
-  </ng-template>
+  <ng-container *nzStringTemplateOutlet="nzLabel">{{nzLabel}}</ng-container>
 </div>
 <ul class="ant-select-dropdown-menu-item-group-list">
   <ng-content select="nz-auto-option"></ng-content>

diff --git a/components/auto-complete/nz-autocomplete-optgroup.component.ts b/components/auto-complete/nz-autocomplete-optgroup.component.ts
@@ -1,35 +1,19 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  TemplateRef
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
 
 @Component({
   selector           : 'nz-auto-optgroup',
   preserveWhitespaces: false,
   changeDetection    : ChangeDetectionStrategy.OnPush,
+  encapsulation      : ViewEncapsulation.None,
   templateUrl        : './nz-autocomplete-optgroup.component.html',
   host               : {
     'role' : 'group',
     'class': 'ant-select-dropdown-menu-item-group'
   }
 })
 export class NzAutocompleteOptgroupComponent {
-  isLabelString: boolean;
 
-  /** group 的 label，支持 'string' 和 `TemplateRef` */
-  @Input()
-  set nzLabel(value: string | TemplateRef<void>) {
-    this.isLabelString = !(value instanceof TemplateRef);
-    this._label = value;
-  }
-
-  get nzLabel(): string | TemplateRef<void> {
-    return this._label;
-  }
-
-  _label: string | TemplateRef<void>;
+  @Input() nzLabel: string | TemplateRef<void>;
 
   constructor() {
   }

diff --git a/components/auto-complete/nz-autocomplete-option.component.ts b/components/auto-complete/nz-autocomplete-option.component.ts
@@ -1,11 +1,16 @@
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
-  Component, ElementRef, EventEmitter,
-  Input, Output
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  ViewEncapsulation
 } from '@angular/core';
 
-import { toBoolean } from '../core/util/convert';
+import { InputBoolean } from '../core/util/convert';
+import { scrollIntoView } from '../core/util/scroll-into-view-if-needed';
 
 export class NzOptionSelectionChange {
   constructor(
@@ -19,6 +24,7 @@ export class NzOptionSelectionChange {
   selector           : 'nz-auto-option',
   preserveWhitespaces: false,
   changeDetection    : ChangeDetectionStrategy.OnPush,
+  encapsulation      : ViewEncapsulation.None,
   templateUrl        : './nz-autocomplete-option.component.html',
   host               : {
     'role'                                          : 'menuitem',
@@ -32,57 +38,45 @@ export class NzOptionSelectionChange {
   }
 })
 export class NzAutocompleteOptionComponent {
-  private disabled = false;
-
-  active = false;
-  selected = false;
 
   /* tslint:disable-next-line:no-any */
   @Input() nzValue: any;
   @Input() nzLabel: string;
-
-  @Input()
-  get nzDisabled(): boolean {
-    return this.disabled;
-  }
-
-  set nzDisabled(value: boolean) {
-    this.disabled = toBoolean(value);
-  }
-
+  @Input() @InputBoolean() nzDisabled = false;
   @Output() readonly selectionChange = new EventEmitter<NzOptionSelectionChange>();
 
+  active = false;
+  selected = false;
+
   constructor(private changeDetectorRef: ChangeDetectorRef, private element: ElementRef) {
   }
 
-  /** 选择 */
   select(): void {
     this.selected = true;
     this.changeDetectorRef.markForCheck();
     this.emitSelectionChangeEvent();
   }
 
-  /** 取消选择 */
   deselect(): void {
     this.selected = false;
     this.changeDetectorRef.markForCheck();
     this.emitSelectionChangeEvent();
   }
 
-  /** 获取用于显示的 label */
+  /** Git display label */
   getLabel(): string {
     return this.nzLabel || this.nzValue.toString();
   }
 
-  /** 设置激活样式 (仅限样式) */
+  /** Set active (only styles) */
   setActiveStyles(): void {
     if (!this.active) {
       this.active = true;
       this.changeDetectorRef.markForCheck();
     }
   }
 
-  /** 设置非激活样式 (仅限样式) */
+  /** Unset active (only styles) */
   setInactiveStyles(): void {
     if (this.active) {
       this.active = false;
@@ -91,19 +85,11 @@ export class NzAutocompleteOptionComponent {
   }
 
   scrollIntoViewIfNeeded(): void {
-    /* tslint:disable-next-line:no-string-literal */
-    if (this.element.nativeElement && this.element.nativeElement['scrollIntoViewIfNeeded']) {
-      /* tslint:disable-next-line:no-string-literal */
-      setTimeout(() =>  this.element.nativeElement[ 'scrollIntoViewIfNeeded' ](false), 150);
-    }
-  }
-
-  private emitSelectionChangeEvent(isUserInput: boolean = false): void {
-    this.selectionChange.emit(new NzOptionSelectionChange(this, isUserInput));
+    scrollIntoView(this.element.nativeElement);
   }
 
   selectViaInteraction(): void {
-    if (!this.disabled) {
+    if (!this.nzDisabled) {
       this.selected = !this.selected;
       if (this.selected) {
         this.setActiveStyles();
@@ -115,4 +101,8 @@ export class NzAutocompleteOptionComponent {
     }
   }
 
+  private emitSelectionChangeEvent(isUserInput: boolean = false): void {
+    this.selectionChange.emit(new NzOptionSelectionChange(this, isUserInput));
+  }
+
 }