feat(module:tree-select): support customized icon (#3395)

* feat(module:tree-select): support customized icon * feat: support nzTreeTemplate to customize icon fix: change tree template type * feat: support tree template as @input and @ContentChild
NG-ZORRO · May 17, 2019 · 0deda73 · 0deda73
1 parent 2015021
commit 0deda73
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 6 deletions.
diff --git a/components/tree-select/demo/customized-icon.md b/components/tree-select/demo/customized-icon.md
@@ -0,0 +1,15 @@
+---
+order: 4
+debug: true
+title:
+  zh-CN: 自定义图标
+  en-US: Customize Icon
+---
+
+## zh-CN
+
+可以针对不同节点采用样式覆盖的方式定制图标。
+
+## en-US
+
+You can customize icons for different nodes.
diff --git a/components/tree-select/demo/customized-icon.ts b/components/tree-select/demo/customized-icon.ts
@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-tree-select-customized-icon',
+  template: `
+    <nz-tree-select style="width: 250px" [nzNodes]="nodes" [(ngModel)]="value" nzPlaceHolder="Please select" nzShowIcon>
+    </nz-tree-select>
+
+    <nz-tree-select
+      style="width: 250px; margin-top: 20px;"
+      [nzNodes]="nodes"
+      [(ngModel)]="value"
+      nzPlaceHolder="Please select"
+    >
+      <ng-template #nzTreeTemplate let-node>
+        <span class="ant-tree-node-content-wrapper" [class.ant-tree-node-selected]="node.isSelected">
+          <span> <i nz-icon [type]="node.isExpanded ? 'folder-open' : 'folder'"></i> {{ node.title }} </span>
+        </span>
+      </ng-template>
+    </nz-tree-select>
+  `
+})
+export class NzDemoTreeSelectCustomizedIconComponent {
+  value: string;
+  nodes = [
+    {
+      title: 'parent 1',
+      key: '100',
+      expanded: true,
+      icon: 'anticon anticon-smile-o',
+      children: [
+        { title: 'leaf 1-0-0', key: '10010', icon: 'anticon anticon-meh-o', isLeaf: true },
+        { title: 'leaf 1-0-1', key: '10011', icon: 'anticon anticon-frown-o', isLeaf: true }
+      ]
+    }
+  ];
+}
diff --git a/components/tree-select/doc/index.en-US.md b/components/tree-select/doc/index.en-US.md
@@ -28,6 +28,7 @@ import { NzTreeSelectModule } from 'ng-zorro-antd';
 | `[nzAllowClear]` | Whether allow clear | `boolean` | `false` |
 | `[nzPlaceHolder]` | Placeholder of the select input | `string` | - |
 | `[nzDisabled]` | Disabled or not | `boolean` | `false` |
+| `[nzShowIcon]` | Shows the icon before a TreeNode's title. There is no default style | `boolean` | `false` |
 | `[nzShowSearch]` | Whether to display a search input in the dropdown menu(valid only in the single mode) | `boolean` | `false` |
 | `[nzNotFoundContent]` | Specify content to show when no result matches. | `string` | - |
 | `[nzDropdownMatchSelectWidth]` | Determine whether the dropdown menu and the select input are the same width | `boolean` | `true` |

diff --git a/components/tree-select/doc/index.zh-CN.md b/components/tree-select/doc/index.zh-CN.md
@@ -28,6 +28,7 @@ import { NzTreeSelectModule } from 'ng-zorro-antd';
 | `[nzAllowClear]` | 显示清除按钮 | `boolean` | `false` |
 | `[nzPlaceHolder]` | 选择框默认文字 | `string` | - |
 | `[nzDisabled]` | 禁用选择器 | `boolean` | `false` |
+| `[nzShowIcon]` | 是否展示 TreeNode title 前的图标，没有默认样式 | `boolean` | `false` |
 | `[nzShowSearch]` | 显示搜索框 | `boolean` | `false` |
 | `[nzNotFoundContent]` | 当下拉列表为空时显示的内容 | `string` | - |
 | `[nzDropdownMatchSelectWidth]` | 下拉菜单和选择器同宽 | `boolean` | `true` |

