Skip to content

Commit 87520c2

Browse files
ilhan007ilhan007
authored
feat(ui5-table): add growing on scroll (#2593)
Adds growing capability to the Table upon user scroll (previously possible through "More" button - see the PR #2589). With this feature, the "load-more" event will be fired when the user scrolls to the table's end. FIXES: #2570 BREAKING_CHANGES: "has-more" removed, use "growing" instead; "load-more-text" has been renamed to more-text; "load-more-subtext" has been renamed to "more-subtext"
1 parent eff2e74 commit 87520c2

File tree

14 files changed

+1805
-91
lines changed

14 files changed

+1805
-91
lines changed

‎packages/base/src/util/debounce.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/**
2+
* Delays function execution by given threshold.
3+
* @param fn {Function}
4+
* @param delay {Integer}
5+
*/
6+
7+
let debounceInterval = null;
8+
9+
const debounce = (fn, delay) => {
10+
clearTimeout(debounceInterval);
11+
debounceInterval = setTimeout(() => {
12+
debounceInterval = null;
13+
fn();
14+
}, delay);
15+
};
16+
17+
export default debounce;

‎packages/fiori/src/Wizard.js

+2-13
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js
77
import Float from "@ui5/webcomponents-base/dist/types/Float.js";
88
import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
99
import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
10+
import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
1011
import Button from "@ui5/webcomponents/dist/Button.js";
1112
import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
1213

@@ -387,7 +388,7 @@ class Wizard extends UI5Element {
387388
return;
388389
}
389390

390-
this.debounce(this.changeSelectionByScroll.bind(this, event.target.scrollTop), Wizard.SCROLL_DEBOUNCE_RATE);
391+
debounce(this.changeSelectionByScroll.bind(this, event.target.scrollTop), Wizard.SCROLL_DEBOUNCE_RATE);
391392
}
392393

393394
/**
@@ -850,18 +851,6 @@ class Wizard extends UI5Element {
850851
}
851852
}
852853

853-
/**
854-
* Delays function execution by given threshold - used to delay the scroll event handling.
855-
* @private
856-
*/
857-
debounce(fn, delay) {
858-
clearTimeout(this.debounceInterval);
859-
this.debounceInterval = setTimeout(() => {
860-
this.debounceInterval = null;
861-
fn();
862-
}, delay);
863-
}
864-
865854
/**
866855
* Sorter method for sorting an array in ascending order.
867856
* @private

‎packages/main/src/List.js

+2-9
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { getLastTabbableElement } from "@ui5/webcomponents-base/dist/util/Tabbab
55
import { isTabNext } from "@ui5/webcomponents-base/dist/Keys.js";
66
import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
77
import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
8+
import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
89
import ListMode from "./types/ListMode.js";
910
import ListSeparators from "./types/ListSeparators.js";
1011
import BusyIndicator from "./BusyIndicator.js";
@@ -538,7 +539,7 @@ class List extends UI5Element {
538539
if (!this.infiniteScroll) {
539540
return;
540541
}
541-
this.debounce(this.loadMore.bind(this, event.target), INFINITE_SCROLL_DEBOUNCE_RATE);
542+
debounce(this.loadMore.bind(this, event.target), INFINITE_SCROLL_DEBOUNCE_RATE);
542543
}
543544

544545
_onfocusin(event) {
@@ -770,14 +771,6 @@ class List extends UI5Element {
770771
}
771772
}
772773

773-
debounce(fn, delay) {
774-
clearTimeout(this.debounceInterval);
775-
this.debounceInterval = setTimeout(() => {
776-
this.debounceInterval = null;
777-
fn();
778-
}, delay);
779-
}
780-
781774
static get dependencies() {
782775
return [BusyIndicator];
783776
}

‎packages/main/src/Table.hbs

+61-32
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,47 @@
1-
<table border="0" cellspacing="0" cellpadding="0" @keydown="{{_onkeydown}}" role="table">
2-
<thead>
3-
<tr id="{{_columnHeader.id}}" role="row" class="ui5-table-header-row" tabindex="{{_columnHeader._tabIndex}}" style="height: 48px" @click="{{_onColumnHeaderClick}}">
4-
{{#each visibleColumns}}
1+
<div class="ui5-table-root">
2+
{{#if busy}}
3+
{{> busyRow}}
4+
{{/if}}
5+
6+
<table border="0" cellspacing="0" cellpadding="0" @keydown="{{_onkeydown}}" role="table">
7+
<thead>
8+
<tr id="{{_columnHeader.id}}" role="row" class="ui5-table-header-row" tabindex="{{_columnHeader._tabIndex}}" style="height: 48px" @click="{{_onColumnHeaderClick}}">
9+
{{#each visibleColumns}}
10+
<slot name="{{this._individualSlot}}"></slot>
11+
{{/each}}
12+
</tr>
13+
</thead>
14+
15+
<tbody>
16+
{{#each rows}}
517
<slot name="{{this._individualSlot}}"></slot>
618
{{/each}}
7-
</tr>
8-
</thead>
9-
10-
<tbody>
11-
{{#each rows}}
12-
<slot name="{{this._individualSlot}}"></slot>
13-
{{/each}}
14-
15-
{{#unless rows.length}}
16-
{{#if showNoData}}
17-
<tr class="ui5-table-no-data-row-root" role="row">
18-
<td colspan="{{visibleColumnsCount}}" role="cell">
19-
20-
<div class="ui5-table-no-data-row">
21-
<span>{{noDataText}}</span>
22-
</div>
23-
</td>
24-
</tr>
19+
20+
{{#unless rows.length}}
21+
{{#if showNoData}}
22+
<tr class="ui5-table-no-data-row-root" role="row">
23+
<td colspan="{{visibleColumnsCount}}" role="cell">
24+
25+
<div class="ui5-table-no-data-row">
26+
<span>{{noDataText}}</span>
27+
</div>
28+
</td>
29+
</tr>
30+
{{/if}}
31+
{{/unless}}
32+
33+
{{#if growsWithButton}}
34+
{{> moreRow}}
2535
{{/if}}
26-
{{/unless}}
2736

28-
{{#if hasMore}}
29-
{{> loadMoreRow}}
30-
{{/if}}
31-
</tbody>
32-
</table>
37+
{{#if growsOnScroll}}
38+
{{> tableEndRow}}
39+
{{/if}}
40+
</tbody>
41+
</table>
42+
</div>
3343

34-
{{#*inline "loadMoreRow"}}
44+
{{#*inline "moreRow"}}
3545
<tr>
3646
<td colspan="{{visibleColumnsCount}}">
3747
<div class="ui5-table-load-more-row">
@@ -47,17 +57,36 @@
4757
>
4858
<span
4959
id="{{_id}}-showMore-text"
50-
class="ui5-table-load-more-row-text">{{_loadMoreText}}
60+
class="ui5-table-load-more-row-text">{{_moreText}}
5161
</span>
5262

53-
{{#if loadMoreSubtext}}
63+
{{#if moreSubtext}}
5464
<span
5565
id="{{_id}}-showMore-desc"
56-
class="ui5-table-load-more-row-desc">{{loadMoreSubtext}}
66+
class="ui5-table-load-more-row-desc">{{moreSubtext}}
5767
</span>
5868
{{/if}}
5969
</div>
6070
</div>
6171
</td>
6272
</tr>
6373
{{/inline}}
74+
75+
{{#*inline "tableEndRow"}}
76+
<tr tabindex="-1" class="ui5-table-end-row">
77+
<td tabindex="-1">
78+
<span tabindex="-1" aria-hidden="true" class="ui5-table-end-marker"></span>
79+
</td>
80+
</tr>
81+
{{/inline}}
82+
83+
{{#*inline "busyRow"}}
84+
<div tabindex="-1" class="ui5-table-busy-row">
85+
<ui5-busyindicator
86+
class="ui5-table-busy-ind"
87+
style="{{styles.busy}}"
88+
active
89+
size="Medium"
90+
></ui5-busyindicator>
91+
</div>
92+
{{/inline}}

0 commit comments

Comments
 (0)