[myfaces-tobago] 01/02: fix(sheet): selectable

[hn...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

hnoeth pushed a commit to branch tobago-5.x
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git

commit 48a4514996cf52c36e2bfcac7b94deb5544b787a
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Mon May 9 14:53:52 2022 +0200

    fix(sheet): selectable
    
    * Selection of row fixed. Use of tc:columnSelector is optional.
    * set .tobago-selected CSS properties only for tc:columnsSelector
      This is safer than setting the CSS properties on .tobago-selected in general.
      The .tobago-selected class is used on the TR tag, but CSS margins are ignored.
    
    Issue: TOBAGO-2131
---
 tobago-theme/src/main/scss/_tobago.scss            | 10 +++----
 .../src/main/ts/tobago-sheet.ts                    | 31 ++++++++++++----------
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/tobago-theme/src/main/scss/_tobago.scss b/tobago-theme/src/main/scss/_tobago.scss
index c3eeccdba2..a3e9dc5b97 100644
--- a/tobago-theme/src/main/scss/_tobago.scss
+++ b/tobago-theme/src/main/scss/_tobago.scss
@@ -1311,11 +1311,6 @@ tobago-sheet {
     background-color: $gray-200;
   }
 
-  .tobago-selected {
-    margin-top: ($spacer * 0.75);
-    margin-bottom: ($spacer * 0.75);
-  }
-
   .tobago-resize {
     position: absolute;
     right: -5px;
@@ -1360,6 +1355,11 @@ tobago-sheet {
 
         @include treeNodeMarginLeftLevel();
 
+        > input.tobago-selected {
+          margin-top: ($spacer * 0.75);
+          margin-bottom: ($spacer * 0.75);
+        }
+
         > tobago-out {
           display: block;
         }
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-sheet.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-sheet.ts
index e7aca92bd6..380c92bcfd 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-sheet.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-sheet.ts
@@ -766,7 +766,7 @@ Type: ${data.type}`);
 
   toggleSelection(row: HTMLTableRowElement, checkbox: HTMLInputElement): void {
     this.dataset.tobagoLastClickedRowIndex = String(row.sectionRowIndex);
-    if (checkbox && !checkbox.disabled) {
+    if (checkbox === null || !checkbox.disabled) {
       const selected = this.getHiddenSelected();
       const rowIndex = Number(row.getAttribute("row-index"));
       if (this.isSelected(rowIndex)) {
@@ -793,14 +793,14 @@ Type: ${data.type}`);
   }
 
   selectRange(
-      rows: NodeListOf<HTMLTableRowElement>, first: number, last: number, selectDeselected: boolean,
-      deselectSelected: boolean): void {
+    rows: NodeListOf<HTMLTableRowElement>, first: number, last: number, selectDeselected: boolean,
+    deselectSelected: boolean): void {
     const selected = this.getHiddenSelected();
     const value = new Set<number>(JSON.parse(selected.value));
     for (let i = first; i <= last; i++) {
       const row = rows.item(i);
       const checkbox = this.getSelectorCheckbox(row);
-      if (checkbox && !checkbox.disabled) {
+      if (checkbox === null || !checkbox.disabled) {
         const rowIndex = Number(row.getAttribute("row-index"));
         const on = value.has(rowIndex);
         if (selectDeselected && !on) {
@@ -818,15 +818,17 @@ Type: ${data.type}`);
    * @param row tr-element: the row.
    * @param checkbox input-element: selector in the row.
    */
-  selectRow(selected: HTMLInputElement, rowIndex: number, row: HTMLTableRowElement, checkbox: HTMLInputElement): void {
+  selectRow(selected: HTMLInputElement, rowIndex: number, row: HTMLTableRowElement, checkbox?: HTMLInputElement): void {
     const selectedSet = new Set<number>(JSON.parse(selected.value));
     selected.value = JSON.stringify(Array.from(selectedSet.add(rowIndex)));
     row.classList.add("tobago-selected");
     row.classList.add("table-info");
-    checkbox.checked = true;
-    setTimeout(function ():void {
+    if (checkbox) {
       checkbox.checked = true;
-    }, 0);
+      setTimeout(function (): void {
+        checkbox.checked = true;
+      }, 0);
+    }
   }
 
   /**
@@ -836,19 +838,20 @@ Type: ${data.type}`);
    * @param checkbox input-element: selector in the row.
    */
   deselectRow(
-      selected: HTMLInputElement, rowIndex: number, row: HTMLTableRowElement, checkbox: HTMLInputElement): void {
+    selected: HTMLInputElement, rowIndex: number, row: HTMLTableRowElement, checkbox?: HTMLInputElement): void {
     const selectedSet = new Set<number>(JSON.parse(selected.value));
     selectedSet.delete(rowIndex);
     selected.value = JSON.stringify(Array.from(selectedSet));
     row.classList.remove("tobago-selected");
     row.classList.remove("table-info");
-    checkbox.checked = false;
-    // XXX check if this is still needed... Async because of TOBAGO-1312
-    setTimeout(function (): void {
+    if (checkbox) {
       checkbox.checked = false;
-    }, 0);
+      // XXX check if this is still needed... Async because of TOBAGO-1312
+      setTimeout(function (): void {
+        checkbox.checked = false;
+      }, 0);
+    }
   }
-
 }
 
 document.addEventListener("tobago.init", function (event: Event): void {