Skip to content

Commit 5641313

Browse files
ViktorSlavovViktorSlavov
committed
feat(tree): add files, create structure, add sample #7475 
1 parent 0921a1b commit 5641313

17 files changed

+506
-1
lines changed

Diff for: ‎projects/igniteui-angular/src/lib/tree/README.md

Whitespace-only changes.

Diff for: ‎projects/igniteui-angular/src/lib/tree/common.ts

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { EventEmitter, InjectionToken, TemplateRef } from '@angular/core';
2+
import { IBaseCancelableBrowserEventArgs, IBaseCancelableEventArgs, IBaseEventArgs } from '../core/utils';
3+
4+
// Component interfaces
5+
6+
export interface ITreeComponent {
7+
id: string,
8+
nodeTemplate: TemplateRef<any>,
9+
nodeEditTemplate: TemplateRef<any>,
10+
selectMarker: TemplateRef<any>,
11+
expandIndicator: TemplateRef<any>,
12+
valueKey: string,
13+
textKey: string,
14+
childKey: string,
15+
nodeEdited: EventEmitter<ITreeNodeEditedEvent>,
16+
nodeEditing: EventEmitter<ITreeNodeEditingEvent>
17+
nodeExpanding: EventEmitter<ITreeNodeTogglingEventArgs>,
18+
nodeExpanded: EventEmitter<ITreeNodeToggledEventArgs>,
19+
selectNode(id: string): void,
20+
updateNodeText(id: string, value: string): void,
21+
updateNode(id: string, value: any): void,
22+
deleteNode(id: string): void,
23+
addNode(data: any, parentPath?: string[]): void
24+
}
25+
26+
// Item interfaces
27+
export interface ITreeNode {
28+
id: string,
29+
depth: number,
30+
fullPath: string[],
31+
children?: ITreeNode[]
32+
}
33+
34+
export interface ITreeRoot {
35+
}
36+
37+
export interface ITreeBranch extends ITreeNode {
38+
children: ITreeNode[],
39+
childKey: string
40+
}
41+
42+
// Events
43+
export interface ITreeNodeSelectionEvent extends IBaseCancelableBrowserEventArgs {
44+
nodeId: string;
45+
}
46+
47+
export interface ITreeNodeEditingEvent extends IBaseCancelableBrowserEventArgs {
48+
nodeId: string;
49+
value: string;
50+
}
51+
52+
export interface ITreeNodeEditedEvent extends IBaseEventArgs {
53+
nodeId: string;
54+
value: any;
55+
}
56+
57+
export interface ITreeNodeTogglingEventArgs extends IBaseEventArgs, IBaseCancelableBrowserEventArgs {
58+
nodeId: string;
59+
}
60+
61+
export interface ITreeNodeToggledEventArgs extends IBaseEventArgs {
62+
nodeId: string;
63+
}
64+
65+
// Enums
66+
export enum IGX_TREE_SELECTION_TYPE {
67+
Non = "Non",
68+
BiState = "BiState",
69+
Cascading = "Cascading"
70+
}
71+
72+
// Token
73+
export const IGX_TREE_COMPONENT = new InjectionToken<ITreeComponent>('IgxComboComponentToken');

Diff for: ‎projects/igniteui-angular/src/lib/tree/public_api.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export * from './tree.component';
2+
export * from './tree.service';
3+
export * from './tree-node/tree-node.component';
4+
export * from './common';

Diff for: ‎projects/igniteui-angular/src/lib/tree/tree-node/tree-node.component.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<div class="igx-node__header">
2+
<ng-container *ngTemplateOutlet="selectMarkerTempalte, context: templateContext">
3+
</ng-container>
4+
<ng-container *ngTemplateOutlet="selectMarkerTempalte, context: templateContext">
5+
6+
</ng-container>
7+
<div class="igx-node__value">
8+
<ng-container *ngTemplateOutlet="headerTemplate, context: templateContext">
9+
</ng-container>
10+
</div>
11+
</div>
12+
<ng-container *ngIf="this.expanded">
13+
<igx-tree-node *ngFor="let item of data[childKey]"
14+
[id]="id + '-' + item[valueKey]"
15+
[data]="item"
16+
[depth]="depth + 1"
17+
>
18+
</igx-tree-node>
19+
</ng-container>
20+

Diff for: ‎projects/igniteui-angular/src/lib/tree/tree-node/tree-node.component.scss

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
:host {
2+
display: flex;
3+
flex-direction: column;
4+
}

