Skip to content

Commit cbe3866

Browse files
vladitasevvladitasev
committed
remove busy
1 parent 76049fa commit cbe3866

File tree

7 files changed

+183
-199
lines changed

7 files changed

+183
-199
lines changed

‎packages/main/src/Tree.hbs

+29-34
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,30 @@
1-
<ui5-busyindicator
2-
class="ui5-tree-busy-indicator"
3-
.active="{{busy}}"
1+
<ui5-list
2+
class="ui5-tree-root"
3+
.mode="{{mode}}"
4+
.headerText="{{headerText}}"
5+
.footerText="{{footerText}}"
6+
.noDataText="{{noDataText}}"
7+
._role="{{_role}}"
8+
@ui5-itemClick="{{_onListItemClick}}"
9+
@ui5-itemDelete="{{_onListItemDelete}}"
10+
@ui5-selectionChange="{{_onListSelectionChange}}"
411
>
5-
<ui5-list
6-
class="ui5-tree-root"
7-
.mode="{{mode}}"
8-
.headerText="{{headerText}}"
9-
.footerText="{{footerText}}"
10-
.noDataText="{{noDataText}}"
11-
._role="{{_role}}"
12-
@ui5-itemClick="{{_onListItemClick}}"
13-
@ui5-itemDelete="{{_onListItemDelete}}"
14-
@ui5-selectionChange="{{_onListSelectionChange}}"
15-
>
16-
<slot name="header" slot="header"></slot>
17-
{{#each _listItems}}
18-
<ui5-li-tree
19-
._id="{{this.treeItem._id}}"
20-
type="Active"
21-
level="{{this.level}}"
22-
icon="{{this.treeItem.icon}}"
23-
.treeItem="{{this.treeItem}}"
24-
.expanded="{{this.treeItem.expanded}}"
25-
.selected="{{this.treeItem.selected}}"
26-
.showToggleButton="{{this.treeItem.requiresToggleButton}}"
27-
@ui5-toggle="{{../_onListItemToggle}}"
28-
@ui5-stepIn="{{../_onListItemStepIn}}"
29-
@ui5-stepOut="{{../_onListItemStepOut}}"
30-
>
31-
{{this.treeItem.text}}
32-
</ui5-li-tree>
33-
{{/each}}
34-
</ui5-list>
35-
</ui5-busyindicator>
12+
<slot name="header" slot="header"></slot>
13+
{{#each _listItems}}
14+
<ui5-li-tree
15+
._id="{{this.treeItem._id}}"
16+
type="Active"
17+
level="{{this.level}}"
18+
icon="{{this.treeItem.icon}}"
19+
.treeItem="{{this.treeItem}}"
20+
.expanded="{{this.treeItem.expanded}}"
21+
.selected="{{this.treeItem.selected}}"
22+
.showToggleButton="{{this.treeItem.requiresToggleButton}}"
23+
@ui5-toggle="{{../_onListItemToggle}}"
24+
@ui5-stepIn="{{../_onListItemStepIn}}"
25+
@ui5-stepOut="{{../_onListItemStepOut}}"
26+
>
27+
{{this.treeItem.text}}
28+
</ui5-li-tree>
29+
{{/each}}
30+
</ui5-list>

‎packages/main/src/Tree.js

+8-30
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
22
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
33
import TreeItem from "./TreeItem.js";
4-
import BusyIndicator from "./BusyIndicator.js";
54
import List from "./List.js";
65
import TreeListItem from "./TreeListItem.js";
76
import ListMode from "./types/ListMode.js";
@@ -48,7 +47,7 @@ const metadata = {
4847
/**
4948
* Defines the <code>ui5-tree</code> header text.
5049
* <br><br>
51-
* <b>Note:</b> If <code>header</code> is set this property is ignored.
50+
* <b>Note:</b> If the <code>header</code> slot is set, this property is ignored.
5251
*
5352
* @type {string}
5453
* @defaultvalue ""
@@ -69,18 +68,6 @@ const metadata = {
6968
type: String,
7069
},
7170

72-
/**
73-
* When set to <code>true</code>, a busy indicator will be displayed on the <code>ui5-tree</code>, blocking any user interaction.
74-
* Use this when you need to dynamically load tree items.
75-
*
76-
* @type {boolean}
77-
* @defaultvalue false
78-
* @public
79-
*/
80-
busy: {
81-
type: Boolean,
82-
},
83-
8471
/**
8572
* An array, containing a flat structure of list items to render
8673
*
@@ -111,7 +98,7 @@ const metadata = {
11198
/**
11299
* Defines the <code>ui5-tree</code> header.
113100
* <br><br>
114-
* <b>Note:</b> When <code>header</code> is set, the
101+
* <b>Note:</b> When the <code>header</code> slot is set, the
115102
* <code>headerText</code> property is ignored.
116103
*
117104
* @type {HTMLElement[]}
@@ -232,20 +219,23 @@ class Tree extends UI5Element {
232219

233220
static async onDefine() {
234221
await Promise.all([
235-
BusyIndicator.define(),
236222
List.define(),
237223
TreeListItem.define(),
238224
TreeItem.define(),
239225
]);
240226
}
241227

228+
constructor() {
229+
super();
230+
this._observer = new MutationObserver(this.onTreeStructureChange.bind(this));
231+
}
232+
242233
onBeforeRendering() {
243234
this._listItems = [];
244235
buildTree(this, 1, this._listItems);
245236
}
246237

247238
onEnterDOM() {
248-
this._observer = new MutationObserver(this.onTreeStructureChange.bind(this));
249239
this._observer.observe(this, { attributes: true, childList: true, subtree: true });
250240
}
251241

@@ -262,18 +252,14 @@ class Tree extends UI5Element {
262252
}
263253

264254
get list() {
265-
return this.shadowRoot.querySelector(`ui5-list`);
255+
return this.getDomRef();
266256
}
267257

268258
get _role() {
269259
return "tree";
270260
}
271261

272262
_onListItemStepIn(event) {
273-
if (this.busy) {
274-
return;
275-
}
276-
277263
const listItem = event.detail.item;
278264
const treeItem = listItem.treeItem;
279265
if (treeItem.items.length > 0) {
@@ -284,10 +270,6 @@ class Tree extends UI5Element {
284270
}
285271

286272
_onListItemStepOut(event) {
287-
if (this.busy) {
288-
return;
289-
}
290-
291273
const listItem = event.detail.item;
292274
const treeItem = listItem.treeItem;
293275
if (treeItem.parentElement !== this) {
@@ -298,10 +280,6 @@ class Tree extends UI5Element {
298280
}
299281

300282
_onListItemToggle(event) {
301-
if (this.busy) {
302-
return;
303-
}
304-
305283
const listItem = event.detail.item;
306284
const treeItem = listItem.treeItem;
307285
const defaultPrevented = !this.fireEvent("itemToggle", { item: treeItem }, true);

‎packages/main/src/themes/List.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -90,4 +90,4 @@
9090
align-items: center;
9191
height: var(--_ui5_list_busy_row_height);
9292
justify-content: center;
93-
}
93+
}

‎packages/main/src/themes/Tree.css

-3
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,6 @@
22

33
:host(:not([hidden])) {
44
display: block;
5-
}
6-
7-
.ui5-tree-busy-indicator {
85
width: 100%;
96
}
107

‎packages/main/src/themes/TreeListItem.css

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
:host(:not([hidden])) {
22
display: block;
3+
cursor: pointer;
34
}
45

56
.ui5-li-root-tree {

‎packages/main/test/pages/Tree.html

+20-13
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,10 @@
3939
.spacer {
4040
flex: 1;
4141
}
42+
43+
.full-width {
44+
width: 100%;
45+
}
4246
</style>
4347
</head>
4448

@@ -97,20 +101,22 @@
97101

98102
<br><br>
99103

100-
<ui5-tree id="treeDynamic">
101-
<div slot="header" class="hdr">
102-
<ui5-title>Dynamic tree</ui5-title>
103-
</div>
104+
<ui5-busyindicator id="busy" class="full-width">
105+
<ui5-tree id="treeDynamic" class="full-width">
106+
<div slot="header" class="hdr">
107+
<ui5-title>Dynamic tree</ui5-title>
108+
</div>
104109

105-
<ui5-tree-item text="Has preloaded children">
106-
<ui5-tree-item text="Child 1"></ui5-tree-item>
107-
<ui5-tree-item text="Child 2"></ui5-tree-item>
108-
</ui5-tree-item>
110+
<ui5-tree-item text="Has preloaded children">
111+
<ui5-tree-item text="Child 1"></ui5-tree-item>
112+
<ui5-tree-item text="Child 2"></ui5-tree-item>
113+
</ui5-tree-item>
109114

110-
<ui5-tree-item text="Has no children at all"></ui5-tree-item>
115+
<ui5-tree-item text="Has no children at all"></ui5-tree-item>
111116

112-
<ui5-tree-item id="dynamicNode" text="Has children, but not yet loaded" has-children></ui5-tree-item>
113-
</ui5-tree>
117+
<ui5-tree-item id="dynamicNode" text="Has children, but not yet loaded" has-children></ui5-tree-item>
118+
</ui5-tree>
119+
</ui5-busyindicator>
114120

115121
<script>
116122

@@ -177,19 +183,20 @@
177183
});
178184

179185
var dynamicTree = document.getElementById("treeDynamic");
186+
var busyIndicator = document.getElementById("busy");
180187
dynamicTree.addEventListener("itemToggle", function(event) {
181188
var item = event.detail.item; // get the node that is toggled
182189

183190
// Only for the dynamic node, only when it's empty
184191
if (item.id === "dynamicNode" && item.children.length === 0) {
185-
dynamicTree.busy = true;
192+
busyIndicator.active = true;
186193
event.preventDefault(); // do not let the toggle button switch yet
187194
setTimeout(function() {
188195
var newItem = document.createElement("ui5-tree-item"); // Fetching from db....
189196
newItem.text = "Node fetched from DB after 2 sec";
190197
item.appendChild(newItem);
191198
item.toggle(); // now manually switch
192-
dynamicTree.busy = false;
199+
busyIndicator.active = false;
193200
}, 2000);
194201
}
195202
});

0 commit comments

Comments
 (0)