feat(module:rate): add tooltip support (#2794)

* refactor

components/core/util/public-api.ts

@@ -1,7 +1,6 @@
 export * from './check';
 export * from './convert';
 export * from './getMentions';
-export * from './keycodes';
 export * from './nz-global-monitor';
 export * from './textarea-caret-position';
 export * from './throttleByAnimationFrame';

components/icon/nz-icon.service.ts

@@ -83,6 +83,7 @@ export const NZ_ICONS_USED_BY_ZORRO: IconDefinition[] = [
   RightOutline,
   StarFill,
   SearchOutline,
+  StarFill,
   UploadOutline,
   UpOutline
 ];

components/rate/demo/text.ts

@@ -3,10 +3,11 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-rate-text',
   template: `
-    <nz-rate [(ngModel)]="value" nzAllowHalf></nz-rate>
-    <span *ngIf="value" class="ant-rate-text">{{ value }} stars</span>
+    <nz-rate [(ngModel)]="value" [nzTooltips]="tooltips"></nz-rate>
+    <span *ngIf="value" class="ant-rate-text">{{ value ? tooltips[ value - 1 ] : '' }}</span>
   `
 })
 export class NzDemoRateTextComponent {
+  tooltips = [ 'terrible', 'bad', 'normal', 'good', 'wonderful' ];
   value = 3;
 }

components/rate/doc/index.en-US.md

@@ -23,6 +23,7 @@ Rate component.
 | `[nzCharacter]` | custom character of rate | `TemplateRef<void>` | `<i nz-icon type="star"></i>` |
 | `[nzCount]` | star count | `number` | `5` |
 | `[nzDisabled]` | read only, unable to interact | `boolean` | `false` |
+| `[nzTooltips]` | Customize tooltip by each character | `string[]` | `[]` |
 | `[ngModel]` | current value , double binding | `number` | - |
 | `(ngModelChange)` | callback when select value | `EventEmitter<number>` | - |
 | `(nzOnBlur)` | callback when component lose focus | `EventEmitter<FocusEvent>` | - |

components/rate/doc/index.zh-CN.md

@@ -24,6 +24,7 @@ title: Rate
 | `[nzCharacter]` | 自定义字符 | `TemplateRef<void>` | `<i nz-icon type="star"></i>` |
 | `[nzCount]` | star 总数 | `number` | `5` |
 | `[nzDisabled]` | 只读，无法进行交互 | `boolean` | `false` |
+| `[nzTooltips]` | 自定义每项的提示信息 | `string[]` | `[]` |
 | `[ngModel]` | 当前数，可以双向绑定 | `number` | `0` |
 | `(ngModelChange)` | 当前数改变时的回调 | `EventEmitter<number>` | - |
 | `(nzOnBlur)` | 失去焦点时的回调 | `EventEmitter<FocusEvent>` | - |

components/rate/nz-rate-item.component.html

@@ -0,0 +1,16 @@
+<div class="ant-rate-star-second"
+  (mouseover)="hoverRate(false); $event.stopPropagation();"
+  (click)="clickRate(false); $event.stopPropagation();">
+  <ng-template [ngTemplateOutlet]="character || defaultCharacter"></ng-template>
+</div>
+<div class="ant-rate-star-first"
+  (mouseover)="hoverRate(true); $event.stopPropagation();"
+  (click)="clickRate(true); $event.stopPropagation();">
+  <ng-template [ngTemplateOutlet]="character || defaultCharacter"></ng-template>
+</div>
+
+<ng-template #defaultCharacter>
+  <i nz-icon
+    type="star"
+    theme="fill"></i>
+</ng-template>

components/rate/nz-rate-item.component.ts

@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { InputBoolean } from '../core/util';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  selector   : '[nz-rate-item]',
+  templateUrl: './nz-rate-item.component.html'
+})
+export class NzRateItemComponent {
+  @Input() character: TemplateRef<void>;
+  @Input() @InputBoolean() allowHalf: boolean = false;
+  @Output() readonly itemHover = new EventEmitter<boolean>();
+  @Output() readonly itemClick = new EventEmitter<boolean>();
+
+  hoverRate(isHalf: boolean): void {
+    this.itemHover.next(isHalf && this.allowHalf);
+  }
+
+  clickRate(isHalf: boolean): void {
+    this.itemClick.next(isHalf && this.allowHalf);
+  }
+}

components/rate/nz-rate.component.html

@@ -1,23 +1,22 @@
-<ng-template #defaultCharacter>
-  <i nz-icon [type]="'star'" [theme]="'fill'"></i>
-</ng-template>
-<ul
-  #ulElement
+<ul #ulElement
+  class="ant-rate"
+  [class.ant-rate-disabled]="nzDisabled"
   [ngClass]="classMap"
-  (mouseleave)="leaveRate($event)"
-  (focus)="onFocus($event)"
   (blur)="onBlur($event)"
-  (keydown)="onKeyDown($event)"
-  [tabindex]="nzDisabled?-1:1">
-  <li *ngFor="let star of starArray"
+  (focus)="onFocus($event)"
+  (keydown)="onKeyDown($event); $event.preventDefault();"
+  (mouseleave)="onRateLeave(); $event.stopPropagation();"
+  [tabindex]="nzDisabled ? -1 : 1">
+  <li *ngFor="let star of starArray; let i = index"
+    class="ant-rate-star"
     [ngClass]="setClasses(star)"
-    (mouseover)="hoverRate($event, star, true)"
-    (click)="clickRate($event, star, true)">
-    <div class="ant-rate-star-first" (mouseover)="hoverRate($event, star, false)" (click)="clickRate($event, star, false)">
-      <ng-template [ngTemplateOutlet]="nzCharacter||defaultCharacter"></ng-template>
-    </div>
-    <div class="ant-rate-star-second" (mouseover)="hoverRate($event, star, true)" (click)="clickRate($event, star, true)">
-      <ng-template [ngTemplateOutlet]="nzCharacter||defaultCharacter"></ng-template>
+    nz-tooltip
+    [nzTitle]="nzTooltips[ i ]">
+    <div nz-rate-item
+      [allowHalf]="nzAllowHalf"
+      [character]="nzCharacter"
+      (itemHover)="onItemHover(i, $event)"
+      (itemClick)="onItemClick(i, $event)">
     </div>
   </li>
 </ul>