feat(module:tree, tree-select): support customize icons (#2933)

* feat(module:tree and tree-select): customized icon * feat(module:tree and tree-select): add template context * feat(module:tree and tree-select): fix lint * feat(module:tree and tree-select): fix type * feat(module:tree and tree-select): support customize icons with show line * feat(module:tree and tree-select): fix test * feat(module:tree and tree-select): update doc * feat(module:tree and tree-select): fix quotation * feat(module:tree and tree-select): fix testing * feat(module:tree and tree-select): modify dome variable
NG-ZORRO · Apr 15, 2019 · a77f6c9 · a77f6c9
1 parent d81b2f6
commit a77f6c9
Show file tree

Hide file tree

Showing 14 changed files with 108 additions and 21 deletions.
diff --git a/components/date-picker/date-picker.component.spec.ts b/components/date-picker/date-picker.component.spec.ts
@@ -314,7 +314,7 @@ describe('NzDatePickerComponent', () => {
       fixture.detectChanges();
       expect(nzOnChange).toHaveBeenCalled();
       expect(nzOnCalendarChange).not.toHaveBeenCalled();
-      const result = nzOnChange.calls.allArgs()[ 0 ][ 0 ];
+      const result = nzOnChange.calls.allArgs()[0][0];
       expect(result.getDate()).toBe(+cellText);
     }));
   });

