refactor(module:autocomplete): refactor and sync Ant Design 4

ref NG-ZORRO#4634
hsuanxyz · Jan 10, 2020 · 873b01e · 873b01e
1 parent 72bfd7a
commit 873b01e
Show file tree

Hide file tree

Showing 10 changed files with 55 additions and 69 deletions.
diff --git a/...ete/nz-autocomplete-optgroup.component.ts → ...mplete/autocomplete-optgroup.component.ts b/...ete/nz-autocomplete-optgroup.component.ts → ...mplete/autocomplete-optgroup.component.ts
@@ -14,7 +14,14 @@ import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulati
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
-  templateUrl: './nz-autocomplete-optgroup.component.html',
+  template: `
+    <div class="ant-select-dropdown-menu-item-group-title">
+      <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>
+    </ul>
+  `,
   host: {
     role: 'group',
     class: 'ant-select-dropdown-menu-item-group'

diff --git a/...plete/nz-autocomplete-option.component.ts → ...complete/autocomplete-option.component.ts b/...plete/nz-autocomplete-option.component.ts → ...complete/autocomplete-option.component.ts
@@ -29,7 +29,9 @@ export class NzOptionSelectionChange {
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
-  templateUrl: './nz-autocomplete-option.component.html',
+  template: `
+    <ng-content></ng-content>
+  `,
   host: {
     role: 'menuitem',
     class: 'ant-select-dropdown-menu-item',

diff --git a/...lete/nz-autocomplete-trigger.directive.ts → ...omplete/autocomplete-trigger.directive.ts b/...lete/nz-autocomplete-trigger.directive.ts → ...omplete/autocomplete-trigger.directive.ts
@@ -36,8 +36,8 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { fromEvent, merge, Subscription } from 'rxjs';
 import { delay, distinct, map, take, tap } from 'rxjs/operators';
 
-import { NzAutocompleteOptionComponent } from './nz-autocomplete-option.component';
-import { NzAutocompleteComponent } from './nz-autocomplete.component';
+import { NzAutocompleteOptionComponent } from './autocomplete-option.component';
+import { NzAutocompleteComponent } from './autocomplete.component';
 
 export const NZ_AUTOCOMPLETE_VALUE_ACCESSOR: ExistingProvider = {
   provide: NG_VALUE_ACCESSOR,

diff --git a/...uto-complete/nz-autocomplete.component.ts → ...s/auto-complete/autocomplete.component.ts b/...uto-complete/nz-autocomplete.component.ts → ...s/auto-complete/autocomplete.component.ts
@@ -32,7 +32,7 @@ import { filter, switchMap, take } from 'rxjs/operators';
 
 import { CompareWith, InputBoolean, NzDropDownPosition, NzNoAnimationDirective, slideMotion } from 'ng-zorro-antd/core';
 
-import { NzAutocompleteOptionComponent, NzOptionSelectionChange } from './nz-autocomplete-option.component';
+import { NzAutocompleteOptionComponent, NzOptionSelectionChange } from './autocomplete-option.component';
 
 export interface AutocompleteDataSourceItem {
   value: string;
@@ -47,7 +47,32 @@ export type AutocompleteDataSource = AutocompleteDataSourceItem[] | string[] | n
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
-  templateUrl: './nz-autocomplete.component.html',
+  template: `
+    <ng-template>
+      <div
+        #panel
+        class="ant-select-dropdown ant-select-dropdown-placement-bottomLeft"
+        [class.ant-select-dropdown-hidden]="!showPanel"
+        [ngClass]="nzOverlayClassName"
+        [ngStyle]="nzOverlayStyle"
+        [nzNoAnimation]="noAnimation?.nzNoAnimation"
+        [@slideMotion]="dropDownPosition"
+        [@.disabled]="noAnimation?.nzNoAnimation"
+      >
+        <div style="max-height: 256px; overflow-y: auto; overflow-anchor: none;">
+          <div style="display: flex; flex-direction: column;">
+            <ng-template *ngTemplateOutlet="nzDataSource ? optionsTemplate : contentTemplate"></ng-template>
+          </div>
+        </div>
+      </div>
+      <ng-template #contentTemplate>
+        <ng-content></ng-content>
+      </ng-template>
+      <ng-template #optionsTemplate>
+        <nz-auto-option *ngFor="let option of nzDataSource" [nzValue]="option">{{ option }}</nz-auto-option>
+      </ng-template>
+    </ng-template>
+  `,
   animations: [slideMotion],
   styles: [
     `
@@ -70,7 +95,8 @@ export class NzAutocompleteComponent implements AfterContentInit, AfterViewInit,
   @Input() @InputBoolean() nzBackfill = false;
   @Input() compareWith: CompareWith = (o1, o2) => o1 === o2;
   @Input() nzDataSource: AutocompleteDataSource;
-  @Output() readonly selectionChange: EventEmitter<NzAutocompleteOptionComponent> = new EventEmitter<NzAutocompleteOptionComponent>();
+  @Output()
+  readonly selectionChange: EventEmitter<NzAutocompleteOptionComponent> = new EventEmitter<NzAutocompleteOptionComponent>();
 
   showPanel: boolean = true;
   isOpen: boolean = false;
@@ -90,7 +116,8 @@ export class NzAutocompleteComponent implements AfterContentInit, AfterViewInit,
   }
 
   /** Provided by content */
-  @ContentChildren(NzAutocompleteOptionComponent, { descendants: true }) fromContentOptions: QueryList<NzAutocompleteOptionComponent>;
+  @ContentChildren(NzAutocompleteOptionComponent, { descendants: true })
+  fromContentOptions: QueryList<NzAutocompleteOptionComponent>;
   /** Provided by dataSource */
   @ViewChildren(NzAutocompleteOptionComponent) fromDataSourceOptions: QueryList<NzAutocompleteOptionComponent>;
 

diff --git a/...s/auto-complete/nz-autocomplete.module.ts → ...ents/auto-complete/autocomplete.module.ts b/...s/auto-complete/nz-autocomplete.module.ts → ...ents/auto-complete/autocomplete.module.ts
@@ -13,10 +13,10 @@ import { FormsModule } from '@angular/forms';
 
 import { NzAddOnModule, NzNoAnimationModule } from 'ng-zorro-antd/core';
 
-import { NzAutocompleteOptgroupComponent } from './nz-autocomplete-optgroup.component';
-import { NzAutocompleteOptionComponent } from './nz-autocomplete-option.component';
-import { NzAutocompleteTriggerDirective } from './nz-autocomplete-trigger.directive';
-import { NzAutocompleteComponent } from './nz-autocomplete.component';
+import { NzAutocompleteOptgroupComponent } from './autocomplete-optgroup.component';
+import { NzAutocompleteOptionComponent } from './autocomplete-option.component';
+import { NzAutocompleteTriggerDirective } from './autocomplete-trigger.directive';
+import { NzAutocompleteComponent } from './autocomplete.component';
 
 @NgModule({
   declarations: [NzAutocompleteComponent, NzAutocompleteOptionComponent, NzAutocompleteTriggerDirective, NzAutocompleteOptgroupComponent],

diff --git a/...nts/auto-complete/nz-autocomplete.spec.ts → ...onents/auto-complete/autocomplete.spec.ts b/...nts/auto-complete/nz-autocomplete.spec.ts → ...onents/auto-complete/autocomplete.spec.ts
@@ -11,8 +11,8 @@ import { Subject } from 'rxjs';
 
 import { createKeyboardEvent, dispatchFakeEvent, dispatchKeyboardEvent, MockNgZone, typeInElement } from 'ng-zorro-antd/core';
 
+import { getNzAutocompleteMissingPanelError } from './autocomplete-trigger.directive';
 import { NzAutocompleteComponent, NzAutocompleteModule, NzAutocompleteOptionComponent, NzAutocompleteTriggerDirective } from './index';
-import { getNzAutocompleteMissingPanelError } from './nz-autocomplete-trigger.directive';
 
 describe('auto-complete', () => {
   let overlayContainer: OverlayContainer;
@@ -102,11 +102,10 @@ describe('auto-complete', () => {
       input.disabled = true;
       fixture.detectChanges();
 
-      expect(trigger.panelOpen).toBe(false);
       dispatchFakeEvent(input, 'focusin');
       flush();
-
       fixture.detectChanges();
+
       expect(trigger.panelOpen).toBe(false);
     }));
 
@@ -255,16 +254,6 @@ describe('auto-complete', () => {
       TAB_EVENT = createKeyboardEvent('keydown', TAB);
     });
 
-    it('should open the panel when the input is focused', () => {
-      expect(fixture.componentInstance.trigger.panelOpen).toBe(false);
-
-      dispatchFakeEvent(input, 'focusin');
-      fixture.detectChanges();
-
-      expect(fixture.componentInstance.trigger.panelOpen).toBe(true);
-      expect(overlayContainerElement.textContent).toContain('Burns Bay Road');
-    });
-
     it('should have correct width when setting', () => {
       fixture.componentInstance.width = 500;
       fixture.detectChanges();

diff --git a/components/auto-complete/nz-autocomplete-optgroup.component.html b/components/auto-complete/nz-autocomplete-optgroup.component.html
diff --git a/components/auto-complete/nz-autocomplete-option.component.html b/components/auto-complete/nz-autocomplete-option.component.html
diff --git a/components/auto-complete/nz-autocomplete.component.html b/components/auto-complete/nz-autocomplete.component.html
diff --git a/components/auto-complete/public-api.ts b/components/auto-complete/public-api.ts
@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-export * from './nz-autocomplete.module';
-export * from './nz-autocomplete.component';
-export * from './nz-autocomplete-trigger.directive';
-export * from './nz-autocomplete-option.component';
-export * from './nz-autocomplete-optgroup.component';
+export * from './autocomplete.module';
+export * from './autocomplete.component';
+export * from './autocomplete-trigger.directive';
+export * from './autocomplete-option.component';
+export * from './autocomplete-optgroup.component';