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"
SAP · Feb 5, 2021 · 87520c2 · 87520c2
1 parent eff2e74
commit 87520c2
Show file tree

Hide file tree

Showing 14 changed files with 1,805 additions and 91 deletions.
diff --git a/packages/base/src/util/debounce.js b/packages/base/src/util/debounce.js
@@ -0,0 +1,17 @@
+/**
+ * Delays function execution by given threshold.
+ * @param fn {Function}
+ * @param delay {Integer}
+ */
+
+let debounceInterval = null;
+
+const debounce = (fn, delay) => {
+	clearTimeout(debounceInterval);
+	debounceInterval = setTimeout(() => {
+		debounceInterval = null;
+		fn();
+	}, delay);
+};
+
+export default debounce;
diff --git a/packages/fiori/src/Wizard.js b/packages/fiori/src/Wizard.js
@@ -7,6 +7,7 @@ import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js
 import Float from "@ui5/webcomponents-base/dist/types/Float.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
 import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
 
@@ -387,7 +388,7 @@ class Wizard extends UI5Element {
 			return;
 		}
 
-		this.debounce(this.changeSelectionByScroll.bind(this, event.target.scrollTop), Wizard.SCROLL_DEBOUNCE_RATE);
+		debounce(this.changeSelectionByScroll.bind(this, event.target.scrollTop), Wizard.SCROLL_DEBOUNCE_RATE);
 	}
 
 	/**
@@ -850,18 +851,6 @@ class Wizard extends UI5Element {
 		}
 	}
 
-	/**
-	 * Delays function execution by given threshold - used to delay the scroll event handling.
-	 * @private
-	 */
-	debounce(fn, delay) {
-		clearTimeout(this.debounceInterval);
-		this.debounceInterval = setTimeout(() => {
-			this.debounceInterval = null;
-			fn();
-		}, delay);
-	}
-
 	/**
 	 * Sorter method for sorting an array in ascending order.
 	 * @private

diff --git a/packages/main/src/List.js b/packages/main/src/List.js
@@ -5,6 +5,7 @@ import { getLastTabbableElement } from "@ui5/webcomponents-base/dist/util/Tabbab
 import { isTabNext } from "@ui5/webcomponents-base/dist/Keys.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
 import ListMode from "./types/ListMode.js";
 import ListSeparators from "./types/ListSeparators.js";
 import BusyIndicator from "./BusyIndicator.js";
@@ -538,7 +539,7 @@ class List extends UI5Element {
 		if (!this.infiniteScroll) {
 			return;
 		}
-		this.debounce(this.loadMore.bind(this, event.target), INFINITE_SCROLL_DEBOUNCE_RATE);
+		debounce(this.loadMore.bind(this, event.target), INFINITE_SCROLL_DEBOUNCE_RATE);
 	}
 
 	_onfocusin(event) {
@@ -770,14 +771,6 @@ class List extends UI5Element {
 		}
 	}
 
-	debounce(fn, delay) {
-		clearTimeout(this.debounceInterval);
-		this.debounceInterval = setTimeout(() => {
-			this.debounceInterval = null;
-			fn();
-		}, delay);
-	}
-
 	static get dependencies() {
 		return [BusyIndicator];
 	}

diff --git a/packages/main/src/Table.hbs b/packages/main/src/Table.hbs
@@ -1,37 +1,47 @@
-<table border="0" cellspacing="0" cellpadding="0" @keydown="{{_onkeydown}}" role="table">
-	<thead>
-		<tr id="{{_columnHeader.id}}" role="row" class="ui5-table-header-row" tabindex="{{_columnHeader._tabIndex}}" style="height: 48px" @click="{{_onColumnHeaderClick}}">
-			{{#each visibleColumns}}
+<div class="ui5-table-root">
+	{{#if busy}}
+		{{> busyRow}}
+	{{/if}}
+
+	<table border="0" cellspacing="0" cellpadding="0" @keydown="{{_onkeydown}}" role="table">
+		<thead>
+			<tr id="{{_columnHeader.id}}" role="row" class="ui5-table-header-row" tabindex="{{_columnHeader._tabIndex}}" style="height: 48px" @click="{{_onColumnHeaderClick}}">
+				{{#each visibleColumns}}
+					<slot name="{{this._individualSlot}}"></slot>
+				{{/each}}
+			</tr>
+		</thead>
+
+		<tbody>
+			{{#each rows}}
 				<slot name="{{this._individualSlot}}"></slot>
 			{{/each}}
-		</tr>
-	</thead>
-
-	<tbody>
-		{{#each rows}}
-			<slot name="{{this._individualSlot}}"></slot>
-		{{/each}}
-
-		{{#unless rows.length}}
-			{{#if showNoData}}
-				<tr class="ui5-table-no-data-row-root" role="row">
-					<td colspan="{{visibleColumnsCount}}" role="cell">
-
-						<div class="ui5-table-no-data-row">
-							<span>{{noDataText}}</span>
-						</div>
-					</td>
-				</tr>
+
+			{{#unless rows.length}}
+				{{#if showNoData}}
+					<tr class="ui5-table-no-data-row-root" role="row">
+						<td colspan="{{visibleColumnsCount}}" role="cell">
+
+							<div class="ui5-table-no-data-row">
+								<span>{{noDataText}}</span>
+							</div>
+						</td>
+					</tr>
+				{{/if}}
+			{{/unless}}
+
+			{{#if growsWithButton}}
+				{{> moreRow}}
 			{{/if}}
-		{{/unless}}
 
-		{{#if hasMore}}
-			{{> loadMoreRow}}
-		{{/if}}
-	</tbody>
-</table>
+			{{#if growsOnScroll}}
+				{{> tableEndRow}}
+			{{/if}}
+		</tbody>
+	</table>
+</div>
 
-{{#*inline "loadMoreRow"}}
+{{#*inline "moreRow"}}
 <tr>
 	<td colspan="{{visibleColumnsCount}}">
 		<div class="ui5-table-load-more-row">
@@ -47,17 +57,36 @@
 			>
 				<span
 					id="{{_id}}-showMore-text"
-					class="ui5-table-load-more-row-text">{{_loadMoreText}}
+					class="ui5-table-load-more-row-text">{{_moreText}}
 				</span>
 
-				{{#if loadMoreSubtext}}
+				{{#if moreSubtext}}
 				<span
 					id="{{_id}}-showMore-desc"
-					class="ui5-table-load-more-row-desc">{{loadMoreSubtext}}
+					class="ui5-table-load-more-row-desc">{{moreSubtext}}
 				</span>
 				{{/if}}
 			</div>
 		</div>
 	</td>
 </tr>
 {{/inline}}
+
+{{#*inline "tableEndRow"}}
+	<tr tabindex="-1" class="ui5-table-end-row">
+		<td tabindex="-1">
+			<span tabindex="-1" aria-hidden="true" class="ui5-table-end-marker"></span>
+		</td>
+	</tr>
+{{/inline}}
+
+{{#*inline "busyRow"}}
+	<div tabindex="-1" class="ui5-table-busy-row">
+		<ui5-busyindicator
+			class="ui5-table-busy-ind"
+			style="{{styles.busy}}"
+			active
+			size="Medium"
+		></ui5-busyindicator>
+	</div>
+{{/inline}}