fix(abc:st): a more friendly expandIcon

- close ng-alain/ng-alain#2507
ng-alain · Oct 11, 2024 · 34f11f9 · 34f11f9
1 parent 811095b
commit 34f11f9
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 4 deletions.
diff --git a/packages/abc/st/demo/expand.md b/packages/abc/st/demo/expand.md
@@ -17,20 +17,34 @@ Use `#expand` template implement expandable, allowing you to receive three value
 import { Component } from '@angular/core';
 
 import { STColumn, STData, STModule } from '@delon/abc/st';
+import { NzButtonComponent } from 'ng-zorro-antd/button';
+import { NzIconDirective } from 'ng-zorro-antd/icon';
 
 @Component({
   selector: 'app-demo',
   template: `
-    <st [data]="users" [columns]="columns" [expand]="expand" expandRowByClick expandAccordion>
+    <button nz-button nzType="primary" (click)="customIcon = !customIcon">Use Custom Icon</button>
+    <st
+      [data]="users"
+      [columns]="columns"
+      [expand]="expand"
+      expandRowByClick
+      expandAccordion
+      [expandIcon]="customIcon ? expandIcon : null"
+    >
       <ng-template #expand let-item let-index="index" let-column="column">
         {{ item.description }}
       </ng-template>
+      <ng-template #expandIcon let-i let-index="index">
+        <span nz-icon [nzType]="i.expand ? 'up' : 'down'"></span>
+      </ng-template>
     </st>
   `,
   standalone: true,
-  imports: [STModule]
+  imports: [STModule, NzIconDirective, NzButtonComponent]
 })
 export class DemoComponent {
+  customIcon = false;
   users: STData[] = Array(10)
     .fill({})
     .map((_, idx) => ({

diff --git a/packages/abc/st/st.component.html b/packages/abc/st/st.component.html
@@ -160,11 +160,16 @@
           <td
             [nzShowExpand]="expand && i.showExpand !== false"
             [nzExpand]="i.expand"
-            [nzExpandIcon]="expandIcon"
+            [nzExpandIcon]="expandIcon ? wrapExpandIcon : null"
             (nzExpandChange)="_expandChange(i, $event)"
             (click)="_stopPropagation($event)"
             nzWidth="50px"
           ></td>
+          <ng-template #wrapExpandIcon>
+            <span (click)="_expandChange(i, !i.expand)">
+              <ng-template [ngTemplateOutlet]="expandIcon" [ngTemplateOutletContext]="{ $implicit: i, index: index }" />
+            </span>
+          </ng-template>
         }
         @for (c of _columns; track cIdx; let cIdx = $index) {
           @if (i._values[cIdx].props?.colSpan > 0 && i._values[cIdx].props?.rowSpan > 0) {

diff --git a/packages/abc/st/st.component.ts b/packages/abc/st/st.component.ts
@@ -214,7 +214,7 @@ export class STComponent implements AfterViewInit, OnChanges {
   @Input({ transform: booleanAttribute }) expandRowByClick = false;
   @Input({ transform: booleanAttribute }) expandAccordion = false;
   @Input() expand: TemplateRef<{ $implicit: NzSafeAny; index: number }> | null = null;
-  @Input() expandIcon: TemplateRef<void> | null = null;
+  @Input() expandIcon: TemplateRef<{ $implicit: NzSafeAny; index: number }> | null = null;
   @Input() noResult?: string | TemplateRef<void> | null;
   @Input({ transform: booleanAttribute }) responsive: boolean = true;
   @Input({ transform: booleanAttribute }) responsiveHideHeaderFooter?: boolean;