diff --git a/components/date-picker/lib/popups/date-range-popup.component.ts b/components/date-picker/lib/popups/date-range-popup.component.ts
@@ -183,7 +183,7 @@ export class DateRangePopupComponent implements OnInit, OnChanges {
 
       if ((!left && !right) || (left && right)) {
         // If totally full or empty, clean up && re-assign left first
-        this.hoverValue = this.selectedValue = [ value ];
+        this.hoverValue = this.selectedValue = [value];
         this.calendarChange.emit([value.clone()]);
       } else if (left && !right) {
         // If one of them is empty, assign the other one and sort, then set the final values

diff --git a/components/tree-select/nz-tree-select.component.html b/components/tree-select/nz-tree-select.component.html
@@ -42,6 +42,7 @@
       [nzAsyncData]="nzAsyncData"
       [nzShowExpand]="nzShowExpand"
       [nzShowLine]="nzShowLine"
+      [nzExpandedIcon]="nzExpandedIcon"
       [nzExpandAll]="nzDefaultExpandAll"
       [nzExpandedKeys]="nzDefaultExpandedKeys"
       [nzCheckedKeys]="nzCheckable ? value : []"

diff --git a/components/tree-select/nz-tree-select.component.ts b/components/tree-select/nz-tree-select.component.ts
@@ -71,11 +71,12 @@ import { NzTreeSelectService } from './nz-tree-select.service';
 export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, OnDestroy, OnChanges {
   @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() nzShowSearch = false;
   @Input() @InputBoolean() nzDisabled = false;
-  @Input() @InputBoolean() nzShowLine = false;
   @Input() @InputBoolean() nzAsyncData = false;
   @Input() @InputBoolean() nzMultiple = false;
   @Input() @InputBoolean() nzDefaultExpandAll = false;

diff --git a/components/tree/demo/customized-icon.ts b/components/tree/demo/customized-icon.ts
@@ -3,7 +3,22 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'nz-demo-tree-customized-icon',
   template: `
-    <nz-tree [nzData]="nodes" nzShowIcon> </nz-tree>
+    <nz-tree [nzData]="nodes" nzShowIcon [nzExpandedIcon]="expandedIconTpl">
+      <ng-template #expandedIconTpl let-node>
+        <i nz-icon [type]="node.origin.icon" class="ant-tree-switcher-icon"></i>
+      </ng-template>
+    </nz-tree>
+    <nz-tree [nzData]="nodes" nzShowIcon [nzExpandedIcon]="mutiExpandedIconTpl">
+      <ng-template #mutiExpandedIconTpl let-node>
+        <i
+          *ngIf="!node.origin.isLeaf"
+          nz-icon
+          [type]="node.isExpanded ? 'folder-open' : 'folder'"
+          class="ant-tree-switcher-line-icon"
+        ></i>
+        <i *ngIf="node.origin.isLeaf" nz-icon type="file" class="ant-tree-switcher-line-icon"></i>
+      </ng-template>
+    </nz-tree>
   `
 })
 export class NzDemoTreeCustomizedIconComponent implements OnInit {

diff --git a/components/tree/doc/index.en-US.md b/components/tree/doc/index.en-US.md
@@ -18,6 +18,7 @@ Almost anything can be represented in a tree structure. Examples include directo
 | `[nzCheckable]` | Adds a Checkbox before the treeNodes| `boolean` | `false` |
 | `[nzShowExpand]` | Show a Expand Icon before the treeNodes | `boolean` | `true` |
 | `[nzShowLine]` | Shows a connecting line | `boolean` | `false` |
+| `[nzExpandedIcon]` | Customize an expand icon | `TemplateRef<{ $implicit: NzTreeNode }>` | - |
 | `[nzShowIcon]` | Shows the icon before a TreeNode's title. There is no default style | `boolean` | `false` |
 | `[nzAsyncData]` | Load data asynchronously (should be used with NzTreeNode.addChildren(...)) | `boolean` | `false` |
 | `[nzDraggable]` | Specifies whether this Tree is draggable (IE > 8) | `boolean` | `false` |

diff --git a/components/tree/doc/index.zh-CN.md b/components/tree/doc/index.zh-CN.md
@@ -19,6 +19,7 @@ subtitle: 树形控件
 | `[nzCheckable]` | 节点前添加 Checkbox 复选框 | `boolean` | `false` |
 | `[nzShowExpand]` | 节点前添加展开图标 | `boolean` | `true` |
 | `[nzShowLine]` | 是否展示连接线 | `boolean` | `false` |
+| `[nzExpandedIcon]` | 自定义展开图标 | `TemplateRef<{ $implicit: NzTreeNode }>` | - |
 | `[nzShowIcon]` | 是否展示 TreeNode title 前的图标，没有默认样式 | `boolean` | `false` |
 | `[nzAsyncData]` | 是否异步加载(显示加载状态) | `boolean` | `false` |
 | `[nzDraggable]` | 设置节点可拖拽（IE>8） | `boolean` | `false` |

diff --git a/components/tree/nz-tree-node.component.html b/components/tree/nz-tree-node.component.html
@@ -8,16 +8,32 @@
       [ngClass]="nzNodeSwitcherClass"
       (click)="_clickExpand($event)">
       <ng-container *ngIf="isShowSwitchIcon">
-        <i *ngIf="!nzTreeNode.isLoading"
-          nz-icon
-          type="caret-down"
-          [class.ant-select-switcher-icon]="nzSelectMode"
-          [class.ant-tree-switcher-icon]="!nzSelectMode"></i>
+        <ng-container *ngIf="!nzTreeNode.isLoading">
+          <ng-template
+            *ngIf="isTemplateRef(nzExpandedIcon)"
+            [ngTemplateOutlet]="nzExpandedIcon"
+            [ngTemplateOutletContext]="{ $implicit: nzTreeNode }">
+          </ng-template>
+          <i
+            *ngIf="!isTemplateRef(nzExpandedIcon)" 
+            nz-icon 
+            type="caret-down"           
+            [class.ant-select-switcher-icon]="nzSelectMode"
+            [class.ant-tree-switcher-icon]="!nzSelectMode">
+          </i>
+        </ng-container>
         <i *ngIf="nzTreeNode.isLoading" nz-icon type="loading" [spin]="true" class="ant-tree-switcher-loading-icon"></i>
       </ng-container>
       <ng-container *ngIf="nzShowLine">
-        <i *ngIf="isShowLineIcon" nz-icon [type]="isSwitcherOpen ? 'minus-square' : 'plus-square'" class="ant-tree-switcher-line-icon"></i>
-        <i *ngIf="!isShowLineIcon" nz-icon type="file" class="ant-tree-switcher-line-icon"></i>
+        <ng-template
+          *ngIf="isTemplateRef(nzExpandedIcon)"
+          [ngTemplateOutlet]="nzExpandedIcon"
+          [ngTemplateOutletContext]="{ $implicit: nzTreeNode }">
+        </ng-template>
+        <ng-container *ngIf="!isTemplateRef(nzExpandedIcon)">
+          <i *ngIf="isShowLineIcon" nz-icon [type]="isSwitcherOpen ? 'minus-square' : 'plus-square'" class="ant-tree-switcher-line-icon"></i>
+          <i *ngIf="!isShowLineIcon" nz-icon type="file" class="ant-tree-switcher-line-icon"></i>
+        </ng-container>
       </ng-container>
     </span>
   </ng-container>
@@ -74,12 +90,13 @@
     <nz-tree-node
       *ngFor="let node of nzTreeNode.getChildren()"
       [nzTreeNode]="node"
+      [nzShowExpand]="nzShowExpand"
       [nzNoAnimation]="noAnimation?.nzNoAnimation"
       [nzSelectMode]="nzSelectMode"
       [nzShowLine]="nzShowLine"
+      [nzExpandedIcon]="nzExpandedIcon"
       [nzDraggable]="nzDraggable"
       [nzCheckable]="nzCheckable"
-      [nzShowExpand]="nzShowExpand"
       [nzAsyncData]="nzAsyncData"
       [nzExpandAll]="nzExpandAll"
       [nzDefaultExpandAll]="nzDefaultExpandAll"

diff --git a/components/tree/nz-tree-node.component.ts b/components/tree/nz-tree-node.component.ts
@@ -40,6 +40,7 @@ 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;
@@ -426,6 +427,10 @@ export class NzTreeNodeComponent implements OnInit, OnChanges, OnDestroy {
     });
   }
 
+  isTemplateRef(value: {}): boolean {
+    return value instanceof TemplateRef;
+  }
+
   markForCheck(): void {
     this.cdr.markForCheck();
   }

diff --git a/components/tree/nz-tree.component.html b/components/tree/nz-tree.component.html
@@ -7,6 +7,7 @@
       [nzTreeNode]="node"
       [nzSelectMode]="nzSelectMode"
       [nzShowLine]="nzShowLine"
