fix(module:cascader): fix not showing empty when there's no options (N…

…G-ZORRO#4565) * fix(module:cascader): fix not showing empty when there's no options close NG-ZORRO#4562 * fix: fix style * fix: fix dropdown style when there's no search result * chore: remove garbage
hsuanxyz · Jan 9, 2020 · c742ea2 · c742ea2
1 parent 236411c
commit c742ea2
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 45 deletions.
diff --git a/components/cascader/nz-cascader.component.html b/components/cascader/nz-cascader.component.html
@@ -34,15 +34,16 @@
       [class.ant-cascader-picker-arrow-expand]="menuVisible"
     >
     </i>
-    <i *ngIf="isLoading" nz-icon nzType="loading" class="ant-cascader-picker-arrow"></i>
+    <i *ngIf="isLoading" nz-icon nzType="loading"
+       class="ant-cascader-picker-arrow"></i>
     <span
       class="ant-cascader-picker-label"
       [class.ant-cascader-show-search]="!!nzShowSearch"
       [class.ant-focusd]="!!nzShowSearch && isFocused && !inputValue"
     >
       <ng-container *ngIf="!isLabelRenderTemplate; else labelTemplate">{{
         labelRenderText
-      }}</ng-container>
+        }}</ng-container>
       <ng-template #labelTemplate>
         <ng-template
           [ngTemplateOutlet]="nzLabelRender"
@@ -67,7 +68,6 @@
   <div
     #menu
     class="ant-cascader-menus"
-    *ngIf="(nzOptions && nzOptions.length) || inSearchingMode"
     [class.ant-cascader-menus-hidden]="!menuVisible"
     [ngClass]="menuCls"
     [ngStyle]="nzMenuStyle"
@@ -76,35 +76,40 @@
     [@slideMotion]="dropDownPosition"
     (mouseleave)="onTriggerMouseLeave($event)"
   >
-    <ul
-      *ngFor="let options of cascaderService.columns; let i = index"
-      class="ant-cascader-menu"
-      [ngClass]="menuColumnCls"
-      [style.height]="inSearchingMode && !cascaderService.columns[0].length ? 'auto' : ''"
-      [style.width]="dropdownWidthStyle"
-    >
-      <li
-        nz-cascader-option
-        *ngFor="let option of options"
-        [columnIndex]="i"
-        [nzLabelProperty]="nzLabelProperty"
-        [optionTemplate]="nzOptionRender"
-        [activated]="isOptionActivated(option, i)"
-        [highlightText]="inSearchingMode ? inputValue : ''"
-        [option]="option"
-        (mouseenter)="onOptionMouseEnter(option, i, $event)"
-        (mouseleave)="onOptionMouseLeave(option, i, $event)"
-        (click)="onOptionClick(option, i, $event)"
-      ></li>
+    <ul *ngIf="shouldShowEmpty; else hasOptionsTemplate"
+        class="ant-cascader-menu"
+        [style.width]="dropdownWidthStyle"
+        [style.height]="dropdownHeightStyle">
       <li
-        *ngIf="inSearchingMode && !cascaderService.columns[0].length"
-        class="ant-cascader-menu-item ant-cascader-menu-item-expanded ant-cascader-menu-item-disabled"
-      >
+        class="ant-cascader-menu-item ant-cascader-menu-item-expanded ant-cascader-menu-item-disabled">
         <nz-embed-empty
           [nzComponentName]="'cascader'"
           [specificContent]="nzNotFoundContent"
         ></nz-embed-empty>
       </li>
     </ul>