diff --git a/components/tree-select/nz-tree-select.component.html b/components/tree-select/nz-tree-select.component.html
@@ -38,6 +38,7 @@
       [nzData]="nzNodes"
       [nzMultiple]="nzMultiple"
       [nzSearchValue]="inputValue"
+      [nzShowIcon]="nzShowIcon"
       [nzCheckable]="nzCheckable"
       [nzAsyncData]="nzAsyncData"
       [nzShowExpand]="nzShowExpand"
@@ -47,6 +48,7 @@
       [nzExpandedKeys]="nzDefaultExpandedKeys"
       [nzCheckedKeys]="nzCheckable ? value : []"
       [nzSelectedKeys]="!nzCheckable ? value : []"
+      [nzTreeTemplate]="nzTreeTemplate"
       (nzExpandChange)="onExpandedKeysChange($event)"
       (nzClick)="nzTreeClick.emit($event)"
       (nzCheckedKeysChange)="updateSelectedNodes()"

diff --git a/components/tree-select/nz-tree-select.component.ts b/components/tree-select/nz-tree-select.component.ts
@@ -12,6 +12,7 @@ import {
   forwardRef,
   ChangeDetectorRef,
   Component,
+  ContentChild,
   ElementRef,
   EventEmitter,
   Host,
@@ -100,14 +101,15 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
   @Input() @InputBoolean() nzAllowClear = true;
   @Input() @InputBoolean() nzShowExpand = true;
   @Input() @InputBoolean() nzShowLine = false;
-  @Input() nzExpandedIcon: TemplateRef<{ $implicit: NzTreeNode }>;
   @Input() @InputBoolean() nzDropdownMatchSelectWidth = true;
   @Input() @InputBoolean() nzCheckable = false;
+  @Input() @InputBoolean() nzShowIcon = false;
   @Input() @InputBoolean() nzShowSearch = false;
   @Input() @InputBoolean() nzDisabled = false;
   @Input() @InputBoolean() nzAsyncData = false;
   @Input() @InputBoolean() nzMultiple = false;
   @Input() @InputBoolean() nzDefaultExpandAll = false;
+  @Input() nzExpandedIcon: TemplateRef<{ $implicit: NzTreeNode }>;
   @Input() nzNotFoundContent: string;
   @Input() nzNodes: Array<NzTreeNode | NzTreeNodeOptions> = [];
   @Input() nzOpen = false;
@@ -130,6 +132,8 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
   @ViewChild(CdkOverlayOrigin) cdkOverlayOrigin: CdkOverlayOrigin;
   @ViewChild(CdkConnectedOverlay) cdkConnectedOverlay: CdkConnectedOverlay;
 
+  @Input() @ContentChild('nzTreeTemplate') nzTreeTemplate: TemplateRef<{ $implicit: NzTreeNode }>;
+
   triggerWidth: number;
   isComposing = false;
   isDestroy = true;

diff --git a/components/tree-select/nz-tree-select.spec.ts b/components/tree-select/nz-tree-select.spec.ts
@@ -24,7 +24,12 @@ describe('tree-select component', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [NzTreeSelectModule, NoopAnimationsModule, FormsModule, ReactiveFormsModule],
-      declarations: [NzTestTreeSelectBasicComponent, NzTestTreeSelectCheckableComponent, NzTestTreeSelectFormComponent]
+      declarations: [
+        NzTestTreeSelectBasicComponent,
+        NzTestTreeSelectCheckableComponent,
+        NzTestTreeSelectFormComponent,
+        NzTestTreeSelectCustomizedIconComponent
+      ]
     });
     TestBed.compileComponents();
     inject([OverlayContainer], (oc: OverlayContainer) => {
@@ -458,6 +463,21 @@ describe('tree-select component', () => {
       expect(treeSelectComponent.nzDefaultExpandedKeys[0] === '1001').toBe(true);
     });
   });
