Skip to content

Commit c073433

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

19 files changed

+610
-2
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

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
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+
expandNode(id: string): void,
20+
collapseNode(id: string): void,
21+
toggleNode(id: string): void,
22+
selectNode(id: string): void,
23+
updateNodeText(id: string, value: string): void,
24+
updateNode(id: string, value: any): void,
25+
deleteNode(nodePath: string[]): void,
26+
addNode(data: any, parentPath?: string[]): void
27+
}
28+
29+
// Item interfaces
30+
export interface ITreeNode {
31+
id: string,
32+
depth: number,
33+
fullPath: string[],
34+
children?: ITreeNode[]
35+
}
36+
37+
export interface ITreeRoot {
38+
}
39+
40+
export interface ITreeBranch extends ITreeNode {
41+
children: ITreeNode[],
42+
childKey: string
43+
}
44+
45+
// Events
46+
export interface ITreeNodeSelectionEvent extends IBaseCancelableBrowserEventArgs {
47+
nodeId: string;
48+
}
49+
50+
export interface ITreeNodeEditingEvent extends IBaseCancelableBrowserEventArgs {
51+
nodeId: string;
52+
value: string;
53+
}
54+
55+
export interface ITreeNodeEditedEvent extends IBaseEventArgs {
56+
nodeId: string;
57+
value: any;
58+
}
59+
60+
export interface ITreeNodeTogglingEventArgs extends IBaseEventArgs, IBaseCancelableBrowserEventArgs {
61+
nodeId: string;
62+
}
63+
64+
export interface ITreeNodeToggledEventArgs extends IBaseEventArgs {
65+
nodeId: string;
66+
}
67+
68+
// Enums
69+
export enum IGX_TREE_SELECTION_TYPE {
70+
Non = "Non",
71+
BiState = "BiState",
72+
Cascading = "Cascading"
73+
}
74+
75+
// Token
76+
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

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<igx-expansion-panel>
2+
<igx-expansion-panel-header class="igx-node__header" [iconPosition]="'left'" (dblclick)="setEditMode()" (onInteraction)="toggle($event)">
3+
<igx-expansion-panel-icon>
4+
<ng-container *ngTemplateOutlet="expandIndicatorTemplate, context: templateContext">
5+
</ng-container>
6+
<ng-container *ngTemplateOutlet="selectMarkerTemplate, context: templateContext">
7+
</ng-container>
8+
</igx-expansion-panel-icon>
9+
<igx-expansion-panel-title>
10+
<ng-container *ngTemplateOutlet="headerTemplate, context: templateContext">
11+
</ng-container>
12+
</igx-expansion-panel-title>
13+
14+
</igx-expansion-panel-header>
15+
<igx-expansion-panel-body>
16+
<igx-tree-node *ngFor="let item of data[childKey]" [id]="id + '-' + item[valueKey]" [data]="item"
17+
[depth]="depth + 1" [parentPath]="fullPath" [nodeTemplate]="nodeTemplate"
18+
[nodeEditTemplate]="nodeEditTemplate" [selectMarker]="selectMarker" [expandIndicator]="expandIndicator">
19+
</igx-tree-node>
20+
</igx-expansion-panel-body>
21+
</igx-expansion-panel>
22+
23+
24+
<ng-template #defaultIndicator let-item>
25+
<igx-icon>
26+
{{ expanded ? "expand_less" : "expand_more" }}
27+
</igx-icon>
28+
</ng-template>
29+
30+
<ng-template #defaultSelect let-item>
31+
<igx-checkbox [checked]="selected" [readonly]="true">
32+
</igx-checkbox>
33+
</ng-template>
34+
35+
<ng-template #defaultTemplate let-item>
36+
{{ item.data[textKey] }} FAF
37+
</ng-template>
38+
39+
<ng-template #defaultEdit let-item>
40+
<igx-input-group>
41+
<input igxInput [(ngModel)]="item.data[textKey]" >
42+
</igx-input-group>
43+
</ng-template>

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

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
:host {
2+
display: flex;
3+
flex-direction: column;
4+
padding-left: 10px;
5+
}
6+
7+
.igx-node__header {
8+
user-select: none;
9+
}

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

