refactor: extract time-picker validateTime helper to avoid duplication (

#8076)
vaadin · Nov 1, 2024 · 1faa71f · 1faa71f
1 parent fbcadcd
commit 1faa71f
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 77 deletions.
diff --git a/packages/date-time-picker/src/vaadin-date-time-picker.js b/packages/date-time-picker/src/vaadin-date-time-picker.js
@@ -20,7 +20,7 @@ import {
 import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
 import { TimePicker } from '@vaadin/time-picker/src/vaadin-time-picker.js';
-import { formatISOTime, parseISOTime } from '@vaadin/time-picker/src/vaadin-time-picker-helper.js';
+import { formatISOTime, parseISOTime, validateTime } from '@vaadin/time-picker/src/vaadin-time-picker-helper.js';
 import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles('vaadin-date-time-picker', inputFieldShared, { moduleId: 'vaadin-date-time-picker' });
@@ -835,29 +835,18 @@ class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(E
    */
   __dateToIsoTimeString(date) {
     return formatISOTime(
-      this.__validateTime({
-        hours: date.getUTCHours(),
-        minutes: date.getUTCMinutes(),
-        seconds: date.getUTCSeconds(),
-        milliseconds: date.getUTCMilliseconds(),
-      }),
+      validateTime(
+        {
+          hours: date.getUTCHours(),
+          minutes: date.getUTCMinutes(),
+          seconds: date.getUTCSeconds(),
+          milliseconds: date.getUTCMilliseconds(),
+        },
+        this.step,
+      ),
     );
   }
 
-  /**
-   * @param {!TimePickerTime} timeObject
-   * @return {!TimePickerTime}
-   * @private
-   */
-  __validateTime(timeObject) {
-    if (timeObject) {
-      const stepSegment = this.__getStepSegment();
-      timeObject.seconds = stepSegment < 3 ? undefined : timeObject.seconds;
-      timeObject.milliseconds = stepSegment < 4 ? undefined : timeObject.milliseconds;
-    }
-    return timeObject;
-  }
-
   /**
    * Returns true if the current input value satisfies all constraints (if any)
    *
@@ -870,25 +859,6 @@ class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(E
     return !hasInvalidPickers && !hasEmptyRequiredPickers;
   }
 
-  // Copied from vaadin-time-picker
-  /** @private */
-  __getStepSegment() {
-    const step = this.step == null ? 60 : parseFloat(this.step);
-    if (step % 3600 === 0) {
-      // Accept hours
-      return 1;
-    } else if (step % 60 === 0 || !step) {
-      // Accept minutes
-      return 2;
-    } else if (step % 1 === 0) {
-      // Accept seconds
-      return 3;
-    } else if (step < 1) {
-      // Accept milliseconds
-      return 4;
-    }
-  }
-
   /**
    * @param {Date} date1
    * @param {Date} date2

diff --git a/packages/time-picker/src/vaadin-time-picker-helper.d.ts b/packages/time-picker/src/vaadin-time-picker-helper.d.ts
@@ -22,3 +22,11 @@ export function formatISOTime(time: TimePickerTime | undefined): string;
  * `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`.
  */
 export function parseISOTime(timeString: string): TimePickerTime | undefined;
+
+/**
+ * A function to validate the time object based on the given step.
+ */
+export function validateTime(
+  timeObject: TimePickerTime | undefined,
+  step: number | null | undefined,
+): TimePickerTime | undefined;
diff --git a/packages/time-picker/src/vaadin-time-picker-helper.js b/packages/time-picker/src/vaadin-time-picker-helper.js
@@ -54,3 +54,38 @@ export function parseISOTime(timeString) {
     return { hours: parts[1], minutes: parts[2], seconds: parts[3], milliseconds: parts[4] };
   }
 }
+
+function getStepSegment(stepValue) {
+  const step = stepValue == null ? 60 : parseFloat(stepValue);
+  if (step % 3600 === 0) {
+    // Accept hours
+    return 1;
+  } else if (step % 60 === 0 || !step) {
+    // Accept minutes
+    return 2;
+  } else if (step % 1 === 0) {
+    // Accept seconds
+    return 3;
+  } else if (step < 1) {
+    // Accept milliseconds
+    return 4;
+  }
+}
+
+/**
+ * A function to validate the time object based on the given step.
+ *
+ * @param {object} timeObject
+ * @param {number} step
+ * @return {object | undefined}
+ */
+export function validateTime(timeObject, step) {
+  if (timeObject) {
+    const stepSegment = getStepSegment(step);
+    timeObject.hours = parseInt(timeObject.hours);
+    timeObject.minutes = parseInt(timeObject.minutes || 0);
+    timeObject.seconds = stepSegment < 3 ? undefined : parseInt(timeObject.seconds || 0);
+    timeObject.milliseconds = stepSegment < 4 ? undefined : parseInt(timeObject.milliseconds || 0);
+  }
+  return timeObject;
+}
diff --git a/packages/time-picker/src/vaadin-time-picker.js b/packages/time-picker/src/vaadin-time-picker.js
@@ -15,7 +15,7 @@ import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-c
 import { PatternMixin } from '@vaadin/field-base/src/pattern-mixin.js';
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
 import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { formatISOTime, parseISOTime } from './vaadin-time-picker-helper.js';
+import { formatISOTime, parseISOTime, validateTime } from './vaadin-time-picker-helper.js';
 
 const MIN_ALLOWED_TIME = '00:00:00.000';
 const MAX_ALLOWED_TIME = '23:59:59.999';
@@ -590,17 +590,17 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
 
   /** @private */
   __updateDropdownItems(_i18n, min, max, step) {
-    const minTimeObj = this.__validateTime(parseISOTime(min || MIN_ALLOWED_TIME));
+    const minTimeObj = validateTime(parseISOTime(min || MIN_ALLOWED_TIME), step);
     const minSec = this.__getSec(minTimeObj);
 
-    const maxTimeObj = this.__validateTime(parseISOTime(max || MAX_ALLOWED_TIME));
+    const maxTimeObj = validateTime(parseISOTime(max || MAX_ALLOWED_TIME), step);
     const maxSec = this.__getSec(maxTimeObj);
 
     this.__dropdownItems = this.__generateDropdownList(minSec, maxSec, step);
 
     if (step !== this.__oldStep) {
       this.__oldStep = step;
-      const parsedObj = this.__validateTime(parseISOTime(this.value));
+      const parsedObj = validateTime(parseISOTime(this.value), step);
       this.__updateValue(parsedObj);
     }
 
@@ -639,7 +639,7 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
 
     let time = -step + minSec;
     while (time + step >= minSec && time + step <= maxSec) {
-      const timeObj = this.__validateTime(this.__addStep(time * 1000, step));
+      const timeObj = validateTime(this.__addStep(time * 1000, step), step);
       time += step;
       const formatted = this.i18n.formatTime(timeObj);
       generatedList.push({ label: formatted, value: formatted });
@@ -729,46 +729,16 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
 
   /** @private */
   __updateValue(obj) {
-    const timeString = formatISOTime(this.__validateTime(obj)) || '';
+    const timeString = formatISOTime(validateTime(obj, this.step)) || '';
     this.value = timeString;
   }
 
   /** @private */
   __updateInputValue(obj) {
-    const timeString = this.i18n.formatTime(this.__validateTime(obj)) || '';
+    const timeString = this.i18n.formatTime(validateTime(obj, this.step)) || '';
     this._comboBoxValue = timeString;
   }
 
-  /** @private */
-  __validateTime(timeObject) {
-    if (timeObject) {
-      const stepSegment = this.__getStepSegment();
-      timeObject.hours = parseInt(timeObject.hours);
-      timeObject.minutes = parseInt(timeObject.minutes || 0);
-      timeObject.seconds = stepSegment < 3 ? undefined : parseInt(timeObject.seconds || 0);
-      timeObject.milliseconds = stepSegment < 4 ? undefined : parseInt(timeObject.milliseconds || 0);
-    }
-    return timeObject;
-  }
-
-  /** @private */
-  __getStepSegment() {
-    if (this.step % 3600 === 0) {
-      // Accept hours
-      return 1;
-    } else if (this.step % 60 === 0 || !this.step) {
-      // Accept minutes
-      return 2;
-    } else if (this.step % 1 === 0) {
-      // Accept seconds
-      return 3;
-    } else if (this.step < 1) {
-      // Accept milliseconds
-      return 4;
-    }
-    return undefined;
-  }
-
   /**
    * Returns true if `time` satisfies the `min` and `max` constraints (if any).
    *