+    <ng-template #hasOptionsTemplate>
+      <ul
+        *ngFor="let options of cascaderService.columns; let i = index"
+        class="ant-cascader-menu"
+        [ngClass]="menuColumnCls"
+        [style.height]="dropdownHeightStyle"
+        [style.width]="dropdownWidthStyle"
+      >
+        <li
+          nz-cascader-option
+          *ngFor="let option of options"
+          [columnIndex]="i"
+          [nzLabelProperty]="nzLabelProperty"
+          [optionTemplate]="nzOptionRender"
+          [activated]="isOptionActivated(option, i)"
+          [highlightText]="inSearchingMode ? inputValue : ''"
+          [option]="option"
+          (mouseenter)="onOptionMouseEnter(option, i, $event)"
+          (mouseleave)="onOptionMouseLeave(option, i, $event)"
+          (click)="onOptionClick(option, i, $event)"
+        ></li>
+      </ul>
+    </ng-template>
   </div>
 </ng-template>
diff --git a/components/cascader/nz-cascader.component.ts b/components/cascader/nz-cascader.component.ts
@@ -34,15 +34,14 @@ import { Subject } from 'rxjs';
 import { startWith, takeUntil } from 'rxjs/operators';
 
 import {
-  DEFAULT_DROPDOWN_POSITIONS,
+  DEFAULT_CASCADER_POSITIONS,
   InputBoolean,
   NgClassType,
   NgStyleInterface,
   NzConfigService,
   NzNoAnimationDirective,
   slideMotion,
   toArray,
-  warnDeprecation,
   WithConfig
 } from 'ng-zorro-antd/core';
 
@@ -140,15 +139,15 @@ export class NzCascaderComponent implements NzCascaderComponentAsSource, OnInit,
   }
 
   @Output() readonly nzVisibleChange = new EventEmitter<boolean>();
-
   @Output() readonly nzSelectionChange = new EventEmitter<NzCascaderOption[]>();
+  @Output() readonly nzSelect = new EventEmitter<{ option: NzCascaderOption; index: number } | null>();
+  @Output() readonly nzClear = new EventEmitter<void>();
 
   /**
-   * @deprecated 9.0.0. This api is a duplication of `ngModelChange`.
+   * If the dropdown should show the empty content.
+   * `true` if there's no options.
    */
-  @Output() readonly nzSelect = new EventEmitter<{ option: NzCascaderOption; index: number } | null>();
-
-  @Output() readonly nzClear = new EventEmitter<void>();
+  shouldShowEmpty: boolean = false;
 
   el: HTMLElement;
   dropDownPosition = 'bottom';
@@ -158,8 +157,13 @@ export class NzCascaderComponent implements NzCascaderComponentAsSource, OnInit,
   labelRenderContext = {};
   onChange = Function.prototype;
   onTouched = Function.prototype;
-  positions: ConnectionPositionPair[] = [...DEFAULT_DROPDOWN_POSITIONS];
+  positions: ConnectionPositionPair[] = [...DEFAULT_CASCADER_POSITIONS];
+
+  /**
+   * Dropdown's with in pixel.
+   */
   dropdownWidthStyle: string;
+  dropdownHeightStyle: 'auto' | '' = '';
   isFocused = false;
 
   locale: NzCascaderI18nInterface;
@@ -232,8 +236,10 @@ export class NzCascaderComponent implements NzCascaderComponentAsSource, OnInit,
     srv.$redraw.pipe(takeUntil(this.$destroy)).subscribe(() => {
       // These operations would not mutate data.
       this.checkChildren();
-      this.buildDisplayLabel();
+      this.setDisplayLabel();
       this.reposition();
+      this.setDropdownStyles();
+
       this.cdr.markForCheck();
     });
 
@@ -264,20 +270,21 @@ export class NzCascaderComponent implements NzCascaderComponentAsSource, OnInit,
       this.dropdownWidthStyle = '';
     });
 
-    this.i18nService.localeChange.pipe(startWith(), takeUntil(this.$destroy)).subscribe(() => {
-      this.setLocale();
-    });
+    this.i18nService.localeChange
+      .pipe(
+        startWith(),
+        takeUntil(this.$destroy)
+      )
+      .subscribe(() => {
+        this.setLocale();
+      });
 
     this.nzConfigService
       .getConfigChangeEventForComponent(NZ_CONFIG_COMPONENT_NAME)
       .pipe(takeUntil(this.$destroy))
       .subscribe(() => {
         this.cdr.markForCheck();
       });