+160
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
import {
2+
Component, OnInit,
3+
OnDestroy, ChangeDetectionStrategy, Input, Inject, ViewChild, TemplateRef, AfterViewInit, forwardRef, HostListener
4+
} from '@angular/core';
5+
import { IgxSelectionAPIService } from '../../core/selection';
6+
import { IExpansionPanelCancelableEventArgs } from '../../expansion-panel/expansion-panel.common';
7+
import { IExpansionPanelEventArgs, IgxExpansionPanelComponent } from '../../expansion-panel/public_api';
8+
import { IGX_TREE_COMPONENT, ITreeComponent, ITreeNode } from '../common';
9+
import { IgxTreeExpandIndicatorDirective, IgxTreeNodeDirective, IgxTreeNodeEditingDirective, IgxTreeSelectMarkerDirective } from '../tree.component';
10+
import { IgxTreeService } from '../tree.service';
11+
/**
12+
*
13+
* The tree node component represents a child node of the tree component or another tree node.
14+
* Usage:
15+
*
16+
* ```html
17+
* <tree [data]="data" [titleDataKey]="'Title'"></tree>
18+
* ```
19+
*/
20+
@Component({
21+
selector: "igx-tree-node",
22+
templateUrl: "tree-node.component.html",
23+
styleUrls: ["tree-node.component.scss"]
24+
})
25+
export class IgxTreeNodeComponent implements ITreeNode, OnInit, AfterViewInit, OnDestroy {
26+
27+
public inEdit: boolean = false;
28+
constructor(@Inject(IGX_TREE_COMPONENT) public tree: ITreeComponent, private selectionService: IgxSelectionAPIService, private treeService: IgxTreeService) { }
29+
30+
@Input()
31+
public parentPath: string;
32+
33+
@Input()
34+
public id: string;
35+
36+
@Input()
37+
public depth: number;
38+
39+
@Input()
40+
public data: any;
41+
42+
@Input()
43+
public nodeTemplate: TemplateRef<any>;
44+
45+
@Input()
46+
public nodeEditTemplate: TemplateRef<any>;
47+
48+
@Input()
49+
public selectMarker: TemplateRef<any>;
50+
51+
@Input()
52+
public expandIndicator: TemplateRef<any>;
53+
54+
@ViewChild(IgxExpansionPanelComponent, { read: IgxExpansionPanelComponent })
55+
public expansionPanel: IgxExpansionPanelComponent;
56+
57+
@ViewChild('defaultTemplate', { read: TemplateRef, static: true })
58+
private _defaultNodeTemplate: TemplateRef<any>;
59+
60+
public get nodeTemplateRef(): TemplateRef<any> {
61+
return this.nodeTemplate ? this.nodeTemplate : this._defaultNodeTemplate
62+
}
63+
64+
@ViewChild('defaultEdit', { read: TemplateRef, static: true })
65+
private _defaultNodeEdit: TemplateRef<any>;
66+
67+
public get nodeEditTemplateRef(): TemplateRef<any> {
68+
return this.nodeEditTemplate ? this.nodeEditTemplate : this._defaultNodeEdit
69+
}
70+
@ViewChild('defaultSelect', { read: TemplateRef, static: true })
71+
private _defaultSelectMarker: TemplateRef<any>;
72+
73+
public get selectMarkerTemplate(): TemplateRef<any> {
74+
return this.selectMarker ? this.selectMarker : this._defaultSelectMarker
75+
}
76+
77+
@ViewChild('defaultIndicator', { read: TemplateRef, static: true })
78+
private _defaultExpandIndicatorTemplate: TemplateRef<any>;
79+
80+
public get expandIndicatorTemplate(): TemplateRef<any> {
81+
return this.expandIndicator ? this.expandIndicator : this._defaultExpandIndicatorTemplate
82+
}
83+
84+
public get headerTemplate(): TemplateRef<any> {
85+
return this.inEdit ? this.nodeEditTemplateRef : this.nodeTemplate
86+
}
87+
88+
public get selected(): boolean {
89+
return this.selectionService.get(this.tree.id).has(this.id);
90+
}
91+
92+
@HostListener('keypress.enter')
93+
public exitEditMode() {
94+
if (this.inEdit) {
95+
this.inEdit = false;
96+
}
97+
}
98+
99+
public setEditMode() {
100+
console.log("Double click");
101+
this.inEdit = true;
102+
}
103+
104+
public toggle(event?: IExpansionPanelCancelableEventArgs): void {
105+
if (event.event) {
106+
if (event.event.type === "keydown" && (event.event as KeyboardEvent).code === "Enter") {
107+
this.exitEditMode()
108+
}
109+
const targetContainer = (event.event.target as HTMLElement).parentElement;
110+
const panelIconContainer = this.expansionPanel.header.iconRef.nativeElement;
111+
if (targetContainer !== panelIconContainer) {
112+
event.cancel = true;
113+
return;
114+
}
115+
}
116+
this.tree.toggleNode(this.id);
117+
}
118+
119+
public get expanded(): boolean {
120+
return this.treeService.isExpanded(this.id);
121+
}
122+
123+
public get templateContext(): any {
124+
return {
125+
$implicit: {
126+
data: this.data,
127+
id: this.id,
128+
expanded: this.expanded,
129+
selected: this.selected,
130+
parentPath: this.parentPath,
131+
fullPath: this.fullPath
132+
}
133+
}
134+
}
135+
136+
public get valueKey(): string {
137+
return this.tree.valueKey;
138+
}
139+
140+
public get textKey(): string {
141+
return this.tree.textKey
142+
}
143+
144+
public get childKey(): string {
145+
return this.tree.childKey
146+
}
147+
148+
public get fullPath(): string[] {
149+
return [...this.parentPath, this.data[this.valueKey]];
150+
}
151+
152+
ngOnInit() {
153+
console.log(this.tree);
154+
}
155+
156+
ngAfterViewInit() {
157+
}
158+
159+
ngOnDestroy() { }
160+
}

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

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div class="tree__root">
2+
<igx-tree-node *ngFor="let item of dataSource"
3+
[id]="id + '-' + item[valueKey]"
4+
[data]="item"
5+
[depth]="0"
6+
[parentPath]="[]"
7+
[nodeTemplate]="nodeTemplate"
8+
[nodeEditTemplate]="nodeEditTemplate"
9+
[selectMarker]="selectMarker"
10+
[expandIndicator]="expandIndicator"
11+
>
12+
</igx-tree-node>
13+
</div>

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

Whitespace-only changes.

0 commit comments

Comments
 (0)