Skip to content

Commit fa59efb

Browse files
saar-codeoasissaar-codeoasis
committed
feat(client/tree-node): added tree node wrapper component
1 parent 914b3ac commit fa59efb

File tree

5 files changed

+70
-16
lines changed

5 files changed

+70
-16
lines changed

‎example/cli/src/app/templates/templates.component.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,14 @@ import { ITreeOptions } from 'angular-tree-component';
1717
<div [class]="node.data.className + 'Loading'">Loading {{ node.data.title }}...</div>
1818
</ng-template>
1919
</tree-root>
20+
21+
<h3>treeNodeWrapper</h3>
22+
<tree-root id="tree2" [focused]="true" [nodes]="nodes2" [options]="options2">
23+
<ng-template #treeNodeWrapperTemplate let-node let-index="index">
24+
<span>hi</span>
25+
<span [class]="node.data.className" [class.title]="true">{{ node.data.title }}</span>
26+
</ng-template>
27+
</tree-root>
2028
2129
<h3>treeNodeFullTemplate</h3>
2230
<tree-root id="tree2" [focused]="true" [nodes]="nodes2">

‎lib/angular-tree-component.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { TreeNodeDropSlot } from './components/tree-node-drop-slot.component';
1717
import { TreeNodeExpanderComponent } from './components/tree-node-expander.component';
1818
import { TreeNodeChildrenComponent } from './components/tree-node-children.component';
1919
import { TreeNodeCollectionComponent } from './components/tree-node-collection.component';
20+
import { TreeNodeWrapperComponent } from './components/tree-node-wrapper.component';
2021
import { TreeViewportComponent } from './components/tree-viewport.component';
2122
import { TreeDropDirective } from './directives/tree-drop.directive';
2223
import { TreeDragDirective } from './directives/tree-drag.directive';
@@ -34,7 +35,8 @@ const exportedDirectives = [
3435
TreeNodeChildrenComponent,
3536
TreeNodeDropSlot,
3637
TreeNodeCollectionComponent,
37-
TreeViewportComponent
38+
TreeViewportComponent,
39+
TreeNodeWrapperComponent
3840
];
3941

4042
export {

‎lib/components/tree-node-wrapper.component.ts

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { Component, Input, ViewEncapsulation, TemplateRef } from '@angular/core';
2+
import { TreeNode } from '../models/tree-node.model';
3+
4+
@Component({
5+
selector: 'tree-node-wrapper',
6+
encapsulation: ViewEncapsulation.None,
7+
styles: [
8+
`.node-content-wrapper {
9+
display: inline-block;
10+
padding: 2px 5px;
11+
border-radius: 2px;
12+
transition: background-color .15s,box-shadow .15s;
13+
}`,
14+
'.node-wrapper {display: flex; align-items: flex-start;}',
15+
'.tree-node-active > .node-wrapper > .node-content-wrapper { background: #beebff }',
16+
'.tree-node-active.tree-node-focused > .node-wrapper > .node-content-wrapper { background: #beebff }',
17+
'.tree-node-focused > .node-wrapper > .node-content-wrapper { background: #e7f4f9 }',
18+
'.node-content-wrapper:hover { background: #f7fbff }',
19+
`.tree-node-active > .node-wrapper > .node-content-wrapper, .tree-node-focused > .node-content-wrapper, .node-content-wrapper:hover {
20+
box-shadow: inset 0 0 1px #999;
21+
}`,
22+
'.node-content-wrapper.is-dragging-over { background: #ddffee; box-shadow: inset 0 0 1px #999; }',
23+
'.node-content-wrapper.is-dragging-over-disabled { opacity: 0.5 }'
24+
],
25+
template: `
26+
<div *ngIf="!templates.treeNodeWrapperTemplate" class="node-wrapper" [style.padding-left]="node.getNodePadding()">
27+
<tree-node-expander [node]="node"></tree-node-expander>
28+
<div class="node-content-wrapper"
29+
(click)="node.mouseAction('click', $event)"
30+
(dblclick)="node.mouseAction('dblClick', $event)"
31+
(contextmenu)="node.mouseAction('contextMenu', $event)"
32+
(treeDrop)="node.onDrop($event)"
33+
[treeAllowDrop]="node.allowDrop"
34+
[treeDrag]="node"
35+
[treeDragEnabled]="node.allowDrag()">
36+
37+
<tree-node-content [node]="node" [index]="index" [template]="templates.treeNodeTemplate">
38+
</tree-node-content>
39+
</div>
40+
</div>
41+
<ng-container
42+
[ngTemplateOutlet]="templates.treeNodeWrapperTemplate"
43+
[ngOutletContext]="{ $implicit: node, node: node, index: index }">
44+
</ng-container>
45+
`
46+
})
47+
48+
export class TreeNodeWrapperComponent {
49+
50+
@Input() node: TreeNode;
51+
@Input() index: number;
52+
@Input() templates: TemplateRef<any>;
53+
54+
constructor() { }
55+
56+
}

‎lib/components/tree-node.component.ts

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -37,21 +37,7 @@ import { deprecatedSelector } from '../deprecated-selector';
3737
3838
<tree-node-drop-slot *ngIf="index === 0" [dropIndex]="node.index" [node]="node.parent"></tree-node-drop-slot>
3939
40-
<div class="node-wrapper" [style.padding-left]="node.getNodePadding()">
41-
<tree-node-expander [node]="node"></tree-node-expander>
42-
<div class="node-content-wrapper"
43-
(click)="node.mouseAction('click', $event)"
44-
(dblclick)="node.mouseAction('dblClick', $event)"
45-
(contextmenu)="node.mouseAction('contextMenu', $event)"
46-
(treeDrop)="node.onDrop($event)"
47-
[treeAllowDrop]="node.allowDrop"
48-
[treeDrag]="node"
49-
[treeDragEnabled]="node.allowDrag()">
50-
51-
<tree-node-content [node]="node" [index]="index" [template]="templates.treeNodeTemplate">
52-
</tree-node-content>
53-
</div>
54-
</div>
40+
<tree-node-wrapper [node]="node" [index]="index" [templates]="templates"></tree-node-wrapper>
5541
5642
<tree-node-children [node]="node" [templates]="templates"></tree-node-children>
5743
<tree-node-drop-slot [dropIndex]="node.index + 1" [node]="node.parent"></tree-node-drop-slot>

‎lib/components/tree.component.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ const pick = require('lodash/pick');
4545
[templates]="{
4646
loadingTemplate: loadingTemplate,
4747
treeNodeTemplate: treeNodeTemplate,
48+
treeNodeWrapperTemplate: treeNodeWrapperTemplate,
4849
treeNodeFullTemplate: treeNodeFullTemplate
4950
}">
5051
</tree-node-collection>
@@ -64,6 +65,7 @@ export class TreeComponent implements OnChanges {
6465

6566
@ContentChild('loadingTemplate') loadingTemplate: TemplateRef<any>;
6667
@ContentChild('treeNodeTemplate') treeNodeTemplate: TemplateRef<any>;
68+
@ContentChild('treeNodeWrapperTemplate') treeNodeWrapperTemplate: TemplateRef<any>;
6769
@ContentChild('treeNodeFullTemplate') treeNodeFullTemplate: TemplateRef<any>;
6870

6971
@ViewChild('viewport') viewportComponent: TreeViewportComponent;

0 commit comments

Comments
 (0)