feat(cascader): add cascader search (NG-ZORRO#1873)

close NG-ZORRO#1773
hsuanxyz · Aug 3, 2018 · baceed5 · baceed5
1 parent a3b07cb
commit baceed5
Show file tree

Hide file tree

Showing 10 changed files with 474 additions and 18 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,12 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Chrome",
+      "url": "http://localhost:9876",
+      "webRoot": "${workspaceRoot}"
+    }
+  ]
+}
diff --git a/components/cascader/demo/basic.ts b/components/cascader/demo/basic.ts
@@ -65,6 +65,7 @@ const otherOptions = [{
       [(ngModel)]="values"
       (ngModelChange)="onChanges($event)">
     </nz-cascader>
+    &nbsp;
     <a href="javascript:;" (click)="changeNzOptions()" class="change-options">
       Change Options
     </a>
@@ -92,7 +93,7 @@ export class NzDemoCascaderBasicComponent implements OnInit {
   ngOnInit(): void {
     // let's set nzOptions in a asynchronous way
     setTimeout(() => {
-      this.nzOptions = options;
+        this.nzOptions = options;
     }, 100);
   }
 

diff --git a/components/cascader/demo/search.md b/components/cascader/demo/search.md
@@ -0,0 +1,14 @@
+---
+order: 11
+title:
+  zh-CN: 搜索
+  en-US: Search
+---
+
+## zh-CN
+
+可以直接搜索选项并选择。
+
+## en-US
+
+Search and select an option directly.
diff --git a/components/cascader/demo/search.ts b/components/cascader/demo/search.ts
@@ -0,0 +1,113 @@
+// tslint:disable:no-any
+import { Component, OnInit } from '@angular/core';
+
+const options = [ {
+  value: 'zhejiang',
+  label: 'Zhejiang',
+  children: [ {
+    value: 'hangzhou',
+    label: 'Hangzhou',
+    children: [ {
+      value: 'xihu',
+      label: 'West Lake',
+      isLeaf: true
+    } ]
+  }, {
+    value: 'ningbo',
+    label: 'Ningbo',
+    isLeaf: true,
+    disabled: true
+  } ]
+}, {
+  value: 'jiangsu',
+  label: 'Jiangsu',
+  children: [ {
+    value: 'nanjing',
+    label: 'Nanjing',
+    children: [ {
+      value: 'zhonghuamen',
+      label: 'Zhong Hua Men',
+      isLeaf: true
+    } ]
+  } ]
+} ];
+
+const otherOptions = [ {
+  value: 'fujian',
+  label: 'Fujian',
+  children: [ {
+    value: 'xiamen',
+    label: 'Xiamen',
+    children: [ {
+      value: 'Kulangsu',
+      label: 'Kulangsu',
+      isLeaf: true
+    } ]
+  } ]
+}, {
+  value: 'guangxi',
+  label: 'Guangxi',
+  children: [ {
+    value: 'guilin',
+    label: 'Guilin',
+    children: [ {
+      value: 'Lijiang',
+      label: 'Li Jiang River',
+      isLeaf: true
+    } ]
+  } ]
+} ];
+
+@Component({
+  selector: 'nz-demo-cascader-search',
+  template: `
+    <nz-cascader
+      [nzOptions]="nzOptions"
+      [(ngModel)]="values"
+      [nzShowSearch]="true"
+      (ngModelChange)="onChanges($event)">
+    </nz-cascader>
+    &nbsp;
+    <a href="javascript:;" (click)="changeNzOptions()" class="change-options">
+      Change Options
+    </a>
+    `,
+  styles: [
+    `
+    .ant-cascader-picker {
+      width: 300px;
+    }
+    .change-options {
+      display: inline-block;
+      font-size: 12px;
+      margin-top: 8px;
+    }
+    `
+  ]
+})
+export class NzDemoCascaderSearchComponent implements OnInit {
+  /** init data */
+  public nzOptions = null;
+
+  /** ngModel value */
+  public values: any[] = null;
+
+  ngOnInit(): void {
+    // let's set nzOptions in a asynchronous way
+    setTimeout(() => {
+      this.nzOptions = options;
+    }, 100);
+  }
+
+  public changeNzOptions(): void {
+    if (this.nzOptions === options) {
+      this.nzOptions = otherOptions;
+    } else {
+      this.nzOptions = options;
+    }
+  }
+
+  public onChanges(values: any): void {
+    console.log(values, this.values);
+  }
+}
diff --git a/components/cascader/doc/index.en-US.md b/components/cascader/doc/index.en-US.md
@@ -39,6 +39,7 @@ Cascade selection box.
 | `[nzPlaceHolder]` | input placeholder | string | 'Please select' |
 | `[nzShowArrow]` | Whether show arrow | boolean | true |
 | `[nzShowInput]` | Whether show input | boolean | true |
+| `[nzShowSearch]` | Whether support search | `boolean` `NzShowSearchOptions` | `false` |
 | `[nzSize]` | input size, one of `large` `default` `small` | string | `default` |
 | `[nzValueProperty]` | the value property name of options | string | 'value' |
 | `(ngModelChange)` | Emit on values change | `EventEmitter<any[]>` | - |
@@ -47,6 +48,13 @@ Cascade selection box.
 | `(nzSelect)` | Emit on select | `EventEmitter<{option: any, index: number}>` | - |
 | `(nzSelectionChange)` | Emit on selection change | `EventEmitter<any[]>` | - |
 
+When `nzShowSearch` is an object it should implements `NzShowSearchOptions`：
+
+| Params | Explanation | Type | Default |
+| --- | --- | --- | --- |
+| `filter` | Optional. Be aware that all non-leaf CascaderOptions would be filtered | `(inputValue: string, path: CascaderOption[]): boolean` | - |
+| `sorter` | Optional | `(a: CascaderOption[], b: CascaderOption[], inputValue: string): number` | - |
+
 #### Methods
 
 | Name | Description |

diff --git a/components/cascader/doc/index.zh-CN.md b/components/cascader/doc/index.zh-CN.md
@@ -40,6 +40,7 @@ subtitle: 级联选择
 | `[nzPlaceHolder]` | 输入框占位文本 | string | '请选择' |
 | `[nzShowArrow]` | 是否显示箭头 | boolean | true |
 | `[nzShowInput]` | 显示输入框 | boolean | true |
+| `[nzShowSearch]` | 是否支持搜索，默认情况下对 `label` 进行全匹配搜索 | `boolean` `NzShowSearchOptions` | `false` |
 | `[nzSize]` | 输入框大小，可选 `large` `default` `small` | string | `default` |
 | `[nzValueProperty]` | 选项的实际值的属性名 | string | 'value' |
 | `(ngModelChange)` | 值发生变化时触发 | `EventEmitter<any[]>` | - |
@@ -48,6 +49,13 @@ subtitle: 级联选择
 | `(nzSelect)` | 选中菜单选项时触发 | `EventEmitter<{option: any, index: number}>` | - |
 | `(nzSelectionChange)` | 选中菜单选项时触发 | `EventEmitter<any[]>` |- |
 
+`nzShowSearch` 为对象时需遵守 `NzShowSearchOptions` 接口：
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| `filter` | 可选，选择是否保留选项的过滤函数，每级菜单的选项都会被匹配 | `(inputValue: string, path: CascaderOption[]): boolean` | - |
+| `sorter` | 可选，按照到每个最终选项的路径进行排序，默认按照原始数据的顺序 | `(a: CascaderOption[], b: CascaderOption[], inputValue: string): number` | - |
+
 #### 方法
 
 | 名称 | 描述 |

diff --git a/components/cascader/nz-cascader.component.html b/components/cascader/nz-cascader.component.html
@@ -49,15 +49,24 @@
     [ngClass]="menuCls" [ngStyle]="nzMenuStyle"
     [@dropDownAnimation]="dropDownPosition"
     (mouseleave)="onTriggerMouseLeave($event)">
-    <ul *ngFor="let options of nzColumns; let i = index;" [ngClass]="menuColumnCls">
+    <ul *ngFor="let options of nzColumns; let i = index;" [ngClass]="menuColumnCls"
+      [style.height]="inSearch && !nzColumns[0].length ? 'auto': ''" [style.width]="searchWidthStyle">
       <li *ngFor="let option of options"
         [attr.title]="option.title || getOptionLabel(option)"
         [ngClass]="getOptionCls(option, i)"
         (mouseenter)="onOptionMouseEnter(option, i, $event)"
         (mouseleave)="onOptionMouseLeave(option, i, $event)"
         (click)="onOptionClick(option, i, $event)">
-        {{ getOptionLabel(option) }}
+        <ng-container *ngIf="inSearch">
+          <span [innerHTML]="renderSearchString(getOptionLabel(option))"></span>
+        </ng-container>
+        <ng-container *ngIf="!inSearch">
+          {{ getOptionLabel(option) }}
+        </ng-container>
+      </li>
+      <li *ngIf="inSearch && !nzColumns[0].length" class="ant-cascader-menu-item ant-cascader-menu-item-expanded ant-cascader-menu-item-disabled">
+        Not Found
       </li>
     </ul>
   </div>
-</ng-template>
+</ng-template>