feat(module:typography): support custom icons and tooltips

close NG-ZORRO#5888
hsuanxyz · Oct 13, 2020 · f716418 · f716418
1 parent 6b5fdee
commit f716418
Show file tree

Hide file tree

Showing 8 changed files with 256 additions and 16 deletions.
diff --git a/components/typography/demo/interactive.ts b/components/typography/demo/interactive.ts
@@ -4,11 +4,34 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-typography-interactive',
   template: `
     <p nz-typography nzEditable [(nzContent)]="editStr"></p>
+    <p nz-typography nzEditable nzEditIcon="highlight" nzEditTooltip="click to edit text" [(nzContent)]="customEditIconStr"></p>
+    <p nz-typography nzEditable [nzEditTooltip]="null" [(nzContent)]="hideEditTooltipStr"></p>
     <p nz-typography nzCopyable nzEditable [(nzContent)]="copyStr"></p>
     <p nz-typography nzCopyable nzCopyText="Hello, Ant Design!">Replace copy text.</p>
-  `
+    <p
+      nz-typography
+      nzCopyable
+      nzContent="Custom copy icons and tooltips text."
+      [nzCopyTooltips]="['click here', copedIcon]"
+      [nzCopyIcons]="['meh', 'smile']"
+    ></p>
+    <ng-template #copedIcon>
+      <i nz-icon nzType="smile" nzTheme="fill"></i>
+      you clicked!!
+    </ng-template>
+    <p nz-typography nzCopyable [nzCopyTooltips]="null" nzContent="Hide copy tooltips."></p>
+  `,
+  styles: [
+    `
+      p[nz-typography] {
+        margin-bottom: 1em;
+      }
+    `
+  ]
 })
 export class NzDemoTypographyInteractiveComponent {
   editStr = 'This is an editable text.';
+  customEditIconStr = 'Custom edit icon and tooltip text.';
+  hideEditTooltipStr = 'Hide edit tooltip.';
   copyStr = 'This is a copyable text.';
 }
diff --git a/components/typography/doc/index.en-US.md b/components/typography/doc/index.en-US.md
@@ -26,6 +26,10 @@ import { NzTypographyModule } from 'ng-zorro-antd/typography';
 | `[nzContent]` | Component content | `string` | - ||
 | `[nzCopyable]` | Can copy, require use `[nzContent]` | `boolean` | `false` ||
 | `[nzEditable]` | Editable, require use `[nzContent]` | `boolean` | `false` ||
+| `[nzCopyIcons]` | Custom copy icons | `[string \| TemplateRef<void>, string \| TemplateRef<void>]` | `['copy', 'check']` | ✅ |
+| `[nzCopyTooltips]` | Custom tooltips text, hide when it is `null` | `null \| [string \| TemplateRef<void>, string \| TemplateRef<void>]` | - | ✅ |
+| `[nzEditIcon]` | Custom edit icon | `string \| TemplateRef<void>` | `'edit'` | ✅ |
+| `[nzEditTooltip]` | Custom tooltip text, hide when it is `null` | `null \| string \| TemplateRef<void>` | - | ✅ |
 | `[nzEllipsis]` | Display ellipsis when overflow, require use `[nzContent]` when dynamic content | `boolean` | `false` ||
 | `[nzSuffix]` | The text suffix when used `nzEllipsis` | `string` | - ||
 | `[nzCopyText]` | Customize the copy text | `string` | - ||

diff --git a/components/typography/doc/index.zh-CN.md b/components/typography/doc/index.zh-CN.md
@@ -26,6 +26,10 @@ import { NzTypographyModule } from 'ng-zorro-antd/typography';
 | `[nzContent]` | 组件内容 | `string` | - |
 | `[nzCopyable]` | 是否可拷贝，需要配合 `[nzContent]` 使用 | `boolean` | `false` |
 | `[nzEditable]` | 是否可编辑，需要配合 `[nzContent]` 使用 | `boolean` | `false` |
+| `[nzCopyIcons]` | 自定义拷贝图标 | `[string \| TemplateRef<void>, string \| TemplateRef<void>]` | `['copy', 'check']` | ✅ |
+| `[nzCopyTooltips]` | 自定义提示文案，为 `null` 时隐藏文案 | `null \| [string \| TemplateRef<void>, string \| TemplateRef<void>]` | - | ✅ |
+| `[nzEditIcon]` | 自定义编辑图标 | `string \| TemplateRef<void>` | `'edit'` | ✅ |
+| `[nzEditTooltip]` | 自定义提示文案，为 `null` 时隐藏文案 | `null \| string \| TemplateRef<void>` | - | ✅ |
 | `[nzEllipsis]` | 自动溢出省略，动态内容时需要配合 `[nzContent]` 使用 | `boolean` | `false` |
 | `[nzExpandable]` | 自动溢出省略时是否可展开 | `boolean` | `false` ||
 | `[nzSuffix]` | 自动溢出省略时的文本后缀 | `string` | - ||

diff --git a/components/typography/text-copy.component.ts b/components/typography/text-copy.component.ts
@@ -11,11 +11,14 @@ import {
   ElementRef,
   EventEmitter,
   Input,
+  OnChanges,
   OnDestroy,
   OnInit,
   Output,
+  SimpleChanges,
   ViewEncapsulation
 } from '@angular/core';
+import { NzTSType } from 'ng-zorro-antd/core/types';
 
 import { NzI18nService, NzTextI18nInterface } from 'ng-zorro-antd/i18n';
 import { Subject } from 'rxjs';
@@ -28,37 +31,57 @@ import { takeUntil } from 'rxjs/operators';
     <button
       nz-tooltip
       nz-trans-button
-      [nzTooltipTitle]="copied ? locale?.copied : locale?.copy"
+      [nzTooltipTitle]="copied ? copedTooltip : copyTooltip"
       class="ant-typography-copy"
       [class.ant-typography-copy-success]="copied"
       (click)="onClick()"
     >
-      <i nz-icon [nzType]="copied ? 'check' : 'copy'"></i>
+      <ng-container *nzStringTemplateOutlet="copied ? copedIcon : copyIcon; let icon">
+        <i nz-icon [nzType]="icon"></i>
+      </ng-container>
     </button>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false
 })
-export class NzTextCopyComponent implements OnInit, OnDestroy {
+export class NzTextCopyComponent implements OnInit, OnDestroy, OnChanges {
   copied = false;
   copyId: number = -1;
   locale!: NzTextI18nInterface;
   nativeElement = this.host.nativeElement;
+  copyTooltip: NzTSType | null = null;
+  copedTooltip: NzTSType | null = null;
+  copyIcon: NzTSType = 'copy';
+  copedIcon: NzTSType = 'check';
   private destroy$ = new Subject();
 
   @Input() text!: string;
+  @Input() tooltips?: [NzTSType, NzTSType] | null;
+  @Input() icons: [NzTSType, NzTSType] = ['copy', 'check'];
+
   @Output() readonly textCopy = new EventEmitter<string>();
 
   constructor(private host: ElementRef, private cdr: ChangeDetectorRef, private clipboard: Clipboard, private i18n: NzI18nService) {}
 
   ngOnInit(): void {
     this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
       this.locale = this.i18n.getLocaleData('Text');
+      this.updateTooltips();
       this.cdr.markForCheck();
     });
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    const { tooltips, icons } = changes;
+    if (tooltips) {
+      this.updateTooltips();
+    }
+    if (icons) {
+      this.updateIcons();
+    }
+  }
+
   ngOnDestroy(): void {
     clearTimeout(this.copyId);
     this.destroy$.next();
@@ -84,4 +107,26 @@ export class NzTextCopyComponent implements OnInit, OnDestroy {
       this.cdr.detectChanges();
     }, 3000);
   }
+
+  private updateTooltips(): void {
+    if (this.tooltips === null) {
+      this.copedTooltip = null;
+      this.copyTooltip = null;
+    } else if (Array.isArray(this.tooltips)) {
+      const [copyTooltip, copedTooltip] = this.tooltips;
+      this.copyTooltip = copyTooltip || this.locale?.copy;
+      this.copedTooltip = copedTooltip || this.locale?.copied;
+    } else {
+      this.copyTooltip = this.locale?.copy;
+      this.copedTooltip = this.locale?.copied;
+    }
+    this.cdr.markForCheck();
+  }
+
+  private updateIcons(): void {
+    const [copyIcon, copedIcon] = this.icons;
+    this.copyIcon = copyIcon;
+    this.copedIcon = copedIcon;
+    this.cdr.markForCheck();
+  }
 }
diff --git a/components/typography/text-edit.component.ts b/components/typography/text-edit.component.ts
@@ -16,6 +16,7 @@ import {
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
+import { NzTSType } from 'ng-zorro-antd/core/types';
 
 import { NzI18nService, NzTextI18nInterface } from 'ng-zorro-antd/i18n';
 import { NzAutosizeDirective } from 'ng-zorro-antd/input';
@@ -27,8 +28,17 @@ import { takeUntil } from 'rxjs/operators';
   selector: 'nz-text-edit',
   exportAs: 'nzTextEdit',
   template: `
