Skip to content

Commit c917938

Browse files
author
simplejason
authored
fix(module: tree): fix nzMultiple and rollback code (#3060)
* fix(module: tree): fix nzMultiple and rollback code * fix(module: tree): fix spec and export service fix(module: tree): fix doc * fix(module: tree): fix code bug * fix(module: tree): fix treeService error and code merge * fix(module: tree): fix strict code style * fix(module: tree): fix strict spec code * fix(module: tree): remove unnecessary demo code * fix(module: tree): fix doc and demo * fix(module: tree): add notice doc close #3076
1 parent 72a9e67 commit c917938

18 files changed

Lines changed: 975 additions & 988 deletions

‎components/tree-select/demo/async.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,10 @@ export class NzDemoTreeSelectAsyncComponent implements OnInit {
4747
];
4848

4949
onExpandChange(e: Required<NzFormatEmitEvent>): void {
50-
if (e.node.getChildren().length === 0 && e.node.isExpanded) {
50+
const node = e.node;
51+
if (node && node.getChildren().length === 0 && node.isExpanded) {
5152
this.loadNode().then(data => {
52-
e.node.addChildren(data);
53+
node.addChildren(data);
5354
});
5455
}
5556
}

‎components/tree/demo/basic.ts‎

Lines changed: 36 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,48 @@
1-
import { Component, OnInit, ViewChild } from '@angular/core';
2-
import { NzFormatEmitEvent, NzTreeNodeOptions, NzTreeComponent } from 'ng-zorro-antd';
1+
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
2+
import { NzFormatEmitEvent, NzTreeComponent, NzTreeNodeOptions } from 'ng-zorro-antd';
33

44
@Component({
55
selector: 'nz-demo-tree-basic',
66
template: `
77
<nz-tree
8-
#treeCom
98
[nzData]="nodes"
109
nzCheckable
1110
[nzCheckedKeys]="defaultCheckedKeys"
1211
[nzExpandedKeys]="defaultExpandedKeys"
1312
[nzSelectedKeys]="defaultSelectedKeys"
1413
(nzClick)="nzClick($event)"
1514
(nzCheckBoxChange)="nzCheck($event)"
16-
(nzExpandChange)="nzCheck($event)"
17-
>
15+
(nzExpandChange)="nzCheck($event)">
1816
</nz-tree>
1917
`
2018
})
21-
export class NzDemoTreeBasicComponent implements OnInit {
22-
@ViewChild('treeCom') treeCom: NzTreeComponent;
23-
defaultCheckedKeys = ['10020'];
24-
defaultSelectedKeys = ['10010'];
25-
defaultExpandedKeys = ['100', '1001'];
2619

27-
nodes: NzTreeNodeOptions[] = [
28-
{
29-
title: 'parent 1',
30-
key: '100',
20+
export class NzDemoTreeBasicComponent implements OnInit, AfterViewInit {
21+
@ViewChild(NzTreeComponent) nzTreeComponent: NzTreeComponent;
22+
defaultCheckedKeys = [ '10020' ];
23+
defaultSelectedKeys = [ '10010' ];
24+
defaultExpandedKeys = [ '100', '1001' ];
25+
26+
nodes: NzTreeNodeOptions[] = [ {
27+
title : 'parent 1',
28+
key : '100',
29+
children: [ {
30+
title : 'parent 1-0',
31+
key : '1001',
32+
disabled: true,
33+
children: [
34+
{ title: 'leaf 1-0-0', key: '10010', disableCheckbox: true, isLeaf: true },
35+
{ title: 'leaf 1-0-1', key: '10011', isLeaf: true }
36+
]
37+
}, {
38+
title : 'parent 1-1',
39+
key : '1002',
3140
children: [
32-
{
33-
title: 'parent 1-0',
34-
key: '1001',
35-
disabled: true,
36-
children: [
37-
{ title: 'leaf 1-0-0', key: '10010', disableCheckbox: true, isLeaf: true },
38-
{ title: 'leaf 1-0-1', key: '10011', isLeaf: true }
39-
]
40-
},
41-
{
42-
title: 'parent 1-1',
43-
key: '1002',
44-
children: [
45-
{ title: 'leaf 1-1-0', key: '10020', isLeaf: true },
46-
{ title: 'leaf 1-1-1', key: '10021', isLeaf: true }
47-
]
48-
}
41+
{ title: 'leaf 1-1-0', key: '10020', isLeaf: true },
42+
{ title: 'leaf 1-1-1', key: '10021', isLeaf: true }
4943
]
50-
}
51-
];
44+
} ]
45+
} ];
5246

5347
nzClick(event: NzFormatEmitEvent): void {
5448
console.log(event);
@@ -60,18 +54,17 @@ export class NzDemoTreeBasicComponent implements OnInit {
6054

6155
// nzSelectedKeys change
6256
nzSelect(keys: string[]): void {
63-
console.log(keys, this.treeCom.getSelectedNodeList());
57+
console.log(keys, this.nzTreeComponent.getSelectedNodeList());
6458
}
6559

6660
ngOnInit(): void {
67-
setTimeout(() => {
68-
console.log(this.treeCom.getTreeNodeByKey('10011'), 'get nzTreeNode with key');
69-
console.log(
70-
this.treeCom.getTreeNodes(),
71-
this.treeCom.getCheckedNodeList(),
72-
this.treeCom.getSelectedNodeList(),
73-
this.treeCom.getExpandedNodeList()
74-
);
75-
}, 1500);
61+
// TODO something
62+
}
63+
64+
ngAfterViewInit(): void {
65+
// get node by key: '10011'
66+
console.log(this.nzTreeComponent.getTreeNodeByKey('10011'));
67+
// use tree methods
68+
console.log(this.nzTreeComponent.getTreeNodes(), this.nzTreeComponent.getCheckedNodeList(), this.nzTreeComponent.getSelectedNodeList(), this.nzTreeComponent.getExpandedNodeList());
7669
}
7770
}

‎components/tree/demo/directory.ts‎

Lines changed: 71 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,111 @@
1-
import { Component, TemplateRef, ViewChild } from '@angular/core';
1+
import { Component, TemplateRef } from '@angular/core';
22
import {
33
NzDropdownContextComponent,
44
NzDropdownService,
55
NzFormatEmitEvent,
6-
NzTreeComponent,
76
NzTreeNode
87
} from 'ng-zorro-antd';
98

109
@Component({
1110
selector: 'nz-demo-tree-directory',
1211
template: `
13-
<nz-tree #treeCom [nzData]="nodes" (nzClick)="activeNode($event)" (nzDblClick)="openFolder($event)">
12+
<nz-tree
13+
[nzData]="nodes"
14+
(nzClick)="activeNode($event)"
15+
(nzDblClick)="openFolder($event)">
1416
<ng-template #contextTemplate>
1517
<ul nz-menu nzInDropDown>
1618
<li nz-menu-item (click)="selectDropdown()">Action 1</li>
1719
<li nz-menu-item (click)="selectDropdown()">Action 2</li>
1820
</ul>
1921
</ng-template>
2022
<ng-template #nzTreeTemplate let-node>
21-
<span class="custom-node" [class.active]="activedNode?.key === node.key">
22-
<span *ngIf="!node.isLeaf" (contextmenu)="contextMenu($event, contextTemplate)">
23+
<span class="custom-node" [class.active]="activedNode?.key===node.key">
24+
<span *ngIf="!node.isLeaf" (contextmenu)="contextMenu($event,contextTemplate)">
2325
<i nz-icon [type]="node.isExpanded ? 'folder-open' : 'folder'" (click)="openFolder(node)"></i>
24-
<span class="folder-name">{{ node.title }}</span>
25-
<span class="folder-desc">created by {{ node?.origin?.author | lowercase }}</span>
26+
<span class="folder-name">{{node.title}}</span>
27+
<span class="folder-desc">created by {{node?.origin?.author | lowercase}}</span>
2628
</span>
27-
<span *ngIf="node.isLeaf" (contextmenu)="contextMenu($event, contextTemplate)">
29+
<span *ngIf="node.isLeaf" (contextmenu)="contextMenu($event,contextTemplate)">
2830
<i nz-icon type="file"></i>
29-
<span class="file-name">{{ node.title }}</span>
30-
<span class="file-desc">modified by {{ node?.origin?.author | lowercase }}</span>
31+
<span class="file-name">{{node.title}}</span>
32+
<span class="file-desc">modified by {{node?.origin?.author | lowercase}}</span>
3133
</span>
3234
</span>
3335
</ng-template>
34-
</nz-tree>
35-
`,
36-
styles: [
37-
`
38-
:host ::ng-deep .ant-tree {
39-
overflow: hidden;
40-
margin: 0 -24px;
41-
padding: 0 24px;
42-
}
36+
</nz-tree>`,
37+
styles : [ `
38+
:host ::ng-deep .ant-tree {
39+
overflow: hidden;
40+
margin: 0 -24px;
41+
padding: 0 24px;
42+
}
4343
44-
:host ::ng-deep .ant-tree li {
45-
padding: 4px 0 0 0;
46-
}
44+
:host ::ng-deep .ant-tree li {
45+
padding: 4px 0 0 0;
46+
}
4747
48-
.custom-node {
49-
cursor: pointer;
50-
line-height: 24px;
51-
margin-left: 4px;
52-
display: inline-block;
53-
margin: 0 -1000px;
54-
padding: 0 1000px;
55-
}
48+
.custom-node {
49+
cursor: pointer;
50+
line-height: 24px;
51+
margin-left: 4px;
52+
display: inline-block;
53+
margin: 0 -1000px;
54+
padding: 0 1000px;
55+
}
5656
57-
.active {
58-
background: #1890ff;
59-
color: #fff;
60-
}
57+
.active {
58+
background: #1890FF;
59+
color: #fff;
60+
}
6161
62-
.file-name,
63-
.folder-name {
64-
margin-left: 4px;
65-
}
62+
.file-name, .folder-name {
63+
margin-left: 4px;
64+
}
6665
67-
.file-desc,
68-
.folder-desc {
69-
padding: 0 8px;
70-
display: inline-block;
71-
background: #87ceff;
72-
color: #ffffff;
73-
position: relative;
74-
left: 12px;
75-
}
76-
`
77-
]
66+
.file-desc, .folder-desc {
67+
padding: 0 8px;
68+
display: inline-block;
69+
background: #87CEFF;
70+
color: #FFFFFF;
71+
position: relative;
72+
left: 12px;
73+
}
74+
` ]
7875
})
76+
7977
export class NzDemoTreeDirectoryComponent {
80-
@ViewChild('treeCom') treeCom: NzTreeComponent;
8178
dropdown: NzDropdownContextComponent;
8279
// actived node
8380
activedNode: NzTreeNode;
84-
nodes = [
85-
{
86-
title: 'parent 0',
87-
key: '100',
88-
author: 'NG ZORRO',
89-
expanded: true,
90-
children: [
91-
{ title: 'leaf 0-0', key: '1000', author: 'NG ZORRO', isLeaf: true },
92-
{ title: 'leaf 0-1', key: '1001', author: 'NG ZORRO', isLeaf: true }
93-
]
94-
},
95-
{
96-
title: 'parent 1',
97-
key: '101',
98-
author: 'NG ZORRO',
99-
children: [
100-
{ title: 'leaf 1-0', key: '1010', author: 'NG ZORRO', isLeaf: true },
101-
{ title: 'leaf 1-1', key: '1011', author: 'NG ZORRO', isLeaf: true }
102-
]
103-
}
104-
];
81+
nodes = [ {
82+
title : 'parent 0',
83+
key : '100',
84+
author : 'NG ZORRO',
85+
expanded: true,
86+
children: [
87+
{ title: 'leaf 0-0', key: '1000', author: 'NG ZORRO', isLeaf: true },
88+
{ title: 'leaf 0-1', key: '1001', author: 'NG ZORRO', isLeaf: true }
89+
]
90+
}, {
91+
title : 'parent 1',
92+
key : '101',
93+
author : 'NG ZORRO',
94+
children: [
95+
{ title: 'leaf 1-0', key: '1010', author: 'NG ZORRO', isLeaf: true },
96+
{ title: 'leaf 1-1', key: '1011', author: 'NG ZORRO', isLeaf: true }
97+
]
98+
} ];
10599

106100
openFolder(data: NzTreeNode | Required<NzFormatEmitEvent>): void {
107101
// do something if u want
108102
if (data instanceof NzTreeNode) {
109103
data.isExpanded = !data.isExpanded;
110104
} else {
111-
data.node.isExpanded = !data.node.isExpanded;
105+
const node = data.node;
106+
if (node) {
107+
node.isExpanded = !node.isExpanded;
108+
}
112109
}
113110
}
114111

@@ -125,5 +122,6 @@ export class NzDemoTreeDirectoryComponent {
125122
// do something
126123
}
127124

128-
constructor(private nzDropdownService: NzDropdownService) {}
125+
constructor(private nzDropdownService: NzDropdownService) {
126+
}
129127
}

0 commit comments

Comments
 (0)