From f5dcd81c40cf99ec95d688bf298334403e1bc42f Mon Sep 17 00:00:00 2001
From: Hsuan Lee <hsuangm@gmail.com>
Date: Wed, 19 Jun 2019 15:22:08 +0800
Subject: [PATCH] feat(module:typography): support i18n

---
 components/core/util/style-checke.ts          |  8 +++
 components/i18n/languages/en_US.ts            |  9 +++
 components/i18n/languages/es_ES.ts            |  9 +++
 components/i18n/languages/it_IT.ts            |  6 ++
 components/i18n/languages/ru_RU.ts            |  9 +++
 components/i18n/languages/tr_TR.ts            |  6 ++
 components/i18n/languages/zh_CN.ts            |  9 +++
 components/i18n/languages/zh_TW.ts            |  3 +
 components/input/nz-autosize.directive.ts     |  2 +-
 .../typography/nz-text-copy.component.html    |  2 +-
 .../typography/nz-text-copy.component.ts      | 21 ++++++-
 .../typography/nz-text-edit.component.html    |  2 +-
 .../typography/nz-text-edit.component.ts      | 28 +++++++--
 .../typography/nz-typography.component.html   |  8 +--
 .../typography/nz-typography.component.ts     | 62 ++++++++++++-------
 components/typography/nz-typography.module.ts |  3 +-
 components/typography/style/index.less        | 36 +++--------
 17 files changed, 156 insertions(+), 67 deletions(-)

diff --git a/components/core/util/style-checke.ts b/components/core/util/style-checke.ts
index 98bed55fffc..30ed9148f33 100644
--- a/components/core/util/style-checke.ts
+++ b/components/core/util/style-checke.ts
@@ -1,3 +1,11 @@
+/**
+ * @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
+ */
+
 export function isStyleSupport(styleName: string | string[]): boolean {
   if (typeof window !== 'undefined' && window.document && window.document.documentElement) {
     const styleNameList = Array.isArray(styleName) ? styleName : [styleName];
diff --git a/components/i18n/languages/en_US.ts b/components/i18n/languages/en_US.ts
index 02cae05b950..2e487c393f4 100644
--- a/components/i18n/languages/en_US.ts
+++ b/components/i18n/languages/en_US.ts
@@ -51,5 +51,14 @@ export default {
   },
   Empty: {
     description: 'No Data'
+  },
+  Text: {
+    edit: 'edit',
+    copy: 'copy',
+    copied: 'copy success',
+    expand: 'expand'
+  },
+  PageHeader: {
+    back: 'back'
   }
 };
diff --git a/components/i18n/languages/es_ES.ts b/components/i18n/languages/es_ES.ts
index 5b18a37398e..17b8dc6bd4d 100644
--- a/components/i18n/languages/es_ES.ts
+++ b/components/i18n/languages/es_ES.ts
@@ -46,5 +46,14 @@ export default {
   },
   Empty: {
     description: 'No hay datos'
+  },
+  Text: {
+    edit: 'editar',
+    copy: 'copiar',
+    copied: 'copiado',
+    expand: 'expandir'
+  },
+  PageHeader: {
+    back: 'volver'
   }
 };
diff --git a/components/i18n/languages/it_IT.ts b/components/i18n/languages/it_IT.ts
index 7a7a563d28f..3ed116ec6b8 100644
--- a/components/i18n/languages/it_IT.ts
+++ b/components/i18n/languages/it_IT.ts
@@ -47,5 +47,11 @@ export default {
   },
   Empty: {
     description: 'Nessun dato'
+  },
+  Text: {
+    edit: 'modifica',
+    copy: 'copia',
+    copied: 'copia effettuata',
+    expand: 'espandi'
   }
 };
diff --git a/components/i18n/languages/ru_RU.ts b/components/i18n/languages/ru_RU.ts
index 801441a795e..cf14713b140 100644
--- a/components/i18n/languages/ru_RU.ts
+++ b/components/i18n/languages/ru_RU.ts
@@ -46,5 +46,14 @@ export default {
   },
   Empty: {
     description: 'Нет данных'
+  },
+  Text: {
+    edit: 'редактировать',
+    copy: 'копировать',
+    copied: 'скопировано',
+    expand: 'раскрыть'
+  },
+  PageHeader: {
+    back: 'назад'
   }
 };
