Skip to content

Commit

Permalink
fix(ui5-table): busy indicator overlay
Browse files Browse the repository at this point in the history
  • Loading branch information
nnaydenow committed Aug 28, 2024
1 parent f7085b5 commit 66e9a5e
Show file tree
Hide file tree
Showing 4 changed files with 22 additions and 75 deletions.
26 changes: 8 additions & 18 deletions packages/main/src/Table.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,14 @@
@ui5-_forward-before="{{_onForwardBefore}}"
@focusin="{{_onfocusin}}"
>
<ui5-busy-indicator
id="{{_id}}-busyIndicator"
delay="{{busyDelay}}"
?active="{{busy}}"
class="ui5-table-busy-indicator"
>
<div id="{{_id}}-before" tabindex="0" class="ui5-table-focusarea"></div>

{{#if busy}}
{{> busyRow}}
{{/if}}

<table border="0" cellspacing="0" cellpadding="0" @keydown="{{_onkeydown}}" role="table" aria-label="{{tableAriaLabelText}}">
<thead>
<tr
Expand Down Expand Up @@ -73,6 +75,7 @@

<div id="{{_id}}-after" tabindex="0" class="ui5-table-focusarea"></div>
</div>
</ui5-busy-indicator>

{{#*inline "moreRow"}}
<tr>
Expand Down Expand Up @@ -106,17 +109,4 @@
<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-busy-indicator
delay="{{busyDelay}}"
class="ui5-table-busy-ind"
style="{{styles.busy}}"
active
size="Medium"
data-sap-focus-ref
></ui5-busy-indicator>
</div>
{{/inline}}
{{/inline}}
38 changes: 6 additions & 32 deletions packages/main/src/Table.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ import { getLastTabbableElement, getTabbableElements } from "@ui5/webcomponents-
import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
import isElementInView from "@ui5/webcomponents-base/dist/util/isElementInView.js";
import TableGrowingMode from "./types/TableGrowingMode.js";
import BusyIndicator from "./BusyIndicator.js";
import type {
Expand Down Expand Up @@ -163,11 +162,11 @@ enum TableFocusTargetElement {
*
* ### ES6 Module Import
*
* `import "@ui5/webcomponents/dist/Table.js";`
* `import "@ui5/webcomponents/dist/TableColumn.js";` (`ui5-table-column`)
* `import "@ui5/webcomponents/dist/TableRow.js";` (`ui5-table-row`)
* `import "@ui5/webcomponents/dist/TableGroupRow.js";` (`ui5-table-group-row`)
* `import "@ui5/webcomponents/dist/TableCell.js";` (`ui5-table-cell`)
* - `import "@ui5/webcomponents/dist/Table.js";`
* - `import "@ui5/webcomponents/dist/TableColumn.js";` (`ui5-table-column`)
* - `import "@ui5/webcomponents/dist/TableRow.js";` (`ui5-table-row`)
* - `import "@ui5/webcomponents/dist/TableGroupRow.js";` (`ui5-table-group-row`)
* - `import "@ui5/webcomponents/dist/TableCell.js";` (`ui5-table-cell`)
* @constructor
* @extends UI5Element
* @public
Expand Down Expand Up @@ -393,13 +392,6 @@ class Table extends UI5Element {
@property({ type: Object })
_columnHeader: TableColumnHeaderInfo;

/**
* Defines if the entire table is in view port.
* @private
*/
@property({ type: Boolean })
_inViewport!: boolean;

/**
* Defines whether all rows are selected or not when table is in MultiSelect mode.
* @default false
Expand Down Expand Up @@ -544,8 +536,6 @@ class Table extends UI5Element {
if (this.growsOnScroll) {
this.observeTableEnd();
}

this.checkTableInViewport();
}

onEnterDOM() {
Expand Down Expand Up @@ -1071,13 +1061,9 @@ class Table extends UI5Element {
}

handleResize() {
this.checkTableInViewport();
this.popinContent();
}

checkTableInViewport() {
this._inViewport = isElementInView(this.getDomRef()!);
}
popinContent() {
const clientRect: DOMRect = this.getDomRef()!.getBoundingClientRect();
const tableWidth: number = clientRect.width;
Expand All @@ -1104,7 +1090,7 @@ class Table extends UI5Element {
this.columns[visibleColumnsIndexes[visibleColumnsIndexes.length - 1]].last = true;
}

const hiddenColumnsChange = (this._hiddenColumns.length !== hiddenColumns.length) || this._hiddenColumns.some((column, index) => column !== hiddenColumns[index]);
const hiddenColumnsChange = (this._hiddenColumns.length !== hiddenColumns.length) || this._hiddenColumns?.some((column, index) => column !== hiddenColumns[index]);
const shownColumnsChange = hiddenColumns.length === 0;

// invalidate if hidden columns count has changed or columns are shown
Expand Down Expand Up @@ -1145,14 +1131,6 @@ class Table extends UI5Element {
return this.growingIntersectionObserver;
}

get styles() {
return {
busy: {
position: this.busyIndPosition,
},
};
}

get growsWithButton(): boolean {
return this.growing === TableGrowingMode.Button;
}
Expand Down Expand Up @@ -1195,10 +1173,6 @@ class Table extends UI5Element {
return this.shadowRoot!.querySelector(".ui5-table-end-marker")!;
}

get busyIndPosition(): string {
return this._inViewport ? "absolute" : "sticky";
}

get isMultiSelect(): boolean {
return this.mode === TableMode.MultiSelect;
}
Expand Down
27 changes: 8 additions & 19 deletions packages/main/src/themes/Table.css
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,13 @@
border-bottom: var(--ui5_table_bottom_border);
}

.ui5-table-root,
.ui5-table-busy-indicator {
width: 100%;
height: 100%;
box-sizing: border-box;
}

table {
width: 100%;
border-spacing: 0;
Expand Down Expand Up @@ -60,24 +67,6 @@ tr {
height: 0px;
}

:host([busy]) .ui5-table-busy-row {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
outline: none;
z-index: 100;
}

:host([busy]) .ui5-table-busy-ind {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}

:host([busy]) [growing-button] {
opacity: 0.72;
}
Expand All @@ -94,7 +83,7 @@ tr {
:host([sticky-column-header]) .ui5-table-header-row {
position: sticky;
top: 0;
z-index: 99;
z-index: 98;
}

th {
Expand Down
6 changes: 0 additions & 6 deletions packages/main/test/pages/TableGrowingWithButton.html
Original file line number Diff line number Diff line change
Expand Up @@ -767,8 +767,6 @@ <h3>Custom texts</h3>
var loadMoreTracker = 1;

function init(tbl, rows) {
tbl.busy = true;

var html = '';
products.ProductCollection.slice(0, ROWS).forEach(function (product, index, arr) {
var test = "<ui5-table-row><ui5-table-cell><ui5-label>".concat(product.Name, "</ui5-label><ui5-label>").concat(product.ProductId, "</ui5-label></ui5-table-cell><ui5-table-cell><ui5-label>").concat(product.SupplierName, "</ui5-label></ui5-table-cell><ui5-table-cell><ui5-label >").concat(product.Width, " x ").concat(product.Depth, " x ").concat(product.Height, " ").concat(product.DimUnit, "</ui5-label></ui5-table-cell><ui5-table-cell><ui5-label>").concat(product.WeightMeasure, "</b> ").concat(product.WeightUnit, "</ui5-label></ui5-table-cell><ui5-table-cell><ui5-label>").concat(product.Price, "</b> ").concat(product.CurrencyCode, "</ui5-label></ui5-table-cell></ui5-table-row>");
Expand All @@ -779,10 +777,6 @@ <h3>Custom texts</h3>

tbl.setAttribute("growing-button-subtext", "[" + loadMoreTracker * ROWS + " / 123]");
inputLoadMoreCounter.value = loadMoreTracker - 1;

setTimeout(function() {
tbl.busy = false;
}, 1500);
}

function loadMore() {
Expand Down

0 comments on commit 66e9a5e

Please sign in to comment.