Diff for: ‎projects/igniteui-angular/src/lib/tree/tree-node/tree-node.component.ts

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import {
2+
Component, OnInit,
3+
OnDestroy, ChangeDetectionStrategy, Input, Inject, ViewChild, TemplateRef
4+
} from '@angular/core';
5+
import { IgxSelectionAPIService } from '../../core/selection';
6+
import { IGX_TREE_COMPONENT, ITreeComponent, ITreeNode } from '../common';
7+
import { IgxTreeExpandIndicatorDirective, IgxTreeNodeDirective, IgxTreeSelectMarkerDirective } from '../tree.component';
8+
import { IgxTreeService } from '../tree.service';
9+
/**
10+
*
11+
* The tree node component represents a child node of the tree component or another tree node.
12+
* Usage:
13+
*
14+
* ```html
15+
* <tree [data]="data" [titleDataKey]="'Title'"></tree>
16+
* ```
17+
*/
18+
@Component({
19+
selector: "igx-tree-node",
20+
templateUrl: "tree-node.component.html",
21+
styleUrls: ["tree-node.component.scss"],
22+
changeDetection: ChangeDetectionStrategy.OnPush,
23+
})
24+
export class IgxTreeNodeComponent implements ITreeNode, OnInit, OnDestroy {
25+
constructor(@Inject(IGX_TREE_COMPONENT) public tree: ITreeComponent, private selectionService: IgxSelectionAPIService, private treeService: IgxTreeService) { }
26+
27+
@Input()
28+
private _parentPath: string;
29+
30+
@Input()
31+
public id: string;
32+
33+
@Input()
34+
public depth: number;
35+
36+
@Input()
37+
public data: any;
38+
39+
public nodeTemplate: TemplateRef<any>;
40+
41+
public nodeEditTemplate: TemplateRef<any>;
42+
43+
public selectMarker: TemplateRef<any>;
44+
45+
public expandIndicator: TemplateRef<any>;
46+
47+
@ViewChild(IgxTreeNodeDirective, { read: TemplateRef })
48+
private _defaultNodeTemplate: TemplateRef<any>;
49+
50+
public get nodeTemplateRef(): TemplateRef<any> {
51+
return this.nodeTemplate || this._defaultNodeTemplate
52+
}
53+
54+
@ViewChild(IgxTreeExpandIndicatorDirective, { read: TemplateRef })
55+
private _defaultNodeEdit: TemplateRef<any>;
56+
57+
public get nodeEditTemplateRef(): TemplateRef<any> {
58+
return this.nodeEditTemplate || this._defaultNodeEdit
59+
}
60+
@ViewChild(IgxTreeSelectMarkerDirective, { read: TemplateRef })
61+
private _defaultSelectMarker: TemplateRef<any>;
62+
63+
public get selectMarkerTemplate(): TemplateRef<any> {
64+
return this.selectMarker || this._defaultSelectMarker
65+
}
66+
67+
@ViewChild(IgxTreeExpandIndicatorDirective, { read: TemplateRef })
68+
private _defaultExpandIndicatorTemplate: TemplateRef<any>;
69+
70+
public get expandIndicatorTemplate(): TemplateRef<any> {
71+
return this.expandIndicator || this._defaultExpandIndicatorTemplate
72+
}
73+
74+
public get selected(): boolean {
75+
return this.selectionService.get(this.tree.id).has(this.id);
76+
}
77+
78+
public get expanded(): boolean {
79+
return this.treeService.isExpanded(this.id);
80+
}
81+
82+
public get templateContext(): any {
83+
return {
84+
$implicit: {
85+
data: this.data,
86+
id: this.id,
87+
expanded: this.expanded,
88+
selected: this.selected
89+
}
90+
}
91+
}
92+
93+
public get valueKey(): string {
94+
return this.tree.valueKey;
95+
}
96+
97+
public get textKey(): string {
98+
return this.tree.textKey
99+
}
100+
101+
public get childKey(): string {
102+
return this.tree.childKey
103+
}
104+
105+
public get fullPath(): string[] {
106+
return [...this._parentPath, this.id];
107+
}
108+
109+
ngOnInit() {
110+
console.log(this.tree);
111+
}
112+
113+
ngAfterViewInit() {
114+
this.nodeEditTemplate = this.tree.nodeEditTemplate;
115+
this.nodeTemplate = this.tree.nodeTemplate;
116+
this.selectMarker = this.tree.selectMarker;
117+
this.expandIndicator = this.tree.expandIndicator;
118+
}
119+
120+
ngOnDestroy() { }
121+
}

Diff for: ‎projects/igniteui-angular/src/lib/tree/tree.component.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<div class="tree__root">
2+
<igx-tree-node *ngFor="let item of items"
3+
[id]="id + '-' + item[valueKey]"
4+
[data]="item"
5+
[depth]="0"
6+
>
7+
</igx-tree-node>
8+
</div>
9+
<ng-template igxTreeExpandIndicator let-item>
10+
<igx-icon>
11+
isNodeExpanded(item.id) ?? "expand_less" : "expand_more"
12+
</igx-icon>
13+
</ng-template>
14+
15+
<ng-template igxTreeSelectMarker let-item>
16+
<igx-checkbox [checked]="isSelected(item.id)" [readonly]="true">
17+
</igx-checkbox>
18+
</ng-template>
19+
20+
<ng-template igxTreeNode let-item>
21+
{{ item.data[valueKey] }}
22+
</ng-template>
23+
24+
<ng-template igxTreeNodeEdit let-item>
25+
<igx-input-group>
26+
<input igxInput [ngModel]="item.data">
27+
</igx-input-group>
28+
</ng-template>

Diff for: ‎projects/igniteui-angular/src/lib/tree/tree.component.scss

Whitespace-only changes.

0 commit comments

Comments
 (0)