diff --git a/components/i18n/languages/tr_TR.ts b/components/i18n/languages/tr_TR.ts
index c9caa1e6f93..c761c0e065b 100644
--- a/components/i18n/languages/tr_TR.ts
+++ b/components/i18n/languages/tr_TR.ts
@@ -46,5 +46,11 @@ export default {
   },
   Empty: {
     description: 'Veri Yok'
+  },
+  Text: {
+    edit: 'düzenle',
+    copy: 'kopyala',
+    copied: 'kopyalandı',
+    expand: 'genişlet'
   }
 };
diff --git a/components/i18n/languages/zh_CN.ts b/components/i18n/languages/zh_CN.ts
index 409c6a44f86..f4d5ede807c 100644
--- a/components/i18n/languages/zh_CN.ts
+++ b/components/i18n/languages/zh_CN.ts
@@ -51,5 +51,14 @@ export default {
   },
   Empty: {
     description: '暂无数据'
+  },
+  Text: {
+    edit: '编辑',
+    copy: '复制',
+    copied: '复制成功',
+    expand: '展开'
+  },
+  PageHeader: {
+    back: '返回'
   }
 };
diff --git a/components/i18n/languages/zh_TW.ts b/components/i18n/languages/zh_TW.ts
index 1199cf2da75..0b6b15b9fa6 100644
--- a/components/i18n/languages/zh_TW.ts
+++ b/components/i18n/languages/zh_TW.ts
@@ -46,5 +46,8 @@ export default {
   },
   Empty: {
     description: '無此資料'
+  },
+  PageHeader: {
+    back: '返回'
   }
 };
diff --git a/components/input/nz-autosize.directive.ts b/components/input/nz-autosize.directive.ts
index 321fa6a9f2b..5eda45a6bbc 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.inputGap - 1;
+    this.cachedLineHeight = textareaClone.clientHeight;
     this.el.parentNode!.removeChild(textareaClone);
 
     // Min and max heights have to be re-calculated if the cached line height changes
diff --git a/components/typography/nz-text-copy.component.html b/components/typography/nz-text-copy.component.html
index 6b05dadf8b1..c1271075354 100644
--- a/components/typography/nz-text-copy.component.html
+++ b/components/typography/nz-text-copy.component.html
@@ -1,4 +1,4 @@
-<nz-tooltip [nzTitle]="copied ? '复制成功' : '复制'">
+<nz-tooltip [nzTitle]="copied ? locale?.copied : locale?.copy">
   <button
     nz-tooltip
     nz-trans-button
diff --git a/components/typography/nz-text-copy.component.ts b/components/typography/nz-text-copy.component.ts
index 0eaa2f56a5d..161894ba1e1 100644
--- a/components/typography/nz-text-copy.component.ts
+++ b/components/typography/nz-text-copy.component.ts
@@ -14,11 +14,15 @@ import {
   EventEmitter,
   Input,
   OnDestroy,
+  OnInit,
   Output,
   ViewEncapsulation
 } from '@angular/core';
 
 import { NzCopyToClipboardService } from 'ng-zorro-antd/core';
+import { NzI18nService } from 'ng-zorro-antd/i18n';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'nz-text-copy',
@@ -27,19 +31,30 @@ import { NzCopyToClipboardService } from 'ng-zorro-antd/core';
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false
 })
-export class NzTextCopyComponent implements OnDestroy {
+export class NzTextCopyComponent implements OnInit, OnDestroy {
   copied = false;
   copyId: number;
-  @Input() getText: () => string;
+  // tslint:disable-next-line:no-any
+  locale: any = {};
+  private destroy$ = new Subject();
 
+  @Input() getText: () => string;
   @Output() readonly textCopy = new EventEmitter<string>();
 
   constructor(
     public host: ElementRef,
     private cdr: ChangeDetectorRef,
-    private copyToClipboard: NzCopyToClipboardService
+    private copyToClipboard: NzCopyToClipboardService,
+    private i18n: NzI18nService
   ) {}
 
+  ngOnInit(): void {
+    this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
+      this.locale = this.i18n.getLocaleData('Text');
+      this.cdr.markForCheck();
+    });
+  }
+
   ngOnDestroy(): void {
     clearTimeout(this.copyId);
   }
