fix(module:time-picker): placeholder not update with i18n changes (#6069

) Co-authored-by: Sven Depickere <sven.depickere@sofico.be>
NG-ZORRO · Dec 15, 2020 · f34840b · f34840b
1 parent 8029ef4
commit f34840b
Show file tree

Hide file tree

Showing 22 changed files with 77 additions and 41 deletions.
diff --git a/components/back-top/back-top.component.ts b/components/back-top/back-top.component.ts
@@ -39,7 +39,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'backTop';
   exportAs: 'nzBackTop',
   animations: [fadeMotion],
   template: `
-    <div class="ant-back-top" [class.ant-back-top-rtl]="dir === 'rtl' " (click)="clickBackTop()" @fadeMotion *ngIf="visible">
+    <div class="ant-back-top" [class.ant-back-top-rtl]="dir === 'rtl'" (click)="clickBackTop()" @fadeMotion *ngIf="visible">
       <ng-template #defaultContent>
         <div class="ant-back-top-content">
           <div class="ant-back-top-icon">

diff --git a/components/card/card.component.ts b/components/card/card.component.ts
@@ -105,7 +105,8 @@ export class NzCardComponent implements OnDestroy, OnInit {
     public nzConfigService: NzConfigService,
     private cdr: ChangeDetectorRef,
     private elementRef: ElementRef,
-    @Optional() private directionality: Directionality) {
+    @Optional() private directionality: Directionality
+  ) {
     // TODO: move to host after View Engine deprecation
     this.elementRef.nativeElement.classList.add('ant-card');
 

diff --git a/components/checkbox/checkbox-group.component.ts b/components/checkbox/checkbox-group.component.ts
@@ -50,8 +50,8 @@ export interface NzCheckBoxOptionInterface {
 export class NzCheckboxGroupComponent implements ControlValueAccessor, OnInit, OnDestroy {
   static ngAcceptInputType_nzDisabled: BooleanInput;
 
-  onChange: OnChangeType = () => { };
-  onTouched: OnTouchedType = () => { };
+  onChange: OnChangeType = () => {};
+  onTouched: OnTouchedType = () => {};
   options: NzCheckBoxOptionInterface[] = [];
   @Input() @InputBoolean() nzDisabled = false;
 

diff --git a/components/checkbox/checkbox.component.ts b/components/checkbox/checkbox.component.ts
@@ -78,8 +78,8 @@ export class NzCheckboxComponent implements OnInit, ControlValueAccessor, OnDest
   dir: Direction = 'ltr';
   private destroy$ = new Subject<void>();
 
-  onChange: OnChangeType = () => { };
-  onTouched: OnTouchedType = () => { };
+  onChange: OnChangeType = () => {};
+  onTouched: OnTouchedType = () => {};
   @ViewChild('inputElement', { static: true }) private inputElement!: ElementRef;
   @Output() readonly nzCheckedChange = new EventEmitter<boolean>();
   @Input() nzValue: NzSafeAny | null = null;

diff --git a/components/collapse/collapse.component.ts b/components/collapse/collapse.component.ts
@@ -61,7 +61,8 @@ export class NzCollapseComponent implements OnDestroy, OnInit {
     public nzConfigService: NzConfigService,
     private cdr: ChangeDetectorRef,
     private elementRef: ElementRef,
-    @Optional() private directionality: Directionality) {
+    @Optional() private directionality: Directionality
+  ) {
     // TODO: move to host after View Engine deprecation
     this.elementRef.nativeElement.classList.add('ant-collapse');
 

diff --git a/components/drawer/drawer.spec.ts b/components/drawer/drawer.spec.ts
@@ -694,7 +694,7 @@ class NzTestDrawerWithServiceComponent {
   templateCloseSpy = jasmine.createSpy('template afterClose spy');
   templateDrawerRef?: NzDrawerRef;
 
-  constructor(private drawerService: NzDrawerService) { }
+  constructor(private drawerService: NzDrawerService) {}
 
   openTemplate(): void {
     this.templateDrawerRef = this.drawerService.create({
@@ -718,7 +718,7 @@ class NzTestDrawerWithServiceComponent {
 export class NzDrawerCustomComponent {
   @Input() value: any; // tslint:disable-line:no-any
 
-  constructor(private drawerRef: NzDrawerRef) { }
+  constructor(private drawerRef: NzDrawerRef) {}
 
   close(): void {
     this.drawerRef.close(this.value);

diff --git a/components/input-number/input-number.component.ts b/components/input-number/input-number.component.ts
@@ -106,8 +106,8 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn
   disabledUp = false;
   disabledDown = false;
   dir: Direction = 'ltr';
-  onChange: OnChangeType = () => { };
-  onTouched: OnTouchedType = () => { };
+  onChange: OnChangeType = () => {};
+  onTouched: OnTouchedType = () => {};
   @Output() readonly nzBlur = new EventEmitter();
   @Output() readonly nzFocus = new EventEmitter();
   @ViewChild('inputElement', { static: true }) inputElement!: ElementRef<HTMLInputElement>;

diff --git a/components/layout/layout.component.ts b/components/layout/layout.component.ts
@@ -4,7 +4,17 @@
  */
 
 import { Direction, Directionality } from '@angular/cdk/bidi';
-import { ChangeDetectionStrategy, Component, ContentChildren, ElementRef, OnDestroy, OnInit, Optional, QueryList, ViewEncapsulation } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChildren,
+  ElementRef,
+  OnDestroy,
+  OnInit,
+  Optional,
+  QueryList,
+  ViewEncapsulation
+} from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { NzSiderComponent } from './sider.component';

diff --git a/components/message/message-container.component.ts b/components/message/message-container.component.ts
@@ -31,7 +31,7 @@ const NZ_MESSAGE_DEFAULT_CONFIG: Required<MessageConfig> = {
   exportAs: 'nzMessageContainer',
   preserveWhitespaces: false,
   template: `
