Skip to content

Commit 4bf578a

Browse files
tinayuangaotinayuangao
committed
fix(tree): fix tree demos according to feedback
1 parent 702d80b commit 4bf578a

17 files changed

+103
-103
lines changed

‎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/dynamic-tree-demo/dynamic-tree-demo.scss

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +0,0 @@
1-
.demo-tree-container {
2-
.tree-demo-invisible {
3-
display: none;
4-
}
5-
6-
ul, li {
7-
-webkit-margin-before: 0;
8-
-webkit-margin-after: 0;
9-
list-style-type: none;
10-
}
11-
12-
.mat-card {
13-
margin: 16px;
14-
}
15-
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export class FileFlatNode {
2929
/**
3030
* The file structure tree data in string. The data could be parsed into a Json object
3131
*/
32-
const TREE_DATA = `{"Tina":
32+
const TREE_DATA = `
3333
{
3434
"Documents": {
3535
"angular": {
@@ -64,7 +64,7 @@ const TREE_DATA = `{"Tina":
6464
"Calendar": "app",
6565
"Webstorm": "app"
6666
}
67-
}}`;
67+
}`;
6868

6969
/**
7070
* File database, it can build a tree structured Json object from string.

‎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: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@
44

55
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
66
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
7-
{{node.filename}} : {{node.type}}
7+
<button mat-icon-button disabled></button>
8+
{{node.filename}} : {{node.type}}
89
</mat-tree-node>
910

10-
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
11+
<mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
1112
<button mat-icon-button matTreeNodeToggle
1213
[attr.aria-label]="'toggle ' + node.filename">
1314
<mat-icon>
@@ -26,11 +27,12 @@
2627
<mat-card-header>Nested tree</mat-card-header>
2728

2829
<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl">
29-
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
30-
<li>
31-
<div>{{node.filename}}: {{node.type}}</div>
30+
<mat-nested-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
31+
<li class="mat-tree-node">
32+
<button mat-icon-button disabled></button>
33+
{{node.filename}}: {{node.type}}
3234
</li>
33-
</mat-tree-node>
35+
</mat-nested-tree-node>
3436

3537
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
3638
<li>

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

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,3 @@
1313
margin: 16px;
1414
}
1515
}
16-
17-
.checklist-leaf-node {
18-
padding-left: 40px;
19-
padding-right: inherit;
20-
21-
[dir='rtl'] & {
22-
padding-right: 60px;
23-
padding-left: inherit;
24-
}
25-
}

‎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)