Skip to content

Commit c57ff04

Browse files
btecubtecu
committed
Migrate to Glimmer components
1 parent 0d09e66 commit c57ff04

21 files changed

+305
-363
lines changed

‎addon/components/x-tree-branch.hbs‎

Lines changed: 39 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,40 @@
1-
{{#each @model as |child|}}
2-
{{#if child.isVisible}}
3-
{{#if (has-block)}}
4-
<XTreeChildren
5-
@checkable={{@checkable}}
6-
@recursiveCheck={{@recursiveCheck}}
7-
@updateCheckbox={{@updateCheckbox}}
8-
@chosenId={{@chosenId}}
9-
@onCheck={{@onCheck}}
10-
@onContextMenu={{@onContextMenu}}
11-
@onSelect={{@onSelect}}
12-
@onHover={{@onHover}}
13-
@onHoverOut={{@onHoverOut}}
14-
@model={{child}}
15-
@expandedIcon={{@expandedIcon}}
16-
@collapsedIcon={{@collapsedIcon}}
17-
as |node|
18-
>
19-
{{yield node}}
20-
</XTreeChildren>
21-
{{else}}
22-
<XTreeChildren
23-
@model={{child}}
24-
@checkable={{@checkable}}
25-
@recursiveCheck={{@recursiveCheck}}
26-
@updateCheckbox={{@updateCheckbox}}
27-
@chosenId={{@chosenId}}
28-
@onCheck={{@onCheck}}
29-
@onContextMenu={{@onContextMenu}}
30-
@onSelect={{@onSelect}}
31-
@onHover={{@onHover}}
32-
@onHoverOut={{@onHoverOut}}
33-
@expandedIcon={{@expandedIcon}}
34-
@collapsedIcon={{@collapsedIcon}}
35-
/>
1+
<ul class="tree-branch">
2+
{{#each @model as |child|}}
3+
{{#if child.isVisible}}
4+
{{#if (has-block)}}
5+
<XTreeChildren
6+
@checkable={{@checkable}}
7+
@recursiveCheck={{@recursiveCheck}}
8+
@updateCheckbox={{@updateCheckbox}}
9+
@chosenId={{@chosenId}}
10+
@onCheck={{@onCheck}}
11+
@onContextMenu={{@onContextMenu}}
12+
@onSelect={{@onSelect}}
13+
@onHover={{@onHover}}
14+
@onHoverOut={{@onHoverOut}}
15+
@model={{child}}
16+
@expandedIcon={{@expandedIcon}}
17+
@collapsedIcon={{@collapsedIcon}}
18+
as |node|
19+
>
20+
{{yield node}}
21+
</XTreeChildren>
22+
{{else}}
23+
<XTreeChildren
24+
@model={{child}}
25+
@checkable={{@checkable}}
26+
@recursiveCheck={{@recursiveCheck}}
27+
@updateCheckbox={{@updateCheckbox}}
28+
@chosenId={{@chosenId}}
29+
@onCheck={{@onCheck}}
30+
@onContextMenu={{@onContextMenu}}
31+
@onSelect={{@onSelect}}
32+
@onHover={{@onHover}}
33+
@onHoverOut={{@onHoverOut}}
34+
@expandedIcon={{@expandedIcon}}
35+
@collapsedIcon={{@collapsedIcon}}
36+
/>
37+
{{/if}}
3638
{{/if}}
37-
{{/if}}
38-
{{/each}}
39+
{{/each}}
40+
</ul>

‎addon/components/x-tree-branch.js‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎addon/components/x-tree-checkbox.hbs‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
<span role="button" onclick={{action @toggleCheck}}>
2-
<Input
3-
@type="checkbox"
4-
@checked={{@model.isChecked}}
5-
disabled={{@model.isDisabled}}
6-
indeterminate={{@model.isIndeterminate}}
7-
{{on "change" (action "noop")}}
8-
/>
1+
<span class="tree-checkbox">
2+
<span role="button" {{on "click" @toggleCheck}}>
3+
<Input
4+
aria-label="Checkbox for {{@model.name}}"
5+
disabled={{@model.isDisabled}}
6+
indeterminate={{@model.isIndeterminate}}
7+
@checked={{@model.isChecked}}
8+
@type="checkbox"
9+
/>
10+
</span>
911
</span>

‎addon/components/x-tree-checkbox.js‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎addon/components/x-tree-children.hbs‎

Lines changed: 47 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,48 @@
1-
{{#if (has-block)}}
2-
<XTreeNode
3-
@checkable={{@checkable}}
4-
@recursiveCheck={{@recursiveCheck}}
5-
@updateCheckbox={{action "updateCheckbox"}}
6-
@chosenId={{@chosenId}}
7-
@onCheck={{@onCheck}}
8-
@onContextMenu={{@onContextMenu}}
9-
@onSelect={{@onSelect}}
10-
@onHover={{@onHover}}
11-
@onHoverOut={{@onHoverOut}}
12-
@model={{@model}}
13-
@expandedIcon={{@expandedIcon}}
14-
@collapsedIcon={{@collapsedIcon}}
15-
as |node|
16-
>
17-
{{yield node}}
18-
</XTreeNode>
19-
20-
{{#if @model.isExpanded}}
21-
<XTreeBranch
1+
<li class="tree-node">
2+
{{#if (has-block)}}
3+
<XTreeNode
224
@checkable={{@checkable}}
235
@recursiveCheck={{@recursiveCheck}}
24-
@updateCheckbox={{action "updateCheckbox"}}
6+
@updateCheckbox={{this.updateCheckbox}}
257
@chosenId={{@chosenId}}
268
@onCheck={{@onCheck}}
279
@onContextMenu={{@onContextMenu}}
2810
@onSelect={{@onSelect}}
2911
@onHover={{@onHover}}
3012
@onHoverOut={{@onHoverOut}}
31-
@model={{@model.children}}
13+
@model={{@model}}
3214
@expandedIcon={{@expandedIcon}}
3315
@collapsedIcon={{@collapsedIcon}}
3416
as |node|
3517
>
3618
{{yield node}}
37-
</XTreeBranch>
38-
{{/if}}
39-
{{else}}
40-
<XTreeNode
41-
@model={{@model}}
42-
@checkable={{@checkable}}
43-
@recursiveCheck={{@recursiveCheck}}
44-
@updateCheckbox={{action "updateCheckbox"}}
45-
@chosenId={{@chosenId}}
46-
@onCheck={{@onCheck}}
47-
@onContextMenu={{@onContextMenu}}
48-
@onSelect={{@onSelect}}
49-
@onHover={{@onHover}}
50-
@onHoverOut={{@onHoverOut}}
51-
@expandedIcon={{@expandedIcon}}
52-
@collapsedIcon={{@collapsedIcon}}
53-
/>
54-
{{#if @model.isExpanded}}
55-
<XTreeBranch
56-
@model={{@model.children}}
19+
</XTreeNode>
20+
21+
{{#if @model.isExpanded}}
22+
<XTreeBranch
23+
@checkable={{@checkable}}
24+
@recursiveCheck={{@recursiveCheck}}
25+
@updateCheckbox={{this.updateCheckbox}}
26+
@chosenId={{@chosenId}}
27+
@onCheck={{@onCheck}}
28+
@onContextMenu={{@onContextMenu}}
29+
@onSelect={{@onSelect}}
30+
@onHover={{@onHover}}
31+
@onHoverOut={{@onHoverOut}}
32+
@model={{@model.children}}
33+
@expandedIcon={{@expandedIcon}}
34+
@collapsedIcon={{@collapsedIcon}}
35+
as |node|
36+
>
37+
{{yield node}}
38+
</XTreeBranch>
39+
{{/if}}
40+
{{else}}
41+
<XTreeNode
42+
@model={{@model}}
5743
@checkable={{@checkable}}
5844
@recursiveCheck={{@recursiveCheck}}
59-
@updateCheckbox={{action "updateCheckbox"}}
45+
@updateCheckbox={{this.updateCheckbox}}
6046
@chosenId={{@chosenId}}
6147
@onCheck={{@onCheck}}
6248
@onContextMenu={{@onContextMenu}}
@@ -66,5 +52,21 @@
6652
@expandedIcon={{@expandedIcon}}
6753
@collapsedIcon={{@collapsedIcon}}
6854
/>
55+
{{#if @model.isExpanded}}
56+
<XTreeBranch
57+
@model={{@model.children}}
58+
@checkable={{@checkable}}
59+
@recursiveCheck={{@recursiveCheck}}
60+
@updateCheckbox={{this.updateCheckbox}}
61+
@chosenId={{@chosenId}}
62+
@onCheck={{@onCheck}}
63+
@onContextMenu={{@onContextMenu}}
64+
@onSelect={{@onSelect}}
65+
@onHover={{@onHover}}
66+
@onHoverOut={{@onHoverOut}}
67+
@expandedIcon={{@expandedIcon}}
68+
@collapsedIcon={{@collapsedIcon}}
69+
/>
70+
{{/if}}
6971
{{/if}}
70-
{{/if}}
72+
</li>

‎addon/components/x-tree-children.js‎

Lines changed: 20 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,28 @@
1-
import Component from '@ember/component';
2-
import { setProperties } from '@ember/object';
1+
import Component from '@glimmer/component';
2+
import { action, setProperties } from '@ember/object';
33

4-
export default Component.extend({
5-
tagName: 'li',
6-
classNames: ['tree-node'],
4+
export default class TreeChildrenComponent extends Component {
5+
@action
6+
updateCheckbox() {
7+
if (this.args.recursiveCheck) {
8+
let { children } = this.args.model;
79

8-
actions: {
9-
updateCheckbox() {
10-
if (this.recursiveCheck) {
11-
let { children } = this.model;
10+
if (children.length) {
11+
let isChecked = false;
12+
let isIndeterminate = false;
1213

13-
if (children.length) {
14-
let isChecked = false;
15-
let isIndeterminate = false;
16-
17-
if (children.every(x => x.isChecked)) {
18-
isChecked = true;
19-
} else if (children.some(x => x.isChecked || x.isIndeterminate)) {
20-
isIndeterminate = true;
21-
}
22-
23-
setProperties(this.model, { isChecked, isIndeterminate });
14+
if (children.every(x => x.isChecked)) {
15+
isChecked = true;
16+
} else if (children.some(x => x.isChecked || x.isIndeterminate)) {
17+
isIndeterminate = true;
2418
}
2519

26-
if (this.updateCheckbox) {
27-
this.updateCheckbox();
28-
}
20+
setProperties(this.args.model, { isChecked, isIndeterminate });
21+
}
22+
23+
if (this.args.updateCheckbox) {
24+
this.args.updateCheckbox();
2925
}
3026
}
3127
}
32-
});
28+
}

‎addon/components/x-tree-collapsed-icon.js‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎addon/components/x-tree-expanded-icon.js‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎addon/components/x-tree-node.hbs‎

Lines changed: 38 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,43 @@
1-
{{#if (has-block)}}
2-
{{yield
3-
(hash
4-
model=@model
5-
toggle=(component "x-tree-toggle"
1+
<div
2+
class={{this.classes}}
3+
role="button"
4+
{{on "click" this.click}}
5+
{{on "contextmenu" this.contextMenu}}
6+
{{on "mouseenter" this.mouseEnter}}
7+
{{on "mouseleave" this.mouseLeave}}
8+
>
9+
{{#if (has-block)}}
10+
{{yield
11+
(hash
612
model=@model
7-
toggleExpand=(action "toggleExpand")
8-
expandedIcon=@expandedIcon
9-
collapsedIcon=@collapsedIcon
13+
toggle=(component "x-tree-toggle"
14+
model=@model
15+
toggleExpand=this.toggleExpand
16+
expandedIcon=@expandedIcon
17+
collapsedIcon=@collapsedIcon
18+
)
19+
checkbox=(component "x-tree-checkbox"
20+
model=@model
21+
toggleCheck=this.toggleCheck
22+
)
1023
)
11-
checkbox=(component "x-tree-checkbox"
12-
model=@model
13-
toggleCheck=(action "toggleCheck")
14-
)
15-
)
16-
}}
17-
{{else}}
18-
<XTreeToggle
19-
@model={{@model}}
20-
@toggleExpand={{action "toggleExpand"}}
21-
@expandedIcon={{@expandedIcon}}
22-
@collapsedIcon={{@collapsedIcon}}
23-
/>
24-
25-
{{#if @checkable}}
26-
<XTreeCheckbox
24+
}}
25+
{{else}}
26+
<XTreeToggle
2727
@model={{@model}}
28-
@toggleCheck={{action "toggleCheck"}}
28+
@toggleExpand={{this.toggleExpand}}
29+
@expandedIcon={{@expandedIcon}}
30+
@collapsedIcon={{@collapsedIcon}}
2931
/>
32+
33+
{{#if @checkable}}
34+
<XTreeCheckbox
35+
@model={{@model}}
36+
@toggleCheck={{this.toggleCheck}}
37+
/>
38+
{{/if}}
39+
<span class="tree-label">
40+
{{@model.name}}
41+
</span>
3042
{{/if}}
31-
<span class="tree-label">
32-
{{@model.name}}
33-
</span>
34-
{{/if}}
43+
</div>

0 commit comments

Comments
 (0)