-    <div class="ant-message" [class.ant-message-rtl]=" dir === 'rtl' " [style.top]="top">
+    <div class="ant-message" [class.ant-message-rtl]="dir === 'rtl'" [style.top]="top">
       <nz-message *ngFor="let instance of instances" [instance]="instance" (destroyed)="remove($event.id, $event.userAction)"></nz-message>
     </div>
   `

diff --git a/components/page-header/page-header.component.ts b/components/page-header/page-header.component.ts
@@ -43,7 +43,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'pageHeader';
         <div *ngIf="nzBackIcon !== null" (click)="onBack()" class="ant-page-header-back">
           <div role="button" tabindex="0" class="ant-page-header-back-button">
             <ng-container *nzStringTemplateOutlet="nzBackIcon; let backIcon">
-              <i nz-icon [nzType]="backIcon  || getBackIcon()" nzTheme="outline"></i>
+              <i nz-icon [nzType]="backIcon || getBackIcon()" nzTheme="outline"></i>
             </ng-container>
           </div>
         </div>

diff --git a/components/result/result.component.ts b/components/result/result.component.ts
@@ -97,10 +97,7 @@ export class NzResultComponent implements OnChanges, OnDestroy, OnInit {
 
   private destroy$ = new Subject<void>();
 
-  constructor(
-    private elementRef: ElementRef,
-    private cdr: ChangeDetectorRef,
-    @Optional() private directionality: Directionality) {
+  constructor(private elementRef: ElementRef, private cdr: ChangeDetectorRef, @Optional() private directionality: Directionality) {
     // TODO: move to host after View Engine deprecation
     this.elementRef.nativeElement.classList.add('ant-result');
   }
@@ -132,7 +129,7 @@ export class NzResultComponent implements OnChanges, OnDestroy, OnInit {
         ? IconMap[icon as NzResultIconType] || icon
         : icon
       : this.isException
-        ? undefined
-        : IconMap[this.nzStatus as NzResultIconType];
+      ? undefined
+      : IconMap[this.nzStatus as NzResultIconType];
   }
 }
diff --git a/components/result/result.spec.ts b/components/result/result.spec.ts
@@ -17,9 +17,7 @@ import { NzResultModule } from './result.module';
       <i nz-icon nz-result-icon nzType="up" nzTheme="outline"></i>
       <div nz-result-title>Content Title</div>
       <div nz-result-subtitle>Content SubTitle</div>
-      <div nz-result-content>
-        Content
-      </div>
+      <div nz-result-content>Content</div>
       <div nz-result-extra>Content Extra</div>
     </nz-result>
   `

diff --git a/components/select/select.component.ts b/components/select/select.component.ts
@@ -234,8 +234,8 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterVie
   private value: NzSafeAny | NzSafeAny[];
   private destroy$ = new Subject();
   private _nzShowArrow: boolean | undefined;
-  onChange: OnChangeType = () => { };
-  onTouched: OnTouchedType = () => { };
+  onChange: OnChangeType = () => {};
+  onTouched: OnTouchedType = () => {};
   dropDownPosition: 'top' | 'center' | 'bottom' = 'bottom';
   triggerWidth: number | null = null;
   listOfContainerItem: NzSelectItemInterface[] = [];

