Skip to content

Commit 28f8760

Browse files
tinayuangaotinayuangao
committed
fix(tree): fix tree demos according to feedback
1 parent 3770f57 commit 28f8760

16 files changed

+125
-98
lines changed

‎src/demo-app/connected-overlay/connected-overlay-demo.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {Directionality} from '@angular/cdk/bidi';
1212
import {
1313
HorizontalConnectionPos,
1414
Overlay,
15-
OverlayOrigin,
15+
CdkOverlayOrigin,
1616
OverlayRef,
1717
VerticalConnectionPos
1818
} from '@angular/cdk/overlay';
@@ -28,7 +28,7 @@ let itemCount = 25;
2828
encapsulation: ViewEncapsulation.None,
2929
})
3030
export class ConnectedOverlayDemo {
31-
@ViewChild(OverlayOrigin) _overlayOrigin: OverlayOrigin;
31+
@ViewChild(CdkOverlayOrigin) _overlayOrigin: CdkOverlayOrigin;
3232

3333
originX: HorizontalConnectionPos = 'start';
3434
originY: VerticalConnectionPos = 'bottom';

‎src/demo-app/tree/checklist-tree-demo/checklist-database.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,4 +98,9 @@ export class ChecklistDatabase {
9898
this.dataChange.next(this.data);
9999
}
100100
}
101+
102+
updateItem(node: TodoItemNode, name: string) {
103+
node.item = name;
104+
this.dataChange.next(this.data);
105+
}
101106
}

‎src/demo-app/tree/checklist-tree-demo/checklist-tree-demo.html

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,15 @@
55
[checked]="checklistSelection.isSelected(node)"
66
(change)="checklistSelection.toggle(node);">{{node.item}}</mat-checkbox>
77
</mat-tree-node>
8+
9+
<mat-tree-node *matTreeNodeDef="let node; when: hasNoContent" matTreeNodePadding>
10+
<button mat-icon-button disabled></button>
11+
<mat-form-field>
12+
<input matInput #itemValue placeholder="New item...">
13+
</mat-form-field>
14+
<button mat-button (click)="saveNode(node, itemValue.value)">Save</button>
15+
</mat-tree-node>
16+
817
<mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
918
<button mat-icon-button matTreeNodeToggle
1019
[attr.aria-label]="'toggle ' + node.filename">
@@ -15,14 +24,6 @@
1524
<mat-checkbox [checked]="descendantsAllSelected(node)"
1625
[indeterminate]="descendantsPartiallySelected(node)"
1726
(change)="todoItemSelectionToggle(node)">{{node.item}}</mat-checkbox>
18-
<button mat-icon-button (click)="setParent(node)"><mat-icon>add</mat-icon></button>
27+
<button mat-icon-button (click)="addNewItem(node)"><mat-icon>add</mat-icon></button>
1928
</mat-tree-node>
2029
</mat-tree>
21-
22-
23-
Selected parent: {{selectedParent ? selectedParent.item : 'No selected'}}
24-
<br>
25-
<mat-form-field>
26-
<input matInput [(ngModel)]="newItemName" placeholder="Add an item"/>
27-
</mat-form-field>
28-
<button mat-button (click)="addNode()">Add node</button>

