refactor(timepicker): transform input props to config props only

valor-software · Nov 14, 2021 · d7d5d48 · d7d5d48
1 parent 4cce2a7
commit d7d5d48
Show file tree

Hide file tree

Showing 10 changed files with 18 additions and 32 deletions.
diff --git a/apps/ngx-bootstrap-docs/src/ng-api-doc.ts b/apps/ngx-bootstrap-docs/src/ng-api-doc.ts
@@ -4315,12 +4315,6 @@ export const ngdoc: any = {
         "defaultValue": "true",
         "type": "boolean",
         "description": "<p>if true spinner arrows above and below the inputs will be shown</p>\n"
-      },
-      {
-        "name": "useUtc",
-        "defaultValue": "false",
-        "type": "boolean",
-        "description": "<p>if true displays utc time instead of client time</p>\n"
       }
     ],
     "outputs": [

diff --git a/libs/doc-pages/timepicker/src/lib/demos/use-utc/use-utc.html b/libs/doc-pages/timepicker/src/lib/demos/use-utc/use-utc.html
@@ -1,9 +1,3 @@
-<timepicker [(ngModel)]="myTime" [useUtc]="useUtc"></timepicker>
-
-<div class="row my-3">
-  <div class="col-xs-6 col-6 col-md-4">
-    <button type="button" class="btn btn-info" (click)="useUtc = !useUtc">useUtc: {{useUtc}}</button>
-  </div>
-</div>
+<timepicker [(ngModel)]="myTime"></timepicker>
 
 <pre class="alert alert-info">Time is: {{myTime}}</pre>
diff --git a/libs/doc-pages/timepicker/src/lib/demos/use-utc/use-utc.ts b/libs/doc-pages/timepicker/src/lib/demos/use-utc/use-utc.ts
@@ -1,11 +1,18 @@
 import { Component } from '@angular/core';
+import { TimepickerConfig } from 'ngx-bootstrap/timepicker';
+
+export function getTimepickerConfig(): TimepickerConfig {
+  return Object.assign(new TimepickerConfig(), {
+    useUtc: true
+  });
+}
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'demo-timepicker-use-utc',
-  templateUrl: './use-utc.html'
+  templateUrl: './use-utc.html',
+  providers: [{ provide: TimepickerConfig, useFactory: getTimepickerConfig }]
 })
 export class DemoTimepickerUseUtcComponent {
   myTime: Date = new Date();
-  useUtc = false;
 }
diff --git a/src/timepicker/reducer/timepicker.reducer.ts b/src/timepicker/reducer/timepicker.reducer.ts
@@ -113,9 +113,7 @@ export function timepickerReducer(state = initialState, action: Action) {
         controls: _newControlsState
       };
 
-      if (state.config.showMeridian !== _newState.config.showMeridian ||
-        state.config.useUtc !== _newState.config.useUtc
-      ) {
+      if (state.config.showMeridian !== _newState.config.showMeridian) {
         if (state.value) {
           _newState.value = new Date(state.value);
         }

diff --git a/src/timepicker/testing/timepicker-controls.util.spec.ts b/src/timepicker/testing/timepicker-controls.util.spec.ts
@@ -36,8 +36,7 @@ describe('Util: Timepicker-controls', () => {
       showSpinners: true,
       showMeridian: true,
       showSeconds: false,
-      meridians: ['AM', 'PM'],
-      useUtc: false
+      meridians: ['AM', 'PM']
     };
 
     controls = {

diff --git a/src/timepicker/testing/timepicker.component.spec.ts b/src/timepicker/testing/timepicker.component.spec.ts
@@ -1180,7 +1180,7 @@ describe('Component: TimepickerComponent', () => {
 
     it('should show utc values instead of client values', () => {
       const time = testTime(12, 0, 0);
-      component.useUtc = true;
+      component.config.useUtc = true;
       component.writeValue(time);
       fixture.detectChanges();
       expect(inputHours.value).toBe(padNumber(time.getUTCHours()));

diff --git a/src/timepicker/testing/timepicker.utils.spec.ts b/src/timepicker/testing/timepicker.utils.spec.ts
@@ -33,8 +33,7 @@ const controls: TimepickerComponentState = {
   showSpinners: false,
   showMeridian: true,
   showSeconds: true,
-  meridians: ['AM', 'PM'],
-  useUtc: false
+  meridians: ['AM', 'PM']
 };
 
 function testTime(hours?: number, minutes?: number, seconds?: number): Date {

diff --git a/src/timepicker/timepicker-controls.util.ts b/src/timepicker/timepicker-controls.util.ts
@@ -95,8 +95,7 @@ export function getControlsValue(
     showSeconds,
     meridians,
     min,
-    max,
-    useUtc
+    max
   } = state;
 
   return {
@@ -112,8 +111,7 @@ export function getControlsValue(
     showSeconds,
     meridians,
     min,
-    max,
-    useUtc
+    max
   };
 }
 

diff --git a/src/timepicker/timepicker.component.ts b/src/timepicker/timepicker.component.ts
@@ -121,8 +121,6 @@ export class TimepickerComponent
   @Output() isValid = new EventEmitter<boolean>();
   /** emits value of meridian*/
   @Output() meridianChange = new EventEmitter<string>();
-  /** if true displays utc time instead of client time */
-  @Input() useUtc = false;
   // ui variables
   hours = '';
   minutes = '';
@@ -411,8 +409,8 @@ export class TimepickerComponent
     }
 
     const _hoursPerDayHalf = 12;
-    let _hours = getHours(_value, this.useUtc);
-    const _minutes = getMinutes(_value, this.useUtc);
+    let _hours = getHours(_value, this.config.useUtc);
+    const _minutes = getMinutes(_value, this.config.useUtc);
 
     if (this.showMeridian) {
       this.meridian = this.meridians[_hours >= _hoursPerDayHalf ? 1 : 0];

diff --git a/src/timepicker/timepicker.models.ts b/src/timepicker/timepicker.models.ts
@@ -36,7 +36,6 @@ export interface TimepickerComponentState {
   showSeconds: boolean;
 
   meridians: string[];
-  useUtc: boolean;
 }
 
 export type TimeChangeSource = 'wheel' | 'key' | '';