diff --git a/components/time-picker/time-picker-panel.component.ts b/components/time-picker/time-picker-panel.component.ts
@@ -162,7 +162,7 @@ export class NzTimePickerPanelComponent implements ControlValueAccessor, OnInit,
   @Input() nzAddOn?: TemplateRef<void>;
   @Input() nzHideDisabledOptions = false;
   @Input() nzClearText?: string;
-  @Input() nzPlaceHolder?: string;
+  @Input() nzPlaceHolder?: string | null;
   @Input() @InputBoolean() nzUse12Hours = false;
   @Input() nzDefaultOpenValue?: Date;
 

diff --git a/components/time-picker/time-picker.component.spec.ts b/components/time-picker/time-picker.component.spec.ts
@@ -6,7 +6,7 @@ import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { dispatchMouseEvent } from 'ng-zorro-antd/core/testing';
 import { getPickerInput } from 'ng-zorro-antd/date-picker/testing/util';
-import { NzI18nModule } from '../i18n/nz-i18n.module';
+import { en_GB, NzI18nModule, NzI18nService } from '../i18n';
 import { NzTimePickerComponent } from './time-picker.component';
 import { NzTimePickerModule } from './time-picker.module';
 
@@ -151,6 +151,27 @@ describe('time-picker', () => {
       fixture.detectChanges();
       expect(fixture.debugElement.query(By.css(`.anticon-calendar`))).toBeDefined();
     }));
