From 220006378654ad0917a23c0a1d1823896e297759 Mon Sep 17 00:00:00 2001 From: Hsuan Lee Date: Thu, 11 Jun 2020 11:34:23 +0800 Subject: [PATCH] feat(module:typography): support `nzOnEllipsis` output (#5297) --- components/typography/demo/ellipsis.ts | 12 +++++---- components/typography/demo/interactive.md | 4 +-- components/typography/demo/suffix.ts | 22 +++++++++++++-- components/typography/doc/index.en-US.md | 3 ++- components/typography/doc/index.zh-CN.md | 15 ++++++----- components/typography/typography.component.ts | 27 ++++++++++++++++--- components/typography/typography.spec.ts | 5 +++- 7 files changed, 66 insertions(+), 22 deletions(-) diff --git a/components/typography/demo/ellipsis.ts b/components/typography/demo/ellipsis.ts index 28e7a04fcc0..c5ecfbbd634 100644 --- a/components/typography/demo/ellipsis.ts +++ b/components/typography/demo/ellipsis.ts @@ -3,11 +3,11 @@ import { Component } from '@angular/core'; @Component({ selector: 'nz-demo-typography-ellipsis', template: ` -

+

Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background - applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. + applications, is refined by Ant UED Team. Ant Design


@@ -21,9 +21,11 @@ import { Component } from '@angular/core'; ` }) export class NzDemoTypographyEllipsisComponent { - dynamicContent = `Ant Design, a design language for background applications, is refined by Ant UED Team. -Ant Design, a design language for background applications, is refined by Ant UED Team. -Ant Design, a design language for background applications, is refined by Ant UED Team.`; + dynamicContent = + 'Ant Design, a design language for background applications, is refined by Ant UED Team. ' + + 'Ant Design, a design language for background applications, is refined by Ant UED Team. ' + + 'Ant Design, a design language for background applications, is refined by Ant UED Team. ' + + 'Ant Design, a design language for background applications, is refined by Ant UED Team.'; onChange(event: string): void { this.dynamicContent = event; diff --git a/components/typography/demo/interactive.md b/components/typography/demo/interactive.md index 2e3aee8898b..319f638f6cb 100644 --- a/components/typography/demo/interactive.md +++ b/components/typography/demo/interactive.md @@ -7,8 +7,8 @@ title: ## zh-CN -提供额外的交互能力。 +提供可编辑和可复制等额外的交互能力。 ## en-US -Provide additional interactive capacity. +Provide additional interactive capacity of editable and copyable. diff --git a/components/typography/demo/suffix.ts b/components/typography/demo/suffix.ts index 473a02b438d..b0dfea693b1 100644 --- a/components/typography/demo/suffix.ts +++ b/components/typography/demo/suffix.ts @@ -4,14 +4,32 @@ import { Component } from '@angular/core'; selector: 'nz-demo-typography-suffix', template: ` -

+

{{ content }}

` }) export class NzDemoTypographySuffixComponent { content = - 'To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune'; + 'To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of ' + + 'outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; ' + + 'No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, ' + + "'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! " + + 'For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. ' + + "There 's the respect That makes calamity of so long life"; + suffix = '--William Shakespeare'; rows = 1; + + onEllipsisChange(ellipsis: boolean): void { + console.log(ellipsis); + } } diff --git a/components/typography/doc/index.en-US.md b/components/typography/doc/index.en-US.md index 188094cdcf0..473f6bd0e56 100644 --- a/components/typography/doc/index.en-US.md +++ b/components/typography/doc/index.en-US.md @@ -29,4 +29,5 @@ Basic text writing, including headings, body text, lists, and more. | `[nzEllipsisRows]` | Line number | `number` | `1` | ✅ | | `[nzType]` | Content type | `'secondary'｜'warning'｜'danger'` | - || | `(nzContentChange)` | Trigger when user edit the content | `EventEmitter` | - || -| `(nzExpandChange)` | Trigger when user expanded the content | `EventEmitter` | - || \ No newline at end of file +| `(nzExpandChange)` | Trigger when user expanded the content | `EventEmitter` | - || +| `(nzOnEllipsis)` | Trigger when ellipsis status changed | `EventEmitter` | - || diff --git a/components/typography/doc/index.zh-CN.md b/components/typography/doc/index.zh-CN.md index 7c87c1e5ff5..d815dbadfd2 100644 --- a/components/typography/doc/index.zh-CN.md +++ b/components/typography/doc/index.zh-CN.md @@ -22,11 +22,12 @@ cols: 1 | `[nzCopyable]` | 是否可拷贝，需要配合 `[nzContent]` 使用 | `boolean` | `false` | | `[nzEditable]` | 是否可编辑，需要配合 `[nzContent]` 使用 | `boolean` | `false` | | `[nzEllipsis]` | 自动溢出省略，动态内容时需要配合 `[nzContent]` 使用 | `boolean` | `false` | -| `[nzExpandable]` | 自动溢出省略时是否可展开 | `boolean` | `false` | -| `[nzSuffix]` | 自动溢出省略时的文本后缀 | `string` | - | -| `[nzCopyText]` | 自定义被拷贝的文本 | `string` | - | -| `[nzDisabled]` | 禁用文本 | `boolean` | `false` | +| `[nzExpandable]` | 自动溢出省略时是否可展开 | `boolean` | `false` || +| `[nzSuffix]` | 自动溢出省略时的文本后缀 | `string` | - || +| `[nzCopyText]` | 自定义被拷贝的文本 | `string` | - || +| `[nzDisabled]` | 禁用文本 | `boolean` | `false` || | `[nzEllipsisRows]` | 自动溢出省略时省略行数 | `number` | `1` | ✅ | -| `[nzType]` | 文本类型 | `'secondary'｜'warning'｜'danger'` | - | -| `(nzContentChange)` | 当用户提交编辑内容时触发 | `EventEmitter` | - | -| `(nzExpandChange)` | 展开省略文本时触发 | `EventEmitter` | - | +| `[nzType]` | 文本类型 | `'secondary'｜'warning'｜'danger'` | - || +| `(nzContentChange)` | 当用户提交编辑内容时触发 | `EventEmitter` | - || +| `(nzExpandChange)` | 展开省略文本时触发 | `EventEmitter` | - || +| `(nzOnEllipsis)` | 当省略状态变化时触发 | `EventEmitter` | - || diff --git a/components/typography/typography.component.ts b/components/typography/typography.component.ts index 5c339112cba..1209228268e 100644 --- a/components/typography/typography.component.ts +++ b/components/typography/typography.component.ts @@ -57,10 +57,15 @@ const EXPAND_ELEMENT_CLASSNAME = 'ant-typography-expand'; {{ content }} - - + + {{ nzSuffix }} @@ -112,6 +117,8 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy, @Output() readonly nzContentChange = new EventEmitter(); @Output() readonly nzCopy = new EventEmitter(); @Output() readonly nzExpandChange = new EventEmitter(); + // This is not a two-way binding output with {@link nzEllipsis} + @Output() readonly nzOnEllipsis = new EventEmitter(); @ViewChild(NzTextEditComponent, { static: false }) textEditRef?: NzTextEditComponent; @ViewChild(NzTextCopyComponent, { static: false }) textCopyRef?: NzTextCopyComponent; @@ -129,8 +136,12 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy, expanded: boolean = false; ellipsisStr = '...'; + get hasEllipsisObservers(): boolean { + return this.nzOnEllipsis.observers.length > 0; + } + get canCssEllipsis(): boolean { - return this.nzEllipsis && this.cssEllipsis && !this.expanded; + return this.nzEllipsis && this.cssEllipsis && !this.expanded && !this.hasEllipsisObservers; } private viewInit = false; @@ -175,12 +186,17 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy, this.isEllipsis = false; this.expanded = true; this.nzExpandChange.emit(); + this.nzOnEllipsis.emit(false); } canUseCSSEllipsis(): boolean { if (this.nzEditable || this.nzCopyable || this.nzExpandable || this.nzSuffix) { return false; } + // make sure {@link nzOnEllipsis} works, will force use JS to calculations + if (this.hasEllipsisObservers) { + return false; + } if (this.nzEllipsisRows === 1) { return isStyleSupport('textOverflow'); } else { @@ -233,7 +249,10 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy, removeView(); this.ellipsisText = text; - this.isEllipsis = ellipsis; + if (ellipsis !== this.isEllipsis) { + this.isEllipsis = ellipsis; + this.nzOnEllipsis.emit(ellipsis); + } const ellipsisContainerNativeElement = this.ellipsisContainer!.nativeElement; while (ellipsisContainerNativeElement.firstChild) { this.renderer.removeChild(ellipsisContainerNativeElement, ellipsisContainerNativeElement.firstChild); diff --git a/components/typography/typography.spec.ts b/components/typography/typography.spec.ts index 1d2b6dd61f2..80e6c1b0854 100644 --- a/components/typography/typography.spec.ts +++ b/components/typography/typography.spec.ts @@ -192,7 +192,6 @@ describe('typography', () => { const dynamicContent = componentElement.querySelector('.dynamic')!; expect(singleLine.classList).toContain('ant-typography-ellipsis-single-line'); expect(multipleLine.classList).toContain('ant-typography-ellipsis-multiple-line'); - expect(dynamicContent.classList).toContain('ant-typography-ellipsis-multiple-line'); testComponent.expandable = true; fixture.detectChanges(); expect(singleLine.classList).not.toContain('ant-typography-ellipsis-single-line'); @@ -279,6 +278,7 @@ describe('typography', () => { componentElement.querySelectorAll('p').forEach(e => { expect(e.innerText.includes('...')).toBe(false); }); + expect(testComponent.onEllipsis).toHaveBeenCalledWith(false); viewport.set(400, 1000); dispatchFakeEvent(window, 'resize'); fixture.detectChanges(); @@ -292,6 +292,7 @@ describe('typography', () => { componentElement.querySelectorAll('p').forEach(e => { expect(e.innerText.includes('...')).toBe(true); }); + expect(testComponent.onEllipsis).toHaveBeenCalledWith(true); viewport.reset(); })); @@ -403,6 +404,7 @@ export class NzTestTypographyEditComponent { [nzExpandable]="expandable" [nzEllipsisRows]="2" (nzExpandChange)="onExpand()" + (nzOnEllipsis)="onEllipsis($event)" [nzContent]="str" [nzSuffix]="suffix" class="dynamic" @@ -420,6 +422,7 @@ export class NzTestTypographyEllipsisComponent { expandable = false; onExpand = jasmine.createSpy('expand callback'); suffix: string | null = null; + onEllipsis = jasmine.createSpy('ellipsis callback'); @ViewChild(NzTypographyComponent, { static: false }) nzTypographyComponent!: NzTypographyComponent; str = new Array(5).fill('Ant Design, a design language for background applications, is refined by Ant UED Team.').join(''); }