fix(module:cascader): fix columns not dropped (#3037)

* fix(module:cascader): fix columns not dropped

fix: multi fixes

fix: fix bugs to pass tests

chore: get test specs back

fix: rollup

fix: try to fix rollup by locking version

test: add aborting searching test

fix: lint

chore: try to adopt prettier

chore: remove @Private

* fix: fix types in utils

* fix: remove redefined interfaces

* fix: fix cascacder folded when quiting searching mode

* fix: set timer to null

* fix: fix cannot be reset & column not drop for leaf node

close #3034

components/cascader/nz-cascader-definitions.ts

@@ -0,0 +1,59 @@
+export type NzCascaderExpandTrigger = 'click' | 'hover';
+export type NzCascaderTriggerType = 'click' | 'hover';
+export type NzCascaderSize = 'small' | 'large' | 'default';
+
+export type NzCascaderFilter = (
+  searchValue: string,
+  path: CascaderOption[]
+) => boolean;
+
+export type NzCascaderSorter = (
+  a: CascaderOption[],
+  b: CascaderOption[],
+  inputValue: string
+) => number;
+
+export interface CascaderOption {
+  value?: any; // tslint:disable-line:no-any
+  label?: string;
+  title?: string;
+  disabled?: boolean;
+  loading?: boolean;
+  isLeaf?: boolean;
+  parent?: CascaderOption;
+  children?: CascaderOption[];
+
+  [key: string]: any; // tslint:disable-line:no-any
+}
+
+export interface CascaderSearchOption extends CascaderOption {
+  path: CascaderOption[];
+}
+
+export interface NzShowSearchOptions {
+  filter?: NzCascaderFilter;
+  sorter?: NzCascaderSorter;
+}
+
+export function isShowSearchObject(
+  options: NzShowSearchOptions | boolean
+): options is NzShowSearchOptions {
+  return typeof options !== 'boolean';
+}
+
+/**
+ * To avoid circular dependency, provide an interface of `NzCascaderComponent`
+ * for `NzCascaderService`.
+ */
+export interface NzCascaderComponentAsSource {
+  inputValue: string;
+  nzShowSearch: NzShowSearchOptions | boolean;
+  nzLabelProperty: string;
+  nzValueProperty: string;
+  nzChangeOnSelect: boolean;
+
+  nzChangeOn?(option: CascaderOption, level: number): boolean;
+
+  // tslint:disable-next-line:no-any
+  nzLoadData?(node: CascaderOption, index?: number): PromiseLike<any>;
+}

components/cascader/nz-cascader-li.component.html

@@ -1,5 +1,9 @@
-<ng-container *ngIf="highlightText"><span [innerHTML]="renderHighlightString(getOptionLabel())"></span></ng-container>
+<ng-container *ngIf="highlightText">
+  <span [innerHTML]="renderHighlightString(getOptionLabel())"></span>
+</ng-container>
 <ng-container *ngIf="!highlightText">{{ getOptionLabel() }}</ng-container>
-<span *ngIf="!option.isLeaf || option.children && option.children.length || option.loading" class="ant-cascader-menu-item-expand-icon">
+<span
+  *ngIf="!option.isLeaf || option.children && option.children.length || option.loading"
+  class="ant-cascader-menu-item-expand-icon">
   <i nz-icon [type]="option.loading ? 'loading' : 'right'"></i>
-</span>
+</span>

components/cascader/nz-cascader-li.component.ts

@@ -5,11 +5,10 @@ import {
   ElementRef,
   Input,
   Renderer2,
-  SecurityContext,
   ViewEncapsulation
 } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-import { CascaderOption } from './types';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { CascaderOption } from './nz-cascader-definitions';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -42,15 +41,13 @@ export class NzCascaderOptionComponent {
     return this.option ? this.option[this.nzLabelProperty] : '';
   }
 
-  renderHighlightString(str: string): string {
-    const safeHtml = this.sanitizer.sanitize(
-      SecurityContext.HTML,
+  renderHighlightString(str: string): SafeHtml {
+    const replaceStr = str.replace(
+      new RegExp(this.highlightText, 'g'),
       `<span class="ant-cascader-menu-item-keyword">${this.highlightText}</span>`
     );
-    if (!safeHtml) {
-      throw new Error(`[NG-ZORRO] Input value "${this.highlightText}" is not considered security.`);
-    }
-    return str.replace(new RegExp(this.highlightText, 'g'), safeHtml);
+
+    return this.sanitizer.bypassSecurityTrustHtml(replaceStr);
   }
 
   markForCheck(): void {

components/cascader/nz-cascader-utils.ts

@@ -0,0 +1,9 @@
+import { CascaderOption } from './nz-cascader-definitions';
+
+export function isChildOption(o: CascaderOption): boolean {
+  return o.isLeaf || !o.children || !o.children.length;
+}
+
+export function isParentOption(o: CascaderOption): boolean {
+  return !!o.children && !!o.children.length && !o.isLeaf;
+}

components/cascader/nz-cascader.component.html

@@ -21,16 +21,16 @@
       (focus)="handleInputFocus()"
       (change)="$event.stopPropagation()">
     <i *ngIf="clearIconVisible"
-       nz-icon
-       type="close-circle"
-       theme="fill"
-       class="ant-cascader-picker-clear"
-       (click)="clearSelection($event)"></i>
+      nz-icon
+      type="close-circle"
+      theme="fill"
+      class="ant-cascader-picker-clear"
+      (click)="clearSelection($event)"></i>
     <i *ngIf="nzShowArrow && !isLoading"
-       nz-icon
-       type="down"
-       class="ant-cascader-picker-arrow"
-       [class.ant-cascader-picker-arrow-expand]="menuVisible">
+      nz-icon
+      type="down"
+      class="ant-cascader-picker-arrow"
+      [class.ant-cascader-picker-arrow-expand]="menuVisible">
     </i>
     <i *ngIf="isLoading" nz-icon type="loading" class="ant-cascader-picker-arrow"></i>
     <span
@@ -58,30 +58,30 @@
   <div
     #menu
     class="ant-cascader-menus"
-    *ngIf="nzOptions && nzOptions.length || isSearching"
+    *ngIf="nzOptions && nzOptions.length || inSearchingMode"
     [class.ant-cascader-menus-hidden]="!menuVisible"
     [ngClass]="menuCls"
     [ngStyle]="nzMenuStyle"
     [nzNoAnimation]="noAnimation?.nzNoAnimation"
     [@slideMotion]="dropDownPosition"
     (mouseleave)="onTriggerMouseLeave($event)">
-    <ul *ngFor="let options of columns; let i = index;" class="ant-cascader-menu"
-        [ngClass]="menuColumnCls"
-        [style.height]="isSearching && !columns[0].length ? 'auto': ''"
-        [style.width]="dropdownWidthStyle">
+    <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"
         [nzLabelProperty]="nzLabelProperty"
         [activated]="isOptionActivated(option, i)"
-        [highlightText]="isSearching ? inputValue : ''"
+        [highlightText]="inSearchingMode ? inputValue : ''"
         [option]="option"
         (mouseenter)="onOptionMouseEnter(option, i, $event)"
         (mouseleave)="onOptionMouseLeave(option, i, $event)"
         (click)="onOptionClick(option, i, $event)">
       </li>
-      <li *ngIf="isSearching && !columns[0].length"
-          class="ant-cascader-menu-item ant-cascader-menu-item-expanded ant-cascader-menu-item-disabled">
+      <li *ngIf="inSearchingMode && !cascaderService.columns[0].length"
+        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>