Skip to content

Commit ba22be2

Browse files
Akshat55Akshat55
authored
Merge pull request #2773 from Akshat55/treeview
feat: add treeview implementation
2 parents 226f7c9 + c682012 commit ba22be2

12 files changed

+1073
-0
lines changed

‎src/icon/icon.module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import ErrorFilled16 from "@carbon/icons/es/error--filled/16";
3838
import ErrorFilled20 from "@carbon/icons/es/error--filled/20";
3939
import Fade16 from "@carbon/icons/es/fade/16";
4040
import Fade20 from "@carbon/icons/es/fade/20";
41+
import Folder16 from "@carbon/icons/es/folder/16";
4142
import Incomplete16 from "@carbon/icons/es/incomplete/16";
4243
import InformationFilled16 from "@carbon/icons/es/information--filled/16";
4344
import InformationFilled20 from "@carbon/icons/es/information--filled/20";
@@ -118,6 +119,7 @@ export class IconModule {
118119
ErrorFilled20,
119120
Fade16,
120121
Fade20,
122+
Folder16,
121123
Incomplete16,
122124
InformationFilled16,
123125
InformationFilled20,

‎src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ export * from "carbon-components-angular/tooltip";
4747
export * from "carbon-components-angular/tiles";
4848
export * from "carbon-components-angular/timepicker";
4949
export * from "carbon-components-angular/timepicker-select";
50+
export * from "carbon-components-angular/treeview";
5051
export * from "carbon-components-angular/ui-shell";
5152
export * from "carbon-components-angular/utils";
5253
export * from "carbon-components-angular/icon";

‎src/treeview/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export * from "./treeview.module";
2+
export * from "./tree-node.component";
3+
export * from "./treeview.component";
4+
export * from "./treeview.service";

‎src/treeview/ng-package.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"lib": {
3+
"entryFile": "index.ts"
4+
}
5+
}

‎src/treeview/stories/app-treeview-icons.component.ts

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
2+
import { Node } from "../tree-node.types";
3+
4+
@Component({
5+
selector: "app-treeview-icon-component",
6+
template: `
7+
<cds-tree-view
8+
label="Tree view"
9+
style="width: 18rem; display: block;"
10+
[tree]="tree">
11+
</cds-tree-view>
12+
13+
<ng-template #document>
14+
<svg cdsIcon="document" class="cds--tree-node__icon" size="16"></svg>
15+
</ng-template>
16+
`
17+
})
18+
export class IconTreeviewDemoComponent implements AfterViewInit {
19+
tree: Node[] = [];
20+
21+
@ViewChild("document") documentIcon: TemplateRef<any>;
22+
23+
ngAfterViewInit() {
24+
// Wait for the view child to be picked up
25+
this.tree = [
26+
{
27+
id: "1",
28+
value: "Artificial intelligence",
29+
label: "Artificial intelligence",
30+
icon: this.documentIcon
31+
},
32+
{
33+
id: "2",
34+
value: "Blockchain",
35+
label: "Blockchain",
36+
icon: this.documentIcon
37+
},
38+
{
39+
id: "3",
40+
value: "Business automation",
41+
label: "Business automation",
42+
children: [
43+
{
44+
id: "3-1",
45+
value: "Business process automation",
46+
label: "Business process automation",
47+
icon: this.documentIcon
48+
},
49+
{
50+
id: "3-2",
51+
value: "Business process mapping",
52+
label: "Business process mapping",
53+
icon: this.documentIcon
54+
}
55+
],
56+
icon: "folder"
57+
},
58+
{
59+
id: "4",
60+
value: "Business operations",
61+
label: "Business operations",
62+
icon: this.documentIcon
63+
},
64+
{
65+
id: "5",
66+
value: "Cloud computing",
67+
label: "Cloud computing",
68+
expanded: true,
69+
children: [
70+
{
71+
id: "5-1",
72+
value: "Containers",
73+
label: "Containers",
74+
icon: this.documentIcon
75+
},
76+
{
77+
id: "5-2",
78+
value: "Databases",
79+
label: "Databases",
80+
icon: this.documentIcon
81+
},
82+
{
83+
id: "5-3",
84+
value: "DevOps",
85+
label: "DevOps",
86+
expanded: true,
87+
children: [
88+
{
89+
id: "5-4",
90+
value: "Solutions",
91+
label: "Solutions",
92+
icon: this.documentIcon
93+
},
94+
{
95+
id: "5-5",
96+
value: "Case studies",
97+
label: "Case studies",
98+
expanded: true,
99+
children: [
100+
{
101+
id: "5-6",
102+
value: "Resources",
103+
label: "Resources",
104+
icon: this.documentIcon
105+
}
106+
],
107+
icon: "folder"
108+
}
109+
],
110+
icon: "folder"
111+
}
112+
],
113+
icon: "folder"
114+
},
115+
{
116+
id: "6",
117+
value: "Data & Analytics",
118+
label: "Data & Analytics",
119+
children: [
120+
{
121+
id: "6-1",
122+
value: "Big data",
123+
label: "Big data",
124+
icon: this.documentIcon
125+
},
126+
{
127+
id: "6-2",
128+
value: "Business intelligence",
129+
label: "Business intelligence",
130+
icon: this.documentIcon
131+
}
132+
],
133+
icon: "folder"
134+
},
135+
{
136+
id: "7",
137+
value: "IT infrastructure",
138+
label: "IT infrastructure",
139+
expanded: true,
140+
disabled: true,
141+
children: [
142+
{
143+
id: "7-1",
144+
value: "Data storage",
145+
label: "Data storage",
146+
icon: this.documentIcon
147+
},
148+
{
149+
id: "7-2",
150+
value: "Enterprise servers",
151+
label: "Enterprise servers",
152+
icon: this.documentIcon
153+
},
154+
{
155+
id: "8",
156+
value: "Hybrid cloud infrastructure",
157+
label: "Hybrid cloud infrastructure",
158+
expanded: true,
159+
children: [
160+
{
161+
id: "8-1",
162+
value: "Insights",
163+
label: "Insights",
164+
icon: this.documentIcon
165+
},
166+
{
167+
id: "8-2",
168+
value: "Benefits",
169+
label: "Benefits",
170+
icon: this.documentIcon
171+
}
172+
],
173+
icon: "folder"
174+
}
175+
],
176+
icon: "folder"
177+
}
178+
];
179+
}
180+
}

0 commit comments

Comments
 (0)