-
-    if (this.nzSelect.observers.length > 0) {
-      warnDeprecation(`nzSelect is deprecated and will be removed in 9.0.0. Please use 'nzSelectionChange' instead.`);
-    }
   }
 
   ngOnDestroy(): void {
@@ -571,8 +578,8 @@ export class NzCascaderComponent implements NzCascaderComponentAsSource, OnInit,
   private toggleSearchingMode(toSearching: boolean): void {
     if (this.inSearchingMode !== toSearching) {
       this.cascaderService.toggleSearchingMode(toSearching);
-      this.dropdownWidthStyle = toSearching ? `${this.input.nativeElement.offsetWidth}px` : '';
     }
+
     if (this.inSearchingMode) {
       this.cascaderService.prepareSearchOptions(this.inputValue);
     }
@@ -625,7 +632,7 @@ export class NzCascaderComponent implements NzCascaderComponentAsSource, OnInit,
     }
   }
 
-  private buildDisplayLabel(): void {
+  private setDisplayLabel(): void {
     const selectedOptions = this.cascaderService.selectedOptions;
     const labels: string[] = selectedOptions.map(o => this.cascaderService.getOptionLabel(o));
 
@@ -636,6 +643,19 @@ export class NzCascaderComponent implements NzCascaderComponentAsSource, OnInit,
     }
   }
 
+  private setDropdownStyles(): void {
+    const firstColumn = this.cascaderService.columns[0];
+
+    this.shouldShowEmpty =
+      (this.inSearchingMode && (!firstColumn || !firstColumn.length)) || // Should show empty when there's no searching result
+      (!(this.nzOptions && this.nzOptions.length) && !this.nzLoadData); // Should show when there's no options and developer does not use nzLoadData
+    this.dropdownHeightStyle = this.shouldShowEmpty ? 'auto' : '';
+
+    if (this.input) {
+      this.dropdownWidthStyle = this.inSearchingMode || this.shouldShowEmpty ? `${this.input.nativeElement.offsetWidth}px` : '';
+    }
+  }
+
   private setLocale(): void {
     this.locale = this.i18nService.getLocaleData('global');
     this.cdr.markForCheck();

diff --git a/components/cascader/nz-cascader.service.ts b/components/cascader/nz-cascader.service.ts
@@ -29,7 +29,7 @@ export class NzCascaderService implements OnDestroy {
   activatedOptions: NzCascaderOption[] = [];
 
   /** An array to store cascader items arranged in different layers. */
-  columns: NzCascaderOption[][] = [[]];
+  columns: NzCascaderOption[][] = [];
 
   /** If user has entered searching mode. */
   inSearchingMode = false;
@@ -296,6 +296,8 @@ export class NzCascaderService implements OnDestroy {
     }
 
     this.columns = [results];
+
+    this.$redraw.next(); // Search results may be empty, so should redraw.
   }
 
   /**

diff --git a/components/core/overlay/overlay-position.ts b/components/core/overlay/overlay-position.ts
@@ -28,6 +28,7 @@ export const POSITION_MAP: { [key: string]: ConnectionPositionPair } = {
 export const DEFAULT_TOOLTIP_POSITIONS = [POSITION_MAP.top, POSITION_MAP.right, POSITION_MAP.bottom, POSITION_MAP.left];
 export const DEFAULT_DROPDOWN_POSITIONS = [POSITION_MAP.bottomLeft, POSITION_MAP.bottomRight, POSITION_MAP.topRight, POSITION_MAP.topLeft];
 export const DEFAULT_SUBMENU_POSITIONS = [POSITION_MAP.rightTop, POSITION_MAP.leftTop];
+export const DEFAULT_CASCADER_POSITIONS = [POSITION_MAP.bottomLeft, POSITION_MAP.topLeft];
 
 export const DEFAULT_MENTION_TOP_POSITIONS = [
   new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'bottom' }),