refactor: Date editors with formValue

Author: rkaraivanov

src/components/common/utils.spec.ts

@@ -103,7 +103,7 @@ class FormAssociatedTestBed<T extends IgcFormControl> {
    * If the `waitForUpdate` parameter is `true`, the function waits for the element to be updated before returning.
    */
   public async setProperties(
-    props: { [K in keyof T]?: T[K] },
+    props: { [K in keyof T]?: T[K] | string },
     waitForUpdate = true
   ): Promise<void> {
     Object.assign(this.element, props);

src/components/date-picker/date-picker.ts

@@ -29,6 +29,10 @@ import { IgcBaseComboBoxLikeComponent } from '../common/mixins/combo-box.js';
 import type { AbstractConstructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormAssociatedRequiredMixin } from '../common/mixins/forms/associated-required.js';
+import {
+  type FormValue,
+  createFormValueState,
+} from '../common/mixins/forms/form-value.js';
 import { createCounter, findElementFromEventPath } from '../common/util.js';
 import IgcDateTimeInputComponent from '../date-time-input/date-time-input.js';
 import type { DatePart } from '../date-time-input/date-util.js';
@@ -169,7 +173,6 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
     );
   }
 
-  private _value: Date | null = null;
   private _activeDate: Date | null = null;
   private _min: Date | null = null;
   private _max: Date | null = null;
@@ -204,6 +207,8 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
     return getThemeController(this)?.theme === 'material';
   }
 
+  protected override _formValue: FormValue<Date | null>;
+
   /**
    * Sets the state of the datepicker dropdown.
    * @attr
@@ -246,13 +251,12 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
    */
   @property({ converter: convertToDate })
   public set value(value: Date | string | null | undefined) {
-    this._value = convertToDate(value);
-    this._setFormValue(getDateFormValue(this._value));
+    this._formValue.setValueAndFormState(value as Date | null);
     this._validate();
   }
 
   public get value(): Date | null {
-    return this._value;
+    return this._formValue.value;
   }
 
   /**
@@ -428,6 +432,15 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
   constructor() {
     super();
 
+    this._formValue = createFormValueState<Date | null>(this, {
+      initialValue: null,
+      transformers: {
+        setValue: convertToDate,
+        setDefaultValue: convertToDate,
+        setFormValue: getDateFormValue,
+      },
+    });
+
     this.addEventListener('focusin', this.handleFocusIn);
     this.addEventListener('focusout', this.handleFocusOut);
 
@@ -547,7 +560,7 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
     if (this.readOnly) {
       // Wait till the calendar finishes updating and then restore the current value from the date-picker.
       await this._calendar.updateComplete;
-      this._calendar.value = this._value;
+      this._calendar.value = this.value;
       return;
     }
 
@@ -582,10 +595,6 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
     event.stopPropagation();
   }
 
-  protected override _setDefaultValue(current: string | null) {
-    this.defaultValue = convertToDate(current);
-  }
-
   private setDateConstraints() {
     const dates: DateRangeDescriptor[] = [];
     if (this._min) {

src/components/date-time-input/date-time-input.ts

@@ -1,5 +1,5 @@
 import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { eventOptions, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 
@@ -17,6 +17,10 @@ import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { AbstractConstructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
+import {
+  type FormValue,
+  createFormValueState,
+} from '../common/mixins/forms/form-value.js';
 import { noop, partNameMap } from '../common/util.js';
 import type { IgcInputComponentEventMap } from '../input/input-base.js';
 import {
@@ -81,8 +85,9 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
     return dateTimeInputValidators;
   }
 
+  protected override _formValue: FormValue<Date | null>;
+
   protected _defaultMask!: string;
-  protected _value: Date | null = null;
   private _oldValue: Date | null = null;
   private _min: Date | null = null;
   private _max: Date | null = null;
@@ -118,7 +123,7 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
   }
 
   public get value(): Date | null {
-    return this._value;
+    return this._formValue.value;
   }
 
   /* @tsTwoWayProperty(true, "igcChange", "detail", false) */
@@ -128,8 +133,7 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
    */
   @property({ converter: convertToDate })
   public set value(value: Date | string | null | undefined) {
-    this._value = convertToDate(value);
-    this._setFormValue(getDateFormValue(this._value));
+    this._formValue.setValueAndFormState(value as Date | null);
     this.updateMask();
     this._validate();
   }
@@ -276,6 +280,15 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
   constructor() {
     super();
 
+    this._formValue = createFormValueState(this, {
+      initialValue: null,
+      transformers: {
+        setValue: convertToDate,
+        setDefaultValue: convertToDate,
+        setFormValue: getDateFormValue,
+      },
+    });
+
     addKeybindings(this, {
       skip: () => this.readOnly,
       bindingDefaults: { preventDefault: true, triggers: ['keydownRepeat'] },
@@ -464,6 +477,7 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
     return newDate;
   }
 
+  @eventOptions({ passive: false })
   private async onWheel(event: WheelEvent) {
     if (!this.focused || this.readOnly) {
       return;
@@ -587,7 +601,7 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
     this._oldValue = this.value;
     const areFormatsDifferent = this.displayFormat !== this.inputFormat;
 
-    if (!this._value) {
+    if (!this.value) {
       this.maskedValue = this.emptyMask;
       await this.updateComplete;
       this.select();