-    <button *ngIf="!editing" [nzTooltipTitle]="locale?.edit" nz-tooltip nz-trans-button class="ant-typography-edit" (click)="onClick()">
-      <i nz-icon nzType="edit"></i>
+    <button
+      *ngIf="!editing"
+      nz-tooltip
+      nz-trans-button
+      class="ant-typography-edit"
+      [nzTooltipTitle]="tooltip === null ? null : tooltip || locale?.edit"
+      (click)="onClick()"
+    >
+      <ng-container *nzStringTemplateOutlet="icon; let icon">
+        <i nz-icon [nzType]="icon"></i>
+      </ng-container>
     </button>
     <ng-container *ngIf="editing">
       <textarea
@@ -39,8 +49,7 @@ import { takeUntil } from 'rxjs/operators';
         (blur)="confirm()"
         (keydown.esc)="onCancel()"
         (keydown.enter)="onEnter($event)"
-      >
-      </textarea>
+      ></textarea>
       <button nz-trans-button class="ant-typography-edit-content-confirm" (click)="confirm()">
         <i nz-icon nzType="enter"></i>
       </button>
@@ -56,6 +65,8 @@ export class NzTextEditComponent implements OnInit, OnDestroy {
   private destroy$ = new Subject();
 
   @Input() text?: string;
+  @Input() icon: NzTSType = 'edit';
+  @Input() tooltip?: null | NzTSType;
   @Output() readonly startEditing = new EventEmitter<void>();
   @Output() readonly endEditing = new EventEmitter<string>();
   @ViewChild('textarea', { static: false }) textarea!: ElementRef<HTMLTextAreaElement>;

diff --git a/components/typography/typography.component.ts b/components/typography/typography.component.ts
@@ -29,7 +29,7 @@ import {
 import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
 import { cancelRequestAnimationFrame, reqAnimFrame } from 'ng-zorro-antd/core/polyfill';
 import { NzResizeService } from 'ng-zorro-antd/core/services';
-import { BooleanInput, NumberInput, NzSafeAny } from 'ng-zorro-antd/core/types';
+import { BooleanInput, NumberInput, NzSafeAny, NzTSType } from 'ng-zorro-antd/core/types';
 import { InputBoolean, InputNumber, isStyleSupport, measure } from 'ng-zorro-antd/core/util';
 
 import { Subject, Subscription } from 'rxjs';
@@ -78,11 +78,19 @@ const EXPAND_ELEMENT_CLASSNAME = 'ant-typography-expand';
     <nz-text-edit
       *ngIf="nzEditable"
       [text]="nzContent"
+      [icon]="nzEditIcon"
+      [tooltip]="nzEditTooltip"
       (endEditing)="onEndEditing($event)"
       (startEditing)="onStartEditing()"
     ></nz-text-edit>
 
-    <nz-text-copy *ngIf="nzCopyable && !editing" [text]="copyText" (textCopy)="onTextCopy($event)"></nz-text-copy>
+    <nz-text-copy
+      *ngIf="nzCopyable && !editing"
+      [text]="copyText"
+      [tooltips]="nzCopyTooltips"
+      [icons]="nzCopyIcons"
+      (textCopy)="onTextCopy($event)"
+    ></nz-text-copy>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -115,6 +123,10 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy,
   @Input() @InputBoolean() nzDisabled = false;
   @Input() @InputBoolean() nzExpandable = false;
   @Input() @InputBoolean() nzEllipsis = false;
+  @Input() @WithConfig() nzCopyTooltips?: [NzTSType, NzTSType] | null = undefined;
+  @Input() @WithConfig() nzCopyIcons: [NzTSType, NzTSType] = ['copy', 'check'];
+  @Input() @WithConfig() nzEditTooltip?: null | NzTSType = undefined;
+  @Input() @WithConfig() nzEditIcon: NzTSType = 'edit';
   @Input() nzContent?: string;
   @Input() @WithConfig() @InputNumber() nzEllipsisRows: number = 1;
   @Input() nzType: 'secondary' | 'warning' | 'danger' | undefined;

diff --git a/components/typography/typography.module.ts b/components/typography/typography.module.ts
@@ -6,6 +6,7 @@ import { ClipboardModule } from '@angular/cdk/clipboard';
 import { PlatformModule } from '@angular/cdk/platform';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
 import { NzTransButtonModule } from 'ng-zorro-antd/core/trans-button';
 
 import { NzI18nModule } from 'ng-zorro-antd/i18n';
@@ -18,7 +19,7 @@ import { NzTextEditComponent } from './text-edit.component';
 import { NzTypographyComponent } from './typography.component';
 
 @NgModule({
-  imports: [CommonModule, NzIconModule, NzToolTipModule, NzInputModule, NzI18nModule, NzTransButtonModule, ClipboardModule],
+  imports: [CommonModule, NzIconModule, NzToolTipModule, NzInputModule, NzI18nModule, NzTransButtonModule, ClipboardModule, NzOutletModule],
   exports: [NzTypographyComponent, NzTextCopyComponent, NzTextEditComponent, PlatformModule],
   declarations: [NzTypographyComponent, NzTextCopyComponent, NzTextEditComponent]
 })