From 51b9ce098ad7caeec57638ea0285f54f697dbd2e Mon Sep 17 00:00:00 2001 From: Hsuan Lee Date: Thu, 27 Jun 2019 18:05:14 +0800 Subject: [PATCH] fix(module:typography): not render when the edit text has no changes --- .../trans-button/nz-trans-button.module.ts | 19 ++++++++++ components/core/trans-button/public-api.ts | 1 + components/input/nz-autosize.directive.ts | 2 +- components/ng-zorro-antd.module.ts | 3 +- .../typography/nz-typography.component.ts | 36 +++++++++---------- components/typography/nz-typography.module.ts | 8 ++--- 6 files changed, 45 insertions(+), 24 deletions(-) create mode 100644 components/core/trans-button/nz-trans-button.module.ts diff --git a/components/core/trans-button/nz-trans-button.module.ts b/components/core/trans-button/nz-trans-button.module.ts new file mode 100644 index 00000000000..8557ba07b68 --- /dev/null +++ b/components/core/trans-button/nz-trans-button.module.ts @@ -0,0 +1,19 @@ +/** + * @license + * Copyright Alibaba.com All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE + */ + +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; + +import { NzTransButtonDirective } from './nz-trans-button.directive'; + +@NgModule({ + declarations: [NzTransButtonDirective], + exports: [NzTransButtonDirective], + imports: [CommonModule] +}) +export class NzTransButtonModule {} diff --git a/components/core/trans-button/public-api.ts b/components/core/trans-button/public-api.ts index d71b8eaee52..32cdee08643 100644 --- a/components/core/trans-button/public-api.ts +++ b/components/core/trans-button/public-api.ts @@ -6,4 +6,5 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ +export { NzTransButtonModule } from './nz-trans-button.module'; export { NzTransButtonDirective } from './nz-trans-button.directive'; diff --git a/components/input/nz-autosize.directive.ts b/components/input/nz-autosize.directive.ts index 5eda45a6bbc..321fa6a9f2b 100644 --- a/components/input/nz-autosize.directive.ts +++ b/components/input/nz-autosize.directive.ts @@ -144,7 +144,7 @@ export class NzAutosizeDirective implements AfterViewInit, OnDestroy, DoCheck { textareaClone.style.overflow = 'hidden'; this.el.parentNode!.appendChild(textareaClone); - this.cachedLineHeight = textareaClone.clientHeight; + this.cachedLineHeight = textareaClone.clientHeight - this.inputGap - 1; this.el.parentNode!.removeChild(textareaClone); // Min and max heights have to be re-calculated if the cached line height changes diff --git a/components/ng-zorro-antd.module.ts b/components/ng-zorro-antd.module.ts index b5e1c7a220d..a009c1046ea 100644 --- a/components/ng-zorro-antd.module.ts +++ b/components/ng-zorro-antd.module.ts @@ -16,7 +16,7 @@ import { NzCascaderModule } from 'ng-zorro-antd/cascader'; import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'; import { NzCollapseModule } from 'ng-zorro-antd/collapse'; import { NzCommentModule } from 'ng-zorro-antd/comment'; -import { warnDeprecation, NzNoAnimationModule, NzWaveModule } from 'ng-zorro-antd/core'; +import { warnDeprecation, NzNoAnimationModule, NzWaveModule, NzTransButtonModule } from 'ng-zorro-antd/core'; import { NzDatePickerModule } from 'ng-zorro-antd/date-picker'; import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions'; import { NzDividerModule } from 'ng-zorro-antd/divider'; @@ -160,6 +160,7 @@ export * from './version'; NzCardModule, NzAvatarModule, NzTimelineModule, + NzTransButtonModule, NzTransferModule, NzCarouselModule, NzCollapseModule, diff --git a/components/typography/nz-typography.component.ts b/components/typography/nz-typography.component.ts index 863bdd305fe..816580aa205 100644 --- a/components/typography/nz-typography.component.ts +++ b/components/typography/nz-typography.component.ts @@ -125,7 +125,9 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy, onEndEditing(text: string): void { this.editing = false; this.nzContentChange.emit(text); - this.resizeOnNextFrameIfNeed(); + if (this.nzContent === text) { + this.renderOnNextFrame(); + } } onExpand(): void { @@ -144,7 +146,7 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy, } } - resizeOnNextFrameIfNeed(): void { + renderOnNextFrame(): void { cancelRequestAnimationFrame(this.rfaId); if (!this.viewInit || !this.nzEllipsis || this.nzEllipsisRows < 0 || this.expanded || !this.platform.isBrowser) { return; @@ -186,32 +188,30 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy, removeView(); - if (this.ellipsisText !== text || this.isEllipsis !== ellipsis) { - this.ellipsisText = text; - this.isEllipsis = ellipsis; - const ellipsisContainerNativeElement = this.ellipsisContainer.nativeElement; - while (ellipsisContainerNativeElement.firstChild) { - this.renderer.removeChild(ellipsisContainerNativeElement, ellipsisContainerNativeElement.firstChild); - } - contentNodes.forEach(n => { - this.renderer.appendChild(ellipsisContainerNativeElement, n.cloneNode(true)); - }); - this.cdr.markForCheck(); + this.ellipsisText = text; + this.isEllipsis = ellipsis; + const ellipsisContainerNativeElement = this.ellipsisContainer.nativeElement; + while (ellipsisContainerNativeElement.firstChild) { + this.renderer.removeChild(ellipsisContainerNativeElement, ellipsisContainerNativeElement.firstChild); } + contentNodes.forEach(n => { + this.renderer.appendChild(ellipsisContainerNativeElement, n.cloneNode(true)); + }); + this.cdr.markForCheck(); } - private resizeAndSubscribeWindowResize(): void { + private renderAndSubscribeWindowResize(): void { if (this.platform.isBrowser) { this.windowResizeSubscription.unsubscribe(); this.cssEllipsis = this.canUseCSSEllipsis(); - this.resizeOnNextFrameIfNeed(); + this.renderOnNextFrame(); this.ngZone.runOutsideAngular(() => { this.windowResizeSubscription = fromEvent(window, 'resize') .pipe( auditTime(16), takeUntil(this.destroy$) ) - .subscribe(() => this.resizeOnNextFrameIfNeed()); + .subscribe(() => this.renderOnNextFrame()); }); } } @@ -225,7 +225,7 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy, ngAfterViewInit(): void { this.viewInit = true; - this.resizeAndSubscribeWindowResize(); + this.renderAndSubscribeWindowResize(); } ngOnChanges(changes: SimpleChanges): void { @@ -235,7 +235,7 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy, if (this.expanded) { this.windowResizeSubscription.unsubscribe(); } else { - this.resizeAndSubscribeWindowResize(); + this.renderAndSubscribeWindowResize(); } } } diff --git a/components/typography/nz-typography.module.ts b/components/typography/nz-typography.module.ts index 217ef2472d5..e80b7319bc6 100644 --- a/components/typography/nz-typography.module.ts +++ b/components/typography/nz-typography.module.ts @@ -9,7 +9,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { NzTransButtonDirective } from 'ng-zorro-antd/core'; +import { NzTransButtonModule } from 'ng-zorro-antd/core'; import { NzI18nModule } from 'ng-zorro-antd/i18n'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzInputModule } from 'ng-zorro-antd/input'; @@ -20,8 +20,8 @@ import { NzTextEditComponent } from './nz-text-edit.component'; import { NzTypographyComponent } from './nz-typography.component'; @NgModule({ - imports: [CommonModule, NzIconModule, NzToolTipModule, NzInputModule, NzI18nModule], - exports: [NzTypographyComponent, NzTextCopyComponent, NzTextEditComponent, NzTransButtonDirective], - declarations: [NzTypographyComponent, NzTextCopyComponent, NzTextEditComponent, NzTransButtonDirective] + imports: [CommonModule, NzIconModule, NzToolTipModule, NzInputModule, NzI18nModule, NzTransButtonModule], + exports: [NzTypographyComponent, NzTextCopyComponent, NzTextEditComponent], + declarations: [NzTypographyComponent, NzTextCopyComponent, NzTextEditComponent] }) export class NzTypographyModule {}