From 7f44b6f09778bf70fe31e9952e5eb142194c869b Mon Sep 17 00:00:00 2001 From: Ivaylo Plashkov Date: Thu, 30 Jan 2020 10:46:23 +0200 Subject: [PATCH 1/4] feat(ui5-table): introduce popinChange event --- packages/main/src/Table.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/main/src/Table.js b/packages/main/src/Table.js index 92df2401a0ce..0b4b53a91023 100644 --- a/packages/main/src/Table.js +++ b/packages/main/src/Table.js @@ -106,6 +106,7 @@ const metadata = { }, }, events: /** @lends sap.ui.webcomponents.main.Table.prototype */ { + popinChange: {}, }, }; @@ -242,6 +243,7 @@ class Table extends UI5Element { // invalidate only if hidden columns count has changed if (this._hiddenColumns.length !== hiddenColumns.length) { this._hiddenColumns = hiddenColumns; + this.fireEvent("popinChange"); } } From 0b19d54c02ad1d4bdaeffb3816152612e456a066 Mon Sep 17 00:00:00 2001 From: Ivaylo Plashkov Date: Thu, 30 Jan 2020 12:52:06 +0200 Subject: [PATCH 2/4] added docs for the event --- packages/main/src/Table.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/main/src/Table.js b/packages/main/src/Table.js index 0b4b53a91023..92f6117db929 100644 --- a/packages/main/src/Table.js +++ b/packages/main/src/Table.js @@ -106,6 +106,13 @@ const metadata = { }, }, events: /** @lends sap.ui.webcomponents.main.Table.prototype */ { + /** + * Fired when the ui5-table-column is shown as a pop-in instead of hiding it. + * + * @event + * @since 1.0.0-rc.6 + * @public + */ popinChange: {}, }, }; From 9d6c2e42a944186becc112515d551002fc93fb6e Mon Sep 17 00:00:00 2001 From: Ivaylo Plashkov Date: Fri, 31 Jan 2020 09:21:02 +0200 Subject: [PATCH 3/4] extended event with details and added tests --- packages/main/src/Table.js | 13 +++++++++++-- packages/main/test/pages/Table.html | 11 ++++++++--- packages/main/test/specs/Table.spec.js | 10 ++++++++++ 3 files changed, 29 insertions(+), 5 deletions(-) diff --git a/packages/main/src/Table.js b/packages/main/src/Table.js index 92f6117db929..93b1dc9db293 100644 --- a/packages/main/src/Table.js +++ b/packages/main/src/Table.js @@ -110,10 +110,15 @@ const metadata = { * Fired when the ui5-table-column is shown as a pop-in instead of hiding it. * * @event + * @param { Array } popped-in columns. * @since 1.0.0-rc.6 * @public */ - popinChange: {}, + popinChange: { + detail: { + poppedColumns: {}, + }, + }, }, }; @@ -250,7 +255,11 @@ class Table extends UI5Element { // invalidate only if hidden columns count has changed if (this._hiddenColumns.length !== hiddenColumns.length) { this._hiddenColumns = hiddenColumns; - this.fireEvent("popinChange"); + if (hiddenColumns.length) { + this.fireEvent("popinChange", { + poppedColumns: this._hiddenColumns, + }); + } } } diff --git a/packages/main/test/pages/Table.html b/packages/main/test/pages/Table.html index e049b663223a..9902331006a2 100644 --- a/packages/main/test/pages/Table.html +++ b/packages/main/test/pages/Table.html @@ -118,9 +118,9 @@ --> + - -
+

@@ -2832,7 +2832,12 @@ html += test; }); document.getElementById("tbl").insertAdjacentHTML('beforeend', html); - + let table = document.getElementById("tbl"); + const tableLable = document.getElementById("tableLabel"); + + table.addEventListener("popinChange", function (e){ + tableLable.textContent = `Number of poppedColumns: ${e.detail.poppedColumns.length}`; + }) document.getElementById("toggleSticky").addEventListener("click", function(event) { document.getElementById("tbl").stickyColumnHeader = !document.getElementById("tbl").stickyColumnHeader diff --git a/packages/main/test/specs/Table.spec.js b/packages/main/test/specs/Table.spec.js index af341d608911..e093679b49a2 100644 --- a/packages/main/test/specs/Table.spec.js +++ b/packages/main/test/specs/Table.spec.js @@ -34,4 +34,14 @@ describe("Table general interaction", () => { const tblLessCells = browser.$("#tblLessCells"); assert.equal(tblLessCells.isExisting(), true, 'table with more columns is rendered without JS errors.'); }); + + it("tests if popinChange is fired when min-width is reacted (500px)", () => { + let tableLabel = browser.$("#tableLabel"); + const btn = browser.$("#size-btn-500"); + + btn.click(); + browser.pause(300); + + assert.strictEqual(tableLabel.getHTML(false), "Number of poppedColumns: 2", "popinChange should be fired and columns should be 4"); + }); }); From 4ee3f417212f2b61b0c2fe3448bad06b4fb94f4b Mon Sep 17 00:00:00 2001 From: Ivaylo Plashkov Date: Fri, 31 Jan 2020 13:12:56 +0200 Subject: [PATCH 4/4] fixed indentation --- packages/main/src/Table.js | 2 +- packages/main/test/pages/Table.html | 13 +++++++------ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/main/src/Table.js b/packages/main/src/Table.js index 93b1dc9db293..2aa87497811f 100644 --- a/packages/main/src/Table.js +++ b/packages/main/src/Table.js @@ -110,7 +110,7 @@ const metadata = { * Fired when the ui5-table-column is shown as a pop-in instead of hiding it. * * @event - * @param { Array } popped-in columns. + * @param {Array} poppedColumns popped-in columns. * @since 1.0.0-rc.6 * @public */ diff --git a/packages/main/test/pages/Table.html b/packages/main/test/pages/Table.html index 9902331006a2..e91fd5a4beff 100644 --- a/packages/main/test/pages/Table.html +++ b/packages/main/test/pages/Table.html @@ -2822,6 +2822,9 @@ } }; var html = ''; + const table = document.getElementById("tbl"); + let tableLable = document.getElementById("tableLabel"); + products.ProductCollection.forEach(function (product, index) { var test = "\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t").concat(product.Name, "\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t").concat(product.ProductId, "\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t").concat(product.SupplierName, "\n\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t").concat(product.Width, " x ").concat(product.Depth, " x ").concat(product.Height, " ").concat(product.DimUnit, "\n\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t").concat(product.WeightMeasure, " ").concat(product.WeightUnit, "\n\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t").concat(product.Price, " ").concat(product.CurrencyCode, "\n\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t"); @@ -2832,12 +2835,6 @@ html += test; }); document.getElementById("tbl").insertAdjacentHTML('beforeend', html); - let table = document.getElementById("tbl"); - const tableLable = document.getElementById("tableLabel"); - - table.addEventListener("popinChange", function (e){ - tableLable.textContent = `Number of poppedColumns: ${e.detail.poppedColumns.length}`; - }) document.getElementById("toggleSticky").addEventListener("click", function(event) { document.getElementById("tbl").stickyColumnHeader = !document.getElementById("tbl").stickyColumnHeader @@ -2850,6 +2847,10 @@ document.getElementById("size-btn-500").addEventListener("click", function(event) { document.getElementById("tbl").style.width = "500px"; }); + + table.addEventListener("popinChange", function (e) { + tableLable.textContent = `Number of poppedColumns: ${e.detail.poppedColumns.length}`; + });