refactor: add locale as a property of the existing config object

akveo · Jun 15, 2021 · 456b165 · 456b165
1 parent dd93809
commit 456b165
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 38 deletions.
diff --git a/src/framework/theme/components/datepicker/date-timepicker.component.ts b/src/framework/theme/components/datepicker/date-timepicker.component.ts
@@ -3,7 +3,6 @@ import {
   Component,
   ComponentFactoryResolver,
   Inject,
-  Injector,
   Input,
   OnInit,
   Optional,
@@ -89,11 +88,10 @@ export class NbDateTimePickerComponent<D> extends NbBasePickerComponent<D, D, Nb
               triggerStrategyBuilder: NbTriggerStrategyBuilderService,
               overlay: NbOverlayService,
               cfr: ComponentFactoryResolver,
-              injector: Injector,
               dateService: NbDateService<D>,
               @Optional() @Inject(NB_DATE_SERVICE_OPTIONS) dateServiceOptions,
               protected calendarWithTimeModelService: NbCalendarTimeModelService<D>) {
-    super(document, positionBuilder, triggerStrategyBuilder, overlay, cfr, injector, dateService, dateServiceOptions);
+    super(document, positionBuilder, triggerStrategyBuilder, overlay, cfr, dateService, dateServiceOptions);
   }
 
   ngOnInit() {

diff --git a/src/framework/theme/components/datepicker/datepicker.component.ts b/src/framework/theme/components/datepicker/datepicker.component.ts
@@ -20,7 +20,6 @@ import {
   OnInit,
   SimpleChanges,
   Optional,
-  Injector,
 } from '@angular/core';
 import { takeUntil } from 'rxjs/operators';
 import { Observable, ReplaySubject, Subject } from 'rxjs';
@@ -194,7 +193,6 @@ export abstract class NbBasePicker<D, T, P> extends NbDatepicker<T> {
                         protected positionBuilder: NbPositionBuilderService,
                         protected triggerStrategyBuilder: NbTriggerStrategyBuilderService,
                         protected cfr: ComponentFactoryResolver,
-                        protected injector: Injector,
                         protected dateService: NbDateService<D>,
                         protected dateServiceOptions,
   ) {
@@ -283,9 +281,7 @@ export abstract class NbBasePicker<D, T, P> extends NbDatepicker<T> {
   }
 
   protected openDatepicker() {
-    this.container = this.ref.attach(
-      new NbComponentPortal(NbDatepickerContainerComponent, null, this.injector, this.cfr),
-    );
+    this.container = this.ref.attach(new NbComponentPortal(NbDatepickerContainerComponent, null, null, this.cfr));
     this.instantiatePicker();
     this.subscribeOnValueChange();
     this.writeQueue();
@@ -475,11 +471,10 @@ export class NbBasePickerComponent<D, T, P> extends NbBasePicker<D, T, P>
               triggerStrategyBuilder: NbTriggerStrategyBuilderService,
               overlay: NbOverlayService,
               cfr: ComponentFactoryResolver,
-              injector: Injector,
               dateService: NbDateService<D>,
               @Optional() @Inject(NB_DATE_SERVICE_OPTIONS) dateServiceOptions,
   ) {
-    super(overlay, positionBuilder, triggerStrategyBuilder, cfr, injector, dateService, dateServiceOptions);
+    super(overlay, positionBuilder, triggerStrategyBuilder, cfr, dateService, dateServiceOptions);
   }
 
   ngOnInit() {

diff --git a/src/framework/theme/components/timepicker/model.ts b/src/framework/theme/components/timepicker/model.ts
@@ -8,18 +8,24 @@ import { InjectionToken } from '@angular/core';
 
 export const NB_TIME_PICKER_CONFIG = new InjectionToken('NB_TIME_PICKER_CONFIG');
 
-export const NB_TIME_PICKER_LOCALIZATION = new InjectionToken<NbTimepickerLocalization>('NB_TIME_PICKER_LOCALIZATION', {
-  providedIn: 'root',
-  factory: () => {
-    return {
-      hoursText: 'Hr', minutesText: 'Min', secondsText: 'Sec', ampmText: 'Am/Pm',
-    }
-  },
-});
+export interface NbTimepickerLocalizationConfig {
+  hoursText: string,
+  minutesText: string,
+  secondsText: string,
+  ampmText: string,
+}
+
+export const NB_DEFAULT_TIMEPICKER_LOCALIZATION_CONFIG: NbTimepickerLocalizationConfig = {
+  hoursText: 'Hr',
+  minutesText: 'Min',
+  secondsText: 'Sec',
+  ampmText: 'Am/Pm',
+};
 
 export interface NbTimePickerConfig {
   twelveHoursFormat?: boolean,
   format?: string,
+  localization?: NbTimepickerLocalizationConfig,
 }
 
 export interface NbSelectedTimeModel {
@@ -30,10 +36,3 @@ export interface NbSelectedTimePayload<D> {
   time: D,
   save?: boolean,
 }
-
-export interface NbTimepickerLocalization {
-  hoursText: string,
-  minutesText: string,
-  secondsText: string,
-  ampmText: string,
-}
diff --git a/src/framework/theme/components/timepicker/timepicker.component.ts b/src/framework/theme/components/timepicker/timepicker.component.ts
@@ -6,6 +6,7 @@ import {
   EventEmitter,
   Inject,
   Input,
+  LOCALE_ID,
   OnChanges,
   OnInit,
   Output,
@@ -21,11 +22,10 @@ import { NbDateService, NbDayPeriod } from '../calendar-kit/services/date.servic
 import { range, rangeFromTo } from '../calendar-kit/helpers';
 import { NbCalendarTimeModelService } from '../calendar-kit/services/calendar-time-model.service';
 import {
+  NB_DEFAULT_TIMEPICKER_LOCALIZATION_CONFIG,
   NB_TIME_PICKER_CONFIG,
-  NB_TIME_PICKER_LOCALIZATION,
   NbSelectedTimePayload,
   NbTimePickerConfig,
-  NbTimepickerLocalization,
 } from './model';
 
 interface NbTimePartOption {
@@ -151,10 +151,10 @@ export class NbTimePickerComponent<D> implements OnChanges, OnInit {
    */
   @Input() showFooter: boolean = true;
   @Input() applyButtonText: string;
-  @Input() hoursText = this.tokens.hoursText;
-  @Input() minutesText = this.tokens.minutesText;
-  @Input() secondsText = this.tokens.secondsText;
-  @Input() ampmText = this.tokens.ampmText;
+  @Input() hoursText: string;
+  @Input() minutesText: string;
+  @Input() secondsText: string;
+  @Input() ampmText: string;
   @Input() currentTimeButtonText: string;
 
   /**
@@ -164,16 +164,12 @@ export class NbTimePickerComponent<D> implements OnChanges, OnInit {
   @ViewChild(NbPortalDirective, {static: true}) portal: NbPortalDirective;
 
   constructor(@Inject(NB_TIME_PICKER_CONFIG) protected config: NbTimePickerConfig,
-              @Inject(NB_TIME_PICKER_LOCALIZATION) protected tokens: NbTimepickerLocalization,
               protected platformService: NbPlatform,
+              @Inject(LOCALE_ID) locale: string,
               public cd: ChangeDetectorRef,
               protected calendarTimeModelService: NbCalendarTimeModelService<D>,
               protected dateService: NbDateService<D>) {
-    if (config) {
-      this.twelveHoursFormat = config.twelveHoursFormat;
-    } else {
-      this.twelveHoursFormat = dateService.getLocaleTimeFormat().includes('h');
-    }
+    this.initFromConfig(this.config);
   }
 
   ngOnInit(): void {
@@ -348,7 +344,6 @@ export class NbTimePickerComponent<D> implements OnChanges, OnInit {
     }));
   }
 
-
   protected generateMinutesOrSeconds(): NbTimePartOption[] {
     return range(60, (v: number) => {
       return {value: v, text: this.calendarTimeModelService.paddToTwoSymbols(v)};
@@ -375,4 +370,18 @@ export class NbTimePickerComponent<D> implements OnChanges, OnInit {
         : this.dateService.getTwentyFourHoursFormat()}`;
     }
   }
+
+  protected initFromConfig(config: NbTimePickerConfig) {
+    if (config) {
+      this.twelveHoursFormat = config.twelveHoursFormat;
+    } else {
+      this.twelveHoursFormat = this.dateService.getLocaleTimeFormat().includes('h');
+    }
+
+    const localeConfig = { ...NB_DEFAULT_TIMEPICKER_LOCALIZATION_CONFIG, ...config?.localization ?? {} };
+    this.hoursText = localeConfig.hoursText;
+    this.minutesText = localeConfig.minutesText;
+    this.secondsText = localeConfig.secondsText;
+    this.ampmText = localeConfig.ampmText;
+  }
 }