Skip to content

Commit a18116a

Browse files
WwwHhhYranWwwHhhYran
committed
refactor(module:tree-view): refactor tree view properties and unit test
1 parent 0fd6e21 commit a18116a

15 files changed

+871
-144
lines changed

‎components/tree-view/demo/basic-children-accessor.ts‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -73,12 +73,6 @@ export class NzDemoTreeViewBasicChildrenAccessorComponent implements OnInit, Aft
7373
}
7474

7575
ngAfterViewInit(): void {
76-
// TODO: use `expandAll` instead, but this func exists bug in @angular/cdk ^18.2.0: https://github.com/angular/components/issues/30445
77-
// this.tree.expandAll();
78-
setTimeout(() => {
79-
this.dataSource.getData().forEach(node => {
80-
this.tree.expandDescendants(node);
81-
});
82-
});
76+
this.tree.expandAll();
8377
}
8478
}

‎components/tree-view/demo/basic-level-accessor.ts‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const TREE_DATA: TreeNode[] = [
4444
selector: 'nz-demo-tree-view-basic-level-accessor',
4545
template: `
4646
<nz-tree-view [nzDataSource]="dataSource" [nzLevelAccessor]="levelAccessor">
47-
<nz-tree-node *nzTreeNodeDef="let node" nzTreeNodePadding [nzExpandable]="node.expandable">
47+
<nz-tree-node *nzTreeNodeDef="let node" nzTreeNodePadding [nzExpandable]="false">
4848
<nz-tree-node-toggle nzTreeNodeNoopToggle></nz-tree-node-toggle>
4949
<nz-tree-node-option
5050
[nzDisabled]="node.disabled"
@@ -55,7 +55,7 @@ const TREE_DATA: TreeNode[] = [
5555
</nz-tree-node-option>
5656
</nz-tree-node>
5757
58-
<nz-tree-node *nzTreeNodeDef="let node; when: hasChild" nzTreeNodePadding [nzExpandable]="node.expandable">
58+
<nz-tree-node *nzTreeNodeDef="let node; when: hasChild" nzTreeNodePadding [nzExpandable]="true">
5959
<nz-tree-node-toggle>
6060
<nz-icon nzType="caret-down" nzTreeNodeToggleRotateIcon />
6161
</nz-tree-node-toggle>
@@ -99,10 +99,12 @@ export class NzDemoTreeViewBasicLevelAccessorComponent implements OnInit, AfterV
9999
}
100100

101101
ngAfterViewInit(): void {
102-
// TODO: use `expandAll` instead, but this func exists bug in @angular/cdk ^18.2.0: https://github.com/angular/components/issues/30445
103-
// this.tree.expandAll();
104-
setTimeout(() => {
105-
this.tree._getExpansionModel().select(...this.dataSource.getFlattenData());
106-
});
102+
/**
103+
* TODO: use `expandAll` instead, but this func exists bug for flatten data (only expand first level) in @angular/cdk ^18.2.0
104+
* https://github.com/angular/components/issues/30445
105+
* It is recommended to use nzChildrenAccessor for now.
106+
*/
107+
this.tree.expandAll();
108+
// this.tree._getExpansionModel().select(...this.dataSource.getFlattenData());
107109
}
108110
}

‎components/tree-view/demo/editable.ts‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -100,13 +100,7 @@ export class NzDemoTreeViewEditableComponent implements OnInit, AfterViewInit {
100100
}
101101

102102
ngAfterViewInit(): void {
103-
// TODO: use `expandAll` instead, but this func exists bug in @angular/cdk ^18.2.0: https://github.com/angular/components/issues/30445
104-
// this.tree.expandAll();
105-
setTimeout(() => {
106-
this.dataSource.getData().forEach(node => {
107-
this.tree.expandDescendants(node);
108-
});
109-
});
103+
this.tree.expandAll();
110104
}
111105

112106
delete(node: TreeNode): void {

‎components/tree-view/demo/line.ts‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -83,12 +83,6 @@ export class NzDemoTreeViewLineComponent implements AfterViewInit, OnInit {
8383
}
8484

8585
ngAfterViewInit(): void {
86-
// TODO: use `expandAll` instead, but this func exists bug in @angular/cdk ^18.2.0: https://github.com/angular/components/issues/30445
87-
// this.tree.expandAll();
88-
setTimeout(() => {
89-
this.dataSource.getData().forEach(node => {
90-
this.tree.expandDescendants(node);
91-
});
92-
});
86+
this.tree.expandAll();
9387
}
9488
}

‎components/tree-view/demo/virtual-scroll.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -96,10 +96,12 @@ export class NzDemoTreeViewVirtualScrollComponent implements OnInit, AfterViewIn
9696
}
9797

9898
ngAfterViewInit(): void {
99-
// TODO: use `expandAll` instead, but this func exists bug in @angular/cdk ^18.2.0: https://github.com/angular/components/issues/30445
99+
/**
100+
* TODO: use `expandAll` instead, but this func exists bug for flatten data (only expand first level) in @angular/cdk ^18.2.0
101+
* https://github.com/angular/components/issues/30445
102+
* It is recommended to use nzChildrenAccessor for now.
103+
*/
100104
// this.tree.expandAll();
101-
setTimeout(() => {
102-
this.tree._getExpansionModel().select(...this.dataSource.getFlattenData());
103-
});
105+
this.tree._getExpansionModel().select(...this.dataSource.getFlattenData());
104106
}
105107
}

‎components/tree-view/flat-data-source.ts‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,7 @@ export class NzTreeViewFlatDataSource<T, F = T, K = F> extends DataSource<F> {
4949
collectionViewer.viewChange,
5050
this._tree._getExpansionModel().changed.asObservable(),
5151
this._flattenedData.asObservable()
52-
).pipe(
53-
map(() => {
54-
return this._treeFlattener.expandFlattenedNodes(this.getFlattenData(), this._tree);
55-
})
56-
);
52+
).pipe(map(() => this._treeFlattener.expandFlattenedNodes(this.getFlattenData(), this._tree)));
5753
}
5854

5955
disconnect(): void {

‎components/tree-view/flattener.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,11 +57,9 @@ export class NzTreeFlattener<T, F, K = F> {
5757

5858
/**
5959
* Expand flattened node with current expansion status.
60-
* `tree` parameter must have the `isExpand` method
60+
* `tree` parameter must have the `isExpanded` method
6161
* The returned list may have different length.
6262
*/
63-
expandFlattenedNodes(nodes: F[], tree: TreeControl<F, K>): F[];
64-
expandFlattenedNodes(nodes: F[], tree: NzTreeView<F, K>): F[];
6563
expandFlattenedNodes(nodes: F[], tree: TreeControl<F, K> | NzTreeView<F, K>): F[] {
6664
const results: F[] = [];
6765
const currentExpand: boolean[] = [];
@@ -76,7 +74,7 @@ export class NzTreeFlattener<T, F, K = F> {
7674
results.push(node);
7775
}
7876
if (this.isExpandable(node)) {
79-
currentExpand[this.getLevel(node) + 1] = tree?.isExpanded(node) ?? false;
77+
currentExpand[this.getLevel(node) + 1] = tree.isExpanded(node);
8078
}
8179
});
8280
return results;

‎components/tree-view/indent.ts‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -141,11 +141,11 @@ export class NzTreeNodeIndentLineDirective<T> implements OnDestroy {
141141
private checkAdjacent(): void {
142142
let nodes: T[] = [];
143143
if (this.tree.treeControl) {
144-
nodes = this.tree.treeControl.dataNodes || [];
144+
nodes = this.tree.treeControl.dataNodes;
145145
} else if (this.tree.levelAccessor) {
146-
nodes = this.tree.dataNodes || [];
146+
nodes = this.tree.dataNodes;
147147
} else {
148-
nodes = flattenNestedNodes(this.tree.dataNodes, this.tree.childrenAccessor!) || [];
148+
nodes = flattenNestedNodes(this.tree.dataNodes, this.tree.childrenAccessor!);
149149
}
150150
this.checkAdjacentNodeChanged(nodes);
151151
}
@@ -165,19 +165,15 @@ export class NzTreeNodeIndentLineDirective<T> implements OnDestroy {
165165
this.isLeaf = this.treeNode.isLeaf;
166166
if (this.tree.treeControl) {
167167
this.isLast = !getNextSibling(
168-
this.tree.treeControl.dataNodes || [],
168+
this.tree.treeControl.dataNodes,
169169
this.treeNode.data,
170170
this.tree.treeControl.getLevel,
171171
index
172172
);
173173
} else if (this.tree.levelAccessor) {
174-
this.isLast = !getNextSibling(this.tree.dataNodes || [], this.treeNode.data, this.tree.levelAccessor, index);
174+
this.isLast = !getNextSibling(this.tree.dataNodes, this.treeNode.data, this.tree.levelAccessor, index);
175175
} else {
176-
this.isLast = !getNextSiblingForNestedData(
177-
this.tree.dataNodes || [],
178-
this.treeNode.data,
179-
this.tree.childrenAccessor!
180-
);
176+
this.isLast = !getNextSiblingForNestedData(this.tree.dataNodes, this.treeNode.data, this.tree.childrenAccessor!);
181177
}
182178
}
183179

‎components/tree-view/nested-data-source.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,11 @@ export class NzTreeViewNestedDataSource<T> extends DataSource<T> {
3131
}
3232

3333
connect(collectionViewer: CollectionViewer): Observable<T[]> {
34-
return merge(collectionViewer.viewChange, this._data.asObservable()).pipe(map(() => this.getData()));
34+
return merge(
35+
collectionViewer.viewChange,
36+
this._tree._getExpansionModel().changed.asObservable(),
37+
this._data.asObservable()
38+
).pipe(map(() => this.getData()));
3539
}
3640

3741
disconnect(): void {

‎components/tree-view/tree-view-based-children-accessor.spec.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,7 @@ describe('tree-view based on nzChildrenAccessor', () => {
171171

172172
it('should nzTreeNodePadding without value work', () => {
173173
const nodes = fixture.debugElement.queryAll(By.css('nz-tree-node:not([builtin])'));
174+
expect(nodes.length).toBe(8);
174175
nodes.forEach(node => {
175176
expect(window.getComputedStyle(node.nativeElement).paddingLeft).toBe(
176177
`${(node.componentInstance as NzTreeNodeComponent<TreeNode>).level * defaultIndent}px`
@@ -180,6 +181,7 @@ describe('tree-view based on nzChildrenAccessor', () => {
180181

181182
it('should nzTreeNodePadding with value work', () => {
182183
const nodes = fixture.debugElement.queryAll(By.directive(NzTreeNodePaddingDirective));
184+
expect(nodes.length).toBe(8);
183185
const [parent_1, ...otherNodes] = nodes;
184186
const parent_1_paddingDir = parent_1.injector.get(NzTreeNodePaddingDirective);
185187
parent_1_paddingDir.level = 1;
@@ -196,6 +198,7 @@ describe('tree-view based on nzChildrenAccessor', () => {
196198
it('should nzTreeNodePaddingIndent work', () => {
197199
const indent = 50;
198200
const nodes = fixture.debugElement.queryAll(By.directive(NzTreeNodePaddingDirective));
201+
expect(nodes.length).toBe(8);
199202
nodes.forEach(node => {
200203
const node_paddingDir = node.injector.get(NzTreeNodePaddingDirective);
201204
node_paddingDir.indent = indent;

0 commit comments

Comments
 (0)