From 757328085fe45a6310e7cc990d77cab40bade78d Mon Sep 17 00:00:00 2001 From: Nia Peeva Date: Fri, 19 Feb 2021 19:05:03 +0200 Subject: [PATCH 01/13] feat(ui5-table):SingleSelect and MultiSelect modes introduced --- packages/base/src/types/TableMode.js | 47 ++++ packages/main/src/Table.hbs | 9 + packages/main/src/Table.js | 100 +++++++- packages/main/src/TableCell.js | 8 - packages/main/src/TableRow.hbs | 11 + packages/main/src/TableRow.js | 37 ++- packages/main/src/themes/Table.css | 9 + packages/main/src/themes/TableCell.css | 12 +- packages/main/src/themes/TableRow.css | 52 +++- .../main/src/themes/base/Table-parameters.css | 1 + .../themes/sap_belize/Table-parameters.css | 4 + .../themes/sap_belize/parameters-bundle.css | 2 +- .../sap_belize_hcb/Table-parameters.css | 1 + .../sap_belize_hcw/Table-parameters.css | 1 + packages/main/test/pages/TableSelection.html | 226 ++++++++++++++++++ .../main/test/pages/css/css_variables.css | 1 - packages/theme-base/css-vars-usage.json | 1 + 17 files changed, 501 insertions(+), 21 deletions(-) create mode 100644 packages/base/src/types/TableMode.js create mode 100644 packages/main/src/themes/sap_belize/Table-parameters.css create mode 100644 packages/main/test/pages/TableSelection.html diff --git a/packages/base/src/types/TableMode.js b/packages/base/src/types/TableMode.js new file mode 100644 index 000000000000..e2634422a87d --- /dev/null +++ b/packages/base/src/types/TableMode.js @@ -0,0 +1,47 @@ +import DataType from "./DataType.js"; + +/** + * @lends sap.ui.webcomponents.main.types.TableMode.prototype + * @public + */ +const TableModes = { + /** + * Default mode (no selection). + * @public + * @type {None} + */ + None: "None", + + /** + * Single selection mode (only one list item can be selected). + * @public + * @type {SingleSelect} + */ + SingleSelect: "SingleSelect", + + /** + * Multi selection mode (more than one list item can be selected). + * @public + * @type {MultiSelect} + */ + MultiSelect: "MultiSelect", +}; + +/** + * @class + * Defines the type of ui5-list. + * @constructor + * @author SAP SE + * @alias sap.ui.webcomponents.main.types.TableMode + * @public + * @enum {string} + */ +class TableMode extends DataType { + static isValid(value) { + return !!TableModes[value]; + } +} + +TableMode.generateTypeAccessors(TableModes); + +export default TableMode; diff --git a/packages/main/src/Table.hbs b/packages/main/src/Table.hbs index e013e8f1de84..9e26580c65eb 100644 --- a/packages/main/src/Table.hbs +++ b/packages/main/src/Table.hbs @@ -1,6 +1,15 @@ + {{#if isMultiSelect}} + + {{/if}} + {{#each visibleColumns}} {{/each}} diff --git a/packages/main/src/Table.js b/packages/main/src/Table.js index 57d2aa379f59..1275e98833ef 100644 --- a/packages/main/src/Table.js +++ b/packages/main/src/Table.js @@ -5,6 +5,7 @@ import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js"; import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js"; import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; +import TableMode from "@ui5/webcomponents-base/dist/types/TableMode.js"; // Texts import { TABLE_LOAD_MORE_TEXT } from "./generated/i18n/i18n-defaults.js"; @@ -156,6 +157,17 @@ const metadata = { type: Boolean, }, + /** + * Defines the mode of the component (None, SingleSelect, MultiSelect). + * @type {TableMode} + * @defaultvalue "None" + * @public + */ + mode: { + type: TableMode, + defaultValue: TableMode.None, + }, + _hiddenColumns: { type: Object, multiple: true, @@ -217,6 +229,22 @@ const metadata = { * @since 1.0.0-rc.11 */ "load-more": {}, + + /** + * Fired when selection is changed by user interaction + * in SingleSelect and MultiSelect modes. + * + * @event sap.ui.webcomponents.main.Table#selection-change + * @param {Array} selectedRows An array of the selected items. + * @param {Array} previouslySelectedRows An array of the previously selected items. + * @public + */ + "selection-change": { + detail: { + selectedRows: { type: Array }, + previouslySelectedRows: { type: Array }, + }, + }, }, }; @@ -294,6 +322,8 @@ class Table extends UI5Element { this._handleResize = this.popinContent.bind(this); this.i18nBundle = getI18nBundle("@ui5/webcomponents"); + this.addEventListener("selection-requested", this._handleMultiSelect.bind(this)); + this.addEventListener("row-click", this._handleSingleSelect.bind(this)); } onBeforeRendering() { @@ -308,6 +338,7 @@ class Table extends UI5Element { row.removeEventListener("ui5-_focused", this.fnOnRowFocused); row.addEventListener("ui5-_focused", this.fnOnRowFocused); + row.mode = this.mode; }); this.visibleColumns = this.columns.filter((column, index) => { @@ -359,6 +390,67 @@ class Table extends UI5Element { this.fireEvent("load-more"); } + _handleSingleSelect(event) { + const row = this.getRowParent(event.target); + if (this.mode === "SingleSelect" && !row.selected) { + const previouslySelectedRows = this.rows.filter(item => item.selected); + this.rows.forEach(item => { + if (item.selected) { + item.selected = false; + } + }); + row.selected = true; + this.fireEvent("selection-change", { + selectedRows: [row], + previouslySelectedRows, + }); + } + } + + _handleMultiSelect(event) { + const row = this.getRowParent(event.target); + const previouslySelectedRows = this.rows.filter(item => item.selected); + + row.selected = !row.selected; + + const selectedRows = this.rows.filter(item => item.selected); + + this.fireEvent("selection-change", { + selectedRows, + previouslySelectedRows, + }); + } + + _selectAll(event) { + const bAllSelected = event.target.checked; + const previouslySelectedRows = this.rows.filter(row => row.selected); + + this.rows.forEach(row => { + row.selected = bAllSelected; + }); + + const selectedRows = bAllSelected ? this.rows : []; + + this.fireEvent("selection-change", { + selectedRows, + previouslySelectedRows, + }); + } + + getRowParent(child) { + const parent = child.parentElement; + + if (child.hasAttribute("ui5-table-row")) { + return child; + } + + if (parent && parent.hasAttribute("ui5-table-row")) { + return parent; + } + + this.getRowParent(parent); + } + getColumnHeader() { return this.getDomRef() && this.getDomRef().querySelector(`#${this._id}-columnHeader`); } @@ -383,7 +475,9 @@ class Table extends UI5Element { }); if (visibleColumnsIndexes.length) { - this.columns[visibleColumnsIndexes[0]].first = true; + if (!this.isMultiSelect) { + this.columns[visibleColumnsIndexes[0]].first = true; + } this.columns[visibleColumnsIndexes[visibleColumnsIndexes.length - 1]].last = true; } @@ -428,6 +522,10 @@ class Table extends UI5Element { return `${this._id}-showMore-text`; } + + get isMultiSelect() { + return this.mode === "MultiSelect"; + } } Table.define(); diff --git a/packages/main/src/TableCell.js b/packages/main/src/TableCell.js index 07d809f2cede..feca8e5a59e2 100644 --- a/packages/main/src/TableCell.js +++ b/packages/main/src/TableCell.js @@ -23,14 +23,6 @@ const metadata = { }, }, properties: /** @lends sap.ui.webcomponents.main.TableCell.prototype */ { - - /** - * @private - */ - firstInRow: { - type: Boolean, - }, - /** * @private */ diff --git a/packages/main/src/TableRow.hbs b/packages/main/src/TableRow.hbs index 11278c07f160..bac8bf62ba99 100644 --- a/packages/main/src/TableRow.hbs +++ b/packages/main/src/TableRow.hbs @@ -8,6 +8,17 @@ part="row" role="row" > + + {{#if isMultiSelect}} + + {{/if}} + {{#if shouldPopin}} {{#each visibleCells}} diff --git a/packages/main/src/TableRow.js b/packages/main/src/TableRow.js index 6e34a26d39fe..5014c4fa4f29 100644 --- a/packages/main/src/TableRow.js +++ b/packages/main/src/TableRow.js @@ -1,4 +1,5 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import TableMode from "@ui5/webcomponents-base/dist/types/TableMode.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; import TableRowTemplate from "./generated/templates/TableRowTemplate.lit.js"; @@ -28,6 +29,26 @@ const metadata = { }, }, properties: /** @lends sap.ui.webcomponents.main.TableRow.prototype */ { + /** + * Defines the mode of the row (None, SingleSelect, MultiSelect). + * @type {TableMode} + * @defaultvalue "None" + * @private + */ + mode: { + type: TableMode, + defaultValue: TableMode.None, + }, + /** + * Defines the row's selected state. + * + * @type {boolean} + * @defaultvalue false + * @private + */ + selected: { + type: Boolean, + }, _columnsInfo: { type: Object, multiple: true, @@ -40,6 +61,13 @@ const metadata = { events: /** @lends sap.ui.webcomponents.main.TableRow.prototype */ { "row-click": {}, _focused: {}, + /** + * Fired on selection change of a row in MultiSelect mode. + * + * @event sap.ui.webcomponents.main.TableRow#selection-requested + * @private + */ + "selection-requested": {}, }, }; @@ -94,6 +122,10 @@ class TableRow extends UI5Element { this.fireEvent("row-click", { row: this }); } + _handleMultiSelection() { + this.fireEvent("selection-requested", { row: this }); + } + _getActiveElementTagName() { return document.activeElement.localName.toLocaleLowerCase(); } @@ -130,7 +162,6 @@ class TableRow extends UI5Element { if (info.visible) { this.visibleCells.push(cell); - cell.firstInRow = (index === 0); cell.popined = false; } else if (info.demandPopin) { const popinHeaderClass = this.popinCells.length === 0 ? "popin-header" : ""; @@ -165,6 +196,10 @@ class TableRow extends UI5Element { }).join(" "); } + get isMultiSelect() { + return this.mode === "MultiSelect"; + } + getCellText(cell) { return this.getNormilzedTextContent(cell.textContent); } diff --git a/packages/main/src/themes/Table.css b/packages/main/src/themes/Table.css index 0160aea72706..dae980aecdd1 100644 --- a/packages/main/src/themes/Table.css +++ b/packages/main/src/themes/Table.css @@ -47,3 +47,12 @@ tr { :host([_no-data-displayed]) { border-bottom: 1px solid var(--sapList_TableGroupHeaderBorderColor); } + +.ui5-table-select-all-column { + width: var(--ui5_table_multiselect_column_width); + text-align: center; +} + +th { + background: var(--sapList_HeaderBackground); +} \ No newline at end of file diff --git a/packages/main/src/themes/TableCell.css b/packages/main/src/themes/TableCell.css index fdf297396169..a50ee59ead71 100644 --- a/packages/main/src/themes/TableCell.css +++ b/packages/main/src/themes/TableCell.css @@ -9,21 +9,21 @@ } td { - padding: .5rem .25rem; + padding: inherit; box-sizing: border-box; word-break: break-word; + vertical-align: middle; } -:host([first-in-row]) td, .ui5-table-popin-row td { padding-left: 1rem; } -:host([first-in-row]) td { - padding-left: 1rem; -} - :host([popined]) td { padding-left: 0; } + +::slotted(*) { + color: inherit; +} \ No newline at end of file diff --git a/packages/main/src/themes/TableRow.css b/packages/main/src/themes/TableRow.css index 874139123572..84e787f32d9d 100644 --- a/packages/main/src/themes/TableRow.css +++ b/packages/main/src/themes/TableRow.css @@ -4,20 +4,21 @@ .ui5-table-row-root { background-color: var(--sapList_Background); + color: var(--sapList_TextColor); border-top: 1px solid var(--sapList_BorderColor); } .ui5-table-row-root:focus { outline: var(--ui5_table_row_outline_width) dotted var(--sapContent_FocusColor); - outline-offset: -0.125rem; + outline-offset: -0.0625rem; } .ui5-table-popin-row { - background-color: var(--sapList_Background); + background-color: var(--sapList_Background); } .ui5-table-popin-row.all-columns-popped-in.popin-header { - border-top: 1px solid var(--sapList_BorderColor); + border-top: 1px solid var(--sapList_BorderColor); } .ui5-table-popin-row td { @@ -30,3 +31,48 @@ font-family: "72override", var(--sapFontFamily); font-size: var(--sapFontSize); } + +.ui5-table-multi-select-cell { + padding: .25rem 0; + box-sizing: border-box; + text-align: center; +} + +:host([mode="SingleSelect"]) .ui5-table-row-root { + cursor: pointer; +} +:host([mode="MultiSelect"]) .ui5-table-row-root .ui5-table-multi-select-cell { + cursor: pointer; +} + +:host([mode="SingleSelect"]) .ui5-table-row-root:hover, +:host([mode="MultiSelect"]) .ui5-table-row-root:hover { + background-color: var(--sapList_Hover_Background); +} + +:host([mode="SingleSelect"]) .ui5-table-row-root:active, +:host([mode="MultiSelect"]) .ui5-table-row-root:active { + background-color: var(--sapList_Active_Background); +} + +:host([selected]) .ui5-table-row-root { + background: var(--sapList_SelectionBackgroundColor); + border-bottom: 1px solid var(--sapList_SelectionBorderColor); +} + +:host([selected]) .ui5-table-row-root:hover { + background: var(--sapList_Hover_SelectionBackground); +} +:host([selected]) .ui5-table-row-root:active, +:host([selected]) .ui5-table-row-root:active { + background-color: var(--sapList_Active_Background); +} + +:host([mode="SingleSelect"]) .ui5-table-row-root:active ::slotted(ui5-table-cell), +:host([mode="MultiSelect"]) .ui5-table-row-root:active ::slotted(ui5-table-cell) { + color: var(--sapList_Active_TextColor); +} + +:host ::slotted(ui5-table-cell) { + padding: .5rem .25rem; +} \ No newline at end of file diff --git a/packages/main/src/themes/base/Table-parameters.css b/packages/main/src/themes/base/Table-parameters.css index f618067240b0..376027128c0f 100644 --- a/packages/main/src/themes/base/Table-parameters.css +++ b/packages/main/src/themes/base/Table-parameters.css @@ -1,3 +1,4 @@ :root { --ui5_table_header_row_outline_width: 1px; + --ui5_table_multiselect_column_width: 2.75rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize/Table-parameters.css b/packages/main/src/themes/sap_belize/Table-parameters.css new file mode 100644 index 000000000000..82ce6550ff42 --- /dev/null +++ b/packages/main/src/themes/sap_belize/Table-parameters.css @@ -0,0 +1,4 @@ +:root { + --ui5_table_header_row_outline_width: 1px; + --ui5_table_multiselect_column_width: 3rem; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/packages/main/src/themes/sap_belize/parameters-bundle.css index 56f074e0579b..97c6ac84d5e6 100644 --- a/packages/main/src/themes/sap_belize/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize/parameters-bundle.css @@ -24,7 +24,7 @@ @import "../base/Select-parameters.css"; @import "../base/Switch-parameters.css"; @import "./TabContainer-parameters.css"; -@import "../base/Table-parameters.css"; +@import "./Table-parameters.css"; @import "../base/TableRow-parameters.css"; @import "../base/TableLoadMoreRow-parameters.css"; @import "../base/TextArea-parameters.css"; diff --git a/packages/main/src/themes/sap_belize_hcb/Table-parameters.css b/packages/main/src/themes/sap_belize_hcb/Table-parameters.css index 06f50e37eed1..7359695d79d4 100644 --- a/packages/main/src/themes/sap_belize_hcb/Table-parameters.css +++ b/packages/main/src/themes/sap_belize_hcb/Table-parameters.css @@ -2,4 +2,5 @@ :root { --ui5_table_header_row_outline_width: 0.125rem; + --ui5_table_multiselect_column_width: 3rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcw/Table-parameters.css b/packages/main/src/themes/sap_belize_hcw/Table-parameters.css index 06f50e37eed1..7359695d79d4 100644 --- a/packages/main/src/themes/sap_belize_hcw/Table-parameters.css +++ b/packages/main/src/themes/sap_belize_hcw/Table-parameters.css @@ -2,4 +2,5 @@ :root { --ui5_table_header_row_outline_width: 0.125rem; + --ui5_table_multiselect_column_width: 3rem; } \ No newline at end of file diff --git a/packages/main/test/pages/TableSelection.html b/packages/main/test/pages/TableSelection.html new file mode 100644 index 000000000000..41ad573dddfa --- /dev/null +++ b/packages/main/test/pages/TableSelection.html @@ -0,0 +1,226 @@ + + + + + + + Web components Table + + + + + + + + + + + + + + + Product + + + Supplier + + + Dimensions + + + Weight + + + Price + + + + + Notebook Basic 15 + + + Very Best Screens + + + 30 x 18 x 3 cm + + + 4.2 KG + + + 956 EUR + + + + + + Notebook Basic 17 + + + Very Best Screens + + + 29 x 17 x 3.1 cm + + + 4.5 KG + + + 1249 EUR + + + + + + Notebook Basic 18 + + + Very Best Screens + + + 28 x 19 x 2.5 cm + + + 4.2 KG + + + 1570 EUR + + + + + + Notebook Basic 19 + + + Smartcards + + + 32 x 21 x 4 cm + + + 4.2 KG + + + 1650 EUR + + + + + +
+
+
+
+
+
+ + + + + Product + + + Supplier + + + Dimensions + + + Weight + + + Price + + + + + Notebook Basic 15 + + + Very Best Screens + + + 30 x 18 x 3 cm + + + 4.2 KG + + + 956 EUR + + + + + + Notebook Basic 17 + + + Very Best Screens + + + 29 x 17 x 3.1 cm + + + 4.5 KG + + + 1249 EUR + + + + + + Notebook Basic 18 + + + Very Best Screens + + + 28 x 19 x 2.5 cm + + + 4.2 KG + + + 1570 EUR + + + + + + Notebook Basic 19 + + + Smartcards + + + 32 x 21 x 4 cm + + + 4.2 KG + + + 1650 EUR + + + + + + + + \ No newline at end of file diff --git a/packages/main/test/pages/css/css_variables.css b/packages/main/test/pages/css/css_variables.css index 071c6db06037..ea237dfc5961 100644 --- a/packages/main/test/pages/css/css_variables.css +++ b/packages/main/test/pages/css/css_variables.css @@ -327,7 +327,6 @@ --sapList_TableGroupHeaderTextColor: #2d8ae6; --sapList_TableFooterBorder: #d8d8d8; --sapList_TableFixedBorderColor: #d8d8d8; - --sapList_Active_Background: #0854a0; --sapScrollBar_FaceColor: #949494; --sapScrollBar_TrackColor: #fff; --sapScrollBar_BorderColor: #949494; diff --git a/packages/theme-base/css-vars-usage.json b/packages/theme-base/css-vars-usage.json index da9477920b1f..36dd6e977e8b 100644 --- a/packages/theme-base/css-vars-usage.json +++ b/packages/theme-base/css-vars-usage.json @@ -172,6 +172,7 @@ "--sapList_SelectionBorderColor", "--sapList_TableGroupHeaderBorderColor", "--sapList_TableGroupHeaderTextColor", + "--sapList_TextColor", "--sapNegativeColor", "--sapNegativeElementColor", "--sapNegativeTextColor", From c45ef636a7401d86b8b89bf7842999ed988c879e Mon Sep 17 00:00:00 2001 From: Nia Peeva Date: Fri, 19 Feb 2021 19:05:03 +0200 Subject: [PATCH 02/13] feat(ui5-table):SingleSelect and MultiSelect modes introduced --- packages/base/src/types/TableMode.js | 47 ++++ packages/main/src/Table.hbs | 9 + packages/main/src/Table.js | 100 +++++++- packages/main/src/TableCell.js | 8 - packages/main/src/TableRow.hbs | 11 + packages/main/src/TableRow.js | 37 ++- packages/main/src/themes/Table.css | 7 + packages/main/src/themes/TableCell.css | 12 +- packages/main/src/themes/TableRow.css | 52 +++- .../main/src/themes/base/Table-parameters.css | 1 + .../themes/sap_belize/Table-parameters.css | 4 + .../themes/sap_belize/parameters-bundle.css | 2 +- .../sap_belize_hcb/Table-parameters.css | 1 + .../sap_belize_hcw/Table-parameters.css | 1 + packages/main/test/pages/TableSelection.html | 226 ++++++++++++++++++ .../main/test/pages/css/css_variables.css | 1 - packages/theme-base/css-vars-usage.json | 1 + 17 files changed, 499 insertions(+), 21 deletions(-) create mode 100644 packages/base/src/types/TableMode.js create mode 100644 packages/main/src/themes/sap_belize/Table-parameters.css create mode 100644 packages/main/test/pages/TableSelection.html diff --git a/packages/base/src/types/TableMode.js b/packages/base/src/types/TableMode.js new file mode 100644 index 000000000000..e2634422a87d --- /dev/null +++ b/packages/base/src/types/TableMode.js @@ -0,0 +1,47 @@ +import DataType from "./DataType.js"; + +/** + * @lends sap.ui.webcomponents.main.types.TableMode.prototype + * @public + */ +const TableModes = { + /** + * Default mode (no selection). + * @public + * @type {None} + */ + None: "None", + + /** + * Single selection mode (only one list item can be selected). + * @public + * @type {SingleSelect} + */ + SingleSelect: "SingleSelect", + + /** + * Multi selection mode (more than one list item can be selected). + * @public + * @type {MultiSelect} + */ + MultiSelect: "MultiSelect", +}; + +/** + * @class + * Defines the type of ui5-list. + * @constructor + * @author SAP SE + * @alias sap.ui.webcomponents.main.types.TableMode + * @public + * @enum {string} + */ +class TableMode extends DataType { + static isValid(value) { + return !!TableModes[value]; + } +} + +TableMode.generateTypeAccessors(TableModes); + +export default TableMode; diff --git a/packages/main/src/Table.hbs b/packages/main/src/Table.hbs index 425940bb9c93..f7a7b0fc96c1 100644 --- a/packages/main/src/Table.hbs +++ b/packages/main/src/Table.hbs @@ -6,6 +6,15 @@
+ + + + + +
+ {{#if isMultiSelect}} + + {{/if}} + {{#each visibleColumns}} {{/each}} diff --git a/packages/main/src/Table.js b/packages/main/src/Table.js index 40036d2ddf58..7ee26383da90 100644 --- a/packages/main/src/Table.js +++ b/packages/main/src/Table.js @@ -9,6 +9,7 @@ import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18 import debounce from "@ui5/webcomponents-base/dist/util/debounce.js"; import TableGrowingMode from "./types/TableGrowingMode.js"; import BusyIndicator from "./BusyIndicator.js"; +import TableMode from "@ui5/webcomponents-base/dist/types/TableMode.js"; // Texts import { TABLE_LOAD_MORE_TEXT } from "./generated/i18n/i18n-defaults.js"; @@ -190,6 +191,17 @@ const metadata = { type: Boolean, }, + /** + * Defines the mode of the component (None, SingleSelect, MultiSelect). + * @type {TableMode} + * @defaultvalue "None" + * @public + */ + mode: { + type: TableMode, + defaultValue: TableMode.None, + }, + _hiddenColumns: { type: Object, multiple: true, @@ -261,6 +273,22 @@ const metadata = { * @since 1.0.0-rc.11 */ "load-more": {}, + + /** + * Fired when selection is changed by user interaction + * in SingleSelect and MultiSelect modes. + * + * @event sap.ui.webcomponents.main.Table#selection-change + * @param {Array} selectedRows An array of the selected items. + * @param {Array} previouslySelectedRows An array of the previously selected items. + * @public + */ + "selection-change": { + detail: { + selectedRows: { type: Array }, + previouslySelectedRows: { type: Array }, + }, + }, }, }; @@ -344,6 +372,8 @@ class Table extends UI5Element { this.i18nBundle = getI18nBundle("@ui5/webcomponents"); this.tableEndObserved = false; + this.addEventListener("selection-requested", this._handleMultiSelect.bind(this)); + this.addEventListener("row-click", this._handleSingleSelect.bind(this)); } onBeforeRendering() { @@ -359,6 +389,7 @@ class Table extends UI5Element { row._busy = this.busy; row.removeEventListener("ui5-_focused", this.fnOnRowFocused); row.addEventListener("ui5-_focused", this.fnOnRowFocused); + row.mode = this.mode; }); this.visibleColumns = this.columns.filter((column, index) => { @@ -445,6 +476,67 @@ class Table extends UI5Element { this.fireEvent("load-more"); } + _handleSingleSelect(event) { + const row = this.getRowParent(event.target); + if (this.mode === "SingleSelect" && !row.selected) { + const previouslySelectedRows = this.rows.filter(item => item.selected); + this.rows.forEach(item => { + if (item.selected) { + item.selected = false; + } + }); + row.selected = true; + this.fireEvent("selection-change", { + selectedRows: [row], + previouslySelectedRows, + }); + } + } + + _handleMultiSelect(event) { + const row = this.getRowParent(event.target); + const previouslySelectedRows = this.rows.filter(item => item.selected); + + row.selected = !row.selected; + + const selectedRows = this.rows.filter(item => item.selected); + + this.fireEvent("selection-change", { + selectedRows, + previouslySelectedRows, + }); + } + + _selectAll(event) { + const bAllSelected = event.target.checked; + const previouslySelectedRows = this.rows.filter(row => row.selected); + + this.rows.forEach(row => { + row.selected = bAllSelected; + }); + + const selectedRows = bAllSelected ? this.rows : []; + + this.fireEvent("selection-change", { + selectedRows, + previouslySelectedRows, + }); + } + + getRowParent(child) { + const parent = child.parentElement; + + if (child.hasAttribute("ui5-table-row")) { + return child; + } + + if (parent && parent.hasAttribute("ui5-table-row")) { + return parent; + } + + this.getRowParent(parent); + } + getColumnHeader() { return this.getDomRef() && this.getDomRef().querySelector(`#${this._id}-columnHeader`); } @@ -478,7 +570,9 @@ class Table extends UI5Element { }); if (visibleColumnsIndexes.length) { - this.columns[visibleColumnsIndexes[0]].first = true; + if (!this.isMultiSelect) { + this.columns[visibleColumnsIndexes[0]].first = true; + } this.columns[visibleColumnsIndexes[visibleColumnsIndexes.length - 1]].last = true; } @@ -578,6 +672,10 @@ class Table extends UI5Element { && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } + + get isMultiSelect() { + return this.mode === "MultiSelect"; + } } Table.define(); diff --git a/packages/main/src/TableCell.js b/packages/main/src/TableCell.js index 07d809f2cede..feca8e5a59e2 100644 --- a/packages/main/src/TableCell.js +++ b/packages/main/src/TableCell.js @@ -23,14 +23,6 @@ const metadata = { }, }, properties: /** @lends sap.ui.webcomponents.main.TableCell.prototype */ { - - /** - * @private - */ - firstInRow: { - type: Boolean, - }, - /** * @private */ diff --git a/packages/main/src/TableRow.hbs b/packages/main/src/TableRow.hbs index 11278c07f160..bac8bf62ba99 100644 --- a/packages/main/src/TableRow.hbs +++ b/packages/main/src/TableRow.hbs @@ -8,6 +8,17 @@ part="row" role="row" > + + {{#if isMultiSelect}} + + {{/if}} + {{#if shouldPopin}} {{#each visibleCells}} diff --git a/packages/main/src/TableRow.js b/packages/main/src/TableRow.js index 382a46b85a99..7b23a3ad8081 100644 --- a/packages/main/src/TableRow.js +++ b/packages/main/src/TableRow.js @@ -1,4 +1,5 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import TableMode from "@ui5/webcomponents-base/dist/types/TableMode.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; import TableRowTemplate from "./generated/templates/TableRowTemplate.lit.js"; @@ -28,6 +29,26 @@ const metadata = { }, }, properties: /** @lends sap.ui.webcomponents.main.TableRow.prototype */ { + /** + * Defines the mode of the row (None, SingleSelect, MultiSelect). + * @type {TableMode} + * @defaultvalue "None" + * @private + */ + mode: { + type: TableMode, + defaultValue: TableMode.None, + }, + /** + * Defines the row's selected state. + * + * @type {boolean} + * @defaultvalue false + * @private + */ + selected: { + type: Boolean, + }, _columnsInfo: { type: Object, multiple: true, @@ -43,6 +64,13 @@ const metadata = { events: /** @lends sap.ui.webcomponents.main.TableRow.prototype */ { "row-click": {}, _focused: {}, + /** + * Fired on selection change of a row in MultiSelect mode. + * + * @event sap.ui.webcomponents.main.TableRow#selection-requested + * @private + */ + "selection-requested": {}, }, }; @@ -97,6 +125,10 @@ class TableRow extends UI5Element { this.fireEvent("row-click", { row: this }); } + _handleMultiSelection() { + this.fireEvent("selection-requested", { row: this }); + } + _getActiveElementTagName() { return document.activeElement.localName.toLocaleLowerCase(); } @@ -133,7 +165,6 @@ class TableRow extends UI5Element { if (info.visible) { this.visibleCells.push(cell); - cell.firstInRow = (index === 0); cell.popined = false; } else if (info.demandPopin) { const popinHeaderClass = this.popinCells.length === 0 ? "popin-header" : ""; @@ -168,6 +199,10 @@ class TableRow extends UI5Element { }).join(" "); } + get isMultiSelect() { + return this.mode === "MultiSelect"; + } + getCellText(cell) { return this.getNormilzedTextContent(cell.textContent); } diff --git a/packages/main/src/themes/Table.css b/packages/main/src/themes/Table.css index 25e3feed15c8..bc8fad0b49b5 100644 --- a/packages/main/src/themes/Table.css +++ b/packages/main/src/themes/Table.css @@ -75,4 +75,11 @@ tr { :host([busy]) .ui5-table-load-more-row { opacity: 0.72; +.ui5-table-select-all-column { + width: var(--ui5_table_multiselect_column_width); + text-align: center; +} + +th { + background: var(--sapList_HeaderBackground); } \ No newline at end of file diff --git a/packages/main/src/themes/TableCell.css b/packages/main/src/themes/TableCell.css index fdf297396169..a50ee59ead71 100644 --- a/packages/main/src/themes/TableCell.css +++ b/packages/main/src/themes/TableCell.css @@ -9,21 +9,21 @@ } td { - padding: .5rem .25rem; + padding: inherit; box-sizing: border-box; word-break: break-word; + vertical-align: middle; } -:host([first-in-row]) td, .ui5-table-popin-row td { padding-left: 1rem; } -:host([first-in-row]) td { - padding-left: 1rem; -} - :host([popined]) td { padding-left: 0; } + +::slotted(*) { + color: inherit; +} \ No newline at end of file diff --git a/packages/main/src/themes/TableRow.css b/packages/main/src/themes/TableRow.css index b712b6270ca9..ef716c9c34da 100644 --- a/packages/main/src/themes/TableRow.css +++ b/packages/main/src/themes/TableRow.css @@ -9,20 +9,21 @@ .ui5-table-row-root { background-color: var(--sapList_Background); + color: var(--sapList_TextColor); border-top: 1px solid var(--sapList_BorderColor); } .ui5-table-row-root:focus { outline: var(--ui5_table_row_outline_width) dotted var(--sapContent_FocusColor); - outline-offset: -0.125rem; + outline-offset: -0.0625rem; } .ui5-table-popin-row { - background-color: var(--sapList_Background); + background-color: var(--sapList_Background); } .ui5-table-popin-row.all-columns-popped-in.popin-header { - border-top: 1px solid var(--sapList_BorderColor); + border-top: 1px solid var(--sapList_BorderColor); } .ui5-table-popin-row td { @@ -35,3 +36,48 @@ font-family: "72override", var(--sapFontFamily); font-size: var(--sapFontSize); } + +.ui5-table-multi-select-cell { + padding: .25rem 0; + box-sizing: border-box; + text-align: center; +} + +:host([mode="SingleSelect"]) .ui5-table-row-root { + cursor: pointer; +} +:host([mode="MultiSelect"]) .ui5-table-row-root .ui5-table-multi-select-cell { + cursor: pointer; +} + +:host([mode="SingleSelect"]) .ui5-table-row-root:hover, +:host([mode="MultiSelect"]) .ui5-table-row-root:hover { + background-color: var(--sapList_Hover_Background); +} + +:host([mode="SingleSelect"]) .ui5-table-row-root:active, +:host([mode="MultiSelect"]) .ui5-table-row-root:active { + background-color: var(--sapList_Active_Background); +} + +:host([selected]) .ui5-table-row-root { + background: var(--sapList_SelectionBackgroundColor); + border-bottom: 1px solid var(--sapList_SelectionBorderColor); +} + +:host([selected]) .ui5-table-row-root:hover { + background: var(--sapList_Hover_SelectionBackground); +} +:host([selected]) .ui5-table-row-root:active, +:host([selected]) .ui5-table-row-root:active { + background-color: var(--sapList_Active_Background); +} + +:host([mode="SingleSelect"]) .ui5-table-row-root:active ::slotted(ui5-table-cell), +:host([mode="MultiSelect"]) .ui5-table-row-root:active ::slotted(ui5-table-cell) { + color: var(--sapList_Active_TextColor); +} + +:host ::slotted(ui5-table-cell) { + padding: .5rem .25rem; +} \ No newline at end of file diff --git a/packages/main/src/themes/base/Table-parameters.css b/packages/main/src/themes/base/Table-parameters.css index f618067240b0..376027128c0f 100644 --- a/packages/main/src/themes/base/Table-parameters.css +++ b/packages/main/src/themes/base/Table-parameters.css @@ -1,3 +1,4 @@ :root { --ui5_table_header_row_outline_width: 1px; + --ui5_table_multiselect_column_width: 2.75rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize/Table-parameters.css b/packages/main/src/themes/sap_belize/Table-parameters.css new file mode 100644 index 000000000000..82ce6550ff42 --- /dev/null +++ b/packages/main/src/themes/sap_belize/Table-parameters.css @@ -0,0 +1,4 @@ +:root { + --ui5_table_header_row_outline_width: 1px; + --ui5_table_multiselect_column_width: 3rem; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/packages/main/src/themes/sap_belize/parameters-bundle.css index 4f4e9cb3c985..c19928a05e39 100644 --- a/packages/main/src/themes/sap_belize/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize/parameters-bundle.css @@ -25,7 +25,7 @@ @import "../base/Select-parameters.css"; @import "../base/Switch-parameters.css"; @import "./TabContainer-parameters.css"; -@import "../base/Table-parameters.css"; +@import "./Table-parameters.css"; @import "../base/TableRow-parameters.css"; @import "../base/TableLoadMoreRow-parameters.css"; @import "../base/TextArea-parameters.css"; diff --git a/packages/main/src/themes/sap_belize_hcb/Table-parameters.css b/packages/main/src/themes/sap_belize_hcb/Table-parameters.css index 06f50e37eed1..7359695d79d4 100644 --- a/packages/main/src/themes/sap_belize_hcb/Table-parameters.css +++ b/packages/main/src/themes/sap_belize_hcb/Table-parameters.css @@ -2,4 +2,5 @@ :root { --ui5_table_header_row_outline_width: 0.125rem; + --ui5_table_multiselect_column_width: 3rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcw/Table-parameters.css b/packages/main/src/themes/sap_belize_hcw/Table-parameters.css index 06f50e37eed1..7359695d79d4 100644 --- a/packages/main/src/themes/sap_belize_hcw/Table-parameters.css +++ b/packages/main/src/themes/sap_belize_hcw/Table-parameters.css @@ -2,4 +2,5 @@ :root { --ui5_table_header_row_outline_width: 0.125rem; + --ui5_table_multiselect_column_width: 3rem; } \ No newline at end of file diff --git a/packages/main/test/pages/TableSelection.html b/packages/main/test/pages/TableSelection.html new file mode 100644 index 000000000000..41ad573dddfa --- /dev/null +++ b/packages/main/test/pages/TableSelection.html @@ -0,0 +1,226 @@ + + + + + + + Web components Table + + + + + + + + + + + + + + + Product + + + Supplier + + + Dimensions + + + Weight + + + Price + + + + + Notebook Basic 15 + + + Very Best Screens + + + 30 x 18 x 3 cm + + + 4.2 KG + + + 956 EUR + + + + + + Notebook Basic 17 + + + Very Best Screens + + + 29 x 17 x 3.1 cm + + + 4.5 KG + + + 1249 EUR + + + + + + Notebook Basic 18 + + + Very Best Screens + + + 28 x 19 x 2.5 cm + + + 4.2 KG + + + 1570 EUR + + + + + + Notebook Basic 19 + + + Smartcards + + + 32 x 21 x 4 cm + + + 4.2 KG + + + 1650 EUR + + + + + +
+
+
+
+
+
+ + + + + Product + + + Supplier + + + Dimensions + + + Weight + + + Price + + + + + Notebook Basic 15 + + + Very Best Screens + + + 30 x 18 x 3 cm + + + 4.2 KG + + + 956 EUR + + + + + + Notebook Basic 17 + + + Very Best Screens + + + 29 x 17 x 3.1 cm + + + 4.5 KG + + + 1249 EUR + + + + + + Notebook Basic 18 + + + Very Best Screens + + + 28 x 19 x 2.5 cm + + + 4.2 KG + + + 1570 EUR + + + + + + Notebook Basic 19 + + + Smartcards + + + 32 x 21 x 4 cm + + + 4.2 KG + + + 1650 EUR + + + + + + + + \ No newline at end of file diff --git a/packages/main/test/pages/css/css_variables.css b/packages/main/test/pages/css/css_variables.css index 071c6db06037..ea237dfc5961 100644 --- a/packages/main/test/pages/css/css_variables.css +++ b/packages/main/test/pages/css/css_variables.css @@ -327,7 +327,6 @@ --sapList_TableGroupHeaderTextColor: #2d8ae6; --sapList_TableFooterBorder: #d8d8d8; --sapList_TableFixedBorderColor: #d8d8d8; - --sapList_Active_Background: #0854a0; --sapScrollBar_FaceColor: #949494; --sapScrollBar_TrackColor: #fff; --sapScrollBar_BorderColor: #949494; diff --git a/packages/theme-base/css-vars-usage.json b/packages/theme-base/css-vars-usage.json index da9477920b1f..36dd6e977e8b 100644 --- a/packages/theme-base/css-vars-usage.json +++ b/packages/theme-base/css-vars-usage.json @@ -172,6 +172,7 @@ "--sapList_SelectionBorderColor", "--sapList_TableGroupHeaderBorderColor", "--sapList_TableGroupHeaderTextColor", + "--sapList_TextColor", "--sapNegativeColor", "--sapNegativeElementColor", "--sapNegativeTextColor", From 29466bb6321fd26eb3863b58f93951136eeb39cb Mon Sep 17 00:00:00 2001 From: Nia Peeva Date: Fri, 19 Feb 2021 19:24:22 +0200 Subject: [PATCH 03/13] merge conflict resolved --- packages/main/src/Table.hbs | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/main/src/Table.hbs b/packages/main/src/Table.hbs index 6401451512f9..077797a9b4ae 100644 --- a/packages/main/src/Table.hbs +++ b/packages/main/src/Table.hbs @@ -23,9 +23,6 @@ {{#each rows}} - {{/if}} - - {{#each visibleColumns}} {{/each}} From 49a20b028dedf252f2eea70be91b70ee258af327 Mon Sep 17 00:00:00 2001 From: Nia Peeva Date: Fri, 19 Feb 2021 19:48:45 +0200 Subject: [PATCH 04/13] documentation enhancement --- packages/base/src/types/TableMode.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/base/src/types/TableMode.js b/packages/base/src/types/TableMode.js index e2634422a87d..dbd78776a2b7 100644 --- a/packages/base/src/types/TableMode.js +++ b/packages/base/src/types/TableMode.js @@ -13,14 +13,14 @@ const TableModes = { None: "None", /** - * Single selection mode (only one list item can be selected). + * Single selection mode (only one table row can be selected). * @public * @type {SingleSelect} */ SingleSelect: "SingleSelect", /** - * Multi selection mode (more than one list item can be selected). + * Multi selection mode (more than one table row can be selected). * @public * @type {MultiSelect} */ @@ -29,7 +29,7 @@ const TableModes = { /** * @class - * Defines the type of ui5-list. + * Defines the type of ui5-table. * @constructor * @author SAP SE * @alias sap.ui.webcomponents.main.types.TableMode From b351403290abd0f54b0b085dc1116c2093d1666b Mon Sep 17 00:00:00 2001 From: Nia Peeva Date: Fri, 19 Feb 2021 19:49:54 +0200 Subject: [PATCH 05/13] documentation enhancements --- packages/main/src/Table.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/main/src/Table.js b/packages/main/src/Table.js index 7ee26383da90..c49e01211a21 100644 --- a/packages/main/src/Table.js +++ b/packages/main/src/Table.js @@ -279,8 +279,8 @@ const metadata = { * in SingleSelect and MultiSelect modes. * * @event sap.ui.webcomponents.main.Table#selection-change - * @param {Array} selectedRows An array of the selected items. - * @param {Array} previouslySelectedRows An array of the previously selected items. + * @param {Array} selectedRows An array of the selected rows. + * @param {Array} previouslySelectedRows An array of the previously selected rows. * @public */ "selection-change": { From 4abbb96c00b10f02fc91ceb8b3a4d3a3a21b4d2f Mon Sep 17 00:00:00 2001 From: Nia Peeva Date: Tue, 23 Feb 2021 13:12:24 +0200 Subject: [PATCH 06/13] comments reflected --- packages/main/src/Table.hbs | 2 +- packages/main/src/Table.js | 8 ++ packages/main/src/TableRow.js | 9 +- packages/main/src/themes/TableRow.css | 4 + packages/main/test/samples/Table.sample.html | 108 +++++++++++++++++++ 5 files changed, 128 insertions(+), 3 deletions(-) diff --git a/packages/main/src/Table.hbs b/packages/main/src/Table.hbs index 077797a9b4ae..fa5085ee2de0 100644 --- a/packages/main/src/Table.hbs +++ b/packages/main/src/Table.hbs @@ -8,7 +8,7 @@ {{#if isMultiSelect}}
+ + + + + +
- diff --git a/packages/main/src/Table.js b/packages/main/src/Table.js index c49e01211a21..0527debad8c7 100644 --- a/packages/main/src/Table.js +++ b/packages/main/src/Table.js @@ -195,6 +195,7 @@ const metadata = { * Defines the mode of the component (None, SingleSelect, MultiSelect). * @type {TableMode} * @defaultvalue "None" + * @since 1.0.0-rc.13 * @public */ mode: { @@ -496,11 +497,18 @@ class Table extends UI5Element { _handleMultiSelect(event) { const row = this.getRowParent(event.target); const previouslySelectedRows = this.rows.filter(item => item.selected); + const selectAllCheckbox = this.getDomRef().querySelector(".ui5-table-select-all-checkbox"); row.selected = !row.selected; const selectedRows = this.rows.filter(item => item.selected); + if (selectedRows.length === this.rows.length) { + selectAllCheckbox.checked = true; + } else { + selectAllCheckbox.checked = false; + } + this.fireEvent("selection-change", { selectedRows, previouslySelectedRows, diff --git a/packages/main/src/TableRow.js b/packages/main/src/TableRow.js index 7b23a3ad8081..5c399d660ed5 100644 --- a/packages/main/src/TableRow.js +++ b/packages/main/src/TableRow.js @@ -44,7 +44,8 @@ const metadata = { * * @type {boolean} * @defaultvalue false - * @private + * @since 1.0.0-rc.13 + * @public */ selected: { type: Boolean, @@ -188,7 +189,11 @@ class TableRow extends UI5Element { } get visibleCellsCount() { - return this.visibleCells.length; + if (this.isMultiSelect) { + return this.visibleCells.length + 1; + } else { + return this.visibleCells.length; + } } get ariaLabelText() { diff --git a/packages/main/src/themes/TableRow.css b/packages/main/src/themes/TableRow.css index ef716c9c34da..60e6d932474b 100644 --- a/packages/main/src/themes/TableRow.css +++ b/packages/main/src/themes/TableRow.css @@ -80,4 +80,8 @@ :host ::slotted(ui5-table-cell) { padding: .5rem .25rem; +} + +:host ::slotted(ui5-table-cell:first-child) { + padding-left: 1rem; } \ No newline at end of file diff --git a/packages/main/test/samples/Table.sample.html b/packages/main/test/samples/Table.sample.html index 9794e19d492b..b8ca22a14faa 100644 --- a/packages/main/test/samples/Table.sample.html +++ b/packages/main/test/samples/Table.sample.html @@ -97,6 +97,112 @@

Basic Table

+
+

Table in SingleSelect mode

+
+ + + + Product + + + + Supplier + + + + Dimensions + + + + Weight + + + + Price + + +
+ + 

+<ui5-table class="demo-table" id="singleSelectTable">
+	<!-- Columns -->
+	<ui5-table-column slot="columns">
+		<span>Product</span>
+	</ui5-table-column>
+
+	<ui5-table-column slot="columns">
+		<span>Supplier</span>
+	</ui5-table-column>
+
+	<ui5-table-column slot="columns">
+		<span>Dimensions</span>
+	</ui5-table-column>
+
+	<ui5-table-column slot="columns">
+		<span>Weight</span>
+	</ui5-table-column>
+
+	<ui5-table-column slot="columns">
+		<span>Price</span>
+	</ui5-table-column>		
+</ui5-table>
+
+
+ +
+

Table in MultiSelect mode

+
+ + + + Product + + + + Supplier + + + + Dimensions + + + + Weight + + + + Price + + +
+ + 

+<ui5-table class="demo-table" id="multiSelectTable">
+	<!-- Columns -->
+	<ui5-table-column slot="columns">
+		<span>Product</span>
+	</ui5-table-column>
+
+	<ui5-table-column slot="columns">
+		<span>Supplier</span>
+	</ui5-table-column>
+
+	<ui5-table-column slot="columns">
+		<span>Dimensions</span>
+	</ui5-table-column>
+
+	<ui5-table-column slot="columns">
+		<span>Weight</span>
+	</ui5-table-column>
+
+	<ui5-table-column slot="columns">
+		<span>Price</span>
+	</ui5-table-column>		
+</ui5-table>
+
+
+

Table with No Data

@@ -430,6 +536,8 @@

Table with No Data

+ ''; }); document.getElementById("tbl").insertAdjacentHTML('beforeend', html); + document.getElementById("singleSelectTbl").insertAdjacentHTML('beforeend', html); + document.getElementById("multiSelectTbl").insertAdjacentHTML('beforeend', html); document.getElementById("toggleSticky").addEventListener("click", function(event) { From 13cea0e59a2a6139edf7f67bc10303d229f3d146 Mon Sep 17 00:00:00 2001 From: Nia Peeva Date: Tue, 16 Mar 2021 23:47:42 +0200 Subject: [PATCH 07/13] row type introduced --- packages/main/src/Table.hbs | 6 +- packages/main/src/Table.js | 54 +++++-- packages/main/src/TableRow.hbs | 16 ++- packages/main/src/TableRow.js | 136 +++++++++++++++++- .../main/src/i18n/messagebundle.properties | 9 ++ packages/main/src/themes/TableCell.css | 2 +- packages/main/src/themes/TableRow.css | 17 +-- .../{base => main}/src/types/TableMode.js | 2 +- packages/main/src/types/TableRowType.js | 40 ++++++ packages/main/test/pages/TableSelection.html | 75 ++++++++-- 10 files changed, 314 insertions(+), 43 deletions(-) rename packages/{base => main}/src/types/TableMode.js (92%) create mode 100644 packages/main/src/types/TableRowType.js diff --git a/packages/main/src/Table.hbs b/packages/main/src/Table.hbs index fa5085ee2de0..be49dc9c59c4 100644 --- a/packages/main/src/Table.hbs +++ b/packages/main/src/Table.hbs @@ -5,11 +5,13 @@ - + {{#if isMultiSelect}} - diff --git a/packages/main/src/Table.js b/packages/main/src/Table.js index 0527debad8c7..4c3e9fa027de 100644 --- a/packages/main/src/Table.js +++ b/packages/main/src/Table.js @@ -9,10 +9,14 @@ import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18 import debounce from "@ui5/webcomponents-base/dist/util/debounce.js"; import TableGrowingMode from "./types/TableGrowingMode.js"; import BusyIndicator from "./BusyIndicator.js"; -import TableMode from "@ui5/webcomponents-base/dist/types/TableMode.js"; +import TableMode from "./types/TableMode.js"; // Texts -import { TABLE_LOAD_MORE_TEXT } from "./generated/i18n/i18n-defaults.js"; +import { + TABLE_LOAD_MORE_TEXT, + ARIA_LABEL_SELECT_ALL_CHECKBOX, + TABLE_HEADER_ROW_TEXT, +} from "./generated/i18n/i18n-defaults.js"; // Template import TableTemplate from "./generated/templates/TableTemplate.lit.js"; @@ -235,13 +239,23 @@ const metadata = { _inViewport: { type: Boolean, }, + + /** + * Defines whether all rows are selected or not when table is in MultiSelect mode. + * @type {Boolean} + * @defaultvalue false + * @private + */ + _allRowsSelected: { + type: Boolean + } }, events: /** @lends sap.ui.webcomponents.main.Table.prototype */ { /** - * Fired when a row is clicked. + * Fired when a row is clicked or enter key is pressed. * * @event sap.ui.webcomponents.main.Table#row-click - * @param {HTMLElement} row the clicked row. + * @param {HTMLElement} row the activated row. * @public */ "row-click": { @@ -373,8 +387,7 @@ class Table extends UI5Element { this.i18nBundle = getI18nBundle("@ui5/webcomponents"); this.tableEndObserved = false; - this.addEventListener("selection-requested", this._handleMultiSelect.bind(this)); - this.addEventListener("row-click", this._handleSingleSelect.bind(this)); + this.addEventListener("selection-requested", this._handleSelect.bind(this)); } onBeforeRendering() { @@ -479,7 +492,7 @@ class Table extends UI5Element { _handleSingleSelect(event) { const row = this.getRowParent(event.target); - if (this.mode === "SingleSelect" && !row.selected) { + if (!row.selected) { const previouslySelectedRows = this.rows.filter(item => item.selected); this.rows.forEach(item => { if (item.selected) { @@ -497,16 +510,15 @@ class Table extends UI5Element { _handleMultiSelect(event) { const row = this.getRowParent(event.target); const previouslySelectedRows = this.rows.filter(item => item.selected); - const selectAllCheckbox = this.getDomRef().querySelector(".ui5-table-select-all-checkbox"); row.selected = !row.selected; const selectedRows = this.rows.filter(item => item.selected); if (selectedRows.length === this.rows.length) { - selectAllCheckbox.checked = true; + this._allRowsSelected = true; } else { - selectAllCheckbox.checked = false; + this._allRowsSelected = false; } this.fireEvent("selection-change", { @@ -515,6 +527,15 @@ class Table extends UI5Element { }); } + _handleSelect(event) { + const mappings = { + "SingleSelect": "_handleSingleSelect", + "MultiSelect": "_handleMultiSelect", + } + + this[mappings[this.mode]](event); + } + _selectAll(event) { const bAllSelected = event.target.checked; const previouslySelectedRows = this.rows.filter(row => row.selected); @@ -651,6 +672,19 @@ class Table extends UI5Element { return this.moreText || this.i18nBundle.getText(TABLE_LOAD_MORE_TEXT); } + get ariaLabelText() { + const headerRowText = this.i18nBundle.getText(TABLE_HEADER_ROW_TEXT); + const columnsTitle = this.columns.map((column) => { + return column.textContent.trim(); + }).join(" "); + + return `${headerRowText} ${columnsTitle}`; + } + + get ariaLabelSelectAllText() { + return this.i18nBundle.getText(ARIA_LABEL_SELECT_ALL_CHECKBOX); + } + get loadMoreAriaLabelledBy() { if (this.moreDataText) { return `${this._id}-showMore-text ${this._id}-showMore-desc`; diff --git a/packages/main/src/TableRow.hbs b/packages/main/src/TableRow.hbs index bac8bf62ba99..787b3bd87990 100644 --- a/packages/main/src/TableRow.hbs +++ b/packages/main/src/TableRow.hbs @@ -3,17 +3,29 @@ tabindex="{{_tabIndex}}" @focusin="{{_onfocusin}}" @click="{{_onrowclick}}" + @keydown="{{_onkeydown}}" + @keyup="{{_onkeyup}}" + @mouseup="{{_onmouseup}}" + @touchstart="{{_ontouchstart}}" + @touchend="{{_ontouchend}}" aria-label="{{ariaLabelText}}" + aria-selected="{{this.selected}}" data-sap-focus-ref part="row" role="row" > {{#if isMultiSelect}} - diff --git a/packages/main/src/TableRow.js b/packages/main/src/TableRow.js index 5c399d660ed5..8f4e9e6e1c02 100644 --- a/packages/main/src/TableRow.js +++ b/packages/main/src/TableRow.js @@ -1,7 +1,12 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; -import TableMode from "@ui5/webcomponents-base/dist/types/TableMode.js"; +import TableMode from "./types/TableMode.js"; +import TableRowType from "./types/TableRowType.js"; + import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; import TableRowTemplate from "./generated/templates/TableRowTemplate.lit.js"; +import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js"; +import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; +import { ARIA_LABEL_ROW_SELECTION } from "./generated/i18n/i18n-defaults.js"; // Styles import styles from "./generated/themes/TableRow.css.js"; @@ -39,6 +44,22 @@ const metadata = { type: TableMode, defaultValue: TableMode.None, }, + /** + * Defines the visual indication and behavior of the table row. + * Available options are Inactive (by default) and Active. + *

+ * Note: When set to Active, the item will provide visual response upon press, + * while with type Inactive - will not. + * + * @type {TableRowType} + * @defaultvalue "Inactive" + * @public + */ + type: { + type: TableRowType, + defaultValue: TableRowType.Inactive, + }, + /** * Defines the row's selected state. * @@ -50,6 +71,18 @@ const metadata = { selected: { type: Boolean, }, + + /** + * Indicates if the table row is active. + * + * @type {boolean} + * @defaultvalue false + * @private + */ + active: { + type: Boolean, + }, + _columnsInfo: { type: Object, multiple: true, @@ -66,7 +99,7 @@ const metadata = { "row-click": {}, _focused: {}, /** - * Fired on selection change of a row in MultiSelect mode. + * Fired on selection change of an active row. * * @event sap.ui.webcomponents.main.TableRow#selection-requested * @private @@ -106,27 +139,95 @@ class TableRow extends UI5Element { return TableRowTemplate; } + constructor() { + super(); + + this.i18nBundle = getI18nBundle("@ui5/webcomponents"); + } + + _onmouseup() { + this.deactivate(); + } + + _onkeydown(event) { + const itemActive = this.type === "Active"; + const isSingleSelect = this.isSingleSelect; + const itemSelectable = isSingleSelect || this.isMultiSelect; + const isRowFocused = this._getActiveElementTagName() === "ui5-table-row"; + const checkboxPressed = event.target.classList.contains("ui5-multi-select-checkbox"); + + if (isSpace(event)) { + event.preventDefault(); + } + + if ((isSpace(event) && itemSelectable && !checkboxPressed) || (isEnter(event) && isSingleSelect)) { + this.fireEvent("selection-requested", { row: this }); + } + + if (isEnter(event) && itemActive && isRowFocused) { + this.fireEvent("row-click", { row: this }); + if (!isSingleSelect) { + this.activate(); + } + } + } + + _onkeyup(event) { + if (isSpace(event) || isEnter(event)) { + this.deactivate(); + } + } + + _ontouchstart(event) { + this.activate(); + } + + _ontouchend() { + this.deactivate(); + } + + _onfocusout() { + this.deactivate(); + } + _onfocusin(event, forceSelfFocus = false) { if (forceSelfFocus || this._getActiveElementTagName() === "ui5-table-cell") { - this.getDomRef().focus(); + this.shadowRoot.querySelector(".ui5-table-row-root").focus(); + this.activate(); } this.fireEvent("_focused", event); } _onrowclick(event) { + // If the user tab over a button on IOS device, the document.activeElement + // is the ui5-table-row. The check below ensure that, if a button within the row is pressed, + // the row will not be selected. + if (event.isMarked === "button") { + return; + } + if (this._getActiveElementTagName() === "body") { // If the user clickes on non-focusable element within the ui5-table-cell, // the focus goes to the body, se we have to bring it back to the row. // If the user clicks on input, button or similar clickable element, // the focus remains on that element. this._onfocusin(event, true /* force row focus */); + this.deactivate(); } - this.fireEvent("row-click", { row: this }); + if (this._getActiveElementTagName() === "ui5-table-row") { + if (this.isSingleSelect) { + this._handleSelection(); + } + + if (this.type === "Active") { + this.fireEvent("row-click", { row: this }); + } + } } - _handleMultiSelection() { + _handleSelection() { this.fireEvent("selection-requested", { row: this }); } @@ -134,6 +235,17 @@ class TableRow extends UI5Element { return document.activeElement.localName.toLocaleLowerCase(); } + activate() { + if (this.type === TableRowType.Active) { + this.active = true; + } + } + + deactivate() { + if (this.active) { + this.active = false; + } + } get shouldPopin() { return this._columnsInfo.filter(el => { return el.demandPopin; @@ -204,6 +316,14 @@ class TableRow extends UI5Element { }).join(" "); } + get ariaLabelRowSelection() { + return this.i18nBundle.getText(ARIA_LABEL_ROW_SELECTION); + } + + get isSingleSelect() { + return this.mode === "SingleSelect"; + } + get isMultiSelect() { return this.mode === "MultiSelect"; } @@ -225,6 +345,12 @@ class TableRow extends UI5Element { getNormilzedTextContent(textContent) { return textContent.replace(/[\n\r\t]/g, "").trim(); } + + static async onDefine() { + await Promise.all([ + fetchI18nBundle("@ui5/webcomponents"), + ]); + } } TableRow.define(); diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties index 70505f97cac1..e637d317972e 100644 --- a/packages/main/src/i18n/messagebundle.properties +++ b/packages/main/src/i18n/messagebundle.properties @@ -145,6 +145,15 @@ SWITCH_OFF=Off #XTXT Table "load more" row's text. TABLE_LOAD_MORE_TEXT=More +#XTXT Table's header row text. +TABLE_HEADER_ROW_TEXT=Header Row + +#XACT ARIA label for selection checkbox +ARIA_LABEL_ROW_SELECTION=Item selection + +#XACT ARIA label for select all checkbox in a multiselect mode table +ARIA_LABEL_SELECT_ALL_CHECKBOX=Select All Rows + #XACT: ACC next icon name in tab container TABCONTAINER_NEXT_ICON_ACC_NAME=Next diff --git a/packages/main/src/themes/TableCell.css b/packages/main/src/themes/TableCell.css index a50ee59ead71..0a7ea48759d1 100644 --- a/packages/main/src/themes/TableCell.css +++ b/packages/main/src/themes/TableCell.css @@ -24,6 +24,6 @@ td { padding-left: 0; } -::slotted(*) { +::slotted(ui5-label) { color: inherit; } \ No newline at end of file diff --git a/packages/main/src/themes/TableRow.css b/packages/main/src/themes/TableRow.css index 60e6d932474b..ce2405d9c921 100644 --- a/packages/main/src/themes/TableRow.css +++ b/packages/main/src/themes/TableRow.css @@ -50,13 +50,14 @@ cursor: pointer; } +:host([type="Active"]) .ui5-table-row-root:hover, :host([mode="SingleSelect"]) .ui5-table-row-root:hover, -:host([mode="MultiSelect"]) .ui5-table-row-root:hover { +:host([mode="SingleSelect"]) .ui5-table-row-root:active { background-color: var(--sapList_Hover_Background); } -:host([mode="SingleSelect"]) .ui5-table-row-root:active, -:host([mode="MultiSelect"]) .ui5-table-row-root:active { +:host([type="Active"][active]) .ui5-table-row-root:active, +:host([selected][type="Active"][active]) .ui5-table-row-root:hover { background-color: var(--sapList_Active_Background); } @@ -65,16 +66,12 @@ border-bottom: 1px solid var(--sapList_SelectionBorderColor); } -:host([selected]) .ui5-table-row-root:hover { +:host([selected][type="Active"]) .ui5-table-row-root:hover, +:host([selected][mode="SingleSelect"]) .ui5-table-row-root:hover { background: var(--sapList_Hover_SelectionBackground); } -:host([selected]) .ui5-table-row-root:active, -:host([selected]) .ui5-table-row-root:active { - background-color: var(--sapList_Active_Background); -} -:host([mode="SingleSelect"]) .ui5-table-row-root:active ::slotted(ui5-table-cell), -:host([mode="MultiSelect"]) .ui5-table-row-root:active ::slotted(ui5-table-cell) { +:host([type="Active"][active]) .ui5-table-row-root ::slotted(ui5-table-cell) { color: var(--sapList_Active_TextColor); } diff --git a/packages/base/src/types/TableMode.js b/packages/main/src/types/TableMode.js similarity index 92% rename from packages/base/src/types/TableMode.js rename to packages/main/src/types/TableMode.js index dbd78776a2b7..9f47c7f61152 100644 --- a/packages/base/src/types/TableMode.js +++ b/packages/main/src/types/TableMode.js @@ -1,4 +1,4 @@ -import DataType from "./DataType.js"; +import DataType from "@ui5/webcomponents-base/dist/types/DataType.js"; /** * @lends sap.ui.webcomponents.main.types.TableMode.prototype diff --git a/packages/main/src/types/TableRowType.js b/packages/main/src/types/TableRowType.js new file mode 100644 index 000000000000..4656ebf16bbf --- /dev/null +++ b/packages/main/src/types/TableRowType.js @@ -0,0 +1,40 @@ +import DataType from "@ui5/webcomponents-base/dist/types/DataType.js"; + +/** + * @lends sap.ui.webcomponents.main.types.TableRowType.prototype + * @public + */ +const TableRowTypes = { + /** + * Indicates that the table row does not have any active feedback when item is pressed. + * @public + * @type {Inactive} + */ + Inactive: "Inactive", + + /** + * Indicates that the table row is clickable via active feedback when item is pressed. + * @public + * @type {Active} + */ + Active: "Active", +}; + +/** + * @class + * Different types of TableRow. + * @constructor + * @author SAP SE + * @alias sap.ui.webcomponents.main.types.TableRowType + * @public + * @enum {string} + */ +class TableRowType extends DataType { + static isValid(value) { + return !!TableRowTypes[value]; + } +} + +TableRowType.generateTypeAccessors(TableRowTypes); + +export default TableRowType; diff --git a/packages/main/test/pages/TableSelection.html b/packages/main/test/pages/TableSelection.html index 41ad573dddfa..cd58b3aecff4 100644 --- a/packages/main/test/pages/TableSelection.html +++ b/packages/main/test/pages/TableSelection.html @@ -19,16 +19,21 @@ + +
+ Lower table size to 500px + Products table - resize your browser to make some columns pop-in +
Product - + Supplier - + Dimensions @@ -37,8 +42,11 @@ Price + + Row Type + - + Notebook Basic 15 @@ -54,9 +62,12 @@ 956 EUR + + Active + - + Notebook Basic 17 @@ -72,9 +83,12 @@ 1249 EUR + + Active + - + Notebook Basic 18 @@ -90,6 +104,9 @@ 1570 EUR + + Inactive + @@ -108,6 +125,9 @@ 1650 EUR + + Inactive + @@ -130,14 +150,17 @@ Dimensions - + Weight - + Price + + Row Type + - + Notebook Basic 15 @@ -153,6 +176,9 @@ 956 EUR + + Inactive + @@ -171,9 +197,12 @@ 1249 EUR + + Inactive + - + Notebook Basic 18 @@ -189,9 +218,12 @@ 1570 EUR + + Active + - + Notebook Basic 19 @@ -207,19 +239,38 @@ 1650 EUR + + Active + From 22c66185d4b335651a0dfaa54b198a9b1210fbe7 Mon Sep 17 00:00:00 2001 From: Nia Peeva Date: Wed, 17 Mar 2021 11:16:37 +0200 Subject: [PATCH 08/13] eslint errors fixed --- packages/main/src/Table.js | 8 ++++---- packages/main/src/TableRow.js | 20 +++++++++++--------- 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/packages/main/src/Table.js b/packages/main/src/Table.js index af3f2f772e30..3945f1ae3452 100644 --- a/packages/main/src/Table.js +++ b/packages/main/src/Table.js @@ -247,8 +247,8 @@ const metadata = { * @private */ _allRowsSelected: { - type: Boolean - } + type: Boolean, + }, }, events: /** @lends sap.ui.webcomponents.main.Table.prototype */ { /** @@ -531,7 +531,7 @@ class Table extends UI5Element { const mappings = { "SingleSelect": "_handleSingleSelect", "MultiSelect": "_handleMultiSelect", - } + }; this[mappings[this.mode]](event); } @@ -674,7 +674,7 @@ class Table extends UI5Element { get ariaLabelText() { const headerRowText = this.i18nBundle.getText(TABLE_HEADER_ROW_TEXT); - const columnsTitle = this.columns.map((column) => { + const columnsTitle = this.columns.map(column => { return column.textContent.trim(); }).join(" "); diff --git a/packages/main/src/TableRow.js b/packages/main/src/TableRow.js index 42cc18bc0c42..fc0c694e9407 100644 --- a/packages/main/src/TableRow.js +++ b/packages/main/src/TableRow.js @@ -1,11 +1,10 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js"; +import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; +import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; import TableMode from "./types/TableMode.js"; import TableRowType from "./types/TableRowType.js"; - -import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; import TableRowTemplate from "./generated/templates/TableRowTemplate.lit.js"; -import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js"; -import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import { ARIA_LABEL_ROW_SELECTION } from "./generated/i18n/i18n-defaults.js"; // Styles @@ -164,7 +163,7 @@ class TableRow extends UI5Element { if ((isSpace(event) && itemSelectable && !checkboxPressed) || (isEnter(event) && isSingleSelect)) { this.fireEvent("selection-requested", { row: this }); } - + if (isEnter(event) && itemActive && isRowFocused) { this.fireEvent("row-click", { row: this }); if (!isSingleSelect) { @@ -203,7 +202,7 @@ class TableRow extends UI5Element { _onrowclick(event) { // If the user tab over a button on IOS device, the document.activeElement // is the ui5-table-row. The check below ensure that, if a button within the row is pressed, - // the row will not be selected. + // the row will not be selected. if (event.isMarked === "button") { return; } @@ -247,6 +246,7 @@ class TableRow extends UI5Element { this.active = false; } } + get shouldPopin() { return this._columnsInfo.filter(el => { return el.demandPopin; @@ -302,11 +302,13 @@ class TableRow extends UI5Element { } get visibleCellsCount() { + let visibleCellsCount = this.visibleCells.length; + if (this.isMultiSelect) { - return this.visibleCells.length + 1; - } else { - return this.visibleCells.length; + visibleCellsCount += 1; } + + return visibleCellsCount; } get ariaLabelText() { From 2b5931ca138248f3b414f22fe3c4e42837bfa7be Mon Sep 17 00:00:00 2001 From: Nia Peeva Date: Thu, 18 Mar 2021 12:19:39 +0200 Subject: [PATCH 09/13] merge conflicts resolved --- packages/main/src/Table.js | 2 +- packages/main/src/TableRow.js | 16 ---------------- 2 files changed, 1 insertion(+), 17 deletions(-) diff --git a/packages/main/src/Table.js b/packages/main/src/Table.js index 84534c3858be..5f3fbc4c6ab9 100644 --- a/packages/main/src/Table.js +++ b/packages/main/src/Table.js @@ -14,7 +14,7 @@ import TableMode from "./types/TableMode.js"; // Texts import { - TABLE_LOAD_MORE_TEXT, + LOAD_MORE_TEXT, ARIA_LABEL_SELECT_ALL_CHECKBOX, TABLE_HEADER_ROW_TEXT, } from "./generated/i18n/i18n-defaults.js"; diff --git a/packages/main/src/TableRow.js b/packages/main/src/TableRow.js index d4d16df9675e..fc0c694e9407 100644 --- a/packages/main/src/TableRow.js +++ b/packages/main/src/TableRow.js @@ -231,22 +231,6 @@ class TableRow extends UI5Element { this.fireEvent("selection-requested", { row: this }); } - _onkeydown(event) { - if (isEnter(event)) { - this.fireEvent("row-click", { row: this }); - } - - if (isSpace(event)) { - event.preventDefault(); - } - } - - _onkeyup(event) { - if (isSpace(event)) { - this.fireEvent("row-click", { row: this }); - } - } - _getActiveElementTagName() { return document.activeElement.localName.toLocaleLowerCase(); } From 61eb6c57cbab519d80d692ac865400f213106663 Mon Sep 17 00:00:00 2001 From: Nia Peeva Date: Tue, 23 Mar 2021 02:05:27 +0200 Subject: [PATCH 10/13] minor fixes and tests added --- packages/main/src/Table.js | 2 +- packages/main/src/TableRow.hbs | 2 +- packages/main/src/TableRow.js | 19 +- packages/main/src/themes/TableRow.css | 2 +- packages/main/test/pages/TableSelection.html | 222 ++++++++++++-- packages/main/test/specs/Table.spec.js | 307 +++++++++++++++++++ 6 files changed, 515 insertions(+), 39 deletions(-) diff --git a/packages/main/src/Table.js b/packages/main/src/Table.js index 5f3fbc4c6ab9..581411613659 100644 --- a/packages/main/src/Table.js +++ b/packages/main/src/Table.js @@ -388,7 +388,7 @@ class Table extends UI5Element { this.i18nBundle = getI18nBundle("@ui5/webcomponents"); this.tableEndObserved = false; - this.addEventListener("selection-requested", this._handleSelect.bind(this)); + this.addEventListener("ui5-selection-requested", this._handleSelect.bind(this)); } onBeforeRendering() { diff --git a/packages/main/src/TableRow.hbs b/packages/main/src/TableRow.hbs index c557cf3703b5..05a4c7c10d37 100644 --- a/packages/main/src/TableRow.hbs +++ b/packages/main/src/TableRow.hbs @@ -25,7 +25,7 @@ class="ui5-multi-select-checkbox" ?checked="{{this.selected}}" aria-label="{{ariaLabelRowSelection}}" - @change="{{_handleSelection}}" + @ui5-change="{{_handleSelection}}" > diff --git a/packages/main/src/TableRow.js b/packages/main/src/TableRow.js index fc0c694e9407..0d2e481ef117 100644 --- a/packages/main/src/TableRow.js +++ b/packages/main/src/TableRow.js @@ -160,14 +160,16 @@ class TableRow extends UI5Element { event.preventDefault(); } - if ((isSpace(event) && itemSelectable && !checkboxPressed) || (isEnter(event) && isSingleSelect)) { - this.fireEvent("selection-requested", { row: this }); - } + if (isRowFocused && !checkboxPressed) { + if ((isSpace(event) && itemSelectable) || (isEnter(event) && isSingleSelect)) { + this.fireEvent("selection-requested", { row: this }); + } - if (isEnter(event) && itemActive && isRowFocused) { - this.fireEvent("row-click", { row: this }); - if (!isSingleSelect) { - this.activate(); + if (isEnter(event) && itemActive) { + this.fireEvent("row-click", { row: this }); + if (!isSingleSelect) { + this.activate(); + } } } } @@ -200,6 +202,7 @@ class TableRow extends UI5Element { } _onrowclick(event) { + const checkboxPressed = event.target.classList.contains("ui5-multi-select-checkbox"); // If the user tab over a button on IOS device, the document.activeElement // is the ui5-table-row. The check below ensure that, if a button within the row is pressed, // the row will not be selected. @@ -221,7 +224,7 @@ class TableRow extends UI5Element { this._handleSelection(); } - if (this.type === "Active") { + if (this.type === "Active" && !checkboxPressed) { this.fireEvent("row-click", { row: this }); } } diff --git a/packages/main/src/themes/TableRow.css b/packages/main/src/themes/TableRow.css index ce2405d9c921..beadfa9250a8 100644 --- a/packages/main/src/themes/TableRow.css +++ b/packages/main/src/themes/TableRow.css @@ -56,7 +56,7 @@ background-color: var(--sapList_Hover_Background); } -:host([type="Active"][active]) .ui5-table-row-root:active, +:host([type="Active"][active]) .ui5-table-row-root, :host([selected][type="Active"][active]) .ui5-table-row-root:hover { background-color: var(--sapList_Active_Background); } diff --git a/packages/main/test/pages/TableSelection.html b/packages/main/test/pages/TableSelection.html index cd58b3aecff4..516787260ff0 100644 --- a/packages/main/test/pages/TableSelection.html +++ b/packages/main/test/pages/TableSelection.html @@ -21,10 +21,13 @@
- Lower table size to 500px - Products table - resize your browser to make some columns pop-in + Lower tables size to 500px + Resize your browser to make some columns pop-in
+
+ + Table in SingleSelect mode @@ -46,8 +49,8 @@ Row Type - - + + Notebook Basic 15 @@ -63,11 +66,11 @@ 956 EUR - Active + Active - + Notebook Basic 17 @@ -88,8 +91,8 @@ - - + + Notebook Basic 18 @@ -109,7 +112,7 @@ - + Notebook Basic 19 @@ -134,11 +137,15 @@

+ + + +



- + Table in MultiSelect mode @@ -160,8 +167,8 @@ Row Type - - + + Notebook Basic 15 @@ -177,11 +184,11 @@ 956 EUR - Inactive + Active - + Notebook Basic 17 @@ -197,13 +204,131 @@ 1249 EUR + + Active + + + + + + Notebook Basic 18 + + + Very Best Screens + + + 28 x 19 x 2.5 cm + + + 4.2 KG + + + 1570 EUR + Inactive - + + + Notebook Basic 19 + + + Smartcards + + + 32 x 21 x 4 cm + + + 4.2 KG + + + 1650 EUR + + + Inactive + + + + +
+
+ + + + +
+
+
+
+ + Table in Default mode + + + + Product + + + Supplier + + + Dimensions + + + Weight + + + Price + + + Row Type + + + + + Notebook Basic 15 + + + Very Best Screens + + + 30 x 18 x 3 cm + + + 4.2 KG + + + 956 EUR + + + Active + + + + + Notebook Basic 17 + + + Very Best Screens + + + 29 x 17 x 3.1 cm + + + 4.5 KG + + + 1249 EUR + + + Active + + + + + Notebook Basic 18 @@ -219,11 +344,11 @@ 1570 EUR - Active + Inactive - + Notebook Basic 19 @@ -240,36 +365,77 @@ 1650 EUR - Active + Inactive +
+
+ + + diff --git a/packages/main/test/specs/Table.spec.js b/packages/main/test/specs/Table.spec.js index 942b011d77e5..a7c42f4834ab 100644 --- a/packages/main/test/specs/Table.spec.js +++ b/packages/main/test/specs/Table.spec.js @@ -118,4 +118,311 @@ describe("Table general interaction", () => { "The load-more is fired."); }); }); + + describe("Table selection modes", () => { + it("test click over Active/Inactive row in SingleSelect mode", () => { + browser.url("http://localhost:8080/test-resources/pages/TableSelection.html"); + const table = $("#single"); + const firstRow = $("#firstRowSingleSelect"); + const thirdRow = $("#thirdRowSingleSelect"); + const firstCellFirstRow = $("#firstCellFirstRowSS").shadow$("td"); + const firstCellThirdRow = $("#firstCellThirdRowSS").shadow$("td"); + const contentButton = $("#button1"); + const rowClickCount = $("#rowClickSSCountField"); + const selectionChangeCount = $("#selectionChangeSSCountField"); + const selectedRow = $("#selectionChangeSSSelectedValueField"); + const previouslySelectedRows = $("#selectionChangeSSPreviousRowField"); + + // act + firstCellFirstRow.click(); + + // check whether the table's and row's mode property is set correctly, as well as the row type property + assert.strictEqual(table.getAttribute("mode"), "SingleSelect", "The table's mode is SingleSelect"); + assert.strictEqual(firstRow.getAttribute("mode"), "SingleSelect", "The row's mode is SingleSelect"); + assert.strictEqual(firstRow.getAttribute("type"), "Active", "The row's type is Active"); + assert.strictEqual(thirdRow.getAttribute("type"), "Inactive", "The row's type is Inactive") + + // test row-click and selection-change events on click over an Active row + assert.strictEqual(rowClickCount.getProperty("value"), "1", "Click over an Active row should trigger row-click event"); + assert.strictEqual(selectionChangeCount.getProperty("value"), "1", "Click over an Active row should trigger selection-change event"); + assert.strictEqual(selectedRow.getProperty("value"), "firstRowSingleSelect", "The first row is selected"); + + // act + firstCellThirdRow.click(); + + // test row-click and selection-change events on click over an Inactive row + assert.strictEqual(rowClickCount.getProperty("value"), "1", "Click over an Inctive row should not trigger row-click event"); + assert.strictEqual(selectionChangeCount.getProperty("value"), "2", "Click over an Inactive row should trigger selection-change event"); + assert.strictEqual(selectedRow.getProperty("value"), "thirdRowSingleSelect", "The second row is selected"); + assert.strictEqual(previouslySelectedRows.getProperty("value"), "firstRowSingleSelect", "Prevously the first row was selected"); + + // act + contentButton.click(); + + // test row-click and selection-change on click over an active table cell content + assert.strictEqual(rowClickCount.getProperty("value"), "1", "Click over an active element within a table cell should not trigger row-click event"); + assert.strictEqual(selectionChangeCount.getProperty("value"), "2", "Click over an active element within a table cell should not trigger selection-change event"); + assert.strictEqual(selectedRow.getProperty("value"), "thirdRowSingleSelect", "The selected row is not changed"); + assert.strictEqual(previouslySelectedRows.getProperty("value"), "firstRowSingleSelect", "The prevously selected row is not changed"); + }); + + it("test Space/Enter key interaction over Active/Inactive row in SingleSelect mode", () => { + const firstRow = $("#firstRowSingleSelect"); + const secondRow = $("#secondRowSingleSelect"); + const thirdRow = $("#thirdRowSingleSelect"); + const forthRow = $("#forthRowSingleSelect"); + const contentButton = $("#button1"); + const rowClickCount = $("#rowClickSSCountField"); + const selectionChangeCount = $("#selectionChangeSSCountField"); + const selectedRow = $("#selectionChangeSSSelectedValueField"); + const previouslySelectedRows = $("#selectionChangeSSPreviousRowField"); + + // act + browser.keys(["Shift", "Tab"]); + firstRow.keys("Enter"); + + // test row-click and selection-change events on Enter key activation over an Active row + assert.strictEqual(rowClickCount.getProperty("value"), "2", "Enter key over an Active row should trigger row-click event"); + assert.strictEqual(selectionChangeCount.getProperty("value"), "3", "Enter key over an Active row should trigger selection-change event"); + assert.strictEqual(selectedRow.getProperty("value"), "firstRowSingleSelect", "The first row is selected"); + + // act + firstRow.keys("Enter"); + + // test row-click and selection-change events on Enter key activation over an already selected row + assert.strictEqual(rowClickCount.getProperty("value"), "3", "Enter key over an already selected row should trigger row-click event"); + assert.strictEqual(selectionChangeCount.getProperty("value"), "3", "Enter key over an already selected row should not trigger selection-change event"); + + // act + browser.keys("ArrowDown"); + browser.keys("ArrowDown"); + thirdRow.keys("Enter"); + + // test row-click and selection-change events on Enter key activation over an Inactive row + assert.strictEqual(rowClickCount.getProperty("value"), "3", "Enter key over an Inctive row should not trigger row-click event"); + assert.strictEqual(selectionChangeCount.getProperty("value"), "4", "Enter key over an Inactive row should trigger selection-change event"); + assert.strictEqual(selectedRow.getProperty("value"), "thirdRowSingleSelect", "The third row is selected"); + assert.strictEqual(previouslySelectedRows.getProperty("value"), "firstRowSingleSelect", "Prevously the first row was selected"); + + // act + thirdRow.keys("Space"); + + // test row-click and selection-change events on Space key activation over an already selected row + assert.strictEqual(rowClickCount.getProperty("value"), "3", "Space key over an already selected row should not trigger row-click event"); + assert.strictEqual(selectionChangeCount.getProperty("value"), "4", "Space key over an already selected row should not trigger selection-change event"); + + // act + browser.keys("ArrowDown"); + forthRow.keys("Space"); + + // test row-click and selection-change events on Space key activation over an Inactive row + assert.strictEqual(rowClickCount.getProperty("value"), "3", "Space key over an Inctive row should not trigger row-click event"); + assert.strictEqual(selectionChangeCount.getProperty("value"), "5", "Space key over an Inctive row should trigger selection-change event"); + + // act + browser.keys("ArrowUp"); + browser.keys("ArrowUp"); + secondRow.keys("Space"); + + // test row-click and selection-change events on Space key activation over an Active row + assert.strictEqual(rowClickCount.getProperty("value"), "3", "Space key over an Active row should not trigger row-click event"); + assert.strictEqual(selectionChangeCount.getProperty("value"), "6", "Space key over an Active row should trigger selection-change event"); + assert.strictEqual(selectedRow.getProperty("value"), "secondRowSingleSelect", "The second row is selected"); + assert.strictEqual(previouslySelectedRows.getProperty("value"), "forthRowSingleSelect", "Prevously the forth row was selected"); + + // act + browser.keys(["Shift", "Tab"]); + contentButton.keys("Space"); + + // test row-click and selection-change on Space key over an active table cell content + assert.strictEqual(rowClickCount.getProperty("value"), "3", "Space key over an active element within a table cell should not trigger row-click event"); + assert.strictEqual(selectionChangeCount.getProperty("value"), "6", "Space key over an active element within a table cell should not trigger selection-change event"); + assert.strictEqual(selectedRow.getProperty("value"), "secondRowSingleSelect", "The selected row is not changed"); + }); + + it("test click over Active/Inactive row in MultiSelect mode", () => { + const table = $("#multi"); + const firstRow = $("#firstRowMultiSelect"); + const thirdRow = $("#thirdRowMultiSelect"); + const firstCellFirstRow = $("#firstCellFirstRowMS").shadow$("td"); + const firstCellThirdRow = $("#firstCellThirdRowMS").shadow$("td"); + const checkBoxFirstCell = firstRow.shadow$(".ui5-multi-select-checkbox").shadow$(".ui5-checkbox-root"); + const contentButton = $("#button2"); + const rowClickCount = $("#rowClickMSCountField"); + const selectionChangeCount = $("#selectionChangeMSCountField"); + const selectedRow = $("#selectionChangeMSSelectedValueField"); + const previouslySelectedRows = $("#selectionChangeMSPreviousRowField"); + + // act + firstCellFirstRow.click(); + + // check whether the table's and row's mode property is set correctly, as well as the row type property + assert.strictEqual(table.getAttribute("mode"), "MultiSelect", "The table's mode is MultiSelect"); + assert.strictEqual(firstRow.getAttribute("mode"), "MultiSelect", "The row's mode is MultiSelect"); + assert.strictEqual(firstRow.getAttribute("type"), "Active", "The row's type is Active"); + assert.strictEqual(thirdRow.getAttribute("type"), "Inactive", "The row's type is Inactive") + + // test row-click and selection-change events over an Active row + assert.strictEqual(rowClickCount.getProperty("value"), "1", "Click over an Active row should trigger row-click event"); + assert.strictEqual(selectionChangeCount.getProperty("value"), "", "Click over a row in a MultiSelect mode table should not trigger selection-change event"); + + // act + checkBoxFirstCell.click(); + + // test click over the selection checkbox within each row in MultiSelect mode + assert.strictEqual(rowClickCount.getProperty("value"), "1", "Click over the selection checkbox should not trigger row-click event"); + assert.strictEqual(selectionChangeCount.getProperty("value"), "1", "Click over the selection checkbox should trigger selection-change event"); + assert.strictEqual(selectedRow.getProperty("value"), "firstRowMultiSelect", "The first row is selected"); + assert.strictEqual(previouslySelectedRows.getProperty("value"), "", "There is no previously selected row"); + + // act + contentButton.click(); + + // test row-click and selection-change on click over an active table cell content + assert.strictEqual(rowClickCount.getProperty("value"), "1", "Click over an active element within a table cell should not trigger row-click event"); + assert.strictEqual(selectionChangeCount.getProperty("value"), "1", "Click over an active element within a table cell should not trigger selection-change event"); + assert.strictEqual(selectedRow.getProperty("value"), "firstRowMultiSelect", "The selected row is not changed"); + + // act + firstCellThirdRow.click(); + + // test row-click and selection-change events over an Inactive row + assert.strictEqual(rowClickCount.getProperty("value"), "1", "Click over an Inctive row should not trigger row-click event"); + assert.strictEqual(selectionChangeCount.getProperty("value"), "1", "Click over an Inctive row should not trigger selection-change event"); + }); + + it("test Space/Enter key interaction over Active/Inactive row in MultiSelect mode", () => { + const firstRow = $("#firstRowMultiSelect"); + const secondRow = $("#secondRowMultiSelect"); + const thirdRow = $("#thirdRowMultiSelect"); + const checkBoxFirstCell = secondRow.shadow$(".ui5-multi-select-checkbox").shadow$(".ui5-checkbox-root"); + const contentButton = $("#button2"); + const selectionChangeCount = $("#selectionChangeMSCountField"); + const rowClickCount = $("#rowClickMSCountField"); + const selectedRow = $("#selectionChangeMSSelectedValueField"); + const previouslySelectedRows = $("#selectionChangeMSPreviousRowField"); + + // act + browser.keys("ArrowUp"); + browser.keys("ArrowUp"); + firstRow.keys("Enter"); + + // test row-click and selection-change events on Enter key activation over an Active row + assert.strictEqual(rowClickCount.getProperty("value"), "2", "Enter key over an Active row should trigger row-click event"); + assert.strictEqual(selectionChangeCount.getProperty("value"), "1", "Enter key over an Active row should not trigger selection-change event"); + + // act + browser.keys("Tab"); + browser.keys("Tab"); + contentButton.keys("Enter"); + + // test row-click and selection-change on Enter key over an active table cell content + assert.strictEqual(rowClickCount.getProperty("value"), "2", "Enter key over an active element within a table cell should not trigger row-click event"); + assert.strictEqual(selectionChangeCount.getProperty("value"), "1", "Enter key over an active element within a table cell should not trigger selection-change event"); + + // act + browser.keys("Tab"); + checkBoxFirstCell.keys("Enter"); + + // test Space over the selection checkbox within each row in MultiSelect mode + assert.strictEqual(rowClickCount.getProperty("value"), "2", "Enter key over the selection checkbox should not trigger row-click event"); + assert.strictEqual(selectionChangeCount.getProperty("value"), "2", "Enter key over the selection checkbox should trigger selection-change event"); + assert.strictEqual(selectedRow.getProperty("value"), "secondRowMultiSelect", "The second row is currently selected"); + assert.strictEqual(previouslySelectedRows.getProperty("value"), "firstRowMultiSelect", "Prevously the first row was selected"); + + // act + checkBoxFirstCell.keys("Space"); + + // test Space key over the selection checkbox of already selected row in MultiSelect mode + assert.strictEqual(rowClickCount.getProperty("value"), "2", "Space key over the selection checkbox should not trigger row-click event"); + assert.strictEqual(selectionChangeCount.getProperty("value"), "3", "Space key over the selection checkbox of already selected row should trigger selection-change event"); + assert.strictEqual(selectedRow.getProperty("value"), "firstRowMultiSelect", "The second row is not selected"); + assert.strictEqual(previouslySelectedRows.getProperty("value"), "secondRowMultiSelect", "Prevously the second row was selected"); + + // act + browser.keys(["Shift", "Tab"]); + secondRow.keys("Space"); + + // test row-click and selection-change events on Space key activation over an Active row + assert.strictEqual(rowClickCount.getProperty("value"), "2", "Space key over an Active row should not trigger row-click event"); + assert.strictEqual(selectionChangeCount.getProperty("value"), "4", "Space key over an Active row should trigger selection-change event"); + assert.strictEqual(selectedRow.getProperty("value"), "secondRowMultiSelect", "The second row is currently selected"); + assert.strictEqual(previouslySelectedRows.getProperty("value"), "firstRowMultiSelect", "The previously selected row is the first row"); + + // act + browser.keys("ArrowDown"); + thirdRow.keys("Space"); + + // test row-click and selection-change events on Space key activation over an Inactive row + assert.strictEqual(rowClickCount.getProperty("value"), "2", "Space key over an Inactive row should not trigger row-click event"); + assert.strictEqual(selectionChangeCount.getProperty("value"), "5", "Space key over an Inactive row should trigger selection-change event"); + assert.strictEqual(selectedRow.getProperty("value"), "thirdRowMultiSelect", "The third row is cuurently selected"); + assert.strictEqual(previouslySelectedRows.getProperty("value"), "secondRowMultiSelect", "The previously selected row is the second row"); + + // act + thirdRow.keys("Enter"); + + // test row-click and selection-change events on Enter key activation over an already selected row + assert.strictEqual(rowClickCount.getProperty("value"), "2", "Enter key over an already selected Inactive row should not trigger row-click event"); + assert.strictEqual(selectionChangeCount.getProperty("value"), "5", "Enter key over an already selected row should trigger selection-change event"); + }); + + it("test mouse and keyboard interaction over Active/Inactive row in Default mode", () => { + const table = $("#default"); + const firstRow = $("#firstRowDefaultMode"); + const thirdRow = $("#thirdRowDefaultMode"); + const firstCellFirstRow = $("#firstCellFirstRowDefault").shadow$("td"); + const firstCellThirdRow = $("#firstCellThirdRowDefault").shadow$("td"); + const rowClickCount = $("#rowClickDefaultCountField"); + const selectionChangeCount = $("#selectionChangeDefaultCountField"); + + // act + firstCellFirstRow.click(); + + // Check whether the table's and row's mode property is set correctly, as well as the row type property + assert.strictEqual(table.getAttribute("mode"), "None", "The table's mode is None"); + assert.strictEqual(firstRow.getAttribute("mode"), "None", "The row's mode is None"); + assert.strictEqual(firstRow.getAttribute("type"), "Active", "The row's type is Active"); + assert.strictEqual(thirdRow.getAttribute("type"), "Inactive", "The row's type is Inactive") + + // test row-click and selection-change events on click over an Active row + assert.strictEqual(rowClickCount.getProperty("value"), "1", "Click over an Active row should trigger row-click event"); + assert.strictEqual(selectionChangeCount.getProperty("value"), "", "Click over a row in a default mode table should not trigger selection-change event"); + + // act + firstRow.keys("Enter"); + + // test row-click and selection-change events on Enter key activation over an Active row + assert.strictEqual(selectionChangeCount.getProperty("value"), "", "Enter key over a row in a default mode table should not trigger selection-change event"); + assert.strictEqual(rowClickCount.getProperty("value"), "2", "Enter key over an Active row should trigger row-click event"); + + // act + firstRow.keys("Space"); + + // test row-click and selection-change events on Space key activation over an Active row + assert.strictEqual(selectionChangeCount.getProperty("value"), "", "Space key over a row in a default mode table should not trigger selection-change event"); + assert.strictEqual(rowClickCount.getProperty("value"), "2", "Space key over an Active row should not trigger row-click event"); + + // act + firstCellThirdRow.click(); + + // test row-click and selection-change events on click over an Inactive row + assert.strictEqual(selectionChangeCount.getProperty("value"), "", "Click over a row in a default mode table should not trigger selection-change event"); + assert.strictEqual(rowClickCount.getProperty("value"), "2", "Click over an Inactive row should trigger row-click event"); + + // act + thirdRow.keys("Enter"); + + // test row-click and selection-change events on Enter key activation over an Inactive row + assert.strictEqual(selectionChangeCount.getProperty("value"), "", "Enter key over a row in a default mode table should not trigger selection-change event"); + assert.strictEqual(rowClickCount.getProperty("value"), "2", "Enter key over an Inctive row should not trigger row-click event"); + + // act + thirdRow.keys("Space"); + + // test row-click and selection-change events on Space key activation over an Inactive row + assert.strictEqual(selectionChangeCount.getProperty("value"), "", "Space key over a row in a default mode table should not trigger selection-change event"); + assert.strictEqual(rowClickCount.getProperty("value"), "2", "Space key over an Inctive row should not trigger row-click event"); + }); + }); }); From e16de49907759e2b7f94b1121bc96efedaa2435f Mon Sep 17 00:00:00 2001 From: Nia Peeva Date: Tue, 23 Mar 2021 10:30:07 +0200 Subject: [PATCH 11/13] tests adjusted --- packages/main/test/pages/TableSelection.html | 24 ++++++++++---------- packages/main/test/specs/Table.spec.js | 24 ++++++++++---------- 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/packages/main/test/pages/TableSelection.html b/packages/main/test/pages/TableSelection.html index 516787260ff0..6f5a2bfd9847 100644 --- a/packages/main/test/pages/TableSelection.html +++ b/packages/main/test/pages/TableSelection.html @@ -50,8 +50,8 @@ - - Notebook Basic 15 + + Notebook Basic 15 Very Best Screens @@ -92,8 +92,8 @@ - - Notebook Basic 18 + + Notebook Basic 18 Very Best Screens @@ -168,8 +168,8 @@ - - Notebook Basic 15 + + Notebook Basic 15 Very Best Screens @@ -210,8 +210,8 @@ - - Notebook Basic 18 + + Notebook Basic 18 Very Best Screens @@ -286,8 +286,8 @@ - - Notebook Basic 15 + + Notebook Basic 15 Very Best Screens @@ -328,8 +328,8 @@ - - Notebook Basic 18 + + Notebook Basic 18 Very Best Screens diff --git a/packages/main/test/specs/Table.spec.js b/packages/main/test/specs/Table.spec.js index a7c42f4834ab..e804e0055105 100644 --- a/packages/main/test/specs/Table.spec.js +++ b/packages/main/test/specs/Table.spec.js @@ -125,8 +125,8 @@ describe("Table general interaction", () => { const table = $("#single"); const firstRow = $("#firstRowSingleSelect"); const thirdRow = $("#thirdRowSingleSelect"); - const firstCellFirstRow = $("#firstCellFirstRowSS").shadow$("td"); - const firstCellThirdRow = $("#firstCellThirdRowSS").shadow$("td"); + const firstCellFirstRowLabel = $("#firstCellFirstRowSSLabel"); + const firstCellThirdRowLabel = $("#firstCellThirdRowSSLabel"); const contentButton = $("#button1"); const rowClickCount = $("#rowClickSSCountField"); const selectionChangeCount = $("#selectionChangeSSCountField"); @@ -134,7 +134,7 @@ describe("Table general interaction", () => { const previouslySelectedRows = $("#selectionChangeSSPreviousRowField"); // act - firstCellFirstRow.click(); + firstCellFirstRowLabel.click(); // check whether the table's and row's mode property is set correctly, as well as the row type property assert.strictEqual(table.getAttribute("mode"), "SingleSelect", "The table's mode is SingleSelect"); @@ -148,7 +148,7 @@ describe("Table general interaction", () => { assert.strictEqual(selectedRow.getProperty("value"), "firstRowSingleSelect", "The first row is selected"); // act - firstCellThirdRow.click(); + firstCellThirdRowLabel.click(); // test row-click and selection-change events on click over an Inactive row assert.strictEqual(rowClickCount.getProperty("value"), "1", "Click over an Inctive row should not trigger row-click event"); @@ -244,8 +244,8 @@ describe("Table general interaction", () => { const table = $("#multi"); const firstRow = $("#firstRowMultiSelect"); const thirdRow = $("#thirdRowMultiSelect"); - const firstCellFirstRow = $("#firstCellFirstRowMS").shadow$("td"); - const firstCellThirdRow = $("#firstCellThirdRowMS").shadow$("td"); + const firstCellFirstRowLabel = $("#firstCellFirstRowMSLabel"); + const firstCellThirdRowLabel = $("#firstCellThirdRowMSLabel"); const checkBoxFirstCell = firstRow.shadow$(".ui5-multi-select-checkbox").shadow$(".ui5-checkbox-root"); const contentButton = $("#button2"); const rowClickCount = $("#rowClickMSCountField"); @@ -254,7 +254,7 @@ describe("Table general interaction", () => { const previouslySelectedRows = $("#selectionChangeMSPreviousRowField"); // act - firstCellFirstRow.click(); + firstCellFirstRowLabel.click(); // check whether the table's and row's mode property is set correctly, as well as the row type property assert.strictEqual(table.getAttribute("mode"), "MultiSelect", "The table's mode is MultiSelect"); @@ -284,7 +284,7 @@ describe("Table general interaction", () => { assert.strictEqual(selectedRow.getProperty("value"), "firstRowMultiSelect", "The selected row is not changed"); // act - firstCellThirdRow.click(); + firstCellThirdRowLabel.click(); // test row-click and selection-change events over an Inactive row assert.strictEqual(rowClickCount.getProperty("value"), "1", "Click over an Inctive row should not trigger row-click event"); @@ -371,13 +371,13 @@ describe("Table general interaction", () => { const table = $("#default"); const firstRow = $("#firstRowDefaultMode"); const thirdRow = $("#thirdRowDefaultMode"); - const firstCellFirstRow = $("#firstCellFirstRowDefault").shadow$("td"); - const firstCellThirdRow = $("#firstCellThirdRowDefault").shadow$("td"); + const firstCellFirstRowLabel = $("#firstCellFirstRowDefaultLabel"); + const firstCellThirdRowLabel = $("#firstCellThirdRowDefaultLabel"); const rowClickCount = $("#rowClickDefaultCountField"); const selectionChangeCount = $("#selectionChangeDefaultCountField"); // act - firstCellFirstRow.click(); + firstCellFirstRowLabel.click(); // Check whether the table's and row's mode property is set correctly, as well as the row type property assert.strictEqual(table.getAttribute("mode"), "None", "The table's mode is None"); @@ -404,7 +404,7 @@ describe("Table general interaction", () => { assert.strictEqual(rowClickCount.getProperty("value"), "2", "Space key over an Active row should not trigger row-click event"); // act - firstCellThirdRow.click(); + firstCellThirdRowLabel.click(); // test row-click and selection-change events on click over an Inactive row assert.strictEqual(selectionChangeCount.getProperty("value"), "", "Click over a row in a default mode table should not trigger selection-change event"); From 0ed8a2ebbe0294845b0e41004d64d7936559c88d Mon Sep 17 00:00:00 2001 From: Nia Peeva Date: Fri, 2 Apr 2021 15:23:55 +0300 Subject: [PATCH 12/13] comments reflected --- packages/main/src/Table.hbs | 2 +- packages/main/src/Table.js | 44 +++++++++++++++++------------------ packages/main/src/TableRow.js | 30 +++++++++++++++++------- 3 files changed, 45 insertions(+), 31 deletions(-) diff --git a/packages/main/src/Table.hbs b/packages/main/src/Table.hbs index b4bfa43253b8..c979c54acd93 100644 --- a/packages/main/src/Table.hbs +++ b/packages/main/src/Table.hbs @@ -10,7 +10,7 @@
+ +