feat(module:rate): support customize character (#6787)

NG-ZORRO · Jun 25, 2021 · 7163e36 · 7163e36
1 parent d1cdd0e
commit 7163e36
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 3 deletions.
diff --git a/components/rate/demo/customize.md b/components/rate/demo/customize.md
@@ -0,0 +1,16 @@
+---
+order: 6
+title:
+  zh-CN: 自定义字符
+  en-US: Customize Character
+---
+
+## zh-CN
+
+可以通过索引自定义每一个字符。
+
+## en-US
+
+Each character can be customized by index.
+
+
diff --git a/components/rate/demo/customize.ts b/components/rate/demo/customize.ts
@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-rate-customize',
+  template: `
+    <nz-rate [ngModel]="2" [nzCharacter]="characterNumber"></nz-rate>
+    <br />
+    <nz-rate [ngModel]="3" [nzCharacter]="characterIcon"></nz-rate>
+    <br />
+    <ng-template #characterNumber let-index>
+      {{ index + 1 }}
+    </ng-template>
+    <ng-template #characterIcon let-index>
+      <ng-container [ngSwitch]="index">
+        <i nz-icon nzType="frown" *ngSwitchCase="0"></i>
+        <i nz-icon nzType="frown" *ngSwitchCase="1"></i>
+        <i nz-icon nzType="meh" *ngSwitchCase="2"></i>
+        <i nz-icon nzType="smile" *ngSwitchCase="3"></i>
+        <i nz-icon nzType="smile" *ngSwitchCase="4"></i>
+      </ng-container>
+    </ng-template>
+  `,
+  styles: [
+    `
+      .large ::ng-deep .ant-rate-star {
+        font-size: 36px;
+      }
+    `
+  ]
+})
+export class NzDemoRateCustomizeComponent {}
diff --git a/components/rate/rate-item.component.ts b/components/rate/rate-item.component.ts
@@ -27,10 +27,16 @@ import { InputBoolean } from 'ng-zorro-antd/core/util';
       (mouseover)="hoverRate(false); $event.stopPropagation()"
       (click)="clickRate(false)"
     >
-      <ng-template [ngTemplateOutlet]="character || defaultCharacter"></ng-template>
+      <ng-template
+        [ngTemplateOutlet]="character || defaultCharacter"
+        [ngTemplateOutletContext]="{ $implicit: index }"
+      ></ng-template>
     </div>
     <div class="ant-rate-star-first" (mouseover)="hoverRate(true); $event.stopPropagation()" (click)="clickRate(true)">
-      <ng-template [ngTemplateOutlet]="character || defaultCharacter"></ng-template>
+      <ng-template
+        [ngTemplateOutlet]="character || defaultCharacter"
+        [ngTemplateOutletContext]="{ $implicit: index }"
+      ></ng-template>
     </div>
 
     <ng-template #defaultCharacter>
@@ -42,6 +48,7 @@ export class NzRateItemComponent {
   static ngAcceptInputType_allowHalf: BooleanInput;
 
   @Input() character!: TemplateRef<void>;
+  @Input() index = 0;
   @Input() @InputBoolean() allowHalf: boolean = false;
   @Output() readonly itemHover = new EventEmitter<boolean>();
   @Output() readonly itemClick = new EventEmitter<boolean>();

diff --git a/components/rate/rate.component.ts b/components/rate/rate.component.ts
@@ -64,6 +64,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'rate';
           nz-rate-item
           [allowHalf]="nzAllowHalf"
           [character]="nzCharacter"
+          [index]="i"
           (itemHover)="onItemHover(i, $event)"
           (itemClick)="onItemClick(i, $event)"
         ></div>

diff --git a/components/rate/rate.spec.ts b/components/rate/rate.spec.ts
@@ -14,7 +14,12 @@ describe('rate', () => {
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports: [BidiModule, NzRateModule, FormsModule, ReactiveFormsModule],
-      declarations: [NzTestRateBasicComponent, NzTestRateFormComponent, NzTestRateRtlComponent]
+      declarations: [
+        NzTestRateBasicComponent,
+        NzTestRateFormComponent,
+        NzTestRateRtlComponent,
+        NzTestRateCharacterComponent
+      ]
     });
     TestBed.compileComponents();
   }));
@@ -255,6 +260,26 @@ describe('rate', () => {
       expect(rate.nativeElement.firstElementChild!.classList).not.toContain('ant-rate-rtl');
     }));
   });
+
+  describe('rate character', () => {
+    let fixture: ComponentFixture<NzTestRateCharacterComponent>;
+    let rate: DebugElement;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(NzTestRateCharacterComponent);
+      fixture.detectChanges();
+      rate = fixture.debugElement.query(By.directive(NzRateComponent));
+    });
+
+    it('should nzCharacter work', () => {
+      fixture.detectChanges();
+      const children = Array.prototype.slice.call(rate.nativeElement.firstElementChild.children) as HTMLElement[];
+      children.forEach((e, index) => {
+        expect(e.querySelector('.ant-rate-star-first')!.textContent).toContain(`${index + 1}`);
+        expect(e.querySelector('.ant-rate-star-second')!.textContent).toContain(`${index + 1}`);
+      });
+    });
+  });
 });
 
 @Component({
@@ -322,3 +347,17 @@ export class NzTestRateRtlComponent {
   @ViewChild(Dir) dir!: Dir;
   direction = 'rtl';
 }
+
+@Component({
+  selector: 'nz-test-rate-character',
+  template: `
+    <nz-rate [(ngModel)]="value" [nzCharacter]="characterTpl"></nz-rate>
+    <ng-template #characterTpl let-index>
+      {{ index + 1 }}
+    </ng-template>
+  `
+})
+export class NzTestRateCharacterComponent {
+  @ViewChild(NzRateComponent, { static: false }) nzRateComponent!: NzRateComponent;
+  value = 5;
+}