+    describe('setup I18n service', () => {
+      let srv: NzI18nService;
+
+      beforeEach(inject([NzI18nService], (s: NzI18nService) => {
+        srv = s;
+      }));
+
+      it('should detect the language changes', fakeAsync(() => {
+        let placeHolderValue: string | undefined;
+        placeHolderValue = timeElement.nativeElement.querySelector('input').placeholder;
+
+        expect(placeHolderValue).toBe('请选择时间');
+
+        srv.setLocale(en_GB);
+        tick(400);
+        fixture.detectChanges();
+
+        placeHolderValue = timeElement.nativeElement.querySelector('input').placeholder;
+        expect(placeHolderValue).toBe('Select time');
+      }));
+    });
   });
 
   function queryFromOverlay(selector: string): HTMLElement {

diff --git a/components/time-picker/time-picker.component.ts b/components/time-picker/time-picker.component.ts
@@ -33,9 +33,9 @@ import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/con
 import { warn } from 'ng-zorro-antd/core/logger';
 import { BooleanInput, NzSafeAny } from 'ng-zorro-antd/core/types';
 import { InputBoolean, isNil } from 'ng-zorro-antd/core/util';
-import { DateHelperService } from 'ng-zorro-antd/i18n';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { DateHelperService, NzI18nInterface, NzI18nService } from 'ng-zorro-antd/i18n';
+import { Observable, of, Subject } from 'rxjs';
+import { map, takeUntil } from 'rxjs/operators';
 
 const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'timePicker';
 
@@ -50,7 +50,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'timePicker';
         #inputElement
         type="text"
         [size]="inputSize"
-        [placeholder]="nzPlaceHolder || ('TimePicker.placeholder' | nzI18n)"
+        [placeholder]="nzPlaceHolder || (i18nPlaceHolder$ | async)"
         [(ngModel)]="inputValue"
         [disabled]="nzDisabled"
         (focus)="onFocus(true)"
@@ -92,7 +92,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'timePicker';
               [nzDisabledHours]="nzDisabledHours"
               [nzDisabledMinutes]="nzDisabledMinutes"
               [nzDisabledSeconds]="nzDisabledSeconds"
-              [nzPlaceHolder]="nzPlaceHolder || ('TimePicker.placeholder' | nzI18n)"
+              [nzPlaceHolder]="nzPlaceHolder || (i18nPlaceHolder$ | async)"
               [nzHideDisabledOptions]="nzHideDisabledOptions"
               [nzUse12Hours]="nzUse12Hours"
               [nzDefaultOpenValue]="nzDefaultOpenValue"
@@ -138,6 +138,7 @@ export class NzTimePickerComponent implements ControlValueAccessor, OnInit, Afte
   preValue: Date | null = null;
   origin!: CdkOverlayOrigin;
   inputSize?: number;
+  i18nPlaceHolder$: Observable<string | undefined> = of(undefined);
   overlayPositions: ConnectionPositionPair[] = [
     {
       originX: 'start',
@@ -278,6 +279,7 @@ export class NzTimePickerComponent implements ControlValueAccessor, OnInit, Afte
 
   constructor(
     public nzConfigService: NzConfigService,
+    protected i18n: NzI18nService,
     private element: ElementRef,
     private renderer: Renderer2,
     private cdr: ChangeDetectorRef,
@@ -294,6 +296,8 @@ export class NzTimePickerComponent implements ControlValueAccessor, OnInit, Afte
     this.inputSize = Math.max(8, this.nzFormat.length) + 2;
     this.origin = new CdkOverlayOrigin(this.element);
 
+    this.i18nPlaceHolder$ = this.i18n.localeChange.pipe(map((nzLocale: NzI18nInterface) => nzLocale.TimePicker.placeholder));
+
     this.dir = this.directionality.value;
     this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
       this.dir = direction;

diff --git a/components/tooltip/base.ts b/components/tooltip/base.ts
@@ -118,7 +118,7 @@ export abstract class NzTooltipBaseDirective implements OnChanges, OnDestroy, Af
     protected resolver: ComponentFactoryResolver,
     protected renderer: Renderer2,
     protected noAnimation?: NzNoAnimationDirective
-  ) { }
+  ) {}
 
   ngOnChanges(changes: SimpleChanges): void {
     const { specificTrigger } = changes;
@@ -365,7 +365,7 @@ export abstract class NzTooltipBaseComponent implements OnDestroy, OnInit {
     public cdr: ChangeDetectorRef,
     @Optional() private directionality: Directionality,
     public noAnimation?: NzNoAnimationDirective
-  ) { }
+  ) {}
   ngOnInit(): void {
     this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
       this.dir = direction;

diff --git a/components/tooltip/demo/template.ts b/components/tooltip/demo/template.ts
@@ -4,7 +4,10 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-tooltip-template',
   template: `
     <a nz-tooltip [nzTooltipTitle]="titleTemplate">This Tooltip has an Icon</a>
-    <ng-template #titleTemplate> <i nz-icon nzType="file"></i> <span>Tooltip With Icon</span> </ng-template>
+    <ng-template #titleTemplate>
+      <i nz-icon nzType="file"></i>
+      <span>Tooltip With Icon</span>
+    </ng-template>
   `,
   styles: [
     `
@@ -15,4 +18,4 @@ import { Component } from '@angular/core';
     `
   ]
 })
-export class NzDemoTooltipTemplateComponent { }
+export class NzDemoTooltipTemplateComponent {}
diff --git a/components/transfer/transfer.component.ts b/components/transfer/transfer.component.ts
@@ -253,7 +253,8 @@ export class NzTransferComponent implements OnInit, OnChanges, OnDestroy {
     private cdr: ChangeDetectorRef,
     private i18n: NzI18nService,
     private elementRef: ElementRef,
-    @Optional() private directionality: Directionality) {
+    @Optional() private directionality: Directionality
+  ) {
     // TODO: move to host after View Engine deprecation
     this.elementRef.nativeElement.classList.add('ant-transfer');
   }

diff --git a/components/tree-select/tree-select.component.ts b/components/tree-select/tree-select.component.ts
@@ -299,8 +299,8 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
 
   private destroy$ = new Subject<void>();
 
-  onChange: OnChangeType = _value => { };
-  onTouched: OnTouchedType = () => { };
+  onChange: OnChangeType = _value => {};
+  onTouched: OnTouchedType = () => {};
 
   get placeHolderDisplay(): string {
     return this.inputValue || this.isComposing || this.selectedNodes.length ? 'none' : 'block';

diff --git a/components/upload/upload-list.component.ts b/components/upload/upload-list.component.ts
@@ -157,7 +157,7 @@ export class NzUploadListComponent implements OnChanges {
 
           try {
             ctx!.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
-          } catch { }
+          } catch {}
           const dataURL = canvas.toDataURL();
           this.doc.body.removeChild(canvas);
 

diff --git a/components/upload/upload.component.ts b/components/upload/upload.component.ts
@@ -172,7 +172,7 @@ export class NzUploadComponent implements OnInit, OnChanges, OnDestroy {
 
   // #endregion
 
-  constructor(private cdr: ChangeDetectorRef, private i18n: NzI18nService, @Optional() private directionality: Directionality) { }
+  constructor(private cdr: ChangeDetectorRef, private i18n: NzI18nService, @Optional() private directionality: Directionality) {}
 
   // #region upload