refactor(module:cascader): refactor cascader (#1140)

* refactor(module:cascader): refactor cascader

* refactor(module:cascader): refactor cascader

* refactor(module:cascader): refactor cascader

* refactor(module:cascader): refactor cascader

components/cascader/demo/basic.md

@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+## zh-CN
+
+省市区级联。
+
+## en-US
+
+Cascade selection box for selecting province/city/district.

components/cascader/demo/basic.ts

@@ -0,0 +1,110 @@
+// 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
+  }]
+}, {
+  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-basic',
+  template: `
+    <nz-cascader
+      [nzOptions]="nzOptions"
+      [(ngModel)]="values"
+      (ngModelChange)="onChanges($event)">
+    </nz-cascader>
+    <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 NzDemoCascaderBasicComponent 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);
+  }
+}

components/cascader/demo/change-on-function.md

@@ -0,0 +1,15 @@
+---
+order: 10
+title:
+  zh-CN: 指定选择
+  en-US: Select specified
+---
+
+## zh-CN
+
+通过函数来判断选项是否可以选择。
+
+## en-US
+
+Allow select option only on `nzChangeOn` return true.
+

components/cascader/demo/change-on-function.ts

@@ -0,0 +1,70 @@
+// tslint:disable:no-any
+import { Component } 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',
+    children: [{
+      value: 'dongqianlake',
+      label: 'Dongqian Lake',
+      isLeaf: true
+    }]
+  }]
+}, {
+  value: 'jiangsu',
+  label: 'Jiangsu',
+  children: [{
+    value: 'nanjing',
+    label: 'Nanjing',
+    children: [{
+      value: 'zhonghuamen',
+      label: 'Zhong Hua Men',
+      isLeaf: true
+    }]
+  }]
+}];
+
+@Component({
+  selector: 'nz-demo-cascader-change-on-function',
+  template: `
+    <nz-cascader
+      [nzChangeOn]="validate"
+      [nzOptions]="nzOptions"
+      [(ngModel)]="values"
+      (ngModelChange)="onChanges($event)">
+    </nz-cascader>`,
+  styles  : [
+    `
+    .ant-cascader-picker {
+      width: 300px;
+    }
+    `
+  ]
+})
+export class NzDemoCascaderChangeOnFunctionComponent {
+  /** init data */
+  nzOptions = options;
+
+  /** ngModel value */
+  public values: any[] = null;
+
+  public onChanges(values: any): void {
+    console.log(values, this.values);
+  }
+
+  public validate(option: any, index: number): boolean {
+    const value = option.value;
+    return ['hangzhou', 'xihu', 'nanjing', 'zhonghuamen'].indexOf(value) >= 0;
+  }
+}

components/cascader/demo/change-on-select.md

@@ -0,0 +1,15 @@
+---
+order: 5
+title:
+  zh-CN: 选择即改变
+  en-US: Change on select
+---
+
+## zh-CN
+
+这种交互允许只选中父级选项。
+
+## en-US
+
+Allow only select parent options.
+

components/cascader/demo/change-on-select.ts

@@ -0,0 +1,61 @@
+// tslint:disable:no-any
+import { Component } 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
+  }]
+}, {
+  value: 'jiangsu',
+  label: 'Jiangsu',
+  children: [{
+    value: 'nanjing',
+    label: 'Nanjing',
+    children: [{
+      value: 'zhonghuamen',
+      label: 'Zhong Hua Men',
+      isLeaf: true
+    }]
+  }]
+}];
+
+@Component({
+  selector: 'nz-demo-cascader-change-on-select',
+  template: `
+    <nz-cascader
+      nzChangeOnSelect
+      [nzOptions]="nzOptions"
+      [(ngModel)]="values"
+      (ngModelChange)="onChanges($event)">
+    </nz-cascader>`,
+  styles  : [
+    `
+    .ant-cascader-picker {
+      width: 300px;
+    }
+    `
+  ]
+})
+export class NzDemoCascaderChangeOnSelectComponent {
+  /** init data */
+  nzOptions = options;
+
+  /** ngModel value */
+  public values: any[] = null;
+
+  public onChanges(values: any): void {
+    console.log(values, this.values);
+  }
+}

components/cascader/demo/custom-render.md

@@ -0,0 +1,15 @@
+---
+order: 7
+title:
+  zh-CN: 自定义已选项
+  en-US: Custom render
+---
+
+## zh-CN
+
+例如给最后一项加上邮编链接。
+
+## en-US
+
+For instance, add an external link after the selected value.
+

components/cascader/demo/custom-render.ts

@@ -0,0 +1,79 @@
+// tslint:disable:no-any
+import { Component } from '@angular/core';
+
+const options = [{
+  value: 'zhejiang',
+  label: 'Zhejiang',
+  children: [{
+    value: 'hangzhou',
+    label: 'Hangzhou',
+    children: [{
+      value: 'xihu',
+      label: 'West Lake',
+      code: 752100,
+      isLeaf: true
+    }]
+  }, {
+    value: 'ningbo',
+    label: 'Ningbo',
+    code: '315000',
+    isLeaf: true
+  }]
+}, {
+  value: 'jiangsu',
+  label: 'Jiangsu',
+  children: [{
+    value: 'nanjing',
+    label: 'Nanjing',
+    children: [{
+      value: 'zhonghuamen',
+      label: 'Zhong Hua Men',
+      code: 453400,
+      isLeaf: true
+    }]
+  }]
+}];
+
+@Component({
+  selector: 'nz-demo-cascader-custom-render',
+  template: `
+    <nz-cascader
+      [nzLabelRender]="renderTpl"
+      [nzOptions]="nzOptions"
+      [(ngModel)]="values"
+      (ngModelChange)="onChanges($event)">
+    </nz-cascader>
+
+    <ng-template #renderTpl let-labels="labels" let-selectedOptions="selectedOptions">
+      <ng-container *ngFor="let label of labels; let i = index; let isLast = last">
+        <span *ngIf="!isLast">{{label}} / </span>
+        <span *ngIf="isLast">
+          {{label}} (<a href="javascript:;" (click)="handleAreaClick($event, label, selectedOptions[i])"> {{selectedOptions[i].code}} </a>)
+        </span>
+      </ng-container>
+    </ng-template>`,
+  styles  : [
+    `
+    .ant-cascader-picker {
+      width: 300px;
+    }
+    `
+  ]
+})
+export class NzDemoCascaderCustomRenderComponent {
+  /** init data */
+  nzOptions = options;
+
+  /** ngModel value */
+  public values: any[] = null;
+
+  public onChanges(values: any): void {
+    console.log(values, this.values);
+  }
+
+  handleAreaClick(e: Event, label: string, option: any): void {
+    e.preventDefault();
+    e.stopPropagation();
+    console.log('clicked \"', label, '\"', option);
+  }
+}