diff --git a/components/typography/nz-text-edit.component.html b/components/typography/nz-text-edit.component.html
index 01838c04539..f583db9b0ed 100644
--- a/components/typography/nz-text-edit.component.html
+++ b/components/typography/nz-text-edit.component.html
@@ -1,4 +1,4 @@
-<nz-tooltip *ngIf="!editing" [nzTitle]="'编辑'">
+<nz-tooltip *ngIf="!editing" [nzTitle]="locale?.edit">
   <button
     nz-tooltip
     nz-trans-button
diff --git a/components/typography/nz-text-edit.component.ts b/components/typography/nz-text-edit.component.ts
index 446ade8a2f8..350bb05f251 100644
--- a/components/typography/nz-text-edit.component.ts
+++ b/components/typography/nz-text-edit.component.ts
@@ -8,16 +8,23 @@
 
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
   Input,
   OnDestroy,
+  OnInit,
   Output,
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
 
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { NzI18nService } from 'ng-zorro-antd/i18n';
+
 @Component({
   selector: 'nz-text-edit',
   templateUrl: './nz-text-edit.component.html',
@@ -25,19 +32,32 @@ import {
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false
 })
-export class NzTextEditComponent implements OnDestroy {
+export class NzTextEditComponent implements OnInit, OnDestroy {
   editing = false;
+  // tslint:disable-next-line:no-any
+  locale: any = {};
+  private destroy$ = new Subject();
 
   @Input() getText: () => string;
   @Output() readonly startEditing = new EventEmitter<void>();
   @Output() readonly endEditing = new EventEmitter<string>();
-  @ViewChild('textarea') textarea: ElementRef<HTMLTextAreaElement>;
+  @ViewChild('textarea', { static: false }) textarea: ElementRef<HTMLTextAreaElement>;
 
   beforeText: string;
   currentText: string;
-  constructor(public host: ElementRef) {}
+  constructor(public host: ElementRef, private cdr: ChangeDetectorRef, private i18n: NzI18nService) {}
+
+  ngOnInit(): void {
+    this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
+      this.locale = this.i18n.getLocaleData('Text');
+      this.cdr.markForCheck();
+    });
+  }
 
-  ngOnDestroy(): void {}
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 
   onClick(): void {
     this.beforeText = this.getText();
diff --git a/components/typography/nz-typography.component.html b/components/typography/nz-typography.component.html
index cb9c0518783..6d467d61380 100644
--- a/components/typography/nz-typography.component.html
+++ b/components/typography/nz-typography.component.html
@@ -1,13 +1,13 @@
 <ng-template #contentTemplate>
   <ng-content></ng-content>
 </ng-template>
-<ng-container *ngIf="!editing && nzEllipsisRows === 1">
+<ng-container *ngIf="!editing && (expanded || (!nzExpandable && nzEllipsisRows === 1))">
   <ng-template [ngTemplateOutlet]="contentTemplate"></ng-template>
 </ng-container>
-<ng-container *ngIf="nzEllipsis && nzEllipsisRows > 1">s
+<ng-container *ngIf="nzEllipsis && !expanded && (nzEllipsisRows > 1 || nzExpandable)">
   <span #ellipsisContainer></span>
-  <ng-container *ngIf="isEllipsis">...</ng-container>
-  <a #expandable class="ant-typography-expand">展开</a>
+  <ng-container *ngIf="isEllipsis">{{ellipsisStr}}</ng-container>
+  <a #expandable class="ant-typography-expand" (click)="onExpand()">{{locale?.expand}}</a>
 </ng-container>
 <nz-text-copy *ngIf="nzCopyable" [getText]="getCopyText" (textCopy)="onTextCopy($event)"></nz-text-copy>
 <nz-text-edit
diff --git a/components/typography/nz-typography.component.ts b/components/typography/nz-typography.component.ts
index a039a018178..bffa71f67fb 100644
--- a/components/typography/nz-typography.component.ts
+++ b/components/typography/nz-typography.component.ts
@@ -30,6 +30,7 @@ import { fromEvent, Subject } from 'rxjs';
 import { auditTime, takeUntil } from 'rxjs/operators';
 
 import { cancelRequestAnimationFrame, isStyleSupport, measure, reqAnimFrame, InputBoolean } from 'ng-zorro-antd/core';
+import { NzI18nService } from 'ng-zorro-antd/i18n';
 
 import { NzTextCopyComponent } from './nz-text-copy.component';
 import { NzTextEditComponent } from './nz-text-edit.component';
@@ -52,8 +53,8 @@ import { NzTextEditComponent } from './nz-text-edit.component';
     '[class.ant-typography-warning]': 'nzType === "warning"',
     '[class.ant-typography-danger]': 'nzType === "danger"',
     '[class.ant-typography-disabled]': 'nzDisabled',
-    '[class.ant-typography-ellipsis]': 'nzEllipsis',
-    '[class.ant-typography-ellipsis-single-line]': 'nzEllipsis && nzEllipsisRows === 1'
+    '[class.ant-typography-ellipsis]': 'nzEllipsis && !expanded',
+    '[class.ant-typography-ellipsis-single-line]': 'nzEllipsis && !expanded && nzEllipsisRows === 1'
   }
 })
 export class NzTypographyComponent implements OnInit, AfterContentInit, OnDestroy {
@@ -69,20 +70,22 @@ export class NzTypographyComponent implements OnInit, AfterContentInit, OnDestro
   @Output() readonly nzCopy = new EventEmitter<string>();
   @Output() readonly nzExpand = new EventEmitter<void>();
 
-  @ViewChild(NzTextCopyComponent) textCopyRef: NzTextCopyComponent;
-  @ViewChild(NzTextEditComponent) textEditRef: NzTextEditComponent;
-  @ViewChild('ellipsisContainer') ellipsisContainer: ElementRef<HTMLSpanElement>;
-  @ViewChild('expandable') expandableBtn: ElementRef<HTMLSpanElement>;
-  @ViewChild('contentTemplate') contentTemplate: TemplateRef<void>;
+  @ViewChild(NzTextCopyComponent, { static: false }) textCopyRef: NzTextCopyComponent;
+  @ViewChild(NzTextEditComponent, { static: false }) textEditRef: NzTextEditComponent;
+  @ViewChild('ellipsisContainer', { static: false }) ellipsisContainer: ElementRef<HTMLSpanElement>;
+  @ViewChild('expandable', { static: false }) expandableBtn: ElementRef<HTMLSpanElement>;
+  @ViewChild('contentTemplate', { static: false }) contentTemplate: TemplateRef<void>;
 
   hasOtherChildren = false;
   editing = false;
   ellipsisText: string | undefined;
   isEllipsis: boolean = false;
-  ellipsisContent: Node[] = [];
+  expanded: boolean = false;
+  ellipsisStr = '...';
+  // tslint:disable-next-line:no-any
+  locale: any = {};
 
   private rfaId: number = -1;
-  private expanded: boolean = false;
   private destroy$ = new Subject();
   readonly getText = () => this.host.nativeElement.innerText;
   readonly getCopyText = () => (typeof this.nzCopyText === 'string' ? this.nzCopyText : this.getText());
@@ -92,10 +95,16 @@ export class NzTypographyComponent implements OnInit, AfterContentInit, OnDestro
     private viewContainerRef: ViewContainerRef,
     private renderer: Renderer2,
     private ngZone: NgZone,
-    private platform: Platform
+    private platform: Platform,
+    private i18n: NzI18nService
   ) {}
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
+      this.locale = this.i18n.getLocaleData('Text');
+      this.cdr.markForCheck();
+    });
+  }
 
   onTextCopy(text: string): void {
     this.nzCopy.emit(text);
@@ -110,6 +119,11 @@ export class NzTypographyComponent implements OnInit, AfterContentInit, OnDestro
     this.nzChange.emit(text);
   }
 
