feat(abc:st): support TemplateRef of render & renderTitle

- close ng-alain/ng-alain#1076
ng-alain · Sep 22, 2020 · b4dc88a · b4dc88a
1 parent 08de51c
commit b4dc88a
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 10 deletions.
diff --git a/packages/abc/st/index.en-US.md b/packages/abc/st/index.en-US.md
@@ -245,8 +245,8 @@ class TestComponent {
 | `[i18n]` | I18n key of this column | `string` | - |
 | `[type]` | `no` Rows number<br>`checkbox` selection<br>`radio` selection<br>`link` Link that triggers `click`<br>`img` Align to the center<br>`number` Align to the right<br>`currency` Align to the right<br>`date` Align to the center<br>`badge` [Nz-Badge](https://ng.ant.design/components/badge/en)<br>`tag` [Nz-Tag](https://ng.ant.design/components/tag/en)<br>`yn` Make boolean as [badge](/theme/yn)<br>`widget` Custom widgets to render columns | `string` | - |
 | `[index]` | Display field of the data record, could be set like `a.b.c` | `string, string[]` | - |
-| `[render]` | Custom render template ID | `string` | - |
-| `[renderTitle]` | Title custom render template ID | `string` | - |
+| `[render]` | Custom render template ID | `string, TemplateRef<void>, TemplateRef<{ $implicit: STData; index: number }>` | - |
+| `[renderTitle]` | Title custom render template ID | `string, TemplateRef<void>, TemplateRef<{ $implicit: STColumn; index: number }>` | - |
 | `[default]` | Replace with default value when no data exists (value typeof is `undefined`) | `string` | - |
 | `[buttons]` | Buttons of this column | `STColumnButton[]` | - |
 | `[width]` | Width of this column (**NOTICE:** If the fixed column must be a number), e.g: `100`, `10%`, `100px` | `string,number` | - |

diff --git a/packages/abc/st/index.zh-CN.md b/packages/abc/st/index.zh-CN.md
@@ -245,8 +245,8 @@ class TestComponent {
 | `[i18n]` | 列名i18n | `string` | - |
 | `[type]` | `no` 行号<br>`checkbox` 多选<br>`radio` 单选<br>`link` 链接，可触发 `click`<br>`img` 图像且居中<br>`number` 数字且居右<br>`currency` 货币且居右<br>`date` 日期格式且居中<br>`badge` [徽标](https://ng.ant.design/components/badge/zh)<br>`tag` [标签](https://ng.ant.design/components/tag/zh)<br>`yn` 将`boolean`类型徽章化 [document](/theme/yn)<br>`widget` 自定义小部件来渲染列 | `string` | - |
 | `[index]` | 列数据在数据项中对应的 key，支持 `a.b.c` 的嵌套写法 | `string, string[]` | - |
-| `[render]` | 自定义渲染ID | `string` | - |
-| `[renderTitle]` | 标题自定义渲染ID | `string` | - |
+| `[render]` | 自定义渲染ID | `string, TemplateRef<void>, TemplateRef<{ $implicit: STData; index: number }>` | - |
+| `[renderTitle]` | 标题自定义渲染ID | `string, TemplateRef<void>, TemplateRef<{ $implicit: STColumn; index: number }>` | - |
 | `[default]` | 当不存在数据（值类型为 `undefined`）时以默认值替代 | `string` | - |
 | `[buttons]` | 按钮组 | `STColumnButton[]` | - |
 | `[width]` | 列宽（数字型表示 `px` 值，**注意：** 若固定列必须是数字），例如：`100`、`10%`、`100px` | `string,number` | - |

diff --git a/packages/abc/st/st-column-source.ts b/packages/abc/st/st-column-source.ts
@@ -1,4 +1,4 @@
-import { Host, Inject, Injectable, Optional } from '@angular/core';
+import { Host, Inject, Injectable, Optional, TemplateRef } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { ACLService } from '@delon/acl';
 import { AlainI18NService, ALAIN_I18N_TOKEN } from '@delon/theme';
@@ -231,10 +231,11 @@ export class STColumnSource {
 
   private restoreRender(item: _STColumn): void {
     if (item.renderTitle) {
-      item.__renderTitle = this.rowSource.getTitle(item.renderTitle);
+      item.__renderTitle =
+        typeof item.renderTitle === 'string' ? this.rowSource.getTitle(item.renderTitle) : (item.renderTitle as TemplateRef<void>);
     }
     if (item.render) {
-      item.__render = this.rowSource.getRow(item.render);
+      item.__render = typeof item.render === 'string' ? this.rowSource.getRow(item.render) : (item.render as TemplateRef<void>);
     }
   }
 

diff --git a/packages/abc/st/st.interfaces.ts b/packages/abc/st/st.interfaces.ts
@@ -1,5 +1,5 @@
 import { HttpHeaders, HttpParams } from '@angular/common/http';
-import { ElementRef } from '@angular/core';
+import { ElementRef, TemplateRef } from '@angular/core';
 import { DrawerHelperOptions, ModalHelperOptions, YNMode } from '@delon/theme';
 import { NzDrawerOptions } from 'ng-zorro-antd/drawer';
 import { ModalOptions } from 'ng-zorro-antd/modal';
@@ -237,15 +237,15 @@ export interface STColumn {
    *  {{ c.title }}
    * </ng-template>
    */
-  render?: string;
+  render?: string | TemplateRef<void> | TemplateRef<{ $implicit: STData; index: number }>;
   /**
    * 标题自定义渲染ID
    * @example
    * <ng-template st-row="custom" type="title" let-c>
    *  {{ item | json }}
    * </ng-template>
    */
-  renderTitle?: string;
+  renderTitle?: string | TemplateRef<void> | TemplateRef<{ $implicit: STColumn; index: number }>;
   /**
    * 列宽（数字型表示 `px` 值），例如：`100`、`10%`、`100px`
    *

diff --git a/packages/abc/st/test/st-column-source.spec.ts b/packages/abc/st/test/st-column-source.spec.ts
@@ -1,6 +1,7 @@
 import { ACLService } from '@delon/acl';
 import { AlainI18NService, AlainI18NServiceFake } from '@delon/theme';
 import { deepGet } from '@delon/util';
+import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { STColumnSource, STColumnSourceProcessOptions } from '../st-column-source';
 import { STRowSource } from '../st-row.directive';
 import { STWidgetRegistry } from '../st-widget';
@@ -527,6 +528,16 @@ describe('st: column-source', () => {
         expect(rowSrv.getRow).toHaveBeenCalled();
         expect(rowSrv.getTitle).toHaveBeenCalled();
       });
+      it('should be template ref', () => {
+        const mockTemplateRef: NzSafeAny = {};
+        expect(rowSrv.getRow).not.toHaveBeenCalled();
+        expect(rowSrv.getTitle).not.toHaveBeenCalled();
+        const columns: _STColumn[] = [{ title: '', render: mockTemplateRef, renderTitle: mockTemplateRef }];
+        srv.restoreAllRender(columns);
+        expect(rowSrv.getRow).not.toHaveBeenCalled();
+        expect(rowSrv.getTitle).not.toHaveBeenCalled();
+        expect(columns[0].render).toBe(mockTemplateRef);
+      });
     });
     describe('[fixed]', () => {
       it('should be fixed left column', () => {