‎src/demo-app/tree/checklist-tree-demo/checklist-tree-demo.ts

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,6 @@ export class ChecklistTreeDemo {
3232
/** Map from nested node to flattened node. This helps us to keep the same object for selection */
3333
nestedNodeMap: Map<TodoItemNode, TodoItemFlatNode> = new Map<TodoItemNode, TodoItemFlatNode>();
3434

35-
/** A selected parent node to be inserted */
36-
selectedParent: TodoItemFlatNode | null = null;
37-
38-
/** The new item's name */
39-
newItemName: string = '';
40-
4135
treeControl: FlatTreeControl<TodoItemFlatNode>;
4236

4337
treeFlattener: MatTreeFlattener<TodoItemNode, TodoItemFlatNode>;
@@ -68,11 +62,13 @@ export class ChecklistTreeDemo {
6862

6963
hasChild = (_: number, _nodeData: TodoItemFlatNode) => { return _nodeData.expandable; };
7064

65+
hasNoContent = (_: number, _nodeData: TodoItemFlatNode) => { return _nodeData.item === ''; };
66+
7167
/**
7268
* Transformer to convert nested node to flat node. Record the nodes in maps for later use.
7369
*/
7470
transformer = (node: TodoItemNode, level: number) => {
75-
let flatNode = this.nestedNodeMap.has(node)
71+
let flatNode = this.nestedNodeMap.has(node) && this.nestedNodeMap.get(node)!.item === node.item
7672
? this.nestedNodeMap.get(node)!
7773
: new TodoItemFlatNode();
7874
flatNode.item = node.item;
@@ -105,16 +101,16 @@ export class ChecklistTreeDemo {
105101
: this.checklistSelection.deselect(...descendants);
106102
}
107103

108-
/** Insert a new item with name `newItemName` to be under category `selectedParent`. */
109-
addNode() {
110-
if (this.selectedParent) {
111-
const parentNode = this.flatNodeMap.get(this.selectedParent);
112-
this.database.insertItem(parentNode!, this.newItemName);
113-
}
104+
/** Select the category so we can insert the new item. */
105+
addNewItem(node: TodoItemFlatNode) {
106+
const parentNode = this.flatNodeMap.get(node);
107+
this.database.insertItem(parentNode!, '');
108+
this.treeControl.expand(node);
114109
}
115110

116-
/** Select the category so we can insert the new item. */
117-
setParent(node: TodoItemFlatNode) {
118-
this.selectedParent = node;
111+
/** Save the node to database */
112+
saveNode(node: TodoItemFlatNode, itemValue: string) {
113+
const nestedNode = this.flatNodeMap.get(node);
114+
this.database.updateItem(nestedNode!, itemValue);
119115
}
120116
}

‎src/demo-app/tree/dynamic-tree-demo/dynamic-database.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export class DynamicDatabase {
3535

3636
/** Initial data from database */
3737
initialData(): DynamicFlatNode[] {
38-
return this.rootLevelNodes.map(name => new DynamicFlatNode(name, 1, true));
38+
return this.rootLevelNodes.map(name => new DynamicFlatNode(name, 0, true));
3939
}
4040

4141

@@ -85,7 +85,8 @@ export class DynamicDataSource {
8585
change.added.forEach((node) => this.toggleNode(node, true));
8686
}
8787
if (change.removed) {
88-
change.removed.forEach((node) => this.toggleNode(node, false));
88+
// Use reverse to remove from bottom to top
89+
change.removed.reverse().forEach((node) => this.toggleNode(node, false));
8990
}
9091
}
9192

‎src/demo-app/tree/dynamic-tree-demo/dynamic-tree-demo.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
22
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
3+
<button mat-icon-button disabled></button>
34
{{node.item}}
45
</mat-tree-node>
56
<mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>

‎src/demo-app/tree/loadmore-tree-demo/loadmore-tree-demo.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
22
<!-- Leaf node -->
33
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
4+
<button mat-icon-button disabled></button>
45
{{node.item}}
56
</mat-tree-node>
67

‎src/demo-app/tree/tree-demo.html

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<mat-expansion-panel-header>Flattened tree</mat-expansion-panel-header>
77
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
88
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
9+
<button mat-icon-button disabled></button>
910
{{node.filename}} : {{node.type}}
1011
</mat-tree-node>
1112
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
@@ -23,11 +24,12 @@
2324
<mat-expansion-panel>
2425
<mat-expansion-panel-header>Nested tree</mat-expansion-panel-header>
2526
<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl">
26-
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
27-
<li>
28-
<div>{{node.filename}}: {{node.type}}</div>
27+
<mat-nested-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
28+
<li class="mat-tree-node">
29+
<button mat-icon-button disabled></button>
30+
{{node.filename}}: {{node.type}}
2931
</li>
30-
</mat-tree-node>
32+
</mat-nested-tree-node>
3133
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
3234
<li>
3335
<div class="mat-tree-node">
@@ -51,9 +53,17 @@
5153
<mat-expansion-panel-header>CDK Flattened tree</mat-expansion-panel-header>
5254
<cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
5355
<cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding class="demo-tree-node">
54-
<a [attr.aria-label]="'toggle ' + node.filename" cdkTreeNodeToggle class="demo-tree-toggle">
55-
{{treeControl.isExpanded(node) ? '-' : '+'}}
56-
</a>
56+
<button mat-icon-button disabled></button>
57+
{{node.filename}}: {{node.type}}
58+
</cdk-tree-node>
59+
<cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
60+
class="demo-tree-node">
61+
<button mat-icon-button [attr.aria-label]="'toggle ' + node.filename"
62+
cdkTreeNodeToggle class="demo-tree-toggle">
63+
<mat-icon>
64+
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
65+
</mat-icon>
66+
</button>
5767
{{node.filename}}: {{node.type}}
5868
</cdk-tree-node>
5969
</cdk-tree>
@@ -63,11 +73,19 @@
6373
<mat-expansion-panel-header>CDK Nested tree</mat-expansion-panel-header>
6474
<cdk-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl">
6575
<cdk-nested-tree-node *cdkTreeNodeDef="let node" class="demo-tree-node">
66-
<a [attr.aria-label]="'toggle ' + node.filename" cdkTreeNodeToggle class="demo-tree-toggle">
67-
{{nestedTreeControl.isExpanded(node) ? '-' : '+'}}
68-
</a>
76+
<button mat-icon-button disabled></button>
77+
{{node.filename}}: {{node.type}}
78+
</cdk-nested-tree-node>
79+
<cdk-nested-tree-node *cdkTreeNodeDef="let node; when: hasNestedChild" class="demo-tree-node">
80+
<button mat-icon-button [attr.aria-label]="'toggle ' + node.filename"
81+
cdkTreeNodeToggle class="demo-tree-toggle">
82+
<mat-icon>
83+
{{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
84+
</mat-icon>
85+
</button>
6986
{{node.filename}}: {{node.type}}
70-
<div [class.tree-demo-invisible]="!nestedTreeControl.isExpanded(node)" class="demo-tree-nested-node">
87+
<div [class.tree-demo-invisible]="!nestedTreeControl.isExpanded(node)"
88+
class="demo-tree-nested-node">
7189
<ng-container cdkTreeNodeOutlet></ng-container>
7290
</div>
7391
</cdk-nested-tree-node>

‎src/demo-app/tree/tree-demo.scss

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,6 @@
33
display: block;
44
}
55

6-
.demo-tree-toggle {
7-
font-size: 24px;
8-
padding-right: 4px;
9-
}
10-
116
.demo-tree-nested-node {
127
padding-left: 20px;
138
}
@@ -26,13 +21,3 @@
2621
margin: 16px;
2722
}
2823
}
29-
30-
.checklist-leaf-node {
31-
padding-left: 40px;
32-
padding-right: inherit;
33-
34-
[dir='rtl'] & {
35-
padding-right: 60px;
36-
padding-left: inherit;
37-
}
38-
}

‎src/material-examples/tree-checklist/tree-checklist-example.html

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,15 @@
55
[checked]="checklistSelection.isSelected(node)"
66
(change)="checklistSelection.toggle(node);">{{node.item}}</mat-checkbox>
77
</mat-tree-node>
8+
9+
<mat-tree-node *matTreeNodeDef="let node; when: hasNoContent" matTreeNodePadding>
10+
<button mat-icon-button disabled></button>
11+
<mat-form-field>
12+
<input matInput #itemValue placeholder="New item...">
13+
</mat-form-field>
14+
<button mat-button (click)="saveNode(node, itemValue.value)">Save</button>
15+
</mat-tree-node>
16+
817
<mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
918
<button mat-icon-button matTreeNodeToggle
1019
[attr.aria-label]="'toggle ' + node.filename">
@@ -15,14 +24,6 @@
1524
<mat-checkbox [checked]="descendantsAllSelected(node)"
1625
[indeterminate]="descendantsPartiallySelected(node)"
1726
(change)="todoItemSelectionToggle(node)">{{node.item}}</mat-checkbox>
18-
<button mat-icon-button (click)="setParent(node)"><mat-icon>add</mat-icon></button>
27+
<button mat-icon-button (click)="addNewItem(node)"><mat-icon>add</mat-icon></button>
1928
</mat-tree-node>
2029
</mat-tree>
21-
22-
23-
Selected parent: {{selectedParent ? selectedParent.item : 'No selected'}}
24-
<br>
25-
<mat-form-field>
26-
<input matInput [(ngModel)]="newItemName" placeholder="Add an item"/>
27-
</mat-form-field>
28-
<button mat-button (click)="addNode()">Add node</button>

‎src/material-examples/tree-checklist/tree-checklist-example.ts

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -96,13 +96,17 @@ export class ChecklistDatabase {
9696
this.dataChange.next(this.data);
9797
}
9898
}
99+
100+
updateItem(node: TodoItemNode, name: string) {
101+
node.item = name;
102+
this.dataChange.next(this.data);
103+
}
99104
}
100105

101106
/**
102107
* @title Tree with checkboxes
103108
*/
104109
@Component({
105-
moduleId: module.id,
106110
selector: 'tree-checklist-example',
107111
templateUrl: 'tree-checklist-example.html',
108112
styleUrls: ['tree-checklist-example.css'],
@@ -151,11 +155,13 @@ export class TreeChecklistExample {
151155

152156
hasChild = (_: number, _nodeData: TodoItemFlatNode) => { return _nodeData.expandable; };
153157

158+
hasNoContent = (_: number, _nodeData: TodoItemFlatNode) => { return _nodeData.item === ''; };
159+
154160
/**
155161
* Transformer to convert nested node to flat node. Record the nodes in maps for later use.
156162
*/
157163
transformer = (node: TodoItemNode, level: number) => {
158-
let flatNode = this.nestedNodeMap.has(node)
164+
let flatNode = this.nestedNodeMap.has(node) && this.nestedNodeMap.get(node)!.item === node.item
159165
? this.nestedNodeMap.get(node)!
160166
: new TodoItemFlatNode();
161167
flatNode.item = node.item;
@@ -188,16 +194,16 @@ export class TreeChecklistExample {
188194
: this.checklistSelection.deselect(...descendants);
189195
}
190196

191-
/** Insert a new item with name `newItemName` to be under category `selectedParent`. */
192-
addNode() {
193-
if (this.selectedParent) {
194-
const parentNode = this.flatNodeMap.get(this.selectedParent);
195-
this.database.insertItem(parentNode!, this.newItemName);
196-
}
197+
/** Select the category so we can insert the new item. */
198+
addNewItem(node: TodoItemFlatNode) {
199+
const parentNode = this.flatNodeMap.get(node);
200+
this.database.insertItem(parentNode!, '');
201+
this.treeControl.expand(node);
197202
}
198203

199-
/** Select the category so we can insert the new item. */
200-
setParent(node: TodoItemFlatNode) {
201-
this.selectedParent = node;
204+
/** Save the node to database */
205+
saveNode(node: TodoItemFlatNode, itemValue: string) {
206+
const nestedNode = this.flatNodeMap.get(node);
207+
this.database.updateItem(nestedNode!, itemValue);
202208
}
203209
}

‎src/material-examples/tree-dynamic/tree-dynamic-example.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.example-tree-progress-bar {
2+
margin-left: 30px;
3+
}

‎src/material-examples/tree-dynamic/tree-dynamic-example.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
22
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
3+
<button mat-icon-button disabled></button>
34
{{node.item}}
45
</mat-tree-node>
56
<mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
@@ -10,5 +11,8 @@
1011
</mat-icon>
1112
</button>
1213
{{node.item}}
14+
<mat-progress-bar *ngIf="node.isLoading"
15+
mode="indeterminate"
16+
class="example-tree-progress-bar"></mat-progress-bar>
1317
</mat-tree-node>
1418
</mat-tree>

0 commit comments

Comments
 (0)