add ability to customise the select and collapse visualisation

PR: Addepar#1107
OTA-Insight · Jul 11, 2024 · 3091b7b · 3091b7b
1 parent 90e2197
commit 3091b7b
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 21 deletions.
diff --git a/addon/components/ember-td/template.hbs b/addon/components/ember-td/template.hbs
@@ -1,30 +1,38 @@
 {{#if this.isFirstColumn}}
   <div class="et-cell-container">
     {{#if this.canSelect}}
-      <span
-        class="et-toggle-select {{unless this.shouldShowCheckbox 'et-speech-only'}}"
-        data-test-select-row-container
-      >
-        <EmberTableSimpleCheckbox
-          @checked={{this.rowMeta.isGroupSelected}}
-          @onClick={{action "onSelectionToggled"}}
-          @ariaLabel="Select row"
-          @dataTestSelectRow={{this.isTesting}}
-        />
-        <span></span>
-      </span>
+      {{#if (has-block "select")}}
+        {{yield this.rowMeta (action "onSelectionToggled") to="select"}}
+      {{else}}
+        <span
+          class="et-toggle-select {{unless this.shouldShowCheckbox 'et-speech-only'}}"
+          data-test-select-row-container
+        >
+          <EmberTableSimpleCheckbox
+            @checked={{this.rowMeta.isGroupSelected}}
+            @onClick={{action "onSelectionToggled"}}
+            @ariaLabel="Select row"
+            @dataTestSelectRow={{this.isTesting}}
+          />
+          <span></span>
+        </span>
+      {{/if}}
     {{/if}}
 
     {{#if this.canCollapse}}
-      <span class="et-toggle-collapse et-depth-indent {{this.depthClass}}">
-        <EmberTableSimpleCheckbox
-          @checked={{this.rowMeta.isCollapsed}}
-          @onChange={{action "onCollapseToggled"}}
-          @ariaLabel="Collapse row"
-          @dataTestCollapseRow={{this.isTesting}}
-        />
-        <span></span>
-      </span>
+      {{#if (has-block "collapse")}}
+        {{yield this.rowMeta (action "onCollapseToggled") to="collapse"}}
+      {{else}}
+        <span class="et-toggle-collapse et-depth-indent {{this.depthClass}}">
+          <EmberTableSimpleCheckbox
+            @checked={{this.rowMeta.isCollapsed}}
+            @onChange={{action "onCollapseToggled"}}
+            @ariaLabel="Collapse row"
+            @dataTestCollapseRow={{this.isTesting}}
+          />
+          <span></span>
+        </span>
+      {{/if}}
     {{else}}
       <div class="et-depth-indent et-depth-placeholder {{this.depthClass}}"></div>
     {{/if}}

diff --git a/types/components/ember-td/component.d.ts b/types/components/ember-td/component.d.ts
@@ -23,6 +23,14 @@ export interface EmberTdSignature<RowType, ColumnType> {
       columnMeta: unknown,
       rowMeta: TableRowMeta,
     ];
+    select?: [
+      rowMeta: TableRowMeta,
+      onSelectionToggled: () => void,
+    ];
+    collapse?: [
+      rowMeta: TableRowMeta,
+      onCollapseToggled: () => void,
+    ];
   };
 }