diff --git a/components/date-picker/date-picker.component.spec.ts b/components/date-picker/date-picker.component.spec.ts index 6b89a0f558c..a7c25550c51 100644 --- 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 index b7d93090585..8556f7fb703 100644 --- 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 index c57288df7d2..1a34754e3a1 100644 --- 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 index 08e1a0e2b19..c4d6a6f9867 100644 --- 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 index d0fbdb014ef..245b252d130 100644 --- 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: ` - + + + + + + + + + + + ` }) export class NzDemoTreeCustomizedIconComponent implements OnInit { diff --git a/components/tree/doc/index.en-US.md b/components/tree/doc/index.en-US.md index 02c114305cd..7d937e41336 100644 --- 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 index 6312e49efa1..4e6a834af4e 100644 --- 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 index b4696494556..db868aefe02 100644 --- 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)"> - + + + + + + - - + + + + + + @@ -74,12 +90,13 @@ ; @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 index d890ec40f5e..6d7d14baf39 100644 --- 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 index 1f10d24ed8d..23bce915337 100644 --- 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 index 07427e32c55..91cceb5970b 100644 --- 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 index d39c43d7bda..52ed7a50dd6 100644 --- 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; + 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: ` + + + + + + ` +}) +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 index 424a6e896b7..e4539f3a28f 100644 --- 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,