+  onExpand(): void {
+    this.expanded = true;
+    this.nzExpand.emit();
+  }
+
   canUseCSSEllipsis(): boolean {
     if (this.nzEditable || this.nzCopyable || this.nzExpandable) {
       return false;
@@ -139,7 +153,7 @@ export class NzTypographyComponent implements OnInit, AfterContentInit, OnDestro
       this.nzEllipsisRows,
       viewRef.rootNodes,
       this.expandableBtn.nativeElement,
-      '...'
+      this.ellipsisStr
     );
     this.viewContainerRef.remove(this.viewContainerRef.indexOf(viewRef));
     if (this.ellipsisText !== text || this.isEllipsis !== ellipsis || true) {
@@ -157,17 +171,19 @@ export class NzTypographyComponent implements OnInit, AfterContentInit, OnDestro
   }
 
   ngAfterContentInit(): void {
-    this.resizeOnNextFrame();
-
-    if (this.platform.isBrowser && this.nzEllipsis) {
-      this.ngZone.runOutsideAngular(() => {
-        fromEvent(window, 'resize')
-          .pipe(
-            auditTime(16),
-            takeUntil(this.destroy$)
-          )
-          .subscribe(() => this.resizeOnNextFrame());
-      });
+    if (this.platform.isBrowser) {
+      this.resizeOnNextFrame();
+
+      if (this.nzEllipsis) {
+        this.ngZone.runOutsideAngular(() => {
+          fromEvent(window, 'resize')
+            .pipe(
+              auditTime(16),
+              takeUntil(this.destroy$)
+            )
+            .subscribe(() => this.resizeOnNextFrame());
+        });
+      }
     }
   }
 
diff --git a/components/typography/nz-typography.module.ts b/components/typography/nz-typography.module.ts
index 52787e9261b..217ef2472d5 100644
--- a/components/typography/nz-typography.module.ts
+++ b/components/typography/nz-typography.module.ts
@@ -10,6 +10,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { NzTransButtonDirective } 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';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
@@ -19,7 +20,7 @@ import { NzTextEditComponent } from './nz-text-edit.component';
 import { NzTypographyComponent } from './nz-typography.component';
 
 @NgModule({
-  imports: [CommonModule, NzIconModule, NzToolTipModule, NzInputModule],
+  imports: [CommonModule, NzIconModule, NzToolTipModule, NzInputModule, NzI18nModule],
   exports: [NzTypographyComponent, NzTextCopyComponent, NzTextEditComponent, NzTransButtonDirective],
   declarations: [NzTypographyComponent, NzTextCopyComponent, NzTextEditComponent, NzTransButtonDirective]
 })
diff --git a/components/typography/style/index.less b/components/typography/style/index.less
index 892a3c7efee..0940298540c 100644
--- a/components/typography/style/index.less
+++ b/components/typography/style/index.less
@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @typography-prefix-cls: ~'@{ant-prefix}-typography';
@@ -30,45 +30,23 @@
   .typography-title(@heading-4-size, 1.4);
 }
 
-.operation-unit() {
-  color: @link-color;
-  text-decoration: none;
-  outline: none;
-  cursor: pointer;
-  transition: color 0.3s;
-
-  &:focus,
-  &:hover {
-    color: @link-hover-color;
-  }
-
-  &:focus {
-    text-decoration: underline;
-    text-decoration-skip-ink: auto;
-  }
-
-  &:active {
-    color: @link-active-color;
-  }
-}
-
 // =============== Basic ===============
 .@{typography-prefix-cls} {
   color: @text-color;
 
-  &-secondary {
+  &&-secondary {
     color: @text-color-secondary;
   }
 
-  &-warning {
-    color: @text-color-warning;
+  &&-warning {
+    color: @warning-color;
   }
 
-  &-danger {
-    color: @text-color-danger;
+  &&-danger {
+    color: @error-color;
   }
 
-  &-disabled {
+  &&-disabled {
     color: @disabled-color;
     cursor: not-allowed;
     user-select: none;