Skip to content

Commit

Permalink
refactor(abc:cell): widget data type changed to CellTextResult
Browse files Browse the repository at this point in the history
Breaking Changes:
为了保持数据处理结果的统一性,将小部件的 `data` 类型由原来的 `CellWidgetData` 变更为 `CellTextResult` 以此来保证数据为处理后的结果。
  • Loading branch information
cipchk committed Mar 11, 2024
1 parent ab67e44 commit 920b5ab
Show file tree
Hide file tree
Showing 8 changed files with 34 additions and 42 deletions.
1 change: 1 addition & 0 deletions angular.json
Expand Up @@ -155,6 +155,7 @@
"include": [
"./test.ts",
// "**/st.spec.ts"
// "**/st/**/*.spec.ts"
"**/*.spec.ts"
]
}
Expand Down
6 changes: 3 additions & 3 deletions packages/abc/cell/cell-host.directive.ts
Expand Up @@ -3,7 +3,7 @@ import { Directive, Input, OnInit, Type, ViewContainerRef, inject } from '@angul
import { warn } from '@delon/util/other';

import { CellService } from './cell.service';
import { CellWidgetData } from './cell.types';
import { CellTextResult } from './cell.types';

@Directive({
selector: '[cell-widget-host]',
Expand All @@ -13,7 +13,7 @@ export class CellHostDirective implements OnInit {
private readonly srv = inject(CellService);
private readonly viewContainerRef = inject(ViewContainerRef);

@Input() data!: CellWidgetData;
@Input() data!: CellTextResult;

ngOnInit(): void {
const widget = this.data.options!.widget!;
Expand All @@ -27,6 +27,6 @@ export class CellHostDirective implements OnInit {

this.viewContainerRef.clear();
const componentRef = this.viewContainerRef.createComponent(componentType);
(componentRef.instance as { data: CellWidgetData }).data = this.data;
(componentRef.instance as { data: CellTextResult }).data = this.data;
}
}
13 changes: 3 additions & 10 deletions packages/abc/cell/cell.component.ts
Expand Up @@ -33,7 +33,7 @@ import { NzTooltipDirective } from 'ng-zorro-antd/tooltip';

import { CellHostDirective } from './cell-host.directive';
import { CellService } from './cell.service';
import type { CellDefaultText, CellOptions, CellTextResult, CellValue, CellWidgetData } from './cell.types';
import type { CellDefaultText, CellOptions, CellTextResult, CellValue } from './cell.types';

@Component({
selector: 'cell, [cell]',
Expand All @@ -59,10 +59,10 @@ import type { CellDefaultText, CellOptions, CellTextResult, CellValue, CellWidge
</nz-tag>
}
@case ('badge') {
<nz-badge [nzStatus]="res?.result?.color" nzText="{{ _text }}" />
<nz-badge [nzStatus]="res?.result?.color" [nzText]="_text" />
}
@case ('widget') {
<ng-template cell-widget-host [data]="hostData" />
<ng-template cell-widget-host [data]="res" />
}
@case ('img') {
@for (i of $any(_text); track $index) {
Expand Down Expand Up @@ -155,13 +155,6 @@ export class CellComponent implements OnChanges, OnDestroy {
return this.res?.safeHtml === 'text';
}

get hostData(): CellWidgetData {
return {
value: this.value,
options: this.srv.fixOptions(this.options)
};
}

private updateValue(): void {
this.destroy$?.unsubscribe();
this.destroy$ = this.srv.get(this.value, this.options).subscribe(res => {
Expand Down
6 changes: 3 additions & 3 deletions packages/abc/cell/cell.spec.ts
Expand Up @@ -15,7 +15,7 @@ import { NzTooltipDirective } from 'ng-zorro-antd/tooltip';
import { CellComponent } from './cell.component';
import { CellModule } from './cell.module';
import { CellService } from './cell.service';
import { CellFuValue, CellOptions, CellWidgetData } from './cell.types';
import { CellFuValue, CellOptions, CellTextResult } from './cell.types';
import { provideCellWidgets } from './provide';

const DATE = new Date(2022, 0, 1, 1, 2, 3);
Expand Down Expand Up @@ -354,12 +354,12 @@ describe('abc: cell', () => {
});

@Component({
template: `{{ data.value }}-{{ data.options.widget.data }}`
template: `{{ data.result.text }}-{{ data.options.widget.data }}`
})
class TestWidget {
static readonly KEY = 'test';

data!: CellWidgetData;
data!: CellTextResult;
}

@Component({
Expand Down
7 changes: 1 addition & 6 deletions packages/abc/cell/cell.types.ts
Expand Up @@ -297,11 +297,6 @@ export interface CellDefaultText {
condition?: unknown;
}

export interface CellWidgetData {
value?: unknown;
options?: CellOptions;
}

export interface CellWidgetInstance {
readonly data: CellWidgetData;
readonly data: CellTextResult;
}
16 changes: 9 additions & 7 deletions packages/abc/cell/index.en-US.md
Expand Up @@ -67,25 +67,27 @@ Cell formatting is supported for multiple data types, and supports widget mode.
Just implement the `CellWidgetInstance` interface, for example:

```ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';

import type { CellWidgetData, CellWidgetInstance } from '@delon/abc/cell';
import type { CellTextResult, CellWidgetInstance } from '@delon/abc/cell';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';

@Component({
selector: 'cell-widget-test',
template: ` <img nz-tooltip nzTooltipTitle="Client it" [src]="data.value" class="img" style="cursor: pointer" /> `,
template: `<img nz-tooltip nzTooltipTitle="Client it" [src]="data.result.text" class="img" style="cursor: pointer" /> `,
host: {
'(click)': 'show()'
},
changeDetection: ChangeDetectionStrategy.OnPush
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [ NzToolTipModule ]
})
export class CellTestWidget implements CellWidgetInstance {
private readonly msg = inject(NzMessageService);
static readonly KEY = 'test';

readonly data!: CellWidgetData;

constructor(private msg: NzMessageService) {}
readonly data!: CellTextResult;

show(): void {
this.msg.info(`click`);
Expand Down
16 changes: 9 additions & 7 deletions packages/abc/cell/index.zh-CN.md
Expand Up @@ -67,25 +67,27 @@ module: import { CellModule } from '@delon/abc/cell';
实现 `CellWidgetInstance` 接口即可,例如:

```ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';

import type { CellWidgetData, CellWidgetInstance } from '@delon/abc/cell';
import type { CellTextResult, CellWidgetInstance } from '@delon/abc/cell';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';

@Component({
selector: 'cell-widget-test',
template: ` <img nz-tooltip nzTooltipTitle="Client it" [src]="data.value" class="img" style="cursor: pointer" /> `,
template: `<img nz-tooltip nzTooltipTitle="Client it" [src]="data.result.text" class="img" style="cursor: pointer" /> `,
host: {
'(click)': 'show()'
},
changeDetection: ChangeDetectionStrategy.OnPush
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [ NzToolTipModule ]
})
export class CellTestWidget implements CellWidgetInstance {
private readonly msg = inject(NzMessageService);
static readonly KEY = 'test';

readonly data!: CellWidgetData;

constructor(private msg: NzMessageService) {}
readonly data!: CellTextResult;

show(): void {
this.msg.info(`click`);
Expand Down
11 changes: 5 additions & 6 deletions src/app/shared/cell-widget/test.ts
@@ -1,12 +1,12 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';

import type { CellWidgetData, CellWidgetInstance } from '@delon/abc/cell';
import type { CellTextResult, CellWidgetInstance } from '@delon/abc/cell';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';

@Component({
selector: 'cell-widget-test',
template: ` <img nz-tooltip nzTooltipTitle="Client it" [src]="data.value" class="img" style="cursor: pointer" /> `,
template: `<img nz-tooltip nzTooltipTitle="Client it" [src]="data.result.text" class="img" style="cursor: pointer" /> `,
host: {
'(click)': 'show()'
},
Expand All @@ -15,11 +15,10 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
imports: [ NzToolTipModule ]
})
export class CellTestWidget implements CellWidgetInstance {
private readonly msg = inject(NzMessageService);
static readonly KEY = 'test';

readonly data!: CellWidgetData;

constructor(private msg: NzMessageService) {}
readonly data!: CellTextResult;

show(): void {
this.msg.info(`click`);
Expand Down

0 comments on commit 920b5ab

Please sign in to comment.