Skip to content

Commit 2e5d5cd

Browse files
ilhan007ilhan007
authored
feat(ui5-table): add "loadMore" capability (#2589)
Adds "loadMore" capability to the Table through a special row, displayed at the bottom as first part of the following requirement #2570 At later point, the loadMore capability will be available upon scroll as well.
1 parent fd38af8 commit 2e5d5cd

21 files changed

+1415
-3
lines changed

‎packages/main/src/Table.hbs

+35-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<table border="0" cellspacing="0" cellpadding="0" @keydown="{{_onkeydown}}" role="table">
2-
32
<thead>
43
<tr id="{{_columnHeader.id}}" role="row" class="ui5-table-header-row" tabindex="{{_columnHeader._tabIndex}}" style="height: 48px" @click="{{_onColumnHeaderClick}}">
54
{{#each visibleColumns}}
@@ -25,5 +24,40 @@
2524
</tr>
2625
{{/if}}
2726
{{/unless}}
27+
28+
{{#if hasMore}}
29+
{{> loadMoreRow}}
30+
{{/if}}
2831
</tbody>
2932
</table>
33+
34+
{{#*inline "loadMoreRow"}}
35+
<tr>
36+
<td colspan="{{visibleColumnsCount}}">
37+
<div class="ui5-table-load-more-row">
38+
<div
39+
tabindex="0"
40+
role="button"
41+
aria-labelledby="{{loadMoreAriaLabelledBy}}"
42+
?active="{{_loadMoreActive}}"
43+
@click="{{_onLoadMoreClick}}"
44+
@keydown="{{_onLoadMoreKeydown}}"
45+
@keyup="{{_onLoadMoreKeyup}}"
46+
class="ui5-table-load-more-row-inner"
47+
>
48+
<span
49+
id="{{_id}}-showMore-text"
50+
class="ui5-table-load-more-row-text">{{_loadMoreText}}
51+
</span>
52+
53+
{{#if loadMoreSubtext}}
54+
<span
55+
id="{{_id}}-showMore-desc"
56+
class="ui5-table-load-more-row-desc">{{loadMoreSubtext}}
57+
</span>
58+
{{/if}}
59+
</div>
60+
</div>
61+
</td>
62+
</tr>
63+
{{/inline}}

‎packages/main/src/Table.js

+112
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,13 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
33
import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
44
import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
55
import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
6+
import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
7+
import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
8+
9+
// Texts
10+
import { TABLE_LOAD_MORE_TEXT } from "./generated/i18n/i18n-defaults.js";
11+
12+
// Template
613
import TableTemplate from "./generated/templates/TableTemplate.lit.js";
714

815
// Styles
@@ -62,6 +69,39 @@ const metadata = {
6269
type: String,
6370
},
6471

72+
/**
73+
* Defines the text that will be displayed inside the additional row at the bottom of the table,
74+
* meant for loading more rows upon press.
75+
*
76+
* <br><br>
77+
* <b>Note:</b> If not specified a built-in text will be displayed.
78+
* <br>
79+
* <b>Note:</b> This property takes effect if <code>hasMore</code> is set.
80+
*
81+
* @type {string}
82+
* @defaultvalue ""
83+
* @since 1.0.0-rc.11
84+
* @public
85+
*/
86+
loadMoreText: {
87+
type: String,
88+
},
89+
90+
/**
91+
* Defines the subtext that will be displayed under the <code>loadMoreText</code>.
92+
*
93+
* <br><br>
94+
* <b>Note:</b> This property takes effect if <code>hasMore</code> is set.
95+
*
96+
* @type {string}
97+
* @defaultvalue ""
98+
* @since 1.0.0-rc.11
99+
* @public
100+
*/
101+
loadMoreSubtext: {
102+
type: String,
103+
},
104+
65105
/**
66106
* Defines if the value of <code>noDataText</code> will be diplayed when there is no rows present in the table.
67107
*
@@ -72,6 +112,20 @@ const metadata = {
72112
showNoData: {
73113
type: Boolean,
74114
},
115+
116+
/**
117+
* Defines if additonal row will be displayed at the bottom of the table.
118+
* Pressing on the row will fire the <code>load-more</code> event.
119+
*
120+
* @type {boolean}
121+
* @defaultvalue false
122+
* @since 1.0.0-rc.11
123+
* @public
124+
*/
125+
hasMore: {
126+
type: Boolean,
127+
},
128+
75129
/**
76130
* Determines whether the column headers remain fixed at the top of the page during
77131
* vertical scrolling as long as the Web Component is in the viewport.
@@ -111,6 +165,14 @@ const metadata = {
111165
type: Boolean,
112166
},
113167

168+
/**
169+
* Defines the active state of the "load more" row.
170+
* @private
171+
*/
172+
_loadMoreActive: {
173+
type: Boolean,
174+
},
175+
114176
/**
115177
* Used to represent the table column header for the purpose of the item navigation as it does not work with DOM objects directly
116178
* @private
@@ -146,6 +208,15 @@ const metadata = {
146208
poppedColumns: {},
147209
},
148210
},
211+
212+
/**
213+
* Fired when the user presses the <code>showMore</code> row of the table.
214+
* <br><br>
215+
* @event sap.ui.webcomponents.main.Table#load-more
216+
* @public
217+
* @since 1.0.0-rc.11
218+
*/
219+
"load-more": {},
149220
},
150221
};
151222

@@ -199,6 +270,10 @@ class Table extends UI5Element {
199270
return TableTemplate;
200271
}
201272

273+
static async onDefine() {
274+
await fetchI18nBundle("@ui5/webcomponents");
275+
}
276+
202277
constructor() {
203278
super();
204279

@@ -217,6 +292,8 @@ class Table extends UI5Element {
217292
this.fnOnRowFocused = this.onRowFocused.bind(this);
218293

219294
this._handleResize = this.popinContent.bind(this);
295+
296+
this.i18nBundle = getI18nBundle("@ui5/webcomponents");
220297
}
221298

222299
onBeforeRendering() {
@@ -259,6 +336,29 @@ class Table extends UI5Element {
259336
this._itemNavigation.update(this._columnHeader);
260337
}
261338

339+
_onLoadMoreKeydown(event) {
340+
if (isSpace(event)) {
341+
event.preventDefault();
342+
this._loadMoreActive = true;
343+
}
344+
345+
if (isEnter(event)) {
346+
this._onLoadMoreClick();
347+
this._loadMoreActive = true;
348+
}
349+
}
350+
351+
_onLoadMoreKeyup(event) {
352+
if (isSpace(event)) {
353+
this._onLoadMoreClick();
354+
}
355+
this._loadMoreActive = false;
356+
}
357+
358+
_onLoadMoreClick() {
359+
this.fireEvent("load-more");
360+
}
361+
262362
getColumnHeader() {
263363
return this.getDomRef() && this.getDomRef().querySelector(`#${this._id}-columnHeader`);
264364
}
@@ -316,6 +416,18 @@ class Table extends UI5Element {
316416
};
317417
}, this);
318418
}
419+
420+
get _loadMoreText() {
421+
return this.loadMoreText || this.i18nBundle.getText(TABLE_LOAD_MORE_TEXT);
422+
}
423+
424+
get loadMoreAriaLabelledBy() {
425+
if (this.moreDataText) {
426+
return `${this._id}-showMore-text ${this._id}-showMore-desc`;
427+
}
428+
429+
return `${this._id}-showMore-text`;
430+
}
319431
}
320432

321433
Table.define();

‎packages/main/src/i18n/messagebundle.properties

+3
Original file line numberDiff line numberDiff line change
@@ -292,6 +292,9 @@ SWITCH_ON=On
292292
#XACT: ARIA announcement for the switch off
293293
SWITCH_OFF=Off
294294

295+
#XTXT Table "load more" row's text.
296+
TABLE_LOAD_MORE_TEXT=More
297+
295298
#XACT: ACC next icon name in tab container
296299
TABCONTAINER_NEXT_ICON_ACC_NAME=Next
297300

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

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import "./TableLoadMoreRow.css";
2+
13
:host(:not([hidden])) {
24
display: inline-block;
35
width: 100%;

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

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/* Show more row */
2+
.ui5-table-load-more-row {
3+
display: flex;
4+
align-items: center;
5+
padding: var(--ui5_table_load_more_padding);
6+
border-top: 1px solid var(--sapList_BorderColor);
7+
box-sizing: border-box;
8+
cursor: pointer;
9+
outline: none;
10+
}
11+
12+
.ui5-table-load-more-row-inner {
13+
display: flex;
14+
align-items: center;
15+
justify-content: center;
16+
flex-direction: column;
17+
min-height: var(--ui5_table_load_more_text_height);
18+
width: 100%;
19+
color: var(--sapButton_TextColor);
20+
background-color: var(--sapList_Background);
21+
border: var(--ui5_table_load_more_border);
22+
border-radius: var(--ui5_table_load_more_border_radius);
23+
box-sizing: border-box;
24+
}
25+
26+
.ui5-table-load-more-row-inner:focus {
27+
outline: var(--ui5_table_row_outline_width) dotted var(--sapContent_FocusColor);
28+
outline-offset: -0.125rem;
29+
border-color: transparent;
30+
}
31+
32+
.ui5-table-load-more-row-inner:hover {
33+
background-color: var(--sapList_Hover_Background);
34+
}
35+
36+
.ui5-table-load-more-row-inner:active,
37+
.ui5-table-load-more-row-inner[active] {
38+
background-color: var(--sapList_Active_Background);
39+
border-color: var(--sapList_Active_Background);
40+
}
41+
42+
.ui5-table-load-more-row-inner[active] > *,
43+
.ui5-table-load-more-row-inner:active> * {
44+
color: var(--sapList_Active_TextColor);
45+
}
46+
47+
.ui5-table-load-more-row-text,
48+
.ui5-table-load-more-row-desc {
49+
width: 100%;
50+
text-align: center;
51+
font-family: "72override", var(--sapFontFamily);
52+
white-space: nowrap;
53+
overflow: hidden;
54+
text-overflow: ellipsis;
55+
box-sizing: border-box;
56+
}
57+
58+
.ui5-table-load-more-row-text {
59+
height: var(--ui5_table_load_more_text_height);
60+
padding: 0.875rem 1rem 0 1rem;
61+
font-size: var(--_ui5_table_load_more_text_font_size);
62+
font-weight: bold;
63+
}
64+
65+
.ui5-table-load-more-row-desc {
66+
font-size: var(--sapFontSize);
67+
padding: var(--_ui5_table_load_more_desc_padding);
68+
}

‎packages/main/src/themes/base/TableLoadMoreRow-parameters.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
:root {
2+
--ui5_table_load_more_padding: 0;
3+
--ui5_table_load_more_border: 1px top solid transparent;
4+
--ui5_table_load_more_border_radius: none;
5+
}

‎packages/main/src/themes/base/sizes-parameters.css

+11
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,12 @@
7070
/* Side Navigation */
7171
--ui5_side_navigation_item_height: 2.75rem;
7272

73+
/* Table */
74+
75+
--ui5_table_load_more_text_height: 2.75rem;
76+
--_ui5_table_load_more_text_font_size: var(--sapFontMediumSize);
77+
--_ui5_table_load_more_desc_padding: 0.375rem 2rem 0.875rem 2rem;
78+
7379
/* Tree */
7480
--_ui5-tree-indent-step: 1.5rem;
7581
--_ui5-tree-toggle-box-width: 2.75rem;
@@ -208,6 +214,11 @@
208214
--_ui5_slider_tooltip_padding: 0.25rem;
209215
--_ui5_slider_tooltip_bottom: 1.825rem;
210216

217+
/* Table */
218+
--ui5_table_load_more_text_height: 2.625rem;
219+
--_ui5_table_load_more_text_font_size: var(--sapFontSize);
220+
--_ui5_table_load_more_desc_padding: 0 2rem 0.875rem 2rem;
221+
211222
/* Tree */
212223
--_ui5-tree-indent-step: 0.5rem;
213224
--_ui5-tree-toggle-box-width: 2rem;

‎packages/main/src/themes/sap_belize/parameters-bundle.css

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
@import "./TabContainer-parameters.css";
2727
@import "../base/Table-parameters.css";
2828
@import "../base/TableRow-parameters.css";
29+
@import "../base/TableLoadMoreRow-parameters.css";
2930
@import "../base/TextArea-parameters.css";
3031
@import "./TimePicker-parameters.css";
3132
@import "../base/Title-parameters.css";

‎packages/main/src/themes/sap_belize_hcb/TableLoadMoreRow-parameters.css

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@import "../base/TableLoadMoreRow-parameters.css";
2+
3+
:root {
4+
--ui5_table_load_more_padding: 0.25rem;
5+
--ui5_table_load_more_border: 1px solid var(--sapButton_BorderColor);
6+
--ui5_table_load_more_border_radius: 0.375rem;
7+
}

‎packages/main/src/themes/sap_belize_hcb/parameters-bundle.css

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
@import "./TabContainer-parameters.css";
2727
@import "./Table-parameters.css";
2828
@import "./TableRow-parameters.css";
29+
@import "./TableLoadMoreRow-parameters.css";
2930
@import "./TextArea-parameters.css";
3031
@import "../base/Title-parameters.css";
3132
@import "../base/Toast-parameters.css";

‎packages/main/src/themes/sap_belize_hcw/TableLoadMoreRow-parameters.css

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@import "../base/TableLoadMoreRow-parameters.css";
2+
3+
:root {
4+
--ui5_table_load_more_padding: 0.25rem;
5+
--ui5_table_load_more_border: 1px solid var(--sapButton_BorderColor);
6+
--ui5_table_load_more_border_radius: 0.375rem;
7+
}

‎packages/main/src/themes/sap_belize_hcw/parameters-bundle.css

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
@import "./TabContainer-parameters.css";
2727
@import "./Table-parameters.css";
2828
@import "./TableRow-parameters.css";
29+
@import "./TableLoadMoreRow-parameters.css";
2930
@import "./TextArea-parameters.css";
3031
@import "../base/Title-parameters.css";
3132
@import "../base/Toast-parameters.css";

‎packages/main/src/themes/sap_fiori_3/parameters-bundle.css

+1
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
@import "./CalendarHeader-parameters.css";
3333
@import "../base/Table-parameters.css";
3434
@import "../base/TableRow-parameters.css";
35+
@import "../base/TableLoadMoreRow-parameters.css";
3536
@import "../base/Title-parameters.css";
3637
@import "./Token-parameters.css";
3738
@import "../base/ValueStateMessage-parameters.css";

‎packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css

+1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
@import "./CalendarHeader-parameters.css";
3232
@import "../base/Table-parameters.css";
3333
@import "../base/TableRow-parameters.css";
34+
@import "../base/TableLoadMoreRow-parameters.css";
3435
@import "../base/Title-parameters.css";
3536
@import "./Token-parameters.css";
3637
@import "../base/ValueStateMessage-parameters.css";

0 commit comments

Comments
 (0)