+
+  describe('customized icon', () => {
+    let fixture: ComponentFixture<NzTestTreeSelectCustomizedIconComponent>;
+    let treeSelect: DebugElement;
+    beforeEach(() => {
+      fixture = TestBed.createComponent(NzTestTreeSelectCustomizedIconComponent);
+      treeSelect = fixture.debugElement.query(By.directive(NzTreeSelectComponent));
+    });
+    it('should display', fakeAsync(() => {
+      treeSelect.nativeElement.click();
+      fixture.detectChanges();
+      flush();
+      expect(overlayContainerElement.querySelector('i.anticon.anticon-frown-o')).toBeTruthy();
+    }));
+  });
 });
 
 @Component({
@@ -683,3 +703,33 @@ export class NzTestTreeSelectFormComponent {
     this.formGroup.get('select')!.reset(null);
   }
 }
+
+@Component({
+  selector: 'nz-test-tree-select-customized-icon',
+  template: `
+    <nz-tree-select [nzNodes]="nodes" [(ngModel)]="value">
+      <ng-template #nzTreeTemplate let-node>
+        <span> <i class="anticon anticon-frown-o"></i> {{ node.title }} </span>
+      </ng-template>
+    </nz-tree-select>
+  `
+})
+export class NzTestTreeSelectCustomizedIconComponent {
+  value: string;
+  nodes = [
+    new NzTreeNode({
+      title: 'root3',
+      key: '1003',
+      children: [
+        {
+          title: 'child3.1',
+          key: '10031'
+        },
+        {
+          title: 'child3.2',
+          key: '10032'
+        }
+      ]
+    })
+  ];
+}
diff --git a/components/tree/nz-tree-node.component.ts b/components/tree/nz-tree-node.component.ts
@@ -52,14 +52,14 @@ export class NzTreeNodeComponent implements OnInit, OnChanges, OnDestroy {
   @Input() nzTreeNode: NzTreeNode;
   @Input() @InputBoolean() nzShowLine: boolean;
   @Input() @InputBoolean() nzShowExpand: boolean;
-  @Input() nzExpandedIcon: TemplateRef<{ $implicit: NzTreeNode }>;
   @Input() @InputBoolean() nzCheckable: boolean;
   @Input() @InputBoolean() nzAsyncData: boolean;
   @Input() @InputBoolean() nzHideUnMatched = false;
   @Input() @InputBoolean() nzNoAnimation = false;
   @Input() @InputBoolean() nzSelectMode = false;
   @Input() @InputBoolean() nzShowIcon = false;
-  @Input() nzTreeTemplate: TemplateRef<void>;
+  @Input() nzExpandedIcon: TemplateRef<{ $implicit: NzTreeNode }>;
+  @Input() nzTreeTemplate: TemplateRef<{ $implicit: NzTreeNode }>;
   @Input() nzBeforeDrop: (confirm: NzFormatBeforeDropEvent) => Observable<boolean>;
 
   @Input()

diff --git a/components/tree/nz-tree.component.ts b/components/tree/nz-tree.component.ts
@@ -83,6 +83,8 @@ export class NzTreeComponent extends NzTreeBase implements OnInit, OnDestroy, Co
   @Input() @InputBoolean() nzCheckStrictly = false;
   @Input() @InputBoolean() nzBlockNode = false;
 
+  @Input() @ContentChild('nzTreeTemplate') nzTreeTemplate: TemplateRef<{ $implicit: NzTreeNode }>;
+
   /**
    * @deprecated use
    * nzExpandAll instead
@@ -194,8 +196,7 @@ export class NzTreeComponent extends NzTreeBase implements OnInit, OnDestroy, Co
   @Output() readonly nzOnDragLeave: EventEmitter<NzFormatEmitEvent> = new EventEmitter();
   @Output() readonly nzOnDrop: EventEmitter<NzFormatEmitEvent> = new EventEmitter();
   @Output() readonly nzOnDragEnd: EventEmitter<NzFormatEmitEvent> = new EventEmitter();
-  // tslint:disable-next-line:no-any
-  @ContentChild('nzTreeTemplate') nzTreeTemplate: TemplateRef<any>;
+
   _searchValue: string;
   _nzMultiple: boolean = false;
   nzDefaultSubject = new ReplaySubject<{ type: string; keys: string[] }>(6);