Refactoring some properties and types of the DateRangePicker

Author: Ivan Kitanov

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

@@ -17,6 +17,7 @@ import {
   escapeKey,
 } from '../common/controllers/key-bindings.js';
 import { defineComponents } from '../common/definitions/defineComponents.js';
+import { equal } from '../common/util.js';
 import {
   type ValidationContainerTestsParams,
   checkDatesEqual,
@@ -2272,7 +2273,7 @@ const checkSelectedRange = (
     IgcCalendarComponent.tagName
   )!;
 
-  DateTimeUtil.areDateRangesEqual(picker.value, expectedValue);
+  equal(picker.value, expectedValue);
 
   if (!useTwoInputs) {
     const input = picker.renderRoot.querySelector(IgcInputComponent.tagName)!;

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

@@ -49,7 +49,9 @@ import {
   defaultDateRangeTransformers,
 } from '../common/mixins/forms/form-value.js';
 import {
+  clamp,
   createCounter,
+  equal,
   findElementFromEventPath,
   last,
 } from '../common/util.js';
@@ -60,6 +62,11 @@ import IgcFocusTrapComponent from '../focus-trap/focus-trap.js';
 import IgcIconComponent from '../icon/icon.js';
 import IgcInputComponent from '../input/input.js';
 import IgcPopoverComponent from '../popover/popover.js';
+import type {
+  ContentOrientation,
+  DateRangePickerInput,
+  PickerMode,
+} from '../types.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
 import { styles } from './date-range-picker.base.css.js';
 import { dateRangeValidators } from './validators.js';
@@ -226,7 +233,7 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
   private _placeholder?: string;
   private _defaultMask!: string;
   private _oldValue: DateRangeValue | null = null;
-  private _visibleMonths: 1 | 2 = 2;
+  private _visibleMonths = 2;
 
   private predefinedRanges: CustomDateRange[] = [
     {
@@ -333,7 +340,7 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
    * @attr mode
    */
   @property()
-  public mode: 'dropdown' | 'dialog' = 'dropdown';
+  public mode: PickerMode = 'dropdown';
 
   /**
    * Use two inputs to display the date range values. Makes the input editable in dropdown mode.
@@ -380,12 +387,12 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
    */
   //
   @property({ type: Number, attribute: 'visible-months' })
-  public get visibleMonths(): 1 | 2 {
+  public get visibleMonths(): number {
     return this._visibleMonths;
   }
 
-  public set visibleMonths(value: 1 | 2) {
-    this._visibleMonths = [1, 2].includes(value) ? value : 2;
+  public set visibleMonths(value: number) {
+    this._visibleMonths = clamp(value, 1, 2);
   }
 
   /**
@@ -508,14 +515,14 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
    * @attr header-orientation
    */
   @property({ attribute: 'header-orientation', reflect: true })
-  public headerOrientation: 'vertical' | 'horizontal' = 'horizontal';
+  public headerOrientation: ContentOrientation = 'horizontal';
 
   /**
    * The orientation of the multiple months displayed in the calendar's days view.
    *  @attr
    */
   @property()
-  public orientation: 'vertical' | 'horizontal' = 'horizontal';
+  public orientation: ContentOrientation = 'horizontal';
 
   /**
    * Determines whether the calendar hides its header.
@@ -638,7 +645,7 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
 
   protected handleDialogClosing(event: Event) {
     event.stopPropagation();
-    if (!DateTimeUtil.areDateRangesEqual(this.value, this._oldValue)) {
+    if (!equal(this.value, this._oldValue)) {
       this.emitEvent('igcChange', { detail: this.value });
     }
     this._hide(true);
@@ -658,7 +665,7 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
   }
 
   protected dialogDone() {
-    if (!DateTimeUtil.areDateRangesEqual(this.value, this._oldValue)) {
+    if (!equal(this.value, this._oldValue)) {
       this.emitEvent('igcChange', { detail: this.value });
     }
     this._hide(true);
@@ -733,10 +740,7 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
     if (!this.contains(relatedTarget as Node)) {
       this.checkValidity();
 
-      const isSameValue = DateTimeUtil.areDateRangesEqual(
-        this.value,
-        this._oldValue
-      );
+      const isSameValue = equal(this.value, this._oldValue);
       if (!this.useTwoInputs && !this.readOnly && !isSameValue) {
         this.emitEvent('igcChange', { detail: this.value });
       }
@@ -957,7 +961,7 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
     }
   }
 
-  private renderClearIcon(picker: 'start' | 'end' = 'start') {
+  private renderClearIcon(picker: DateRangePickerInput = 'start') {
     const clearIcon = !this.useTwoInputs
       ? 'clear-icon'
       : `clear-icon-${picker}`;
@@ -980,7 +984,7 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
         `;
   }
 
-  private renderCalendarIcon(picker: 'start' | 'end' = 'start') {
+  private renderCalendarIcon(picker: DateRangePickerInput = 'start') {
     const defaultIcon = html`
       <igc-icon name="today" collection="default" aria-hidden="true"></igc-icon>
     `;
@@ -1118,7 +1122,7 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
     return IgcValidationContainerComponent.create(this);
   }
 
-  protected renderInput(id: string, picker: 'start' | 'end' = 'start') {
+  protected renderInput(id: string, picker: DateRangePickerInput = 'start') {
     const readOnly = !this.isDropDown || this.readOnly || this.nonEditable;
     const placeholder =
       picker === 'start' ? this.placeholderStart : this.placeholderEnd;

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

@@ -645,28 +645,4 @@ describe('Date Util', () => {
     DateTimeUtil.spinAmPm(currentDate, newDate, 'AM');
     expect(currentDate.getHours()).to.equal(4);
   });
-
-  it('should correctly compare DateRangeValue objects', () => {
-    const now = new Date();
-    const later = new Date(now.getTime() + 1000 * 60 * 60); // 1 hour later
-
-    const range1 = { start: now, end: later };
-    const range2 = { start: new Date(now), end: new Date(later) };
-    const range3 = { start: new Date(now), end: new Date(now) };
-
-    expect(DateTimeUtil.areDateRangesEqual(range1, range2)).to.be.true;
-
-    expect(DateTimeUtil.areDateRangesEqual(range1, range3)).to.be.false;
-
-    expect(DateTimeUtil.areDateRangesEqual(range1, null)).to.be.false;
-    expect(DateTimeUtil.areDateRangesEqual(null, range2)).to.be.false;
-
-    expect(DateTimeUtil.areDateRangesEqual(null, null)).to.be.true;
-
-    const partial1 = { start: null, end: later };
-    const partial2 = { start: null, end: new Date(later) };
-    const partial3 = { start: now, end: later };
-    expect(DateTimeUtil.areDateRangesEqual(partial1, partial2)).to.be.true;
-    expect(DateTimeUtil.areDateRangesEqual(partial1, partial3)).to.be.false;
-  });
 });

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

@@ -1,5 +1,4 @@
 import { parseISODate } from '../calendar/helpers.js';
-import type { DateRangeValue } from '../date-range-picker/date-range-picker.js';
 import { MaskParser } from '../mask-input/mask-parser.js';
 
 export enum FormatDesc {
@@ -554,29 +553,6 @@ export abstract class DateTimeUtil {
       : format;
   }
 
-  /**
-   * Compares two date-range values.
-   *
-   * @param first, @param second - the values to compare
-   */
-  public static areDateRangesEqual(
-    first: DateRangeValue | null,
-    second: DateRangeValue | null
-  ): boolean {
-    if (!first && !second) {
-      return true;
-    }
-
-    if (!first || !second) {
-      return false;
-    }
-
-    const isStartEqual = first.start?.getTime() === second.start?.getTime();
-    const isEndEqual = first.end?.getTime() === second.end?.getTime();
-
-    return isStartEqual && isEndEqual;
-  }
-
   private static setDisplayFormatOptions(
     value: Date,
     format: string,

src/components/types.ts

@@ -6,6 +6,7 @@ export type AbsolutePosition = 'bottom' | 'middle' | 'top';
 export type ContentOrientation = 'horizontal' | 'vertical';
 export type HorizontalTransitionAnimation = 'slide' | 'fade' | 'none';
 export type PickerMode = 'dropdown' | 'dialog';
+export type DateRangePickerInput = 'start' | 'end';
 export type PopoverScrollStrategy = 'scroll' | 'block' | 'close';
 export type RangeTextSelectMode = 'preserve' | 'select' | 'start' | 'end';
 export type SelectionRangeDirection = 'none' | 'backward' | 'forward';

stories/date-range-picker.stories.ts

@@ -86,10 +86,9 @@ const metadata: Meta<IgcDateRangePickerComponent> = {
       table: { defaultValue: { summary: 'false' } },
     },
     visibleMonths: {
-      type: '1 | 2',
+      type: 'number',
       description: 'The number of months displayed in the calendar.',
-      options: ['1', '2'],
-      control: { type: 'inline-radio' },
+      control: 'number',
     },
     label: {
       type: 'string',
@@ -156,17 +155,17 @@ const metadata: Meta<IgcDateRangePickerComponent> = {
       table: { defaultValue: { summary: '_' } },
     },
     headerOrientation: {
-      type: '"vertical" | "horizontal"',
+      type: '"horizontal" | "vertical"',
       description: 'The orientation of the calendar header.',
-      options: ['vertical', 'horizontal'],
+      options: ['horizontal', 'vertical'],
       control: { type: 'inline-radio' },
       table: { defaultValue: { summary: 'horizontal' } },
     },
     orientation: {
-      type: '"vertical" | "horizontal"',
+      type: '"horizontal" | "vertical"',
       description:
         "The orientation of the multiple months displayed in the calendar's days view.",
-      options: ['vertical', 'horizontal'],
+      options: ['horizontal', 'vertical'],
       control: { type: 'inline-radio' },
       table: { defaultValue: { summary: 'horizontal' } },
     },
@@ -306,7 +305,7 @@ interface IgcDateRangePickerArgs {
   /** Whether the control will show chips with predefined ranges. */
   usePredefinedRanges: boolean;
   /** The number of months displayed in the calendar. */
-  visibleMonths: 1 | 2;
+  visibleMonths: number;
   /** The label of the control (single input). */
   label: string;
   /** The label attribute of the start input. */
@@ -336,9 +335,9 @@ interface IgcDateRangePickerArgs {
   /** The prompt symbol to use for unfilled parts of the mask. */
   prompt: string;
   /** The orientation of the calendar header. */
-  headerOrientation: 'vertical' | 'horizontal';
+  headerOrientation: 'horizontal' | 'vertical';
   /** The orientation of the multiple months displayed in the calendar's days view. */
-  orientation: 'vertical' | 'horizontal';
+  orientation: 'horizontal' | 'vertical';
   /** Determines whether the calendar hides its header. */
   hideHeader: boolean;
   /**