+      [nzExpandedIcon]="nzExpandedIcon"
       [nzDraggable]="nzDraggable"
       [nzCheckable]="nzCheckable"
       [nzShowExpand]="nzShowExpand"

diff --git a/components/tree/nz-tree.component.ts b/components/tree/nz-tree.component.ts
@@ -55,9 +55,10 @@ export function NzTreeServiceFactory(
 })
 export class NzTreeComponent implements OnInit, OnDestroy, ControlValueAccessor, OnChanges {
   @Input() @InputBoolean() nzShowIcon = false;
+  @Input() @InputBoolean() nzShowExpand = true;
   @Input() @InputBoolean() nzShowLine = false;
+  @Input() nzExpandedIcon: TemplateRef<{ $implicit: NzTreeNode }>;
   @Input() @InputBoolean() nzCheckable = false;
-  @Input() @InputBoolean() nzShowExpand = true;
   @Input() @InputBoolean() nzAsyncData = false;
   @Input() @InputBoolean() nzDraggable = false;
   @Input() @InputBoolean() nzExpandAll = false;

diff --git a/components/tree/nz-tree.module.ts b/components/tree/nz-tree.module.ts
@@ -7,7 +7,7 @@ import { NzTreeNodeComponent } from './nz-tree-node.component';
 import { NzTreeComponent } from './nz-tree.component';
 
 @NgModule({
-  imports: [CommonModule, NzIconModule, NzNoAnimationModule, NzAddOnModule],
+  imports: [CommonModule, NzAddOnModule, NzIconModule, NzNoAnimationModule, NzAddOnModule],
   declarations: [NzTreeComponent, NzTreeNodeComponent],
   exports: [NzTreeComponent, NzTreeNodeComponent]
 })

diff --git a/components/tree/nz-tree.spec.ts b/components/tree/nz-tree.spec.ts
@@ -607,6 +607,28 @@ describe('nz-tree', () => {
       expect(targetNode.querySelectorAll('.ant-tree-treenode-selected').length).toEqual(0);
     }));
   });
+
+  describe('test older node property', () => {
+    let treeElement: HTMLElement;
+    let fixture: ComponentFixture<NzTestTreeCustomizedIconComponent>;
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports: [NzTreeModule, NoopAnimationsModule, FormsModule, ReactiveFormsModule, NzIconTestModule],
+        declarations: [NzTestTreeCustomizedIconComponent],
+        providers: [NzTreeBaseService]
+      }).compileComponents();
+      fixture = TestBed.createComponent(NzTestTreeCustomizedIconComponent);
+      treeService = fixture.componentInstance.treeComponent.nzTreeService;
+      fixture.detectChanges();
+      treeElement = fixture.debugElement.query(By.directive(NzTreeComponent)).nativeElement;
+    }));
+
+    it('test customized icon', fakeAsync(() => {
+      fixture.detectChanges();
+      // customized template icon
+      expect(treeElement.querySelectorAll('.anticon-arrow-down').length).toEqual(1);
+    }));
+  });
 });
 
 @Component({
@@ -624,6 +646,7 @@ describe('nz-tree', () => {
       [nzMultiple]="multiple"
       [nzSearchValue]="searchValue"
       [nzExpandAll]="expandAll"
+      [nzExpandedIcon]="expandedIcon"
       [nzAsyncData]="asyncData"
       (nzSearchValueChange)="nzEvent($event)"
       (nzClick)="nzEvent($event)"
@@ -908,3 +931,29 @@ export class NzTestTreeOlderComponent implements OnInit {
     });
   }
 }
+
+@Component({
+  selector: 'nz-demo-tree-customized-icon',
+  template: `
+    <nz-tree #treeComponent [nzData]="nodes" nzShowIcon="true" [nzExpandedIcon]="expandedIconTpl">
+      <ng-template #expandedIconTpl let-node>
+        <i nz-icon [type]="'arrow-down'" class="ant-tree-switcher-icon"></i>
+      </ng-template>
+    </nz-tree>
+  `
+})
+class NzTestTreeCustomizedIconComponent {
+  @ViewChild('treeComponent') treeComponent: NzTreeComponent;
+  nodes = [
+    {
+      title: 'parent 1',
+      key: '100',
+      expanded: true,
+      icon: 'anticon anticon-smile-o',
+      children: [
+        { title: 'leaf', key: '1001', icon: 'anticon anticon-meh-o', isLeaf: true },
+        { title: 'leaf', key: '1002', icon: 'anticon anticon-frown-o', isLeaf: true }
+      ]
+    }
+  ];
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -9,13 +9,8 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "target": "es5",
-    "typeRoots": [
-      "../../node_modules/@types/!(node)"
-    ],
-    "lib": [
-      "es2017",
-      "dom"
-    ],
+    "typeRoots": ["../../node_modules/@types/!(node)"],
+    "lib": ["es2017", "dom"],
     "noUnusedParameters": true,
     "noUnusedLocals": true,
     "noImplicitAny": true,